vcc-ui/es/components/button/stories.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from "react";
import { storiesOf } from "@storybook/react";
import { Button, Block } from "../../index";
import { withBackgrounds } from "@storybook/addon-backgrounds";
import { object, withKnobs } from "@storybook/addon-knobs";
import { render } from "../../../stories/render";
import { ThemeProvider } from "../../theme-provider";
import { BREAKPOINTS } from "../../constants/breakpoints";
var listOfLightBackgrounds = [{
  name: "white",
  value: "#fff",
  default: true
}, {
  name: "gray",
  value: "#ccc"
}];

var ButtonGroup = function ButtonGroup(_ref) {
  var children = _ref.children,
      props = _objectWithoutProperties(_ref, ["children"]);

  return React.createElement(Block, _extends({}, props, {
    extend: _objectSpread({
      display: "flex",
      alignItems: "center"
    }, props.extend)
  }), children.map(function (child, i) {
    return React.createElement(Block, {
      key: i,
      extend: {
        marginRight: "10px"
      }
    }, child);
  }));
};

var ButtonGroupLabel = function ButtonGroupLabel(_ref2) {
  var children = _ref2.children,
      props = _objectWithoutProperties(_ref2, ["children"]);

  return React.createElement(Block, _extends({}, props, {
    extend: _objectSpread({
      fontSize: "12px",
      width: "100px",
      textAlign: "right",
      paddingRight: "20px"
    }, props.extend)
  }), children);
};

