oolib 2.134.1 → 2.134.3
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 +21 -0
- package/dist/components/PercentBarChart/comps/CustomizedLabel/index.js +24 -0
- package/dist/components/PercentBarChart/index.d.ts +10 -1
- package/dist/components/PercentBarChart/index.js +66 -72
- 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,21 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TBaseConfigs } from "../..";
|
|
3
|
+
type TCustomizedLabeValue = {
|
|
4
|
+
percentage: number;
|
|
5
|
+
count: number;
|
|
6
|
+
name: string;
|
|
7
|
+
};
|
|
8
|
+
export declare const CustomizedLabel: ({ y, width, height, value, showCount, suffix, opacity, _base_configs, onMouseOver, onMouseOut, onMouseDown, }: {
|
|
9
|
+
y?: number | string;
|
|
10
|
+
width?: number | string;
|
|
11
|
+
height?: number | string;
|
|
12
|
+
value?: TCustomizedLabeValue;
|
|
13
|
+
opacity: number;
|
|
14
|
+
suffix?: string;
|
|
15
|
+
showCount?: boolean;
|
|
16
|
+
_base_configs: TBaseConfigs;
|
|
17
|
+
onMouseOver?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
|
|
18
|
+
onMouseOut?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
|
|
19
|
+
onMouseDown?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
|
|
20
|
+
}) => React.JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -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, width = _a.width, //i think this is the width and the height of the bar. dont need it just yet..
|
|
11
|
+
height = _a.height, value = _a.value, showCount = _a.showCount, suffix = _a.suffix, opacity = _a.opacity, _base_configs = _a._base_configs, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onMouseDown = _a.onMouseDown;
|
|
12
|
+
var yOffset = -(_base_configs.labelToBarGap + _base_configs.barHeight);
|
|
13
|
+
var percent = value.percentage;
|
|
14
|
+
var count = value.count;
|
|
15
|
+
var name = value.name;
|
|
16
|
+
var percentXOffset = 0;
|
|
17
|
+
var xOffsetRelative = 10;
|
|
18
|
+
return (react_1.default.createElement("g", null,
|
|
19
|
+
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 || ""),
|
|
20
|
+
react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, showCount ? count : ""),
|
|
21
|
+
react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, name)),
|
|
22
|
+
react_1.default.createElement("rect", { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, value); }, onMouseOver: function (e) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, value); }, onMouseOut: function (e) { return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, value); }, x: percentXOffset, y: y + _base_configs.mouseEventDetectorYOffset, width: width, height: _base_configs.mouseEventDetectorHeight, fill: "red", "fill-opacity": _base_configs.mouseEventDetectorOpacity })));
|
|
23
|
+
};
|
|
24
|
+
exports.CustomizedLabel = CustomizedLabel;
|
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export
|
|
2
|
+
export type TBaseConfigs = {
|
|
3
|
+
barHeight: number;
|
|
4
|
+
labelToBarGap: number;
|
|
5
|
+
barGap: number;
|
|
6
|
+
mouseEventDetectorYOffset: number;
|
|
7
|
+
mouseEventDetectorHeight: number;
|
|
8
|
+
mouseEventDetectorOpacity: number;
|
|
9
|
+
};
|
|
10
|
+
export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, colorIdx, valueSuffix, showCount }: {
|
|
3
11
|
data: any;
|
|
4
12
|
valuePath: string;
|
|
5
13
|
labelPath: string;
|
|
6
14
|
title?: string;
|
|
7
15
|
onClick?: (name: string) => void;
|
|
8
16
|
colors?: string[];
|
|
17
|
+
colorIdx?: number;
|
|
9
18
|
valueSuffix?: string;
|
|
10
19
|
showCount?: boolean;
|
|
11
20
|
}) => 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,27 @@ var chartColors = [
|
|
|
64
64
|
"rgb(204, 128, 217)",
|
|
65
65
|
"rgb(91, 184, 175)",
|
|
66
66
|
];
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
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
|
+
//if any changes are being made to the spacing and such of
|
|
68
|
+
//this comps design, all these properties need to be carefully
|
|
69
|
+
//observed and tweaked to ensure no ui has gotten warped due to sideeffects
|
|
70
|
+
var _base_configs = {
|
|
71
|
+
barRadius: 16,
|
|
72
|
+
barHeight: 6,
|
|
73
|
+
labelToBarGap: 6,
|
|
74
|
+
barGap: 30,
|
|
75
|
+
wrapperMarginBottom: -16,
|
|
76
|
+
barCategoryGap: 18, // does some wierd shit really, simply pushes the entire graph down by this number. We need to to unhide the first label, which is happening only because we are using <Cell/> comp. too many inconsistencies in recharts
|
|
77
|
+
mouseEventDetectorYOffset: -34, //this is inside CustomizedLabel. a big rect spread across the bar and label and gap to detect mouse events and transition smoothly to the next bar.
|
|
78
|
+
mouseEventDetectorHeight: 40,
|
|
79
|
+
mouseEventDetectorOpacity: 0 //only increase this for debugging. nothing else.
|
|
90
80
|
};
|
|
91
81
|
var PercentBarChart = function (_a) {
|
|
92
|
-
var
|
|
93
|
-
|
|
94
|
-
labelPath =
|
|
82
|
+
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
|
|
83
|
+
_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
|
|
84
|
+
labelPath = _c === void 0 ? "name" : _c, // same as above for label path
|
|
85
|
+
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
|
|
86
|
+
_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
|
|
87
|
+
valueSuffix = _f === void 0 ? "%" : _f, _g = _a.showCount, showCount = _g === void 0 ? true : _g;
|
|
95
88
|
var totalCount = (0, getTotalCount_1.getTotalCount)({ data: _data, countPath: valuePath });
|
|
96
89
|
var data = (0, react_1.useMemo)(function () {
|
|
97
90
|
var finalData = __spreadArray([], _data, true);
|
|
@@ -99,12 +92,11 @@ var PercentBarChart = function (_a) {
|
|
|
99
92
|
var percentage = (0, _EXPORTS_1.getPercentage)((0, _EXPORTS_1.getVal)(d, valuePath), totalCount);
|
|
100
93
|
var count = (0, _EXPORTS_1.getVal)(d, valuePath);
|
|
101
94
|
return ({
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
color: colors[i % colors.length],
|
|
95
|
+
labels: {
|
|
96
|
+
percentage: percentage,
|
|
97
|
+
count: count,
|
|
98
|
+
name: (0, _EXPORTS_1.getVal)(d, labelPath),
|
|
99
|
+
},
|
|
108
100
|
});
|
|
109
101
|
});
|
|
110
102
|
finalData.sort(function (a, b) {
|
|
@@ -119,47 +111,49 @@ var PercentBarChart = function (_a) {
|
|
|
119
111
|
return (react_1.default.createElement("div", null,
|
|
120
112
|
title && (react_1.default.createElement(Typo_1.SANS_4_5, { style: { paddingBottom: "2rem" }, semibold: true }, title)),
|
|
121
113
|
react_1.default.createElement("div", { style: {
|
|
122
|
-
height: "".concat((
|
|
114
|
+
height: "".concat(((_base_configs.barHeight + _base_configs.barGap) * data.length), "px"),
|
|
123
115
|
width: "100%",
|
|
124
116
|
} },
|
|
125
117
|
react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
|
|
126
|
-
react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, barCategoryGap:
|
|
118
|
+
react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, barCategoryGap: _base_configs.barCategoryGap,
|
|
119
|
+
// barSize={_base_configs.barHeight}
|
|
120
|
+
data: data, layout: "vertical", margin: {
|
|
127
121
|
top: 0,
|
|
128
|
-
right:
|
|
122
|
+
right: 0,
|
|
129
123
|
left: 0,
|
|
130
|
-
bottom:
|
|
124
|
+
bottom: _base_configs.wrapperMarginBottom,
|
|
125
|
+
}, onMouseEnter: function () {
|
|
126
|
+
var args = [];
|
|
127
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
128
|
+
args[_i] = arguments[_i];
|
|
129
|
+
}
|
|
130
|
+
return console.log('mouse enter', args);
|
|
131
|
+
}, onMouseLeave: function () {
|
|
132
|
+
var args = [];
|
|
133
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
134
|
+
args[_i] = arguments[_i];
|
|
135
|
+
}
|
|
136
|
+
return console.log('mouse leave', args);
|
|
131
137
|
} },
|
|
132
138
|
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,
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
});
|
|
150
|
-
|
|
151
|
-
|
|
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 })); })))))));
|
|
139
|
+
react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category" }),
|
|
140
|
+
react_1.default.createElement(recharts_1.Bar, { radius: _base_configs.barRadius, style: onClick ? { cursor: "pointer" } : {}, dataKey: "labels.percentage" },
|
|
141
|
+
react_1.default.createElement(recharts_1.LabelList, { dataKey: "labels", offset: 0, content: function (props) { return react_1.default.createElement(CustomizedLabel_1.CustomizedLabel, __assign({ y: props.y,
|
|
142
|
+
width: props.width,
|
|
143
|
+
height: props.height,
|
|
144
|
+
value: props.value, //here value is the percentage
|
|
145
|
+
showCount: showCount, suffix: valueSuffix,
|
|
146
|
+
opacity: changeBarOpacityFn(props.value.name), _base_configs: _base_configs }, (onClick
|
|
147
|
+
? {
|
|
148
|
+
onMouseOver: function (e, value) { return setActiveBar(value.name); },
|
|
149
|
+
onMouseOut: function () { return setActiveBar(undefined); },
|
|
150
|
+
onMouseDown: function (e, value) {
|
|
151
|
+
setActiveBar(value.name);
|
|
152
|
+
onClick(value.name);
|
|
153
|
+
},
|
|
154
|
+
}
|
|
155
|
+
: {}))); } }),
|
|
156
|
+
data.map(function (d, index) { return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
157
|
+
react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(d.labels.name), key: "cell-".concat(index), height: _base_configs.barHeight, fill: colors[colorIdx] }))); })))))));
|
|
164
158
|
};
|
|
165
159
|
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;
|