@uh-design-system/component-library 0.2.4 → 0.4.0

package/dist/collection/components/00-foundations/typography/stories/typography.stories.js

@@ -0,0 +1,110 @@
+import "../_typography.scss";
+import "../_base.scss";
+import "../_headings.scss";
+import "../_bodyText.scss";
+import { getTypographyVariables, createCategorySection, categories } from "../../../../utils/typography/typographyUtils";
+import { html } from "lit";
+import { generateLoremIpsum } from "../../../../utils/utils";
+const meta = {
+    title: 'Foundations/Typography',
+};
+export default meta;
+export const TokenClasses = {
+    argTypes: {
+        headingExample: {
+            name: 'Heading',
+            control: 'text',
+        },
+        textExample: {
+            name: 'Text',
+            control: 'text',
+        },
+    },
+    args: {
+        headingExample: generateLoremIpsum(),
+        textExample: generateLoremIpsum({ paragraphs: 2, wordsPerParagraph: 20, consistent: true }),
+    },
+    render: ({ headingExample, textExample }) => html `
+    <div>
+      <h2>Heading styles</h2>
+      <div class="ds-heading--2xLarge">${headingExample} </div>
+      <div class="ds-heading--xLarge">${headingExample} </div>
+      <div class="ds-heading--large">${headingExample} </div>
+      <div class="ds-heading--medium">${headingExample} </div>
+      <div class="ds-heading--small">${headingExample} </div>
+      <div class="ds-heading--xSmall">${headingExample} </div>
+      
+      <h2>Text Styles</h2>
+      <h3>Regular</h3>
+      <p class="ds-text--2xl-regular">${textExample} (2XL Regular) </p>
+      <p class="ds-text--xl-regular">${textExample} (XL Regular) </p>
+      <p class="ds-text--lg-regular">${textExample} (Large Regular) </p>
+      <p class="ds-text--md-regular">${textExample} (Medium Regular) </p>
+      <p class="ds-text--sm-regular">${textExample} (Small Regular) </p>
+      <p class="ds-text--xs-regular">${textExample} (XS Regular) </p>
+      <h3>SemiBold</h3>
+      <p class="ds-text--2xl-semibold">${textExample} (2XL Semibold) </p>
+      <p class="ds-text--xl-semibold">${textExample} (XL Semibold) </p>
+      <p class="ds-text--lg-semibold">${textExample} (Large Semibold) </p>
+      <p class="ds-text--md-semibold">${textExample} (Medium Semibold) </p>
+      <p class="ds-text--sm-semibold">${textExample} (Small Semibold) </p>
+      <p class="ds-text--xs-semibold">${textExample} (XS Semibold) </p>
+      <h3>Bold</h3>
+      <p class="ds-text--2xl-bold">${textExample} (2XL Bold) </p>
+      <p class="ds-text--xl-bold">${textExample} (XL Bold) </p>
+      <p class="ds-text--lg-bold">${textExample} (Large Bold) </p>
+      <p class="ds-text--md-bold">${textExample} (Medium Bold) </p>
+      <p class="ds-text--sm-bold">${textExample} (Small Bold) </p>
+      <p class="ds-text--xs-bold">${textExample} (XS Bold) </p>
+
+      <h2>Bodytext</h2>
+      <p class="ds-bodyText--2xLarge">${textExample} (2xLarge) </p>
+      <p class="ds-bodyText--xLarge">${textExample} (xLarge) </p>
+      <p class="ds-bodyText--large">${textExample} (large) </p>
+      <p class="ds-bodyText--medium">${textExample} (medium) </p>
+      <p class="ds-bodyText--small">${textExample} (small) </p>
+      
+      <h2>Fontweight</h2>
+      <p class="ds-font--regular">${textExample} (Regular) </p>
+      <p class="ds-font--semibold">${textExample} (Semibold) </p>
+      <p class="ds-font--semibold-plus">${textExample} (SemiboldPlus) </p>
+      <p class="ds-font--bold">${textExample} (Bold) </p>
+      
+      <h2>LetterSpacing</h2>
+      <p class="ds-tracking--xtight">${textExample} (xTight Spacing) </p>
+      <p class="ds-tracking--tight">${textExample} (Tight Spacing) </p>
+      <p class="ds-tracking--normal">${textExample} (Normal Spacing) </p>
+      <p class="ds-tracking--wide">${textExample} (Wide Spacing) </p>
+      <p class="ds-tracking--xwide">${textExample} (xWide Spacing) </p>
+      
+      <h2>Lineheight</h2>
+      <p class="ds-leading--small">${textExample} (Small Line Height) </p>
+      <p class="ds-leading--medium">${textExample} (Medium Line Height) </p>
+      <p class="ds-leading--large">${textExample} (Large Line Height) </p>
+      <p class="ds-leading--xLarge">${textExample} (xLarge Line Height) </p>
+    </div>
+  `,
+};
+const renderTypography = () => {
+    const container = document.createElement('div');
+    const typographyVariables = getTypographyVariables();
+    const renderedCategories = new Set();
+    const categoryNames = [...new Set(Object.values(categories)), 'Other'];
+    categoryNames.forEach(category => {
+        const categoryTypo = typographyVariables.filter(spacing => spacing.category === category);
+        if (categoryTypo.length > 0) {
+            container.appendChild(createCategorySection(category, categoryTypo, renderedCategories));
+        }
+    });
+    return container;
+};
+export const Typography = {
+    parameters: {
+        docs: {
+            source: {
+                code: renderTypography().outerHTML,
+            },
+        },
+    },
+    render: renderTypography,
+};

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.css

