feat(storybook): add basic knob

adam-sokolowski · Apr 11, 2020 · d3b90eb · d3b90eb
1 parent e8b2cc8
commit d3b90eb
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,3 +1,4 @@
 module.exports = {
   stories: ['../stories/**/*.stories.js'],
+  addons: ['@storybook/addon-knobs/register'],
 };
diff --git a/src/flags/_index.scss b/src/flags/_index.scss
@@ -9,14 +9,26 @@ $flag-height: $flag-size / 3 * 2;
   width: $flag-size;
   height: $flag-height;
   overflow: hidden;
-  border: 1px solid #f1f1f1;
+  border: 1px solid #d6d6d6;
+
+  &-xl {
+    transform: scale(calc(2));
+  }
+
+  &-l {
+    transform: scale(calc(1.5));
+  }
 
   &-m {
-    transform: scale(100% / 3 * 2);
+    transform: scale(1);
   }
 
   &-s {
-    transform: scale(100% / 3);
+    transform: scale(calc(1/2));
+  }
+
+  &-xs {
+    transform: scale(calc(1/3));
   }
 
   @import "./../helpers/flag-base64-symbols.scss";

diff --git a/stories/index.stories.js b/stories/index.stories.js
@@ -1,13 +1,23 @@
-import { COUNTRY_CODES } from './countries.const';
 import { storiesOf } from '@storybook/html';
+import { select, withKnobs } from '@storybook/addon-knobs';
+import { COUNTRY_CODES } from './countries.const';
+
+const sizes = {
+  ExtraSmall: 'xs',
+  Small: 's',
+  Medium: 'm',
+  Large: 'l',
+  ExtraLarge: 'xl',
+};
+const size = select('Size', sizes, 'm');
 
 const getTemplate = (letter) => `
   <div class="padding">
     ${COUNTRY_CODES
       .filter(country => country.name.startsWith(letter))
       .map(country => `
         <div class="wrapper">
-          <div class="margin flag flag-${country.code.toLowerCase()}"></div>
+          <div class="margin flag flag-${size} flag-${country.code.toLowerCase()}"></div>
             <div class="label">${country.name} / [${country.code}]</div>
         </div>`
       )
@@ -42,3 +52,8 @@ storiesOf('CSS Flags', module)
   .add('W', () => getTemplate('W'))
   .add('Y', () => getTemplate('Y'))
   .add('Z', () => getTemplate('Z'));
+
+export default {
+  title: 'Knobs',
+  decorators: [withKnobs],
+};