introduce storybook for Link and Button

.storybook/main.js

@@ -3,6 +3,5 @@ module.exports = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/preset-typescript',
   ],
 }

.storybook/manager.js

@@ -0,0 +1,11 @@
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming/create';
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'cesko.digital',
+    brandUrl: 'https://cesko.digital/',
+    brandImage: 'https://cesko.digital/dist/logo.svg'
+  }),
+});

.storybook/preview-head.html

@@ -0,0 +1,75 @@
+<style type="text/css">
+  @font-face {
+    font-family: 'Cesko Digital';
+    src: url('../static/fonts/cesko.digital-regular.woff2') format('woff2'),
+      url('../static/fonts/cesko.digital-regular.woff') format('woff'),
+      url('../static/fonts/cesko.digital-regular.eot') format('eot');
+    font-weight: 400;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Cesko Digital';
+    src: url('../static/fonts/cesko.digital-medium.woff2') format('woff2'),
+      url('../static/fonts/cesko.digital-medium.woff') format('woff'),
+      url('../static/fonts/cesko.digital-medium.eot') format('eot');
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Cesko Digital';
+    src: url('../static/fonts/cesko.digital-semibold.woff2') format('woff2'),
+      url('../static/fonts/cesko.digital-semibold.woff') format('woff'),
+      url('../static/fonts/cesko.digital-semibold.eot') format('eot');
+    font-weight: 600;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Cesko Digital';
+    src: url('../static/fonts/cesko.digital-bold.woff2') format('woff2'),
+      url('../static/fonts/cesko.digital-bold.woff') format('woff'),
+      url('../static/fonts/cesko.digital-bold.eot') format('eot');
+    font-weight: 700;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Cesko Digital Mono';
+    src: url('../static/fonts/cesko.digital.mono-regular.woff2') format('woff2'),
+      url('../static/fonts/cesko.digital.mono-regular.woff') format('woff'),
+      url('../static/fonts/cesko.digital.mono-regular.eot') format('eot');
+    font-weight: 400;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Cesko Digital Mono';
+    src: url('../static/fonts/cesko.digital.mono-medium.woff2') format('woff2'),
+      url('../static/fonts/cesko.digital.mono-medium.woff') format('woff'),
+      url('../static/fonts/cesko.digital.mono-medium.eot') format('eot');
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Cesko Digital Mono';
+    src: url('../static/fonts/cesko.digital.mono-semibold.woff2')
+        format('woff2'),
+      url('../static/fonts/cesko.digital.mono-semibold.woff') format('woff'),
+      url('../static/fonts/cesko.digital.mono-semibold.eot') format('eot');
+    font-weight: 600;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Cesko Digital Mono';
+    src: url('../static/fonts/cesko.digital.mono-bold.woff2') format('woff2'),
+      url('../static/fonts/cesko.digital.mono-bold.woff') format('woff'),
+      url('../static/fonts/cesko.digital.mono-bold.eot') format('eot');
+    font-weight: 700;
+    font-style: normal;
+  }
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: '"Cesko Digital", system-ui, sans-serif';
+  }
+</style>

.storybook/preview.jsx

@@ -0,0 +1,13 @@
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '../src/theme/default'
+import { GlobalStyle } from '../src/theme/global-style'
+import React from 'react';
+
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={defaultTheme}>
+      <Story />
+    </ThemeProvider>
+  ),
+];

.storybook/webpack.config.js

@@ -1,21 +1,6 @@
 const path = require('path')
 
 module.exports = ({ config }) => {
-  config.module.rules[0].use[0].loader = require.resolve('babel-loader')
-  config.module.rules[0].use[0].options.presets = [
-    require.resolve('@babel/preset-react'),
-    require.resolve('@babel/preset-env'),
-  ]
-
-  config.module.rules.push({
-    test: /\.(ts|tsx)$/,
-    loader: require.resolve('babel-loader'),
-    options: {
-      presets: [['react-app', { flow: false, typescript: true }]],
-      plugins: [],
-    },
-  })
-
   // Remove the existing css rule
   config.module.rules = config.module.rules.filter(
     (f) => f.test.toString() !== '/\\.css$/'
@@ -28,5 +13,19 @@ module.exports = ({ config }) => {
     include: path.resolve(__dirname, '../'),
   })
 
+  // fonts
+  config.module.rules.push({
+    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+    use: [
+      {
+        loader: 'file-loader',
+        query: {
+          name: '[name].[ext]'
+        }
+      }
+    ],
+    include: path.resolve(__dirname, '../')
+  });
+
   return config
 }

package.json

