feat(radio): add is-dark to radio, changed inputs story

nostalgic-css · Feb 26, 2019 · 53610cb · 53610cb
1 parent ea5293b
commit 53610cb
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 14 deletions.
diff --git a/docs/inputs.stories.js b/docs/inputs.stories.js
@@ -1,28 +1,30 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, radios,
+  withKnobs, radios, boolean,
 } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Inputs', module);
 stories.addDecorator(withKnobs);
 
-stories.add('input.radio', () => `
-      <label>
-        <input type="radio" class="nes-radio" name="answer" checked />
-        <span>Yes</span>
-      </label> <label>
-        <input type="radio" class="nes-radio" name="answer" />
-        <span>No</span>
-      </label>`)
+stories.add('input.radio', () => {
+  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
+
+  return (`
+    <label>
+      <input type="radio" class="nes-radio ${isDark}" name="answer" checked />
+      <span>Yes</span>
+    </label> <label>
+      <input type="radio" class="nes-radio ${isDark}" name="answer" />
+      <span>No</span>
+    </label>`
+  );
+})
   .add('input.checkbox', () => {
-    const selectedClass = radios('class', {
-      default: '',
-      'is-dark': 'is-dark',
-    }, '');
+    const isDark = boolean('is-dark', false) ? 'is-dark' : '';
 
     return (
       `<label>
-        <input type="checkbox" class="nes-checkbox ${selectedClass}" checked />
+        <input type="checkbox" class="nes-checkbox ${isDark}" checked />
         <span>Enable</span>
       </label>`
     );

diff --git a/scss/form/radios.scss b/scss/form/radios.scss
@@ -20,6 +20,7 @@
     (2,2,0,0,0,0),
   );
   $colors: ($base-color, map-get($default-colors, "shadow"));
+  $colors-radio-dark: ($color-white, map-get($default-colors, "shadow"));
 
   margin-right: 20px;
   -webkit-appearance: none;
@@ -50,4 +51,24 @@
   &:checked:focus + span::before {
     @include pixelize(2px, $radio-checked-focus, $colors);
   }
+  &.is-dark {
+    + span {
+      color: $color-white;
+    }
+    // prettier-ignore
+    + span::before { /* stylelint-disable-line no-descending-specificity */
+      color: $color-white;
+    }
+
+    &:checked + span::before {
+      @include pixelize(2px, $radio-checked-focus, $colors-radio-dark);
+
+      color: $color-white;
+    }
+    &:checked:focus + span::before {
+      @include pixelize(2px, $radio-checked-focus, $colors-radio-dark);
+
+      color: $color-white;
+    }
+  }
 }