import React from 'react';
import { IntlProvider } from 'react-intl';
import LabeledValue from './index';
import { Development, Flexbox, Number, Typography } from '../..';
export default {
  title: 'Molecules / LabeledValue'
};
export var DefaultStory = {
  render: function render() {
    return React.createElement(LabeledValue, {
      label: "Label"
    }, "Value");
  },
  name: 'Default',
  parameters: {
    component: LabeledValue
  }
};
export var IntegrationLabeledValueSecondaryCurrency = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(LabeledValue, {
      label: "Market value"
    }, React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, React.createElement(Number, {
      value: 4672198,
      currency: "SEK"
    }))));
  },
  name: 'Integration: LabeledValue secondary currency'
};
export var IntegrationLabeledValueTitle1 = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(LabeledValue, {
      label: "Holdings (SEK)"
    }, React.createElement(Typography, {
      type: "title1"
    }, React.createElement(Number, {
      value: 4713119
    }))));
  },
  name: 'Integration: LabeledValue title1'
};
export var IntegrationLabeledValueWithPositiveDevelopmentAndCurrency = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(LabeledValue, {
      label: "Development this year"
    }, React.createElement(Flexbox, {
      container: true,
      direction: "row",
      gap: 2
    }, React.createElement(Flexbox, {
      item: true
    }, React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, React.createElement(Development, {
      value: 9.2,
      icon: true,
      percentage: true
    }))), React.createElement(Flexbox, {
      item: true
    }, React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, React.createElement(Number, {
      sign: true,
      value: 4672198,
      currency: "SEK"
    }))))));
  },
  name: 'Integration: LabeledValue with positive development and currency'
};
export var IntegrationLabeledValueWithNegativeDevelopmentAndCurrency = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(LabeledValue, {
      label: "Development this year"
    }, React.createElement(Flexbox, {
      container: true,
      direction: "row",
      gap: 2
    }, React.createElement(Flexbox, {
      item: true
    }, React.createElement(Typography, {
      type: "secondary"
    }, React.createElement(Development, {
      value: -9.2,
      icon: true,
      percentage: true
    }))), React.createElement(Flexbox, {
      item: true
    }, React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, React.createElement(Number, {
      sign: true,
      value: -4672198,
      currency: "SEK"
    }))))));
  },
  name: 'Integration: LabeledValue with negative development and currency'
};
export var IntegrationLabeledValueWithCustomTitle = {
  render: function render() {
    return React.createElement(LabeledValue, {
      label: React.createElement(Typography, {
        type: "tertiary"
      }, "Foo")
    }, React.createElement(Typography, {
      type: "tertiary",
      weight: "bold"
    }, "Bar"));
  },
  name: 'Integration: LabeledValue with custom title'
};