@@ -1,130 +1,149 @@
+:root {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --ds-breakpoint-xLarge: 90rem;
+}
+
 .ds-accordion__open-button {
-  color: var(--ds-textColor-default, #1A1A1A);
+  color: var(--ds-textColor-default);
+  outline: var(--ds-borderWidth-thick) solid transparent;
+  fill: var(--ds-textColor-default);
+  position: relative;
   all: unset;
+  align-items: flex-start;
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  gap: 8px;
+  gap: var(--ds-spacing-2xSmall);
+  position: relative;
   width: 100%;
 }
-.ds-accordion__open-button:hover {
-  cursor: pointer;
-  background: var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));
+.ds-accordion__open-button:focus-visible, .ds-accordion__open-button:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline-color: var(--ds-borderColor-black);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
 }
-.ds-accordion__open-button:hover.ds-accordion--border-aligned {
-  padding-inline: 16px;
-  margin-inline: 0;
+.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before, .ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: var(--ds-spacing-small);
+  height: 100%;
 }
-.ds-accordion__open-button:active {
-  background: var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078));
+.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before {
+  left: calc(var(--ds-spacing-small) * -1);
 }
-.ds-accordion__open-button:active.ds-accordion--border-aligned {
-  padding-inline: 16px;
-  margin-inline: 0;
+.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after {
+  right: calc(var(--ds-spacing-small) * -1);
 }
-.ds-accordion__open-button:focus {
+.ds-accordion__open-button:hover {
+  cursor: pointer;
+}
+.ds-accordion__open-button:hover, .ds-accordion__open-button:hover::before, .ds-accordion__open-button:hover::after {
   background: var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));
-  box-shadow: 0px 0px 0px 1px var(--ds-palette-black);
 }
-.ds-accordion__open-button:focus.ds-accordion--border-aligned {
-  padding-inline: 16px;
-  margin-inline: 0;
+.ds-accordion__open-button:active, .ds-accordion__open-button:active::before, .ds-accordion__open-button:active::after {
+  background: var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078));
+}
+.ds-accordion__open-button:focus-visible {
+  z-index: 1;
 }
 .ds-accordion__open-button.ds-accordion--default {
-  padding: 16px;
+  padding: var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-18);
-  font-weight: 600;
-  line-height: 27px;
+  font-weight: var(--ds-fontWeight-semibold);
+  line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--letterSpacing-wide);
 }
 .ds-accordion__open-button.ds-accordion--compact {
   font-size: var(--ds-fontSize-16);
-  padding: 12px 16px 12px 16px;
-  line-height: 24px;
-  font-weight: 600;
+  padding: var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
+  line-height: var(--ds-lineHeight-large);
+  font-weight: var(--ds-fontWeight-semibold);
 }
