import React from 'react';
import styled from 'styled-components';
import { IntlProvider } from 'react-intl';
import docs from './AllocationBar.mdx';
import AllocationBar from './AllocationBar';
var StyledContainer = styled.div.withConfig({
  displayName: "AllocationBarstories__StyledContainer",
  componentId: "sc-1kqxyrn-0"
})(["width:100%;height:100vh;padding:12px;box-sizing:border-box;"]);
export default {
  title: 'Molecules / Allocation Bar',
  parameters: {
    docs: {
      page: docs
    },
    component: AllocationBar
  }
};
export var BasicAllocationBar = {
  render: function render() {
    var mockedAllocations = [{
      label: 'ETFs',
      color: function color(t) {
        return t.color.allocationBarLightBlue;
      },
      weight: 20
    }, {
      label: 'Funds',
      color: function color(t) {
        return t.color.allocationBarDarkBlue;
      },
      weight: 80
    }];
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(StyledContainer, null, React.createElement(AllocationBar, {
      allocations: mockedAllocations
    })));
  },
  name: 'Basic usage'
};