diff --git a/design-library/src/components/BccAccordion/BccAccordion.css b/design-library/src/components/BccAccordion/BccAccordion.css index e376343b..999be9dc 100644 --- a/design-library/src/components/BccAccordion/BccAccordion.css +++ b/design-library/src/components/BccAccordion/BccAccordion.css @@ -1,105 +1,100 @@ @layer components { - .bcc-accordion { - @apply rounded-lg bg-secondary shadow-sm; - } - - .bcc-accordion-header { - @apply flex w-full px-3 bg-white flex-row rounded-lg items-center justify-between cursor-pointer; - } - - .bcc-accordion-title-wrap { - @apply flex flex-row items-center - } - - .bcc-accordion:has(.bcc-accordion-interactive) { - @apply border border-on-primary bg-white; - } - - .bcc-accordion:has(.bcc-accordion-desktop) { - @apply bg-white shadow-none; - } - - .bcc-accordion:has(.bcc-accordion-lg) { - & .bcc-accordion-content { - @apply px-4; - } - } - - .bcc-accordion:has(.bcc-accordion-readonly) { - & .bcc-accordion-content { - @apply pt-0 text-secondary text-body-sm; - } - } - - .bcc-accordion:has(.bcc-accordion-brand) { - & .bcc-accordion-content { - @apply pt-3 px-4 text-secondary text-body-sm; - } - } - - .bcc-accordion-header.bcc-accordion-readonly.bcc-accordion-active { - @apply bg-secondary pb-1; - } - - .bcc-accordion-header.bcc-accordion-interactive.bcc-accordion-active { - @apply rounded-b-none border-b border-on-primary; - } - - .bcc-accordion-desktop.bcc-accordion-active { - @apply bg-secondary; - } - - .bcc-accordion-base { - @apply py-2 px-3; - } - .bcc-accordion-lg { - @apply px-4 py-4 text-lg; - } - .bcc-accordion-title { - @apply font-semibold text-primary flex flex-col items-start; - } - .bcc-accordion-subtitle { - @apply text-caption text-secondary; - } - .bcc-accordion-right { - @apply flex flex-row items-center justify-end h-6; - } - .bcc-accordion-icon { - @apply h-full text-interactive rotate-0 transform duration-300; - - > svg{ - @apply w-6 h-6; - } - } - .bcc-accordion-active .bcc-accordion-icon { - @apply rotate-180 transform; - } - - .bcc-accordion-brand.bcc-accordion-active { - @apply bg-brand-600; - & .bcc-accordion-title { - @apply text-emphasis; - } - & .bcc-accordion-subtitle { - @apply text-neutral-200; - } - & .bcc-accordion-icon { - @apply text-neutral-200; - } - } - .bcc-accordion-right-icon { - @apply ml-4; - } - - .bcc-accordion.bcc-accordion-interactive { - @apply border border-on-primary bg-white; - } - - .bcc-accordion.bcc-desktop { - @apply bg-white; - } - - .bcc-accordion-content { - @apply w-full px-3 py-4; - } + .bcc-accordion { + @apply rounded-lg bg-secondary shadow-sm; + } + + .bcc-accordion-header { + @apply flex w-full cursor-pointer flex-row items-center justify-between rounded-lg bg-white px-3; + } + + .bcc-accordion-title-wrap { + @apply flex flex-row items-center; + } + + .bcc-accordion:has(.bcc-accordion-lg) { + & .bcc-accordion-content { + @apply px-4; + } + } + + .bcc-accordion-base { + @apply px-3 py-2; + } + .bcc-accordion-lg { + @apply px-4 py-4 text-lg; + } + .bcc-accordion-title { + @apply flex flex-col items-start font-semibold text-primary; + } + .bcc-accordion-subtitle { + @apply text-caption text-secondary; + } + .bcc-accordion-info { + @apply text-caption text-tertiary; + } + .bcc-accordion-right { + @apply flex h-6 flex-row items-center justify-end; + } + .bcc-accordion-icon { + @apply h-full rotate-0 transform text-interactive duration-300; + + > svg { + @apply h-6 w-6; + } + } + .bcc-accordion-active .bcc-accordion-icon { + @apply rotate-180 transform; + } + + .bcc-accordion-right-icon { + @apply ml-4; + } + + .bcc-accordion-content { + @apply text-body-sm w-full px-3 py-4; + } + + /* Filled Variant */ + .bcc-accordion:has(.bcc-accordion-filled) { + @apply bg-secondary; + & .bcc-accordion-content { + @apply rounded-b-lg border border-on-primary; + } + } + .bcc-accordion-filled.bcc-accordion-header { + @apply border border-on-primary bg-secondary; + } + .bcc-accordion-filled.bcc-accordion-active.bcc-accordion-header { + @apply rounded-b-none; + } + + /* Outlined Variant */ + .bcc-accordion:has(.bcc-accordion-outlined) { + @apply border border-on-primary bg-white; + } + .bcc-accordion-header.bcc-accordion-outlined.bcc-accordion-active { + @apply rounded-b-none border-b border-on-primary; + } + .bcc-accordion.bcc-accordion-outlined { + @apply border border-on-primary bg-white; + } + + /* Ghost Variant */ + .bcc-accordion:has(.bcc-accordion-ghost) { + @apply shadow-none; + background-color: unset; + } + .bcc-accordion-ghost.bcc-accordion-header { + @apply hover:bg-secondary; + } + + /* Soft Variant */ + .bcc-accordion:has(.bcc-accordion-soft) { + & .bcc-accordion-content { + @apply text-body-sm pt-0 text-secondary; + } + } + .bcc-accordion-header.bcc-accordion-soft.bcc-accordion-header { + @apply bg-secondary; + } } diff --git a/design-library/src/components/BccAccordion/BccAccordion.spec.ts b/design-library/src/components/BccAccordion/BccAccordion.spec.ts index 69a23ce7..324a9b7c 100644 --- a/design-library/src/components/BccAccordion/BccAccordion.spec.ts +++ b/design-library/src/components/BccAccordion/BccAccordion.spec.ts @@ -17,17 +17,21 @@ describe("BccAccordion", () => { props: { title: "Props Title", subtitle: "Props Subtitle", - variant: "readonly", + info: "Props Info", + variant: "filled", size: "base", }, slots: { - left: '
Slot Content
', + prepend: '
Slot Content
', + append: '
Slot Content
', }, }); expect(wrapper.find(".bcc-accordion-title").text()).toBe("Props Title"); expect(wrapper.find(".bcc-accordion-subtitle").text()).toBe("Props Subtitle"); - expect(wrapper.find(".test-slot-content").exists()).toBe(true); + expect(wrapper.find(".bcc-accordion-info").text()).toBe("Props Info"); + expect(wrapper.find(".test-slot-content-left").exists()).toBe(true); + expect(wrapper.find(".test-slot-content-right").exists()).toBe(true); }); it("toggles content visibility on header click", async () => { diff --git a/design-library/src/components/BccAccordion/BccAccordion.stories.ts b/design-library/src/components/BccAccordion/BccAccordion.stories.ts index f982d576..a70f027f 100644 --- a/design-library/src/components/BccAccordion/BccAccordion.stories.ts +++ b/design-library/src/components/BccAccordion/BccAccordion.stories.ts @@ -1,4 +1,7 @@ import BccAccordion from "./BccAccordion.vue"; +import BccCheckbox from "../BccCheckbox/BccCheckbox.vue"; +import BccPin from "../BccPin/BccPin.vue"; +import BccBadge from "../BccBadge/BccBadge.vue"; import { GeneticsIcon, VisibilityIcon } from "@bcc-code/icons-vue"; import { Meta, StoryFn } from "@storybook/vue3"; import { ref } from "vue"; @@ -15,8 +18,12 @@ export default { control: { type: "text" }, description: "The subtitle of the accordion", }, + info: { + control: { type: "text" }, + description: "The info on the right side of the accordion header", + }, variant: { - options: ["readonly", "brand", "interactive", "desktop"], + options: ["filled", "outlined", "soft", "ghost"], control: { type: "radio" }, description: "The visual variant of the accordion", }, @@ -25,17 +32,9 @@ export default { control: { type: "radio" }, description: "The size of the accordion", }, - icon: { - control: { type: "object" }, - description: "The icon of the accordion", - }, - badge: { - control: { type: "object" }, - description: "The badge of the accordion", - }, - pin: { - control: { type: "object" }, - description: "The pin of the accordion", + open: { + description: "The option to initiate the accordion in an expanded state or not", + control: { type: "boolean" }, }, }, } as Meta; @@ -53,114 +52,56 @@ const Template: StoryFn = (args) => ({ }); export const Example = Template.bind({}); Example.args = { - title: "Example Accordion with Pin", + title: "Example Accordion", subtitle: "This is a subtitle", - variant: "readonly", + variant: "filled", size: "base", }; -Example.parameters = { - docs: { - source: { - language: "html", - code: ` - - Here is some content inside the BccAccordion component. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - `, - }, - }, -}; - -const TempWithPin: StoryFn = (args) => ({ - components: { BccAccordion }, - setup() { - return { args }; - }, - template: ` - - Here is some content inside the BccAccordion component. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - `, -}); -export const WithPin = TempWithPin.bind({}); -WithPin.args = { - title: "Example Accordion with Pin", - variant: "readonly", +export const WithOpened = Template.bind({}); +WithOpened.args = { + title: "Example Accordion was expanded once the page was loaded", + variant: "outlined", size: "base", - pin: { - text: "310", - context: "warning", - }, + open: true, }; -const TempWithBadge: StoryFn = (args) => ({ - components: { BccAccordion }, - setup() { - return { args }; - }, - template: ` - - Here is some content inside the BccAccordion component. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - `, -}); -export const WithBadge = TempWithBadge.bind({}); -WithBadge.args = { - title: "Example Accordion with Badge", - subtitle: "This is a subtitle", - variant: "readonly", - size: "base", - badge: { - text: "New", - context: "info", - }, -}; - -const TempWithIcon: StoryFn = (args) => ({ - components: { BccAccordion, GeneticsIcon }, - setup() { - return { args }; - }, - template: ` - - Here is some content inside the BccAccordion component. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - `, -}); -export const WithIcon = TempWithIcon.bind({}); -WithIcon.args = { - title: "Example Accordion with Icon", - variant: "brand", +export const WithInfoText = Template.bind({}); +WithInfoText.args = { + title: "Example Accordion look at the info to the right", + info: "I am the Info text on the right", + variant: "filled", size: "base", - icon: GeneticsIcon, }; const TempWithLeft: StoryFn = (args) => ({ - components: { BccAccordion }, + components: { BccAccordion, BccCheckbox }, setup() { return { args }; }, template: ` - Here is some content inside the BccAccordion component. Lorem ipsum dolor sit amet, consectetur adipiscing elit. `, }); -export const WithLeft = TempWithLeft.bind({}); -WithLeft.args = { - title: "Example Accordion with Left", - variant: "interactive", +export const WithLeftSlot = TempWithLeft.bind({}); +WithLeftSlot.args = { + title: "Example Accordion with slot to the left", + variant: "filled", size: "lg", left: true, }; -const TempWithAction: StoryFn = (args) => ({ +const TempWithRight: StoryFn = (args) => ({ components: { BccAccordion, VisibilityIcon }, setup() { const visible = ref(false); @@ -170,32 +111,32 @@ const TempWithAction: StoryFn = (args) => ({ }, template: ` -