Disclosure tests

workleap · Nov 20, 2024 · f0d0fd6 · f0d0fd6
1 parent 8abd4a4
commit f0d0fd6
Show file tree

Hide file tree

Showing 5 changed files with 286 additions and 21 deletions.
diff --git a/packages/components/src/Disclosure/src/DisclosureHeader.module.css b/packages/components/src/Disclosure/src/DisclosureHeader.module.css
@@ -15,6 +15,9 @@
     --hop-DisclosureHeader-standalone-border-size:  var(--hop-space-10);
     --hop-DisclosureHeader-standalone-border-color: transparent;
     --hop-DisclosureHeader-standalone-border-radius: var(--hop-shape-rounded-md);
+    --hop-DisclosureHeader-inline-border-size:  0;
+    --hop-DisclosureHeader-inline-border-color: transparent;
+    --hop-DisclosureHeader-inline-border-radius: 0;
 
     /* Expanded */
     --hop-DisclosureHeader-separator-size-expanded: var(--hop-space-10);
@@ -28,19 +31,23 @@
     --hop-DisclosureHeader-color-hovered: var(--hop-neutral-text-hover);
     --hop-DisclosureHeader-prefix-color-hovered: var(--hop-neutral-icon-hover);
     --hop-DisclosureHeader-standalone-border-color-hovered: var(--hop-neutral-border-hover);
+    --hop-DisclosureHeader-inline-border-color-hovered: transparent;
 
     /* Pressed */
     --hop-DisclosureHeader-background-color-pressed: var(--hop-neutral-surface-press);
     --hop-DisclosureHeader-color-pressed: var(--hop-neutral-text-press);
     --hop-DisclosureHeader-prefix-color-pressed: var(--hop-neutral-icon-press);
     --hop-DisclosureHeader-standalone-border-color-pressed: var(--hop-neutral-border-press);
+    --hop-DisclosureHeader-inline-border-color-pressed: transparent;
 
     /* Focused */
     --hop-DisclosureHeader-background-color-focused: var(--hop-neutral-surface-hover);
     --hop-DisclosureHeader-color-focused: var(--hop-neutral-text-hover);
     --hop-DisclosureHeader-prefix-color-focused: var(--hop-neutral-icon-hover);
     --hop-DisclosureHeader-standalone-border-size-focused:  var(--hop-space-20);
     --hop-DisclosureHeader-standalone-border-color-focused: var(--hop-primary-border-focus);
+    --hop-DisclosureHeader-inline-border-size-focused:  var(--hop-space-20);
+    --hop-DisclosureHeader-inline-border-color-focused: var(--hop-primary-border-focus);
 
     /* Disabled */
     --hop-DisclosureHeader-background-color-disabled: var(--hop-neutral-surface-disabled);
@@ -49,6 +56,7 @@
     --hop-DisclosureHeader-description-color-disabled: var(--hop-neutral-text-disabled);
     --hop-DisclosureHeader-separator-color-disabled: var(--hop-neutral-border-disabled);
     --hop-DisclosureHeader-standalone-border-color-disabled: var(--hop-neutral-border-disabled);
+    --hop-DisclosureHeader-inline-border-color-disabled: transparent;
 
     /* Internal Variables */
     --background-color: var(--hop-DisclosureHeader-background-color);
@@ -58,9 +66,9 @@
     --cursor: pointer;
     --prefix-color: var(--hop-DisclosureHeader-prefix-color);
     --description-color: var(--hop-DisclosureHeader-description-color);
-    --standalone-border-size: var(--hop-DisclosureHeader-standalone-border-size);
-    --standalone-border-color: var(--hop-DisclosureHeader-standalone-border-color);
-    --standalone-border-radius: var(--hop-DisclosureHeader-standalone-border-radius);
+    --border-size: var(--hop-DisclosureHeader-standalone-border-size);
+    --border-color: var(--hop-DisclosureHeader-standalone-border-color);
+    --border-radius: var(--hop-DisclosureHeader-standalone-border-radius);
     --transition: var(--hop-easing-duration-2) var(--hop-easing-productive);
 
     display: flex;
@@ -95,48 +103,48 @@
     transition: color var(--transition), background-color var(--transition), border var(--transition);
 }
 
