vcc-ui/lib/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.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _index = require("../../index");

var _addonBackgrounds = require("@storybook/addon-backgrounds");

var _addonKnobs = require("@storybook/addon-knobs");

var _render = require("../../../stories/render");

var _themeProvider = require("../../theme-provider");

var _breakpoints = require("../../constants/breakpoints");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

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.default.createElement(_index.Block, _extends({}, props, {
    extend: _objectSpread({
      display: "flex",
      alignItems: "center"
    }, props.extend)
  }), children.map(function (child, i) {
    return _react.default.createElement(_index.Block, {
      key: i,
      extend: {
        marginRight: "10px"
      }
    }, child);
  }));
};

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

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

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