-.ds-accordion__open-button.ds-accordion--border-aligned {
-  padding-inline: 0;
+.ds-accordion__open-button.ds-accordion--border-aligned:not(:focus-visible) {
   padding-inline: 0;
-  margin-inline: 16px;
+  margin-inline: var(--ds-spacing-small);
+  position: relative;
+  width: calc(100% - var(--ds-spacing-large));
+}
+:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border) {
+  border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
+}
+:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible {
+  border-top-color: transparent;
 }
 .ds-accordion__open-button[aria-expanded=false] {
-  border-bottom: 1px solid var(--ds-borderColor-light, #CCCCCC);
+  border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
 }
 
+.ds-accordion__panel--border-aligned {
+  position: relative;
+  width: calc(100% - 32px);
+}
+.ds-accordion__panel--border-aligned::before {
+  display: inline-block;
+  content: " ";
+  position: absolute;
+  bottom: -1px;
+  height: 1px;
+  left: 0px;
+  background: var(--ds-palette-white);
+  width: var(--ds-spacing-small);
+}
+.ds-accordion__panel--border-aligned::after {
+  display: inline-block;
+  content: " ";
+  position: absolute;
+  bottom: -1px;
+  height: 1px;
+  right: 0px;
+  background: var(--ds-palette-white);
+  width: var(--ds-spacing-small);
+}
 .ds-accordion__panel--expanded {
-  border-bottom: 1px solid var(--ds-borderColor-light, #CCCCCC);
+  display: block;
+  border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
+  padding-inline: var(--ds-spacing-small);
+}
+
+::slotted([slot=header]) {
+  color: var(--ds-textColor-default);
 }
 
 .ds-accordion__content {
   color: var(--ds-textColor-default, #1A1A1A);
   font-family: var(--ds-fontFamily-body);
-  padding: 16px;
+  padding-block: var(--ds-spacing-small);
 }
 .ds-accordion__content .ds-accordion--default {
-  font-size: var(--ds-fontSize-18);
-  font-weight: 400;
-  line-height: 27px;
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-regular);
+  line-height: var(--ds-lineHeight-xLarge);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
+@media (min-width: 30rem) {
+  .ds-accordion__content .ds-accordion--default {
+    font-size: var(--ds-fontSize-18);
+  }
+}
 .ds-accordion__content .ds-accordion--compact {
   font-size: var(--fontSize-16);
-  font-weight: 400;
-  line-height: 24px;
+  font-weight: var(--ds-fontWeight-regular);
+  line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--letterSpacing-wide);
 }
 
 .ds-accordion__close-button {
-  color: var(--ds-textColor-default, #1A1A1A);
-  all: unset;
-  border-bottom: 1px solid var(--ds-borderColor-light, #CCCCCC);
   display: flex;
   flex-direction: row;
-  gap: 8px;
+  gap: var(--ds-spacing-2xSmall);
   font-family: var(--ds-fontFamily-body);
   letter-spacing: var(--ds-letterSpacing-wide);
-  width: 100%;
-}
-.ds-accordion__close-button:hover {
-  cursor: pointer;
-  background: var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));
-}
-.ds-accordion__close-button:hover.ds-accordion--border-aligned {
-  padding-inline: 16px;
-  margin-inline: 0;
-}
-.ds-accordion__close-button:active {
-  background: var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078));
-}
-.ds-accordion__close-button:active.ds-accordion--border-aligned {
-  padding-inline: 16px;
-  margin-inline: 0;
-}
-.ds-accordion__close-button:focus {
-  background: var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));
-  box-shadow: 0px 0px 0px 1px var(--ds-palette-black);
-}
-.ds-accordion__close-button:focus.ds-accordion--border-aligned {
-  padding-inline: 16px;
-  margin-inline: 0;
-}
-.ds-accordion__close-button.ds-accordion--default {
-  padding: 16px;
-  font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-18);
-  font-weight: 600;
-  line-height: 27px;
-  letter-spacing: var(--letterSpacing-wide);
-}
-.ds-accordion__close-button.ds-accordion--compact {
-  font-size: var(--ds-fontSize-16);
-  padding: 12px 16px 12px 16px;
-  line-height: 24px;
-  font-weight: 600;
-}
-.ds-accordion__close-button.ds-accordion--border-aligned {
-  padding-inline: 0;
-  padding-inline: 0;
-  margin-inline: 16px;
+  width: max-content;
 }

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js