storiesOf("Button", module).addDecorator(render).addDecorator(withBackgrounds(listOfLightBackgrounds)).addDecorator(withKnobs).addWithJSX("intent and variant", function () {
  return React.createElement(React.Fragment, null, React.createElement(ButtonGroup, null, React.createElement(ButtonGroupLabel, null, "Primary:"), React.createElement(Button, {
    intent: "primary",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    intent: "primary",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    intent: "primary",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      padding: "10px 0",
      background: "#000",
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, {
    extend: {
      color: "#fff"
    }
  }, "Primary Light:"), React.createElement(Button, {
    intent: "primary-light",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    intent: "primary-light",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    intent: "primary-light",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, null, "Secondary:"), React.createElement(Button, {
    intent: "secondary",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    intent: "secondary",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    intent: "secondary",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, null, "Destructive:"), React.createElement(Button, {
    intent: "destructive",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    intent: "destructive",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    intent: "destructive",
    variant: "text"
  }, "Text")));
}).addWithJSX("loading", function () {
  return React.createElement(React.Fragment, null, React.createElement(ButtonGroup, null, React.createElement(ButtonGroupLabel, null, "Primary:"), React.createElement(Button, {
    loading: true,
    intent: "primary",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    loading: true,
    intent: "primary",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    loading: true,
    intent: "primary",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      padding: "10px 0",
      background: "#000",
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, {
    extend: {
      color: "#fff"
    }
  }, "Primary Light:"), React.createElement(Button, {
    loading: true,
    intent: "primary-light",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    loading: true,
    intent: "primary-light",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    loading: true,
    intent: "primary-light",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, null, "Secondary:"), React.createElement(Button, {
    loading: true,
    intent: "secondary",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    loading: true,
    intent: "secondary",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    loading: true,
    intent: "secondary",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, null, "Destructive:"), React.createElement(Button, {
    loading: true,
    intent: "destructive",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    loading: true,
    intent: "destructive",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    loading: true,
    intent: "destructive",
    variant: "text"
  }, "Text")));
}).addWithJSX("disabled", function () {
  return React.createElement(React.Fragment, null, React.createElement(ButtonGroup, null, React.createElement(ButtonGroupLabel, null, "Primary:"), React.createElement(Button, {
    disabled: true,
    intent: "primary",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    disabled: true,
    intent: "primary",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    disabled: true,
    intent: "primary",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      padding: "10px 0",
      background: "#000",
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, {
    extend: {
      color: "#fff"
    }
  }, "Primary Light:"), React.createElement(Button, {
    disabled: true,
    intent: "primary-light",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    disabled: true,
    intent: "primary-light",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    disabled: true,
    intent: "primary-light",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, null, "Secondary:"), React.createElement(Button, {
    disabled: true,
    intent: "secondary",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    disabled: true,
    intent: "secondary",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    disabled: true,
    intent: "secondary",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, null, "Destructive:"), React.createElement(Button, {
    disabled: true,
    intent: "destructive",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    disabled: true,
    intent: "destructive",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    disabled: true,
    intent: "destructive",
    variant: "text"
  }, "Text")));
}).addWithJSX("with arrow", function () {
  return React.createElement(React.Fragment, null, React.createElement(ButtonGroup, null, React.createElement(ButtonGroupLabel, null, "Primary:"), React.createElement(Button, {
    arrow: "right",
    intent: "primary",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    arrow: "right",
    intent: "primary",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    arrow: "right",
    intent: "primary",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      padding: "10px 0",
      background: "#000",
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, {
    extend: {
      color: "#fff"
    }
  }, "Primary Light:"), React.createElement(Button, {
    arrow: "up",
    intent: "primary-light",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    arrow: "up",
    intent: "primary-light",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    arrow: "up",
    intent: "primary-light",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, null, "Secondary:"), React.createElement(Button, {
    arrow: "left",
    intent: "secondary",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    arrow: "left",
    intent: "secondary",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    arrow: "left",
    intent: "secondary",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, null, "Destructive:"), React.createElement(Button, {
    arrow: "down",
    intent: "destructive",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    arrow: "down",
    intent: "destructive",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    arrow: "down",
    intent: "destructive",
    variant: "text"
  }, "Text")));
}).addWithJSX("with Icon Before", function () {
  return React.createElement(React.Fragment, null, React.createElement(ButtonGroup, null, React.createElement(ButtonGroupLabel, null, "Primary:"), React.createElement(Button, {
    iconAfter: "search",
    intent: "primary",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    iconAfter: "search",
    intent: "primary",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    iconAfter: "search",
    intent: "primary",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      padding: "10px 0",
      background: "#000",
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, {
    extend: {
      color: "#fff"
    }
  }, "Primary Light:"), React.createElement(Button, {
    iconAfter: "search",
    intent: "primary-light",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    iconAfter: "search",
    intent: "primary-light",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    iconAfter: "search",
    intent: "primary-light",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, null, "Secondary:"), React.createElement(Button, {
    iconAfter: "search",
    intent: "secondary",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    iconAfter: "search",
    intent: "secondary",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    iconAfter: "search",
    intent: "secondary",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, null, "Destructive:"), React.createElement(Button, {
    iconAfter: "search",
    intent: "destructive",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    iconAfter: "search",
    intent: "destructive",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    iconAfter: "search",
    intent: "destructive",
    variant: "text"
  }, "Text")));
}).addWithJSX("with Icon after", function () {
  return React.createElement(React.Fragment, null, React.createElement(ButtonGroup, null, React.createElement(ButtonGroupLabel, null, "Primary:"), React.createElement(Button, {
    iconBefore: "search",
    intent: "primary",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    iconBefore: "search",
    intent: "primary",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    iconBefore: "search",
    intent: "primary",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      padding: "10px 0",
      background: "#000",
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, {
    extend: {
      color: "#fff"
    }
  }, "Primary Light:"), React.createElement(Button, {
    iconBefore: "search",
    intent: "primary-light",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    iconBefore: "search",
    intent: "primary-light",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    iconBefore: "search",
    intent: "primary-light",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, null, "Secondary:"), React.createElement(Button, {
    iconBefore: "search",
    intent: "secondary",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    iconBefore: "search",
    intent: "secondary",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    iconBefore: "search",
    intent: "secondary",
    variant: "text"
  }, "Text")), React.createElement(ButtonGroup, {
    extend: {
      marginTop: "10px"
    }
  }, React.createElement(ButtonGroupLabel, null, "Destructive:"), React.createElement(Button, {
    iconBefore: "search",
    intent: "destructive",
    variant: "default"
  }, "Default"), React.createElement(Button, {
    iconBefore: "search",
    intent: "destructive",
    variant: "outline"
  }, "Outline"), React.createElement(Button, {
    iconBefore: "search",
    intent: "destructive",
    variant: "text"
  }, "Text")));
}).addWithJSX("full width", function () {
  return React.createElement(React.Fragment, null, React.createElement(Block, null, React.createElement(Button, {
    variant: "outline"
  }, "Default behaviour on mobile")), React.createElement(Block, null, React.createElement(Button, {
    fullWidth: ["s", "m"]
  }, "Full width on small and medium")), React.createElement(Block, null, React.createElement(Button, {
    fullWidth: ["l", "s"],
    intent: "secondary"
  }, "Full width on large and small")), React.createElement(Block, null, React.createElement(Button, {
    fullWidth: false,
    intent: "destructive"
  }, "Full width on none")), React.createElement(Block, {
    extend: {
      marginBottom: "20px"
    }
  }, React.createElement(Button, {
    fullWidth: true
  }, "Full width on all viewports")), React.createElement(Button, null, "Some buttons"), React.createElement(Button, {
    variant: "outline"
  }, "Next to"), React.createElement(Button, null, "Each"), React.createElement(Button, null, "Other"), React.createElement(Button, null, "\u0633\u0644\u0627\u0645"));
}).addWithJSX("with theme", function () {
  var label = "Custom theme";
  var defaultValue = {
    button: {
      background: "magenta"
    }
  };
  var defaultThemePropsConfig = object(label, defaultValue);
  return React.createElement(ThemeProvider, {
    theme: defaultThemePropsConfig
  }, React.createElement(React.Fragment, null, React.createElement(Block, null, React.createElement(Button, {
    intent: "secondary",
    variant: "default"
  }, "Default with theme"))));
}).addWithJSX("with theme and media queries", function () {
  var _button;

  var label = "Custom theme for media queries";
  var defaultValue = {
    button: (_button = {}, _defineProperty(_button, BREAKPOINTS.onS, {
      background: "blue"
    }), _defineProperty(_button, BREAKPOINTS.onM, {
      background: "orange"
    }), _defineProperty(_button, BREAKPOINTS.onL, {
      background: "magenta"
    }), _button)
  };
  var defaultThemePropsConfig = object(label, defaultValue);
  return React.createElement(ThemeProvider, {
    theme: defaultThemePropsConfig
  }, React.createElement(React.Fragment, null, React.createElement(Block, null, React.createElement(Button, {
    intent: "secondary",
    variant: "default"
  }, "Default with theme and small viewport"))));
});