Build Playground using Storybook for testing

.storybook/main.js

@@ -1,3 +1,8 @@
 module.exports = {
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+    '@storybook/addon-a11y',
+  ],
   stories: ['../stories/**/*.stories.js'],
 }

.storybook/manager.js

@@ -0,0 +1,4 @@
+import { addons } from '@storybook/addons'
+import theme from './theme'
+
+addons.setConfig({ theme })

.storybook/preview-body.html

@@ -0,0 +1,14 @@
+<style>
+  body {
+    align-items: center !important;
+    display: grid !important;
+    font-size: calc(1em + 1vw) !important;
+    line-height: calc(1.2em + 1vw) !important;
+    min-height: 100vh !important;
+  }
+
+  #root {
+    text-align: center !important;
+  }
+
+</style>

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
+<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />

.storybook/theme.js

@@ -0,0 +1,37 @@
+import { create } from '@storybook/theming/create'
+
+export default create({
+  base: 'light',
+
+  // colorPrimary: 'hotpink',
+  // colorSecondary: 'deepskyblue',
+
+  // UI
+  // appBg: 'white',
+  // appContentBg: 'silver',
+  // appBorderColor: 'grey',
+  // appBorderRadius: 4,
+
+  // Typography
+  // fontBase: '"Open Sans", sans-serif',
+  // fontCode: 'monospace',
+
+  // Text colors
+  // textColor: 'black',
+  // textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+  // barTextColor: 'silver',
+  // barSelectedColor: 'black',
+  // barBg: 'hotpink',
+
+  // Form colors
+  // inputBg: 'white',
+  // inputBorder: 'silver',
+  // inputTextColor: 'black',
+  // inputBorderRadius: 4,
+
+  brandTitle: 'Knopf.css',
+  brandUrl: 'https://knopf.dev/',
+  // brandImage: 'https://placehold.it/350x150',
+});

package.json

@@ -41,7 +41,10 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.10.5",
-    "@storybook/html": "^5.3.19",
+    "@storybook/addon-a11y": "^6.0.0-rc.12",
+    "@storybook/addon-controls": "^6.0.0-rc.12",
+    "@storybook/addon-docs": "^6.0.0-rc.12",
+    "@storybook/html": "^6.0.0-rc.12",
     "babel-loader": "^8.1.0",
     "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
@@ -52,5 +55,9 @@
     "rules": {
       "no-descending-specificity": null
     }
+  },
+  "dependencies": {
+    "@storybook/addons": "^5.3.19",
+    "@storybook/theming": "^5.3.19"
   }
 }

stories/index.stories.js

@@ -1,7 +1,84 @@
-import '../knopf.css';
+import '../knopf.css'
 
-export default { title: 'Knopf' };
+export default {
+  title: 'Playground',
+  argTypes: {
+    type: {
+      defaultValue: 'default',
+      control: {
+        type: 'inline-radio',
+        options: ['default', 'inverse', 'flat', 'pale'],
+      },
+    },
+    border: {
+      defaultValue: 'none',
+      control: {
+        type: 'inline-radio',
+        options: ['none', 'traced', 'outlined'],
+      },
+    },
+    spacing: {
+      defaultValue: 'regular',
+      control: {
+        type: 'inline-radio',
+        options: ['even', 'regular', 'wide'],
+      },
+    },
+    corners: {
+      defaultValue: 'rounded',
+      control: {
+        type: 'inline-radio',
+        options: ['pill', 'rounded', 'sharp'],
+      },
+    },
+    size: {
+      defaultValue: 'base',
+      control: {
+        type: 'inline-radio',
+        options: ['small', 'base', 'large', 'huge'],
+      },
+    },
+    isBlock: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    alignment: {
+      defaultValue: 'center',
+      control: {
+        type: 'inline-radio',
+        options: ['start', 'center', 'end'],
+      },
+    },
+    label: {
+      control: 'text',
+      defaultValue: 'Button',
+    },
+    isActive: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    isDisabled: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+  },
+}
 
-export const Knopf = () => '<button class="knopf">Knopf</button>';
+export const button = ({ type, border, spacing, corners, size, isBlock, alignment, label, isActive, isDisabled }) => {
+  const classes = ['knopf']
 
-export const Flat = () => '<button class="knopf flat">Flat</button>';
+  if (type !== 'default') classes.push(type)
+  if (border !== 'none') classes.push(border)
+  if (spacing !== 'regular') classes.push(spacing)
+  if (corners !== 'rounded') classes.push(corners)
+  if (size !== 'base') classes.push(size)
+  if (isBlock) classes.push('block')
+  if (alignment !== 'center') classes.push(alignment)
+  if (isActive) classes.push('active')
+
+  return `
+    <button class="${classes.join(' ')}"${isDisabled ? ' disabled' : ''}>
+      ${label}
+    </button>
+  `
+}