@@ -8,10 +8,16 @@ export class DsAccordion {
     headingLevel = 2;
     useCloseButton = false;
     closeButtonLabel = 'Close';
-    isExpanded = this.openByDefault;
+    hideTopBorder = false;
+    isExpanded = false;
     host;
     headerButtonRef;
     shouldMoveFocus = false;
+    componentWillLoad() {
+        if (this.openByDefault) {
+            this.isExpanded = true;
+        }
+    }
     watchHandler(isExpanded) {
         if (!isExpanded && this.shouldMoveFocus && this.headerButtonRef) {
             this.headerButtonRef.focus();
@@ -35,16 +41,22 @@ export class DsAccordion {
         }
     };
     render() {
-        return (h("div", { key: '2cc1b7c39897a2437b1c1b2a2dda3c73366f2406', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
-                'ds-accordion--border-aligned': this.borderAligned
-            }), role: "presentation" }, h("div", { key: 'a984d038525f683d8deb8cdf508f559ba0636b16', class: "ds-accordion__item" }, h("div", { key: '18e56c772766cacc2acf741777d0dd8c9dcaf4ca', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: 'e89c25a2b74086bae943f6febe79783fc63bc7d6', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
+        const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
+        const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
+        return (h("div", { key: '830fb0965ea8904b662280b775a159528d7ddc03', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned
-            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: '9c17fd4f9908e1cfc273929998ffb113ff750e35', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
-            h("ds-icon", { hidden: true, name: "keyboard_arrow_up" })
-            : h("ds-icon", { hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: '2b426517dc51e1038524ac2954e1a48e1fc67774', name: "header" }))), h("div", { key: '8b3aeb23427ded6b5b6d98c09a2f111398ebd206', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: `ds-accordion__panel ${this.isExpanded ? 'ds-accordion__panel--expanded' : ''}`, hidden: !this.isExpanded }, h("div", { key: 'c812dc0940c003329887a91a028fea11e8975fda', class: "ds-accordion__content" }, h("slot", { key: '6ce68b03d1f1e9673fa677581f4193d94d0fe97a', name: "content" })), this.useCloseButton &&
-            h("button", { key: '822aa59768cec2c2acf617bf70168a0c7f882bd7', class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
+            }), role: "presentation" }, h("div", { key: 'a3d6e538dda9513bfb578379cced370be686ce62', class: "ds-accordion__item" }, h("div", { key: '7c7819bf62cdffb9ac4a8c4f7b1609b31efcdd68', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: '2e2a9fdfced241b23bdcfb444777cdd2fd0a764c', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
+                'ds-accordion--border-aligned': this.borderAligned,
+                'ds-accordion--hide-top-border': this.hideTopBorder
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: 'eca6297dd43b58849c8b46f66034ec51bb20bf1e', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
+            h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" })
+            : h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: '9ddb913b968b8bbbe47d4be341766503fdcf4df7', name: "header" }))), h("div", { key: '21cee953529ccd21487b7ac0001aac10bf3d563e', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
+                'ds-accordion__panel--border-aligned': this.borderAligned,
+                'ds-accordion__panel--expanded': this.isExpanded
+            }), hidden: !this.isExpanded }, h("div", { key: 'a9d5dfdbf190936156b0b37b6ef2b877741f6ae1', class: "ds-accordion__content" }, h("slot", { key: '34ca29ec15581a470fe2c740fceea9fcdc7cb64a', name: "content" })), this.useCloseButton &&
+            h("ds-button", { key: '1dfa2fad990fc6651a620efd8b3169346bb08648', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
                     'ds-accordion--border-aligned': this.borderAligned
-                }), "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("ds-icon", { key: '295bb76f0130566900081b90e5d80033bbe9758f', hidden: true, name: "keyboard_arrow_up" }), h("span", { key: '90dcf29559c485707ea8517e0056249027b1e45b' }, this.closeButtonLabel))))));
+                }), fontWeight: 'semiBold', variant: 'supplementary', colour: 'black', icon: 'keyboard_arrow_up', iconPosition: 'start', onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: 'button' })))));
     }
     static get is() { return "ds-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -199,6 +211,26 @@ export class DsAccordion {
                 "attribute": "close-button-label",
                 "reflect": false,
                 "defaultValue": "'Close'"
+            },
+            "hideTopBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-top-border",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/01-base-components/ds-accordion/stories/ds-accordion.examples.stories.js

