From 5dc62c8244053dc0305ba57ebda38a1f0f5c6527 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Thu, 18 Jul 2024 21:54:13 +0800
Subject: [PATCH] feat: AccordionItem adds icon

---
 demo_markdown/docs/accordion/mod.md   | 47 ++++++++++++++++++++++++++-
 thaw/src/accordion/accordion-item.css | 17 ++++++++--
 thaw/src/accordion/accordion_item.rs  | 22 ++++++++++++-
 thaw/src/accordion/mod.rs             |  2 +-
 4 files changed, 83 insertions(+), 5 deletions(-)

diff --git a/demo_markdown/docs/accordion/mod.md b/demo_markdown/docs/accordion/mod.md
index 79a89ba..9def26c 100644
--- a/demo_markdown/docs/accordion/mod.md
+++ b/demo_markdown/docs/accordion/mod.md
@@ -1,7 +1,6 @@
 # Accordion
 
 ```rust demo
-
 view! {
     <Accordion>
         <AccordionItem value="leptos">
@@ -18,4 +17,50 @@ view! {
         </AccordionItem>
     </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>
+}
 ```
\ No newline at end of file
diff --git a/thaw/src/accordion/accordion-item.css b/thaw/src/accordion/accordion-item.css
index e9c7b69..5ce6ccf 100644
--- a/thaw/src/accordion/accordion-item.css
+++ b/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;
@@ -57,4 +70,4 @@
     transition: max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1),
         opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
         padding-top 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-}
\ No newline at end of file
+}
diff --git a/thaw/src/accordion/accordion_item.rs b/thaw/src/accordion/accordion_item.rs
index cfe0325..412c5ef 100644
--- a/thaw/src/accordion/accordion_item.rs
+++ b/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>
diff --git a/thaw/src/accordion/mod.rs b/thaw/src/accordion/mod.rs
index 2a3f188..4839dae 100644
--- a/thaw/src/accordion/mod.rs
+++ b/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()
     }
 }