import React from 'react';
import styled from 'styled-components';
import { Box, Flexbox } from '../..';
import docs from './BarScale.mdx';
import BarScale from '.';
export default {
  title: 'Molecules / BarScale',
  parameters: {
    docs: {
      page: docs
    }
  }
};
export var BarScaleNormal = function BarScaleNormal() {
  return React.createElement(BarScale, {
    value: 6,
    max: 7
  });
};
export var DoubleBarScale = function DoubleBarScale() {
  return React.createElement(React.Fragment, null, React.createElement(BarScale, {
    value: 6,
    max: 7
  }), React.createElement("h2", null, "Max of 6"), React.createElement(BarScale, {
    value: 2,
    max: 6
  }));
};
export var BarScaleWithXAxis = function BarScaleWithXAxis() {
  return React.createElement(BarScale, {
    value: 6,
    axisLabel: React.createElement(Flexbox, {
      container: true,
      justifyContent: "space-between"
    }, React.createElement(Flexbox, {
      item: true
    }, "Low"), React.createElement(Flexbox, {
      item: true
    }, "Medium"), React.createElement(Flexbox, {
      item: true
    }, "High"))
  });
};
var RiskMeterBox = styled(Box).withConfig({
  displayName: "BarScalestories__RiskMeterBox",
  componentId: "sc-vcwt1c-0"
})(["width:", "px;"], function (p) {
  return p.theme.spacing.unit(13.5);
});
export var BarScaleAsRiskMeter = function BarScaleAsRiskMeter() {
  return React.createElement(RiskMeterBox, null, "Risk", React.createElement(BarScale, {
    value: 4,
    barHeight: 4,
    gutter: 0.5
  }));
};