From 177f0c3e470ed74d1eb9e849830079f6448e6a81 Mon Sep 17 00:00:00 2001 From: Goutham Ponnada Date: Thu, 7 Nov 2024 14:51:50 -0800 Subject: [PATCH 1/7] feat(details-group): new component --- .changeset/tidy-rockets-chew.md | 5 + dist/details-group/details-group.css | 51 +++ src/modules/details-group.marko | 418 ++++++++++++++++++ src/sass/bundles/skin-headless.scss | 1 + src/sass/details-group/details-group.scss | 56 +++ .../details-group/stories/cascade.stories.js | 151 +++++++ .../stories/details-group.stories.js | 241 ++++++++++ 7 files changed, 923 insertions(+) create mode 100644 .changeset/tidy-rockets-chew.md create mode 100644 dist/details-group/details-group.css create mode 100644 src/modules/details-group.marko create mode 100644 src/sass/details-group/details-group.scss create mode 100644 src/sass/details-group/stories/cascade.stories.js create mode 100644 src/sass/details-group/stories/details-group.stories.js diff --git a/.changeset/tidy-rockets-chew.md b/.changeset/tidy-rockets-chew.md new file mode 100644 index 000000000..98163eb00 --- /dev/null +++ b/.changeset/tidy-rockets-chew.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": minor +--- + +feat(details-group): new component diff --git a/dist/details-group/details-group.css b/dist/details-group/details-group.css new file mode 100644 index 000000000..dc5efc30b --- /dev/null +++ b/dist/details-group/details-group.css @@ -0,0 +1,51 @@ +ul.details-group { + list-style: none; + margin: 0; + padding: 0; + width: 100%; +} + +ul.details-group li:not(:last-child) { + border-bottom: 1px solid var(--color-stroke-subtle); +} + +ul.details-group summary.details__summary { + border-radius: 0; + display: flex; + font-size: var(--font-size-medium); + justify-content: space-between; + min-height: 48px; + padding: 12px 16px; +} + +ul.details-group details > :not(summary.details__summary) { + margin: 0 16px 6px; + max-width: 600px; +} + +ul.details-group--large summary.details__summary { + font-size: var(--font-size-large-1); + min-height: 52px; +} + +ul.details-group details span.details__icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23191919' d='M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 1 0 2 0V9h5a1 1 0 1 0 0-2'/%3E%3C/svg%3E"); + flex-shrink: 0; + height: 16px; + width: 16px; +} + +ul.details-group details[open] span.details__icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23191919' d='M13 7H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2'/%3E%3C/svg%3E"); + transform: none; +} + +@media (prefers-color-scheme: dark) { + ul.details-group details span.details__icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f7f7f7' d='M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 1 0 2 0V9h5a1 1 0 1 0 0-2'/%3E%3C/svg%3E"); + } + ul.details-group details[open] span.details__icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f7f7f7' d='M13 7H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2'/%3E%3C/svg%3E"); + transform: none; + } +} diff --git a/src/modules/details-group.marko b/src/modules/details-group.marko new file mode 100644 index 000000000..b0fbe4934 --- /dev/null +++ b/src/modules/details-group.marko @@ -0,0 +1,418 @@ +
+ + +

+ A details group is a list of details that are grouped together, commonly known as an accordion. Interacting with each item can expand or collapse to show or hide additional content. +

+ +

Default Details Group

+

By default, each section(aka details) can be opened & remain open until closed manually. To auto collapse, checkout Auto Collapsing Details Group.

+
+
+
    +
  • +
    + + + Shipping and returns + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
  • +
    + + + Text wraps on small screen with this long text + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
  • +
    + + + Specifications + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
+
+
+ +
    +
  • +
    + + + Shipping and returns + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
  • +
    + + + Description + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
  • +
    + + + Specifications + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
+ + +

Opened Details Group

+

HTML Open attribute is added on details to open the section. When a section is opened, keyboard focus navigates through all interactive elements in the tab order.

+
+
+
    +
  • +
    + + + Shipping and returns + + +

    + Lorem ipsum dolor sit amet, ebay, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
  • +
    + + + Description + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
  • +
    + + + Specifications + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
+
+
+ + +
    +
  • +
    + + + Shipping and returns + + +

    + Lorem ipsum dolor sit amet, ebay, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
  • +
    + + + Description + + +

    + ... +

    +
    +
    • +
  • +
    + + + Specifications + + +

    + ... +

    +
    +
    • +
+ + +

