@beequip/hexagon 0.18.2 → 0.18.4
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/Input/styles.d.ts +13 -0
- package/dist/components/Input/styles.js +17 -6
- package/dist/components/Input/styles.js.map +1 -1
- package/dist/components/Radio/styles.js +1 -1
- package/dist/components/Radio/styles.js.map +1 -1
- package/dist/components/Select/index.stories.js +4 -1
- package/dist/components/Select/index.stories.js.map +1 -1
- package/dist/components/Select/styles.d.ts +17 -0
- package/dist/components/Select/styles.js +25 -6
- package/dist/components/Select/styles.js.map +1 -1
- package/dist/components/TextArea/index.d.ts +1 -1
- package/dist/components/TextArea/index.stories.d.ts +1 -0
- package/dist/components/TextArea/index.stories.js +9 -2
- package/dist/components/TextArea/index.stories.js.map +1 -1
- package/dist/components/TextArea/styles.d.ts +17 -0
- package/dist/components/TextArea/styles.js +25 -12
- package/dist/components/TextArea/styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -10,6 +10,19 @@ interface PreOrPostFix {
|
|
|
10
10
|
export type InputWrapperStylesProps = InputStylesProps & {
|
|
11
11
|
isFocussed: boolean;
|
|
12
12
|
};
|
|
13
|
+
/**
|
|
14
|
+
* 1. Use a box-shadow instead of a border, to prevent layout changes
|
|
15
|
+
* when focussing the element. On some devices, a 1px border renders
|
|
16
|
+
* as 0.667px. When changing the border to 2px on focus, the element
|
|
17
|
+
* changes height and you notice a slight layout shift due to the
|
|
18
|
+
* missing 0.333px. Box-shadow isn't a part of an element's height
|
|
19
|
+
* calculation, so the layout doesn't change.
|
|
20
|
+
* 2. Box-shadow is removed in high-contrast themes on Windows, so using
|
|
21
|
+
* that as a border will result in a borderless input in those themes.
|
|
22
|
+
* Luckily, there's a media query that detects whether a high contrast
|
|
23
|
+
* theme is active, so we can apply an outline in these situations.
|
|
24
|
+
* See: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
|
|
25
|
+
*/
|
|
13
26
|
export declare const inputWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<InputWrapperStylesProps, import("styled-components").DefaultTheme>>;
|
|
14
27
|
export declare const StyledInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, InputStylesProps & {
|
|
15
28
|
isFocussed: boolean;
|
|
@@ -4,11 +4,24 @@ exports.StyledPostFix = exports.StyledPreFix = exports.StyledTooltip = exports.S
|
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var styled_components_1 = require("styled-components");
|
|
6
6
|
var HelpText_1 = require("../HelpText");
|
|
7
|
-
|
|
7
|
+
/**
|
|
8
|
+
* 1. Use a box-shadow instead of a border, to prevent layout changes
|
|
9
|
+
* when focussing the element. On some devices, a 1px border renders
|
|
10
|
+
* as 0.667px. When changing the border to 2px on focus, the element
|
|
11
|
+
* changes height and you notice a slight layout shift due to the
|
|
12
|
+
* missing 0.333px. Box-shadow isn't a part of an element's height
|
|
13
|
+
* calculation, so the layout doesn't change.
|
|
14
|
+
* 2. Box-shadow is removed in high-contrast themes on Windows, so using
|
|
15
|
+
* that as a border will result in a borderless input in those themes.
|
|
16
|
+
* Luckily, there's a media query that detects whether a high contrast
|
|
17
|
+
* theme is active, so we can apply an outline in these situations.
|
|
18
|
+
* See: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
|
|
19
|
+
*/
|
|
20
|
+
exports.inputWrapperStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: flex;\n position: relative;\n overflow: hidden;\n padding: 1px 4px;\n background-color: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 ", "\n ", ",\n ", "; // [1]\n transition: background-color 0.2s ease-in-out 0s,\n box-shadow 0.2s ease-in-out 0s;\n\n @media (forced-colors: active) {\n outline: 1px solid\n ", "; // [2]\n }\n"], ["\n display: flex;\n position: relative;\n overflow: hidden;\n padding: 1px 4px;\n background-color: ", ";\n border-radius: ", "px;\n box-shadow: inset 0 0 0 ", "\n ", ",\n ", "; // [1]\n transition: background-color 0.2s ease-in-out 0s,\n box-shadow 0.2s ease-in-out 0s;\n\n @media (forced-colors: active) {\n outline: 1px solid\n ", "; // [2]\n }\n"])), function (props) {
|
|
8
21
|
return props.disabled
|
|
9
22
|
? props.theme.colors.blueGrey[100]
|
|
10
23
|
: props.theme.colors.input.background;
|
|
11
|
-
}, function (props) {
|
|
24
|
+
}, function (props) { return props.theme.borderRadius.default; }, function (props) { return (props.isFocussed ? '2px' : '1px'); }, function (props) {
|
|
12
25
|
return props.disabled
|
|
13
26
|
? props.theme.colors.blueGrey[100]
|
|
14
27
|
: props.error
|
|
@@ -16,11 +29,9 @@ exports.inputWrapperStyles = (0, styled_components_1.css)(templateObject_1 || (t
|
|
|
16
29
|
: props.isFocussed
|
|
17
30
|
? props.theme.colors.orange[500]
|
|
18
31
|
: props.theme.colors.input.border;
|
|
19
|
-
}, function (props) {
|
|
20
|
-
return props.isFocussed ? "2px" : "".concat(props.theme.borderWidth, "px");
|
|
21
|
-
}, function (props) { return (props.isFocussed ? "0 3px" : "1px 4px"); }, function (props) { return props.theme.borderRadius.default; }, function (props) { return props.theme.shadow.input; });
|
|
32
|
+
}, function (props) { return props.theme.shadow.input; }, function (props) { return (props.isFocussed ? 'Highlight' : 'ButtonBorder'); });
|
|
22
33
|
exports.StyledInputWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), exports.inputWrapperStyles);
|
|
23
|
-
exports.inputStyles = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n
|
|
34
|
+
exports.inputStyles = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n overflow: hidden;\n box-sizing: border-box;\n max-width: 100%;\n width: 100%;\n padding: 12px 8px;\n align-items: center;\n font-size: ", ";\n font-family: ", ";\n font-weight: 400;\n line-height: 1.25rem;\n background: transparent;\n border: none;\n outline: none;\n border-radius: ", "px;\n color: ", ";\n overflow-wrap: break-word;\n\n &[type='text'],\n &[type='number'],\n &[type='email'],\n &[type='tel'] {\n -webkit-appearance: none;\n }\n\n &[type='search'] {\n /* clears the 'X' from Internet Explorer */\n &::-ms-clear {\n display: none;\n width: 0;\n height: 0;\n }\n &::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n }\n /* clears the 'X' from Chrome */\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none;\n }\n }\n\n &[type='number'] {\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n }\n\n // hide the helptext if it is available\n + div {\n opacity: 0;\n }\n\n &:focus {\n // show the helptext if it is available\n + div {\n opacity: 1;\n }\n }\n\n &::placeholder {\n color: ", ";\n font-weight: 400;\n }\n"], ["\n overflow: hidden;\n box-sizing: border-box;\n max-width: 100%;\n width: 100%;\n padding: 12px 8px;\n align-items: center;\n font-size: ", ";\n font-family: ", ";\n font-weight: 400;\n line-height: 1.25rem;\n background: transparent;\n border: none;\n outline: none;\n border-radius: ", "px;\n color: ", ";\n overflow-wrap: break-word;\n\n &[type='text'],\n &[type='number'],\n &[type='email'],\n &[type='tel'] {\n -webkit-appearance: none;\n }\n\n &[type='search'] {\n /* clears the 'X' from Internet Explorer */\n &::-ms-clear {\n display: none;\n width: 0;\n height: 0;\n }\n &::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n }\n /* clears the 'X' from Chrome */\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none;\n }\n }\n\n &[type='number'] {\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n }\n\n // hide the helptext if it is available\n + div {\n opacity: 0;\n }\n\n &:focus {\n // show the helptext if it is available\n + div {\n opacity: 1;\n }\n }\n\n &::placeholder {\n color: ", ";\n font-weight: 400;\n }\n"])), function (props) { return props.theme.font.sizes.s; }, function (props) { return props.theme.font.default; }, function (props) { return props.theme.borderRadius.default; }, function (props) {
|
|
24
35
|
return props.disabled
|
|
25
36
|
? props.theme.colors.grey[600]
|
|
26
37
|
: props.theme.colors.input.color;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":";;;;AACA,uDAA+C;AAC/C,wCAAsC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ exports.StyledRadioInput = exports.StyledRadioLabel = void 0;
|
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var styled_components_1 = require("styled-components");
|
|
6
6
|
var SPACE_FOR_INPUT = 20;
|
|
7
|
-
exports.StyledRadioLabel = styled_components_1.default.label(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n line-height: ", ";\n font-weight: 500;\n margin-right: 16px;\n user-select: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n position: relative;\n padding-left: ", "px;\n\n &:before {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: transparent;\n border: 1px solid ", ";\n border-radius: 50%;\n top: 50%;\n left: 0px;\n transform: translateY(-50%);\n }\n\n &:after {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: ", ";\n border-radius: 50%;\n top: 50%;\n left: 0px;\n transform: translateY(-50%) scale(0);\n transition: ", ";\n }\n"], ["\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n line-height: ", ";\n font-weight: 500;\n margin-right: 16px;\n user-select: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n position: relative;\n padding-left: ", "px;\n\n &:before {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: transparent;\n border: 1px solid ", ";\n border-radius: 50%;\n top: 50%;\n left: 0px;\n transform: translateY(-50%);\n }\n\n &:after {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: ", ";\n border-radius: 50%;\n top: 50%;\n left: 0px;\n transform: translateY(-50%) scale(0);\n transition: ", ";\n }\n"])), function (props) { return props.theme.font.default; }, function (props) { return props.theme.font.sizes.s; }, function (props) { return props.theme.colors.text.default; }, function (props) { return props.theme.font.lineHeight; }, SPACE_FOR_INPUT, function (_a) {
|
|
7
|
+
exports.StyledRadioLabel = styled_components_1.default.label(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n line-height: ", ";\n font-weight: 500;\n margin-right: 16px;\n user-select: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n position: relative;\n padding-left: ", "px;\n\n &:before {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: transparent;\n border: 1px solid ", ";\n border-radius: 50%;\n top: 50%;\n left: 0px;\n transform: translateY(-50%);\n box-sizing: border-box;\n }\n\n &:after {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: ", ";\n border-radius: 50%;\n top: 50%;\n left: 0px;\n transform: translateY(-50%) scale(0);\n transition: ", ";\n }\n"], ["\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n line-height: ", ";\n font-weight: 500;\n margin-right: 16px;\n user-select: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n position: relative;\n padding-left: ", "px;\n\n &:before {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: transparent;\n border: 1px solid ", ";\n border-radius: 50%;\n top: 50%;\n left: 0px;\n transform: translateY(-50%);\n box-sizing: border-box;\n }\n\n &:after {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: ", ";\n border-radius: 50%;\n top: 50%;\n left: 0px;\n transform: translateY(-50%) scale(0);\n transition: ", ";\n }\n"])), function (props) { return props.theme.font.default; }, function (props) { return props.theme.font.sizes.s; }, function (props) { return props.theme.colors.text.default; }, function (props) { return props.theme.font.lineHeight; }, SPACE_FOR_INPUT, function (_a) {
|
|
8
8
|
var theme = _a.theme;
|
|
9
9
|
return theme.colors.blueGrey[300];
|
|
10
10
|
}, function (_a) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Radio/styles.ts"],"names":[],"mappings":";;;;AAAA,uDAAsC;AAEtC,IAAM,eAAe,GAAG,EAAE,CAAA;AAEb,QAAA,gBAAgB,GAAG,2BAAM,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Radio/styles.ts"],"names":[],"mappings":";;;;AAAA,uDAAsC;AAEtC,IAAM,eAAe,GAAG,EAAE,CAAA;AAEb,QAAA,gBAAgB,GAAG,2BAAM,CAAC,KAAK,29BAAqB,qBAC9C,EAAiC,oBACnC,EAAiC,gBACrC,EAAwC,sBAClC,EAAoC,4LAQnC,EAAe,2LAQP,EAAyC,kSAazC,EAAmC,4IAKzC,EAA4C,YAEjE,KAvCkB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAxB,CAAwB,EACnC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAxB,CAAwB,EACrC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAA/B,CAA+B,EAClC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAA3B,CAA2B,EAQnC,eAAe,EAQP,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;AAA1B,CAA0B,EAazC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO;AAApB,CAAoB,EAKzC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC;AAA7B,CAA6B,EAEjE;AAEY,QAAA,gBAAgB,GAAG,2BAAM,CAAC,KAAK,4LAAA,iHAM3C,KAAA"}
|
|
@@ -12,7 +12,10 @@ exports.default = {
|
|
|
12
12
|
var Template = function (_a) {
|
|
13
13
|
var args = tslib_1.__rest(_a, []);
|
|
14
14
|
return (react_1.default.createElement(_1.Select, tslib_1.__assign({}, args),
|
|
15
|
-
react_1.default.createElement("option", null, "
|
|
15
|
+
react_1.default.createElement("option", null, "Choose an option"),
|
|
16
|
+
react_1.default.createElement("option", null, "Option 1"),
|
|
17
|
+
react_1.default.createElement("option", null, "Option 2"),
|
|
18
|
+
react_1.default.createElement("option", null, "Option 3")));
|
|
16
19
|
};
|
|
17
20
|
exports.Default = Template.bind({});
|
|
18
21
|
//# sourceMappingURL=index.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/Select/index.stories.tsx"],"names":[],"mappings":";;;;AACA,+BAAyB;AACzB,uBAAwC;AAExC,kBAAe;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,SAAM;IACjB,UAAU,EAAE,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,EAAE,EAAP,CAAO,CAAC;CACzB,CAAA;AAET,IAAM,QAAQ,GAAyB,UAAC,EAAW;QAAN,IAAI,sBAAT,EAAW,CAAF;IAAO,OAAA,CACpD,8BAAC,SAAM,uBAAK,IAAI;QACZ,iEAAiC,
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/Select/index.stories.tsx"],"names":[],"mappings":";;;;AACA,+BAAyB;AACzB,uBAAwC;AAExC,kBAAe;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,SAAM;IACjB,UAAU,EAAE,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,EAAE,EAAP,CAAO,CAAC;CACzB,CAAA;AAET,IAAM,QAAQ,GAAyB,UAAC,EAAW;QAAN,IAAI,sBAAT,EAAW,CAAF;IAAO,OAAA,CACpD,8BAAC,SAAM,uBAAK,IAAI;QACZ,iEAAiC;QACjC,yDAAyB;QACzB,yDAAyB;QACzB,yDAAyB,CACpB,CACZ,CAAA;CAAA,CAAA;AAEY,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
@@ -1,4 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* 1. There's no box-shadow-color property, so in order to change
|
|
4
|
+
* the box-shadow on focus, we need to either repeat the entire
|
|
5
|
+
* definition, or use CSS variables in the definition and change
|
|
6
|
+
* those on focus.
|
|
7
|
+
* 2. Use a box-shadow instead of a border, to prevent layout changes
|
|
8
|
+
* when focussing the element. On some devices, a 1px border renders
|
|
9
|
+
* as 0.667px. When changing the border to 2px on focus, the element
|
|
10
|
+
* changes height and you notice a slight layout shift due to the
|
|
11
|
+
* missing 0.333px. Box-shadow isn't a part of an element's height
|
|
12
|
+
* calculation, so the layout doesn't change.
|
|
13
|
+
* 3. Box-shadow is removed in high-contrast themes on Windows, so using
|
|
14
|
+
* that as a border will result in a borderless select in those themes.
|
|
15
|
+
* Luckily, there's a media query that detects whether a high contrast
|
|
16
|
+
* theme is active, so we can apply an outline in these situations.
|
|
17
|
+
* See: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
|
|
18
|
+
*/
|
|
2
19
|
export declare const StyledSelect: import("styled-components").StyledComponent<"select", import("styled-components").DefaultTheme, {
|
|
3
20
|
error?: string | React.ReactNode;
|
|
4
21
|
empty?: boolean | undefined;
|
|
@@ -4,11 +4,30 @@ exports.StyledChevron = exports.StyledOption = exports.StyledSelect = void 0;
|
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var styled_components_1 = require("styled-components");
|
|
6
6
|
var styled_map_1 = require("styled-map");
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
/**
|
|
8
|
+
* 1. There's no box-shadow-color property, so in order to change
|
|
9
|
+
* the box-shadow on focus, we need to either repeat the entire
|
|
10
|
+
* definition, or use CSS variables in the definition and change
|
|
11
|
+
* those on focus.
|
|
12
|
+
* 2. Use a box-shadow instead of a border, to prevent layout changes
|
|
13
|
+
* when focussing the element. On some devices, a 1px border renders
|
|
14
|
+
* as 0.667px. When changing the border to 2px on focus, the element
|
|
15
|
+
* changes height and you notice a slight layout shift due to the
|
|
16
|
+
* missing 0.333px. Box-shadow isn't a part of an element's height
|
|
17
|
+
* calculation, so the layout doesn't change.
|
|
18
|
+
* 3. Box-shadow is removed in high-contrast themes on Windows, so using
|
|
19
|
+
* that as a border will result in a borderless select in those themes.
|
|
20
|
+
* Luckily, there's a media query that detects whether a high contrast
|
|
21
|
+
* theme is active, so we can apply an outline in these situations.
|
|
22
|
+
* See: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
|
|
23
|
+
*/
|
|
24
|
+
exports.StyledSelect = styled_components_1.default.select(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n --box-shadow-color: ", "; // [1]\n --box-shadow-width: 1px; // [1]\n\n width: 100%;\n padding: 12px;\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n display: block;\n appearance: none;\n line-height: 1.25rem;\n border-radius: ", "px;\n border-width: 0;\n color: ", ";\n background-color: ", ";\n cursor: ", ";\n box-shadow: inset 0 0 0 var(--box-shadow-width) var(--box-shadow-color),\n ", "; // [2]\n transition: background-color 0.2s ease-in-out 0s,\n box-shadow 0.2s ease-in-out 0s;\n\n @media (forced-colors: active) {\n outline: 1px solid ButtonBorder; // [3]\n }\n\n &:focus {\n --box-shadow-color: ", ";\n --box-shadow-width: 2px;\n\n @media (forced-colors: none) {\n outline-width: 0;\n }\n\n @media (forced-colors: active) {\n outline-color: Highlight; // [3]\n }\n }\n\n &::-ms-expand {\n display: none;\n }\n"], ["\n --box-shadow-color: ", "; // [1]\n --box-shadow-width: 1px; // [1]\n\n width: 100%;\n padding: 12px;\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n display: block;\n appearance: none;\n line-height: 1.25rem;\n border-radius: ", "px;\n border-width: 0;\n color: ", ";\n background-color: ", ";\n cursor: ", ";\n box-shadow: inset 0 0 0 var(--box-shadow-width) var(--box-shadow-color),\n ", "; // [2]\n transition: background-color 0.2s ease-in-out 0s,\n box-shadow 0.2s ease-in-out 0s;\n\n @media (forced-colors: active) {\n outline: 1px solid ButtonBorder; // [3]\n }\n\n &:focus {\n --box-shadow-color: ", ";\n --box-shadow-width: 2px;\n\n @media (forced-colors: none) {\n outline-width: 0;\n }\n\n @media (forced-colors: active) {\n outline-color: Highlight; // [3]\n }\n }\n\n &::-ms-expand {\n display: none;\n }\n"])), function (props) {
|
|
25
|
+
return props.disabled
|
|
26
|
+
? props.theme.colors.blueGrey[100]
|
|
27
|
+
: props.error
|
|
28
|
+
? props.theme.colors.input.error
|
|
29
|
+
: props.theme.colors.input.border;
|
|
30
|
+
}, function (props) { return props.theme.font.default; }, function (props) { return props.theme.font.sizes.s; }, function (props) { return props.theme.borderRadius.input; }, function (props) {
|
|
12
31
|
return props.empty
|
|
13
32
|
? props.theme.colors.input.placeholder
|
|
14
33
|
: props.disabled
|
|
@@ -17,7 +36,7 @@ exports.StyledSelect = styled_components_1.default.select(templateObject_1 || (t
|
|
|
17
36
|
}, function (props) { return props.theme.colors.input.background; }, (0, styled_map_1.default)({
|
|
18
37
|
disabled: 'not-allowed',
|
|
19
38
|
default: 'pointer',
|
|
20
|
-
}), function (props) { return props.theme.shadow.input; }, function (props) { return props.theme.colors.
|
|
39
|
+
}), function (props) { return props.theme.shadow.input; }, function (props) { return props.theme.colors.orange[500]; });
|
|
21
40
|
exports.StyledOption = styled_components_1.default.option(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (props) { return props.theme.colors.input.color; });
|
|
22
41
|
exports.StyledChevron = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 12px;\n height: 100%;\n display: flex;\n align-items: center;\n pointer-events: none;\n"], ["\n position: absolute;\n top: 0;\n right: 12px;\n height: 100%;\n display: flex;\n align-items: center;\n pointer-events: none;\n"])));
|
|
23
42
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";;;;AACA,uDAAsC;AACtC,yCAAkC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";;;;AACA,uDAAsC;AACtC,yCAAkC;AAElC;;;;;;;;;;;;;;;;GAgBG;AACU,QAAA,YAAY,GAAG,2BAAM,CAAC,MAAM,kjCAKxC,4BACyB,EAKmB,0GAK1B,EAAiC,oBACnC,EAAiC,sHAK7B,EAAuC,wCAE/C,EAK+B,2BACpB,EAA4C,iBACtD,EAGR,2FAEI,EAAiC,yPASb,EAAuC,6RAepE,KAtDyB,UAAA,KAAK;IACvB,OAAA,KAAK,CAAC,QAAQ;QACV,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;QAClC,CAAC,CAAC,KAAK,CAAC,KAAK;YACb,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK;YAChC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;AAJrC,CAIqC,EAK1B,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAxB,CAAwB,EACnC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAxB,CAAwB,EAK7B,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAA9B,CAA8B,EAE/C,UAAA,KAAK;IACV,OAAA,KAAK,CAAC,KAAK;QACP,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW;QACtC,CAAC,CAAC,KAAK,CAAC,QAAQ;YAChB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC9B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK;AAJpC,CAIoC,EACpB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,EAAnC,CAAmC,EACtD,IAAA,oBAAS,EAAC;IAChB,QAAQ,EAAE,aAAa;IACvB,OAAO,EAAE,SAAS;CACrB,CAAC,EAEI,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAxB,CAAwB,EASb,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,EAA9B,CAA8B,EAepE;AAEY,QAAA,YAAY,GAAG,2BAAM,CAAC,MAAM,iGAAA,eAC5B,EAAuC,KACnD,KADY,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAA9B,CAA8B,EACnD;AAEY,QAAA,aAAa,GAAG,2BAAM,CAAC,GAAG,mOAAA,wJAQtC,KAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export interface TextAreaProps extends React.
|
|
2
|
+
export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
3
3
|
error?: string | React.ReactNode;
|
|
4
4
|
hook?: string;
|
|
5
5
|
}
|
|
@@ -2,3 +2,4 @@ import { TextAreaProps } from './';
|
|
|
2
2
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
|
|
3
3
|
export default _default;
|
|
4
4
|
export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TextAreaProps>;
|
|
5
|
+
export declare const WithPlaceholder: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TextAreaProps>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Default = void 0;
|
|
3
|
+
exports.WithPlaceholder = exports.Default = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var react_1 = require("react");
|
|
6
6
|
var _1 = require("./");
|
|
@@ -11,7 +11,14 @@ exports.default = {
|
|
|
11
11
|
};
|
|
12
12
|
var Template = function (_a) {
|
|
13
13
|
var args = tslib_1.__rest(_a, []);
|
|
14
|
-
return (react_1.default.createElement(_1.TextArea, tslib_1.__assign({}, args)
|
|
14
|
+
return (react_1.default.createElement(_1.TextArea, tslib_1.__assign({}, args)));
|
|
15
15
|
};
|
|
16
16
|
exports.Default = Template.bind({});
|
|
17
|
+
exports.Default.args = {
|
|
18
|
+
value: 'Hello\nTest\nMultiple lines',
|
|
19
|
+
};
|
|
20
|
+
exports.WithPlaceholder = Template.bind({});
|
|
21
|
+
exports.WithPlaceholder.args = {
|
|
22
|
+
placeholder: 'Enter your name',
|
|
23
|
+
};
|
|
17
24
|
//# sourceMappingURL=index.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/TextArea/index.stories.tsx"],"names":[],"mappings":";;;;AACA,+BAAyB;AACzB,uBAA4C;AAE5C,kBAAe;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,WAAQ;IACnB,UAAU,EAAE,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,EAAE,EAAP,CAAO,CAAC;CACzB,CAAA;AAET,IAAM,QAAQ,GAA2B,UAAC,EAAW;QAAN,IAAI,sBAAT,EAAW,CAAF;IAAO,OAAA,CACtD,8BAAC,WAAQ,uBAAK,IAAI,
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/TextArea/index.stories.tsx"],"names":[],"mappings":";;;;AACA,+BAAyB;AACzB,uBAA4C;AAE5C,kBAAe;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,WAAQ;IACnB,UAAU,EAAE,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,EAAE,EAAP,CAAO,CAAC;CACzB,CAAA;AAET,IAAM,QAAQ,GAA2B,UAAC,EAAW;QAAN,IAAI,sBAAT,EAAW,CAAF;IAAO,OAAA,CACtD,8BAAC,WAAQ,uBAAK,IAAI,EAAa,CAClC,CAAA;CAAA,CAAA;AAEY,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,eAAO,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,6BAA6B;CACvC,CAAA;AAEY,QAAA,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAChD,uBAAe,CAAC,IAAI,GAAG;IACnB,WAAW,EAAE,iBAAiB;CACjC,CAAA"}
|
|
@@ -1,2 +1,19 @@
|
|
|
1
1
|
import { TextAreaProps } from '.';
|
|
2
|
+
/**
|
|
3
|
+
* 1. There's no box-shadow-color property, so in order to change
|
|
4
|
+
* the box-shadow on focus, we need to either repeat the entire
|
|
5
|
+
* definition, or use CSS variables in the definition and change
|
|
6
|
+
* those on focus.
|
|
7
|
+
* 2. Use a box-shadow instead of a border, to prevent layout changes
|
|
8
|
+
* when focussing the element. On some devices, a 1px border renders
|
|
9
|
+
* as 0.667px. When changing the border to 2px on focus, the element
|
|
10
|
+
* changes height and you notice a slight layout shift due to the
|
|
11
|
+
* missing 0.333px. Box-shadow isn't a part of an element's height
|
|
12
|
+
* calculation, so the layout doesn't change.
|
|
13
|
+
* 3. Box-shadow is removed in high-contrast themes on Windows, so using
|
|
14
|
+
* that as a border will result in a borderless textarea in those themes.
|
|
15
|
+
* Luckily, there's a media query that detects whether a high contrast
|
|
16
|
+
* theme is active, so we can apply an outline in these situations.
|
|
17
|
+
* See: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
|
|
18
|
+
*/
|
|
2
19
|
export declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, Pick<TextAreaProps, "error">, never>;
|
|
@@ -4,19 +4,32 @@ exports.StyledTextArea = void 0;
|
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var styled_components_1 = require("styled-components");
|
|
6
6
|
var styled_map_1 = require("styled-map");
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
/**
|
|
8
|
+
* 1. There's no box-shadow-color property, so in order to change
|
|
9
|
+
* the box-shadow on focus, we need to either repeat the entire
|
|
10
|
+
* definition, or use CSS variables in the definition and change
|
|
11
|
+
* those on focus.
|
|
12
|
+
* 2. Use a box-shadow instead of a border, to prevent layout changes
|
|
13
|
+
* when focussing the element. On some devices, a 1px border renders
|
|
14
|
+
* as 0.667px. When changing the border to 2px on focus, the element
|
|
15
|
+
* changes height and you notice a slight layout shift due to the
|
|
16
|
+
* missing 0.333px. Box-shadow isn't a part of an element's height
|
|
17
|
+
* calculation, so the layout doesn't change.
|
|
18
|
+
* 3. Box-shadow is removed in high-contrast themes on Windows, so using
|
|
19
|
+
* that as a border will result in a borderless textarea in those themes.
|
|
20
|
+
* Luckily, there's a media query that detects whether a high contrast
|
|
21
|
+
* theme is active, so we can apply an outline in these situations.
|
|
22
|
+
* See: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
|
|
23
|
+
*/
|
|
24
|
+
exports.StyledTextArea = styled_components_1.default.textarea(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n --box-shadow-color: ", "; // [1]\n --box-shadow-width: 1px; // [1]\n\n box-sizing: border-box;\n display: block;\n width: 100%;\n padding: 12px;\n resize: none;\n border-radius: ", "px;\n border-width: 0;\n box-shadow: inset 0 0 0 var(--box-shadow-width) var(--box-shadow-color),\n ", "; // [2]\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n appearance: none;\n opacity: ", ";\n transition: background-color 0.2s ease-in-out 0s,\n box-shadow 0.2s ease-in-out 0s;\n\n @media (forced-colors: active) {\n outline: 1px solid ButtonBorder; // [3]\n }\n\n &:focus {\n --box-shadow-color: ", ";\n --box-shadow-width: 2px;\n\n @media (forced-colors: none) {\n outline-width: 0;\n }\n\n @media (forced-colors: active) {\n outline-color: Highlight; // [3]\n }\n }\n\n &::placeholder {\n color: ", ";\n font-weight: 400;\n }\n"], ["\n --box-shadow-color: ", "; // [1]\n --box-shadow-width: 1px; // [1]\n\n box-sizing: border-box;\n display: block;\n width: 100%;\n padding: 12px;\n resize: none;\n border-radius: ", "px;\n border-width: 0;\n box-shadow: inset 0 0 0 var(--box-shadow-width) var(--box-shadow-color),\n ", "; // [2]\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n appearance: none;\n opacity: ", ";\n transition: background-color 0.2s ease-in-out 0s,\n box-shadow 0.2s ease-in-out 0s;\n\n @media (forced-colors: active) {\n outline: 1px solid ButtonBorder; // [3]\n }\n\n &:focus {\n --box-shadow-color: ", ";\n --box-shadow-width: 2px;\n\n @media (forced-colors: none) {\n outline-width: 0;\n }\n\n @media (forced-colors: active) {\n outline-color: Highlight; // [3]\n }\n }\n\n &::placeholder {\n color: ", ";\n font-weight: 400;\n }\n"])), function (props) {
|
|
25
|
+
return props.disabled
|
|
26
|
+
? props.theme.colors.blueGrey[100]
|
|
27
|
+
: props.error
|
|
28
|
+
? props.theme.colors.input.error
|
|
29
|
+
: props.theme.colors.input.border;
|
|
30
|
+
}, function (props) { return props.theme.borderRadius.input; }, function (props) { return props.theme.shadow.input; }, function (props) { return props.theme.colors.input.background; }, function (props) { return props.theme.font.default; }, function (props) { return props.theme.font.sizes.s; }, (0, styled_map_1.default)({
|
|
12
31
|
disabled: 0.2,
|
|
13
32
|
default: 1,
|
|
14
|
-
}), function (
|
|
15
|
-
var theme = _a.theme;
|
|
16
|
-
return theme.spacing[2];
|
|
17
|
-
}, function (props) { return props.theme.shadow.input; }, function (_a) {
|
|
18
|
-
var theme = _a.theme;
|
|
19
|
-
return theme.spacing[2];
|
|
20
|
-
}, function (props) { return props.theme.colors.input.focus; });
|
|
33
|
+
}), function (props) { return props.theme.colors.orange[500]; }, function (props) { return props.theme.colors.input.placeholder; });
|
|
21
34
|
var templateObject_1;
|
|
22
35
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/styles.ts"],"names":[],"mappings":";;;;AAAA,uDAAsC;AACtC,yCAAkC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/styles.ts"],"names":[],"mappings":";;;;AAAA,uDAAsC;AACtC,yCAAkC;AAGlC;;;;;;;;;;;;;;;;GAgBG;AACU,QAAA,cAAc,GAAG,2BAAM,CAAC,QAAQ,olCAA8B,4BACjD,EAKmB,iLAQxB,EAAuC,mHAGlD,EAAiC,kCACnB,EAA4C,sBACjD,EAAiC,oBACnC,EAAiC,oEAGnC,EAGT,kPASwB,EAAuC,8QAapD,EAA6C,uCAG7D,KAlDyB,UAAA,KAAK;IACvB,OAAA,KAAK,CAAC,QAAQ;QACV,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;QAClC,CAAC,CAAC,KAAK,CAAC,KAAK;YACb,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK;YAChC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;AAJrC,CAIqC,EAQxB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAA9B,CAA8B,EAGlD,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAxB,CAAwB,EACnB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,EAAnC,CAAmC,EACjD,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAxB,CAAwB,EACnC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAxB,CAAwB,EAGnC,IAAA,oBAAS,EAAC;IACjB,QAAQ,EAAE,GAAG;IACb,OAAO,EAAE,CAAC;CACb,CAAC,EASwB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,EAA9B,CAA8B,EAapD,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAApC,CAAoC,EAG7D"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@beequip/hexagon",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.4",
|
|
4
4
|
"description": "Component library for BEEQUIP",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
"release-canary": "np --any-branch",
|
|
18
18
|
"release": "np",
|
|
19
19
|
"test": "yarn run lint:check",
|
|
20
|
-
"storybook": "storybook dev -
|
|
21
|
-
"build-storybook": "storybook build
|
|
20
|
+
"storybook": "storybook dev -p 6006",
|
|
21
|
+
"build-storybook": "storybook build"
|
|
22
22
|
},
|
|
23
23
|
"types": "./dist/index.d.ts",
|
|
24
24
|
"devDependencies": {
|