From 2e4ff795a5394b098588c128624cea950f59bc3c Mon Sep 17 00:00:00 2001 From: "lucas.reis" Date: Wed, 12 Dec 2018 20:26:00 -0200 Subject: [PATCH 1/7] feat(component): Inserting lists with examples Inserting tag + +
+ +
diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss index 1234ad6..9512b4b 100644 --- a/scss/elements/lists.scss +++ b/scss/elements/lists.scss @@ -16,6 +16,16 @@ (0, 0, 0, 1, 1, 1, 0, 0), (0, 0, 0, 1, 1, 0, 0, 0) ); + + $pointer: ( + (1, 1, 1, 0, 0, 0, 0, 0), + (0, 1, 1, 1, 0, 0, 0, 0), + (0, 0, 1, 1, 1, 0, 0, 0), + (0, 0, 0, 1, 1, 1, 0, 0), + (0, 0, 1, 1, 1, 0, 0, 0), + (0, 1, 1, 1, 0, 0, 0, 0), + (1, 1, 1, 0, 0, 0, 0, 0) + ); $colors: ($base-color, map-get($default-colors, "shadow")); list-style-type: none; @@ -44,4 +54,13 @@ @include pixelize($arrow, $colors, 2px); } + + &.is-pointer li::before { + position: absolute; + top: calc(50% - 10px); + left: -20px; + content: ""; + + @include pixelize($pointer, $colors, 2px); + } } From 4f40d70eadbaa4da5c050dd3da80cf5070c742e5 Mon Sep 17 00:00:00 2001 From: "lucas.reis" Date: Wed, 12 Dec 2018 21:03:43 -0200 Subject: [PATCH 3/7] docs(storybook): Insertng lists on storybook Inserting all configuration of lists in storybook #179 --- docs/lists.stories.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 docs/lists.stories.js diff --git a/docs/lists.stories.js b/docs/lists.stories.js new file mode 100644 index 0000000..a6c43d2 --- /dev/null +++ b/docs/lists.stories.js @@ -0,0 +1,16 @@ +import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies +import { // eslint-disable-line import/no-extraneous-dependencies + withKnobs, radios, +} from '@storybook/addon-knobs'; + +const stories = storiesOf('Lists', module); +stories.addDecorator(withKnobs); + +stories.add('list', () => { + const selectedClass = radios('type', { + default: 'is-circle', + 'is-arrow': 'is-arrow', + 'is-pointer': 'is-pointer', + }, 'is-circle'); + return `
  • Test