Large Details Group

+

+ Apply the + + details__summary--large + + class to use the larger version of details group. +

+
+
+
    +
  • +
    + + + Shipping and returns + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
  • +
    + + + Description + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
  • +
    + + + Specifications + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
+
+
+ +
    +
  • +
    + + + Shipping and returns + + +

    + ... +

    +
    +
    • +
  • +
    + + + Description + + +

    + ... +

    +
    +
    • +
  • +
    + + + Specifications + + +

    + ... +

    +
    +
    • +
+ + +

Auto collapsing Details Group

+

With the name attribute, detail sections can closely mimic the behavior of common accordion pattern, in which only one section can be open at a time, with other sections automatically closing when a new one is expanded.

+

NOTE: For browsers that do not yet support this attribute, Javascript is needed to mimic the behavior as a fallback.

+
+
+
    +
  • +
    + + + Shipping and returns + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
  • +
    + + + Text wraps on small screen with this long text + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
  • +
    + + + Specifications + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    • +
+
+
+ +
    +
  • +
    + + + Shipping and returns + + +

    + ... +

    +
    +
    • +
  • +
    + + + Description + + +

    + ... +

    +
    +
    • +
  • +
    + + + Specifications + + +

    + ... +

    +
    +
    • +
+ +
+export const metadata = { + "ds-component": { + name: "accordion", + version: 1.0, + }, + submodules: ["icon"], +}; diff --git a/src/sass/bundles/skin-headless.scss b/src/sass/bundles/skin-headless.scss index bbd25e316..c3ff82a29 100644 --- a/src/sass/bundles/skin-headless.scss +++ b/src/sass/bundles/skin-headless.scss @@ -18,6 +18,7 @@ @import "../confirm-dialog/confirm-dialog"; @import "../cta-button/cta-button"; @import "../date-textbox/date-textbox"; +@import "../details-group/details-group"; @import "../details/details"; @import "../donut-chart/donut-chart"; @import "../drawer-dialog/drawer-dialog"; diff --git a/src/sass/details-group/details-group.scss b/src/sass/details-group/details-group.scss new file mode 100644 index 000000000..e0c1f419e --- /dev/null +++ b/src/sass/details-group/details-group.scss @@ -0,0 +1,56 @@ +@import "../variables/variables"; +@import "../mixins/private/token-mixins"; + +ul.details-group { + list-style: none; + margin: 0; + padding: 0; + width: 100%; +} + +ul.details-group li:not(:last-child) { + border-bottom: 1px solid var(--color-stroke-subtle); +} + +ul.details-group summary.details__summary { + border-radius: 0; + display: flex; + font-size: var(--font-size-medium); + justify-content: space-between; + min-height: 48px; + padding: 12px 16px; +} + +ul.details-group details > :not(summary.details__summary) { + margin: 0 16px 6px; + max-width: 600px; +} + +ul.details-group--large summary.details__summary { + font-size: var(--font-size-large-1); + min-height: 52px; +} + +// NOTE: Hardcoded the fill colors with --color-foreground-primary as unable to set it dynamically in background-image +ul.details-group details span.details__icon { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23191919' d='M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 1 0 2 0V9h5a1 1 0 1 0 0-2Z' /%3E%3C/svg%3E"); + flex-shrink: 0; + height: 16px; + width: 16px; +} + +ul.details-group details[open] span.details__icon { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23191919' d='M13 7H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2Z' /%3E%3C/svg%3E"); + transform: none; +} + +@media (prefers-color-scheme: dark) { + ul.details-group details span.details__icon { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23f7f7f7' d='M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 1 0 2 0V9h5a1 1 0 1 0 0-2Z' /%3E%3C/svg%3E"); + } + + ul.details-group details[open] span.details__icon { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23f7f7f7' d='M13 7H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2Z' /%3E%3C/svg%3E"); + transform: none; + } +} diff --git a/src/sass/details-group/stories/cascade.stories.js b/src/sass/details-group/stories/cascade.stories.js new file mode 100644 index 000000000..c85e32d81 --- /dev/null +++ b/src/sass/details-group/stories/cascade.stories.js @@ -0,0 +1,151 @@ +export default { title: "Skin/Details-Group/Cascade" }; + +export const RTL = () => ` +
+ +
+`; + +export const colour = () => ` +
+ +
+`; + +export const fontSize = () => ` +
+ +
+`; diff --git a/src/sass/details-group/stories/details-group.stories.js b/src/sass/details-group/stories/details-group.stories.js new file mode 100644 index 000000000..8eb397c42 --- /dev/null +++ b/src/sass/details-group/stories/details-group.stories.js @@ -0,0 +1,241 @@ +export default { title: "Skin/Details-Group" }; + +export const closed = () => ` + +`; + +export const open = () => ` + +`; + +export const textSpacing = () => ` + +`; + +export const large = () => ` + +`; + +export const autoCollapse = () => ` + +`; From 7d9967a435573f16f24c87d77de842d3a778cdc9 Mon Sep 17 00:00:00 2001 From: Goutham Ponnada Date: Thu, 14 Nov 2024 11:44:21 -0800 Subject: [PATCH 2/7] chore: updated metadata --- src/modules/details-group.marko | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/modules/details-group.marko b/src/modules/details-group.marko index b0fbe4934..380a82d7f 100644 --- a/src/modules/details-group.marko +++ b/src/modules/details-group.marko @@ -412,7 +412,6 @@ export const metadata = { "ds-component": { name: "accordion", - version: 1.0, + version: 2.0, }, - submodules: ["icon"], }; From cd9148b98cbeaa582adbecab3c5ec54c21b87684 Mon Sep 17 00:00:00 2001 From: Goutham Ponnada Date: Thu, 14 Nov 2024 14:13:18 -0800 Subject: [PATCH 3/7] fix: updated for text variant --- dist/details-group/details-group.css | 3 +++ src/sass/details-group/details-group.scss | 3 +++ 2 files changed, 6 insertions(+) diff --git a/dist/details-group/details-group.css b/dist/details-group/details-group.css index dc5efc30b..4d9bc9fd8 100644 --- a/dist/details-group/details-group.css +++ b/dist/details-group/details-group.css @@ -20,6 +20,9 @@ ul.details-group summary.details__summary { ul.details-group details > :not(summary.details__summary) { margin: 0 16px 6px; +} + +ul.details-group details > p { max-width: 600px; } diff --git a/src/sass/details-group/details-group.scss b/src/sass/details-group/details-group.scss index e0c1f419e..d72e9ddb4 100644 --- a/src/sass/details-group/details-group.scss +++ b/src/sass/details-group/details-group.scss @@ -23,6 +23,9 @@ ul.details-group summary.details__summary { ul.details-group details > :not(summary.details__summary) { margin: 0 16px 6px; +} + +ul.details-group details > p { max-width: 600px; } From 67bcb0702213218aec7a6bf8b88570e61dcdd574 Mon Sep 17 00:00:00 2001 From: Goutham Ponnada Date: Thu, 21 Nov 2024 12:39:04 -0800 Subject: [PATCH 4/7] fix: code review suggestions --- .changeset/tidy-rockets-chew.md | 2 +- dist/accordion/accordion.css | 59 ++ dist/details-group/details-group.css | 54 -- src/modules/accordion.marko | 617 ++++++++++++++++++ src/modules/details-group.marko | 417 ------------ src/sass/accordion/accordion.scss | 63 ++ .../accordion/stories/accordion.stories.js | 376 +++++++++++ src/sass/accordion/stories/cascade.stories.js | 232 +++++++ src/sass/bundles/skin-headless.scss | 2 +- src/sass/details-group/details-group.scss | 59 -- .../details-group/stories/cascade.stories.js | 151 ----- .../stories/details-group.stories.js | 241 ------- 12 files changed, 1349 insertions(+), 924 deletions(-) create mode 100644 dist/accordion/accordion.css delete mode 100644 dist/details-group/details-group.css create mode 100644 src/modules/accordion.marko delete mode 100644 src/modules/details-group.marko create mode 100644 src/sass/accordion/accordion.scss create mode 100644 src/sass/accordion/stories/accordion.stories.js create mode 100644 src/sass/accordion/stories/cascade.stories.js delete mode 100644 src/sass/details-group/details-group.scss delete mode 100644 src/sass/details-group/stories/cascade.stories.js delete mode 100644 src/sass/details-group/stories/details-group.stories.js diff --git a/.changeset/tidy-rockets-chew.md b/.changeset/tidy-rockets-chew.md index 98163eb00..6592e6fb5 100644 --- a/.changeset/tidy-rockets-chew.md +++ b/.changeset/tidy-rockets-chew.md @@ -2,4 +2,4 @@ "@ebay/skin": minor --- -feat(details-group): new component +feat(accordion): new component diff --git a/dist/accordion/accordion.css b/dist/accordion/accordion.css new file mode 100644 index 000000000..b901b3f6d --- /dev/null +++ b/dist/accordion/accordion.css @@ -0,0 +1,59 @@ +ul.accordion { + list-style: none; + margin: 0; + padding: 0; + width: 100%; +} + +ul.accordion li:not(:last-child) { + border-bottom: 1px solid var(--color-stroke-subtle); +} + +ul.accordion summary.details__summary { + border-radius: 0; + display: flex; + font-size: var(--font-size-medium); + justify-content: space-between; + min-height: 48px; + padding: 12px 16px; +} + +ul.accordion details .details__content { + margin: 0 16px 6px; + opacity: 0; + transform: scaleY(0); + transform-origin: top; + transition: + opacity 0.5s cubic-bezier(0.3, 0, 0, 1), + transform 0.5s cubic-bezier(0.3, 0, 0, 1); +} + +ul.accordion details[open] .details__content { + opacity: 1; + transform: scaleY(1); + transition: + opacity 0.25s cubic-bezier(0.3, 0, 0, 1), + transform 0.25s cubic-bezier(0.3, 0, 0, 1); +} + +ul.accordion--large summary.details__summary { + font-size: var(--font-size-large-1); + min-height: 52px; +} + +ul.accordion details svg.details__add, +ul.accordion details[open] svg.details__remove { + display: block; +} + +ul.accordion details svg.details__remove, +ul.accordion details[open] svg.details__add { + display: none; +} + +@media (prefers-reduced-motion) { + ul.accordion details .details__content, + ul.accordion details[open] .details__content { + transition: none; + } +} diff --git a/dist/details-group/details-group.css b/dist/details-group/details-group.css deleted file mode 100644 index 4d9bc9fd8..000000000 --- a/dist/details-group/details-group.css +++ /dev/null @@ -1,54 +0,0 @@ -ul.details-group { - list-style: none; - margin: 0; - padding: 0; - width: 100%; -} - -ul.details-group li:not(:last-child) { - border-bottom: 1px solid var(--color-stroke-subtle); -} - -ul.details-group summary.details__summary { - border-radius: 0; - display: flex; - font-size: var(--font-size-medium); - justify-content: space-between; - min-height: 48px; - padding: 12px 16px; -} - -ul.details-group details > :not(summary.details__summary) { - margin: 0 16px 6px; -} - -ul.details-group details > p { - max-width: 600px; -} - -ul.details-group--large summary.details__summary { - font-size: var(--font-size-large-1); - min-height: 52px; -} - -ul.details-group details span.details__icon { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23191919' d='M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 1 0 2 0V9h5a1 1 0 1 0 0-2'/%3E%3C/svg%3E"); - flex-shrink: 0; - height: 16px; - width: 16px; -} - -ul.details-group details[open] span.details__icon { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23191919' d='M13 7H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2'/%3E%3C/svg%3E"); - transform: none; -} - -@media (prefers-color-scheme: dark) { - ul.details-group details span.details__icon { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f7f7f7' d='M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 1 0 2 0V9h5a1 1 0 1 0 0-2'/%3E%3C/svg%3E"); - } - ul.details-group details[open] span.details__icon { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f7f7f7' d='M13 7H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2'/%3E%3C/svg%3E"); - transform: none; - } -} diff --git a/src/modules/accordion.marko b/src/modules/accordion.marko new file mode 100644 index 000000000..ed68e8a74 --- /dev/null +++ b/src/modules/accordion.marko @@ -0,0 +1,617 @@ +
+ + +

+ An accordion is a list of details that are grouped together. Interacting with each item can expand or collapse to show or hide additional content. +

+ +

Default Accordion

+

By default, each section(aka details) can be opened & remain open until closed manually.

+
+
+
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Text wraps on small screen with this long text + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+
+
+ +
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Description + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+ + +

Opened Accordion

+

Apply Open attribute on details to open the section.

+
+
+
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Description + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+
+
+ + +
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Description + + + +
    + ... +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    + ... +
    +
    +
    • +
+ + +

Large Accordion

+

+ Apply the + + details__summary--large + + class to use the larger version of accordion. +

+
+
+
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Description + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+
+
+ +
    +
  • +
    + + + Shipping and returns + + + +
    + ... +
    +
    +
    • +
  • +
    + + + Description + + + +
    + ... +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    + ... +
    +
    +
    • +
+ + +

Auto collapsing Accordion

+

Use the name attribute, to ensure only one section can be open at a time, with other sections automatically closing.

+

NOTE: For browsers that do not yet support this attribute, Javascript is needed to mimic the behavior as a fallback.

+
+
+
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Text wraps on small screen with this long text + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+
+
+ +
    +
  • +
    + + + Shipping and returns + + + +
    + ... +
    +
    +
    • +
  • +
    + + + Description + + + +
    + ... +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    + ... +
    +
    +
    • +
+ +
+export const metadata = { + "ds-component": { + name: "accordion", + version: 1.0, + }, +}; diff --git a/src/modules/details-group.marko b/src/modules/details-group.marko deleted file mode 100644 index 380a82d7f..000000000 --- a/src/modules/details-group.marko +++ /dev/null @@ -1,417 +0,0 @@ -
- - -

- A details group is a list of details that are grouped together, commonly known as an accordion. Interacting with each item can expand or collapse to show or hide additional content. -

- -

Default Details Group

-

By default, each section(aka details) can be opened & remain open until closed manually. To auto collapse, checkout Auto Collapsing Details Group.

-
-
-
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Text wraps on small screen with this long text - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
-
-
- -
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Description - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
- - -

Opened Details Group

-

HTML Open attribute is added on details to open the section. When a section is opened, keyboard focus navigates through all interactive elements in the tab order.

-
-
-
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, ebay, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Description - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
-
-
- - -
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, ebay, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Description - - -

    - ... -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - ... -

    -
    -
    • -
- - -

Large Details Group

-

- Apply the - - details__summary--large - - class to use the larger version of details group. -

-
-
-
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Description - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
-
-
- -
    -
  • -
    - - - Shipping and returns - - -

    - ... -

    -
    -
    • -
  • -
    - - - Description - - -

    - ... -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - ... -

    -
    -
    • -
- - -

Auto collapsing Details Group

-

With the name attribute, detail sections can closely mimic the behavior of common accordion pattern, in which only one section can be open at a time, with other sections automatically closing when a new one is expanded.

-

NOTE: For browsers that do not yet support this attribute, Javascript is needed to mimic the behavior as a fallback.

-
-
-
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Text wraps on small screen with this long text - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
-
-
- -
    -
  • -
    - - - Shipping and returns - - -

    - ... -

    -
    -
    • -
  • -
    - - - Description - - -

    - ... -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - ... -

    -
    -
    • -
- -
-export const metadata = { - "ds-component": { - name: "accordion", - version: 2.0, - }, -}; diff --git a/src/sass/accordion/accordion.scss b/src/sass/accordion/accordion.scss new file mode 100644 index 000000000..7b1e5b15e --- /dev/null +++ b/src/sass/accordion/accordion.scss @@ -0,0 +1,63 @@ +@import "../variables/variables"; +@import "../mixins/private/token-mixins"; + +ul.accordion { + list-style: none; + margin: 0; + padding: 0; + width: 100%; +} + +ul.accordion li:not(:last-child) { + border-bottom: 1px solid var(--color-stroke-subtle); +} + +ul.accordion summary.details__summary { + border-radius: 0; + display: flex; + font-size: var(--font-size-medium); + justify-content: space-between; + min-height: 48px; + padding: 12px 16px; +} + +ul.accordion details .details__content { + margin: 0 16px 6px; + opacity: 0; + transform: scaleY(0); + transform-origin: top; + transition: + opacity 500ms cubic-bezier(0.3, 0, 0, 1), + transform 500ms cubic-bezier(0.3, 0, 0, 1); +} + +ul.accordion details[open] .details__content { + opacity: 1; + transform: scaleY(1); + transition: + opacity 250ms cubic-bezier(0.3, 0, 0, 1), + transform 250ms cubic-bezier(0.3, 0, 0, 1); +} + +ul.accordion--large summary.details__summary { + font-size: var(--font-size-large-1); + min-height: 52px; +} + +ul.accordion details svg.details__add, +ul.accordion details[open] svg.details__remove { + display: block; +} + +ul.accordion details[open] svg.details__add, +ul.accordion details svg.details__remove { + display: none; +} + +@media (prefers-reduced-motion) { + /* Remove animations */ + ul.accordion details .details__content, + ul.accordion details[open] .details__content { + transition: none; + } +} diff --git a/src/sass/accordion/stories/accordion.stories.js b/src/sass/accordion/stories/accordion.stories.js new file mode 100644 index 000000000..c338b4394 --- /dev/null +++ b/src/sass/accordion/stories/accordion.stories.js @@ -0,0 +1,376 @@ +export default { title: "Skin/Accordion" }; + +export const closed = () => ` +
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Text wraps on small screen with this long text + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+`; + +export const open = () => ` +
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Text wraps on small screen with this long text + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+`; + +export const textSpacing = () => ` +
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Text wraps on small screen with this long text + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+`; + +export const large = () => ` +
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Description + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+`; + +export const autoCollapse = () => ` +
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Text wraps on small screen with this long text + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+`; diff --git a/src/sass/accordion/stories/cascade.stories.js b/src/sass/accordion/stories/cascade.stories.js new file mode 100644 index 000000000..7473ca5b5 --- /dev/null +++ b/src/sass/accordion/stories/cascade.stories.js @@ -0,0 +1,232 @@ +export default { title: "Skin/Accordion/Cascade" }; + +export const RTL = () => ` +
+
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Text wraps on small screen with this long text + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+
+`; + +export const colour = () => ` +
+
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Text wraps on small screen with this long text + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+
+`; + +export const fontSize = () => ` +
+
    +
  • +
    + + + Shipping and returns + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Text wraps on small screen with this long text + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
  • +
    + + + Specifications + + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    +
    • +
