@madie/madie-design-system 1.0.23 → 1.0.25

package/components/Button/Button.stories.js

@@ -20,47 +20,110 @@ Container.propTypes = {
 };
 
 export const Primary = () => (
-    <Container>
-        <Button>Button</Button>
-    </Container>
+    <div>
+        <Container>
+            <Button>Button</Button>
+        </Container>
+        <Container>
+            <Button disabled>Button</Button>
+        </Container>
+    </div>
+);
+
+export const FormAction = () => (
+    <div>
+        <Container>
+            <Button variant="action">Button</Button>
+        </Container>
+        <Container>
+            <Button variant="action" disabled>Disabled</Button>
+        </Container>
+    </div>
 );
 
 export const Cyan = () => (
-    <Container>
-        <Button className="qpp-c-button--cyan">Button</Button>
-    </Container>
+    <div>
+        <Container>
+            <Button className="qpp-c-button--cyan">Button</Button>
+        </Container>
+        <Container>
+            <Button variant="cyan" disabled>Disabled</Button>
+        </Container>
+    </div>
 );
 
 export const Secondary = () => (
-    <Container>
-        <Button variant="secondary">Button</Button>
-    </Container>
+    <div>
+        <Container>
+            <Button variant="secondary">Button</Button>
+        </Container>
+        <Container>
+            <Button variant="secondary" disabled>Disabled</Button>
+        </Container>
+    </div>
 );
 
 export const Danger = () => (
-    <Container>
-        <Button variant="danger">Button</Button>
-    </Container>
+    <div>
+        <Container>
+            <Button variant="danger">Button</Button>
+        </Container>
+        <Container>
+            <Button disabled variant="danger">Disabled</Button>
+        </Container>
+    </div>
 );
 
 export const DangerPrimary = () => (
-    <Container>
-        <Button variant="danger-primary">Button</Button>
-    </Container>
+    <div>
+        <Container>
+            <Button variant="danger-primary">Button</Button>
+        </Container>
+        <Container>
+            <Button disabled variant="danger-primary">Disabled</Button>
+        </Container>
+    </div>
 );
 
 export const Outline = () => (
-    <Container className="qpp-u-fill--blue-80">
+    <Container>
         <Button variant="outline">Button</Button>
+        <hr/>
+        <Button variant="outline" disabled>Button</Button>
     </Container>
 );
 
-export const White = () => (
+export const OutlineFilled = () => (
     <Container className="qpp-u-fill--blue-80">
-        <Button variant="white">Button</Button>
+        <Button variant="outline-filled">Button</Button>
+        <hr/>
+        <Button variant="outline-filled" disabled>Button</Button>
+        <hr />
+        <Button variant="outline-filled">
+            <FeatherIcon icon="download" />Button
+        </Button>
+    </Container>
+);
+
+export const OutlineSecondary = () => (
+    <Container>
+        <Button variant="outline-secondary">Button</Button>
+        <hr/>
+        <Button variant="outline-secondary" disabled>Button</Button>
     </Container>
 );
 
+export const White = () => (
+    <div>
+        <Container className="qpp-u-fill--blue-80">
+            <Button variant="white">Button</Button>
+        </Container>
+        <Container className="qpp-u-fill--blue-80">
+            <Button variant="white" disabled>Button</Button>
+        </Container>
+    </div>
+);
+
 export const Icon = () => (
     <Container>
         <Button>
@@ -88,6 +151,10 @@ export const Big = () => (
         <Button size="big" variant="secondary">
             Big Secondary Button
         </Button>
+        <hr />
+        <Button size="big" variant="action">
+            Big Action Button
+        </Button>
     </Container>
 );
 
@@ -130,4 +197,5 @@ export const TextButtonStory = () => (
         </TextButton>
     </Container>
 );
+
 TextButtonStory.storyName = "Text Button";

package/components/Button/index.js

@@ -4,6 +4,9 @@ import PropTypes from "prop-types";
 const VARIANTS = [
     "secondary",
     "outline",
+    "outline-secondary",
+    "outline-filled",
+    "action",
     "cyan",
     "danger",
     "danger-primary",