-.hop-DisclosureHeader__button--standalone::before {
+.hop-DisclosureHeader__button::before {
     content: "";
 
     position: absolute;
     inset: 0;
 
-    border: var(--standalone-border-size) solid var(--standalone-border-color);
-    border-radius: var(--standalone-border-radius);
+    border: var(--border-size) solid var(--border-color);
+    border-radius: var(--border-radius);
 }
 
-.hop-DisclosureHeader__button--standalone[data-expanded]::before {
-    border-radius: var(--standalone-border-radius);
+.hop-DisclosureHeader__button[data-expanded]::before {
+    border-radius: var(--border-radius);
 }
 
 .hop-DisclosureHeader__button[data-expanded] {
     --separator-size: var(--hop-DisclosureHeader-separator-size-expanded);
     --background-color: var(--hop-DisclosureHeader-background-color-expanded);
     --color: var(--hop-DisclosureHeader-color-expanded);
     --prefix-color: var(--hop-DisclosureHeader-prefix-color-expanded);
-    --standalone-border-radius: var(--hop-DisclosureHeader-standalone-border-radius-expanded);
+    --border-radius: var(--hop-DisclosureHeader-standalone-border-radius-expanded);
 }
 
 .hop-DisclosureHeader__button[data-hovered] {
     --background-color: var(--hop-DisclosureHeader-background-color-hovered);
     --color: var(--hop-DisclosureHeader-color-hovered);
     --prefix-color: var(--hop-DisclosureHeader-prefix-color-hovered);
-    --standalone-border-color: var(--hop-DisclosureHeader-standalone-border-color-hovered);
+    --border-color: var(--hop-DisclosureHeader-standalone-border-color-hovered);
 }
 
 .hop-DisclosureHeader__button[data-pressed] {
     --background-color: var(--hop-DisclosureHeader-background-color-pressed);
     --color: var(--hop-DisclosureHeader-color-pressed);
     --prefix-color: var(--hop-DisclosureHeader-prefix-color-pressed);
-    --standalone-border-color: var(--hop-DisclosureHeader-standalone-border-color-pressed);
+    --border-color: var(--hop-DisclosureHeader-standalone-border-color-pressed);
 }
 
 .hop-DisclosureHeader__button[data-focus-visible] {
     --background-color: var(--hop-DisclosureHeader-background-color-focused);
     --color: var(--hop-DisclosureHeader-color-focused);
     --prefix-color: var(--hop-DisclosureHeader-prefix-color-focused);
-    --standalone-border-size: var(--hop-DisclosureHeader-standalone-border-size-focused);
-    --standalone-border-color: var(--hop-DisclosureHeader-standalone-border-color-focused);
+    --border-size: var(--hop-DisclosureHeader-standalone-border-size-focused);
+    --border-color: var(--hop-DisclosureHeader-standalone-border-color-focused);
 }
 
 .hop-DisclosureHeader__button[data-disabled] {
@@ -146,7 +154,18 @@
     --prefix-color: var(--hop-DisclosureHeader-prefix-color-disabled);
     --description-color: var(--hop-DisclosureHeader-description-color-disabled);
     --separator-color: var(--hop-DisclosureHeader-separator-color-disabled);
-    --standalone-border-color: var(--hop-DisclosureHeader-standalone-border-color-disabled);
+    --border-color: var(--hop-DisclosureHeader-standalone-border-color-disabled);
+}
+
+.hop-DisclosureHeader__button--inline {
+    --border-size: var(--hop-DisclosureHeader-inline-border-size);
+    --border-color: var(--hop-DisclosureHeader-inline-border-color);
+    --border-radius: var(--hop-DisclosureHeader-inline-border-radius);
+}
+
+.hop-DisclosureHeader__button--inline[data-focus-visible] {
+    --border-size: var(--hop-DisclosureHeader-inline-border-size-focused);
+    --border-color: var(--hop-DisclosureHeader-inline-border-color-focused);
 }
 
 .hop-DisclosureHeader__prefix {

diff --git a/packages/components/src/Disclosure/tests/chromatic/Disclosure.stories.tsx b/packages/components/src/Disclosure/tests/chromatic/Disclosure.stories.tsx
@@ -1,11 +1,12 @@
 import { SparklesIcon } from "@hopper-ui/icons";
 import type { Meta, StoryObj } from "@storybook/react";
+import { within } from "@storybook/test";
 
 import { Button } from "../../../buttons/index.ts";
 import { Stack } from "../../../layout/index.ts";
 import { Text } from "../../../typography/Text/index.ts";
 import { DisclosureHeader, DisclosurePanel } from "../../index.ts";
-import { Disclosure } from "../../src/Disclosure.tsx";
+import { Disclosure, type DisclosureProps } from "../../src/Disclosure.tsx";
 
 const meta = {
     title: "Components/Disclosure",
@@ -24,7 +25,7 @@ export const Default = {
         <Stack>
             <h1>Default</h1>
             <Disclosure {...args}>
-                <DisclosureHeader>
+                <DisclosureHeader level={2}>
                     Disclosure Header
                 </DisclosureHeader>
                 <DisclosurePanel>
@@ -33,7 +34,7 @@ export const Default = {
             </Disclosure>
             <h1>Description</h1>
             <Disclosure {...args}>
-                <DisclosureHeader>
+                <DisclosureHeader level={2}>
                     <Text>Disclosure Header</Text>
                     <Text slot="description">Disclosure Description</Text>
                 </DisclosureHeader>
@@ -43,7 +44,7 @@ export const Default = {
             </Disclosure>
             <h1>Icon</h1>
             <Disclosure {...args}>
-                <DisclosureHeader prefix={<SparklesIcon />}>
+                <DisclosureHeader prefix={<SparklesIcon />} level={2}>
                     Disclosure Header
                 </DisclosureHeader>
                 <DisclosurePanel>
@@ -52,7 +53,7 @@ export const Default = {
             </Disclosure>
             <h1>Long</h1>
             <Disclosure {...args}>
-                <DisclosureHeader prefix={<SparklesIcon />}>
+                <DisclosureHeader prefix={<SparklesIcon />} level={2}>
                     <Text>Shipping, Delivery Times, and Easy Returns Policy Overview</Text>
                     <Text slot="description">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.</Text>
                 </DisclosureHeader>
@@ -62,6 +63,15 @@ export const Default = {
 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.
                 </DisclosurePanel>
             </Disclosure>
+            <h1>Style</h1>
+            <Disclosure {...args} border="decorative-option5" defaultExpanded>
+                <DisclosureHeader level={2} buttonProps={{ backgroundColor: "decorative-option5", color: "decorative-option5" }}>
+                    Disclosure Header
+                </DisclosureHeader>
+                <DisclosurePanel>
+                Disclosure Panel
+                </DisclosurePanel>
+            </Disclosure>
         </Stack>
 
     )
@@ -83,4 +93,104 @@ export const CustomHeader = {
             </DisclosurePanel>
         </Disclosure>
     )
+} satisfies Story;
+
+
+const StateTemplate = (args: Partial<DisclosureProps>) => (
+    <Stack>
+        <Disclosure {...args}>
+            <DisclosureHeader prefix={<SparklesIcon />} level={2}>
+                <Text>Shipping, Delivery Times, and Easy Returns Policy Overview</Text>
+                <Text slot="description">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.</Text>
+            </DisclosureHeader>
+            <DisclosurePanel>
+                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.
+            </DisclosurePanel>
+        </Disclosure>
+    </Stack>
+);
+
+export const DefaultStates = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const triggers = canvas.getAllByRole("button");
+
+        triggers.forEach(trigger => {
+            if (trigger.getAttribute("disabled") !== "") {
+                const disclosureElem = trigger.closest(".hop-Disclosure");
+
+                if (disclosureElem?.getAttribute("data-chromatic-force-focus")) {
+                    trigger?.setAttribute("data-focus-visible", "true");
+                    disclosureElem?.removeAttribute("data-chromatic-force-focus");
+                }
+
+                if (disclosureElem?.getAttribute("data-chromatic-force-press")) {
+                    trigger?.setAttribute("data-pressed", "true");
+                    disclosureElem?.removeAttribute("data-chromatic-force-press");
+                }
+
+                if (disclosureElem?.getAttribute("data-chromatic-force-hover")) {
+                    trigger.setAttribute("data-hovered", "true");
+                    disclosureElem?.removeAttribute("data-chromatic-force-hover");
+                }
+            }
+        });
+    },
+    render: args => (
+        <Stack>
+            <h1>Default</h1>
+            <StateTemplate {...args} />
+            <h1>Disabled</h1>
+            <StateTemplate {...args} isDisabled />
+            <h1>Focus Visible</h1>
+            <StateTemplate {...args} data-chromatic-force-focus />
+            <h1>Hovered</h1>
+            <StateTemplate {...args} data-chromatic-force-hover />
+            <h1>Pressed</h1>
+            <StateTemplate {...args} data-chromatic-force-press />
+            <h1>Focus Visible & Disabled</h1>
+            <StateTemplate {...args} data-chromatic-force-focus isDisabled />
+        </Stack>
+    )
+} satisfies Story;
+
+export const InlineStates = {
+    ...DefaultStates,
+    args: {
+        variant: "inline"
+    }
+} satisfies Story;
+
+export const Zoom = {
+    render: args => (
+        <Stack>
+            <Disclosure {...args} className="zoom-in">
+                <DisclosureHeader prefix={<SparklesIcon />} level={2}>
+                    <Text>Shipping, Delivery Times, and Easy Returns Policy Overview</Text>
+                    <Text slot="description">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.</Text>
+                </DisclosureHeader>
+                <DisclosurePanel>
+                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.
+                </DisclosurePanel>
+            </Disclosure>
+            <Disclosure {...args} className="zoom-out">
+                <DisclosureHeader prefix={<SparklesIcon />} level={2}>
+                    <Text>Shipping, Delivery Times, and Easy Returns Policy Overview</Text>
+                    <Text slot="description">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.</Text>
+                </DisclosureHeader>
+                <DisclosurePanel>
+                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.
+                </DisclosurePanel>
+            </Disclosure>
+        </Stack>
+    ),
+    args: {
+        defaultExpanded: true
+    }
 } satisfies Story;