Skip to content

Commit

Permalink
Fixed accordion and Disclosure stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@vicky-comeau
vicky-comeau committed Nov 29, 2024
1 parent 352c039 commit 4b16b9f
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 55 deletions.
1 change: 0 additions & 1 deletion packages/components/src/Accordion/src/Accordion.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@
}

.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);
}
Expand Down
65 changes: 65 additions & 0 deletions packages/components/src/Accordion/tests/chromatic/Accordion.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,71 @@ export const Default = {
<DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
</Disclosure>
</Accordion>
<h1>Zoom</h1>
<Accordion {...args} className="zoom-in">
<Disclosure id="officevibe">
<DisclosureHeader>
<SparklesIcon />
<Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
<Text>Workleap Officevibe</Text>
<Text color="neutral-weak" size="sm">Engagement 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>
<SparklesIcon />
<Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
<Text>Workleap Pingboard</Text>
<Text color="neutral-weak" size="sm">Org Chart</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>
<SparklesIcon />
<Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
<Text>Workleap Performance</Text>
<Text color="neutral-weak" size="sm">Performance Management</Text>
</Inline>
</DisclosureHeader>
<DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
</Disclosure>
</Accordion>
<Accordion {...args} className="zoom-out">
<Disclosure id="officevibe">
<DisclosureHeader>
<SparklesIcon />
<Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
<Text>Workleap Officevibe</Text>
<Text color="neutral-weak" size="sm">Engagement 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>
<SparklesIcon />
<Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
<Text>Workleap Pingboard</Text>
<Text color="neutral-weak" size="sm">Org Chart</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>
<SparklesIcon />
<Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
<Text>Workleap Performance</Text>
<Text color="neutral-weak" size="sm">Performance Management</Text>
</Inline>
</DisclosureHeader>
<DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
</Disclosure>
</Accordion>
</Stack>
),
args: {
Expand Down
7 changes: 2 additions & 5 deletions packages/components/src/Disclosure/src/Disclosure.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,11 @@
--panel-padding: var(--hop-Disclosure-with-header-panel-padding);
}

.hop-Disclosure--inline {
--panel-border-size: var(--hop-Disclosure-inline-panel-border-size);
--panel-border-color: var(--hop-Disclosure-inline-panel-border-color);
}

.hop-Disclosure--inline:has(.hop-Disclosure__header) {
--border-radius: var(--hop-Disclosure-inline-border-radius);
--box-shadow: var(--hop-Disclosure-inline-box-shadow);
--panel-border-size: var(--hop-Disclosure-inline-panel-border-size);
--panel-border-color: var(--hop-Disclosure-inline-panel-border-color);
}

.hop-Disclosure--inline:has(.hop-Disclosure__header)[data-expanded] {
Expand Down
85 changes: 36 additions & 49 deletions packages/components/src/Disclosure/tests/chromatic/Disclosure.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,15 @@ export const Default = {
</Inline>
</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.
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>
<h1>Custom Header</h1>
<Disclosure {...args}>
<Button slot="trigger">Custom Header</Button>
<DisclosurePanel>
Disclosure Panel
</DisclosurePanel>
</Disclosure>
<h1>Style</h1>
Expand All @@ -77,6 +84,33 @@ export const Default = {
Disclosure Panel
</DisclosurePanel>
</Disclosure>
<h1>Zoom</h1>
<Disclosure {...args} className="zoom-in">
<DisclosureHeader level={2}>
<SparklesIcon />
<Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
<Text>Shipping, Delivery Times, and Easy Returns Policy Overview</Text>
<Text color="neutral-weak" size="sm">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>
</Inline>
</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 level={2}>
<SparklesIcon />
<Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
<Text>Shipping, Delivery Times, and Easy Returns Policy Overview</Text>
<Text color="neutral-weak" size="sm">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>
</Inline>
</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: {
Expand All @@ -92,17 +126,6 @@ export const InlineVariant = {
}
} satisfies Story;

export const CustomHeader = {
render: args => (
<Disclosure {...args}>
<Button slot="trigger">Custom Header</Button>
<DisclosurePanel>
Disclosure Panel
</DisclosurePanel>
</Disclosure>
)
} satisfies Story;

const StateTemplate = (args: Partial<DisclosureProps>) => (
<Disclosure {...args}>
<DisclosureHeader level={2}>
Expand Down Expand Up @@ -172,40 +195,4 @@ export const InlineStates = {
variant: "inline",
defaultExpanded: true
}
} satisfies Story;

export const Zoom = {
render: args => (
<Stack>
<Disclosure {...args} className="zoom-in">
<DisclosureHeader level={2}>
<SparklesIcon />
<Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
<Text>Shipping, Delivery Times, and Easy Returns Policy Overview</Text>
<Text color="neutral-weak" size="sm">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>
</Inline>
</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 level={2}>
<SparklesIcon />
<Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
<Text>Shipping, Delivery Times, and Easy Returns Policy Overview</Text>
<Text color="neutral-weak" size="sm">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>
</Inline>
</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;

0 comments on commit 4b16b9f

Please sign in to comment.