@pinuts/bsr-uikit-relaunch 0.2.40 → 0.2.44
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.
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export default Title;
|
|
2
|
+
declare function Title({ config }: {
|
|
3
|
+
config: any;
|
|
4
|
+
}): React.JSX.Element;
|
|
5
|
+
declare namespace Title {
|
|
6
|
+
namespace propTypes {
|
|
7
|
+
let config: PropTypes.Requireable<object>;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
import React from 'react';
|
|
11
|
+
import * as PropTypes from 'prop-types';
|
|
12
|
+
//# sourceMappingURL=Title.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/items/Title/Title.jsx"],"names":[],"mappings":";AAQA;;sBAcC;;;;;;kBAtBiB,OAAO;2BAGE,YAAY"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _Alert = _interopRequireDefault(require("react-bootstrap/Alert"));
|
|
9
|
+
var PropTypes = _interopRequireWildcard(require("prop-types"));
|
|
10
|
+
var _formBuilder = require("@pinuts/form-builder");
|
|
11
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
+
const {
|
|
15
|
+
useFormikContext
|
|
16
|
+
} = _formBuilder.formik;
|
|
17
|
+
const Title = _ref => {
|
|
18
|
+
let {
|
|
19
|
+
config
|
|
20
|
+
} = _ref;
|
|
21
|
+
const {
|
|
22
|
+
errorMsgId
|
|
23
|
+
} = config;
|
|
24
|
+
const {
|
|
25
|
+
header,
|
|
26
|
+
className
|
|
27
|
+
} = config.inputProps;
|
|
28
|
+
const {
|
|
29
|
+
errors
|
|
30
|
+
} = useFormikContext();
|
|
31
|
+
const errorMsg = errors[errorMsgId];
|
|
32
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
33
|
+
className: `pi-title d-sm-flex align-items-center mb-4 ${className}`
|
|
34
|
+
}, /*#__PURE__*/_react.default.createElement("h3", null, header)), errorMsg && /*#__PURE__*/_react.default.createElement(_Alert.default, {
|
|
35
|
+
variant: "danger"
|
|
36
|
+
}, errorMsg));
|
|
37
|
+
};
|
|
38
|
+
Title.propTypes = {
|
|
39
|
+
config: PropTypes.object
|
|
40
|
+
};
|
|
41
|
+
(0, _formBuilder.registerComponent)('Title', Title);
|
|
42
|
+
var _default = exports.default = Title;
|
package/dist/styles/_form.scss
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
@use "sass:math";
|
|
2
|
+
@function to-rem($size) {
|
|
3
|
+
@return math.div($size, 16px) * 1rem;
|
|
4
|
+
}
|
|
5
|
+
|
|
1
6
|
/* TradeGothicNextSR Regular */
|
|
2
7
|
/* @font-face {
|
|
3
8
|
font-family: "TradeGothicNextSR";
|
|
@@ -39,112 +44,112 @@
|
|
|
39
44
|
src: local(""), url("../../assets/fonts/TradeGothicNextLT/TradeGothicNextCondensed_normal_condensed.woff2") format("woff2");
|
|
40
45
|
}
|
|
41
46
|
*/
|
|
42
|
-
$fontsize-base: 18px;
|
|
47
|
+
$fontsize-base: to-rem(18px);
|
|
43
48
|
|
|
44
49
|
$fontfamily-base: "TradeGothicNext", sans-serif;
|
|
45
50
|
$fontfamily-heading: "TradeGothicNextSR", sans-serif;
|
|
46
51
|
|
|
47
52
|
/* Font sizes */
|
|
48
|
-
$h1-fontsize: 48px;
|
|
49
|
-
$h2-fontsize: 36px;
|
|
50
|
-
$h3-fontsize: 28px;
|
|
53
|
+
$h1-fontsize: to-rem(48px);
|
|
54
|
+
$h2-fontsize: to-rem(36px);
|
|
55
|
+
$h3-fontsize: to-rem(28px);
|
|
51
56
|
|
|
52
|
-
$h1-fontsize-sm: 32px;
|
|
53
|
-
$h2-fontsize-sm: 24px;
|
|
54
|
-
$h3-fontsize-sm: 20px;
|
|
57
|
+
$h1-fontsize-sm: to-rem(32px);
|
|
58
|
+
$h2-fontsize-sm: to-rem(24px);
|
|
59
|
+
$h3-fontsize-sm: to-rem(20px);
|
|
55
60
|
|
|
56
|
-
$sub-headline-font-size: 24px;
|
|
57
|
-
$sub-headline-font-size-sm: 18px;
|
|
61
|
+
$sub-headline-font-size: to-rem(24px);
|
|
62
|
+
$sub-headline-font-size-sm: to-rem(18px);
|
|
58
63
|
|
|
59
|
-
$quote-font-size: 28px;
|
|
60
|
-
$quote-font-size-sm: 22px;
|
|
64
|
+
$quote-font-size: to-rem(28px);
|
|
65
|
+
$quote-font-size-sm: to-rem(22px);
|
|
61
66
|
|
|
62
|
-
$intro-text-font-size: 20px;
|
|
63
|
-
$intro-text-font-size-sm: 18px;
|
|
67
|
+
$intro-text-font-size: to-rem(20px);
|
|
68
|
+
$intro-text-font-size-sm: to-rem(18px);
|
|
64
69
|
|
|
65
|
-
$copy-text-small-font-size: 16px;
|
|
70
|
+
$copy-text-small-font-size: to-rem(16px);
|
|
66
71
|
|
|
67
|
-
$label-forms-font-size: 14px;
|
|
68
|
-
$supporting-text-font-size: 14px;
|
|
72
|
+
$label-forms-font-size: to-rem(14px);
|
|
73
|
+
$supporting-text-font-size: to-rem(14px);
|
|
69
74
|
|
|
70
|
-
$nav-e1-font-size: 20px;
|
|
71
|
-
$nav-e1-font-size-sm: 18px;
|
|
75
|
+
$nav-e1-font-size: to-rem(20px);
|
|
76
|
+
$nav-e1-font-size-sm: to-rem(18px);
|
|
72
77
|
|
|
73
|
-
$nav-e2-font-size: 20px;
|
|
74
|
-
$nav-e2-font-size-sm: 18px;
|
|
78
|
+
$nav-e2-font-size: to-rem(20px);
|
|
79
|
+
$nav-e2-font-size-sm: to-rem(18px);
|
|
75
80
|
|
|
76
|
-
$nav-e3-font-size: 16px;
|
|
81
|
+
$nav-e3-font-size: to-rem(16px);
|
|
77
82
|
|
|
78
|
-
$navigation-navLinks-font-size: 20px;
|
|
79
|
-
$navigation-navLinks-font-size-sm: 18px;
|
|
80
|
-
$navigation-linkList-font-size: 16px;
|
|
81
|
-
$navigation-teaserText-font-size: 16px;
|
|
82
|
-
$navigation-additionalLinks-font-size: 14px;
|
|
83
|
+
$navigation-navLinks-font-size: to-rem(20px);
|
|
84
|
+
$navigation-navLinks-font-size-sm: to-rem(18px);
|
|
85
|
+
$navigation-linkList-font-size: to-rem(16px);
|
|
86
|
+
$navigation-teaserText-font-size: to-rem(16px);
|
|
87
|
+
$navigation-additionalLinks-font-size: to-rem(14px);
|
|
83
88
|
|
|
84
89
|
|
|
85
|
-
$inputField-font-size: 18px;
|
|
86
|
-
$input-label-font-size: 14px;
|
|
87
|
-
$editingBtn-font-size: 14px;
|
|
88
|
-
$textlink-subline-font-size: 14px;
|
|
90
|
+
$inputField-font-size: to-rem(18px);
|
|
91
|
+
$input-label-font-size: to-rem(14px);
|
|
92
|
+
$editingBtn-font-size: to-rem(14px);
|
|
93
|
+
$textlink-subline-font-size: to-rem(14px);
|
|
89
94
|
|
|
90
|
-
$listItem-font-size: 18px;
|
|
95
|
+
$listItem-font-size: to-rem(18px);
|
|
91
96
|
|
|
92
97
|
/* Line heights */
|
|
93
|
-
$lineheight-base: 26px;
|
|
98
|
+
$lineheight-base: to-rem(26px);
|
|
94
99
|
|
|
95
|
-
$h1-lineheight: 56px;
|
|
96
|
-
$h2-lineheight: 52px;
|
|
97
|
-
$h3-lineheight: 36px;
|
|
100
|
+
$h1-lineheight: to-rem(56px);
|
|
101
|
+
$h2-lineheight: to-rem(52px);
|
|
102
|
+
$h3-lineheight: to-rem(36px);
|
|
98
103
|
|
|
99
|
-
$h1-lineheight-sm: 40px;
|
|
100
|
-
$h2-lineheight-sm: 32px;
|
|
101
|
-
$h3-lineheight-sm: 28px;
|
|
104
|
+
$h1-lineheight-sm: to-rem(40px);
|
|
105
|
+
$h2-lineheight-sm: to-rem(32px);
|
|
106
|
+
$h3-lineheight-sm: to-rem(28px);
|
|
102
107
|
|
|
103
|
-
$sub-headline-line-height: 36px;
|
|
104
|
-
$sub-headline-line-height-sm: 28px;
|
|
108
|
+
$sub-headline-line-height: to-rem(36px);
|
|
109
|
+
$sub-headline-line-height-sm: to-rem(28px);
|
|
105
110
|
|
|
106
|
-
$quote-line-height: 36px;
|
|
107
|
-
$quote-line-height-sm: 30px;
|
|
111
|
+
$quote-line-height: to-rem(36px);
|
|
112
|
+
$quote-line-height-sm: to-rem(30px);
|
|
108
113
|
|
|
109
|
-
$intro-text-line-height: 28px;
|
|
110
|
-
$intro-text-line-height-sm: 26px;
|
|
114
|
+
$intro-text-line-height: to-rem(28px);
|
|
115
|
+
$intro-text-line-height-sm: to-rem(26px);
|
|
111
116
|
|
|
112
|
-
$copy-text-default-line-height: 26px;
|
|
117
|
+
$copy-text-default-line-height: to-rem(26px);
|
|
113
118
|
|
|
114
|
-
$copy-text-small-line-height: 24px;
|
|
119
|
+
$copy-text-small-line-height: to-rem(24px);
|
|
115
120
|
|
|
116
|
-
$label-forms-line-height: 20px;
|
|
121
|
+
$label-forms-line-height: to-rem(20px);
|
|
117
122
|
|
|
118
|
-
$supporting-text-line-height: 20px;
|
|
123
|
+
$supporting-text-line-height: to-rem(20px);
|
|
119
124
|
|
|
120
|
-
$nav-e1-line-height: 24px;
|
|
125
|
+
$nav-e1-line-height: to-rem(24px);
|
|
121
126
|
|
|
122
|
-
$nav-e2-line-height: 24px;
|
|
127
|
+
$nav-e2-line-height: to-rem(24px);
|
|
123
128
|
|
|
124
|
-
$nav-e3-line-height: 20px;
|
|
125
|
-
$nav-e3-line-height-sm: 22px;
|
|
129
|
+
$nav-e3-line-height: to-rem(20px);
|
|
130
|
+
$nav-e3-line-height-sm: to-rem(22px);
|
|
126
131
|
|
|
127
|
-
$button-text-line-height: 24px;
|
|
132
|
+
$button-text-line-height: to-rem(24px);
|
|
128
133
|
|
|
129
|
-
$navigation-navLinks-line-height: 24px;
|
|
130
|
-
$navigation-linkList-line-height: 20px;
|
|
131
|
-
$navigation-additionalLinks-line-height: 20px;
|
|
134
|
+
$navigation-navLinks-line-height: to-rem(24px);
|
|
135
|
+
$navigation-linkList-line-height: to-rem(20px);
|
|
136
|
+
$navigation-additionalLinks-line-height: to-rem(20px);
|
|
132
137
|
|
|
133
|
-
$inputField-line-height: 26px;
|
|
134
|
-
$input-label-line-height: 20px;
|
|
135
|
-
$editingBtnAtom-line-height: 20px;
|
|
136
|
-
$textlink-line-height: 26px;
|
|
138
|
+
$inputField-line-height: to-rem(26px);
|
|
139
|
+
$input-label-line-height: to-rem(20px);
|
|
140
|
+
$editingBtnAtom-line-height: to-rem(20px);
|
|
141
|
+
$textlink-line-height: to-rem(26px);
|
|
137
142
|
|
|
138
|
-
$listItem-line-height: 26px;
|
|
143
|
+
$listItem-line-height: to-rem(26px);
|
|
139
144
|
|
|
140
145
|
/* Font weights */
|
|
141
146
|
$fontweight-normal: 400;
|
|
142
147
|
$fontweight-bold: 700;
|
|
143
148
|
|
|
144
149
|
/* Letter spacing */
|
|
145
|
-
$letter-spacing-xs: 0.2px;
|
|
146
|
-
$letter-spacing-sm: 0.32px;
|
|
147
|
-
$letter-spacing-md: 0.4px;
|
|
148
|
-
$letter-spacing-lg: 1px;
|
|
150
|
+
$letter-spacing-xs: to-rem(0.2px);
|
|
151
|
+
$letter-spacing-sm: to-rem(0.32px);
|
|
152
|
+
$letter-spacing-md: to-rem(0.4px);
|
|
153
|
+
$letter-spacing-lg: to-rem(1px);
|
|
149
154
|
|
|
150
|
-
$letter-spacing-button-text: 0.036px;
|
|
155
|
+
$letter-spacing-button-text: to-rem(0.036px);
|