Feat/ds 215 accordion (#538)

gsoft-inc · Jan 10, 2025 · 8d04084 · 8d04084
2 parents e0d8e22 + 1ccf760
commit 8d04084
Show file tree

Hide file tree

Showing 29 changed files with 1,062 additions and 65 deletions.
diff --git a/.changeset/light-olives-grab.md b/.changeset/light-olives-grab.md
@@ -0,0 +1,5 @@
+---
+"@hopper-ui/components": patch
+---
+
+Added the Accordion component.
diff --git a/apps/docs/components/card/card.css b/apps/docs/components/card/card.css
@@ -12,6 +12,7 @@
     background: linear-gradient(90deg, var(--background) 0.625rem, transparent 1%) 50%,
     linear-gradient(var(--background) 0.625rem, transparent 1%) 50%,
     var(--dot-background);
+    background-position: 0 0;
     background-size: 0.75rem 0.75rem;
     color: var(--color);
 }

diff --git a/apps/docs/content/components/navigation/Accordion.mdx b/apps/docs/content/components/navigation/Accordion.mdx
@@ -0,0 +1,102 @@
+---
+title: Accordion
+description: An Accordion is a grouping of related disclosures. It supports both single and multiple expanded items.
+category: "navigation"
+links:
+    source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/Accordion/src/Accordion.tsx
+---
+
+<Example src="Accordion/docs/preview" isOpen />
+
+<FeatureFlag flag="next">
+    ## Guidelines
+
+    TODO: If we have some guidelines about this component&apos;s usage
+
+    ### Accessibility ?
+
+    TODO: If we have some guidelines about this component and accessibility
+</FeatureFlag>
+
+## Anatomy
+
+<FeatureFlag flag="rc">
+    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
+
+    ### Concepts
+
+    TODO: links to related concepts
+</FeatureFlag>
+
+### Composed Components
+
+An `Accordion` uses the following components.
+
+<ComposedComponents components={["Disclosure", "Text", "Icon"]}/>
+
+## Usage
+
+### Disabled
+
+An accordion can be disabled.
+
+<Example src="Accordion/docs/disabled" />
+
+### Variants
+
+An accordion has multiple variants.
+
+**Standalone** - Used when the accordion is not inside a container.
+
+<Example src="Accordion/docs/standalone" />
+
+**Inline** - Used when placing a accordion inside a container.
+
+<Example src="Accordion/docs/inline" />
+
+### Expanded
+
+By default, only one disclosure will be expanded at a time.  Use `allowsMultipleExpanded` prop to expand multiple disclosures.
+
+<Example src="Accordion/docs/multiple-selection" />
+
+### Icon
+
+An accordion heading can contain an icon.
+
+<Example src="Accordion/docs/icon" />
+
+### Description
+
+An accordion heading can contain a description.
+
+<Example src="Accordion/docs/description" />
+
+### Controlled
+
+An accordion can handle its opened panels in controlled mode.
+
+<Example src="Accordion/docs/controlled" />
+
+<FeatureFlag flag="next">
+    ## Advanced customization
+
+    ### Contexts
+    TODO: Example of context + content about the context
+
+    ### Custom Children
+
+    TODO: Example of passing custom children to the components to fake a slot
+
+    ### Custom Component
+
+    TODO: Example of creating a custom version of this component
+</FeatureFlag>
+
+## Props
+
+<PropTable component="Accordion" />
+
+## Migration Notes
+
+<MigrateGuide src="Accordion/docs/migration-notes" />
diff --git a/apps/docs/content/components/navigation/Disclosure.mdx b/apps/docs/content/components/navigation/Disclosure.mdx
@@ -33,7 +33,7 @@ links:
 
 A `Disclosure` uses the following components:
 
-<ComposedComponents components={["Text, Icon"]}/>
+<ComposedComponents components={["Text", "Icon"]}/>
 
 ## Usage
 

diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts
@@ -854,6 +854,30 @@ export const Previews: Record<string, Preview> = {
     "layout/docs/stack/alignY": {
         component: lazy(() => import("@/../../packages/components/src/layout/docs/stack/alignY.tsx"))
     },
+    "Accordion/docs/preview": {
+        component: lazy(() => import("@/../../packages/components/src/Accordion/docs/preview.tsx"))
+    },
+    "Accordion/docs/disabled": {
+        component: lazy(() => import("@/../../packages/components/src/Accordion/docs/disabled.tsx"))
+    },
+    "Accordion/docs/standalone": {
+        component: lazy(() => import("@/../../packages/components/src/Accordion/docs/standalone.tsx"))
+    },
+    "Accordion/docs/inline": {
+        component: lazy(() => import("@/../../packages/components/src/Accordion/docs/inline.tsx"))
+    },
+    "Accordion/docs/multiple-selection": {
+        component: lazy(() => import("@/../../packages/components/src/Accordion/docs/multiple-selection.tsx"))
+    },
+    "Accordion/docs/icon": {
+        component: lazy(() => import("@/../../packages/components/src/Accordion/docs/icon.tsx"))
+    },
+    "Accordion/docs/description": {
+        component: lazy(() => import("@/../../packages/components/src/Accordion/docs/description.tsx"))
+    },
+    "Accordion/docs/controlled": {
+        component: lazy(() => import("@/../../packages/components/src/Accordion/docs/controlled.tsx"))
+    },
     "Disclosure/docs/preview": {
         component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/preview.tsx"))
     },

diff --git a/apps/docs/examples/overview/Accordion.svg b/apps/docs/examples/overview/Accordion.svg
diff --git a/apps/docs/examples/overview/index.ts b/apps/docs/examples/overview/index.ts
@@ -1,5 +1,6 @@
 import type { FunctionComponent, SVGProps } from "react";
 
+import Accordion from "./Accordion.svg";
 import Avatar from "./Avatar.svg";
 import Badge from "./Badge.svg";
 import Button from "./Button.svg";
@@ -48,6 +49,7 @@ interface OverviewComponentsType {
 }
 
 export const OverviewComponents: OverviewComponentsType = {
+    Accordion,
     Avatar,
     Badge,
     Button,

diff --git a/packages/components/src/Accordion/docs/controlled.tsx b/packages/components/src/Accordion/docs/controlled.tsx
@@ -0,0 +1,39 @@
+import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div, Span } from "@hopper-ui/components";
+import { useState } from "react";
+
+export default function Example() {
+    const [expandedKeys, setExpandedKeys] = useState<Set<string | number>>(new Set());
+
+    const handleExpandedChange = (keys: Set<string | number>) => {
+        setExpandedKeys(keys);
+    };
+
+    return (
+        <Div width="100%" paddingX="core_320" paddingY="core_480">
+            <Span
+                display="flex"
+                marginBottom="stack-md"
+            >
+                {expandedKeys.size > 0 ? `${Array.from(expandedKeys).join(", ")} is opened.` : "No sections are opened."}
+            </Span>
+            <Accordion
+                onExpandedChange={handleExpandedChange}
+                expandedKeys={expandedKeys}
+                allowsMultipleExpanded
+            >
+                <Disclosure id="officevibe">
+                    <DisclosureHeader>Workleap Officevibe</DisclosureHeader>
+                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="pingboard">
+                    <DisclosureHeader>Workleap Pingboard</DisclosureHeader>
+                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="performance">
+                    <DisclosureHeader>Workleap Performance</DisclosureHeader>
+                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
+                </Disclosure>
+            </Accordion>
+        </Div>
+    );
+}
diff --git a/packages/components/src/Accordion/docs/description.tsx b/packages/components/src/Accordion/docs/description.tsx
@@ -0,0 +1,38 @@
+import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div, Inline, Text } from "@hopper-ui/components";
+
+export default function Example() {
+    return (
+        <Div width="100%" paddingX="core_320" paddingY="core_480">
+            <Accordion>
+                <Disclosure id="officevibe">
+                    <DisclosureHeader>
+                        <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
+                            <Text>Workleap Officevibe</Text>
+                            <Text color="neutral-weak" size="sm">Engagement survey and feedback</Text>
+                        </Inline>
+                    </DisclosureHeader>
+                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="pingboard">
+                    <DisclosureHeader>
+                        <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
+                            <Text>Workleap Pingboard</Text>
+                            <Text color="neutral-weak" size="sm">Interactive org chart and directory</Text>
+                        </Inline>
+                    </DisclosureHeader>
+                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="performance">
+                    <DisclosureHeader>
+                        <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
+                            <Text>Workleap Performance</Text>
+                            <Text color="neutral-weak" size="sm">Performance review management and tracking</Text>
+                        </Inline>
+                    </DisclosureHeader>
+                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
+                </Disclosure>
+            </Accordion>
+        </Div>
+    );
+}
+
diff --git a/packages/components/src/Accordion/docs/disabled.tsx b/packages/components/src/Accordion/docs/disabled.tsx
@@ -0,0 +1,22 @@
+import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";
+
+export default function Example() {
+    return (
+        <Div width="100%" paddingX="core_320" paddingY="core_480">
+            <Accordion isDisabled>
+                <Disclosure id="officevibe">
+                    <DisclosureHeader>Workleap Officevibe</DisclosureHeader>
+                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="pingboard">
+                    <DisclosureHeader>Workleap Pingboard</DisclosureHeader>
+                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="performance">
+                    <DisclosureHeader>Workleap Performance</DisclosureHeader>
+                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
+                </Disclosure>
+            </Accordion>
+        </Div>
+    );
+}
diff --git a/packages/components/src/Accordion/docs/icon.tsx b/packages/components/src/Accordion/docs/icon.tsx
@@ -0,0 +1,32 @@
+import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div, Text } from "@hopper-ui/components";
+import { PinSolidIcon, SparklesIcon, SproutIcon } from "@hopper-ui/icons";
+
+export default function Example() {
+    return (
+        <Div width="100%" paddingX="core_320" paddingY="core_480">
+            <Accordion defaultExpandedKeys={["pingboard"]}>
+                <Disclosure id="officevibe">
+                    <DisclosureHeader>
+                        <SparklesIcon />
+                        <Text>Workleap Officevibe</Text>
+                    </DisclosureHeader>
+                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="pingboard">
+                    <DisclosureHeader>
+                        <PinSolidIcon />
+                        <Text>Workleap Pingboard</Text>
+                    </DisclosureHeader>
+                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="performance">
+                    <DisclosureHeader>
+                        <SproutIcon />
+                        <Text>Workleap Performance</Text>
+                    </DisclosureHeader>
+                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
+                </Disclosure>
+            </Accordion>
+        </Div>
+    );
+}
diff --git a/packages/components/src/Accordion/docs/inline.tsx b/packages/components/src/Accordion/docs/inline.tsx
@@ -0,0 +1,22 @@
+import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";
+
+export default function Example() {
+    return (
+        <Div width="100%" paddingX="core_320" paddingY="core_480">
+            <Accordion variant="inline">
+                <Disclosure id="officevibe">
+                    <DisclosureHeader>Workleap Officevibe</DisclosureHeader>
+                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="pingboard">
+                    <DisclosureHeader>Workleap Pingboard</DisclosureHeader>
+                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="performance">
+                    <DisclosureHeader>Workleap Performance</DisclosureHeader>
+                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
+                </Disclosure>
+            </Accordion>
+        </Div>
+    );
+}
diff --git a/packages/components/src/Accordion/docs/migration-notes.md b/packages/components/src/Accordion/docs/migration-notes.md
@@ -0,0 +1,7 @@
+Coming from Orbiter, you should be aware of the following changes:
+
+- `expansionMode="multiple"` has been replaced with `allowsMultipleExpanded`.
+- `borderless` and `bordered` variants are no more. `inline` and `standalone` are the new variants. There is no direct match; the new variants are context-based, depending on whether an accordion is contained or not.
+- `autofocus` is removed. It did not make sense to have.
+- The `disclosure` component is used instead of `Item`.
+- `disabled` is renamed to `isDisabled` on the item/disclosure.
diff --git a/packages/components/src/Accordion/docs/multiple-selection.tsx b/packages/components/src/Accordion/docs/multiple-selection.tsx
@@ -0,0 +1,22 @@
+import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";
+
+export default function Example() {
+    return (
+        <Div width="100%" paddingX="core_320" paddingY="core_480">
+            <Accordion defaultExpandedKeys={["pingboard", "performance"]} allowsMultipleExpanded>
+                <Disclosure id="officevibe">
+                    <DisclosureHeader>Workleap Officevibe</DisclosureHeader>
+                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="pingboard">
+                    <DisclosureHeader>Workleap Pingboard</DisclosureHeader>
+                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="performance">
+                    <DisclosureHeader>Workleap Performance</DisclosureHeader>
+                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
+                </Disclosure>
+            </Accordion>
+        </Div>
+    );
+}
diff --git a/packages/components/src/Accordion/docs/preview.tsx b/packages/components/src/Accordion/docs/preview.tsx
@@ -0,0 +1,22 @@
+import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";
+
+export default function Example() {
+    return (
+        <Div width="100%" paddingX="core_320" paddingY="core_480">
+            <Accordion defaultExpandedKeys={["pingboard"]}>
+                <Disclosure id="officevibe">
+                    <DisclosureHeader>Workleap Officevibe</DisclosureHeader>
+                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="pingboard">
+                    <DisclosureHeader>Workleap Pingboard</DisclosureHeader>
+                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
+                </Disclosure>
+                <Disclosure id="performance">
+                    <DisclosureHeader>Workleap Performance</DisclosureHeader>
+                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
+                </Disclosure>
+            </Accordion>
+        </Div>
+    );
+}