Merge pull request #5 from user-interviews/feature/UIDS-4-reorganize-scss

UIDS-4 reorganize scss files under src

Author: rsaris

.eslintrc

@@ -121,6 +121,8 @@
     "prefer-destructuring": "warn",
     "quotes": ["error", "single", { "allowTemplateLiterals" : true }],
     "radix": 0,
-    "symbol-description": 0
+    "symbol-description": 0,
+    "template-curly-spacing": "off",
+    "indent": "off"
   }
 }

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "dependencies": {
     "bootstrap": "^4.3.1",
+    "classnames": "^2.2.6",
     "node-sass": "^4.13.1",
     "polished": "^3.4.2",
     "prop-types": "^15.7.2",
@@ -11,7 +12,7 @@
     "react-dom": "^16.12.0"
   },
   "scripts": {
-    "build": "NODE_ENV=production babel src --out-dir lib",
+    "build": "NODE_ENV=production babel src --out-dir lib --copy-files",
     "lint": "eslint . --ext .js,.jsx",
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public",

scss/typography.scss

@@ -1,2 +1,3 @@
 $font-family: Lato, Arial, sans-serif;
 $font-size-base: .875rem;
+$font-weight-bold: 700;

spec/__snapshots__/Storyshots.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Design System|Card all cards 1`] = `
+exports[`Storyshots Design System/Card all cards 1`] = `
 <div>
   <div
     className="card"
@@ -20,3 +20,67 @@ exports[`Storyshots Design System|Card all cards 1`] = `
   </div>
 </div>
 `;
+
+exports[`Storyshots Design System/Pill Blue 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="Pill Pill--blue"
+  >
+    Test pill
+  </div>
+</div>
+`;
+
+exports[`Storyshots Design System/Pill Default 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="Pill"
+  >
+    Test pill
+  </div>
+</div>
+`;
+
+exports[`Storyshots Design System/Pill Orange 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="Pill Pill--orange"
+  >
+    Test pill
+  </div>
+</div>
+`;
+
+exports[`Storyshots Design System/Pill Small 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="Pill Pill--sm"
+  >
+    Test pill
+  </div>
+</div>
+`;

src/Card.jsx renamed to src/Card/Card.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import './Pill.scss';
+
+const Pill = ({ color, size, text }) => (
+  <div
+    className={
+      classNames(
+        'Pill',
+        { [`Pill--${color}`]: !!color },
+        { [`Pill--${size}`]: !!size },
+      )
+    }
+  >
+    {text}
+  </div>
+);
+
+Pill.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.string,
+  text: PropTypes.string.isRequired,
+};
+
+Pill.defaultProps = {
+  color: undefined,
+  size: undefined,
+};
+
+export default Pill;

src/Pill/Pill.jsx

@@ -0,0 +1,33 @@
+@import '../../scss/theme';
+
+.Pill {
+  display: inline;
+  font-weight: $font-weight-bold;
+
+  //////// COLORS!
+  // Default color is gray and sadddddd
+  background-color: $ux-gray-200;
+  color: $ux-gray-800;
+
+  &--blue {
+    background-color: $ux-blue-100;
+    color: $ux-blue-500;
+  }
+
+  &--orange {
+    background-color: $ux-orange-100;
+    color: $ux-orange-600;
+  }
+
+  /////// SIZES
+  // Seems like a fine default size
+  border-radius: 2rem;
+  font-size: $font-size-base;
+  padding: .5rem .75rem;
+
+  &--sm {
+    border-radius: 1rem;
+    font-size: .625rem;
+    padding: .25rem .5rem;
+  }
+}

src/Pill/Pill.scss

@@ -1,3 +1,4 @@
-import Card from './Card';
+import Card from './Card/Card';
+import Pill from './Pill/Pill';
 
-export { Card };
+export { Card, Pill };

src/index.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs, text } from '@storybook/addon-knobs';
 
-import Card from '../src/Card';
+import Card from '../src/Card/Card';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 import '../scss/global.scss';
 
 export default {
-  title: 'Design System|Card',
+  title: 'Design System/Card',
   component: Card,
   decorators: [withA11y, withKnobs],
 };

stories/Card.stories.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
+import { withKnobs, text } from '@storybook/addon-knobs';
+
+import Pill from '../src/Pill/Pill';
+
+const withPadding = (story) => <div style={{ padding: '1rem' }}>{story()}</div>;
+
+export default {
+  title: 'Design System/Pill',
+  component: Pill,
+  decorators: [withA11y, withKnobs, withPadding],
+};
+
+export const Default = () => <Pill text={text('Pill Text', 'Test pill')} />;
+
+export const Blue = () => <Pill color="blue" text={text('Pill Text', 'Test pill')} />;
+
+export const Orange = () => <Pill color="orange" text={text('Pill Text', 'Test pill')} />;
+
+export const Small = () => <Pill size="sm" text={text('Pill Text', 'Test pill')} />;