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

BccAccordion additions #304

Merged
merged 3 commits into from
May 21, 2024
Merged

BccAccordion additions #304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ec57b73
Add `open` option to Accordion
StevenMalaihollo Apr 26, 2024
2677812
Refactor variant usage
StevenMalaihollo May 3, 2024
12ddf5b
Accordion add slots and info text
StevenMalaihollo May 6, 2024
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
201 changes: 98 additions & 103 deletions design-library/src/components/BccAccordion/BccAccordion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
10 changes: 7 additions & 3 deletions design-library/src/components/BccAccordion/BccAccordion.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,21 @@ describe("BccAccordion", () => {
props: {
title: "Props Title",
subtitle: "Props Subtitle",
variant: "readonly",
info: "Props Info",
variant: "filled",
size: "base",
},
slots: {
left: '<div class="test-slot-content">Slot Content</div>',
prepend: '<div class="test-slot-content-left">Slot Content</div>',
append: '<div class="test-slot-content-right">Slot Content</div>',
},
});

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 () => {
Expand Down
Loading
Loading