@toptal/picasso-typography 4.0.5-alpha-1757603192867.0 → 4.0.5-alpha-1757603777486.0
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-package/src/Typography/Typography.d.ts +33 -0
- package/dist-package/src/Typography/Typography.d.ts.map +1 -0
- package/dist-package/src/Typography/Typography.js +123 -0
- package/dist-package/src/Typography/Typography.js.map +1 -0
- package/dist-package/src/Typography/index.d.ts +6 -0
- package/dist-package/src/Typography/index.d.ts.map +1 -0
- package/dist-package/src/Typography/index.js +2 -0
- package/dist-package/src/Typography/index.js.map +1 -0
- package/dist-package/src/Typography/utils/variant-to-element/index.d.ts +2 -0
- package/dist-package/src/Typography/utils/variant-to-element/index.d.ts.map +1 -0
- package/dist-package/src/Typography/utils/variant-to-element/index.js +2 -0
- package/dist-package/src/Typography/utils/variant-to-element/index.js.map +1 -0
- package/dist-package/src/Typography/utils/variant-to-element/variant-to-element.d.ts +43 -0
- package/dist-package/src/Typography/utils/variant-to-element/variant-to-element.d.ts.map +1 -0
- package/dist-package/src/Typography/utils/variant-to-element/variant-to-element.js +24 -0
- package/dist-package/src/Typography/utils/variant-to-element/variant-to-element.js.map +1 -0
- package/dist-package/src/index.d.ts +2 -0
- package/dist-package/src/index.d.ts.map +1 -0
- package/dist-package/src/index.js +2 -0
- package/dist-package/src/index.js.map +1 -0
- package/package.json +6 -6
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { ReactNode, HTMLAttributes } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import type { StandardProps, ColorType, TextLabelProps, SizeType } from '@toptal/picasso-shared';
|
|
4
|
+
export declare type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';
|
|
5
|
+
export interface Props extends StandardProps, TextLabelProps, HTMLAttributes<HTMLElement> {
|
|
6
|
+
/** Font variant for inner text */
|
|
7
|
+
variant?: 'heading' | 'body';
|
|
8
|
+
/** Text content */
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
/** Controls whether the Typography is inline or not */
|
|
11
|
+
inline?: boolean;
|
|
12
|
+
/** Text align of the inner text */
|
|
13
|
+
align?: TypographyAlign;
|
|
14
|
+
/** Size of the inner text */
|
|
15
|
+
size?: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'> | 'inherit';
|
|
16
|
+
/** Font weight of the inner text */
|
|
17
|
+
weight?: 'regular' | 'semibold' | 'inherit';
|
|
18
|
+
/** Invert color */
|
|
19
|
+
invert?: boolean;
|
|
20
|
+
/** Text color */
|
|
21
|
+
color?: ColorType;
|
|
22
|
+
/** Enable ellipsis for overflowing text */
|
|
23
|
+
noWrap?: boolean;
|
|
24
|
+
/** Rendered HTML markup */
|
|
25
|
+
as?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
|
|
26
|
+
/** Controls when the Typography should have an underline */
|
|
27
|
+
underline?: 'solid' | 'dashed';
|
|
28
|
+
/** Controls when the Typography should have line through */
|
|
29
|
+
lineThrough?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export declare const Typography: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
|
|
32
|
+
export default Typography;
|
|
33
|
+
//# sourceMappingURL=Typography.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAe,MAAM,OAAO,CAAA;AACnE,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,cAAc,EACd,QAAQ,EACT,MAAM,wBAAwB,CAAA;AA4G/B,oBAAY,eAAe,GACvB,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,GACP,SAAS,CAAA;AAEb,MAAM,WAAW,KACf,SAAQ,aAAa,EACnB,cAAc,EACd,cAAc,CAAC,WAAW,CAAC;IAC7B,kCAAkC;IAClC,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC5B,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,mCAAmC;IACnC,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,6BAA6B;IAC7B,IAAI,CAAC,EACD,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC,GACxE,SAAS,CAAA;IACb,oCAAoC;IACpC,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;IAC3C,mBAAmB;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iBAAiB;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,2BAA2B;IAC3B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAA;IACzD,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC9B,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,UAAU,2EA6DrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
|
|
@@ -0,0 +1,123 @@
|
|
|
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
|
+
};
|
|
12
|
+
import React, { forwardRef } from 'react';
|
|
13
|
+
import { toTitleCase } from '@toptal/picasso-utils';
|
|
14
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
15
|
+
import variantToElement from './utils/variant-to-element';
|
|
16
|
+
const COLORS = {
|
|
17
|
+
green: 'text-green-600',
|
|
18
|
+
red: 'text-red-500',
|
|
19
|
+
yellow: 'text-yellow-500',
|
|
20
|
+
'light-grey': 'text-gray-400',
|
|
21
|
+
grey: 'text-gray-500',
|
|
22
|
+
'grey-main-2': 'text-gray-600',
|
|
23
|
+
'dark-grey': 'text-graphite-700',
|
|
24
|
+
black: 'text-black',
|
|
25
|
+
'light-blue': 'text-blue-400',
|
|
26
|
+
inherit: 'text-inherit',
|
|
27
|
+
};
|
|
28
|
+
const WEIGHTS = {
|
|
29
|
+
regular: 'font-regular',
|
|
30
|
+
semibold: 'font-semibold',
|
|
31
|
+
inherit: 'font-inherit-weight',
|
|
32
|
+
};
|
|
33
|
+
const ALIGN = {
|
|
34
|
+
inherit: 'text-align-inherit',
|
|
35
|
+
left: 'text-left',
|
|
36
|
+
center: 'text-center',
|
|
37
|
+
right: 'text-right',
|
|
38
|
+
justify: 'text-justify',
|
|
39
|
+
};
|
|
40
|
+
const UNDERLINE = {
|
|
41
|
+
solid: 'underline decoration-solid',
|
|
42
|
+
dashed: 'underline decoration-dashed',
|
|
43
|
+
};
|
|
44
|
+
const VARIANT_WEIGHT = {
|
|
45
|
+
heading: {
|
|
46
|
+
xxsmall: 'font-semibold',
|
|
47
|
+
xsmall: 'font-regular',
|
|
48
|
+
small: 'font-semibold',
|
|
49
|
+
medium: 'font-semibold',
|
|
50
|
+
large: 'font-semibold',
|
|
51
|
+
xlarge: 'font-semibold',
|
|
52
|
+
inherit: 'font-regular',
|
|
53
|
+
},
|
|
54
|
+
body: {
|
|
55
|
+
xxsmall: 'font-regular',
|
|
56
|
+
xsmall: 'font-regular',
|
|
57
|
+
small: 'font-regular',
|
|
58
|
+
medium: 'font-regular',
|
|
59
|
+
large: 'font-regular',
|
|
60
|
+
xlarge: 'font-regular',
|
|
61
|
+
inherit: 'font-regular',
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
const VARIANT_SIZE = {
|
|
65
|
+
heading: {
|
|
66
|
+
xxsmall: 'text-2xs',
|
|
67
|
+
xsmall: 'text-md',
|
|
68
|
+
small: 'text-md',
|
|
69
|
+
medium: 'text-lg',
|
|
70
|
+
large: 'text-xl',
|
|
71
|
+
xlarge: 'text-2xl',
|
|
72
|
+
inherit: 'text-md',
|
|
73
|
+
},
|
|
74
|
+
body: {
|
|
75
|
+
xxsmall: 'text-2xs',
|
|
76
|
+
xsmall: 'text-xxs',
|
|
77
|
+
small: 'text-sm',
|
|
78
|
+
medium: 'text-md',
|
|
79
|
+
large: 'text-lg',
|
|
80
|
+
xlarge: 'text-md',
|
|
81
|
+
inherit: 'font-inherit-size leading-[1.5em]',
|
|
82
|
+
},
|
|
83
|
+
};
|
|
84
|
+
const VARIANT_COLOR = {
|
|
85
|
+
heading: {
|
|
86
|
+
xxsmall: 'text-black',
|
|
87
|
+
xsmall: 'text-graphite-700',
|
|
88
|
+
small: 'text-black',
|
|
89
|
+
medium: 'text-black',
|
|
90
|
+
large: 'text-black',
|
|
91
|
+
xlarge: 'text-black',
|
|
92
|
+
inherit: 'text-graphite-700',
|
|
93
|
+
},
|
|
94
|
+
body: {
|
|
95
|
+
xxsmall: 'text-graphite-700',
|
|
96
|
+
xsmall: 'text-graphite-700',
|
|
97
|
+
small: 'text-graphite-700',
|
|
98
|
+
medium: 'text-graphite-700',
|
|
99
|
+
large: 'text-black',
|
|
100
|
+
xlarge: 'text-graphite-700',
|
|
101
|
+
inherit: 'text-graphite-700',
|
|
102
|
+
},
|
|
103
|
+
};
|
|
104
|
+
export const Typography = forwardRef(function Typography(_a, ref) {
|
|
105
|
+
var { inline = false, noWrap = false, size = 'inherit', variant = 'body' } = _a, props = __rest(_a, ["inline", "noWrap", "size", "variant"]);
|
|
106
|
+
const { align, as, children, className, color, invert, lineThrough, style, titleCase, underline, weight } = props, rest = __rest(props, ["align", "as", "children", "className", "color", "invert", "lineThrough", "style", "titleCase", "underline", "weight"]);
|
|
107
|
+
const Component = as || variantToElement(variant, size);
|
|
108
|
+
const getColor = () => {
|
|
109
|
+
if (invert) {
|
|
110
|
+
return 'text-white';
|
|
111
|
+
}
|
|
112
|
+
if (color) {
|
|
113
|
+
return COLORS[color];
|
|
114
|
+
}
|
|
115
|
+
return VARIANT_COLOR[variant][size];
|
|
116
|
+
};
|
|
117
|
+
return (React.createElement(Component, Object.assign({ ref: ref, className: twMerge('m-0', VARIANT_SIZE[variant][size], getColor(), weight ? WEIGHTS[weight] : VARIANT_WEIGHT[variant][size], align ? ALIGN[align] : undefined, underline ? UNDERLINE[underline] : undefined, noWrap
|
|
118
|
+
? 'whitespace-nowrap overflow-ellipsis overflow-hidden'
|
|
119
|
+
: undefined, lineThrough ? 'line-through' : undefined, inline ? 'inline' : undefined, className), style: style }, rest), titleCase ? toTitleCase(children) : children));
|
|
120
|
+
});
|
|
121
|
+
Typography.displayName = 'Typography';
|
|
122
|
+
export default Typography;
|
|
123
|
+
//# sourceMappingURL=Typography.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../src/Typography/Typography.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAOzC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,gBAAgB,MAAM,4BAA4B,CAAA;AAEzD,MAAM,MAAM,GAAgD;IAC1D,KAAK,EAAE,gBAAgB;IACvB,GAAG,EAAE,cAAc;IACnB,MAAM,EAAE,iBAAiB;IACzB,YAAY,EAAE,eAAe;IAC7B,IAAI,EAAE,eAAe;IACrB,aAAa,EAAE,eAAe;IAC9B,WAAW,EAAE,mBAAmB;IAChC,KAAK,EAAE,YAAY;IACnB,YAAY,EAAE,eAAe;IAC7B,OAAO,EAAE,cAAc;CACxB,CAAA;AACD,MAAM,OAAO,GAAiD;IAC5D,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,qBAAqB;CAC/B,CAAA;AAED,MAAM,KAAK,GAAgD;IACzD,OAAO,EAAE,oBAAoB;IAC7B,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;CACxB,CAAA;AAED,MAAM,SAAS,GAAoD;IACjE,KAAK,EAAE,4BAA4B;IACnC,MAAM,EAAE,6BAA6B;CACtC,CAAA;AAED,MAAM,cAAc,GAGhB;IACF,OAAO,EAAE;QACP,OAAO,EAAE,eAAe;QACxB,MAAM,EAAE,cAAc;QACtB,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,cAAc;KACxB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;QACvB,MAAM,EAAE,cAAc;QACtB,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE,cAAc;QACtB,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE,cAAc;QACtB,OAAO,EAAE,cAAc;KACxB;CACF,CAAA;AAED,MAAM,YAAY,GAGd;IACF,OAAO,EAAE;QACP,OAAO,EAAE,UAAU;QACnB,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,SAAS;KACnB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,UAAU;QACnB,MAAM,EAAE,UAAU;QAClB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,mCAAmC;KAC7C;CACF,CAAA;AACD,MAAM,aAAa,GAGf;IACF,OAAO,EAAE;QACP,OAAO,EAAE,YAAY;QACrB,MAAM,EAAE,mBAAmB;QAC3B,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,YAAY;QACpB,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,YAAY;QACpB,OAAO,EAAE,mBAAmB;KAC7B;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,mBAAmB;QAC5B,MAAM,EAAE,mBAAmB;QAC3B,KAAK,EAAE,mBAAmB;QAC1B,MAAM,EAAE,mBAAmB;QAC3B,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,mBAAmB;QAC3B,OAAO,EAAE,mBAAmB;KAC7B;CACF,CAAA;AAyCD,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAqB,SAAS,UAAU,CAC1E,EAMQ,EACR,GAAG;QAPH,EACE,MAAM,GAAG,KAAK,EACd,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,MAAM,OAEV,EADH,KAAK,cALV,uCAMC,CADS;IAIV,MAAM,EACJ,KAAK,EACL,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,KAAK,EACL,SAAS,EACT,SAAS,EACT,MAAM,KAEJ,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,uHAaL,CAAQ,CAAA;IAET,MAAM,SAAS,GAAgB,EAAE,IAAI,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;IAEpE,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,MAAM,EAAE;YACV,OAAO,YAAY,CAAA;SACpB;QACD,IAAI,KAAK,EAAE;YACT,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;SACrB;QAED,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAA;IACrC,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,KAAK,EACL,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,EAC3B,QAAQ,EAAE,EACV,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,EACxD,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAChC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAC5C,MAAM;YACJ,CAAC,CAAC,qDAAqD;YACvD,CAAC,CAAC,SAAS,EACb,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EACxC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC7B,SAAS,CACV,EACD,KAAK,EAAE,KAAK,IACR,IAAI,GAEP,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CACnC,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { OmitInternalProps } from '@toptal/picasso-shared';
|
|
2
|
+
import type { Props } from './Typography';
|
|
3
|
+
export { default as Typography } from './Typography';
|
|
4
|
+
export type { TypographyAlign } from './Typography';
|
|
5
|
+
export declare type TypographyProps = OmitInternalProps<Props>;
|
|
6
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,oBAAY,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Typography/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Typography/utils/variant-to-element/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Typography/utils/variant-to-element/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
export declare const DEFAULT_ELEMENT: "p";
|
|
2
|
+
declare const variantsMapping: {
|
|
3
|
+
heading: {
|
|
4
|
+
xxsmall: "p";
|
|
5
|
+
xsmall: "p";
|
|
6
|
+
small: "h4";
|
|
7
|
+
medium: "h3";
|
|
8
|
+
large: "h2";
|
|
9
|
+
xlarge: "h1";
|
|
10
|
+
inherit: "p";
|
|
11
|
+
};
|
|
12
|
+
body: {
|
|
13
|
+
xxsmall: "p";
|
|
14
|
+
xsmall: "p";
|
|
15
|
+
small: "p";
|
|
16
|
+
medium: "p";
|
|
17
|
+
large: "p";
|
|
18
|
+
xlarge: "p";
|
|
19
|
+
inherit: "p";
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
declare const variantToElement: <V extends "heading" | "body", S extends "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "inherit">(variant: V, size: S) => {
|
|
23
|
+
heading: {
|
|
24
|
+
xxsmall: "p";
|
|
25
|
+
xsmall: "p";
|
|
26
|
+
small: "h4";
|
|
27
|
+
medium: "h3";
|
|
28
|
+
large: "h2";
|
|
29
|
+
xlarge: "h1";
|
|
30
|
+
inherit: "p";
|
|
31
|
+
};
|
|
32
|
+
body: {
|
|
33
|
+
xxsmall: "p";
|
|
34
|
+
xsmall: "p";
|
|
35
|
+
small: "p";
|
|
36
|
+
medium: "p";
|
|
37
|
+
large: "p";
|
|
38
|
+
xlarge: "p";
|
|
39
|
+
inherit: "p";
|
|
40
|
+
};
|
|
41
|
+
}[V][S];
|
|
42
|
+
export default variantToElement;
|
|
43
|
+
//# sourceMappingURL=variant-to-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"variant-to-element.d.ts","sourceRoot":"","sources":["../../../../../src/Typography/utils/variant-to-element/variant-to-element.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,KAAe,CAAA;AAE3C,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;CAmBpB,CAAA;AAED,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;OAQ6C,CAAA;AAEnE,eAAe,gBAAgB,CAAA"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export const DEFAULT_ELEMENT = 'p';
|
|
2
|
+
const variantsMapping = {
|
|
3
|
+
heading: {
|
|
4
|
+
xxsmall: DEFAULT_ELEMENT,
|
|
5
|
+
xsmall: DEFAULT_ELEMENT,
|
|
6
|
+
small: 'h4',
|
|
7
|
+
medium: 'h3',
|
|
8
|
+
large: 'h2',
|
|
9
|
+
xlarge: 'h1',
|
|
10
|
+
inherit: DEFAULT_ELEMENT,
|
|
11
|
+
},
|
|
12
|
+
body: {
|
|
13
|
+
xxsmall: DEFAULT_ELEMENT,
|
|
14
|
+
xsmall: DEFAULT_ELEMENT,
|
|
15
|
+
small: DEFAULT_ELEMENT,
|
|
16
|
+
medium: DEFAULT_ELEMENT,
|
|
17
|
+
large: DEFAULT_ELEMENT,
|
|
18
|
+
xlarge: DEFAULT_ELEMENT,
|
|
19
|
+
inherit: DEFAULT_ELEMENT,
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
const variantToElement = (variant, size) => variantsMapping[variant][size];
|
|
23
|
+
export default variantToElement;
|
|
24
|
+
//# sourceMappingURL=variant-to-element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"variant-to-element.js","sourceRoot":"","sources":["../../../../../src/Typography/utils/variant-to-element/variant-to-element.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAG,GAAY,CAAA;AAE3C,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE;QACP,OAAO,EAAE,eAAe;QACxB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,IAAa;QACpB,MAAM,EAAE,IAAa;QACrB,KAAK,EAAE,IAAa;QACpB,MAAM,EAAE,IAAa;QACrB,OAAO,EAAE,eAAe;KACzB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,eAAe;QACxB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,eAAe;KACzB;CACF,CAAA;AAED,MAAM,gBAAgB,GAAG,CAMvB,OAAU,EACV,IAAO,EACyB,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAA;AAEnE,eAAe,gBAAgB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-typography",
|
|
3
|
-
"version": "4.0.5-alpha-
|
|
3
|
+
"version": "4.0.5-alpha-1757603777486.0",
|
|
4
4
|
"description": "Toptal UI components library - Typography",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@toptal/picasso-utils": "3.1.1-alpha-
|
|
26
|
+
"@toptal/picasso-utils": "3.1.1-alpha-1757603777486.0",
|
|
27
27
|
"ap-style-title-case": "^1.1.2"
|
|
28
28
|
},
|
|
29
29
|
"sideEffects": [
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
],
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"@material-ui/core": "4.12.4",
|
|
35
|
-
"@toptal/picasso-provider": "5.0.2-alpha-
|
|
36
|
-
"@toptal/picasso-tailwind-merge": "^2.0.4-alpha-
|
|
35
|
+
"@toptal/picasso-provider": "5.0.2-alpha-1757603777486.0",
|
|
36
|
+
"@toptal/picasso-tailwind-merge": "^2.0.4-alpha-1757603777486.0",
|
|
37
37
|
"react": ">=16.12.0 < 19.0.0",
|
|
38
38
|
"tailwindcss": ">=3"
|
|
39
39
|
},
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
".": "./dist-package/src/index.js"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@toptal/picasso-provider": "5.0.2-alpha-
|
|
45
|
-
"@toptal/picasso-test-utils": "1.1.2-alpha-
|
|
44
|
+
"@toptal/picasso-provider": "5.0.2-alpha-1757603777486.0",
|
|
45
|
+
"@toptal/picasso-test-utils": "1.1.2-alpha-1757603777486.0"
|
|
46
46
|
},
|
|
47
47
|
"files": [
|
|
48
48
|
"dist-package/**",
|