Skip to content

Commit

Permalink
feat(GovAlta#2162): add icon position & replace design tokens for acc…
Browse files Browse the repository at this point in the history 
…ordion
  • Loading branch information
@vanessatran-ddi
vanessatran-ddi committed Oct 22, 2024
1 parent 4d9d967 commit b8d25b8
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 27 deletions.
5 changes: 5 additions & 0 deletions libs/react-components/src/lib/accordion/accordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { ReactNode } from "react";
import { Margins } from "../../common/styling";

export type GoAHeadingSize = "small" | "medium";
export type GoAIconPosition = "left" | "right";

interface WCProps extends Margins {
open?: boolean;
Expand All @@ -11,6 +12,7 @@ interface WCProps extends Margins {
headingContent?: ReactNode;
maxwidth?: string;
testid?: string;
iconposition?: string;
}

declare global {
Expand All @@ -30,6 +32,7 @@ export interface GoAAccordionProps extends Margins {
headingContent?: ReactNode;
maxWidth?: string;
testid?: string;
iconPosition?: GoAIconPosition;
children: ReactNode;
}

Expand All @@ -39,6 +42,7 @@ export function GoAAccordion({
headingSize,
secondaryText,
headingContent,
iconPosition,
maxWidth,
testid,
children,
Expand All @@ -53,6 +57,7 @@ export function GoAAccordion({
headingSize={headingSize}
heading={heading}
secondaryText={secondaryText}
iconposition={iconPosition}
maxwidth={maxWidth}
testid={testid}
mt={mt}
Expand Down
72 changes: 45 additions & 27 deletions libs/web-components/src/components/accordion/Accordion.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
export let mr: Spacing = null;
export let mb: Spacing = "xs";
export let ml: Spacing = null;
export let iconposition: "left" | "right" = "left";
// Private
let _hovering: boolean = false;
Expand Down Expand Up @@ -86,12 +86,16 @@
aria-controls={`${_accordionId}-content`}
aria-expanded={open === "true"}
>
<goa-icon
type="chevron-forward"
fillcolor={_hovering
? "var(--goa-color-interactive-hover)"
: "var(--goa-color-interactive-default)"}
></goa-icon>

{#if iconposition === "left"}
<goa-icon
type="chevron-forward"
fillcolor={_hovering
? "var(--goa-color-interactive-hover)"
: "var(--goa-color-interactive-default)"}
></goa-icon>
{/if}

<div class="title" bind:this={_titleEl} id={`${_accordionId}-heading`}>
<span
class="heading heading-{headingsize}"
Expand All @@ -107,6 +111,15 @@
<slot name="headingcontent" />
</div>
</div>

{#if iconposition === "right"}
<goa-icon
type="chevron-forward"
fillcolor={_hovering
? "var(--goa-color-interactive-hover)"
: "var(--goa-color-interactive-default)"}
></goa-icon>
{/if}
</summary>
<div
class="content"
Expand All @@ -127,6 +140,11 @@
font-size: var(--goa-font-size-4);
}
.goa-accordion {
border-radius: var(--goa-accordion-border-radius);
box-shadow: var(--goa-accordion-shadow);
}
.goa-accordion,
.goa-accordion * {
box-sizing: border-box;
Expand All @@ -138,13 +156,11 @@
summary {
min-height: 3.5rem;
padding: var(--goa-space-s) var(--goa-space-m) var(--goa-space-s) 0;
border-width: var(--goa-border-width-s);
border-style: solid;
border-radius: var(--goa-border-radius-m);
background-color: var(--goa-color-greyscale-100);
border-color: var(--goa-color-greyscale-200);
color: var(--goa-color-text-default);
padding: var(--goa-accordion-padding-heading);
border: var(--goa-accordion-border);
border-radius: var(--goa-accordion-border-radius);
background-color: var(--goa-accordion-color-bg-heading);
color: var(--goa-accordion-color-heading);
cursor: pointer;
list-style: none;
display: flex;
Expand All @@ -155,11 +171,12 @@
}
summary:hover {
background-color: var(--goa-color-greyscale-200);
background-color: var(--goa-accordion-color-bg-heading-hover);
color: var(--goa-accordion-color-heading-hover);
}
summary:focus-visible,
summary:active {
background-color: var(--goa-color-greyscale-100);
background-color: var(--goa-accordion-color-bg-heading);
outline: none;
}
Expand All @@ -172,7 +189,7 @@
bottom: -1px;
left: -1px;
border: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
border-radius: 4px;
border-radius: var(--goa-accordion-border-radius);
}
summary::marker, /* Latest Chrome, Edge, Firefox */
Expand All @@ -194,7 +211,7 @@
}
.heading {
font: var(--goa-typography-heading-s);
font: var(--goa-accordion-heading-s);
padding-right: 1rem;
}
Expand All @@ -221,12 +238,12 @@
}
.content {
border-bottom: var(--goa-border-width-s) solid
var(--goa-color-greyscale-200);
border-left: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
border-right: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
border-bottom-left-radius: var(--goa-border-radius-m);
border-bottom-right-radius: var(--goa-border-radius-m);
border-bottom: var(--goa-accordion-border);
border-left: var(--goa-accordion-border);
border-right: var(--goa-accordion-border);
border-bottom-left-radius: var(--goa-accordion-border-radius);
border-bottom-right-radius: var(--goa-accordion-border-radius);
background-color: var(--goa-accordion-color-bg-content);
}
.content :global(::slotted(*:last-child)) {
Expand All @@ -240,17 +257,18 @@
details[open] summary {
border-bottom-left-radius: var(--goa-border-radius-none);
border-bottom-right-radius: var(--goa-border-radius-none);
border-bottom: var(--goa-accordion-divider);
}
/* Sizes */
.heading-medium {
line-height: 2rem;
font: var(--goa-typography-heading-m);
font: var(--goa-accordion-heading-m);
}
@container self (--mobile) {
.content {
padding: 1.5rem;
padding: var(--goa-accordion-padding-content-narrow);
}
.title {
display: flex;
Expand All @@ -261,7 +279,7 @@
@container self (--not-mobile) {
.content {
padding: 1.5rem 2rem 1.5rem 3.5rem;
padding: var(--goa-accordion-padding-content-wide);
}
.title {
align-items: center;
Expand Down

0 comments on commit b8d25b8

Please sign in to comment.