`; +}); From 54765eeaee638ac90f9eed6f63b1bb2aa0c333e0 Mon Sep 17 00:00:00 2001 From: "lucas.reis" Date: Wed, 12 Dec 2018 21:23:53 -0200 Subject: [PATCH 4/7] feat(component): Changing lists Changing lists to more generic design #179 --- index.html | 20 ++++++++-------- scss/elements/lists.scss | 51 ++++++++++++++++++++-------------------- 2 files changed, 35 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 816ec4e..fb776a0 100644 --- a/index.html +++ b/index.html @@ -152,6 +152,15 @@

Lists

+
+
    +
  • Test1
    • +
  • Test2
    • +
  • Test3
    • +
  • Test4
    • +
+
+
  • Test1
    • @@ -162,16 +171,7 @@
-
    -
  • Test1
    • -
  • Test2
    • -
  • Test3
    • -
  • Test4
    • -
-
- -
-
    +
    • Test1
    • Test2
    • Test3
      • diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss index 9512b4b..ba55506 100644 --- a/scss/elements/lists.scss +++ b/scss/elements/lists.scss @@ -1,5 +1,5 @@ .nes-list { - $ball: ( + $disc: ( (0, 0, 0, 1, 1, 0, 0, 0), (0, 0, 1, 1, 1, 1, 0, 0), (0, 1, 1, 1, 1, 1, 1, 0), @@ -8,23 +8,22 @@ (0, 0, 0, 1, 1, 0, 0, 0) ); - $arrow: ( + $circle: ( (0, 0, 0, 1, 1, 0, 0, 0), - (0, 0, 0, 1, 1, 1, 0, 0), - (0, 0, 0, 1, 1, 1, 1, 0), - (0, 0, 0, 1, 1, 1, 1, 0), - (0, 0, 0, 1, 1, 1, 0, 0), + (0, 0, 1, 1, 1, 1, 0, 0), + (0, 1, 1, 0, 0, 1, 1, 0), + (0, 1, 1, 0, 0, 1, 1, 0), + (0, 0, 1, 1, 1, 1, 0, 0), (0, 0, 0, 1, 1, 0, 0, 0) ); - $pointer: ( - (1, 1, 1, 0, 0, 0, 0, 0), - (0, 1, 1, 1, 0, 0, 0, 0), - (0, 0, 1, 1, 1, 0, 0, 0), - (0, 0, 0, 1, 1, 1, 0, 0), - (0, 0, 1, 1, 1, 0, 0, 0), - (0, 1, 1, 1, 0, 0, 0, 0), - (1, 1, 1, 0, 0, 0, 0, 0) + $square: ( + (0, 1, 1, 1, 1, 1, 1, 0), + (0, 1, 1, 1, 1, 1, 1, 0), + (0, 1, 1, 1, 1, 1, 1, 0), + (0, 1, 1, 1, 1, 1, 1, 0), + (0, 1, 1, 1, 1, 1, 1, 0), + (0, 1, 1, 1, 1, 1, 1, 0) ); $colors: ($base-color, map-get($default-colors, "shadow")); @@ -37,30 +36,30 @@ position: relative; } + &.is-disc li::before { + position: absolute; + top: calc(50% - 10px); + left: -20px; + content: ""; + + @include pixelize($disc, $colors, 2px); + } + &.is-circle li::before { position: absolute; top: calc(50% - 10px); left: -20px; content: ""; - @include pixelize($ball, $colors, 2px); + @include pixelize($circle, $colors, 2px); } - &.is-arrow li::before { + &.is-square li::before { position: absolute; top: calc(50% - 10px); left: -20px; content: ""; - @include pixelize($arrow, $colors, 2px); - } - - &.is-pointer li::before { - position: absolute; - top: calc(50% - 10px); - left: -20px; - content: ""; - - @include pixelize($pointer, $colors, 2px); + @include pixelize($square, $colors, 2px); } } From 22657a90749032eb128627ccf13a1283a305cc95 Mon Sep 17 00:00:00 2001 From: "lucas.reis" Date: Wed, 12 Dec 2018 21:37:21 -0200 Subject: [PATCH 5/7] docs(storybook): Inserting examples on storybook Inserting all examples created on storybook #179 --- docs/lists.stories.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/lists.stories.js b/docs/lists.stories.js index a6c43d2..74a5b3a 100644 --- a/docs/lists.stories.js +++ b/docs/lists.stories.js @@ -8,9 +8,9 @@ stories.addDecorator(withKnobs); stories.add('list', () => { const selectedClass = radios('type', { - default: 'is-circle', - 'is-arrow': 'is-arrow', - 'is-pointer': 'is-pointer', - }, 'is-circle'); + default: 'is-disc', + 'is-circle': 'is-circle', + 'is-square': 'is-square', + }, 'is-disc'); return `
      • Test
      `; }); From 2de0fb6d4df8289c41dea3953a8e4acc940ca0d1 Mon Sep 17 00:00:00 2001 From: "lucas.reis" Date: Thu, 13 Dec 2018 12:09:39 -0200 Subject: [PATCH 6/7] feat(component): Changing examples Changing lists examples to only two #179 --- index.html | 25 ++++++++----------------- scss/elements/lists.scss | 29 ++++------------------------- 2 files changed, 12 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index fb776a0..a62d1bf 100644 --- a/index.html +++ b/index.html @@ -154,28 +154,19 @@

      Lists

        -
      • Test1
        • -
      • Test2
        • -
      • Test3
        • -
      • Test4
        • +
      • Good morning.
        • +
      • Thou hast had a good night's sleep, I hope.
        • +
      • Thou hast had a good afternoon
        • +
      • Good night.
        -
      • Test1
        • -
      • Test2
        • -
      • Test3
        • -
      • Test4
        • -
      -
      - -
      -
        -
      • Test1
        • -
      • Test2
        • -
      • Test3
        • -
      • Test4
        • +
      • Good morning.
        • +
      • Thou hast had a good night's sleep, I hope.
        • +
      • Thou hast had a good afternoon
        • +
      • Good night.
diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss index ba55506..05e6efc 100644 --- a/scss/elements/lists.scss +++ b/scss/elements/lists.scss @@ -16,21 +16,9 @@ (0, 0, 1, 1, 1, 1, 0, 0), (0, 0, 0, 1, 1, 0, 0, 0) ); - - $square: ( - (0, 1, 1, 1, 1, 1, 1, 0), - (0, 1, 1, 1, 1, 1, 1, 0), - (0, 1, 1, 1, 1, 1, 1, 0), - (0, 1, 1, 1, 1, 1, 1, 0), - (0, 1, 1, 1, 1, 1, 1, 0), - (0, 1, 1, 1, 1, 1, 1, 0) - ); $colors: ($base-color, map-get($default-colors, "shadow")); list-style-type: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; & li { position: relative; @@ -38,8 +26,8 @@ &.is-disc li::before { position: absolute; - top: calc(50% - 10px); - left: -20px; + top: calc(50% - 8px); + left: -22px; content: ""; @include pixelize($disc, $colors, 2px); @@ -47,19 +35,10 @@ &.is-circle li::before { position: absolute; - top: calc(50% - 10px); - left: -20px; + top: calc(50% - 8px); + left: -22px; content: ""; @include pixelize($circle, $colors, 2px); } - - &.is-square li::before { - position: absolute; - top: calc(50% - 10px); - left: -20px; - content: ""; - - @include pixelize($square, $colors, 2px); - } } From 0d89cbf2627512412ae0bfc89f01966db2499526 Mon Sep 17 00:00:00 2001 From: "lucas.reis" Date: Thu, 13 Dec 2018 12:12:42 -0200 Subject: [PATCH 7/7] docs(storybook): updating storybook updating storybook to implement the two final lists #179 --- docs/lists.stories.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/lists.stories.js b/docs/lists.stories.js index 74a5b3a..3c8c40b 100644 --- a/docs/lists.stories.js +++ b/docs/lists.stories.js @@ -10,7 +10,11 @@ stories.add('list', () => { const selectedClass = radios('type', { default: 'is-disc', 'is-circle': 'is-circle', - 'is-square': 'is-square', }, 'is-disc'); - return `
  • Test
`; + return `
    +
  • Good morning.
    • +
  • Thou hast had a good night's sleep, I hope.
    • +
  • Thou hast had a good afternoon
    • +
  • Good night.
    • +
`; });