From 933fb7412619ba844a4157537ced1aa8e4b9120f Mon Sep 17 00:00:00 2001 From: Andrew Gliga Date: Fri, 15 Nov 2024 12:28:16 -0800 Subject: [PATCH] feat(list): added interactive radio fieldet and incremental list (#2481) --- .changeset/light-pots-wink.md | 5 + dist/list/list.css | 14 +- src/modules/list.marko | 632 +++++++++++++++++++++----- src/sass/list/list.scss | 16 +- src/sass/list/stories/list.stories.js | 132 ++++++ 5 files changed, 673 insertions(+), 126 deletions(-) create mode 100644 .changeset/light-pots-wink.md diff --git a/.changeset/light-pots-wink.md b/.changeset/light-pots-wink.md new file mode 100644 index 000000000..4f213a6a4 --- /dev/null +++ b/.changeset/light-pots-wink.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": minor +--- + +feat(list): added inremental list and radio fieldset in list diff --git a/dist/list/list.css b/dist/list/list.css index 084633e9a..2eab3f189 100644 --- a/dist/list/list.css +++ b/dist/list/list.css @@ -2,13 +2,15 @@ max-width: 480px; } +.list ol, .list ul { list-style: none; margin: 0; padding: 0; } -.list ul li > * { +.list fieldset > *, +.list li > * { align-items: center; background-color: var( --list-background-color, @@ -36,6 +38,16 @@ flex: 1; } +.list ol li { + counter-increment: item; +} + +.list ol li > :before { + content: counter(item) "."; + margin-inline-end: var(--spacing-200); + width: var(--spacing-300); +} + .list li > a, .list li > button { border: none; diff --git a/src/modules/list.marko b/src/modules/list.marko index bfa1d215e..440d8a849 100644 --- a/src/modules/list.marko +++ b/src/modules/list.marko @@ -1,17 +1,28 @@
-

A list component is used to display certain types of data in a structured format. It can be used to display a list of items, a list of links, or a list of buttons.

-

This can be placed inside a container and will resize to fit the contents. The list expands to a maxumum of 480px.

+

+ A list component is used to display certain types of data in a structured format. It can be used to display a list of items, a list of links, or a list of buttons. +

+

+ This can be placed inside a container and will resize to fit the contents. The list expands to a maxumum of 480px. +

-

Default List

-
+

+ Default List +

+
  • - @@ -23,7 +34,12 @@
  • - @@ -35,7 +51,12 @@
  • - @@ -48,13 +69,18 @@
- +
  • - @@ -66,7 +92,12 @@
  • - @@ -78,7 +109,12 @@
  • - @@ -91,16 +127,18 @@
    -

    Actionable list

    -

    List also supports buttons or links as a list item. Actionable components, such as a switch, can be added in the trailing portion of the list, but they cannot be used in conjunction with buttons or link.

    -
    +

    + Actionable list +

    +

    + List also supports buttons or links as a list item. Actionable components, such as a switch, can be added in the trailing portion of the list, but they cannot be used in conjunction with buttons or link. +

    +
    • @@ -138,13 +180,11 @@
- -
+ +
@@ -182,16 +226,29 @@
-

List with dividers

-

To add a divider, add a hr element after the list item.

-
+

+ List with dividers +

+

+ To add a divider, add a + + hr + + element after the list item. +

+
  • - @@ -200,11 +257,16 @@
    • -
    +
  • - @@ -216,7 +278,12 @@
  • - @@ -230,130 +297,449 @@
-
-
    -
  • -
    - - - - - Item 1 - -
    -
    • -
    -
  • -
    - - - - - Item 2 - -
    -
    - - - - - Item with a large amount of text that should wrap and go to the next line. If there is too much it would wrap - -
    -
    • -
-
+
+
    +
  • +
    + + + + + Item 1 + +
    +
    • +
    +
  • +
    + + + + + Item 2 + +
    +
    + + + + + Item with a large amount of text that should wrap and go to the next line. If there is too much it would wrap + +
    +
    • +
+
- - -

List with variable width

+

+ List with variable width +

The list will adjust to the width of the container it is in.

-
+
+
+
    +
  • +
    + + + + + Item 1 + +
    +
    • +
  • +
    + + + + + Item 2 + + + + +
    +
    • +
+
+
+
+
+ + +
+
    +
  • +
    + + + + + Item 1 + +
    +
    • +
  • +
    + + + + + Item 2 + + + + +
    +
    • +
+
+ +

+ List with fieldset +

+

+ For an interactive list, you can add a fieldset with radios or checkboxes +

+
+
-
    -
  • -
    - -
    + + + - - Item 1 - -
    -
    • -
  • -
    - - - - Item 2 + + +
    +
    + + + - - + +
    +
    + + + -
    -
    • -
+ + +
+
-
- +
+
+ Choose an Option +
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+ + +

+ Ordered list +

+
+
-
    +
    1. - - - - Item 1 + Text 1
    2. - - - - Item 2 + Text 2 - - +
      +
      3. +
    3. +
      + + Text 3
      4. -
+
- +
+
+ +
+
    +
  1. +
    + + Text 1 + +
    +
    2. +
  2. +
    + + Text 2 + +
    +
    3. +
  3. +
    + + Text 3 + +
    +
    4. +
+
+
export const metadata = { "ds-component": { name: "list", version: 1.0, }, -}; \ No newline at end of file +}; diff --git a/src/sass/list/list.scss b/src/sass/list/list.scss index 1fc8bf76d..bd0a18a7e 100644 --- a/src/sass/list/list.scss +++ b/src/sass/list/list.scss @@ -6,13 +6,15 @@ max-width: 480px; } -.list ul { +.list ul, +.list ol { list-style: none; margin: 0; padding: 0; } -.list ul li > * { +.list li > *, +.list fieldset > * { @include background-color-token( list-background-color, color-background-primary @@ -41,6 +43,16 @@ flex: 1; } +.list ol li { + counter-increment: item; +} + +.list ol li > *::before { + content: counter(item) "."; + margin-inline-end: var(--spacing-200); + width: var(--spacing-300); +} + .list li > a, .list li > button { border: none; diff --git a/src/sass/list/stories/list.stories.js b/src/sass/list/stories/list.stories.js index 899ce8ac7..41f1d97c0 100644 --- a/src/sass/list/stories/list.stories.js +++ b/src/sass/list/stories/list.stories.js @@ -329,3 +329,135 @@ export const withDivider = () => `
`; + +export const withRadio = () => ` +
+
+ Choose an Option +
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+`; + +export const orderedList = () => ` +
+
    +
  1. +
    + + Text 1 + +
    +
    2. +
  2. +
    + + Text 2 + +
    +
    3. +
  3. +
    + + Text 3 + +
    +
    4. +
+
+`;