1 | "use strict";
|
2 |
|
3 | var _react = _interopRequireDefault(require("react"));
|
4 |
|
5 | var _react2 = require("@storybook/react");
|
6 |
|
7 | var _grommet = require("grommet");
|
8 |
|
9 | var _themes = require("grommet/themes");
|
10 |
|
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
12 |
|
13 | var paragraphFiller = "\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua.\n";
|
14 |
|
15 | var Medium = function Medium() {
|
16 | var margin = undefined;
|
17 | return _react.default.createElement(_grommet.Grommet, {
|
18 | theme: _themes.grommet
|
19 | }, _react.default.createElement(_grommet.Box, {
|
20 | pad: "medium"
|
21 | }, _react.default.createElement("div", null, _react.default.createElement(_grommet.Heading, {
|
22 | margin: margin
|
23 | }, "Heading 1 - Medium"), _react.default.createElement(_grommet.Text, {
|
24 | size: "xlarge"
|
25 | }, "Text XLarge"), _react.default.createElement(_grommet.Paragraph, {
|
26 | size: "large",
|
27 | margin: margin
|
28 | }, "Paragraph - Large", paragraphFiller), _react.default.createElement(_grommet.Heading, {
|
29 | level: 2,
|
30 | margin: margin
|
31 | }, "Heading 2 - Medium"), _react.default.createElement(_grommet.Text, {
|
32 | size: "large"
|
33 | }, "Text Large"), _react.default.createElement(_grommet.Paragraph, {
|
34 | margin: margin
|
35 | }, "Paragraph - Medium", paragraphFiller), _react.default.createElement(_grommet.Heading, {
|
36 | level: 3,
|
37 | margin: margin
|
38 | }, "Heading 3 - Medium"), _react.default.createElement(_grommet.Text, null, "Text Medium"), _react.default.createElement(_grommet.Paragraph, {
|
39 | margin: margin
|
40 | }, "Paragraph - Medium", paragraphFiller), _react.default.createElement(_grommet.Heading, {
|
41 | level: 4,
|
42 | margin: margin
|
43 | }, "Heading 4 - Medium"), _react.default.createElement(_grommet.Text, {
|
44 | size: "small"
|
45 | }, "Text Small"), _react.default.createElement(_grommet.Paragraph, {
|
46 | size: "small",
|
47 | margin: margin
|
48 | }, "Paragraph - Small", paragraphFiller))));
|
49 | };
|
50 |
|
51 | var Small = function Small() {
|
52 | return _react.default.createElement(_grommet.Grommet, {
|
53 | theme: _themes.grommet
|
54 | }, _react.default.createElement(_grommet.Box, {
|
55 | pad: "medium"
|
56 | }, _react.default.createElement("div", null, _react.default.createElement(_grommet.Heading, {
|
57 | size: "small"
|
58 | }, "Heading 1 - Small"), _react.default.createElement(_grommet.Text, {
|
59 | size: "large"
|
60 | }, "Text Large"), _react.default.createElement(_grommet.Paragraph, null, "Paragraph - Medium", paragraphFiller), _react.default.createElement(_grommet.Heading, {
|
61 | level: 2,
|
62 | size: "small"
|
63 | }, "Heading 2 - Small"), _react.default.createElement(_grommet.Text, null, "Text Medium"), _react.default.createElement(_grommet.Paragraph, null, "Paragraph - Medium", paragraphFiller), _react.default.createElement(_grommet.Heading, {
|
64 | level: 3,
|
65 | size: "small"
|
66 | }, "Heading 3 - Small"), _react.default.createElement(_grommet.Text, null, "Text Medium"), _react.default.createElement(_grommet.Paragraph, {
|
67 | size: "small"
|
68 | }, "Paragraph - Small", paragraphFiller), _react.default.createElement(_grommet.Heading, {
|
69 | level: 4,
|
70 | size: "small"
|
71 | }, "Heading 4 - Small"), _react.default.createElement(_grommet.Text, {
|
72 | size: "small"
|
73 | }, "Text Small"), _react.default.createElement(_grommet.Paragraph, {
|
74 | size: "small"
|
75 | }, "Paragraph - Small", paragraphFiller))));
|
76 | };
|
77 |
|
78 | var Large = function Large() {
|
79 | return _react.default.createElement(_grommet.Grommet, {
|
80 | theme: _themes.grommet
|
81 | }, _react.default.createElement(_grommet.Box, {
|
82 | pad: "medium"
|
83 | }, _react.default.createElement("div", null, _react.default.createElement(_grommet.Heading, {
|
84 | size: "large"
|
85 | }, "Heading 1 - Large"), _react.default.createElement(_grommet.Text, {
|
86 | size: "xxlarge"
|
87 | }, "Text XXLarge"), _react.default.createElement(_grommet.Paragraph, {
|
88 | size: "xlarge"
|
89 | }, "Paragraph - XLarge", paragraphFiller), _react.default.createElement(_grommet.Heading, {
|
90 | level: 2,
|
91 | size: "large"
|
92 | }, "Heading 2 - Large"), _react.default.createElement(_grommet.Text, {
|
93 | size: "xlarge"
|
94 | }, "Text XLarge"), _react.default.createElement(_grommet.Paragraph, {
|
95 | size: "large"
|
96 | }, "Paragraph - Large", paragraphFiller), _react.default.createElement(_grommet.Heading, {
|
97 | level: 3,
|
98 | size: "large"
|
99 | }, "Heading 3 - Large"), _react.default.createElement(_grommet.Text, {
|
100 | size: "large"
|
101 | }, "Text Large"), _react.default.createElement(_grommet.Paragraph, null, "Paragraph - Medium", paragraphFiller), _react.default.createElement(_grommet.Heading, {
|
102 | level: 4,
|
103 | size: "large"
|
104 | }, "Heading 4 - Large"), _react.default.createElement(_grommet.Text, null, "Text Medium"), _react.default.createElement(_grommet.Paragraph, null, "Paragraph - Medium", paragraphFiller))));
|
105 | };
|
106 |
|
107 | (0, _react2.storiesOf)('Typography', module).add('Small', function () {
|
108 | return _react.default.createElement(Small, null);
|
109 | }).add('Medium', function () {
|
110 | return _react.default.createElement(Medium, null);
|
111 | }).add('Large', function () {
|
112 | return _react.default.createElement(Large, null);
|
113 | }); |
\ | No newline at end of file |