w-design-system 0.0.22 → 0.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CardStories/index.js +1 -1
- package/dist/components/CardStories/index.js.map +1 -1
- package/dist/components/Modal/stories.js +1 -1
- package/dist/components/Modal/stories.js.map +1 -1
- package/dist/components/Paragraph/index.d.ts +4 -1
- package/dist/components/Paragraph/index.d.ts.map +1 -1
- package/dist/components/Paragraph/index.js +31 -10
- package/dist/components/Paragraph/index.js.map +1 -1
- package/dist/components/Paragraph/stories.d.ts.map +1 -1
- package/dist/components/Paragraph/stories.js +18 -20
- package/dist/components/Paragraph/stories.js.map +1 -1
- package/dist/components/Table/index.js +1 -1
- package/dist/components/Table/index.js.map +1 -1
- package/dist/components/Table/stories.js +3 -3
- package/dist/components/Table/stories.js.map +1 -1
- package/dist/components/Tabs/stories.js +3 -3
- package/dist/components/Tabs/stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CardStories/index.tsx +1 -1
- package/src/components/Modal/stories.tsx +1 -1
- package/src/components/Paragraph/index.tsx +24 -14
- package/src/components/Paragraph/stories.tsx +18 -21
- package/src/components/Table/index.tsx +1 -1
- package/src/components/Table/stories.tsx +3 -3
- package/src/components/Tabs/stories.tsx +3 -3
|
@@ -36,7 +36,7 @@ const CardStories = ({ title, subTitle, children }) => {
|
|
|
36
36
|
return (React.createElement(ContainerCardStories, null,
|
|
37
37
|
React.createElement(Wrapper, null, children),
|
|
38
38
|
React.createElement(WrapperFooter, null,
|
|
39
|
-
React.createElement(Paragraph, { color: theme.colors.shade50,
|
|
39
|
+
React.createElement(Paragraph, { color: theme.colors.shade50, heavyBod: true }, title),
|
|
40
40
|
React.createElement(Paragraph, { size: 'x-small', color: theme.colors.shade30 }, subTitle))));
|
|
41
41
|
};
|
|
42
42
|
export default CardStories;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CardStories/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAqB,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAUtC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASzB,CAAA;AACD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ/B,CAAA;AAOD,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAoB,EAAE,EAAE;IACtE,OAAO,CACL,oBAAC,oBAAoB;QACnB,oBAAC,OAAO,QAAE,QAAQ,CAAW;QAC7B,oBAAC,aAAa;YACZ,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CardStories/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAqB,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAUtC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASzB,CAAA;AACD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ/B,CAAA;AAOD,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAoB,EAAE,EAAE;IACtE,OAAO,CACL,oBAAC,oBAAoB;QACnB,oBAAC,OAAO,QAAE,QAAQ,CAAW;QAC7B,oBAAC,aAAa;YACZ,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,QAAQ,UAC7C,KAAK,CACI;YACZ,oBAAC,SAAS,IAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,IACpD,QAAQ,CACC,CACE,CACK,CACxB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -17,7 +17,7 @@ export const Playground = {
|
|
|
17
17
|
isOpen && (React.createElement(Modal, { onClose: () => setIsOpen(false), footer: React.createElement(React.Fragment, null,
|
|
18
18
|
React.createElement(Button, { onClick: () => setIsOpen(true), variant: 'gray' }, "Cancelar"),
|
|
19
19
|
React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Modal")) },
|
|
20
|
-
React.createElement(Paragraph, { size: 'medium',
|
|
20
|
+
React.createElement(Paragraph, { size: 'medium', heavyBod: true }, "Modal Title"),
|
|
21
21
|
React.createElement(Paragraph, null, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.")))));
|
|
22
22
|
},
|
|
23
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Modal/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,KAAK;CACY,CAAA;AAE9B,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,sDAAsD;QACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;QAE3C,OAAO,CACL;YACE,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAqB;YAC1D,MAAM,IAAI,CACT,oBAAC,KAAK,IACJ,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAC/B,MAAM,EACJ;oBACE,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,eAE9C;oBACT,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAqB,CAC1D;gBAGL,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Modal/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,KAAK;CACY,CAAA;AAE9B,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,sDAAsD;QACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;QAE3C,OAAO,CACL;YACE,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAqB;YAC1D,MAAM,IAAI,CACT,oBAAC,KAAK,IACJ,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAC/B,MAAM,EACJ;oBACE,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,eAE9C;oBACT,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAqB,CAC1D;gBAGL,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,wBAEvB;gBACZ,oBAAC,SAAS,ykBAOE,CACN,CACT,CACA,CACJ,CAAA;IACH,CAAC;CACF,CAAA"}
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface ParagraphProps {
|
|
3
3
|
size?: 'x-small' | 'small' | 'medium' | 'large';
|
|
4
|
-
weight?: 400 | 600 | 700 | 800;
|
|
5
4
|
as?: 'span' | 'div' | 'label' | 'p';
|
|
6
5
|
color?: string;
|
|
7
6
|
textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
|
|
8
7
|
children: React.ReactNode;
|
|
8
|
+
lightBod?: boolean;
|
|
9
|
+
semiBod?: boolean;
|
|
10
|
+
strongBod?: boolean;
|
|
11
|
+
heavyBod?: boolean;
|
|
9
12
|
}
|
|
10
13
|
export declare const Paragraph: React.FC<ParagraphProps>;
|
|
11
14
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC/C,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC/C,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,GAAG,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,WAAW,CAAA;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAkCD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAa9C,CAAA"}
|
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
1
12
|
import React from 'react';
|
|
2
13
|
import styled from 'styled-components';
|
|
3
14
|
const sizes = {
|
|
@@ -7,22 +18,32 @@ const sizes = {
|
|
|
7
18
|
large: '18px',
|
|
8
19
|
};
|
|
9
20
|
const weights = {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
21
|
+
lightBod: 400,
|
|
22
|
+
semiBod: 600,
|
|
23
|
+
strongBod: 700,
|
|
24
|
+
heavyBod: 800,
|
|
25
|
+
};
|
|
26
|
+
const getFontWeight = (props) => {
|
|
27
|
+
if (props.heavyBod)
|
|
28
|
+
return weights.heavyBod;
|
|
29
|
+
if (props.strongBod)
|
|
30
|
+
return weights.strongBod;
|
|
31
|
+
if (props.semiBod)
|
|
32
|
+
return weights.semiBod;
|
|
33
|
+
return weights.lightBod;
|
|
14
34
|
};
|
|
15
35
|
const ParagraphStyled = styled.p `
|
|
16
36
|
margin: 0;
|
|
17
37
|
padding: 0;
|
|
18
|
-
font-size: ${
|
|
19
|
-
font-weight: ${props => (props
|
|
38
|
+
font-size: ${({ size = 'small' }) => sizes[size]};
|
|
39
|
+
font-weight: ${props => getFontWeight(props)};
|
|
20
40
|
line-height: 140%;
|
|
21
41
|
font-family: 'Nunito Sans', sans-serif;
|
|
22
|
-
color: ${
|
|
23
|
-
text-transform: ${
|
|
42
|
+
color: ${({ color = 'inherit' }) => color};
|
|
43
|
+
text-transform: ${({ textTransform = 'none' }) => textTransform};
|
|
24
44
|
`;
|
|
25
|
-
export const Paragraph = (
|
|
26
|
-
|
|
45
|
+
export const Paragraph = (_a) => {
|
|
46
|
+
var { size = 'small', as = 'p', color = 'inherit', textTransform = 'none', children } = _a, props = __rest(_a, ["size", "as", "color", "textTransform", "children"]);
|
|
47
|
+
return (React.createElement(ParagraphStyled, Object.assign({ as: as, size: size, color: color, textTransform: textTransform }, props), children));
|
|
27
48
|
};
|
|
28
49
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Paragraph/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Paragraph/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AActC,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAA;AAED,MAAM,OAAO,GAAG;IACd,QAAQ,EAAE,GAAG;IACb,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,GAAG;IACd,QAAQ,EAAE,GAAG;CACd,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC9C,IAAI,KAAK,CAAC,QAAQ;QAAE,OAAO,OAAO,CAAC,QAAQ,CAAA;IAC3C,IAAI,KAAK,CAAC,SAAS;QAAE,OAAO,OAAO,CAAC,SAAS,CAAA;IAC7C,IAAI,KAAK,CAAC,OAAO;QAAE,OAAO,OAAO,CAAC,OAAO,CAAA;IACzC,OAAO,OAAO,CAAC,QAAQ,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAgB;;;eAGjC,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC;iBACjC,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC;;;WAGnC,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,KAAK;oBACvB,CAAC,EAAE,aAAa,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,aAAa;CAChE,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAOnD,EAAE,EAAE;QAP+C,EAClD,IAAI,GAAG,OAAO,EACd,EAAE,GAAG,GAAG,EACR,KAAK,GAAG,SAAS,EACjB,aAAa,GAAG,MAAM,EACtB,QAAQ,OAET,EADI,KAAK,cAN0C,oDAOnD,CADS;IAER,OAAO,CACL,oBAAC,eAAe,kBAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,IAAM,KAAK,GACvF,QAAQ,CACO,CACnB,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,
|
|
1
|
+
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA4BC,CAAA;AAElC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAA"}
|
|
@@ -11,62 +11,61 @@ const meta = {
|
|
|
11
11
|
control: { type: 'select', options: ['x-small', 'small', 'medium', 'large'] },
|
|
12
12
|
description: 'Select the size of the paragraph',
|
|
13
13
|
},
|
|
14
|
-
weight: {
|
|
15
|
-
control: { type: 'select', options: [400, 600, 700, 800] },
|
|
16
|
-
description: 'Select the font weight of the paragraph',
|
|
17
|
-
},
|
|
18
14
|
as: {
|
|
19
15
|
control: { type: 'select', options: ['span', 'div', 'label', 'p'] },
|
|
20
16
|
description: 'Select the HTML element to render',
|
|
21
17
|
},
|
|
22
18
|
color: {
|
|
23
|
-
control: 'color',
|
|
19
|
+
control: 'color',
|
|
24
20
|
description: 'Select the color of the text',
|
|
25
21
|
},
|
|
26
22
|
children: {
|
|
27
23
|
control: 'text',
|
|
28
24
|
description: 'Content of the paragraph',
|
|
29
25
|
},
|
|
26
|
+
semiBod: { control: 'boolean', description: 'Use semiBod weight' },
|
|
27
|
+
strongBod: { control: 'boolean', description: 'Use strongBod weight' },
|
|
28
|
+
heavyBod: { control: 'boolean', description: 'Use heavyBod weight' },
|
|
30
29
|
},
|
|
31
30
|
};
|
|
32
31
|
export default meta;
|
|
33
|
-
// Define different stories for the Paragraph component
|
|
34
32
|
export const XSmall = {
|
|
35
33
|
args: {
|
|
36
34
|
size: 'x-small',
|
|
37
|
-
color: '#000000',
|
|
38
|
-
children: 'This is an X-small paragraph.',
|
|
35
|
+
color: '#000000',
|
|
36
|
+
children: 'This is an X-small paragraph with LightBod weight.',
|
|
39
37
|
},
|
|
40
38
|
};
|
|
41
39
|
export const Small = {
|
|
42
40
|
args: {
|
|
43
41
|
size: 'small',
|
|
44
|
-
|
|
45
|
-
color: '#333333',
|
|
46
|
-
children: 'This is a small paragraph with weight
|
|
42
|
+
semiBod: true,
|
|
43
|
+
color: '#333333',
|
|
44
|
+
children: 'This is a small paragraph with SemiBod weight.',
|
|
47
45
|
},
|
|
48
46
|
};
|
|
49
47
|
export const Medium = {
|
|
50
48
|
args: {
|
|
51
49
|
size: 'medium',
|
|
52
|
-
|
|
53
|
-
color: '#666666',
|
|
54
|
-
children: 'This is a medium paragraph with weight
|
|
50
|
+
strongBod: true,
|
|
51
|
+
color: '#666666',
|
|
52
|
+
children: 'This is a medium paragraph with StrongBod weight.',
|
|
55
53
|
},
|
|
56
54
|
};
|
|
57
55
|
export const Large = {
|
|
58
56
|
args: {
|
|
59
57
|
size: 'large',
|
|
60
|
-
color: '#999999',
|
|
61
|
-
children: 'This is a large paragraph.',
|
|
58
|
+
color: '#999999',
|
|
59
|
+
children: 'This is a large paragraph with LightBod weight.',
|
|
62
60
|
},
|
|
63
61
|
};
|
|
64
62
|
export const CustomElement = {
|
|
65
63
|
args: {
|
|
66
64
|
size: 'medium',
|
|
67
65
|
as: 'label',
|
|
68
|
-
color: '#CC0000',
|
|
69
|
-
children: 'This is a medium paragraph rendered as a label.',
|
|
66
|
+
color: '#CC0000',
|
|
67
|
+
children: 'This is a medium paragraph rendered as a label with LightBod weight.',
|
|
68
|
+
strongBod: true,
|
|
70
69
|
},
|
|
71
70
|
};
|
|
72
71
|
export const AllSizes = {
|
|
@@ -79,9 +78,8 @@ export const AllSizes = {
|
|
|
79
78
|
export const AllWeights = {
|
|
80
79
|
args: {
|
|
81
80
|
size: 'medium',
|
|
82
|
-
weight: 400,
|
|
83
81
|
color: '#000000',
|
|
84
|
-
children: 'This paragraph weight can be adjusted to
|
|
82
|
+
children: 'This paragraph weight can be adjusted to LightBod, SemiBod, StrongBod, or HeavyBod.',
|
|
85
83
|
},
|
|
86
84
|
};
|
|
87
85
|
export const AllElements = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Paragraph/stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE;YAC7E,WAAW,EAAE,kCAAkC;SAChD;QACD,
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Paragraph/stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE;YAC7E,WAAW,EAAE,kCAAkC;SAChD;QACD,EAAE,EAAE;YACF,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE;YACnE,WAAW,EAAE,mCAAmC;SACjD;QACD,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,8BAA8B;SAC5C;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;SACxC;QACD,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,oBAAoB,EAAE;QAClE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,sBAAsB,EAAE;QACtE,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,qBAAqB,EAAE;KACrE;CAC+B,CAAA;AAElC,eAAe,IAAI,CAAA;AAGnB,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,oDAAoD;KAC/D;CACF,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,gDAAgD;KAC3D;CACF,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,mDAAmD;KAC9D;CACF,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,iDAAiD;KAC5D;CACF,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,EAAE,EAAE,OAAO;QACX,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,sEAAsE;QAChF,SAAS,EAAE,IAAI;KAChB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,gEAAgE;KAC3E;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,qFAAqF;KAChG;CACF,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,EAAE,EAAE,KAAK;QACT,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,4DAA4D;KACvE;CACF,CAAA"}
|
|
@@ -80,7 +80,7 @@ export const Table = ({ columns, data, height = '100%', loading = false, emptySt
|
|
|
80
80
|
React.createElement(StyledTable, null,
|
|
81
81
|
React.createElement(Thead, null,
|
|
82
82
|
React.createElement(Tr, { striped: striped }, columns.map((col, index) => (React.createElement(Th, { key: index, width: col.width, align: col.align },
|
|
83
|
-
React.createElement(Paragraph, { color: theme.colors.shade30, textTransform: 'uppercase'
|
|
83
|
+
React.createElement(Paragraph, { color: theme.colors.shade30, textTransform: 'uppercase' }, col.header)))))),
|
|
84
84
|
React.createElement(Tbody, { height: height }, loading ? (React.createElement(LoadingWrapper, null,
|
|
85
85
|
React.createElement(ContainerLoading, { size: 'small' }))) : data.length === 0 ? (React.createElement(EmptyStateWrapper, null,
|
|
86
86
|
React.createElement(Paragraph, null, emptyStateMessage))) : (data.map((row, rowIndex) => (React.createElement(React.Fragment, { key: row.id },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -116,7 +116,7 @@ export const Default = {
|
|
|
116
116
|
valor_estimado_total: '10000000',
|
|
117
117
|
colapsed: true,
|
|
118
118
|
containerColapsed: ({ item }) => (React.createElement("div", null,
|
|
119
|
-
React.createElement(Paragraph, { size: 'large',
|
|
119
|
+
React.createElement(Paragraph, { size: 'large', heavyBod: true }, item),
|
|
120
120
|
React.createElement(Paragraph, null, "Esta \u00E9 uma informa\u00E7\u00E3o adicional sobre ."))),
|
|
121
121
|
},
|
|
122
122
|
{
|
|
@@ -129,7 +129,7 @@ export const Default = {
|
|
|
129
129
|
valor_estimado_unitario: '1000',
|
|
130
130
|
valor_estimado_total: '10000000',
|
|
131
131
|
containerColapsed: ({ item }) => (React.createElement("div", null,
|
|
132
|
-
React.createElement(Paragraph, { size: 'large',
|
|
132
|
+
React.createElement(Paragraph, { size: 'large', heavyBod: true }, item),
|
|
133
133
|
React.createElement(Paragraph, null, "Esta \u00E9 uma informa\u00E7\u00E3o adicional sobre ."))),
|
|
134
134
|
},
|
|
135
135
|
{
|
|
@@ -142,7 +142,7 @@ export const Default = {
|
|
|
142
142
|
valor_estimado_unitario: '1000',
|
|
143
143
|
valor_estimado_total: '10000000',
|
|
144
144
|
containerColapsed: ({ item }) => (React.createElement("div", null,
|
|
145
|
-
React.createElement(Paragraph, { size: 'large',
|
|
145
|
+
React.createElement(Paragraph, { size: 'large', heavyBod: true }, item),
|
|
146
146
|
React.createElement(Paragraph, null, "Esta \u00E9 uma informa\u00E7\u00E3o adicional sobre ."))),
|
|
147
147
|
},
|
|
148
148
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Table/stories.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Table/stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,13 +18,13 @@ export const Playground = {
|
|
|
18
18
|
React.createElement(Tabs, { tabs: ['Tab 1', 'Tab 2', 'Tab 3'], defaultActiveTab: "Tab 1", onTabChange: handleTabChange }),
|
|
19
19
|
React.createElement("div", { style: { background: 'white', padding: '50px 20px', borderRadius: '8px', marginTop: '-5px' } },
|
|
20
20
|
activeTab === 'Tab 1' && (React.createElement(React.Fragment, null,
|
|
21
|
-
React.createElement(Paragraph, { size: 'medium',
|
|
21
|
+
React.createElement(Paragraph, { size: 'medium', heavyBod: true }, "Tab 1"),
|
|
22
22
|
React.createElement(Paragraph, null, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic"))),
|
|
23
23
|
activeTab === 'Tab 2' && (React.createElement(React.Fragment, null,
|
|
24
|
-
React.createElement(Paragraph, { size: 'medium',
|
|
24
|
+
React.createElement(Paragraph, { size: 'medium', heavyBod: true }, "Tab 2"),
|
|
25
25
|
React.createElement(Paragraph, null, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic"))),
|
|
26
26
|
activeTab === 'Tab 3' && (React.createElement(React.Fragment, null,
|
|
27
|
-
React.createElement(Paragraph, { size: 'medium',
|
|
27
|
+
React.createElement(Paragraph, { size: 'medium', heavyBod: true }, "Tab 3"),
|
|
28
28
|
React.createElement(Paragraph, null, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic"))))));
|
|
29
29
|
},
|
|
30
30
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Tabs/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;CACY,CAAA;AAE7B,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,sDAAsD;QACtD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;QACnD,MAAM,eAAe,GAAG,CAAC,SAAiB,EAAE,EAAE;YAC5C,YAAY,CAAC,SAAS,CAAC,CAAA;QACzB,CAAC,CAAA;QAED,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE;YACrE,oBAAC,IAAI,IAAC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,gBAAgB,EAAC,OAAO,EAAC,WAAW,EAAE,eAAe,GAAI;YAClG,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE;gBAC9F,SAAS,KAAK,OAAO,IAAI,CACxB;oBACE,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Tabs/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;CACY,CAAA;AAE7B,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,sDAAsD;QACtD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;QACnD,MAAM,eAAe,GAAG,CAAC,SAAiB,EAAE,EAAE;YAC5C,YAAY,CAAC,SAAS,CAAC,CAAA;QACzB,CAAC,CAAA;QAED,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE;YACrE,oBAAC,IAAI,IAAC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,gBAAgB,EAAC,OAAO,EAAC,WAAW,EAAE,eAAe,GAAI;YAClG,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE;gBAC9F,SAAS,KAAK,OAAO,IAAI,CACxB;oBACE,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,kBAEvB;oBACZ,oBAAC,SAAS,2UAKE,CACX,CACJ;gBACA,SAAS,KAAK,OAAO,IAAI,CACxB;oBACE,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,kBAEvB;oBACZ,oBAAC,SAAS,4oBAQE,CACX,CACJ;gBACA,SAAS,KAAK,OAAO,IAAI,CACxB;oBACE,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,kBAEvB;oBACZ,oBAAC,SAAS,2UAKE,CACX,CACJ,CACG,CACF,CACP,CAAA;IACH,CAAC;CACF,CAAA"}
|
package/package.json
CHANGED
|
@@ -45,7 +45,7 @@ const CardStories = ({ title, subTitle, children }: CardStoriesProps) => {
|
|
|
45
45
|
<ContainerCardStories>
|
|
46
46
|
<Wrapper>{children}</Wrapper>
|
|
47
47
|
<WrapperFooter>
|
|
48
|
-
<Paragraph color={theme.colors.shade50}
|
|
48
|
+
<Paragraph color={theme.colors.shade50} heavyBod>
|
|
49
49
|
{title}
|
|
50
50
|
</Paragraph>
|
|
51
51
|
<Paragraph size={'x-small'} color={theme.colors.shade30}>
|
|
@@ -3,11 +3,14 @@ import styled from 'styled-components'
|
|
|
3
3
|
|
|
4
4
|
interface ParagraphProps {
|
|
5
5
|
size?: 'x-small' | 'small' | 'medium' | 'large'
|
|
6
|
-
weight?: 400 | 600 | 700 | 800
|
|
7
6
|
as?: 'span' | 'div' | 'label' | 'p'
|
|
8
7
|
color?: string
|
|
9
|
-
textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
|
|
8
|
+
textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
|
|
10
9
|
children: React.ReactNode
|
|
10
|
+
lightBod?: boolean
|
|
11
|
+
semiBod?: boolean
|
|
12
|
+
strongBod?: boolean
|
|
13
|
+
heavyBod?: boolean
|
|
11
14
|
}
|
|
12
15
|
|
|
13
16
|
const sizes = {
|
|
@@ -18,33 +21,40 @@ const sizes = {
|
|
|
18
21
|
}
|
|
19
22
|
|
|
20
23
|
const weights = {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
lightBod: 400,
|
|
25
|
+
semiBod: 600,
|
|
26
|
+
strongBod: 700,
|
|
27
|
+
heavyBod: 800,
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const getFontWeight = (props: ParagraphProps) => {
|
|
31
|
+
if (props.heavyBod) return weights.heavyBod
|
|
32
|
+
if (props.strongBod) return weights.strongBod
|
|
33
|
+
if (props.semiBod) return weights.semiBod
|
|
34
|
+
return weights.lightBod
|
|
25
35
|
}
|
|
26
36
|
|
|
27
37
|
const ParagraphStyled = styled.p<ParagraphProps>`
|
|
28
38
|
margin: 0;
|
|
29
39
|
padding: 0;
|
|
30
|
-
font-size: ${
|
|
31
|
-
font-weight: ${props => (props
|
|
40
|
+
font-size: ${({ size = 'small' }) => sizes[size]};
|
|
41
|
+
font-weight: ${props => getFontWeight(props)};
|
|
32
42
|
line-height: 140%;
|
|
33
43
|
font-family: 'Nunito Sans', sans-serif;
|
|
34
|
-
color: ${
|
|
35
|
-
text-transform: ${
|
|
44
|
+
color: ${({ color = 'inherit' }) => color};
|
|
45
|
+
text-transform: ${({ textTransform = 'none' }) => textTransform};
|
|
36
46
|
`
|
|
37
47
|
|
|
38
48
|
export const Paragraph: React.FC<ParagraphProps> = ({
|
|
39
49
|
size = 'small',
|
|
40
|
-
weight,
|
|
41
50
|
as = 'p',
|
|
42
|
-
color,
|
|
43
|
-
textTransform,
|
|
51
|
+
color = 'inherit',
|
|
52
|
+
textTransform = 'none',
|
|
44
53
|
children,
|
|
54
|
+
...props
|
|
45
55
|
}) => {
|
|
46
56
|
return (
|
|
47
|
-
<ParagraphStyled as={as} size={size}
|
|
57
|
+
<ParagraphStyled as={as} size={size} color={color} textTransform={textTransform} {...props}>
|
|
48
58
|
{children}
|
|
49
59
|
</ParagraphStyled>
|
|
50
60
|
)
|
|
@@ -13,61 +13,58 @@ const meta: Meta<typeof Paragraph> = {
|
|
|
13
13
|
control: { type: 'select', options: ['x-small', 'small', 'medium', 'large'] },
|
|
14
14
|
description: 'Select the size of the paragraph',
|
|
15
15
|
},
|
|
16
|
-
weight: {
|
|
17
|
-
control: { type: 'select', options: [400, 600, 700, 800] },
|
|
18
|
-
description: 'Select the font weight of the paragraph',
|
|
19
|
-
},
|
|
20
16
|
as: {
|
|
21
17
|
control: { type: 'select', options: ['span', 'div', 'label', 'p'] },
|
|
22
18
|
description: 'Select the HTML element to render',
|
|
23
19
|
},
|
|
24
20
|
color: {
|
|
25
|
-
control: 'color',
|
|
21
|
+
control: 'color',
|
|
26
22
|
description: 'Select the color of the text',
|
|
27
23
|
},
|
|
28
24
|
children: {
|
|
29
25
|
control: 'text',
|
|
30
26
|
description: 'Content of the paragraph',
|
|
31
27
|
},
|
|
28
|
+
semiBod: { control: 'boolean', description: 'Use semiBod weight' },
|
|
29
|
+
strongBod: { control: 'boolean', description: 'Use strongBod weight' },
|
|
30
|
+
heavyBod: { control: 'boolean', description: 'Use heavyBod weight' },
|
|
32
31
|
},
|
|
33
32
|
} satisfies Meta<typeof Paragraph>
|
|
34
33
|
|
|
35
34
|
export default meta
|
|
36
35
|
type Story = StoryObj<typeof meta>
|
|
37
36
|
|
|
38
|
-
// Define different stories for the Paragraph component
|
|
39
|
-
|
|
40
37
|
export const XSmall: Story = {
|
|
41
38
|
args: {
|
|
42
39
|
size: 'x-small',
|
|
43
|
-
color: '#000000',
|
|
44
|
-
children: 'This is an X-small paragraph.',
|
|
40
|
+
color: '#000000',
|
|
41
|
+
children: 'This is an X-small paragraph with LightBod weight.',
|
|
45
42
|
},
|
|
46
43
|
}
|
|
47
44
|
|
|
48
45
|
export const Small: Story = {
|
|
49
46
|
args: {
|
|
50
47
|
size: 'small',
|
|
51
|
-
|
|
52
|
-
color: '#333333',
|
|
53
|
-
children: 'This is a small paragraph with weight
|
|
48
|
+
semiBod: true,
|
|
49
|
+
color: '#333333',
|
|
50
|
+
children: 'This is a small paragraph with SemiBod weight.',
|
|
54
51
|
},
|
|
55
52
|
}
|
|
56
53
|
|
|
57
54
|
export const Medium: Story = {
|
|
58
55
|
args: {
|
|
59
56
|
size: 'medium',
|
|
60
|
-
|
|
61
|
-
color: '#666666',
|
|
62
|
-
children: 'This is a medium paragraph with weight
|
|
57
|
+
strongBod: true,
|
|
58
|
+
color: '#666666',
|
|
59
|
+
children: 'This is a medium paragraph with StrongBod weight.',
|
|
63
60
|
},
|
|
64
61
|
}
|
|
65
62
|
|
|
66
63
|
export const Large: Story = {
|
|
67
64
|
args: {
|
|
68
65
|
size: 'large',
|
|
69
|
-
color: '#999999',
|
|
70
|
-
children: 'This is a large paragraph.',
|
|
66
|
+
color: '#999999',
|
|
67
|
+
children: 'This is a large paragraph with LightBod weight.',
|
|
71
68
|
},
|
|
72
69
|
}
|
|
73
70
|
|
|
@@ -75,8 +72,9 @@ export const CustomElement: Story = {
|
|
|
75
72
|
args: {
|
|
76
73
|
size: 'medium',
|
|
77
74
|
as: 'label',
|
|
78
|
-
color: '#CC0000',
|
|
79
|
-
children: 'This is a medium paragraph rendered as a label.',
|
|
75
|
+
color: '#CC0000',
|
|
76
|
+
children: 'This is a medium paragraph rendered as a label with LightBod weight.',
|
|
77
|
+
strongBod: true,
|
|
80
78
|
},
|
|
81
79
|
}
|
|
82
80
|
|
|
@@ -91,9 +89,8 @@ export const AllSizes: Story = {
|
|
|
91
89
|
export const AllWeights: Story = {
|
|
92
90
|
args: {
|
|
93
91
|
size: 'medium',
|
|
94
|
-
weight: 400,
|
|
95
92
|
color: '#000000',
|
|
96
|
-
children: 'This paragraph weight can be adjusted to
|
|
93
|
+
children: 'This paragraph weight can be adjusted to LightBod, SemiBod, StrongBod, or HeavyBod.',
|
|
97
94
|
},
|
|
98
95
|
}
|
|
99
96
|
|
|
@@ -138,7 +138,7 @@ export const Table: React.FC<TableProps> = ({
|
|
|
138
138
|
index: React.Key | null | undefined,
|
|
139
139
|
) => (
|
|
140
140
|
<Th key={index} width={col.width} align={col.align}>
|
|
141
|
-
<Paragraph color={theme.colors.shade30} textTransform={'uppercase'}
|
|
141
|
+
<Paragraph color={theme.colors.shade30} textTransform={'uppercase'}>
|
|
142
142
|
{col.header}
|
|
143
143
|
</Paragraph>
|
|
144
144
|
</Th>
|
|
@@ -133,7 +133,7 @@ export const Default: Story = {
|
|
|
133
133
|
colapsed: true,
|
|
134
134
|
containerColapsed: ({ item }: any) => (
|
|
135
135
|
<div>
|
|
136
|
-
<Paragraph size={'large'}
|
|
136
|
+
<Paragraph size={'large'} heavyBod>
|
|
137
137
|
{item}
|
|
138
138
|
</Paragraph>
|
|
139
139
|
<Paragraph>Esta é uma informação adicional sobre .</Paragraph>
|
|
@@ -151,7 +151,7 @@ export const Default: Story = {
|
|
|
151
151
|
valor_estimado_total: '10000000',
|
|
152
152
|
containerColapsed: ({ item }: any) => (
|
|
153
153
|
<div>
|
|
154
|
-
<Paragraph size={'large'}
|
|
154
|
+
<Paragraph size={'large'} heavyBod>
|
|
155
155
|
{item}
|
|
156
156
|
</Paragraph>
|
|
157
157
|
<Paragraph>Esta é uma informação adicional sobre .</Paragraph>
|
|
@@ -169,7 +169,7 @@ export const Default: Story = {
|
|
|
169
169
|
valor_estimado_total: '10000000',
|
|
170
170
|
containerColapsed: ({ item }: any) => (
|
|
171
171
|
<div>
|
|
172
|
-
<Paragraph size={'large'}
|
|
172
|
+
<Paragraph size={'large'} heavyBod>
|
|
173
173
|
{item}
|
|
174
174
|
</Paragraph>
|
|
175
175
|
<Paragraph>Esta é uma informação adicional sobre .</Paragraph>
|
|
@@ -27,7 +27,7 @@ export const Playground: Story = {
|
|
|
27
27
|
<div style={{ background: 'white', padding: '50px 20px', borderRadius: '8px', marginTop: '-5px' }}>
|
|
28
28
|
{activeTab === 'Tab 1' && (
|
|
29
29
|
<>
|
|
30
|
-
<Paragraph size={'medium'}
|
|
30
|
+
<Paragraph size={'medium'} heavyBod>
|
|
31
31
|
Tab 1
|
|
32
32
|
</Paragraph>
|
|
33
33
|
<Paragraph>
|
|
@@ -40,7 +40,7 @@ export const Playground: Story = {
|
|
|
40
40
|
)}
|
|
41
41
|
{activeTab === 'Tab 2' && (
|
|
42
42
|
<>
|
|
43
|
-
<Paragraph size={'medium'}
|
|
43
|
+
<Paragraph size={'medium'} heavyBod>
|
|
44
44
|
Tab 2
|
|
45
45
|
</Paragraph>
|
|
46
46
|
<Paragraph>
|
|
@@ -56,7 +56,7 @@ export const Playground: Story = {
|
|
|
56
56
|
)}
|
|
57
57
|
{activeTab === 'Tab 3' && (
|
|
58
58
|
<>
|
|
59
|
-
<Paragraph size={'medium'}
|
|
59
|
+
<Paragraph size={'medium'} heavyBod>
|
|
60
60
|
Tab 3
|
|
61
61
|
</Paragraph>
|
|
62
62
|
<Paragraph>
|