@salesforce/design-system-react/module/components/button/__docs__/storybook-stories.js

Salesforce Lightning Design System for React

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(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 _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); }

/* eslint-disable react/display-name */
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import IconSettings from '../../icon-settings';
import { BUTTON } from '../../../utilities/constants';
import Button from '../../button';
import BaseNeutral from '../__examples__/base-neutral';
import BrandDisabled from '../__examples__/brand-disabled-destructive-inverse';
import ButtonIcons from '../__examples__/button-icons';

var getButton = function getButton(props) {
  return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
    onClick: action('click')
  }));
};

var getIconButton = function getIconButton(props) {
  return getButton(_objectSpread({
    variant: 'icon'
  }, props));
};

var blueBackground = function blueBackground(getStory) {
  return /*#__PURE__*/React.createElement("div", {
    className: "slds-hint-parent",
    style: {
      backgroundColor: '#16325c'
    }
  }, getStory());
};

storiesOf(BUTTON, module).addDecorator(function (getStory) {
  return /*#__PURE__*/React.createElement("div", {
    className: "slds-p-around_medium"
  }, /*#__PURE__*/React.createElement(IconSettings, {
    iconPath: "/assets/icons"
  }, getStory()));
}).add('Base', function () {
  return getButton({
    label: 'Base',
    variant: 'base'
  });
}).add('Aria attribute', function () {
  return getButton({
    label: 'Base',
    'aria-label': 'Base',
    variant: 'base'
  });
}).add('Data attribute', function () {
  return getButton({
    label: 'Base',
    'data-some-property': 'Some value',
    variant: 'base'
  });
}).add('Neutral', function () {
  return getButton({
    label: 'Neutral'
  });
}).add('Neutral with id', function () {
  return getButton({
    label: 'Neutral',
    id: 'custom-id'
  });
}).add('Neutral Icon', function () {
  return getButton({
    label: 'Neutral Icon',
    iconCategory: 'utility',
    iconName: 'download',
    iconPosition: 'left',
    onFocus: action('focus'),
    onKeyDown: action('keyDown')
  });
}).add('Disabled', function () {
  return getButton({
    label: 'Disabled',
    disabled: true
  });
}).add('Icon large', function () {
  return getIconButton({
    assistiveText: {
      icon: 'Icon'
    },
    iconSize: 'large',
    iconCategory: 'utility',
    iconName: 'answer',
    title: 'chat'
  });
}).add('Icon with external path', function () {
  return getIconButton({
    assistiveText: {
      icon: 'Icon'
    },
    iconSize: 'large',
    iconPath: '/assets/icons/utility-sprite/svg/symbols.svg#announcement',
    title: 'announcement'
  });
}).add('Small Icon Hint inverse', function () {
  return getIconButton({
    assistiveText: {
      icon: 'Hint'
    },
    iconCategory: 'utility',
    iconName: 'down',
    iconVariant: 'border',
    iconSize: 'small',
    hint: true,
    inverse: true
  });
}, {
  decorators: [blueBackground]
}).add('Icon Container Small', function () {
  return getIconButton({
    assistiveText: {
      icon: 'Icon border container small'
    },
    iconCategory: 'utility',
    iconName: 'settings',
    iconSize: 'large',
    iconVariant: 'border',
    inverse: true
  });
}, {
  decorators: [blueBackground]
}).add('Dropdown Icon inverse', function () {
  return getIconButton({
    'aria-haspopup': true,
    assistiveText: {
      icon: 'Dropdown Icon inverse'
    },
    iconCategory: 'utility',
    iconName: 'settings',
    iconVariant: 'more',
    inverse: true
  });
}, {
  decorators: [blueBackground]
}).add('Outline brand button', function () {
  return getButton({
    label: 'Outline brand button',
    variant: 'outline-brand'
  });
}, {
  decorators: [blueBackground]
}).add('Doc site Base Neutral', function () {
  return /*#__PURE__*/React.createElement(BaseNeutral, null);
}).add('Doc site Brand Disabled', function () {
  return /*#__PURE__*/React.createElement(BrandDisabled, null);
}).add('Doc site Button Icons', function () {
  return /*#__PURE__*/React.createElement(ButtonIcons, null);
});
//# sourceMappingURL=storybook-stories.js.map