@madie/madie-design-system 1.0.24 → 1.0.26

package/components/Button/Button.stories.js

@@ -86,14 +86,31 @@ export const DangerPrimary = () => (
 );
 
 export const Outline = () => (
-    <div>
-    <Container className="qpp-u-fill--blue-80">
+    <Container>
         <Button variant="outline">Button</Button>
+        <hr/>
+        <Button variant="outline" disabled>Button</Button>
     </Container>
+);
+
+export const OutlineFilled = () => (
     <Container className="qpp-u-fill--blue-80">
-        <Button variant="outline" disabled>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>
-    </div>
 );
 
 export const White = () => (
@@ -180,4 +197,5 @@ export const TextButtonStory = () => (
         </TextButton>
     </Container>
 );
+
 TextButtonStory.storyName = "Text Button";

package/components/Button/index.js

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