Added Checkbox and Radio components. Still needs functioanliaty.

packages/design/sass/styles.scss

@@ -102,6 +102,12 @@ main {
   &:hover {
     background-color: #783cb9;
   }
+
+  &.usa-button--outline,
+  &.usa-button--unstyled {
+    background: transparent;
+    text-decoration: underline;
+  }
 }
 
 .usa-header,

packages/design/src/Components/Button.stories.tsx

@@ -0,0 +1,64 @@
+import Button from './Button';
+
+export default {
+    component: Button,
+    title: 'Components/Button',
+    tags: ['autodocs'],
+  };
+
+  export const Primary = {
+    args: {
+      props: {
+        id: '1',
+        label: 'Primary'
+      },
+    },
+  };
+
+  export const Secondary = {
+    args: {
+      props: {
+        id: '2',
+        label: 'Secondary',
+        secondary: true
+      },
+    },
+  };
+
+  export const Continue = {
+    args: {
+      props: {
+        id: '5',
+        label: 'Continue >>'
+      },
+    },
+  };
+
+  export const SaveContinue = {
+    args: {
+      props: {
+        id: '6',
+        label: 'Save & Continue >>'
+      },
+    },
+  };
+
+  export const Back = {
+    args: {
+      props: {
+        id: '7',
+        label: '<< Back',
+        textOnly: true
+      },
+    },
+  };
+
+  export const Cancel = {
+    args: {
+      props: {
+        id: '8',
+        label: 'Cancel',
+        textOnly: true
+      },
+    },
+  };

packages/design/src/Components/Button.tsx

@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+import React from 'react';
+
+export default function Button({ props: { 
+    id,
+    label,
+    disabled,
+    secondary,
+    textOnly,
+    uswds
+} }) {
+
+    return (
+            <button key={id} type="button" 
+                className={classNames('usa-button', {
+                    'usa-button--outline': secondary,
+                    'usa-button--unstyled': textOnly,
+                  })}
+            >
+            {label}
+            </button>
+    )
+}

packages/design/src/Components/Checkbox.stories.tsx

@@ -0,0 +1,25 @@
+import Checkbox from './Checkbox';
+
+export default {
+    component: Checkbox,
+    title: 'Components/Checkbox',
+    tags: ['autodocs'],
+  };
+
+  export const Primary = {
+    args: {
+      props: {
+        id: '1',
+        label: 'Primary'
+      },
+    },
+  };
+
+  export const Secondary = {
+    args: {
+      props: {
+        id: '2',
+        label: 'Secondary'
+      },
+    },
+  };

packages/design/src/Components/Checkbox.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import React from 'react';
+
+export default function Checkbox({ props: { 
+    id,
+    label,
+    secondary,
+    uswds
+} }) {
+
+    return (
+
+          <div className="usa-checkbox">
+            <input
+              key={id}
+              type="checkbox"
+              className={classNames('usa-checkbox__input', )}
+            />
+            <label
+              className="usa-checkbox__label"
+            >
+              {label}
+            </label>
+          </div>
+    )
+}

packages/design/src/Components/Radio.stories.tsx

@@ -0,0 +1,25 @@
+import Radio from './Radio';
+
+export default {
+    component: Radio,
+    title: 'Components/Radio',
+    tags: ['autodocs'],
+  };
+
+  export const Primary = {
+    args: {
+      props: {
+        id: '1',
+        label: 'Primary'
+      },
+    },
+  };
+
+  export const Secondary = {
+    args: {
+      props: {
+        id: '2',
+        label: 'Secondary'
+      },
+    },
+  };

packages/design/src/Components/Radio.tsx

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import React from 'react';
+
+export default function Radio({ props: { 
+    id,
+    label,
+    secondary,
+    uswds
+} }) {
+
+    return (
+          <div className="usa-radio">
+            <input
+              key={id}
+              className="usa-radio__input"
+              type="radio"
+            />
+            <label 
+              className="usa-radio__label" 
+            >
+              {label}
+            </label>
+          </div>
+    )
+}