From 5972403ce8fdb431c74ebb09016cda511fbc301b Mon Sep 17 00:00:00 2001 From: vicky-comeau Date: Thu, 28 Nov 2024 14:33:10 -0500 Subject: [PATCH 01/10] base accordion --- .../src/Accordion/docs/Accordion.stories.tsx | 32 +++++++++++++++++++ packages/components/src/Accordion/index.ts | 1 + .../src/Accordion/src/Accordion.module.css | 3 ++ .../src/Accordion/src/Accordion.tsx | 29 +++++++++++++++++ .../src/Accordion/src/AccordionContext.ts | 8 +++++ .../components/src/Accordion/src/index.ts | 2 ++ .../tests/chromatic/Accordion.stories.tsx | 15 +++++++++ .../tests/jest/Accordion.ssr.test.tsx | 17 ++++++++++ .../Accordion/tests/jest/Accordion.test.tsx | 10 ++++++ 9 files changed, 117 insertions(+) create mode 100644 packages/components/src/Accordion/docs/Accordion.stories.tsx create mode 100644 packages/components/src/Accordion/index.ts create mode 100644 packages/components/src/Accordion/src/Accordion.module.css create mode 100644 packages/components/src/Accordion/src/Accordion.tsx create mode 100644 packages/components/src/Accordion/src/AccordionContext.ts create mode 100644 packages/components/src/Accordion/src/index.ts create mode 100644 packages/components/src/Accordion/tests/chromatic/Accordion.stories.tsx create mode 100644 packages/components/src/Accordion/tests/jest/Accordion.ssr.test.tsx create mode 100644 packages/components/src/Accordion/tests/jest/Accordion.test.tsx diff --git a/packages/components/src/Accordion/docs/Accordion.stories.tsx b/packages/components/src/Accordion/docs/Accordion.stories.tsx new file mode 100644 index 000000000..52e573d8d --- /dev/null +++ b/packages/components/src/Accordion/docs/Accordion.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { Accordion } from "../src/Accordion.tsx"; + +/** + * TODO: Add description + * + * [View repository](https://github.com/gsoft-inc/wl-hopper/tree/main/packages/components/src/Accordion/src) + * - + * [View package](https://www.npmjs.com/package/@hopper-ui/components) + * - + * View storybook TODO + */ +const meta = { + title: "Docs/Accordion", + tags: ["autodocs"], + parameters: { + // Disables Chromatic's snapshotting on documentation stories + chromatic: { disableSnapshot: true } + }, + component: Accordion +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +/** + * TODO: Add description + */ +export const Default = { +} satisfies Story; diff --git a/packages/components/src/Accordion/index.ts b/packages/components/src/Accordion/index.ts new file mode 100644 index 000000000..401c73ac2 --- /dev/null +++ b/packages/components/src/Accordion/index.ts @@ -0,0 +1 @@ +export * from "./src/index.ts"; diff --git a/packages/components/src/Accordion/src/Accordion.module.css b/packages/components/src/Accordion/src/Accordion.module.css new file mode 100644 index 000000000..249cfd97f --- /dev/null +++ b/packages/components/src/Accordion/src/Accordion.module.css @@ -0,0 +1,3 @@ +.hop-Accordion { + /* TODO */ +} diff --git a/packages/components/src/Accordion/src/Accordion.tsx b/packages/components/src/Accordion/src/Accordion.tsx new file mode 100644 index 000000000..550d593e9 --- /dev/null +++ b/packages/components/src/Accordion/src/Accordion.tsx @@ -0,0 +1,29 @@ +import { forwardRef, type ForwardedRef } from "react"; +import { useContextProps } from "react-aria-components"; + +import { AccordionContext } from "./AccordionContext.ts"; + +import styles from "./Accordion.module.css"; + +export const GlobalAccordionCssSelector = "hop-Accordion"; + +export interface AccordionProps { +} + +function Accordion(props:AccordionProps, ref: ForwardedRef) { + [props, ref] = useContextProps(props, ref, AccordionContext); + + return ( +
+ ); +} + +/** + * TODO: tagline + * + * [View Documentation](TODO) + */ +const _Accordion = forwardRef(Accordion); +_Accordion.displayName = "Accordion"; + +export { _Accordion as Accordion }; diff --git a/packages/components/src/Accordion/src/AccordionContext.ts b/packages/components/src/Accordion/src/AccordionContext.ts new file mode 100644 index 000000000..29fd0018e --- /dev/null +++ b/packages/components/src/Accordion/src/AccordionContext.ts @@ -0,0 +1,8 @@ +import { createContext } from "react"; +import type { ContextValue } from "react-aria-components"; + +import type { AccordionProps } from "./Accordion.tsx"; + +export const AccordionContext = createContext>({}); + +AccordionContext.displayName = "AccordionContext"; diff --git a/packages/components/src/Accordion/src/index.ts b/packages/components/src/Accordion/src/index.ts new file mode 100644 index 000000000..35f2d8742 --- /dev/null +++ b/packages/components/src/Accordion/src/index.ts @@ -0,0 +1,2 @@ +export * from "./Accordion.tsx"; +export * from "./AccordionContext.ts"; diff --git a/packages/components/src/Accordion/tests/chromatic/Accordion.stories.tsx b/packages/components/src/Accordion/tests/chromatic/Accordion.stories.tsx new file mode 100644 index 000000000..cb534b1c8 --- /dev/null +++ b/packages/components/src/Accordion/tests/chromatic/Accordion.stories.tsx @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { Accordion } from "../../src/Accordion.tsx"; + +const meta = { + title: "Components/Accordion", + component: Accordion +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default = { +} satisfies Story; diff --git a/packages/components/src/Accordion/tests/jest/Accordion.ssr.test.tsx b/packages/components/src/Accordion/tests/jest/Accordion.ssr.test.tsx new file mode 100644 index 000000000..ce89d8bef --- /dev/null +++ b/packages/components/src/Accordion/tests/jest/Accordion.ssr.test.tsx @@ -0,0 +1,17 @@ +/** + * @jest-environment node + */ +import { renderToString } from "react-dom/server"; + +import { Accordion } from "../../src/Accordion.tsx"; + +describe("Accordion", () => { + it("should render on the server", () => { + const renderOnServer = () => + renderToString( + Text + ); + + expect(renderOnServer).not.toThrow(); + }); +}); diff --git a/packages/components/src/Accordion/tests/jest/Accordion.test.tsx b/packages/components/src/Accordion/tests/jest/Accordion.test.tsx new file mode 100644 index 000000000..1fe6c5995 --- /dev/null +++ b/packages/components/src/Accordion/tests/jest/Accordion.test.tsx @@ -0,0 +1,10 @@ +import { render, screen } from "@hopper-ui/test-utils"; + +import { Accordion } from "../../src/Accordion.tsx"; +import { AccordionContext } from "../../src/AccordionContext.ts"; + +describe("Accordion", () => { + it("should render a span with default class", () => { + + }); +}); From 3f4a803ddc098aef2ed50fece8e596cabdf6a530 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 28 Nov 2024 15:09:43 -0500 Subject: [PATCH 02/10] added accordion thumbnail --- apps/docs/examples/overview/Accordion.svg | 1 + apps/docs/examples/overview/index.ts | 2 ++ 2 files changed, 3 insertions(+) create mode 100644 apps/docs/examples/overview/Accordion.svg diff --git a/apps/docs/examples/overview/Accordion.svg b/apps/docs/examples/overview/Accordion.svg new file mode 100644 index 000000000..9f55339bf --- /dev/null +++ b/apps/docs/examples/overview/Accordion.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/examples/overview/index.ts b/apps/docs/examples/overview/index.ts index 5d1032f3f..50c0ce647 100644 --- 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"; @@ -49,6 +50,7 @@ interface OverviewComponentsType { } export const OverviewComponents: OverviewComponentsType = { + Accordion, Avatar, Badge, Button, From f5c2cfa12ca8d7cef91abf59baf1877db5010e81 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 28 Nov 2024 15:44:21 -0500 Subject: [PATCH 03/10] added default documentation setup --- .../components/navigation/Accordion.mdx | 90 +++++++++++++++++++ apps/docs/examples/overview/Accordion.svg | 2 +- .../src/Accordion/docs/controlled.tsx | 0 .../src/Accordion/docs/description.tsx | 0 .../src/Accordion/docs/disabled.tsx | 0 .../components/src/Accordion/docs/icon.tsx | 0 .../src/Accordion/docs/migration-notes.md | 3 + .../src/Accordion/docs/multiple-selection.tsx | 0 .../components/src/Accordion/docs/preview.tsx | 0 .../src/Accordion/docs/variants.tsx | 0 10 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 apps/docs/content/components/navigation/Accordion.mdx create mode 100644 packages/components/src/Accordion/docs/controlled.tsx create mode 100644 packages/components/src/Accordion/docs/description.tsx create mode 100644 packages/components/src/Accordion/docs/disabled.tsx create mode 100644 packages/components/src/Accordion/docs/icon.tsx create mode 100644 packages/components/src/Accordion/docs/migration-notes.md create mode 100644 packages/components/src/Accordion/docs/multiple-selection.tsx create mode 100644 packages/components/src/Accordion/docs/preview.tsx create mode 100644 packages/components/src/Accordion/docs/variants.tsx diff --git a/apps/docs/content/components/navigation/Accordion.mdx b/apps/docs/content/components/navigation/Accordion.mdx new file mode 100644 index 000000000..bb98f3dd4 --- /dev/null +++ b/apps/docs/content/components/navigation/Accordion.mdx @@ -0,0 +1,90 @@ +--- +title: Accordion +description: x +category: "navigation" +links: + source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/Accordion/src/Accordion.tsx +--- + + + + + ## Guidelines + + TODO: If we have some guidelines about this component's usage + + ### Accessibility ? + + TODO: If we have some guidelines about this component and accessibility + + +## Anatomy + + + TODO: We have anatomy screenshots from the Figma, we could most likely use them here + + ### Concepts + + TODO: links to related concepts + + +### Composed Components + +An `Accordion` uses the following components. + + + +## Usage + +### Disabled + +An accordion can be disabled. + + + +### Variants + +An accordion has multiple variants. + + + +### Icon + +An accordion heading contain an icon. + + + +### Description + +An accordion can contain a description. + + + +### Controlled + +An accordion can handle its opened panels in controlled mode. + + + + + ## 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 + + +## Props + + + +## Migration Notes + + diff --git a/apps/docs/examples/overview/Accordion.svg b/apps/docs/examples/overview/Accordion.svg index 9f55339bf..4a050909e 100644 --- a/apps/docs/examples/overview/Accordion.svg +++ b/apps/docs/examples/overview/Accordion.svg @@ -1 +1 @@ - + diff --git a/packages/components/src/Accordion/docs/controlled.tsx b/packages/components/src/Accordion/docs/controlled.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/components/src/Accordion/docs/description.tsx b/packages/components/src/Accordion/docs/description.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/components/src/Accordion/docs/disabled.tsx b/packages/components/src/Accordion/docs/disabled.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/components/src/Accordion/docs/icon.tsx b/packages/components/src/Accordion/docs/icon.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/components/src/Accordion/docs/migration-notes.md b/packages/components/src/Accordion/docs/migration-notes.md new file mode 100644 index 000000000..67632fd9f --- /dev/null +++ b/packages/components/src/Accordion/docs/migration-notes.md @@ -0,0 +1,3 @@ +Coming from Orbiter, you should be aware of the following changes: + +- xxxxxxxxxxx diff --git a/packages/components/src/Accordion/docs/multiple-selection.tsx b/packages/components/src/Accordion/docs/multiple-selection.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/components/src/Accordion/docs/preview.tsx b/packages/components/src/Accordion/docs/preview.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/components/src/Accordion/docs/variants.tsx b/packages/components/src/Accordion/docs/variants.tsx new file mode 100644 index 000000000..e69de29bb From ea5687ddae38feb802f835768809eb2d1073ae5c Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 28 Nov 2024 21:32:01 -0500 Subject: [PATCH 04/10] tests are now resolving / fixed card dots moving when the card was changing height --- apps/docs/components/card/card.css | 1 + .../components/navigation/Accordion.mdx | 16 +++++++++++--- apps/docs/examples/Preview.ts | 21 +++++++++++++++++++ .../src/Accordion/docs/controlled.tsx | 17 +++++++++++++++ .../src/Accordion/docs/description.tsx | 17 +++++++++++++++ .../src/Accordion/docs/disabled.tsx | 17 +++++++++++++++ .../components/src/Accordion/docs/icon.tsx | 17 +++++++++++++++ .../src/Accordion/docs/migration-notes.md | 3 ++- .../src/Accordion/docs/multiple-selection.tsx | 17 +++++++++++++++ .../components/src/Accordion/docs/preview.tsx | 17 +++++++++++++++ .../src/Accordion/docs/variants.tsx | 17 +++++++++++++++ 11 files changed, 156 insertions(+), 4 deletions(-) diff --git a/apps/docs/components/card/card.css b/apps/docs/components/card/card.css index fb866a277..a5f1ca301 100644 --- 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 index bb98f3dd4..ff7283149 100644 --- a/apps/docs/content/components/navigation/Accordion.mdx +++ b/apps/docs/content/components/navigation/Accordion.mdx @@ -1,6 +1,6 @@ --- title: Accordion -description: x +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 @@ -48,15 +48,25 @@ An accordion has multiple variants. +**Standalone** - Used when the accordion is not inside a container. + +**Inline** - Used when placing a accordion inside a container. + +### Expanded + +By default, only one disclosure will be expanded at a time. Use `allowsMultipleExpanded` prop to expand multiple disclosures. + + + ### Icon -An accordion heading contain an icon. +An accordion heading can contain an icon. ### Description -An accordion can contain a description. +An accordion heading can contain a description. diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts index 75e6cf828..e398ab3a4 100644 --- a/apps/docs/examples/Preview.ts +++ b/apps/docs/examples/Preview.ts @@ -773,6 +773,27 @@ export const Previews: Record = { "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/variants": { + component: lazy(() => import("@/../../packages/components/src/Accordion/docs/variants.tsx")) + }, + "Accordion/docs/variants": { + component: lazy(() => import("@/../../packages/components/src/Accordion/docs/variants.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/packages/components/src/Accordion/docs/controlled.tsx b/packages/components/src/Accordion/docs/controlled.tsx index e69de29bb..b6c9cb2a5 100644 --- a/packages/components/src/Accordion/docs/controlled.tsx +++ b/packages/components/src/Accordion/docs/controlled.tsx @@ -0,0 +1,17 @@ +import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; + +export default function Example() { + return ( +
+ + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + +
+ ); +} diff --git a/packages/components/src/Accordion/docs/description.tsx b/packages/components/src/Accordion/docs/description.tsx index e69de29bb..b6c9cb2a5 100644 --- a/packages/components/src/Accordion/docs/description.tsx +++ b/packages/components/src/Accordion/docs/description.tsx @@ -0,0 +1,17 @@ +import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; + +export default function Example() { + return ( +
+ + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + +
+ ); +} diff --git a/packages/components/src/Accordion/docs/disabled.tsx b/packages/components/src/Accordion/docs/disabled.tsx index e69de29bb..b6c9cb2a5 100644 --- a/packages/components/src/Accordion/docs/disabled.tsx +++ b/packages/components/src/Accordion/docs/disabled.tsx @@ -0,0 +1,17 @@ +import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; + +export default function Example() { + return ( +
+ + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + +
+ ); +} diff --git a/packages/components/src/Accordion/docs/icon.tsx b/packages/components/src/Accordion/docs/icon.tsx index e69de29bb..b6c9cb2a5 100644 --- a/packages/components/src/Accordion/docs/icon.tsx +++ b/packages/components/src/Accordion/docs/icon.tsx @@ -0,0 +1,17 @@ +import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; + +export default function Example() { + return ( +
+ + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + +
+ ); +} diff --git a/packages/components/src/Accordion/docs/migration-notes.md b/packages/components/src/Accordion/docs/migration-notes.md index 67632fd9f..7bc8bc999 100644 --- a/packages/components/src/Accordion/docs/migration-notes.md +++ b/packages/components/src/Accordion/docs/migration-notes.md @@ -1,3 +1,4 @@ Coming from Orbiter, you should be aware of the following changes: -- xxxxxxxxxxx +- `expansionMode="multiple"` has been replaced with `allowsMultipleExpanded`. +- `bordered` and `borderless` variants have been renamed `inline` and `standalone`. There is no direct mapping, the new variants are context based, wether an accordion is contained or not. diff --git a/packages/components/src/Accordion/docs/multiple-selection.tsx b/packages/components/src/Accordion/docs/multiple-selection.tsx index e69de29bb..b6c9cb2a5 100644 --- a/packages/components/src/Accordion/docs/multiple-selection.tsx +++ b/packages/components/src/Accordion/docs/multiple-selection.tsx @@ -0,0 +1,17 @@ +import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; + +export default function Example() { + return ( +
+ + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + +
+ ); +} diff --git a/packages/components/src/Accordion/docs/preview.tsx b/packages/components/src/Accordion/docs/preview.tsx index e69de29bb..b6c9cb2a5 100644 --- a/packages/components/src/Accordion/docs/preview.tsx +++ b/packages/components/src/Accordion/docs/preview.tsx @@ -0,0 +1,17 @@ +import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; + +export default function Example() { + return ( +
+ + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + +
+ ); +} diff --git a/packages/components/src/Accordion/docs/variants.tsx b/packages/components/src/Accordion/docs/variants.tsx index e69de29bb..b6c9cb2a5 100644 --- a/packages/components/src/Accordion/docs/variants.tsx +++ b/packages/components/src/Accordion/docs/variants.tsx @@ -0,0 +1,17 @@ +import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; + +export default function Example() { + return ( +
+ + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + +
+ ); +} From b3dd916241014bd37dda107c087f4f8787b6a6d3 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Fri, 29 Nov 2024 09:10:22 -0500 Subject: [PATCH 05/10] split variants samples --- .../components/navigation/Accordion.mdx | 8 +++--- apps/docs/examples/Preview.ts | 11 +++++--- .../src/Accordion/docs/disabled.tsx | 11 +++++++- .../docs/{variants.tsx => inline.tsx} | 0 .../components/src/Accordion/docs/preview.tsx | 9 +++++++ .../src/Accordion/docs/standalone.tsx | 26 +++++++++++++++++++ .../src/Disclosure/src/Disclosure.module.css | 12 +++++---- 7 files changed, 64 insertions(+), 13 deletions(-) rename packages/components/src/Accordion/docs/{variants.tsx => inline.tsx} (100%) create mode 100644 packages/components/src/Accordion/docs/standalone.tsx diff --git a/apps/docs/content/components/navigation/Accordion.mdx b/apps/docs/content/components/navigation/Accordion.mdx index ff7283149..fb9782d48 100644 --- a/apps/docs/content/components/navigation/Accordion.mdx +++ b/apps/docs/content/components/navigation/Accordion.mdx @@ -46,17 +46,19 @@ An accordion can be disabled. An accordion has multiple variants. - - **Standalone** - Used when the accordion is not inside a container. + + **Inline** - Used when placing a accordion inside a container. + + ### Expanded By default, only one disclosure will be expanded at a time. Use `allowsMultipleExpanded` prop to expand multiple disclosures. - + ### Icon diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts index e398ab3a4..478f73db7 100644 --- a/apps/docs/examples/Preview.ts +++ b/apps/docs/examples/Preview.ts @@ -779,11 +779,14 @@ export const Previews: Record = { "Accordion/docs/disabled": { component: lazy(() => import("@/../../packages/components/src/Accordion/docs/disabled.tsx")) }, - "Accordion/docs/variants": { - component: lazy(() => import("@/../../packages/components/src/Accordion/docs/variants.tsx")) + "Accordion/docs/standalone": { + component: lazy(() => import("@/../../packages/components/src/Accordion/docs/standalone.tsx")) }, - "Accordion/docs/variants": { - component: lazy(() => import("@/../../packages/components/src/Accordion/docs/variants.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")) diff --git a/packages/components/src/Accordion/docs/disabled.tsx b/packages/components/src/Accordion/docs/disabled.tsx index b6c9cb2a5..f8235f1c2 100644 --- a/packages/components/src/Accordion/docs/disabled.tsx +++ b/packages/components/src/Accordion/docs/disabled.tsx @@ -3,7 +3,16 @@ import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/c export default function Example() { return (
- + + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + + Help your people work better diff --git a/packages/components/src/Accordion/docs/variants.tsx b/packages/components/src/Accordion/docs/inline.tsx similarity index 100% rename from packages/components/src/Accordion/docs/variants.tsx rename to packages/components/src/Accordion/docs/inline.tsx diff --git a/packages/components/src/Accordion/docs/preview.tsx b/packages/components/src/Accordion/docs/preview.tsx index b6c9cb2a5..a6a6e1ab2 100644 --- a/packages/components/src/Accordion/docs/preview.tsx +++ b/packages/components/src/Accordion/docs/preview.tsx @@ -12,6 +12,15 @@ export default function Example() { The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + +
); } diff --git a/packages/components/src/Accordion/docs/standalone.tsx b/packages/components/src/Accordion/docs/standalone.tsx new file mode 100644 index 000000000..e0d235213 --- /dev/null +++ b/packages/components/src/Accordion/docs/standalone.tsx @@ -0,0 +1,26 @@ +import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; + +export default function Example() { + return ( +
+ + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + + + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + +
+ ); +} diff --git a/packages/components/src/Disclosure/src/Disclosure.module.css b/packages/components/src/Disclosure/src/Disclosure.module.css index 720e69641..63f978ac7 100644 --- a/packages/components/src/Disclosure/src/Disclosure.module.css +++ b/packages/components/src/Disclosure/src/Disclosure.module.css @@ -3,8 +3,8 @@ --hop-Disclosure-panel-padding: 0; --hop-Disclosure-panel-padding-expanded: var(--hop-space-inset-md) 0; --hop-Disclosure-panel-background-color: none; - - /* With Header */ + + /* With Header */ --hop-Disclosure-with-header-panel-padding: var(--hop-space-inset-md); --hop-Disclosure-with-header-panel-background-color: var(--hop-neutral-surface); @@ -14,7 +14,7 @@ --hop-Disclosure-standalone-panel-border-size: 0; --hop-Disclosure-standalone-panel-border-size-expanded: 0 var(--hop-space-10) var(--hop-space-10) var(--hop-space-10); --hop-Disclosure-standalone-panel-border-color: var(--hop-neutral-border-weak); - + /* Inline */ --hop-Disclosure-inline-border-radius: 0; --hop-Disclosure-inline-box-shadow: none; @@ -35,9 +35,9 @@ border-radius: var(--border-radius); box-shadow: var(--box-shadow); - /* This is an experimental feature that allows you to enable animations and transitions + /* This is an experimental feature that allows you to enable animations and transitions between a length value and an intrinsic value such as auto, fit-content or max-content. - This a a progressive enhancement and for now, + This a a progressive enhancement and for now, it only seems to work in Chrome https://caniuse.com/mdn-css_properties_interpolate-size_allow-keywords */ /* stylelint-disable-next-line property-no-unknown */ interpolate-size: allow-keywords; @@ -57,6 +57,8 @@ --panel-border-size: var(--hop-Disclosure-standalone-panel-border-size-expanded); --panel-border-color: var(--hop-Disclosure-standalone-panel-border-color); --panel-padding: var(--hop-Disclosure-with-header-panel-padding); + + background-color: red; } .hop-Disclosure--inline { From 1e16c374c2de12bf99ad57f79e2fbb1d26092dbf Mon Sep 17 00:00:00 2001 From: vicky-comeau Date: Fri, 29 Nov 2024 11:31:38 -0500 Subject: [PATCH 06/10] [DS-215] Accordion --- .changeset/light-olives-grab.md | 5 + .../components/navigation/Accordion.mdx | 2 +- apps/docs/examples/Preview.ts | 18 ++ .../src/Accordion/docs/Accordion.stories.tsx | 32 --- .../src/Accordion/docs/controlled.tsx | 8 + .../src/Accordion/docs/description.tsx | 8 + .../src/Accordion/docs/disabled.tsx | 8 + .../components/src/Accordion/docs/icon.tsx | 8 + .../src/Accordion/docs/migration-notes.md | 6 +- .../src/Accordion/docs/multiple-selection.tsx | 8 + .../components/src/Accordion/docs/preview.tsx | 22 ++ .../src/Accordion/docs/variants.tsx | 8 + .../src/Accordion/src/Accordion.module.css | 51 +++- .../src/Accordion/src/Accordion.tsx | 77 +++++- .../src/Accordion/src/AccordionContext.ts | 2 +- .../tests/chromatic/Accordion.stories.tsx | 220 +++++++++++++++++- .../tests/jest/Accordion.ssr.test.tsx | 16 +- .../Accordion/tests/jest/Accordion.test.tsx | 148 +++++++++++- .../src/Disclosure/docs/controlled.tsx | 2 +- .../src/Disclosure/docs/customHeader.tsx | 2 +- .../src/Disclosure/docs/description.tsx | 2 +- .../src/Disclosure/docs/disabled.tsx | 2 +- .../components/src/Disclosure/docs/icon.tsx | 2 +- .../src/Disclosure/docs/preview.tsx | 2 +- .../src/Disclosure/docs/variants.tsx | 2 +- .../src/Disclosure/src/Disclosure.tsx | 10 +- .../src/DisclosureHeader.module.css | 6 +- packages/components/src/index.ts | 1 + 28 files changed, 621 insertions(+), 57 deletions(-) create mode 100644 .changeset/light-olives-grab.md delete mode 100644 packages/components/src/Accordion/docs/Accordion.stories.tsx diff --git a/.changeset/light-olives-grab.md b/.changeset/light-olives-grab.md new file mode 100644 index 000000000..fc28acf17 --- /dev/null +++ b/.changeset/light-olives-grab.md @@ -0,0 +1,5 @@ +--- +"@hopper-ui/components": patch +--- + +Added the Accordion component. diff --git a/apps/docs/content/components/navigation/Accordion.mdx b/apps/docs/content/components/navigation/Accordion.mdx index bb98f3dd4..05aa4e43c 100644 --- a/apps/docs/content/components/navigation/Accordion.mdx +++ b/apps/docs/content/components/navigation/Accordion.mdx @@ -50,7 +50,7 @@ An accordion has multiple variants. ### Icon -An accordion heading contain an icon. +An accordion heading can contain an icon. diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts index 75e6cf828..2aee2a197 100644 --- a/apps/docs/examples/Preview.ts +++ b/apps/docs/examples/Preview.ts @@ -773,6 +773,24 @@ export const Previews: Record = { "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/variants": { + component: lazy(() => import("@/../../packages/components/src/Accordion/docs/variants.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/packages/components/src/Accordion/docs/Accordion.stories.tsx b/packages/components/src/Accordion/docs/Accordion.stories.tsx deleted file mode 100644 index 52e573d8d..000000000 --- a/packages/components/src/Accordion/docs/Accordion.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; - -import { Accordion } from "../src/Accordion.tsx"; - -/** - * TODO: Add description - * - * [View repository](https://github.com/gsoft-inc/wl-hopper/tree/main/packages/components/src/Accordion/src) - * - - * [View package](https://www.npmjs.com/package/@hopper-ui/components) - * - - * View storybook TODO - */ -const meta = { - title: "Docs/Accordion", - tags: ["autodocs"], - parameters: { - // Disables Chromatic's snapshotting on documentation stories - chromatic: { disableSnapshot: true } - }, - component: Accordion -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -/** - * TODO: Add description - */ -export const Default = { -} satisfies Story; diff --git a/packages/components/src/Accordion/docs/controlled.tsx b/packages/components/src/Accordion/docs/controlled.tsx index e69de29bb..0fd4088b8 100644 --- a/packages/components/src/Accordion/docs/controlled.tsx +++ b/packages/components/src/Accordion/docs/controlled.tsx @@ -0,0 +1,8 @@ +import { Div } from "@hopper-ui/styled-system"; + +export default function Example() { + return ( +
+
+ ); +} \ No newline at end of file diff --git a/packages/components/src/Accordion/docs/description.tsx b/packages/components/src/Accordion/docs/description.tsx index e69de29bb..0fd4088b8 100644 --- a/packages/components/src/Accordion/docs/description.tsx +++ b/packages/components/src/Accordion/docs/description.tsx @@ -0,0 +1,8 @@ +import { Div } from "@hopper-ui/styled-system"; + +export default function Example() { + return ( +
+
+ ); +} \ No newline at end of file diff --git a/packages/components/src/Accordion/docs/disabled.tsx b/packages/components/src/Accordion/docs/disabled.tsx index e69de29bb..0fd4088b8 100644 --- a/packages/components/src/Accordion/docs/disabled.tsx +++ b/packages/components/src/Accordion/docs/disabled.tsx @@ -0,0 +1,8 @@ +import { Div } from "@hopper-ui/styled-system"; + +export default function Example() { + return ( +
+
+ ); +} \ No newline at end of file diff --git a/packages/components/src/Accordion/docs/icon.tsx b/packages/components/src/Accordion/docs/icon.tsx index e69de29bb..0fd4088b8 100644 --- a/packages/components/src/Accordion/docs/icon.tsx +++ b/packages/components/src/Accordion/docs/icon.tsx @@ -0,0 +1,8 @@ +import { Div } from "@hopper-ui/styled-system"; + +export default function Example() { + return ( +
+
+ ); +} \ No newline at end of file diff --git a/packages/components/src/Accordion/docs/migration-notes.md b/packages/components/src/Accordion/docs/migration-notes.md index 67632fd9f..66f03b6d1 100644 --- a/packages/components/src/Accordion/docs/migration-notes.md +++ b/packages/components/src/Accordion/docs/migration-notes.md @@ -1,3 +1,7 @@ Coming from Orbiter, you should be aware of the following changes: -- xxxxxxxxxxx +- `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 index e69de29bb..0fd4088b8 100644 --- a/packages/components/src/Accordion/docs/multiple-selection.tsx +++ b/packages/components/src/Accordion/docs/multiple-selection.tsx @@ -0,0 +1,8 @@ +import { Div } from "@hopper-ui/styled-system"; + +export default function Example() { + return ( +
+
+ ); +} \ No newline at end of file diff --git a/packages/components/src/Accordion/docs/preview.tsx b/packages/components/src/Accordion/docs/preview.tsx index e69de29bb..28d671930 100644 --- 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 ( +
+ + + Workleap Officevibe + 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. + + + Workleap Pingboard + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + Workleap Performance + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + + +
+ ); +} \ No newline at end of file diff --git a/packages/components/src/Accordion/docs/variants.tsx b/packages/components/src/Accordion/docs/variants.tsx index e69de29bb..0fd4088b8 100644 --- a/packages/components/src/Accordion/docs/variants.tsx +++ b/packages/components/src/Accordion/docs/variants.tsx @@ -0,0 +1,8 @@ +import { Div } from "@hopper-ui/styled-system"; + +export default function Example() { + return ( +
+
+ ); +} \ No newline at end of file diff --git a/packages/components/src/Accordion/src/Accordion.module.css b/packages/components/src/Accordion/src/Accordion.module.css index 249cfd97f..d94ba0325 100644 --- a/packages/components/src/Accordion/src/Accordion.module.css +++ b/packages/components/src/Accordion/src/Accordion.module.css @@ -1,3 +1,50 @@ -.hop-Accordion { - /* TODO */ +.hop-Accordion { + /* Standalone */ + --hop-Accordion-standalone-border-size: var(--hop-space-10); + --hop-Accordion-standalone-border-color: var(--hop-neutral-border-weak); + --hop-Accordion-standalone-border-radius: var(--hop-shape-rounded-md); + --hop-Accordion-standalone-box-shadow: var(--hop-elevation-raised); + --hop-Accordion-standalone-disclosure-border-radius-size: var(--hop-shape-rounded-md); + --hop-Accordion-standalone-disclosure-last-child-border-block-end-size: 0; + + /* Inline */ + --hop-Accordion-inline-border-size: var(--hop-space-10); + --hop-Accordion-inline-border-color: transparent; + --hop-Accordion-inline-border-radius: 0; + --hop-Accordion-inline-box-shadow: 0; + --hop-Accordion-inline-disclosure-border-radius-size: 0; + --hop-Accordion-inline-disclosure-last-child-border-block-end-size: var(--hop-space-10); + + /* Internal Variables */ + --border-size: var(--hop-Accordion-standalone-border-size); + --border-color: var(--hop-Accordion-standalone-border-color); + --border-radius: var(--hop-Accordion-standalone-border-radius); + --box-shadow: var(--hop-Accordion-standalone-box-shadow); + --disclosure-border-radius-size: var(--hop-Accordion-standalone-disclosure-border-radius-size); + --disclosure-last-child-border-block-end-size: var(--hop-Accordion-standalone-disclosure-last-child-border-block-end-size); + + overflow: hidden; + border: var(--border-size) solid var(--border-color); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); +} + +.hop-Accordion--inline { + --border-size: var(--hop-Accordion-inline-border-size); + --border-color: var(--hop-Accordion-inline-border-color); + --border-radius: var(--hop-Accordion-inline-border-radius); + --box-shadow: var(--hop-Accordion-inline-box-shadow); + --disclosure-border-radius-size: var(--hop-Accordion-inline-disclosure-border-radius-size); + --disclosure-last-child-border-block-end-size: var(--hop-Accordion-inline-disclosure-last-child-border-block-end-size); +} + +.hop-Accordion__disclosure:first-child .hop-Accordion__disclosure-header button[slot="trigger"] { + border-start-start-radius: var(--disclosure-border-radius-size); + border-start-end-radius: var(--disclosure-border-radius-size); +} + +.hop-Accordion__disclosure:last-child:not([data-expanded]) .hop-Accordion__disclosure-header button[slot="trigger"] { + border-block-end-width: var(--disclosure-last-child-border-block-end-size); + border-end-start-radius: var(--disclosure-border-radius-size); + border-end-end-radius: var(--disclosure-border-radius-size); } diff --git a/packages/components/src/Accordion/src/Accordion.tsx b/packages/components/src/Accordion/src/Accordion.tsx index 550d593e9..85dfbe852 100644 --- a/packages/components/src/Accordion/src/Accordion.tsx +++ b/packages/components/src/Accordion/src/Accordion.tsx @@ -1,5 +1,16 @@ +import { useStyledSystem, type StyledComponentProps } from "@hopper-ui/styled-system"; +import type { DOMProps } from "@react-types/shared"; import { forwardRef, type ForwardedRef } from "react"; -import { useContextProps } from "react-aria-components"; +import { + composeRenderProps, + DisclosureGroup as RACDisclosureGroup, + useContextProps, + type DisclosureGroupProps as RACDisclosureGroupProps, + type SlotProps +} from "react-aria-components"; + +import { DisclosureContext, DisclosureHeaderContext, DisclosurePanelContext } from "../../Disclosure/index.ts"; +import { composeClassnameRenderProps, cssModule, SlotProvider } from "../../utils/index.ts"; import { AccordionContext } from "./AccordionContext.ts"; @@ -7,23 +18,77 @@ import styles from "./Accordion.module.css"; export const GlobalAccordionCssSelector = "hop-Accordion"; -export interface AccordionProps { +export interface AccordionProps extends StyledComponentProps, DOMProps, SlotProps { + variant?: "standalone" | "inline"; } -function Accordion(props:AccordionProps, ref: ForwardedRef) { +function Accordion(props:AccordionProps, ref: ForwardedRef) { [props, ref] = useContextProps(props, ref, AccordionContext); + const { stylingProps, ...ownProps } = useStyledSystem(props); + const { + className, + children: childrenProp, + style: styleProp, + variant = "standalone", + ...otherProps + } = ownProps; + + const classNames = composeClassnameRenderProps( + className, + GlobalAccordionCssSelector, + cssModule( + styles, + "hop-Accordion", + variant + ), + stylingProps.className + ); + + const style = composeRenderProps(styleProp, prev => { + return { + ...stylingProps.style, + ...prev + }; + }); + + const children = composeRenderProps(childrenProp, prev => { + return prev; + }); return ( -
+ + {accordionRenderProps => ( + + {children(accordionRenderProps)} + + )} + ); } /** - * TODO: tagline + * An accordion is a container for multiple disclosures. * * [View Documentation](TODO) */ -const _Accordion = forwardRef(Accordion); +const _Accordion = forwardRef(Accordion); _Accordion.displayName = "Accordion"; export { _Accordion as Accordion }; diff --git a/packages/components/src/Accordion/src/AccordionContext.ts b/packages/components/src/Accordion/src/AccordionContext.ts index 29fd0018e..9e7ed96cf 100644 --- a/packages/components/src/Accordion/src/AccordionContext.ts +++ b/packages/components/src/Accordion/src/AccordionContext.ts @@ -3,6 +3,6 @@ import type { ContextValue } from "react-aria-components"; import type { AccordionProps } from "./Accordion.tsx"; -export const AccordionContext = createContext>({}); +export const AccordionContext = createContext>({}); AccordionContext.displayName = "AccordionContext"; diff --git a/packages/components/src/Accordion/tests/chromatic/Accordion.stories.tsx b/packages/components/src/Accordion/tests/chromatic/Accordion.stories.tsx index cb534b1c8..5a4a8fc4a 100644 --- a/packages/components/src/Accordion/tests/chromatic/Accordion.stories.tsx +++ b/packages/components/src/Accordion/tests/chromatic/Accordion.stories.tsx @@ -1,6 +1,11 @@ +import { SparklesIcon } from "@hopper-ui/icons"; import type { Meta, StoryObj } from "@storybook/react"; +import { within } from "@storybook/test"; -import { Accordion } from "../../src/Accordion.tsx"; +import { Disclosure, DisclosureHeader, DisclosurePanel } from "../../../Disclosure/index.ts"; +import { Inline, Stack } from "../../../layout/index.ts"; +import { Text } from "../../../typography/Text/index.ts"; +import { Accordion, type AccordionProps } from "../../src/Accordion.tsx"; const meta = { title: "Components/Accordion", @@ -12,4 +17,217 @@ export default meta; type Story = StoryObj; export const Default = { + render: args => ( + +

Default

+ + + Workleap Officevibe + 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. + + + Workleap Pingboard + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + Workleap Performance + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + + +

Multiple Expanded

+ + + Workleap Officevibe + 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. + + + Workleap Pingboard + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + Workleap Performance + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + + +

Description

+ + + + + Workleap Officevibe + Engagement and Feedback + + + 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. + + + + + Workleap Pingboard + Org Chart + + + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + + + Workleap Performance + Performance Management + + + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + + +

Icon

+ + + + + + Workleap Officevibe + Engagement and Feedback + + + 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. + + + + + + Workleap Pingboard + Org Chart + + + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + + + + Workleap Performance + Performance Management + + + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + + +

Style

+ + + Workleap Officevibe + 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. + + + Workleap Pingboard + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + Workleap Performance + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + + + + ), + args: { + defaultExpandedKeys: ["officevibe"] + } } satisfies Story; + +export const InlineVariant = { + ...Default, + args: { + defaultExpandedKeys: ["officevibe"], + variant: "inline" + } +} satisfies Story; + +const StateTemplate = (args: Partial) => ( + + + + + + Workleap Officevibe + Engagement and Feedback + + + 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. + + + + + + Workleap Pingboard + Org Chart + + + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + + + + Workleap Performance + Performance Management + + + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + + +); + +export const DefaultStates = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const triggers = canvas.getAllByRole("button"); + + triggers.forEach(trigger => { + if (trigger.getAttribute("disabled") !== "") { + const accordionElem = trigger.closest(".hop-Accordion"); + + if (accordionElem?.getAttribute("data-chromatic-force-focus")) { + trigger?.setAttribute("data-focus-visible", "true"); + accordionElem?.removeAttribute("data-chromatic-force-focus"); + } + + if (accordionElem?.getAttribute("data-chromatic-force-press")) { + trigger?.setAttribute("data-pressed", "true"); + accordionElem?.removeAttribute("data-chromatic-force-press"); + } + + if (accordionElem?.getAttribute("data-chromatic-force-hover")) { + trigger.setAttribute("data-hovered", "true"); + accordionElem?.removeAttribute("data-chromatic-force-hover"); + } + } + }); + }, + render: args => ( + +

Default

+ +

Disabled

+ +

Focus Visible

+ +

Hovered

+ +

Pressed

+ +

Focus Visible & Disabled

+ + + ), + args: { + defaultExpandedKeys: ["officevibe"] + } +} satisfies Story; + +export const InlineStates = { + ...DefaultStates, + args: { + defaultExpandedKeys: ["officevibe"], + variant: "inline" + } +} satisfies Story; \ No newline at end of file diff --git a/packages/components/src/Accordion/tests/jest/Accordion.ssr.test.tsx b/packages/components/src/Accordion/tests/jest/Accordion.ssr.test.tsx index ce89d8bef..3adac5a33 100644 --- a/packages/components/src/Accordion/tests/jest/Accordion.ssr.test.tsx +++ b/packages/components/src/Accordion/tests/jest/Accordion.ssr.test.tsx @@ -3,13 +3,27 @@ */ import { renderToString } from "react-dom/server"; +import { Disclosure, DisclosureHeader, DisclosurePanel } from "../../../Disclosure/index.ts"; import { Accordion } from "../../src/Accordion.tsx"; describe("Accordion", () => { it("should render on the server", () => { const renderOnServer = () => renderToString( - Text + + + Workleap Officevibe + 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. + + + Workleap Pingboard + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + Workleap Performance + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + + ); expect(renderOnServer).not.toThrow(); diff --git a/packages/components/src/Accordion/tests/jest/Accordion.test.tsx b/packages/components/src/Accordion/tests/jest/Accordion.test.tsx index 1fe6c5995..307f71b14 100644 --- a/packages/components/src/Accordion/tests/jest/Accordion.test.tsx +++ b/packages/components/src/Accordion/tests/jest/Accordion.test.tsx @@ -1,10 +1,156 @@ import { render, screen } from "@hopper-ui/test-utils"; +import { createRef } from "react"; +import { Disclosure, DisclosureHeader, DisclosurePanel } from "../../../Disclosure/index.ts"; import { Accordion } from "../../src/Accordion.tsx"; import { AccordionContext } from "../../src/AccordionContext.ts"; describe("Accordion", () => { - it("should render a span with default class", () => { + it("should render with default class", () => { + render( + + + + Disclosure Header + + + Disclosure Panel + + + + ); + const element = screen.getByTestId("accordion"); + expect(element).toHaveClass("hop-Accordion"); + }); + + it("should support custom class", () => { + render( + + + + Disclosure Header + + + Disclosure Panel + + + + ); + + const element = screen.getByTestId("accordion"); + expect(element).toHaveClass("hop-Accordion"); + expect(element).toHaveClass("test"); + }); + + it("should support custom style", () => { + render( + + + + Disclosure Header + + + Disclosure Panel + + + + ); + + const element = screen.getByTestId("accordion"); + expect(element).toHaveStyle({ marginTop: "var(--hop-space-stack-sm)", marginBottom: "13px" }); + }); + + it("should support DOM props", () => { + render( + + + + Disclosure Header + + + Disclosure Panel + + + + ); + + const element = screen.getByTestId("accordion"); + expect(element).toHaveAttribute("data-foo", "bar"); + }); + + it("should support slots", () => { + render( + + + + + Disclosure Header + + + Disclosure Panel + + + + + ); + + const element = screen.getByTestId("accordion"); + expect(element).toHaveClass("test"); + }); + + it("should support refs", () => { + const ref = createRef(); + render( + + + + Disclosure Header + + + Disclosure Panel + + + + ); + + expect(ref.current).not.toBeNull(); + expect(ref.current instanceof HTMLDivElement).toBeTruthy(); + }); + + it("should render a class for standalone variant by default", () => { + render( + + + + Disclosure Header + + + Disclosure Panel + + + + ); + + const element = screen.getByTestId("accordion"); + expect(element).toHaveClass("hop-Accordion--standalone"); + }); + + it("should render a class for inline variant", () => { + render( + + + + Disclosure Header + + + Disclosure Panel + + + + ); + + const element = screen.getByTestId("accordion"); + expect(element).toHaveClass("hop-Accordion--inline"); }); }); diff --git a/packages/components/src/Disclosure/docs/controlled.tsx b/packages/components/src/Disclosure/docs/controlled.tsx index a096dd58d..46b28802e 100644 --- a/packages/components/src/Disclosure/docs/controlled.tsx +++ b/packages/components/src/Disclosure/docs/controlled.tsx @@ -5,7 +5,7 @@ export default function Example() { const [isExpanded, setIsExpanded] = useState(true); return ( -
+
+
+ + Disclosure Panel

Style

@@ -77,6 +84,33 @@ export const Default = { Disclosure Panel +

Zoom

+ + + + + Shipping, Delivery Times, and Easy Returns Policy Overview + Explore our comprehensive shipping options, estimated delivery times for various regions, and our simple, customer-friendly returns process to make sure you feel comfortable with every purchase. + + + + We offer free standard shipping on all orders over $50. Orders are typically processed within 1-2 business days, and delivery times vary based on your location. Expedited shipping options are available for an additional fee. + Returns are easy and hassle-free. You have 30 days from the date of delivery to return items for a full refund. Items must be in their original condition and packaging. For further assistance, please contact our support team. + + + + + + + Shipping, Delivery Times, and Easy Returns Policy Overview + Explore our comprehensive shipping options, estimated delivery times for various regions, and our simple, customer-friendly returns process to make sure you feel comfortable with every purchase. + + + + We offer free standard shipping on all orders over $50. Orders are typically processed within 1-2 business days, and delivery times vary based on your location. Expedited shipping options are available for an additional fee. + Returns are easy and hassle-free. You have 30 days from the date of delivery to return items for a full refund. Items must be in their original condition and packaging. For further assistance, please contact our support team. + + ), args: { @@ -92,17 +126,6 @@ export const InlineVariant = { } } satisfies Story; -export const CustomHeader = { - render: args => ( - - - - Disclosure Panel - - - ) -} satisfies Story; - const StateTemplate = (args: Partial) => ( @@ -172,40 +195,4 @@ export const InlineStates = { variant: "inline", defaultExpanded: true } -} satisfies Story; - -export const Zoom = { - render: args => ( - - - - - - Shipping, Delivery Times, and Easy Returns Policy Overview - Explore our comprehensive shipping options, estimated delivery times for various regions, and our simple, customer-friendly returns process to make sure you feel comfortable with every purchase. - - - - We offer free standard shipping on all orders over $50. Orders are typically processed within 1-2 business days, and delivery times vary based on your location. Expedited shipping options are available for an additional fee. - Returns are easy and hassle-free. You have 30 days from the date of delivery to return items for a full refund. Items must be in their original condition and packaging. For further assistance, please contact our support team. - - - - - - - Shipping, Delivery Times, and Easy Returns Policy Overview - Explore our comprehensive shipping options, estimated delivery times for various regions, and our simple, customer-friendly returns process to make sure you feel comfortable with every purchase. - - - - We offer free standard shipping on all orders over $50. Orders are typically processed within 1-2 business days, and delivery times vary based on your location. Expedited shipping options are available for an additional fee. - Returns are easy and hassle-free. You have 30 days from the date of delivery to return items for a full refund. Items must be in their original condition and packaging. For further assistance, please contact our support team. - - - - ), - args: { - defaultExpanded: true - } } satisfies Story; \ No newline at end of file From dbc7525d61ee778f588871c421d6066dffd54534 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Fri, 29 Nov 2024 20:10:26 -0500 Subject: [PATCH 10/10] fixed composed components in Disclosure, added accordion tests --- .../components/navigation/Accordion.mdx | 2 +- .../components/navigation/Disclosure.mdx | 2 +- .../src/Accordion/docs/controlled.tsx | 44 ++++++++++++++----- .../src/Accordion/docs/description.tsx | 43 +++++++++++++----- .../components/src/Accordion/docs/icon.tsx | 37 +++++++++++----- .../src/Accordion/docs/multiple-selection.tsx | 27 +++++++----- .../components/src/Accordion/docs/preview.tsx | 2 +- .../src/Accordion/docs/standalone.tsx | 34 +++++++------- .../src/Disclosure/src/Disclosure.module.css | 2 - 9 files changed, 125 insertions(+), 68 deletions(-) diff --git a/apps/docs/content/components/navigation/Accordion.mdx b/apps/docs/content/components/navigation/Accordion.mdx index fb9782d48..e13da42ee 100644 --- a/apps/docs/content/components/navigation/Accordion.mdx +++ b/apps/docs/content/components/navigation/Accordion.mdx @@ -32,7 +32,7 @@ links: An `Accordion` uses the following components. - + ## Usage diff --git a/apps/docs/content/components/navigation/Disclosure.mdx b/apps/docs/content/components/navigation/Disclosure.mdx index a7f7bf806..be906fba2 100644 --- 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. - + ## Usage diff --git a/packages/components/src/Accordion/docs/controlled.tsx b/packages/components/src/Accordion/docs/controlled.tsx index 3c2cdc509..9f68af615 100644 --- a/packages/components/src/Accordion/docs/controlled.tsx +++ b/packages/components/src/Accordion/docs/controlled.tsx @@ -1,17 +1,39 @@ -import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; +import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div, Span } from "@hopper-ui/components"; +import { useState } from "react"; export default function Example() { + const [expandedKeys, setExpandedKeys] = useState>(new Set()); + + const handleExpandedChange = (keys: Set) => { + setExpandedKeys(keys); + }; + return ( -
- - - Help your people work better - - - Tackle the challenges of hybrid, remote and distributed work, no matter what. - The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. - - +
+ + {expandedKeys.size > 0 ? `${Array.from(expandedKeys).join(", ")} is opened.` : "No sections are opened."} + + + + Workleap Officevibe + 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. + + + Workleap Pingboard + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + Workleap Performance + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + +
); } diff --git a/packages/components/src/Accordion/docs/description.tsx b/packages/components/src/Accordion/docs/description.tsx index 3c2cdc509..7eaa0e02b 100644 --- a/packages/components/src/Accordion/docs/description.tsx +++ b/packages/components/src/Accordion/docs/description.tsx @@ -1,17 +1,38 @@ -import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; +import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div, Inline, Text } from "@hopper-ui/components"; export default function Example() { return ( -
- - - Help your people work better - - - Tackle the challenges of hybrid, remote and distributed work, no matter what. - The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. - - +
+ + + + + Workleap Officevibe + Engagement survey and feedback + + + 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. + + + + + Workleap Pingboard + Interactive org chart and directory + + + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + + + Workleap Performance + Performance review management and tracking + + + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + +
); } + diff --git a/packages/components/src/Accordion/docs/icon.tsx b/packages/components/src/Accordion/docs/icon.tsx index 3c2cdc509..4fda2424e 100644 --- a/packages/components/src/Accordion/docs/icon.tsx +++ b/packages/components/src/Accordion/docs/icon.tsx @@ -1,17 +1,32 @@ -import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; +import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div, Text } from "@hopper-ui/components"; +import { PinSolidIcon, SparklesIcon, SproutIcon } from "@hopper-ui/icons"; export default function Example() { return ( -
- - - Help your people work better - - - Tackle the challenges of hybrid, remote and distributed work, no matter what. - The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. - - +
+ + + + + Workleap Officevibe + + 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. + + + + + Workleap Pingboard + + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + + + Workleap Performance + + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + +
); } diff --git a/packages/components/src/Accordion/docs/multiple-selection.tsx b/packages/components/src/Accordion/docs/multiple-selection.tsx index 3c2cdc509..1949c0972 100644 --- a/packages/components/src/Accordion/docs/multiple-selection.tsx +++ b/packages/components/src/Accordion/docs/multiple-selection.tsx @@ -1,17 +1,22 @@ -import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; +import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; export default function Example() { return ( -
- - - Help your people work better - - - Tackle the challenges of hybrid, remote and distributed work, no matter what. - The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. - - +
+ + + Workleap Officevibe + 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. + + + Workleap Pingboard + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + Workleap Performance + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + +
); } diff --git a/packages/components/src/Accordion/docs/preview.tsx b/packages/components/src/Accordion/docs/preview.tsx index d40a55498..0eb0113e1 100644 --- a/packages/components/src/Accordion/docs/preview.tsx +++ b/packages/components/src/Accordion/docs/preview.tsx @@ -3,7 +3,7 @@ import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@ export default function Example() { return (
- + Workleap Officevibe 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. diff --git a/packages/components/src/Accordion/docs/standalone.tsx b/packages/components/src/Accordion/docs/standalone.tsx index e0d235213..c1c39ffea 100644 --- a/packages/components/src/Accordion/docs/standalone.tsx +++ b/packages/components/src/Accordion/docs/standalone.tsx @@ -1,26 +1,22 @@ -import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; +import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; export default function Example() { return (
- - - Help your people work better - - - Tackle the challenges of hybrid, remote and distributed work, no matter what. - The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. - - - - - Help your people work better - - - Tackle the challenges of hybrid, remote and distributed work, no matter what. - The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. - - + + + Workleap Officevibe + 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. + + + Workleap Pingboard + Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier. + + + Workleap Performance + Drive impact by simplifying how your leaders and you manage team performance throughout the year. + +
); } diff --git a/packages/components/src/Disclosure/src/Disclosure.module.css b/packages/components/src/Disclosure/src/Disclosure.module.css index 444935bc8..c8deeba0e 100644 --- a/packages/components/src/Disclosure/src/Disclosure.module.css +++ b/packages/components/src/Disclosure/src/Disclosure.module.css @@ -57,8 +57,6 @@ .hop-Disclosure:has(.hop-Disclosure__header)[data-expanded] { --panel-border-size: var(--hop-Disclosure-standalone-panel-border-size-expanded); --panel-padding: var(--hop-Disclosure-with-header-panel-padding); - - background-color: red; } .hop-Disclosure--inline {