import React from 'react';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import LabelValuePair from './LabelValuePair';
import LabelValuePairGroup from './LabelValuePairGroup';
import Badge from '../badge';
import Link from '../link';
import { IconBuildingSmallOutline } from '@teamleader/ui-icons';
import { TextBodyCompact } from '../typography';
export default {
  component: LabelValuePair,
  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'LabelValuePair'),
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/LHH25GN90ljQaBEUNMsdJn/Desktop-components?node-id=3469%3A366'
    }
  }
};
export var DefaultStory = function DefaultStory(args) {
  return /*#__PURE__*/React.createElement(LabelValuePair, args, /*#__PURE__*/React.createElement(LabelValuePair.Label, null, "I am a label"), /*#__PURE__*/React.createElement(LabelValuePair.Value, null, /*#__PURE__*/React.createElement(TextBodyCompact, {
    color: "teal"
  }, "with a value next to it")));
};
DefaultStory.storyName = 'LabelValuePair';
DefaultStory.args = {
  inline: true
};
export var labelValuePairGroup = function labelValuePairGroup(args) {
  return /*#__PURE__*/React.createElement(LabelValuePairGroup, args, /*#__PURE__*/React.createElement(LabelValuePair, null, /*#__PURE__*/React.createElement(LabelValuePair.Label, null, "I am a label"), /*#__PURE__*/React.createElement(LabelValuePair.Value, null, /*#__PURE__*/React.createElement(TextBodyCompact, {
    color: "teal"
  }, "With just a textual value"))), /*#__PURE__*/React.createElement(LabelValuePair, null, /*#__PURE__*/React.createElement(LabelValuePair.Label, null, "Another label, but a very long one this time"), /*#__PURE__*/React.createElement(LabelValuePair.Value, {
    paddingVertical: 0
  }, /*#__PURE__*/React.createElement(Badge, {
    icon: /*#__PURE__*/React.createElement(IconBuildingSmallOutline, null),
    size: "medium"
  }, "With a Company Badge"))), /*#__PURE__*/React.createElement(LabelValuePair, null, /*#__PURE__*/React.createElement(LabelValuePair.Label, null, "Here comes a money value"), /*#__PURE__*/React.createElement(LabelValuePair.Value, null, /*#__PURE__*/React.createElement(TextBodyCompact, {
    color: "teal"
  }, "\u20AC22.359"))), /*#__PURE__*/React.createElement(LabelValuePair, null, /*#__PURE__*/React.createElement(LabelValuePair.Label, null, "E-mail"), /*#__PURE__*/React.createElement(LabelValuePair.Value, null, /*#__PURE__*/React.createElement(TextBodyCompact, {
    maxLines: 1
  }, /*#__PURE__*/React.createElement(Link, {
    href: "mailto:john.doe@gmail.com",
    inherit: false,
    onClick: function onClick() {
      return console.log('Clicked on email link');
    },
    title: "john.doe@gmail.com"
  }, "john.doe@gmail.com")))), /*#__PURE__*/React.createElement(LabelValuePair, null, /*#__PURE__*/React.createElement(LabelValuePair.Label, null, "Homepage"), /*#__PURE__*/React.createElement(LabelValuePair.Value, null, /*#__PURE__*/React.createElement(TextBodyCompact, {
    maxLines: 1
  }, /*#__PURE__*/React.createElement(Link, {
    href: "https://www.a-very-long-url-to-this-website",
    inherit: false,
    title: "https://www.a-very-long-url-to-this-website"
  }, "https://www.a-very-long-url-to-this-website")))));
};
labelValuePairGroup.storyName = 'LabelValuePairGroup';
labelValuePairGroup.args = {
  title: "I'm a label pair group"
};