import React from 'react';
import { IntlProvider } from 'react-intl';
import { Pill } from './Pill';
import docs from './Pill.mdx';
import { Button, Flexbox, OldIcon, Typography } from '../..';
export default {
  title: 'Atoms / Pill',
  parameters: {
    docs: {
      page: docs
    },
    component: Pill
  }
};
export var BasicPill = {
  render: function render() {
    return React.createElement(Pill, null, React.createElement(Typography, {
      type: "tertiary",
      weight: "bold"
    }, "OMXS30"), ' ', React.createElement(Typography, {
      type: "tertiary"
    }, "1567"));
  }
};
export var RoundedPill = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Pill.Rounded, {
      label: "OMXS30",
      color: function color(t) {
        return t.color.cta;
      },
      development: 20.455,
      onClose: function onClose() {}
    }));
  }
};
export var PillWithBar = {
  render: function render() {
    return React.createElement(Pill, {
      barColor: function barColor(t) {
        return t.color.cta;
      }
    }, React.createElement(Flexbox, {
      container: true,
      gap: 1,
      alignItems: "center"
    }, React.createElement(Flexbox, {
      item: true
    }, React.createElement(Button, {
      type: "button",
      variant: "neutral"
    }, React.createElement(Typography, {
      type: "tertiary",
      weight: "bold"
    }, "Bollinger"), ' ', React.createElement(Typography, {
      type: "tertiary"
    }, "1234"))), React.createElement(Flexbox, {
      item: true
    }, React.createElement(Button, {
      type: "button",
      variant: "neutral"
    }, React.createElement(OldIcon.CrossThin, {
      size: 2
    })))));
  },
  name: 'Pill with colored bar'
};
export var PillWithNoPadding = {
  render: function render() {
    return React.createElement(Pill, {
      barColor: function barColor(t) {
        return t.color.background;
      },
      noPadding: true
    }, React.createElement(Typography, {
      type: "tertiary",
      weight: "bold"
    }, "OMXS30"), ' ', React.createElement(Typography, {
      type: "tertiary"
    }, "1567"));
  },
  name: 'Pill with no padding'
};