@@ -41,3 +41,18 @@ export const MultipleAccordions = {
     </ds-accordion>
     `,
 };
+export const LongTitles = {
+    render: () => html `
+    <ds-accordion accordion-id="ac-1">
+      <div slot="header">${generateLoremIpsum({ paragraphs: 2, wordsPerParagraph: 20, consistent: true })}</div>
+      <div slot="content">${exampleContent}</div>
+    </ds-accordion>
+    <ds-accordion accordion-id="ac-2">
+      <div slot="header">${generateLoremIpsum({ paragraphs: 3, wordsPerParagraph: 30, consistent: true })}</div>
+      <div slot="content">
+        <p>${generateLoremIpsum({ paragraphs: 5, wordsPerParagraph: 20 })}</p>
+        <p>${generateLoremIpsum({ paragraphs: 8, wordsPerParagraph: 30 })}</p>
+      </div>
+    </ds-accordion>
+    `,
+};

package/dist/collection/components/01-base-components/ds-accordion/stories/ds-accordion.features.stories.js

@@ -42,7 +42,7 @@ WithCloseButton.args = {
     useCloseButton: true,
 };
 WithCloseButton.render = (args) => html `
-  <ds-accordion use-close-button="${args.useCloseButton}">
+  <ds-accordion use-close-button="${args.useCloseButton}" open-by-default="true">
     <div slot="header">${exampleHeader}</div>
     <div slot="content">${exampleContent}</div>
   </ds-accordion>

package/dist/collection/components/01-base-components/ds-accordion/stories/ds-accordion.stories.js

@@ -41,6 +41,12 @@ const meta = {
             },
             name: 'Custom id for accordion element'
         },
+        hideTopBorder: {
+            control: {
+                type: 'boolean'
+            },
+            name: 'Hide top border'
+        },
     },
 };
 const exampleHeader = generateLoremIpsum();
@@ -53,7 +59,8 @@ Default.args = {
     borderAligned: false,
     openByDefault: false,
     headingLevel: 2,
-    accordionId: 'dsaccordion'
+    accordionId: 'dsaccordion',
+    hideTopBorder: false,
 };
 Default.render = (args) => html `
   <ds-accordion
@@ -63,6 +70,7 @@ Default.render = (args) => html `
     open-by-default="${args.openByDefault}"
     heading-level="${args.headingLevel}"
     accordion-id="${args.accordionId}"
+    hide-top-border="${args.hideTopBorder}"
   >
     <div slot="header">${exampleHeader}</div>
     <div slot="content">${exampleContent}</div>
@@ -92,6 +100,7 @@ Playground.render = (args) => {
       open-by-default="${args.openByDefault}"
       heading-level="${args.headingLevel}"
       accordion-id="${args.accordionId}-${index + 1}"
+      hide-top-border="${args.hideTopBorder}"
     >
       <div slot="header">${args.Header}</div>
       <div slot="content">${args.Content}</div>