oolib 2.134.0 → 2.134.2
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/MetaBlock/utils/parseMetaBlockConfig.js +1 -1
- package/dist/components/PercentBarChart/comps/CustomizedLabel/index.d.ts +16 -0
- package/dist/components/PercentBarChart/comps/CustomizedLabel/index.js +24 -0
- package/dist/components/PercentBarChart/index.d.ts +7 -1
- package/dist/components/PercentBarChart/index.js +34 -64
- package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxButton/index.js +5 -1
- package/dist/stories/Oolib/components/PercentBarChart.stories.js +1 -1
- package/dist/stories/v2/themes/Typo.stories.js +2 -0
- package/dist/v2/components/Typo2/index.d.ts +2 -0
- package/dist/v2/components/Typo2/index.js +5 -1
- package/dist/v2/components/Typo2/index.styled.d.ts +2 -0
- package/dist/v2/components/Typo2/index.styled.js +23 -21
- package/dist/v2/themes/typo.d.ts +2 -0
- package/dist/v2/themes/typo.js +23 -19
- package/package.json +1 -1
|
@@ -16,7 +16,7 @@ var parseMetaBlockConfig = function (_a) {
|
|
|
16
16
|
switch (key) {
|
|
17
17
|
case "name":
|
|
18
18
|
display = (0, getVal_1.getVal)(data, valuePath);
|
|
19
|
-
if (display) {
|
|
19
|
+
if (display && typeof display === 'string') {
|
|
20
20
|
//reduce surname down to initials
|
|
21
21
|
var split = display.split(" ");
|
|
22
22
|
var name_1 = split[0];
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TBaseConfigs } from "../..";
|
|
3
|
+
export declare const CustomizedLabel: ({ y, value, showCount, suffix, opacity, _base_configs }: {
|
|
4
|
+
y?: number | string;
|
|
5
|
+
width?: number | string;
|
|
6
|
+
height?: number | string;
|
|
7
|
+
value?: {
|
|
8
|
+
percentage: number;
|
|
9
|
+
count: number;
|
|
10
|
+
name: string;
|
|
11
|
+
};
|
|
12
|
+
opacity: number;
|
|
13
|
+
suffix?: string;
|
|
14
|
+
showCount?: boolean;
|
|
15
|
+
_base_configs: TBaseConfigs;
|
|
16
|
+
}) => React.JSX.Element;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.CustomizedLabel = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var themes_1 = require("../../../../themes");
|
|
9
|
+
var CustomizedLabel = function (_a) {
|
|
10
|
+
var y = _a.y,
|
|
11
|
+
// width, //i think this is the width and the height of the bar. dont need it just yet..
|
|
12
|
+
// height,
|
|
13
|
+
value = _a.value, showCount = _a.showCount, suffix = _a.suffix, opacity = _a.opacity, _base_configs = _a._base_configs;
|
|
14
|
+
var yOffset = -(_base_configs.labelToBarGap + _base_configs.barHeight);
|
|
15
|
+
var percent = value.percentage;
|
|
16
|
+
var count = value.count;
|
|
17
|
+
var name = value.name;
|
|
18
|
+
var percentXOffset = 0;
|
|
19
|
+
var xOffsetRelative = 10;
|
|
20
|
+
return (react_1.default.createElement("text", { opacity: opacity, x: percentXOffset, y: y + yOffset, fill: themes_1.colors.greyColor100, textAnchor: "start", dominantBaseline: "middle", className: "UI_BODY_BOLD_SM" }, "".concat(percent).concat(suffix || ""),
|
|
21
|
+
react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, showCount ? count : ''),
|
|
22
|
+
react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, name)));
|
|
23
|
+
};
|
|
24
|
+
exports.CustomizedLabel = CustomizedLabel;
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export
|
|
2
|
+
export type TBaseConfigs = {
|
|
3
|
+
barHeight: number;
|
|
4
|
+
labelToBarGap: number;
|
|
5
|
+
barGap: number;
|
|
6
|
+
};
|
|
7
|
+
export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, colorIdx, valueSuffix, showCount }: {
|
|
3
8
|
data: any;
|
|
4
9
|
valuePath: string;
|
|
5
10
|
labelPath: string;
|
|
6
11
|
title?: string;
|
|
7
12
|
onClick?: (name: string) => void;
|
|
8
13
|
colors?: string[];
|
|
14
|
+
colorIdx?: number;
|
|
9
15
|
valueSuffix?: string;
|
|
10
16
|
showCount?: boolean;
|
|
11
17
|
}) => React.JSX.Element;
|
|
@@ -49,12 +49,12 @@ var recharts_1 = require("recharts");
|
|
|
49
49
|
var _EXPORTS_1 = require("../../utils/_EXPORTS");
|
|
50
50
|
var Typo_1 = require("../Typo");
|
|
51
51
|
var getTotalCount_1 = require("../../utils/getTotalCount");
|
|
52
|
-
var
|
|
52
|
+
var CustomizedLabel_1 = require("./comps/CustomizedLabel");
|
|
53
53
|
var chartColors = [
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
54
|
+
"#5C80FF",
|
|
55
|
+
"#FFA800",
|
|
56
|
+
"#00BC8F",
|
|
57
|
+
"#FF51CE",
|
|
58
58
|
"rgb(173, 89, 108)",
|
|
59
59
|
"rgb(114, 190, 244)",
|
|
60
60
|
"rgb(255, 178, 122)",
|
|
@@ -64,34 +64,18 @@ var chartColors = [
|
|
|
64
64
|
"rgb(204, 128, 217)",
|
|
65
65
|
"rgb(91, 184, 175)",
|
|
66
66
|
];
|
|
67
|
-
var
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
};
|
|
72
|
-
var renderCustomizedValue = function (_a) {
|
|
73
|
-
var y = _a.y, width = _a.width, height = _a.height, value = _a.value, showCount = _a.showCount, suffix = _a.suffix, opacity = _a.opacity;
|
|
74
|
-
var xOffset = 5;
|
|
75
|
-
var yOffset = 2;
|
|
76
|
-
var percent = value.split("_")[0]; //cuz value here is always percentage_count;
|
|
77
|
-
var count = value.split("_")[1];
|
|
78
|
-
return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, fontWeight: "600", x: width + xOffset, y: y + height / 2 + yOffset, fill: "black", textAnchor: "start", dominantBaseline: "middle", className: "SANS_2" }, "".concat(percent).concat(suffix || ""),
|
|
79
|
-
react_1.default.createElement("tspan", { fill: themes_1.colors.greyColor50, y: y + height / 2 + yOffset }, showCount ? " | ".concat(count) : '')));
|
|
80
|
-
};
|
|
81
|
-
var _dataSample = [
|
|
82
|
-
{ name: "Great food", value: 72.3, Type: 0 },
|
|
83
|
-
{ name: "Great Ambience", value: 10.1, Type: 1 },
|
|
84
|
-
{ name: "Great Music", value: 9.87, Type: 2 },
|
|
85
|
-
{ name: "Great Cocktails", value: 5.63, Type: 3 },
|
|
86
|
-
];
|
|
87
|
-
var configs = {
|
|
88
|
-
barHeight: 24,
|
|
89
|
-
barGap: 32,
|
|
67
|
+
var _base_configs = {
|
|
68
|
+
barHeight: 6,
|
|
69
|
+
labelToBarGap: 6,
|
|
70
|
+
barGap: 36,
|
|
90
71
|
};
|
|
91
72
|
var PercentBarChart = function (_a) {
|
|
92
|
-
var
|
|
93
|
-
|
|
94
|
-
labelPath =
|
|
73
|
+
var _data = _a.data, title = _a.title, _b = _a.valuePath, valuePath = _b === void 0 ? "value" : _b, // is relevant only for the initial data setting in useMemo. after that, the actual percentage is always stored against the 'percentage' key, and the count against the 'count' key
|
|
74
|
+
_c = _a.labelPath, // is relevant only for the initial data setting in useMemo. after that, the actual percentage is always stored against the 'percentage' key, and the count against the 'count' key
|
|
75
|
+
labelPath = _c === void 0 ? "name" : _c, // same as above for label path
|
|
76
|
+
onClick = _a.onClick, _d = _a.colors, colors = _d === void 0 ? chartColors : _d, _e = _a.colorIdx, colorIdx = _e === void 0 ? 0 : _e, //if you are rendering a grid of such charts, then maybe you want each of their colors to be different. in that case, increment this idx from the parent component
|
|
77
|
+
_f = _a.valueSuffix, //if you are rendering a grid of such charts, then maybe you want each of their colors to be different. in that case, increment this idx from the parent component
|
|
78
|
+
valueSuffix = _f === void 0 ? "%" : _f, _g = _a.showCount, showCount = _g === void 0 ? true : _g;
|
|
95
79
|
var totalCount = (0, getTotalCount_1.getTotalCount)({ data: _data, countPath: valuePath });
|
|
96
80
|
var data = (0, react_1.useMemo)(function () {
|
|
97
81
|
var finalData = __spreadArray([], _data, true);
|
|
@@ -99,12 +83,11 @@ var PercentBarChart = function (_a) {
|
|
|
99
83
|
var percentage = (0, _EXPORTS_1.getPercentage)((0, _EXPORTS_1.getVal)(d, valuePath), totalCount);
|
|
100
84
|
var count = (0, _EXPORTS_1.getVal)(d, valuePath);
|
|
101
85
|
return ({
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
color: colors[i % colors.length],
|
|
86
|
+
labels: {
|
|
87
|
+
percentage: percentage,
|
|
88
|
+
count: count,
|
|
89
|
+
name: (0, _EXPORTS_1.getVal)(d, labelPath),
|
|
90
|
+
},
|
|
108
91
|
});
|
|
109
92
|
});
|
|
110
93
|
finalData.sort(function (a, b) {
|
|
@@ -119,47 +102,34 @@ var PercentBarChart = function (_a) {
|
|
|
119
102
|
return (react_1.default.createElement("div", null,
|
|
120
103
|
title && (react_1.default.createElement(Typo_1.SANS_4_5, { style: { paddingBottom: "2rem" }, semibold: true }, title)),
|
|
121
104
|
react_1.default.createElement("div", { style: {
|
|
122
|
-
height: "".concat((
|
|
105
|
+
height: "".concat((_base_configs.barHeight + _base_configs.barGap) * data.length, "px"),
|
|
123
106
|
width: "100%",
|
|
124
107
|
} },
|
|
125
108
|
react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
|
|
126
109
|
react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, barCategoryGap: 20, data: data, layout: "vertical", margin: {
|
|
127
110
|
top: 0,
|
|
128
|
-
right:
|
|
111
|
+
right: 0,
|
|
129
112
|
left: 0,
|
|
130
113
|
bottom: 0,
|
|
131
114
|
} },
|
|
132
115
|
react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
|
|
133
|
-
react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category"
|
|
134
|
-
react_1.default.createElement(recharts_1.Bar, __assign({ radius:
|
|
116
|
+
react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category" }),
|
|
117
|
+
react_1.default.createElement(recharts_1.Bar, __assign({ radius: 16, style: onClick ? { cursor: "pointer" } : {}, dataKey: "labels.percentage" }, (onClick
|
|
135
118
|
? {
|
|
136
|
-
onMouseOver: function (args) { return setActiveBar(args
|
|
119
|
+
onMouseOver: function (args) { return setActiveBar(args.labels.name); },
|
|
137
120
|
onMouseOut: function () { return setActiveBar(undefined); },
|
|
138
121
|
onMouseDown: function (args) {
|
|
139
|
-
setActiveBar(args
|
|
140
|
-
onClick(args
|
|
122
|
+
setActiveBar(args.labels.name);
|
|
123
|
+
onClick(args.labels.name);
|
|
141
124
|
},
|
|
142
125
|
}
|
|
143
126
|
: {})),
|
|
144
|
-
react_1.default.createElement(recharts_1.LabelList, { dataKey:
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
});
|
|
150
|
-
|
|
151
|
-
react_1.default.createElement(recharts_1.LabelList, { dataKey: "percentage_count", offset: 0, content: function (props) {
|
|
152
|
-
console.log({ props: props });
|
|
153
|
-
return renderCustomizedValue({
|
|
154
|
-
y: props.y,
|
|
155
|
-
width: props.width,
|
|
156
|
-
height: props.height,
|
|
157
|
-
value: props.value, //here value is the percentage
|
|
158
|
-
showCount: showCount,
|
|
159
|
-
suffix: valueSuffix,
|
|
160
|
-
opacity: changeBarOpacityFn(props['name']),
|
|
161
|
-
});
|
|
162
|
-
} }),
|
|
163
|
-
data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(entry['name']), key: "cell-".concat(index), height: configs.barHeight, fill: entry.color })); })))))));
|
|
127
|
+
react_1.default.createElement(recharts_1.LabelList, { dataKey: "labels", offset: 0, content: function (props) { return react_1.default.createElement(CustomizedLabel_1.CustomizedLabel, { y: props.y,
|
|
128
|
+
width: props.width,
|
|
129
|
+
height: props.height,
|
|
130
|
+
value: props.value, //here value is the percentage
|
|
131
|
+
showCount: showCount, suffix: valueSuffix,
|
|
132
|
+
opacity: changeBarOpacityFn(props.value.name), _base_configs: _base_configs }); } }),
|
|
133
|
+
data.map(function (d, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(d.labels.name), key: "cell-".concat(index), height: _base_configs.barHeight, fill: colors[colorIdx] })); })))))));
|
|
164
134
|
};
|
|
165
135
|
exports.PercentBarChart = PercentBarChart;
|
|
@@ -20,7 +20,11 @@ var CheckboxButton = function (_a) {
|
|
|
20
20
|
var id = _a.id, className = _a.className, _isSelected = _a.isSelected, value = _a.value, //can be used interchangibly
|
|
21
21
|
onChange = _a.onChange, disabled = _a.disabled, invert = _a.invert, S = _a.S;
|
|
22
22
|
var isSelected = (_b = _isSelected !== null && _isSelected !== void 0 ? _isSelected : value) !== null && _b !== void 0 ? _b : false;
|
|
23
|
-
return (react_1.default.createElement(styled_1.StyledCheckbox, { onClick: function () {
|
|
23
|
+
return (react_1.default.createElement(styled_1.StyledCheckbox, { onClick: function (e) {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
e.stopPropagation();
|
|
26
|
+
onChange && onChange(id, !isSelected);
|
|
27
|
+
}, className: className, isSelected: isSelected, disabled: disabled, invert: invert, S: S }, isSelected &&
|
|
24
28
|
react_1.default.createElement(Check, { weight: "bold", color: invert ? greyColor100 : white, size: 16, style: { flexShrink: 0 } })));
|
|
25
29
|
};
|
|
26
30
|
exports.CheckboxButton = CheckboxButton;
|
|
@@ -20,6 +20,6 @@ var PercentBarChart_ = function (args) {
|
|
|
20
20
|
console.log("Bar clicked: ".concat(name));
|
|
21
21
|
};
|
|
22
22
|
return (react_1.default.createElement("div", null,
|
|
23
|
-
react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, labelPath: "display", valuePath: "value", title: "This is PercentBarChart representing the data" })));
|
|
23
|
+
react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, labelPath: "display", valuePath: "value", title: "This is PercentBarChart representing the data", onClick: handleBarClick })));
|
|
24
24
|
};
|
|
25
25
|
exports.PercentBarChart_ = PercentBarChart_;
|
|
@@ -85,6 +85,8 @@ var UIFont = function (args) { return (react_1.default.createElement("div", { st
|
|
|
85
85
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_CARDTITLE_BOLD, compName: "UI_CARDTITLE_BOLD" }),
|
|
86
86
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_BODY, compName: "UI_BODY" }),
|
|
87
87
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_BODY_BOLD, compName: "UI_BODY_BOLD" }),
|
|
88
|
+
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_BODY_SM, compName: "UI_BODY_SM" }),
|
|
89
|
+
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_BODY_BOLD_SM, compName: "UI_BODY_BOLD_SM" }),
|
|
88
90
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_PARAGRAPH, compName: "UI_PARAGRAPH" }),
|
|
89
91
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_PARAGRAPH_BOLD, compName: "UI_PARAGRAPH_BOLD" }),
|
|
90
92
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_CAPTION, compName: "UI_CAPTION" }),
|
|
@@ -32,7 +32,9 @@ export declare const UI_TITLE_SM: React.FunctionComponent<TypoCompProps>;
|
|
|
32
32
|
export declare const UI_CARDTITLE: React.FunctionComponent<TypoCompProps>;
|
|
33
33
|
export declare const UI_CARDTITLE_BOLD: React.FunctionComponent<TypoCompProps>;
|
|
34
34
|
export declare const UI_BODY: React.FunctionComponent<TypoCompProps>;
|
|
35
|
+
export declare const UI_BODY_SM: React.FunctionComponent<TypoCompProps>;
|
|
35
36
|
export declare const UI_BODY_BOLD: React.FunctionComponent<TypoCompProps>;
|
|
37
|
+
export declare const UI_BODY_BOLD_SM: React.FunctionComponent<TypoCompProps>;
|
|
36
38
|
export declare const UI_PARAGRAPH: React.FunctionComponent<TypoCompProps>;
|
|
37
39
|
export declare const UI_PARAGRAPH_BOLD: React.FunctionComponent<TypoCompProps>;
|
|
38
40
|
export declare const UI_CAPTION: React.FunctionComponent<TypoCompProps>;
|
|
@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
25
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
26
|
};
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
-
exports.TypoV2ClassesProvider = exports.CONTENT_BODY_POSTIT = exports.CONTENT_TITLE_POSTIT = exports.CONTENT_QUOTE = exports.CONTENT_BODY_BOLD_ITALIC = exports.CONTENT_BODY_ITALIC = exports.CONTENT_BODY_BOLD = exports.CONTENT_BODY = exports.CONTENT_H3 = exports.CONTENT_H2 = exports.CONTENT_H1 = exports.UI_STAT_SM = exports.UI_STAT_LG = exports.UI_HELPTEXT = exports.UI_TAG = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD = exports.UI_BODY = exports.UI_CARDTITLE_BOLD = exports.UI_CARDTITLE = exports.UI_TITLE_SM = exports.UI_TITLE = exports.UI_HEADLINE_SM = exports.UI_HEADLINE = exports.UI_DISPLAY = void 0;
|
|
28
|
+
exports.TypoV2ClassesProvider = exports.CONTENT_BODY_POSTIT = exports.CONTENT_TITLE_POSTIT = exports.CONTENT_QUOTE = exports.CONTENT_BODY_BOLD_ITALIC = exports.CONTENT_BODY_ITALIC = exports.CONTENT_BODY_BOLD = exports.CONTENT_BODY = exports.CONTENT_H3 = exports.CONTENT_H2 = exports.CONTENT_H1 = exports.UI_STAT_SM = exports.UI_STAT_LG = exports.UI_HELPTEXT = exports.UI_TAG = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM = exports.UI_BODY_BOLD = exports.UI_BODY_SM = exports.UI_BODY = exports.UI_CARDTITLE_BOLD = exports.UI_CARDTITLE = exports.UI_TITLE_SM = exports.UI_TITLE = exports.UI_HEADLINE_SM = exports.UI_HEADLINE = exports.UI_DISPLAY = void 0;
|
|
29
29
|
var react_1 = __importDefault(require("react"));
|
|
30
30
|
var index_styled_1 = require("./index.styled");
|
|
31
31
|
var utilsOolib_1 = require("../../../utilsOolib");
|
|
@@ -87,8 +87,12 @@ var UI_CARDTITLE_BOLD = function (props) { return react_1.default.createElement(
|
|
|
87
87
|
exports.UI_CARDTITLE_BOLD = UI_CARDTITLE_BOLD;
|
|
88
88
|
var UI_BODY = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_BODY_STYLED }); };
|
|
89
89
|
exports.UI_BODY = UI_BODY;
|
|
90
|
+
var UI_BODY_SM = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_BODY_SM_STYLED }); };
|
|
91
|
+
exports.UI_BODY_SM = UI_BODY_SM;
|
|
90
92
|
var UI_BODY_BOLD = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_BODY_BOLD_STYLED }); };
|
|
91
93
|
exports.UI_BODY_BOLD = UI_BODY_BOLD;
|
|
94
|
+
var UI_BODY_BOLD_SM = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_BODY_BOLD_SM_STYLED }); };
|
|
95
|
+
exports.UI_BODY_BOLD_SM = UI_BODY_BOLD_SM;
|
|
92
96
|
var UI_PARAGRAPH = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_PARAGRAPH_STYLED }); };
|
|
93
97
|
exports.UI_PARAGRAPH = UI_PARAGRAPH;
|
|
94
98
|
var UI_PARAGRAPH_BOLD = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_PARAGRAPH_BOLD_STYLED }); };
|
|
@@ -6,7 +6,9 @@ export declare const UI_TITLE_SM_STYLED: import("styled-components").StyledCompo
|
|
|
6
6
|
export declare const UI_CARDTITLE_STYLED: import("styled-components").StyledComponent<"h3", any, {}, never>;
|
|
7
7
|
export declare const UI_CARDTITLE_BOLD_STYLED: import("styled-components").StyledComponent<"h3", any, {}, never>;
|
|
8
8
|
export declare const UI_BODY_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
9
|
+
export declare const UI_BODY_SM_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
9
10
|
export declare const UI_BODY_BOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
11
|
+
export declare const UI_BODY_BOLD_SM_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
10
12
|
export declare const UI_PARAGRAPH_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
11
13
|
export declare const UI_PARAGRAPH_BOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
12
14
|
export declare const UI_CAPTION_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.TYPO_V2_CLASSES = exports.CONTENT_BODY_POSTIT_STYLED = exports.CONTENT_TITLE_POSTIT_STYLED = exports.CONTENT_QUOTE_STYLED = exports.CONTENT_BODY_BOLD_ITALIC_STYLED = exports.CONTENT_BODY_ITALIC_STYLED = exports.CONTENT_BODY_BOLD_STYLED = exports.CONTENT_BODY_STYLED = exports.CONTENT_H3_STYLED = exports.CONTENT_H2_STYLED = exports.CONTENT_H1_STYLED = exports.UI_STAT_SM_STYLED = exports.UI_STAT_LG_STYLED = exports.UI_HELPTEXT_STYLED = exports.UI_TAG_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_STYLED = exports.UI_BODY_STYLED = exports.UI_CARDTITLE_BOLD_STYLED = exports.UI_CARDTITLE_STYLED = exports.UI_TITLE_SM_STYLED = exports.UI_TITLE_STYLED = exports.UI_HEADLINE_SM_STYLED = exports.UI_HEADLINE_STYLED = exports.UI_DISPLAY_STYLED = void 0;
|
|
10
|
+
exports.TYPO_V2_CLASSES = exports.CONTENT_BODY_POSTIT_STYLED = exports.CONTENT_TITLE_POSTIT_STYLED = exports.CONTENT_QUOTE_STYLED = exports.CONTENT_BODY_BOLD_ITALIC_STYLED = exports.CONTENT_BODY_ITALIC_STYLED = exports.CONTENT_BODY_BOLD_STYLED = exports.CONTENT_BODY_STYLED = exports.CONTENT_H3_STYLED = exports.CONTENT_H2_STYLED = exports.CONTENT_H1_STYLED = exports.UI_STAT_SM_STYLED = exports.UI_STAT_LG_STYLED = exports.UI_HELPTEXT_STYLED = exports.UI_TAG_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_STYLED = exports.UI_BODY_BOLD_STYLED = exports.UI_BODY_SM_STYLED = exports.UI_BODY_STYLED = exports.UI_CARDTITLE_BOLD_STYLED = exports.UI_CARDTITLE_STYLED = exports.UI_TITLE_SM_STYLED = exports.UI_TITLE_STYLED = exports.UI_HEADLINE_SM_STYLED = exports.UI_HEADLINE_STYLED = exports.UI_DISPLAY_STYLED = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var typo_1 = require("../../themes/typo");
|
|
13
13
|
// UI Fonts
|
|
@@ -19,26 +19,28 @@ exports.UI_TITLE_SM_STYLED = styled_components_1.default.h1(templateObject_5 ||
|
|
|
19
19
|
exports.UI_CARDTITLE_STYLED = styled_components_1.default.h3(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CARDTITLE);
|
|
20
20
|
exports.UI_CARDTITLE_BOLD_STYLED = styled_components_1.default.h3(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CARDTITLE_BOLD);
|
|
21
21
|
exports.UI_BODY_STYLED = styled_components_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY);
|
|
22
|
-
exports.
|
|
23
|
-
exports.
|
|
24
|
-
exports.
|
|
25
|
-
exports.
|
|
26
|
-
exports.
|
|
27
|
-
exports.
|
|
28
|
-
exports.
|
|
29
|
-
exports.
|
|
22
|
+
exports.UI_BODY_SM_STYLED = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SM);
|
|
23
|
+
exports.UI_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), typo_1.typo.UI_BODY_BOLD);
|
|
24
|
+
exports.UI_BODY_BOLD_SM_STYLED = styled_components_1.default.p(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_BOLD_SM);
|
|
25
|
+
exports.UI_PARAGRAPH_STYLED = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_PARAGRAPH);
|
|
26
|
+
exports.UI_PARAGRAPH_BOLD_STYLED = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_PARAGRAPH_BOLD);
|
|
27
|
+
exports.UI_CAPTION_STYLED = styled_components_1.default.p(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION);
|
|
28
|
+
exports.UI_TAG_STYLED = styled_components_1.default.p(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_TAG);
|
|
29
|
+
exports.UI_HELPTEXT_STYLED = styled_components_1.default.p(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_HELPTEXT);
|
|
30
|
+
exports.UI_STAT_LG_STYLED = styled_components_1.default.h2(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_STAT_LG);
|
|
31
|
+
exports.UI_STAT_SM_STYLED = styled_components_1.default.h3(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
|
|
30
32
|
// Content Fonts
|
|
31
33
|
])), typo_1.typo.UI_STAT_SM);
|
|
32
34
|
// Content Fonts
|
|
33
|
-
exports.CONTENT_H1_STYLED = styled_components_1.default.h1(
|
|
34
|
-
exports.CONTENT_H2_STYLED = styled_components_1.default.h2(
|
|
35
|
-
exports.CONTENT_H3_STYLED = styled_components_1.default.h3(
|
|
36
|
-
exports.CONTENT_BODY_STYLED = styled_components_1.default.p(
|
|
37
|
-
exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(
|
|
38
|
-
exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(
|
|
39
|
-
exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(
|
|
40
|
-
exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(
|
|
41
|
-
exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(
|
|
42
|
-
exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(
|
|
43
|
-
exports.TYPO_V2_CLASSES = styled_components_1.default.div(
|
|
44
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27;
|
|
35
|
+
exports.CONTENT_H1_STYLED = styled_components_1.default.h1(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n ", " \n "], ["\n ", " \n "])), typo_1.typo.CONTENT_H1);
|
|
36
|
+
exports.CONTENT_H2_STYLED = styled_components_1.default.h2(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H2);
|
|
37
|
+
exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H3);
|
|
38
|
+
exports.CONTENT_BODY_STYLED = styled_components_1.default.p(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY);
|
|
39
|
+
exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
|
|
40
|
+
exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
|
|
41
|
+
exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
|
|
42
|
+
exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_QUOTE);
|
|
43
|
+
exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
|
|
44
|
+
exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
|
|
45
|
+
exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n .UI_DISPLAY {\n ", "\n }\n\n .UI_HEADLINE {\n ", "\n }\n\n .UI_HEADLINE_SM {\n ", "\n }\n\n .UI_TITLE {\n ", "\n }\n\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_CARDTITLE {\n ", "\n }\n \n .UI_CARDTITLE_BOLD {\n ", "\n }\n\n .UI_BODY {\n ", "\n }\n\n .UI_BODY_SM {\n ", "\n }\n\n\n .UI_BODY_BOLD {\n ", "\n }\n\n .UI_BODY_BOLD_SM {\n ", "\n }\n\n .UI_PARAGRAPH {\n ", "\n }\n\n .UI_PARAGRAPH_BOLD {\n ", "\n }\n\n .UI_CAPTION {\n ", "\n }\n\n \n .UI_TAG {\n ", "\n }\n \n .UI_HELPTEXT {\n ", "\n }\n\n .UI_STAT_LG {\n ", "\n }\n\n .UI_STAT_SM {\n ", "\n }\n\n\n .CONTENT_H1 {\n ", "\n }\n .CONTENT_H2 {\n ", "\n }\n .CONTENT_H3 {\n ", "\n }\n .CONTENT_BODY {\n ", "\n }\n\n .CONTENT_BODY_BOLD {\n ", "\n }\n .CONTENT_BODY_ITALIC {\n ", "\n }\n .CONTENT_BODY_BOLD_ITALIC {\n ", "\n }\n .CONTENT_QUOTE {\n ", "\n }\n\n .CONTENT_TITLE_POSTIT {\n ", "\n }\n .CONTENT_BODY_POSTIT {\n ", "\n }\n"], ["\n .UI_DISPLAY {\n ", "\n }\n\n .UI_HEADLINE {\n ", "\n }\n\n .UI_HEADLINE_SM {\n ", "\n }\n\n .UI_TITLE {\n ", "\n }\n\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_CARDTITLE {\n ", "\n }\n \n .UI_CARDTITLE_BOLD {\n ", "\n }\n\n .UI_BODY {\n ", "\n }\n\n .UI_BODY_SM {\n ", "\n }\n\n\n .UI_BODY_BOLD {\n ", "\n }\n\n .UI_BODY_BOLD_SM {\n ", "\n }\n\n .UI_PARAGRAPH {\n ", "\n }\n\n .UI_PARAGRAPH_BOLD {\n ", "\n }\n\n .UI_CAPTION {\n ", "\n }\n\n \n .UI_TAG {\n ", "\n }\n \n .UI_HELPTEXT {\n ", "\n }\n\n .UI_STAT_LG {\n ", "\n }\n\n .UI_STAT_SM {\n ", "\n }\n\n\n .CONTENT_H1 {\n ", "\n }\n .CONTENT_H2 {\n ", "\n }\n .CONTENT_H3 {\n ", "\n }\n .CONTENT_BODY {\n ", "\n }\n\n .CONTENT_BODY_BOLD {\n ", "\n }\n .CONTENT_BODY_ITALIC {\n ", "\n }\n .CONTENT_BODY_BOLD_ITALIC {\n ", "\n }\n .CONTENT_QUOTE {\n ", "\n }\n\n .CONTENT_TITLE_POSTIT {\n ", "\n }\n .CONTENT_BODY_POSTIT {\n ", "\n }\n"])), typo_1.typo.UI_DISPLAY, typo_1.typo.UI_HEADLINE, typo_1.typo.UI_HEADLINE_SM, typo_1.typo.UI_TITLE, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_CARDTITLE, typo_1.typo.UI_CARDTITLE_BOLD, typo_1.typo.UI_BODY, typo_1.typo.UI_BODY_SM, typo_1.typo.UI_BODY_BOLD, typo_1.typo.UI_BODY_BOLD_SM, typo_1.typo.UI_PARAGRAPH, typo_1.typo.UI_PARAGRAPH_BOLD, typo_1.typo.UI_CAPTION, typo_1.typo.UI_TAG, typo_1.typo.UI_HELPTEXT, typo_1.typo.UI_STAT_LG, typo_1.typo.UI_STAT_SM, typo_1.typo.CONTENT_H1, typo_1.typo.CONTENT_H2, typo_1.typo.CONTENT_H3, typo_1.typo.CONTENT_BODY, typo_1.typo.CONTENT_BODY_BOLD, typo_1.typo.CONTENT_BODY_ITALIC, typo_1.typo.CONTENT_BODY_BOLD_ITALIC, typo_1.typo.CONTENT_QUOTE, typo_1.typo.CONTENT_TITLE_POSTIT, typo_1.typo.CONTENT_BODY_POSTIT);
|
|
46
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29;
|
package/dist/v2/themes/typo.d.ts
CHANGED
|
@@ -7,7 +7,9 @@ export declare const typo: {
|
|
|
7
7
|
UI_CARDTITLE: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
8
8
|
UI_CARDTITLE_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
9
9
|
UI_BODY: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
10
|
+
UI_BODY_SM: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
10
11
|
UI_BODY_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
12
|
+
UI_BODY_BOLD_SM: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
11
13
|
UI_PARAGRAPH: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
12
14
|
UI_PARAGRAPH_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
13
15
|
UI_CAPTION: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
package/dist/v2/themes/typo.js
CHANGED
|
@@ -27,27 +27,29 @@ var UI_TITLE_SM = (0, styled_components_1.css)(templateObject_8 || (templateObje
|
|
|
27
27
|
var UI_CARDTITLE = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 20.8px;\n font-weight: 400;\n ", ";\n", ";\n"], ["\n font-size: 16px;\n line-height: 20.8px;\n font-weight: 400;\n ", ";\n", ";\n"])), uiFont, fontCss);
|
|
28
28
|
var UI_CARDTITLE_BOLD = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 20.8px;\n font-weight: 500;\n ", ";\n ", ";\n"], ["\n font-size: 16px;\n line-height: 20.8px;\n font-weight: 500;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
29
29
|
var UI_BODY = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 14px;\n font-weight: 400;\n ", ";\n", ";\n"], ["\n font-size: 14px;\n line-height: 14px;\n font-weight: 400;\n ", ";\n", ";\n"])), uiFont, fontCss);
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var
|
|
36
|
-
var
|
|
37
|
-
var
|
|
38
|
-
var
|
|
39
|
-
var
|
|
40
|
-
var
|
|
41
|
-
var
|
|
42
|
-
var
|
|
43
|
-
var
|
|
44
|
-
var
|
|
45
|
-
var
|
|
30
|
+
var UI_BODY_SM = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 12px;\n font-weight: 400;\n ", ";\n", ";\n"], ["\n font-size: 12px;\n line-height: 12px;\n font-weight: 400;\n ", ";\n", ";\n"])), uiFont, fontCss);
|
|
31
|
+
var UI_BODY_BOLD = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 14px;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 14px;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
32
|
+
var UI_BODY_BOLD_SM = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 12px;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 12px;\n line-height: 12px;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
33
|
+
var UI_PARAGRAPH = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 20.44px;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 20.44px;\n font-weight: 400;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
34
|
+
var UI_PARAGRAPH_BOLD = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 21px;\n font-weight: 500;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 21px;\n font-weight: 500;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
35
|
+
var UI_CAPTION = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n font-size: 11px;\n line-height: 11px;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 11px;\n line-height: 11px;\n font-weight: 400;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
36
|
+
var UI_TAG = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 10px;\n font-weight: 700; \n text-transform: uppercase;\n letter-spacing: 1px;\n ", ";\n ", ";\n"], ["\n font-size: 10px;\n line-height: 10px;\n font-weight: 700; \n text-transform: uppercase;\n letter-spacing: 1px;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
37
|
+
var UI_HELPTEXT = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 12px;\n font-weight: 400; \n ", ";\n ", ";\n"], ["\n font-size: 12px;\n line-height: 12px;\n font-weight: 400; \n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
38
|
+
var UI_STAT_LG = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n font-size: 24px;\n line-height: 24px;\n font-weight: 500;\n ", ";\n ", ";\n"], ["\n font-size: 24px;\n line-height: 24px;\n font-weight: 500;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
39
|
+
var UI_STAT_SM = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 14px;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 14px;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
40
|
+
var CONTENT_H1 = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n font-size: 36px;\n line-height: 50.4px;\n font-weight: 700;\n ", ";\n ", ";\n "], ["\n font-size: 36px;\n line-height: 50.4px;\n font-weight: 700;\n ", ";\n ", ";\n "])), contentFont, fontCss);
|
|
41
|
+
var CONTENT_H2 = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n font-size: 25px;\n line-height: 35px;\n font-weight: 700;\n ", ";\n ", ";\n "], ["\n font-size: 25px;\n line-height: 35px;\n font-weight: 700;\n ", ";\n ", ";\n "])), contentFont, fontCss);
|
|
42
|
+
var CONTENT_H3 = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 25.2px;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 18px;\n line-height: 25.2px;\n font-weight: 700;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
43
|
+
var CONTENT_BODY = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 23.8px;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 23.8px;\n font-weight: 400;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
44
|
+
var CONTENT_BODY_BOLD = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 23.8px;\n font-weight: 600;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 23.8px;\n font-weight: 600;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
45
|
+
var CONTENT_BODY_ITALIC = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 23.8px;\n font-weight: 400;\n font-style: italic;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 23.8px;\n font-weight: 400;\n font-style: italic;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
46
|
+
var CONTENT_BODY_BOLD_ITALIC = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 23.8px;\n font-weight: 600;\n font-style: italic;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 23.8px;\n font-weight: 600;\n font-style: italic;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
47
|
+
var CONTENT_QUOTE = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n padding: 0 16px;\n font-size: 24px;\n line-height: 35.04px;\n font-weight: 400;\n font-style: italic;\n position: relative;\n ::before {\n /* Quote line (left) */\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: inherit; \n width: 6px; \n background-color: ", "; // temp colors need to replace with material colors */\n }\n ", ";\n ", ";\n"], ["\n padding: 0 16px;\n font-size: 24px;\n line-height: 35.04px;\n font-weight: 400;\n font-style: italic;\n position: relative;\n ::before {\n /* Quote line (left) */\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: inherit; \n width: 6px; \n background-color: ", "; // temp colors need to replace with material colors */\n }\n ", ";\n ", ";\n"])), function (_a) {
|
|
46
48
|
var invert = _a.invert, colors = _a.theme.colors;
|
|
47
49
|
return invert ? colors.greyColor40 : (0, utilsOolib_1.getPrimaryColor100)(colors);
|
|
48
50
|
}, contentFont, fontCss);
|
|
49
|
-
var CONTENT_TITLE_POSTIT = (0, styled_components_1.css)(
|
|
50
|
-
var CONTENT_BODY_POSTIT = (0, styled_components_1.css)(
|
|
51
|
+
var CONTENT_TITLE_POSTIT = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n font-size: 15px;\n font-style: normal;\n font-weight: 700;\n line-height: 19.5px;\n ", ";\n ", ";\n"], ["\n font-size: 15px;\n font-style: normal;\n font-weight: 700;\n line-height: 19.5px;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
52
|
+
var CONTENT_BODY_POSTIT = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-size: 15px;\n font-style: normal;\n font-weight: 400;\n line-height: 19.5px;\n ", ";\n ", ";\n"], ["\n font-size: 15px;\n font-style: normal;\n font-weight: 400;\n line-height: 19.5px;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
51
53
|
exports.typo = {
|
|
52
54
|
UI_DISPLAY: UI_DISPLAY,
|
|
53
55
|
UI_HEADLINE: UI_HEADLINE,
|
|
@@ -57,7 +59,9 @@ exports.typo = {
|
|
|
57
59
|
UI_CARDTITLE: UI_CARDTITLE,
|
|
58
60
|
UI_CARDTITLE_BOLD: UI_CARDTITLE_BOLD,
|
|
59
61
|
UI_BODY: UI_BODY,
|
|
62
|
+
UI_BODY_SM: UI_BODY_SM,
|
|
60
63
|
UI_BODY_BOLD: UI_BODY_BOLD,
|
|
64
|
+
UI_BODY_BOLD_SM: UI_BODY_BOLD_SM,
|
|
61
65
|
UI_PARAGRAPH: UI_PARAGRAPH,
|
|
62
66
|
UI_PARAGRAPH_BOLD: UI_PARAGRAPH_BOLD,
|
|
63
67
|
UI_CAPTION: UI_CAPTION,
|
|
@@ -76,4 +80,4 @@ exports.typo = {
|
|
|
76
80
|
CONTENT_TITLE_POSTIT: CONTENT_TITLE_POSTIT,
|
|
77
81
|
CONTENT_BODY_POSTIT: CONTENT_BODY_POSTIT
|
|
78
82
|
};
|
|
79
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29;
|
|
83
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
|