import React from 'react';
import markdown from './README.mdx';
import Text from '.';
import Link from '../Link';
import { List, ListItem } from '../List';
export default {
  title: 'Components/UI Elements/Text',
  component: Text,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown
  }
};
export var Regular = function Regular(args) {
  return /*#__PURE__*/React.createElement(Text, args);
};
Regular.decorators = [function (Story) {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      borderTop: '1px solid #EFEFEF',
      borderBottom: '2px solid #EFEFEF'
    }
  }, /*#__PURE__*/React.createElement(Story, null));
}];
Regular.args = {
  children: 'Content',
  kind: 'h1'
};
var headingText = [{
  kind: 'h1',
  text: 'Heading 1',
  styling: '29px, SemiBold'
}, {
  kind: 'h2',
  text: 'Heading 2',
  styling: '25px, SemiBold'
}, {
  kind: 'h3',
  text: 'Heading 3',
  styling: '22px, SemiBold'
}, {
  kind: 'h4',
  text: 'Heading 4',
  styling: '20px, SemiBold'
}, {
  kind: 'h5',
  text: 'Heading 5',
  styling: '18px, SemiBold'
}, {
  kind: 'h6',
  text: 'Heading 6',
  styling: '16px, SemiBold'
}];
export var Headings = function Headings(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, headingText.map(function (e) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
      kind: e.kind
    }, e.text), /*#__PURE__*/React.createElement("div", {
      style: {
        color: '#A9A9A9',
        marginBottom: '2rem'
      }
    }, e.styling));
  }));
};
var Normaltext = [{
  kind: 'p',
  text: 'Body copy, paragraph',
  styling: '16px, Regular'
}, {
  kind: 'p',
  text: 'Label (form)',
  styling: '14px, SemiBold'
}, {
  kind: 'code',
  text: 'Code',
  styling: 'Monospace, 16px, Regular'
}, {
  kind: 'sup',
  text: 'Sup',
  styling: '11px, Regular'
}, {
  kind: 'inline-highlight',
  text: 'Inline highlight',
  styling: '14px, SemiBold'
}];
export var text = function text(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, Normaltext.map(function (e) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
      kind: e.kind
    }, e.text), /*#__PURE__*/React.createElement("div", {
      style: {
        color: '#A9A9A9',
        marginBottom: '2rem'
      }
    }, e.styling));
  }));
};
export var pagetitle = function pagetitle(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
    kind: "title"
  }, "Title"), /*#__PURE__*/React.createElement("div", {
    style: {
      color: '#A9A9A9',
      marginBottom: '2rem'
    }
  }, "58px, Light"), /*#__PURE__*/React.createElement(Text, {
    kind: "subtitle"
  }, "Overline"), /*#__PURE__*/React.createElement("div", {
    style: {
      color: '#A9A9A9',
      marginBottom: '2rem'
    }
  }, "14px, SemiBold"));
};
export var links = function links(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
    kind: "a"
  }, "Link"), /*#__PURE__*/React.createElement("div", {
    style: {
      color: '#A9A9A9',
      marginBottom: '2rem'
    }
  }, "16px, Regular"), /*#__PURE__*/React.createElement(Link, {
    className: "wfp--link--hover"
  }, "Link"), /*#__PURE__*/React.createElement("div", {
    style: {
      color: '#A9A9A9',
      marginBottom: '2rem'
    }
  }, "16px, Regular"));
};
var emphasisText = [{
  kind: 'strong',
  text: 'Bold',
  styling: '16px, Bold'
}, {
  kind: 'bold',
  text: 'SemiBold',
  styling: '16px, SemiBold'
}, {
  kind: 'i',
  text: 'Italic',
  styling: '16px, Italic'
}];
export var Emphasis = function Emphasis(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, emphasisText.map(function (e) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
      kind: e.kind
    }, e.text), /*#__PURE__*/React.createElement("div", {
      style: {
        color: '#A9A9A9',
        marginBottom: '2rem'
      }
    }, e.styling));
  }));
};
var list = [{
  kind: 'simple',
  heading: 'Ordered lists'
}, {
  kind: 'bullets',
  heading: 'Bullet lists'
}, {
  kind: 'ordered',
  heading: 'Unordered lists'
}];
export var Lists = function Lists(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, list.map(function (e) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
      kind: "h4"
    }, e.heading), /*#__PURE__*/React.createElement(List, {
      kind: e.kind
    }, /*#__PURE__*/React.createElement(ListItem, null, "Numbered List 1"), /*#__PURE__*/React.createElement(ListItem, null, "Numbered List 2"), /*#__PURE__*/React.createElement(ListItem, null, "Numbered List 3")), /*#__PURE__*/React.createElement("div", {
      style: {
        color: '#A9A9A9',
        marginBottom: '2rem'
      }
    }, "16px, Regular"));
  }));
};
var colors = [{
  color: '#031C2D',
  text: '#text-01'
}, {
  color: '#5A6872',
  text: '#text-02'
}, {
  color: '#DFE6EB',
  text: '#text-03'
}];
export var textColors = function textColors(args) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, colors.map(function (e) {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex'
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, e.text), /*#__PURE__*/React.createElement("div", {
      style: {
        color: '#A9A9A9',
        marginBottom: '3rem'
      }
    }, "16px, ", e.color)), /*#__PURE__*/React.createElement("div", {
      style: {
        backgroundColor: e.color,
        width: '50px',
        height: '50px',
        borderRadius: '50%',
        marginLeft: '1.5rem'
      }
    }));
  }));
};