+
+`; diff --git a/src/sass/bundles/skin-headless.scss b/src/sass/bundles/skin-headless.scss index c3ff82a29..545d6ee87 100644 --- a/src/sass/bundles/skin-headless.scss +++ b/src/sass/bundles/skin-headless.scss @@ -2,6 +2,7 @@ @import "../marketsans/marketsans"; @import "../global/global"; @import "../utility/utility"; +@import "../accordion/accordion"; @import "../alert-dialog/alert-dialog"; @import "../avatar/avatar"; @import "../badge/badge"; @@ -18,7 +19,6 @@ @import "../confirm-dialog/confirm-dialog"; @import "../cta-button/cta-button"; @import "../date-textbox/date-textbox"; -@import "../details-group/details-group"; @import "../details/details"; @import "../donut-chart/donut-chart"; @import "../drawer-dialog/drawer-dialog"; diff --git a/src/sass/details-group/details-group.scss b/src/sass/details-group/details-group.scss deleted file mode 100644 index d72e9ddb4..000000000 --- a/src/sass/details-group/details-group.scss +++ /dev/null @@ -1,59 +0,0 @@ -@import "../variables/variables"; -@import "../mixins/private/token-mixins"; - -ul.details-group { - list-style: none; - margin: 0; - padding: 0; - width: 100%; -} - -ul.details-group li:not(:last-child) { - border-bottom: 1px solid var(--color-stroke-subtle); -} - -ul.details-group summary.details__summary { - border-radius: 0; - display: flex; - font-size: var(--font-size-medium); - justify-content: space-between; - min-height: 48px; - padding: 12px 16px; -} - -ul.details-group details > :not(summary.details__summary) { - margin: 0 16px 6px; -} - -ul.details-group details > p { - max-width: 600px; -} - -ul.details-group--large summary.details__summary { - font-size: var(--font-size-large-1); - min-height: 52px; -} - -// NOTE: Hardcoded the fill colors with --color-foreground-primary as unable to set it dynamically in background-image -ul.details-group details span.details__icon { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23191919' d='M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 1 0 2 0V9h5a1 1 0 1 0 0-2Z' /%3E%3C/svg%3E"); - flex-shrink: 0; - height: 16px; - width: 16px; -} - -ul.details-group details[open] span.details__icon { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23191919' d='M13 7H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2Z' /%3E%3C/svg%3E"); - transform: none; -} - -@media (prefers-color-scheme: dark) { - ul.details-group details span.details__icon { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23f7f7f7' d='M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 0 0 0 2h5v5a1 1 0 1 0 2 0V9h5a1 1 0 1 0 0-2Z' /%3E%3C/svg%3E"); - } - - ul.details-group details[open] span.details__icon { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23f7f7f7' d='M13 7H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2Z' /%3E%3C/svg%3E"); - transform: none; - } -} diff --git a/src/sass/details-group/stories/cascade.stories.js b/src/sass/details-group/stories/cascade.stories.js deleted file mode 100644 index c85e32d81..000000000 --- a/src/sass/details-group/stories/cascade.stories.js +++ /dev/null @@ -1,151 +0,0 @@ -export default { title: "Skin/Details-Group/Cascade" }; - -export const RTL = () => ` -
-
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Text wraps on small screen with this long text - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
-
-`; - -export const colour = () => ` -
-
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Text wraps on small screen with this long text - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
-
-`; - -export const fontSize = () => ` -
-
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Text wraps on small screen with this long text - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
-
-`; diff --git a/src/sass/details-group/stories/details-group.stories.js b/src/sass/details-group/stories/details-group.stories.js deleted file mode 100644 index 8eb397c42..000000000 --- a/src/sass/details-group/stories/details-group.stories.js +++ /dev/null @@ -1,241 +0,0 @@ -export default { title: "Skin/Details-Group" }; - -export const closed = () => ` -
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Text wraps on small screen with this long text - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
-`; - -export const open = () => ` -
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Text wraps on small screen with this long text - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
-`; - -export const textSpacing = () => ` -
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Text wraps on small screen with this long text - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
-`; - -export const large = () => ` -
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Description - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
-`; - -export const autoCollapse = () => ` -
    -
  • -
    - - - Shipping and returns - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Text wraps on small screen with this long text - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
  • -
    - - - Specifications - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

    -
    -
    • -
