feat(button): add all color schemes

p3ol · May 29, 2020 · 11aadb6 · 11aadb6
1 parent bf23fde
commit 11aadb6
Show file tree

Hide file tree

Showing 2 changed files with 362 additions and 10 deletions.
diff --git a/lib/Button/index.stories.js b/lib/Button/index.stories.js
@@ -5,25 +5,87 @@ import Button from './index';
 export default { title: 'Button' };
 
 export const basic = () => (
-  <Button>Click me</Button>
+  <>
+    <p><Button>Default</Button></p>
+    <p><Button disabled>Disabled</Button></p>
+    <p><Button className="outline">Outline</Button></p>
+    <p><Button><i className="material-icons">add_box</i> With icon</Button></p>
+    <p><Button className="small">Small</Button></p>
+    <p><Button className="big">Big</Button></p>
+  </>
 );
 
 export const primary = () => (
-  <Button className="primary">Click me</Button>
+  <>
+    <p><Button className="primary">Default</Button></p>
+    <p><Button disabled className="primary">Disabled</Button></p>
+    <p><Button className="primary outline">Outline</Button></p>
+    <p>
+      <Button className="primary">
+        <i className="material-icons">add_box</i> With icon
+      </Button>
+    </p>
+    <p><Button className="primary small">Small</Button></p>
+    <p><Button className="primary big">Big</Button></p>
+  </>
 );
 
 export const secondary = () => (
-  <Button className="secondary">Click me</Button>
+  <>
+    <p><Button className="secondary">Default</Button></p>
+    <p><Button disabled className="secondary">Disabled</Button></p>
+    <p><Button className="secondary outline">Outline</Button></p>
+    <p>
+      <Button className="secondary">
+        <i className="material-icons">add_box</i> With icon
+      </Button>
+    </p>
+    <p><Button className="secondary small">Small</Button></p>
+    <p><Button className="secondary big">Big</Button></p>
+  </>
 );
 
 export const warning = () => (
-  <Button className="warning">Click me</Button>
+  <>
+    <p><Button className="warning">Default</Button></p>
+    <p><Button disabled className="warning">Disabled</Button></p>
+    <p><Button className="warning outline">Outline</Button></p>
+    <p>
+      <Button className="warning">
+        <i className="material-icons">add_box</i> With icon
+      </Button>
+    </p>
+    <p><Button className="warning small">Small</Button></p>
+    <p><Button className="warning big">Big</Button></p>
+  </>
 );
 
 export const danger = () => (
-  <Button className="danger">Click me</Button>
+  <>
+    <p><Button className="danger">Default</Button></p>
+    <p><Button disabled className="danger">Disabled</Button></p>
+    <p><Button className="danger outline">Outline</Button></p>
+    <p>
+      <Button className="danger">
+        <i className="material-icons">add_box</i> With icon
+      </Button>
+    </p>
+    <p><Button className="danger small">Small</Button></p>
+    <p><Button className="danger big">Big</Button></p>
+  </>
 );
 
 export const success = () => (
-  <Button className="success">Click me</Button>
+  <>
+    <p><Button className="success">Default</Button></p>
+    <p><Button disabled className="success">Disabled</Button></p>
+    <p><Button className="success outline">Outline</Button></p>
+    <p>
+      <Button className="success">
+        <i className="material-icons">add_box</i> With icon
+      </Button>
+    </p>
+    <p><Button className="success small">Small</Button></p>
+    <p><Button className="success big">Big</Button></p>
+  </>
 );