wix-style-react/dist/es/stories/BadgeSelect/index.story.js

wix-style-react

import React from 'react';
import BadgeSelect from 'wix-style-react/BadgeSelect';
import { SKIN, TYPE, SIZE } from 'wix-ui-backoffice/dist/src/components/Badge/constants';
import { storySettings } from './storySettings';

import CodeExample from 'wix-storybook-utils/CodeExample';
import ControlledComponentExample from './ControlledComponentExample';
import ControlledComponentExampleRaw from '!raw-loader!./ControlledComponentExample';

var options = Object.values(SKIN).map(function (skin, id) {
  return {
    id: id.toString(),
    skin: skin,
    text: skin
  };
});

// Centering the component since the DropdownLayout is centerized and overflows
// the AutoExample container. In eyes test, the overflowed part will be cut off.
var CenterBadgeSelect = function CenterBadgeSelect(props) {
  return React.createElement(
    'div',
    {
      style: {
        display: 'flex',
        justifyContent: 'center'
      }
    },
    React.createElement(BadgeSelect, props)
  );
};

CenterBadgeSelect.displayName = BadgeSelect.displayName;

export default {
  category: storySettings.kind,
  storyName: storySettings.storyName,

  component: CenterBadgeSelect,
  componentPath: '../../src/BadgeSelect',

  componentProps: function componentProps(setState) {
    return {
      dataHook: storySettings.dataHook,
      options: options,
      selectedId: '0',
      onSelect: function onSelect(_ref) {
        var id = _ref.id;
        return setState({ selectedId: id });
      },
      uppercase: true
    };
  },

  exampleProps: {
    selectedId: options.map(function (_ref2) {
      var id = _ref2.id;
      return id;
    }),
    options: [{ label: 'All badges', value: options }],
    type: Object.keys(TYPE),
    size: Object.keys(SIZE)
  },
  examples: React.createElement(
    CodeExample,
    {
      title: 'Controlled component can interrupt changes',
      code: ControlledComponentExampleRaw
    },
    React.createElement(ControlledComponentExample, null)
  )
};