"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.textColors = exports.Lists = exports.Emphasis = exports.links = exports.pagetitle = exports.text = exports.Headings = exports.Regular = exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _README = _interopRequireDefault(require("./README.mdx"));

var _ = _interopRequireDefault(require("."));

var _Link = _interopRequireDefault(require("../Link"));

var _List = require("../List");

var _default = {
  title: 'Components/UI Elements/Text',
  component: _.default,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: _README.default
  }
};
exports.default = _default;

var Regular = function Regular(args) {
  return /*#__PURE__*/_react.default.createElement(_.default, args);
};

exports.Regular = Regular;
Regular.decorators = [function (Story) {
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      borderTop: '1px solid #EFEFEF',
      borderBottom: '2px solid #EFEFEF'
    }
  }, /*#__PURE__*/_react.default.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'
}];

var Headings = function Headings(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headingText.map(function (e) {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
      kind: e.kind
    }, e.text), /*#__PURE__*/_react.default.createElement("div", {
      style: {
        color: '#A9A9A9',
        marginBottom: '2rem'
      }
    }, e.styling));
  }));
};

exports.Headings = Headings;
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'
}];

var text = function text(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Normaltext.map(function (e) {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
      kind: e.kind
    }, e.text), /*#__PURE__*/_react.default.createElement("div", {
      style: {
        color: '#A9A9A9',
        marginBottom: '2rem'
      }
    }, e.styling));
  }));
};

exports.text = text;

var pagetitle = function pagetitle(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
    kind: "title"
  }, "Title"), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      color: '#A9A9A9',
      marginBottom: '2rem'
    }
  }, "58px, Light"), /*#__PURE__*/_react.default.createElement(_.default, {
    kind: "subtitle"
  }, "Overline"), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      color: '#A9A9A9',
      marginBottom: '2rem'
    }
  }, "14px, SemiBold"));
};

exports.pagetitle = pagetitle;

var links = function links(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
    kind: "a"
  }, "Link"), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      color: '#A9A9A9',
      marginBottom: '2rem'
    }
  }, "16px, Regular"), /*#__PURE__*/_react.default.createElement(_Link.default, {
    className: "wfp--link--hover"
  }, "Link"), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      color: '#A9A9A9',
      marginBottom: '2rem'
    }
  }, "16px, Regular"));
};

exports.links = links;
var emphasisText = [{
  kind: 'strong',
  text: 'Bold',
  styling: '16px, Bold'
}, {
  kind: 'bold',
  text: 'SemiBold',
  styling: '16px, SemiBold'
}, {
  kind: 'i',
  text: 'Italic',
  styling: '16px, Italic'
}];

var Emphasis = function Emphasis(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, emphasisText.map(function (e) {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
      kind: e.kind
    }, e.text), /*#__PURE__*/_react.default.createElement("div", {
      style: {
        color: '#A9A9A9',
        marginBottom: '2rem'
      }
    }, e.styling));
  }));
};

exports.Emphasis = Emphasis;
var list = [{
  kind: 'simple',
  heading: 'Ordered lists'
}, {
  kind: 'bullets',
  heading: 'Bullet lists'
}, {
  kind: 'ordered',
  heading: 'Unordered lists'
}];

var Lists = function Lists(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, list.map(function (e) {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
      kind: "h4"
    }, e.heading), /*#__PURE__*/_react.default.createElement(_List.List, {
      kind: e.kind
    }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Numbered List 1"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Numbered List 2"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Numbered List 3")), /*#__PURE__*/_react.default.createElement("div", {
      style: {
        color: '#A9A9A9',
        marginBottom: '2rem'
      }
    }, "16px, Regular"));
  }));
};

exports.Lists = Lists;
var colors = [{
  color: '#031C2D',
  text: '#text-01'
}, {
  color: '#5A6872',
  text: '#text-02'
}, {
  color: '#DFE6EB',
  text: '#text-03'
}];

var textColors = function textColors(args) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colors.map(function (e) {
    return /*#__PURE__*/_react.default.createElement("div", {
      style: {
        display: 'flex'
      }
    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.default, null, e.text), /*#__PURE__*/_react.default.createElement("div", {
      style: {
        color: '#A9A9A9',
        marginBottom: '3rem'
      }
    }, "16px, ", e.color)), /*#__PURE__*/_react.default.createElement("div", {
      style: {
        backgroundColor: e.color,
        width: '50px',
        height: '50px',
        borderRadius: '50%',
        marginLeft: '1.5rem'
      }
    }));
  }));
};

exports.textColors = textColors;