feat: AccordionItem adds icon

demo_markdown/docs/accordion/mod.md

@@ -1,7 +1,6 @@
 # Accordion
 
 ```rust demo
-
 view! {
     <Accordion>
         <AccordionItem value="leptos">
@@ -19,3 +18,49 @@ view! {
     </Accordion>
 }
 ```
+
+### Collapsible
+
+An accordion can have multiple panels collapsed at the same time.
+
+```rust demo
+view! {
+    <Accordion collapsible=true>
+        <AccordionItem value="leptos">
+            <AccordionHeader slot>
+                "Leptos"
+            </AccordionHeader>
+            "Build fast web applications with Rust."
+        </AccordionItem>
+        <AccordionItem  value="thaw">
+            <AccordionHeader slot>
+                "Thaw"
+            </AccordionHeader>
+            "An easy to use leptos component library"
+        </AccordionItem>
+    </Accordion>
+}
+```
+
+### Multiple
+
+An accordion supports multiple panels expanded simultaneously. Since it's not simple to determine which panel will be opened by default, multiple will also be collapsed by default on the first render.
+
+```rust demo
+view! {
+    <Accordion multiple=true>
+        <AccordionItem value="leptos">
+            <AccordionHeader slot>
+                "Leptos"
+            </AccordionHeader>
+            "Build fast web applications with Rust."
+        </AccordionItem>
+        <AccordionItem  value="thaw">
+            <AccordionHeader slot>
+                "Thaw"
+            </AccordionHeader>
+            "An easy to use leptos component library"
+        </AccordionItem>
+    </Accordion>
+}
+```

thaw/src/accordion/accordion-item.css

@@ -29,11 +29,24 @@
     cursor: pointer;
 }
 
+.thaw-accordion-header__expand-icon {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding-right: var(--spacingHorizontalS);
+    font-size: var(--fontSizeBase500);
+    line-height: var(--lineHeightBase500);
+}
+
+.thaw-accordion-header__expand-icon > svg {
+    display: inline;
+    line-height: 0;
+}
+
 .thaw-accordion-panel {
     margin: 0 var(--spacingHorizontalM);
 }
 
-
 .thaw-accordion-panel-enter-from,
 .thaw-accordion-panel-enter-to {
     opacity: 1;

thaw/src/accordion/accordion_item.rs

@@ -5,6 +5,7 @@ use thaw_utils::{mount_style, update, with, StoredMaybeSignal};
 
 #[component]
 pub fn AccordionItem(
+    /// Required value that identifies this item inside an Accordion component.
     #[prop(into)] value: MaybeSignal<String>,
     accordion_header: AccordionHeader,
     children: Children,
@@ -14,7 +15,7 @@ pub fn AccordionItem(
         open_items,
         multiple,
         collapsible,
-    } = AccordionInjection::use_();
+    } = AccordionInjection::expect_context();
     let panel_ref = NodeRef::<html::Div>::new();
     let value: StoredMaybeSignal<_> = value.into();
 
@@ -47,6 +48,25 @@ pub fn AccordionItem(
                     type="button"
                     on:click=on_click
                 >
+                    <span
+                        class="thaw-accordion-header__expand-icon"
+                        aria-hidden="true"
+                    >
+                        <svg
+                            fill="currentColor"
+                            aria-hidden="true"
+                            width="1em"
+                            height="1em"
+                            viewBox="0 0 20 20" 
+                            style=move || if is_show_panel.get() { 
+                                "transform: rotate(90deg)"
+                            } else { 
+                                "transform: rotate(0deg)"
+                            }
+                        >
+                            <path d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z" fill="currentColor"></path>
+                        </svg>
+                    </span>
                     {(accordion_header.children)()}
                 </button>
             </div>

thaw/src/accordion/mod.rs

@@ -40,7 +40,7 @@ pub(crate) struct AccordionInjection {
 }
 
 impl AccordionInjection {
-    pub fn use_() -> AccordionInjection {
+    pub fn expect_context() -> AccordionInjection {
         expect_context()
     }
 }