@@ -16,7 +16,7 @@
     "lint": "eslint './{src,stories}/**/*.{ts,tsx,js,jsx}'",
     "lint:fix": "eslint --fix './{src,stories}/**/*.{ts,tsx,js,jsx}'",
     "test": "jest",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6060 -c .storybook watch-css -s ./",
     "build-storybook": "build-storybook"
   },
   "dependencies": {
@@ -48,6 +48,7 @@
     "@storybook/addon-links": "^6.0.22",
     "@storybook/preset-typescript": "^3.0.0",
     "@storybook/react": "^6.0.22",
+    "@storybook/theming": "^6.0.28",
     "@types/jest": "^26.0.4",
     "@types/node": "^14.0.20",
     "@types/react": "^16.9.49",

src/components/ButtonAsLink/index.tsx → src/components/button-as-link/index.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import { ButtonSize, StyledButtonProps } from '../Button'
-import { applyButtonStyles } from '../Button/styles'
+import { ButtonSize, StyledButtonProps } from '../button'
+import { applyButtonStyles } from '../button/styles'
+
+/**
+ * The component is used where we need to have
+ * a Button which behaves AS a Link
+ */
 
 const StyledButton = styled.a<StyledButtonProps>`
   ${(p) =>

src/components/button/index.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/react'
+
+import Button, { ButtonProps, ButtonSize } from '.'
+
+const story: Meta = {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    size: {
+      defaultValue: ButtonSize.Normal,
+      control: {
+        type: 'select',
+        options: [ButtonSize.Normal, ButtonSize.Small],
+      },
+    },
+    inverted: {
+      defaultValue: false,
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+}
+
+const Template: Story<ButtonProps> = (args: ButtonProps) => <Button {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  children: 'Button',
+}
+
+export const Inverted = Template.bind({})
+Inverted.args = {
+  children: 'Button',
+  inverted: true,
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  children: 'Button',
+  size: ButtonSize.Small,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  children: 'Button',
+  disabled: true,
+}
+
+export default story

src/components/Button/index.tsx → src/components/button/index.tsx

@@ -2,8 +2,8 @@ import * as React from 'react'
 import * as S from './styles'
 
 export enum ButtonSize {
-  Normal,
-  Small,
+  Normal = 'Normal',
+  Small = 'Small',
 }
 
 export interface StyledButtonProps {

src/components/Button/styles.ts → src/components/button/styles.ts

@@ -14,12 +14,14 @@ export const applyButtonStyles = ({
   return css`
     display: inline-flex;
 
+    font-family: ${(p) => p.theme.fonts.body};
+
     height: ${() => (size === ButtonSize.Normal ? 52 : 30)}px;
 
     padding: 0 ${() => (size === ButtonSize.Normal ? 30 : 14)}px;
 
-    font-weight: 600;
-    line-height: 1.3;
+    font-weight: ${(p) => p.theme.fontWeights.button};
+    line-height: ${(p) => p.theme.lineHeights.button};
 
     align-items: center;
 
@@ -28,26 +30,31 @@ export const applyButtonStyles = ({
 
     position: relative;
 
-    border-radius: 0;
-
     text-decoration: none;
 
-    background-color: ${() => (inverted ? 'white' : 'blue')};
-    color: ${() => (inverted ? 'blue' : 'white')};
+    background-color: ${(p) =>
+      inverted ? p.theme.colors.white : p.theme.colors.it};
+    color: ${(p) => (inverted ? p.theme.colors.it : p.theme.colors.white)};
 
     cursor: ${() => (disabled ? 'not-allowed' : 'pointer')};
 
-    font-size: ${() => (size === ButtonSize.Normal ? 18 : 15)}px;
+    font-size: ${(p) =>
+      size === ButtonSize.Normal
+        ? p.theme.fontSizes.base
+        : p.theme.fontSizes.small}px;
 
-    border-radius: 8px;
+    border-radius: ${(p) => p.theme.borderRadius.base}px;
     box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08),
       0px 1px 2px rgba(8, 8, 49, 0.12);
 
     ${() => {
+      const outlineThickness = 2
       return disabled
         ? css`
-            background: ${() => (inverted ? 'white' : '#a9a9b1')};
-            color: ${() => (inverted ? '#a9a9b1' : 'white')};
+            background: ${(p) =>
+              inverted ? p.theme.colors.white : p.theme.colors.gravel};
+            color: ${(p) =>
+              inverted ? p.theme.colors.gravel : p.theme.colors.white};
             box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08),
               0px 1px 2px rgba(8, 8, 49, 0.12);
             &:before {
@@ -62,13 +69,14 @@ export const applyButtonStyles = ({
               &:before {
                 content: '';
                 position: absolute;
-                top: -2px;
-                left: -2px;
-                right: -2px;
-                bottom: -2px;
+                top: -${outlineThickness}px;
+                left: -${outlineThickness}px;
+                right: -${outlineThickness}px;
+                bottom: -${outlineThickness}px;
                 z-index: -1;
-                border-radius: 10px;
-                border: 2px solid #ccccff;
+                border-radius: ${(p) =>
+                  p.theme.borderRadius.base + outlineThickness}px;
+                border: ${outlineThickness}px solid #ccccff;
               }
             }