-`; From 1dcb309f1253c2733ccea5946bb67bbbce9a5919 Mon Sep 17 00:00:00 2001 From: Goutham Ponnada Date: Fri, 22 Nov 2024 10:44:55 -0800 Subject: [PATCH 5/7] fix: svg class names --- dist/accordion/accordion.css | 8 +- src/modules/accordion.marko | 96 +++++++++---------- src/sass/accordion/accordion.scss | 8 +- .../accordion/stories/accordion.stories.js | 60 ++++++------ src/sass/accordion/stories/cascade.stories.js | 36 +++---- 5 files changed, 104 insertions(+), 104 deletions(-) diff --git a/dist/accordion/accordion.css b/dist/accordion/accordion.css index b901b3f6d..0da8f3ab6 100644 --- a/dist/accordion/accordion.css +++ b/dist/accordion/accordion.css @@ -41,13 +41,13 @@ ul.accordion--large summary.details__summary { min-height: 52px; } -ul.accordion details svg.details__add, -ul.accordion details[open] svg.details__remove { +ul.accordion details svg.details__expand, +ul.accordion details[open] svg.details__collapse { display: block; } -ul.accordion details svg.details__remove, -ul.accordion details[open] svg.details__add { +ul.accordion details svg.details__collapse, +ul.accordion details[open] svg.details__expand { display: none; } diff --git a/src/modules/accordion.marko b/src/modules/accordion.marko index ed68e8a74..94e27d5d8 100644 --- a/src/modules/accordion.marko +++ b/src/modules/accordion.marko @@ -21,10 +21,10 @@ Shipping and returns @@ -43,10 +43,10 @@ Text wraps on small screen with this long text @@ -65,10 +65,10 @@ Specifications @@ -96,10 +96,10 @@ Shipping and returns @@ -118,10 +118,10 @@ Description @@ -140,10 +140,10 @@ Specifications @@ -174,10 +174,10 @@ Shipping and returns @@ -196,10 +196,10 @@ Description @@ -218,10 +218,10 @@ Specifications @@ -250,10 +250,10 @@ Shipping and returns @@ -272,10 +272,10 @@ Description @@ -292,10 +292,10 @@ Specifications @@ -330,10 +330,10 @@ Shipping and returns @@ -352,10 +352,10 @@ Description @@ -374,10 +374,10 @@ Specifications @@ -405,10 +405,10 @@ Shipping and returns @@ -425,10 +425,10 @@ Description @@ -445,10 +445,10 @@ Specifications @@ -478,10 +478,10 @@ Shipping and returns @@ -500,10 +500,10 @@ Text wraps on small screen with this long text @@ -522,10 +522,10 @@ Specifications @@ -553,10 +553,10 @@ Shipping and returns @@ -573,10 +573,10 @@ Description @@ -593,10 +593,10 @@ Specifications diff --git a/src/sass/accordion/accordion.scss b/src/sass/accordion/accordion.scss index 7b1e5b15e..50552961e 100644 --- a/src/sass/accordion/accordion.scss +++ b/src/sass/accordion/accordion.scss @@ -44,13 +44,13 @@ ul.accordion--large summary.details__summary { min-height: 52px; } -ul.accordion details svg.details__add, -ul.accordion details[open] svg.details__remove { +ul.accordion details svg.details__expand, +ul.accordion details[open] svg.details__collapse { display: block; } -ul.accordion details[open] svg.details__add, -ul.accordion details svg.details__remove { +ul.accordion details[open] svg.details__expand, +ul.accordion details svg.details__collapse { display: none; } diff --git a/src/sass/accordion/stories/accordion.stories.js b/src/sass/accordion/stories/accordion.stories.js index c338b4394..f17135019 100644 --- a/src/sass/accordion/stories/accordion.stories.js +++ b/src/sass/accordion/stories/accordion.stories.js @@ -13,10 +13,10 @@ export const closed = () => ` Shipping and returns @@ -35,10 +35,10 @@ export const closed = () => ` Text wraps on small screen with this long text @@ -57,10 +57,10 @@ export const closed = () => ` Specifications @@ -88,10 +88,10 @@ export const open = () => ` Shipping and returns @@ -110,10 +110,10 @@ export const open = () => ` Text wraps on small screen with this long text @@ -132,10 +132,10 @@ export const open = () => ` Specifications @@ -163,10 +163,10 @@ export const textSpacing = () => ` Shipping and returns @@ -185,10 +185,10 @@ export const textSpacing = () => ` Text wraps on small screen with this long text @@ -207,10 +207,10 @@ export const textSpacing = () => ` Specifications @@ -238,10 +238,10 @@ export const large = () => ` Shipping and returns @@ -260,10 +260,10 @@ export const large = () => ` Description @@ -282,10 +282,10 @@ export const large = () => ` Specifications @@ -313,10 +313,10 @@ export const autoCollapse = () => ` Shipping and returns @@ -335,10 +335,10 @@ export const autoCollapse = () => ` Text wraps on small screen with this long text @@ -357,10 +357,10 @@ export const autoCollapse = () => ` Specifications diff --git a/src/sass/accordion/stories/cascade.stories.js b/src/sass/accordion/stories/cascade.stories.js index 7473ca5b5..670309609 100644 --- a/src/sass/accordion/stories/cascade.stories.js +++ b/src/sass/accordion/stories/cascade.stories.js @@ -14,10 +14,10 @@ export const RTL = () => ` Shipping and returns @@ -36,10 +36,10 @@ export const RTL = () => ` Text wraps on small screen with this long text @@ -58,10 +58,10 @@ export const RTL = () => ` Specifications @@ -91,10 +91,10 @@ export const colour = () => ` Shipping and returns @@ -113,10 +113,10 @@ export const colour = () => ` Text wraps on small screen with this long text @@ -135,10 +135,10 @@ export const colour = () => ` Specifications @@ -168,10 +168,10 @@ export const fontSize = () => ` Shipping and returns @@ -190,10 +190,10 @@ export const fontSize = () => ` Text wraps on small screen with this long text @@ -212,10 +212,10 @@ export const fontSize = () => ` Specifications From 671b78d11f77439eae257738908c8316ed7421a1 Mon Sep 17 00:00:00 2001 From: Goutham Ponnada Date: Fri, 22 Nov 2024 11:23:44 -0800 Subject: [PATCH 6/7] fix: code review suggestions contd --- dist/accordion/accordion.css | 7 +++---- src/sass/accordion/accordion.scss | 11 +++++++---- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/dist/accordion/accordion.css b/dist/accordion/accordion.css index 0da8f3ab6..e78ba3479 100644 --- a/dist/accordion/accordion.css +++ b/dist/accordion/accordion.css @@ -1,9 +1,11 @@ ul.accordion { - list-style: none; margin: 0; padding: 0; width: 100%; } +ul.accordion ::marker { + font-size: 0; +} ul.accordion li:not(:last-child) { border-bottom: 1px solid var(--color-stroke-subtle); @@ -31,9 +33,6 @@ ul.accordion details .details__content { ul.accordion details[open] .details__content { opacity: 1; transform: scaleY(1); - transition: - opacity 0.25s cubic-bezier(0.3, 0, 0, 1), - transform 0.25s cubic-bezier(0.3, 0, 0, 1); } ul.accordion--large summary.details__summary { diff --git a/src/sass/accordion/accordion.scss b/src/sass/accordion/accordion.scss index 50552961e..ccb371811 100644 --- a/src/sass/accordion/accordion.scss +++ b/src/sass/accordion/accordion.scss @@ -2,12 +2,18 @@ @import "../mixins/private/token-mixins"; ul.accordion { - list-style: none; margin: 0; padding: 0; width: 100%; } +/* +Safari does not recognize ordered or unordered lists as lists in the accessibility tree if they have a list-style value of none, unless the list is nested within the