import React from 'react';
import { addStoryInGroup, FOUNDATION } from '../../../.storybook/utils';
import { Heading1, Heading2, Heading3, Heading4, Heading5, Marker, Monospaced, TextBody, TextBodyCompact, TextDisplay, TextSmall, UITextBody, UITextDisplay, UITextSmall } from '../../index';
export default {
  component: Heading1,
  title: addStoryInGroup(FOUNDATION, 'Typography')
};
var color = 'teal';
var maxLines = undefined;
var tint = 'darkest';
export var headings = function headings() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading1, {
    color: color,
    maxLines: maxLines,
    tint: tint
  }, "Heading 1 / font-size: 24px / line-height: 30px / weight: bold (700) / tracking: 0"), /*#__PURE__*/React.createElement(Heading2, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 4
  }, "Heading 2 / font-size: 18px / line-height: 24px / weight: medium (500) / tracking: 0"), /*#__PURE__*/React.createElement(Heading3, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 4
  }, "Heading 3 / font-size: 16px / line-height: 21px / weight: medium (500) / tracking: 0"), /*#__PURE__*/React.createElement(Heading4, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 4
  }, "Heading 4 / font-size: 12px / line-height: 18px / weight: bold (700) / tracking: 0.6px"), /*#__PURE__*/React.createElement(Heading5, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 4
  }, "Heading 5 / font-size: 14px / line-height: 18px / weight: semi bold (600) / tracking: 0"));
};
export var text = function text() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextDisplay, {
    color: color,
    maxLines: maxLines,
    tint: tint
  }, /*#__PURE__*/React.createElement("strong", null, "Text display"), " / font-size: 16px / line-height: 24px / weight: regular (400) / tracking: 0"), /*#__PURE__*/React.createElement(TextBody, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 4
  }, /*#__PURE__*/React.createElement("strong", null, "Text body"), " / font-size: 14px / line-height: 21px / weight: regular (400) / tracking: 0"), /*#__PURE__*/React.createElement(TextBodyCompact, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 4
  }, /*#__PURE__*/React.createElement("strong", null, "Text body compact"), " / font-size: 14px / line-height: 18px / weight: regular (400) / tracking: 0"), /*#__PURE__*/React.createElement(TextSmall, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 4
  }, /*#__PURE__*/React.createElement("strong", null, "Text small"), " / font-size: 12px / line-height: 18px / weight: regular (400) / tracking: 0"));
};
export var UIText = function UIText() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UITextDisplay, {
    color: color,
    maxLines: maxLines,
    tint: tint
  }, /*#__PURE__*/React.createElement("strong", null, "UI Text display"), " / font-size: 16px / line-height: 24px / weight: medium (500) / tracking: 0"), /*#__PURE__*/React.createElement(UITextBody, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 4
  }, /*#__PURE__*/React.createElement("strong", null, "UI Text body"), " / font-size: 14px / line-height: 18px / weight: medium (500) / tracking: 0"), /*#__PURE__*/React.createElement(UITextSmall, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 4
  }, /*#__PURE__*/React.createElement("strong", null, "UIText small"), " / font-size: 12px / line-height: 18px / weight: medium (500) / tracking: 0"));
};
export var monospaced = function monospaced() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading1, {
    color: color,
    maxLines: maxLines,
    tint: tint
  }, /*#__PURE__*/React.createElement(Monospaced, null, "1234567890")), /*#__PURE__*/React.createElement(Heading2, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 2
  }, /*#__PURE__*/React.createElement(Monospaced, null, "1234567890")), /*#__PURE__*/React.createElement(Heading3, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 2
  }, /*#__PURE__*/React.createElement(Monospaced, null, "1234567890")), /*#__PURE__*/React.createElement(Heading4, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 2
  }, /*#__PURE__*/React.createElement(Monospaced, null, "1234567890")), /*#__PURE__*/React.createElement(Heading5, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 2
  }, /*#__PURE__*/React.createElement(Monospaced, null, "1234567890")), /*#__PURE__*/React.createElement(TextDisplay, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 6
  }, /*#__PURE__*/React.createElement(Monospaced, null, "1234567890")), /*#__PURE__*/React.createElement(TextBody, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 2
  }, /*#__PURE__*/React.createElement(Monospaced, null, "1234567890")), /*#__PURE__*/React.createElement(TextSmall, {
    color: color,
    maxLines: maxLines,
    tint: tint,
    marginTop: 2
  }, /*#__PURE__*/React.createElement(Monospaced, null, "1234567890")));
};
export var marker = function marker() {
  return /*#__PURE__*/React.createElement(Heading3, {
    color: color,
    tint: tint
  }, "We can use our ", /*#__PURE__*/React.createElement(Marker, null, "Marker component"), " to highlight some keywords");
};
marker.parameters = {
  info: {
    propTables: [Marker]
  }
};