import React from 'react';
import { styled } from 'styled-components';
import { Box, Text } from '../../index.js';
import { Caption, CardTitle, SmallText, H1, H2, H3, H4, H5, Header } from './index.js';
import { Button } from '../button/index.js';
import StoryWrapper from '../../utils/story-wrapper.js';
const BoxWithPaddings = styled(Box).withConfig({
  displayName: "typographystories__BoxWithPaddings",
  componentId: "sc-nx2it4-0"
})(["background:rgba(66,104,246,.3);& > *{background:#fff;}& > ", "{height:60px;}"], Text);
export const Headers = () => /*#__PURE__*/React.createElement(StoryWrapper, {
  label: "Headers with paddings"
}, /*#__PURE__*/React.createElement(BoxWithPaddings, {
  bg: "white"
}, /*#__PURE__*/React.createElement("div", {
  style: {
    height: 0,
    opacity: 0
  }
}, "div"), /*#__PURE__*/React.createElement(Header.H1, null, "H1 Header - 40"), /*#__PURE__*/React.createElement(Text, {
  variant: "sm",
  mb: 5
}, "Roboto 40 - line height - 40"), /*#__PURE__*/React.createElement(Header.H2, null, "H2 Header - 32"), /*#__PURE__*/React.createElement(Text, {
  variant: "sm",
  mb: 5
}, "Roboto 32 - line height - 40"), /*#__PURE__*/React.createElement(Header.H3, null, "H3 Header - 28"), /*#__PURE__*/React.createElement(Text, {
  variant: "sm",
  mb: 5
}, "Roboto 28 - line height - 32"), /*#__PURE__*/React.createElement(Header.H4, null, "H4 Header - 24"), /*#__PURE__*/React.createElement(Text, {
  variant: "sm",
  mb: 5
}, "Roboto 24 - line height - 32"), /*#__PURE__*/React.createElement(Header.H5, null, "H5 Header - 18"), /*#__PURE__*/React.createElement(Text, {
  variant: "sm",
  mb: 5
}, "Roboto 18 - line height - 24"), /*#__PURE__*/React.createElement(Header.H6, null, "H6 Header - 16"), /*#__PURE__*/React.createElement(Text, {
  variant: "sm",
  mb: 5
}, "Roboto 16 - line height - 24")));
const TextStory = props => /*#__PURE__*/React.createElement(StoryWrapper, {
  label: "Example Text container"
}, /*#__PURE__*/React.createElement(Text, props, "Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Est enim effectrix multarum et magnarum voluptatum. Omnia contraria, quos etiam insanos esse vultis. Quid, de quo nulla dissensio est? Egone quaeris, inquit, quid sentiam? Duo Reges: constructio interrete. Sed in rebus apertissimis nimium longi sumus.", /*#__PURE__*/React.createElement(Button, {
  as: "a"
}, "Button inside the text")));
export const ContentStory = () => /*#__PURE__*/React.createElement(StoryWrapper, {
  label: "Example styled content inside Text component"
}, /*#__PURE__*/React.createElement(Box, {
  p: "x4"
}, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h1", null, "Hello World"), /*#__PURE__*/React.createElement("h2", null, "Some header 2"), /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel interdum mattis neque."), /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, "interdum mattis neque.")), /*#__PURE__*/React.createElement("h2", null, "Second level"), /*#__PURE__*/React.createElement("p", null, "Curabitur accumsan turpis pharetra ", /*#__PURE__*/React.createElement("strong", null, "augue tincidunt"), " blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl."), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "In fermentum leo eu lectus mollis, quis dictum mi aliquet."), /*#__PURE__*/React.createElement("li", null, "Morbi eu nulla lobortis, lobortis est in, fringilla felis."), /*#__PURE__*/React.createElement("li", null, "Aliquam nec felis in sapien venenatis viverra fermentum nec lectus."), /*#__PURE__*/React.createElement("li", null, "Ut non enim metus.")), /*#__PURE__*/React.createElement("blockquote", null, "And here it comes - the quote"), /*#__PURE__*/React.createElement("h5", null, "Header H5"), /*#__PURE__*/React.createElement("pre", null, "const a = 1;", '\n', "const b = 0;"), /*#__PURE__*/React.createElement("p", null, "And below there is a Table"), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Name"), /*#__PURE__*/React.createElement("th", null, "Surname"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Wojtek"), /*#__PURE__*/React.createElement("td", null, "Krysiak")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Joseph"), /*#__PURE__*/React.createElement("td", null, "Grad")))), /*#__PURE__*/React.createElement("p", null, "text goes on..."))));
export { TextStory as Text };
export const Example = () => /*#__PURE__*/React.createElement(StoryWrapper, {
  label: "Example content page"
}, /*#__PURE__*/React.createElement(Box, {
  p: "x4",
  bg: "white"
}, /*#__PURE__*/React.createElement(H1, null, "H1. Nam de isto magna dissensio est."), /*#__PURE__*/React.createElement(H2, null, "H2. Sed in rebus apertissimis nimium"), /*#__PURE__*/React.createElement(Text, null, "Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Est enim effectrix multarum et magnarum voluptatum. Omnia contraria, quos etiam insanos esse vultis. Quid, de quo nulla dissensio est? Egone quaeris, inquit, quid sentiam? Duo Reges: constructio interrete. Sed in rebus apertissimis nimium longi sumus."), /*#__PURE__*/React.createElement(Text, null, "Text. Nam et a te perfici istam disputationem volo, nec tua mihi oratio longa videri potest. Beatus autem esse in maximarum rerum timore nemo potest. Inquit, respondet: Quia, nisi quod honestum est, nullum est aliud bonum! Non quaero iam verumne sit; Aut, Pylades cum sis, dices te esse Orestem, ut moriare pro amico? Non prorsus, inquit, omnisque, qui sine dolore sint, in voluptate, et ea quidem summa, esse dico. Addidisti ad extremum etiam indoctum fuisse. Apparet statim, quae sint officia, quae actiones. Hi autem ponunt illi quidem prima naturae, sed ea seiungunt a finibus et a summa bonorum;"), /*#__PURE__*/React.createElement(H3, null, "H3. Vitae autem degendae ratio maxime quidem illis placuit quieta."), /*#__PURE__*/React.createElement(Text, null, "Text. Hanc se tuus Epicurus omnino ignorare dicit quam aut qualem esse velint qui honestate summum bonum metiantur. Idem iste, inquam, de voluptate quid sentit? Quid interest, nisi quod ego res notas notis verbis appello, illi nomina nova quaerunt, quibus idem dicant? Etsi ea quidem, quae adhuc dixisti,"), /*#__PURE__*/React.createElement(H4, null, "H4. quae senserit ille, tibi non vera videantur."), /*#__PURE__*/React.createElement(Text, null, "quam dicat Epicurus voluptatem. Iubet igitur nos Pythius Apollo noscere nosmet ipsos. Dicam, inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim."), /*#__PURE__*/React.createElement(H4, null, "H4. Dicam, inquam, et quidem discendi causa magis."), /*#__PURE__*/React.createElement(Text, null, "quamvis ad aetatem recte isto modo dicerentur. In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Nam illud quidem adduci vix possum, ut ea, Nihil enim iam habes, quod ad corpus referas; Itaque hoc frequenter dici solet a vobis, non intellegere nos,"), /*#__PURE__*/React.createElement(Text, null, "Text. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Obscura, inquit, quaedam esse confiteor, nec tamen ab illis ita dicuntur de industria, sed inest in rebus ipsis obscuritas. Cuius similitudine perspecta in formarum specie ac dignitate transitum est ad honestatem dictorum atque factorum. Atque ut a corpore ordiar,"), /*#__PURE__*/React.createElement(H5, null, "H5. Mortuus. Quae cum magnifice primo"), /*#__PURE__*/React.createElement(Text, null, "Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Deinde disputat,"), /*#__PURE__*/React.createElement(H5, null, "H5. Honestate summum bonum metiantur"), /*#__PURE__*/React.createElement(Text, null, "quod cuiusque generis animantium statui deceat extremum. Ita multo sanguine profuso in"), /*#__PURE__*/React.createElement(H5, null, "H5. In alia summum bonum ponere? Cum "), /*#__PURE__*/React.createElement(Text, null, "laetitia et in victoria est mortuus. Quae cum magnifice primo dici viderentur, considerata"), /*#__PURE__*/React.createElement(Text, null, "minus probabantur. Hanc se tuus Epicurus omnino ignorare dicit quam aut qualem esse velint qui honestate summum bonum metiantur. Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Cum sciret confestim esse moriendum eamque mortem"), /*#__PURE__*/React.createElement(Text, null, "ardentiore studio peteret, quam Epicurus voluptatem petendam putat."), /*#__PURE__*/React.createElement(Text, null, "Text. Sed tu istuc dixti bene Latine, parum plane. His similes sunt omnes, qui virtuti studentlevantur vitiis, levantur erroribus, nisi forte censes Ti. Verum hoc loco sumo verbis his eandem certe vim voluptatis Epicurum nosse quam ceteros. An dubium est, quin virtus ita maximam partem optineat in rebus humanis, ut reliquas obruat? Quo studio Aristophanem putamus aetatem in litteris duxisse? Vides igitur te aut ea sumere, quae non concedantur, aut ea, quae etiam concessa te nihil iuvent."), /*#__PURE__*/React.createElement(H2, null, "H2. Audeo dicere, inquit."), /*#__PURE__*/React.createElement(Text, null, "Text. Nulla profecto est, quin suam vim retineat a primo ad extremum. Video equidem, inquam, sed tamen iam infici debet iis artibus, quas si, dum est tener, conbiberit, ad maiora veniet paratior. Sed alii dolore moventur, alii cupiditate, iracundia etiam multi effetuntur et, cum in mala scientes inruunt, tum se optime sibi consulere arbitrantur. Hoc igitur quaerentes omnes, et ii, qui quodcumque in mentem veniat aut quodcumque occurrat se sequi dicent, et vos ad naturam revertemini. Et si in ipsa gubernatione neglegentia est navis eversa, maius est peccatum in auro quam in palea. Aut pertinacissimus fueris, si in eo perstiteris ad corpus ea, quae dixi, referri, aut deserueris totam Epicuri voluptatem, si negaveris."), /*#__PURE__*/React.createElement(Text, null, "Text. Age, inquies, ista parva sunt. Etiam inchoatum, ut, si iuste depositum reddere in recte factis sit, in officiis ponatur depositum reddere; Haec quo modo conveniant, non sane intellego. At certe gravius."), /*#__PURE__*/React.createElement(Text, null, "Text. Istam voluptatem perpetuam quis potest praestare sapienti? Nihil enim arbitror esse magna laude dignum, quod te praetermissurum credam aut mortis aut doloris metu. Et certamen honestum et disputatio splendida! omnis est enim de virtutis dignitate contentio. Consequens enim est et post oritur, ut dixi. Hoc dictum in una re latissime patet, ut in omnibus factis re, non teste moveamur. Nec enim, dum metuit, iustus est, et certe, si metuere destiterit, non erit; Sin laboramus, quis est, qui alienae modum statuat industriae? Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Quos quidem dies quem ad modum agatis et in quantam hominum facetorum urbanitatem incurratis, non diconihil opus est litibus-; Ita, quem ad modum in senatu semper est aliquis, qui interpretem postulet, sic, isti nobis cum interprete audiendi sunt.")));
export const Captions = () => /*#__PURE__*/React.createElement(StoryWrapper, {
  label: "Captions"
}, /*#__PURE__*/React.createElement(CardTitle, null, "Card Title - 15"), /*#__PURE__*/React.createElement(Text, {
  variant: "sm",
  mb: 5
}, "Roboto 14 - line height - 40"), /*#__PURE__*/React.createElement(Caption, null, "Caption - 12"), /*#__PURE__*/React.createElement(Text, {
  variant: "sm",
  mb: 5
}, "Roboto 12 - line height - 16"), /*#__PURE__*/React.createElement(SmallText, null, "Small Text - 10"), /*#__PURE__*/React.createElement(Text, {
  variant: "sm",
  mb: 5
}, "Roboto 10 - line height - 12"));
export default {
  title: 'DesignSystem/Atoms/Typography',
  argTypes: {
    variant: {
      defaultValue: 'lg',
      options: ['xs', 'sm', 'lg'],
      control: {
        type: 'select'
      }
    }
  }
};