design-system-simplefi
Version:
Design System for SimpleFi Applications
82 lines • 3.42 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React from 'react';
import { Text } from '../index';
import { TextSizes, TextVariants } from '../Text/Text.enums';
import Paragraph from './Paragraph';
export default {
title: 'components/typography/Paragraph',
component: Paragraph,
argTypes: {
children: {
control: { type: 'text' },
table: {
type: { summary: 'string' },
},
},
size: {
table: {
type: {
summary: Object.keys(TextSizes)
.map(function (size) { return "\"" + size + "\""; })
.join('|'),
},
defaultValue: {
summary: "\"" + TextSizes.lg + "\"",
},
},
},
variant: {
table: {
type: {
summary: Object.keys(TextVariants)
.map(function (variant) { return "\"" + variant + "\""; })
.join('|'),
},
defaultValue: {
summary: "\"" + TextVariants.primary + "\"",
},
},
},
margin: { control: { disable: true } },
padding: { control: { disable: true } },
},
};
var lipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra\nmagna lectus, a congue ex blandit vel. Donec id mi commodo eros porta tempus. Vivamus et elit ut\nleo tincidunt vehicula non a dolor. Suspendisse placerat turpis nisl, quis gravida sem semper et.";
export var playground = function (args) { return (React.createElement(Paragraph, __assign({}, args))); };
playground.parameters = {
chromatic: { disable: true },
};
playground.args = {
children: lipsum,
};
export var defaultParagraph = function () { return (React.createElement(React.Fragment, null,
React.createElement(Paragraph, { size: TextSizes.md, variant: TextVariants.monospace }, lipsum),
React.createElement(Paragraph, { margin: { top: 1, bottom: 3 }, size: TextSizes.sm }, lipsum),
React.createElement(Paragraph, null, lipsum))); };
export var TextInParagraph = function () { return (React.createElement(Paragraph, null,
React.createElement(Text, { variant: TextVariants.primary }, "Lorem ipsum"),
" dolor sit amet, consectetur ",
React.createElement(Text, { variant: TextVariants.secondary }, "adipiscing elit"),
". Phasellus pharetra magna lectus, ",
React.createElement(Text, { isBold: true }, "a congue ex"),
" blandit vel. ",
React.createElement(Text, { variant: TextVariants.context }, "Donec id mi commodo eros"),
' ',
"porta tempus. Vivamus et elit ut leo",
' ',
React.createElement(Text, { variant: TextVariants.monospace }, "tincidunt vehicula"),
" non a dolor. Suspendisse placerat turpis nisl, quis",
' ',
React.createElement(Text, { variant: TextVariants.danger }, "gravida sem semper et"),
".")); };
//# sourceMappingURL=Paragraph.stories.js.map