convert Widget

ui/src/components/widget/index.js

@@ -1,6 +1,44 @@
-const classNames = require('classnames');
 const React = require('react');
-const styles = require('./style.css');
+const constants = require('../../shared/constants');
+const Styled = require('styled-components');
+
+const {
+  boxes
+} = constants;
+
+const {
+  default: styled,
+} = Styled;
+
+const StyledInput = styled.input`
+  display: none;
+  visibility: hidden;
+
+  &:checked {
+    & ~ .content {
+      border: ${boxes.border.checked};
+    }
+  }
+
+  &:disabled {
+    & ~ .content {
+      cursor: not-allowed;
+      filter: grayscale(80%);
+      opacity: 0.4;
+    }
+  }
+`;
+
+const StyledContent = styled.div`
+  border: ${boxes.border.unchecked};
+  border-radius: 4px;
+  cursor: pointer;
+  padding: remcalc(36);
+
+  & img {
+    max-width: 100%;
+  }
+`;
 
 const Widget = ({
   checked = false,
@@ -12,28 +50,21 @@ const Widget = ({
   style,
   value = name
 }) => {
-
-  const cn = classNames(
-    className,
-    styles.widget
-  );
-
   const type = selectable === 'single' ? 'radio' : 'checkbox';
 
   return (
-    <label className={cn} htmlFor={value}>
-      <input
+    <label className={className} htmlFor={value}>
+      <StyledInput
         checked={checked}
-        className={styles.input}
         disabled={disabled}
         id={value}
         name={name}
         type={type}
         value={value}
       />
-      <div className={styles.content}>
+      <StyledContent>
         {children}
-      </div>
+      </StyledContent>
     </label>
   );
 };

ui/src/components/widget/style.css

@@ -1,36 +0,0 @@
-~boxes: "../../shared/constants.js";
-
-:root {
-  --border-checked: ~boxes.border.checked;
-  --border-unchecked: ~boxes.border.unchecked;
-}
-
-.content {
-  border: var(--border-unchecked);
-  border-radius: 4px;
-  cursor: pointer;
-  padding: remcalc(36);
-
-  & img {
-    max-width: 100%;
-  }
-}
-
-.input {
-  display: none;
-  visibility: hidden;
-
-  &:checked {
-    & ~ .content {
-      border: var(--border-checked);
-    }
-  }
-
-  &:disabled {
-    & ~ .content {
-      cursor: not-allowed;
-      filter: grayscale(80%);
-      opacity: 0.4;
-    }
-  }
-}

ui/src/index.js

@@ -17,7 +17,7 @@ module.exports = {
   // Radio: require('./components/radio'),
   // RadioGroup: require('./components/radio-group'),
   // Select: require('./components/select'),
-  // Widget: require('./components/widget'),
+  Widget: require('./components/widget'),
   // Pagination: require('./components/pagination'),
   // Modal: require('./components/modal')
 };

ui/stories/index.js

@@ -12,7 +12,8 @@ const {
   Checkbox,
   Row,
   Column,
-  Avatar
+  Avatar,
+  Widget
 } = require('../src/');
 
 const styles = {
@@ -123,3 +124,11 @@ storiesOf('Checkbox', module)
   .add('Disabled', () => (
     <Checkbox disabled />
   ));
+
+storiesOf('Widget', module)
+  .add('single', () => (
+    <Widget checked selectable='single' name='flag' value='flag_1'>
+      <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png' />
+      <p>Some text</p>
+    </Widget>
+  ))