tt

package-lock.json

@@ -4352,6 +4352,17 @@
         "react-docgen": "^5.0.0"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "1.13.1",
+      "resolved": "http://npm.dui88.com:80/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.1.tgz",
+      "integrity": "sha1-Xs0osgdifCom741dpAHpZEBlCVo=",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "http://npm.dui88.com:80/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -5142,6 +5153,11 @@
       "resolved": "http://npm.dui88.com:80/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha1-7pePaUeRTMMMa0R0G27R338EP9U="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "http://npm.dui88.com:80/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "can-use-dom": {
       "version": "0.1.0",
       "resolved": "http://npm.dui88.com:80/can-use-dom/-/can-use-dom-0.1.0.tgz",
@@ -5988,6 +6004,11 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "http://npm.dui88.com:80/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-loader": {
       "version": "5.2.6",
       "resolved": "http://npm.dui88.com:80/css-loader/-/css-loader-5.2.6.tgz",
@@ -6073,6 +6094,16 @@
         "nth-check": "^2.0.0"
       }
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "http://npm.dui88.com:80/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha1-YtvmeAcqgkpom8/uAR/JbgKn11Y=",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-what": {
       "version": "5.0.1",
       "resolved": "http://npm.dui88.com:80/css-what/-/css-what-5.0.1.tgz",
@@ -12918,6 +12949,33 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "styled-components": {
+      "version": "5.3.0",
+      "resolved": "http://npm.dui88.com:80/styled-components/-/styled-components-5.3.0.tgz",
+      "integrity": "sha1-5Hw9Pp3f/1OfEYo90P1Pj0+yVyc=",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "http://npm.dui88.com:80/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "http://npm.dui88.com:80/supports-color/-/supports-color-7.2.0.tgz",

package.json

@@ -35,6 +35,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "resolve-url-loader": "^4.0.0",
-    "style-loader": "2.0.0"
+    "style-loader": "2.0.0",
+    "styled-components": "^5.3.0"
   }
 }

src/stories/Button.stories.tsx

 import React from 'react';
-import { Button } from "@storybook/react/demo";
+import { Button } from '@storybook/react/demo';
 export default {
   component: Button,
   title: 'Components/Button',
@@ -15,3 +15,4 @@ Primary.args = {
   primary: true,
   label: 'Button',
 };
+

src/stories/TestSpan.stories.tsx

@@ -12,6 +12,12 @@ const Template = (args) => <TestSpan {...args} />;
 export const Primary = Template.bind({});
 
 Primary.args = {
-  primary: true,
+  primary: false,
   label: 'TestSpan',
 };
+export const Default = Template.bind({});
+
+Default.args = {
+  primary: false,
+  label: 'TestSpan-Default',
+};
\ No newline at end of file