Impl [General] StoryBook: add stories of buttons (#431)

.storybook/main.js

@@ -0,0 +1,12 @@
+
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    '@storybook/preset-scss'
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

package.json

@@ -44,7 +44,9 @@
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
     "test:coverage": "npm run test -- --coverage --watchAll=false",
-    "docker": "docker build -t ${MLRUN_DOCKER_REGISTRY}${MLRUN_DOCKER_REPO:-mlrun}/mlrun-ui:${MLRUN_DOCKER_TAG:-latest} --build-arg COMMIT_HASH=\"`git rev-parse --short HEAD`\" --build-arg DATE=\"`date -u`\" -f Dockerfile ."
+    "docker": "docker build -t ${MLRUN_DOCKER_REGISTRY}${MLRUN_DOCKER_REPO:-mlrun}/mlrun-ui:${MLRUN_DOCKER_TAG:-latest} --build-arg COMMIT_HASH=\"`git rev-parse --short HEAD`\" --build-arg DATE=\"`date -u`\" -f Dockerfile .",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -64,6 +66,11 @@
   "devDependencies": {
     "@babel/core": "7.6.0",
     "@babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
+    "@storybook/addon-actions": "^6.1.20",
+    "@storybook/addon-essentials": "^6.1.20",
+    "@storybook/addon-links": "^6.1.20",
+    "@storybook/react": "^6.1.20",
+    "@storybook/preset-scss": "^1.0.3",
     "@svgr/webpack": "^5.4.0",
     "@testing-library/react": "^11.0.2",
     "@typescript-eslint/eslint-plugin": "^2.2.0",

src/common/Button/Button.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import './button.scss'
+
+const Button = ({ className, label, variant, ...restProps }) => {
+  const buttonClassName = classNames('btn', `btn-${variant}`, className)
+
+  return (
+    <button {...restProps} className={buttonClassName}>
+      {label}
+    </button>
+  )
+}
+
+Button.defaultProps = {
+  className: '',
+  label: 'Button',
+  variant: 'tertiary'
+}
+
+Button.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  variant: PropTypes.PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'tertiary',
+    'danger',
+    'label'
+  ]).isRequired
+}
+
+export default Button

src/common/Button/Button.stories.js

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import Button from './Button'
+
+export default {
+  title: 'Example/Button',
+  component: Button
+}
+
+const commonArgs = {
+  disabled: false
+}
+
+const Template = args => <Button {...args} />
+
+export const Primary = Template.bind({})
+Primary.args = {
+  ...commonArgs,
+  label: 'Primary button',
+  variant: 'primary'
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  ...commonArgs,
+  label: 'Secondary button',
+  variant: 'secondary'
+}
+
+export const Tertiary = Template.bind({})
+Tertiary.args = {
+  ...commonArgs,
+  label: 'Tertiary button',
+  variant: 'tertiary'
+}
+
+export const Danger = Template.bind({})
+Danger.args = {
+  ...commonArgs,
+  label: 'Danger button',
+  variant: 'danger'
+}
+
+export const Label = Template.bind({})
+Label.args = {
+  ...commonArgs,
+  label: 'Label button',
+  variant: 'label'
+}

src/common/Button/button.scss

@@ -0,0 +1,152 @@
+@import '../../scss/variables';
+@import '../../scss/colors';
+@import '../../scss/borders';
+
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 90px;
+  height: 36px;
+  padding: 0 16px;
+  color: $white;
+  font-weight: 500;
+  font-size: 14px;
+  font-family: Roboto, sans-serif;
+  font-style: normal;
+  line-height: 16px;
+  border: 1px solid transparent;
+  border-radius: $mainBorderRadius;
+
+  svg {
+    path {
+      fill: $white;
+    }
+  }
+
+  &:focus {
+    border-color: rgba($black, 0.4);
+  }
+
+  &:active {
+    border-color: rgba($black, 0.4);
+  }
+
+  &:disabled {
+    color: $spunPearl;
+    background: $white;
+    cursor: not-allowed;
+
+    svg {
+      path {
+        fill: $alto;
+      }
+    }
+  }
+
+  :first-child {
+    margin-right: 5px;
+  }
+
+  &-primary {
+    background: $brightTurquoise;
+
+    &:hover {
+      background: $javaLight;
+    }
+
+    &:active {
+      background: $mountainMeadow;
+    }
+
+    &:disabled {
+      border: 1px solid $brightTurquoise;
+    }
+  }
+
+  &-tertiary {
+    color: $primary;
+    background: $white;
+    border: $primaryBorder;
+
+    svg {
+      path {
+        fill: $primary;
+      }
+    }
+
+    &:hover {
+      background: $alabaster;
+    }
+
+    &:active {
+      background: $mercury;
+    }
+
+    &:disabled {
+      border: $primaryBorder;
+    }
+  }
+
+  &-secondary {
+    background: $malibu;
+
+    &:hover {
+      background: $cornflowerBlue;
+    }
+
+    &:active {
+      background: $indigo;
+    }
+
+    &:disabled {
+      border: 1px solid $malibu;
+    }
+  }
+
+  &-danger {
+    color: $white;
+    background: $amaranth;
+
+    &:hover {
+      background: $ceriseRed;
+    }
+
+    &:active {
+      background: $maroonFlash;
+    }
+
+    &:disabled {
+      border: 1px solid $amaranth;
+    }
+  }
+
+  &-label {
+    color: $primary;
+    background: $white;
+    border: 0;
+
+    svg {
+      path {
+        fill: $primary;
+      }
+    }
+
+    &:focus {
+      border: $dividerBorder;
+    }
+
+    &:hover {
+      color: $topaz;
+    }
+
+    &:active {
+      color: $black;
+      border-color: transparent;
+    }
+
+    &:disabled {
+      border-color: transparent;
+    }
+  }
+}

src/common/LoadButton/LoadButton.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import './loadButton.scss'
+
+const LoadButton = ({ className, label, variant, ...restProps }) => {
+  const buttonClassName = classNames(
+    'btn-load',
+    `btn-load-${variant}`,
+    className
+  )
+
+  return (
+    <button {...restProps} className={buttonClassName}>
+      {label}
+    </button>
+  )
+}
+
+LoadButton.defaultProps = {
+  classList: '',
+  label: 'Load button',
+  variant: 'tertiary'
+}
+
+LoadButton.propTypes = {
+  classList: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  variant: PropTypes.PropTypes.oneOf(['primary', 'secondary', 'tertiary'])
+    .isRequired
+}
+
+export default LoadButton

src/common/LoadButton/LoadButton.stories.js

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import LoadButton from './LoadButton'
+
+export default {
+  title: 'Example/LoadButton',
+  component: LoadButton
+}
+
+const commonArgs = {
+  disabled: false
+}
+
+const Template = args => <LoadButton {...args} />
+
+export const PrimaryLoader = Template.bind({})
+PrimaryLoader.args = {
+  ...commonArgs,
+  label: 'Primary loader',
+  variant: 'primary'
+}
+
+export const SecondaryLoader = Template.bind({})
+SecondaryLoader.args = {
+  ...commonArgs,
+  label: 'Secondary loader',
+  variant: 'secondary'
+}
+
+export const TertiaryLoader = Template.bind({})
+TertiaryLoader.args = {
+  ...commonArgs,
+  label: 'Tertiary loader',
+  variant: 'tertiary'
+}