not clean

Author: Daniel Vianna

.storybook/main.js

@@ -4,6 +4,8 @@ module.exports = {
   ],
   "addons": [
     "@storybook/addon-links",
-    "@storybook/addon-essentials"
+    "@storybook/addon-essentials",
+    'storybook-addon-designs',
   ]
-}
+}
+

.storybook/manager-head.html

@@ -2,8 +2,8 @@
 <style>
 
 
-.css-1jj07fx * {
-  font-size: 1rem;
+.css-21d5zu span:first-of-type * {
+  color: white;
 }
 
 

.storybook/manager.js

@@ -5,7 +5,6 @@ import storybooktheme from './storybooktheme';
 
 addons.setConfig({
   theme: storybooktheme,
-//   panelPosition: right,
   sidebar: {
     showRoots: false,
     collapsedRoots: ['other'],

.storybook/preview.js

@@ -1,3 +1,5 @@
+import { addParameters } from '@storybook/react'
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   layout: 'centered',
@@ -10,4 +12,9 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+}
+
+addParameters({
+  viewMode: 'story',
+  docs: { page: null },
+})

build-storybook.log

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Buttonx } from './Buttonx';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Example/Buttonx',
+  component: Buttonx,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Buttonx>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Buttonx> = (args) => <Buttonx {...args} />;
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+  primary: true,
+  label: 'Buttonx',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Buttonx',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Buttonx',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Buttonx',
+};

components/.DS_Store

@@ -0,0 +1,48 @@
+import React from 'react';
+import './buttonx.css';
+
+interface ButtonxProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Buttonx = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonxProps) => {
+  const mode = primary ? 'storybook-buttonx--primary' : 'storybook-buttonx--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-buttonx', `storybook-buttonx--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

components/button2/Buttonx.stories.tsx

@@ -0,0 +1,30 @@
+.storybook-buttonx {
+  font-family: 'system', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-buttonx--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-buttonx--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-buttonx--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-buttonx--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-buttonx--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}