Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: ✨ update sd-accordion meeting WCAG criteria / design refresh #575

Merged
merged 7 commits into from
Nov 20, 2023
Merged

feat: ✨ update sd-accordion meeting WCAG criteria / design refresh #575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9e97b0e
feat: sd-accordion refresh
Vahid1919 Nov 16, 2023
131af6f
fix: remove unnecesary background color css
Vahid1919 Nov 16, 2023
9f73081
fix: focus on proper element in sd-carousel
Vahid1919 Nov 16, 2023
8a76945
fix: remove userEvent import
Vahid1919 Nov 16, 2023
845528d
fix: make accent size responsive
Vahid1919 Nov 16, 2023
d74ce5e
fix: add Samples and remove background property
Vahid1919 Nov 16, 2023
8b27690
fix: improve height calculation for accent
Vahid1919 Nov 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions packages/components/src/components/accordion-group/accordion-group.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,3 +103,55 @@ export const Mouseless = {
});
}
};

/**
* Accordion group can be used with background options of white, neutral-100 and primary-100.
*/

export const Samples = {
render: () => {
return html`
<div class="w-full flex gap-8 flex-col">
<div>
<div class="p-4 mb-8 bg-neutral-100 text-left text-[14px] font-bold box-border">white</div>

<sd-accordion-group class="w-1/2 bg-white p-8">
<sd-accordion summary="Accordion 1"
><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
><sd-accordion summary="Accordion 2"
><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
><sd-accordion summary="Accordion 3"
><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
>
</sd-accordion-group>
</div>

<div>
<div class="w-full p-4 mb-8 bg-neutral-100 text-left text-[14px] font-bold box-border">neutral-100</div>
<sd-accordion-group class="w-1/2 bg-neutral-100 p-8">
<sd-accordion summary="Accordion 1"
><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
><sd-accordion summary="Accordion 2"
><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
><sd-accordion summary="Accordion 3"
><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
>
</sd-accordion-group>
</div>

<div>
<div class="w-full p-4 mb-8 bg-neutral-100 text-left text-[14px] font-bold box-border">primary-100</div>
<sd-accordion-group class="w-1/2 bg-primary-100 p-8">
<sd-accordion summary="Accordion 1"
><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
><sd-accordion summary="Accordion 2"
><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
><sd-accordion summary="Accordion 3"
><div class="slot slot--border slot--text h-16">Default slot</div></sd-accordion
>
</sd-accordion-group>
</div>
</div>
`;
}
};
11 changes: 8 additions & 3 deletions packages/components/src/components/accordion/accordion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,13 +150,12 @@ export default class SdAccordion extends SolidElement {

render() {
return html`
<div part="base" class="outline outline-1 outline-neutral-400 -outline-offset-1">
<div part="base" class="border-y-[1px] border-neutral-400">
<header
part="header"
id="header"
class=${cx(
'flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline',
this.open ? 'bg-white text-accent hover:bg-neutral-200' : 'text-primary bg-neutral-100 hover:bg-neutral-200'
'flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline text-primary hover:bg-neutral-200 relative group'
)}
role="button"
aria-expanded=${this.open ? 'true' : 'false'}
Expand All @@ -165,6 +164,12 @@ export default class SdAccordion extends SolidElement {
@click=${this.handleSummaryClick}
@keydown=${this.handleSummaryKeyDown}
>
<div
class=${cx(
!this.open && 'opacity-0',
'w-1 bg-accent absolute left-0 transition-all h-[calc(100%-16px)] group-hover:h-full'
)}
></div>
<slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot>

<span
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/components/carousel/carousel.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import '../../solid-components';
import { html } from 'lit';
import { storybookDefaults, storybookHelpers, storybookTemplate } from '../../../scripts/storybook/helper';
import { userEvent } from '@storybook/testing-library';
import { waitUntil } from '@open-wc/testing-helpers';

const { argTypes, parameters } = storybookDefaults('sd-carousel');
Expand Down Expand Up @@ -243,7 +242,8 @@ export const Mouseless = {

play: async ({ canvasElement }: { canvasElement: HTMLUnknownElement }) => {
const el = canvasElement.querySelector('.mouseless sd-carousel');
await waitUntil(() => el?.shadowRoot?.querySelector('scroll-container'));
await userEvent.type(el!.shadowRoot!.querySelector('scroll-container')!, '{space}', { pointerEventsCheck: 0 });
await waitUntil(() => el?.shadowRoot?.querySelector('#scroll-container'));

el?.shadowRoot?.querySelector<HTMLElement>('#scroll-container')!.focus();
}
};
Loading