@itcase/ui 1.2.17 → 1.2.19
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/{Button-YvFWfIzn.js → Button--5mnRJi2.js} +2 -2
- package/dist/{Button-VFc2pmvE.js → Button-D1PnF1C-.js} +2 -2
- package/dist/{DropdownItem-sLbGv_08.js → DropdownItem-D0dOP4NL.js} +1 -1
- package/dist/{DropdownItem-CEPQWGQ5.js → DropdownItem-D52wxY6I.js} +1 -1
- package/dist/{Group-BDuYmoBK.js → Group-B2oTJg0t.js} +1 -1
- package/dist/{Group-12uup5mu.js → Group-CVUfaHaS.js} +1 -1
- package/dist/{Icon-mG_ucnJz.js → Icon-D-zjcPll.js} +3 -6
- package/dist/{Icon-BanAVsve.js → Icon-DD_Vyrw0.js} +3 -6
- package/dist/{Link-BSquFKSX.js → Link-CeQuavin.js} +2 -5
- package/dist/{Link-BoJdm1hz.js → Link-CqWzwh8V.js} +2 -5
- package/dist/{MenuItem-Snw0sSXT.js → MenuItem-B5ypY7Uo.js} +1 -1
- package/dist/{MenuItem-p5bhKFb0.js → MenuItem-BL6WBNjL.js} +1 -1
- package/dist/cjs/components/Accordion.js +5 -11
- package/dist/cjs/components/Avatar.js +2 -2
- package/dist/cjs/components/Breadcrumbs.js +2 -2
- package/dist/cjs/components/Button.js +3 -3
- package/dist/cjs/components/Cell.js +2 -2
- package/dist/cjs/components/Choice.js +45 -31
- package/dist/cjs/components/ContextMenu.js +2 -2
- package/dist/cjs/components/CookiesWarning.js +4 -4
- package/dist/cjs/components/DatePicker.js +3 -3
- package/dist/cjs/components/Dropdown.js +2 -2
- package/dist/cjs/components/Flex.js +1 -7
- package/dist/cjs/components/FormField.js +3 -3
- package/dist/cjs/components/Group.js +1 -1
- package/dist/cjs/components/Icon.js +2 -2
- package/dist/cjs/components/InputPassword.js +2 -2
- package/dist/cjs/components/LanguageSelector.js +2 -2
- package/dist/cjs/components/Link.js +1 -1
- package/dist/cjs/components/List.js +1 -1
- package/dist/cjs/components/Logo.js +1 -1
- package/dist/cjs/components/Menu.js +2 -2
- package/dist/cjs/components/MenuItem.js +2 -2
- package/dist/cjs/components/Pagination.js +3 -3
- package/dist/cjs/components/Panel.js +1 -1
- package/dist/cjs/components/Response.js +4 -4
- package/dist/cjs/components/Search.js +2 -2
- package/dist/cjs/components/Select.js +5 -5
- package/dist/cjs/components/SiteMenu.js +2 -2
- package/dist/cjs/components/Tab.js +4 -9
- package/dist/cjs/hooks/useViewportFix.js +43 -0
- package/dist/components/Accordion.js +5 -11
- package/dist/components/Avatar.js +2 -2
- package/dist/components/Breadcrumbs.js +2 -2
- package/dist/components/Button.js +3 -3
- package/dist/components/Cell.js +2 -2
- package/dist/components/Choice.js +45 -31
- package/dist/components/ContextMenu.js +2 -2
- package/dist/components/CookiesWarning.js +4 -4
- package/dist/components/DatePicker.js +3 -3
- package/dist/components/Dropdown.js +2 -2
- package/dist/components/Flex.js +1 -7
- package/dist/components/FormField.js +3 -3
- package/dist/components/Group.js +1 -1
- package/dist/components/Icon.js +2 -2
- package/dist/components/InputPassword.js +2 -2
- package/dist/components/LanguageSelector.js +2 -2
- package/dist/components/Link.js +1 -1
- package/dist/components/List.js +1 -1
- package/dist/components/Logo.js +1 -1
- package/dist/components/Menu.js +2 -2
- package/dist/components/MenuItem.js +2 -2
- package/dist/components/Pagination.js +3 -3
- package/dist/components/Panel.js +1 -1
- package/dist/components/Response.js +4 -4
- package/dist/components/Search.js +2 -2
- package/dist/components/Select.js +5 -5
- package/dist/components/SiteMenu.js +2 -2
- package/dist/components/Tab.js +4 -9
- package/dist/css/components/Choice/Choice.css +14 -0
- package/dist/css/components/Icon/Icon.css +10 -6
- package/dist/css/components/Select/Select.css +1 -1
- package/dist/css/components/Select/css/__input-container/select__input-container.css +1 -1
- package/dist/css/mixins/mixin.css +5 -0
- package/dist/css/mixins/mixin_animation.css +1 -1
- package/dist/css/mixins/mixin_typography.css +4 -3
- package/dist/css/styles/width/width.css +1 -1
- package/dist/hooks/useViewportFix.js +41 -0
- package/dist/stories/Appearance.mdx +20 -0
- package/dist/stories/Appearance.stories.js +47 -0
- package/dist/stories/Configure.mdx +364 -0
- package/dist/stories/Header.stories.js +29 -0
- package/dist/stories/Overview.mdx +12 -0
- package/dist/stories/Page.stories.js +28 -0
- package/dist/stories/Playground.mdx +11 -0
- package/dist/stories/Tile.stories.js +5 -5
- package/dist/types/components/Accordion/Accordion.d.ts +0 -5
- package/dist/types/components/Accordion/AccordionItem.d.ts +0 -5
- package/dist/types/components/Choice/Choice.interface.d.ts +3 -1
- package/dist/types/components/Flex/Flex.d.ts +0 -5
- package/dist/types/components/Flex/FlexItem.d.ts +0 -5
- package/dist/types/components/Link/Link.d.ts +0 -5
- package/dist/types/components/Select/Select.interface.d.ts +1 -0
- package/dist/types/components/Tab/Tab.d.ts +0 -7
- package/dist/types/components/Tab/Tab.interface.d.ts +11 -2
- package/dist/types/hooks/useViewportFix.d.ts +2 -0
- package/dist/types/types/componentProps/appearanceKeys.d.ts +1 -1
- package/dist/types/types/componentProps/flexWrap.d.ts +1 -1
- package/dist/types/types/componentProps/wrap.d.ts +1 -1
- package/package.json +35 -13
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
4
4
|
import { D as Divider } from '../Divider-U5UdY-ef.js';
|
|
5
|
-
import { I as Icon } from '../Icon-
|
|
5
|
+
import { I as Icon } from '../Icon-DD_Vyrw0.js';
|
|
6
6
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
7
7
|
import 'react';
|
|
8
8
|
import 'lodash/castArray';
|
|
@@ -16,7 +16,7 @@ import 'lodash/maxBy';
|
|
|
16
16
|
import 'lodash/upperFirst';
|
|
17
17
|
import '../hooks/styleAttributes.js';
|
|
18
18
|
import 'react-inlinesvg';
|
|
19
|
-
import '../Link-
|
|
19
|
+
import '../Link-CeQuavin.js';
|
|
20
20
|
import '../tslib.es6-5FtW-kfi.js';
|
|
21
21
|
import '../Tooltip-DJufHBiQ.js';
|
|
22
22
|
import '../Title-BfSFPJtJ.js';
|
|
@@ -3,8 +3,8 @@ import { useRef, useMemo, useCallback, useEffect } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import Cookies from 'js-cookie';
|
|
5
5
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
6
|
-
import { B as Button } from '../Button
|
|
7
|
-
import { G as Group } from '../Group-
|
|
6
|
+
import { B as Button } from '../Button--5mnRJi2.js';
|
|
7
|
+
import { G as Group } from '../Group-CVUfaHaS.js';
|
|
8
8
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
9
9
|
import 'lodash/castArray';
|
|
10
10
|
import 'lodash/camelCase';
|
|
@@ -16,9 +16,9 @@ import '../hooks/useStyles.js';
|
|
|
16
16
|
import 'lodash/maxBy';
|
|
17
17
|
import 'lodash/upperFirst';
|
|
18
18
|
import '../hooks/styleAttributes.js';
|
|
19
|
-
import '../Icon-
|
|
19
|
+
import '../Icon-DD_Vyrw0.js';
|
|
20
20
|
import 'react-inlinesvg';
|
|
21
|
-
import '../Link-
|
|
21
|
+
import '../Link-CeQuavin.js';
|
|
22
22
|
import '../tslib.es6-5FtW-kfi.js';
|
|
23
23
|
import '../Tooltip-DJufHBiQ.js';
|
|
24
24
|
import '../Title-BfSFPJtJ.js';
|
|
@@ -5,8 +5,8 @@ import clsx from 'clsx';
|
|
|
5
5
|
import DatePicker from 'react-datepicker';
|
|
6
6
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
7
7
|
import { useStyles } from '../hooks/useStyles.js';
|
|
8
|
-
import { B as Button } from '../Button
|
|
9
|
-
import { I as Icon } from '../Icon-
|
|
8
|
+
import { B as Button } from '../Button--5mnRJi2.js';
|
|
9
|
+
import { I as Icon } from '../Icon-DD_Vyrw0.js';
|
|
10
10
|
import { I as Input } from '../Input-UkM-ag48.js';
|
|
11
11
|
import { L as Label } from '../Label-BA_CnRBq.js';
|
|
12
12
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
@@ -19,7 +19,7 @@ import 'react-responsive';
|
|
|
19
19
|
import 'lodash/maxBy';
|
|
20
20
|
import 'lodash/upperFirst';
|
|
21
21
|
import '../hooks/styleAttributes.js';
|
|
22
|
-
import '../Link-
|
|
22
|
+
import '../Link-CeQuavin.js';
|
|
23
23
|
import '../Loader-CJ8ZCdwy.js';
|
|
24
24
|
import 'react-inlinesvg';
|
|
25
25
|
import '../Tooltip-DJufHBiQ.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { D as Dropdown, a as DropdownItem } from '../DropdownItem-
|
|
1
|
+
export { D as Dropdown, a as DropdownItem } from '../DropdownItem-D0dOP4NL.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'clsx';
|
|
@@ -14,6 +14,6 @@ import 'lodash/maxBy';
|
|
|
14
14
|
import 'lodash/upperFirst';
|
|
15
15
|
import '../hooks/styleAttributes.js';
|
|
16
16
|
import '../Divider-U5UdY-ef.js';
|
|
17
|
-
import '../Link-
|
|
17
|
+
import '../Link-CeQuavin.js';
|
|
18
18
|
import '../tslib.es6-5FtW-kfi.js';
|
|
19
19
|
import '../Text-CG3xPG27.js';
|
package/dist/components/Flex.js
CHANGED
|
@@ -67,12 +67,9 @@ function Flex(props) {
|
|
|
67
67
|
var _b = useStyles(props), flexStyles = _b.styles, flexWrapperStyles = _b.wrapper;
|
|
68
68
|
return (jsx(Tag, { className: clsx(className, 'flex', widthClass, alignContentClass, alignItemsClass, directionClass, fillClass, flowClass, borderColorClass, borderTypeClass, positionClass, justifyContentClass, shapeClass, type && "flex_type_".concat(type), wrapClass), id: id, style: flexStyles, onClick: onClick, children: jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
|
|
69
69
|
}
|
|
70
|
-
Flex.defaultProps = {
|
|
71
|
-
tag: 'div',
|
|
72
|
-
};
|
|
73
70
|
|
|
74
71
|
function FlexItem(props) {
|
|
75
|
-
var children = props.children, className = props.className, _a = props.tag, Tag = _a === void 0 ? 'div' : _a
|
|
72
|
+
var children = props.children, className = props.className, htmlFor = props.htmlFor, _a = props.tag, Tag = _a === void 0 ? 'div' : _a;
|
|
76
73
|
var alignSelfClass = useDeviceTargetClass(props, {
|
|
77
74
|
prefix: 'flex__item_align-self_',
|
|
78
75
|
propsKey: 'alignSelf',
|
|
@@ -121,8 +118,5 @@ function FlexItem(props) {
|
|
|
121
118
|
var flexItemStyles = useStyles(props).styles;
|
|
122
119
|
return (jsx(Tag, { className: clsx(className, 'flex__item', positionClass, alignItemsClass, alignSelfClass, directionClass, fillClass, fillHoverClass, growClass, justifyContentClass, shapeClass, widthClass, wrapClass), htmlFor: htmlFor, style: flexItemStyles, children: children }));
|
|
123
120
|
}
|
|
124
|
-
FlexItem.defaultProps = {
|
|
125
|
-
tag: 'div',
|
|
126
|
-
};
|
|
127
121
|
|
|
128
122
|
export { Flex, FlexItem };
|
|
@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { D as Divider } from '../Divider-U5UdY-ef.js';
|
|
5
5
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
6
|
-
import { I as Icon } from '../Icon-
|
|
6
|
+
import { I as Icon } from '../Icon-DD_Vyrw0.js';
|
|
7
7
|
import { useStyles } from '../hooks/useStyles.js';
|
|
8
8
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
9
9
|
import { R as Radio } from '../Radio-oMf0vN7T.js';
|
|
@@ -11,10 +11,10 @@ import 'react-select';
|
|
|
11
11
|
import { SelectInput } from './Select.js';
|
|
12
12
|
import 'react';
|
|
13
13
|
import '../Badge-CrhdvxY6.js';
|
|
14
|
-
import '../Group-
|
|
14
|
+
import '../Group-CVUfaHaS.js';
|
|
15
15
|
import { S as Switch } from '../Switch-DEXsrPCo.js';
|
|
16
16
|
import 'react-inlinesvg';
|
|
17
|
-
import '../Link-
|
|
17
|
+
import '../Link-CeQuavin.js';
|
|
18
18
|
import '../Tooltip-DJufHBiQ.js';
|
|
19
19
|
import '../Title-BfSFPJtJ.js';
|
|
20
20
|
import '../context/UIContext.js';
|
package/dist/components/Group.js
CHANGED
package/dist/components/Icon.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { I as Icon, i as iconConfig } from '../Icon-
|
|
1
|
+
export { I as Icon, i as iconConfig } from '../Icon-DD_Vyrw0.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'clsx';
|
|
@@ -14,7 +14,7 @@ import '../hooks/useStyles.js';
|
|
|
14
14
|
import 'lodash/maxBy';
|
|
15
15
|
import 'lodash/upperFirst';
|
|
16
16
|
import '../hooks/styleAttributes.js';
|
|
17
|
-
import '../Link-
|
|
17
|
+
import '../Link-CeQuavin.js';
|
|
18
18
|
import '../tslib.es6-5FtW-kfi.js';
|
|
19
19
|
import '../Tooltip-DJufHBiQ.js';
|
|
20
20
|
import '../Text-CG3xPG27.js';
|
|
@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { useState, useMemo, useCallback } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
5
|
-
import { I as Icon } from '../Icon-
|
|
5
|
+
import { I as Icon } from '../Icon-DD_Vyrw0.js';
|
|
6
6
|
import 'lodash/castArray';
|
|
7
7
|
import 'lodash/camelCase';
|
|
8
8
|
import '../context/UIContext.js';
|
|
@@ -14,7 +14,7 @@ import '../hooks/useStyles.js';
|
|
|
14
14
|
import 'lodash/maxBy';
|
|
15
15
|
import 'lodash/upperFirst';
|
|
16
16
|
import '../hooks/styleAttributes.js';
|
|
17
|
-
import '../Link-
|
|
17
|
+
import '../Link-CeQuavin.js';
|
|
18
18
|
import '../tslib.es6-5FtW-kfi.js';
|
|
19
19
|
import '../Tooltip-DJufHBiQ.js';
|
|
20
20
|
import '../Text-CG3xPG27.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { I as Icon } from '../Icon-
|
|
3
|
+
import { I as Icon } from '../Icon-DD_Vyrw0.js';
|
|
4
4
|
import 'react';
|
|
5
5
|
import 'react-inlinesvg';
|
|
6
6
|
import '../hooks/useDeviceTargetClass.js';
|
|
@@ -14,7 +14,7 @@ import '../hooks/useStyles.js';
|
|
|
14
14
|
import 'lodash/maxBy';
|
|
15
15
|
import 'lodash/upperFirst';
|
|
16
16
|
import '../hooks/styleAttributes.js';
|
|
17
|
-
import '../Link-
|
|
17
|
+
import '../Link-CeQuavin.js';
|
|
18
18
|
import '../tslib.es6-5FtW-kfi.js';
|
|
19
19
|
import '../Tooltip-DJufHBiQ.js';
|
|
20
20
|
import '../Text-CG3xPG27.js';
|
package/dist/components/Link.js
CHANGED
package/dist/components/List.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { useStyles } from '../hooks/useStyles.js';
|
|
4
4
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
5
|
-
import { L as Link } from '../Link-
|
|
5
|
+
import { L as Link } from '../Link-CeQuavin.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
import 'lodash/camelCase';
|
|
8
8
|
import 'lodash/maxBy';
|
package/dist/components/Logo.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
4
4
|
import { useStyles } from '../hooks/useStyles.js';
|
|
5
|
-
import { a as LinkWrapper } from '../Link-
|
|
5
|
+
import { a as LinkWrapper } from '../Link-CeQuavin.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
import 'lodash/castArray';
|
|
8
8
|
import 'lodash/camelCase';
|
package/dist/components/Menu.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
4
4
|
import { useStyles } from '../hooks/useStyles.js';
|
|
5
|
-
import { M as MenuItem } from '../MenuItem-
|
|
5
|
+
import { M as MenuItem } from '../MenuItem-BL6WBNjL.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
import 'lodash/castArray';
|
|
8
8
|
import 'lodash/camelCase';
|
|
@@ -13,7 +13,7 @@ import 'react-responsive';
|
|
|
13
13
|
import 'lodash/maxBy';
|
|
14
14
|
import 'lodash/upperFirst';
|
|
15
15
|
import '../hooks/styleAttributes.js';
|
|
16
|
-
import '../Link-
|
|
16
|
+
import '../Link-CeQuavin.js';
|
|
17
17
|
import '../tslib.es6-5FtW-kfi.js';
|
|
18
18
|
import '../Text-CG3xPG27.js';
|
|
19
19
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { M as MenuItem, m as menuItemConfig } from '../MenuItem-
|
|
1
|
+
export { M as MenuItem, m as menuItemConfig } from '../MenuItem-BL6WBNjL.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'clsx';
|
|
@@ -13,6 +13,6 @@ import '../hooks/useStyles.js';
|
|
|
13
13
|
import 'lodash/maxBy';
|
|
14
14
|
import 'lodash/upperFirst';
|
|
15
15
|
import '../hooks/styleAttributes.js';
|
|
16
|
-
import '../Link-
|
|
16
|
+
import '../Link-CeQuavin.js';
|
|
17
17
|
import '../tslib.es6-5FtW-kfi.js';
|
|
18
18
|
import '../Text-CG3xPG27.js';
|
|
@@ -4,8 +4,8 @@ import clsx from 'clsx';
|
|
|
4
4
|
import ceil from 'lodash/ceil';
|
|
5
5
|
import ReactPaginate from 'react-paginate';
|
|
6
6
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
7
|
-
import { D as Dropdown, a as DropdownItem } from '../DropdownItem-
|
|
8
|
-
import { I as Icon } from '../Icon-
|
|
7
|
+
import { D as Dropdown, a as DropdownItem } from '../DropdownItem-D0dOP4NL.js';
|
|
8
|
+
import { I as Icon } from '../Icon-DD_Vyrw0.js';
|
|
9
9
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
10
10
|
import 'lodash/castArray';
|
|
11
11
|
import 'lodash/camelCase';
|
|
@@ -18,7 +18,7 @@ import 'lodash/maxBy';
|
|
|
18
18
|
import 'lodash/upperFirst';
|
|
19
19
|
import '../hooks/styleAttributes.js';
|
|
20
20
|
import '../Divider-U5UdY-ef.js';
|
|
21
|
-
import '../Link-
|
|
21
|
+
import '../Link-CeQuavin.js';
|
|
22
22
|
import '../tslib.es6-5FtW-kfi.js';
|
|
23
23
|
import 'react-inlinesvg';
|
|
24
24
|
import '../Tooltip-DJufHBiQ.js';
|
package/dist/components/Panel.js
CHANGED
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
5
5
|
import { useStyles } from '../hooks/useStyles.js';
|
|
6
|
-
import { G as Group } from '../Group-
|
|
6
|
+
import { G as Group } from '../Group-CVUfaHaS.js';
|
|
7
7
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
8
8
|
import 'lodash/castArray';
|
|
9
9
|
import 'lodash/camelCase';
|
|
@@ -4,8 +4,8 @@ import clsx from 'clsx';
|
|
|
4
4
|
import SVG from 'react-inlinesvg';
|
|
5
5
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
6
6
|
import { useStyles } from '../hooks/useStyles.js';
|
|
7
|
-
import { B as Button } from '../Button
|
|
8
|
-
import { G as Group } from '../Group-
|
|
7
|
+
import { B as Button } from '../Button--5mnRJi2.js';
|
|
8
|
+
import { G as Group } from '../Group-CVUfaHaS.js';
|
|
9
9
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
10
10
|
import { T as Title } from '../Title-BfSFPJtJ.js';
|
|
11
11
|
import 'lodash/castArray';
|
|
@@ -17,8 +17,8 @@ import 'react-responsive';
|
|
|
17
17
|
import 'lodash/maxBy';
|
|
18
18
|
import 'lodash/upperFirst';
|
|
19
19
|
import '../hooks/styleAttributes.js';
|
|
20
|
-
import '../Icon-
|
|
21
|
-
import '../Link-
|
|
20
|
+
import '../Icon-DD_Vyrw0.js';
|
|
21
|
+
import '../Link-CeQuavin.js';
|
|
22
22
|
import '../tslib.es6-5FtW-kfi.js';
|
|
23
23
|
import '../Tooltip-DJufHBiQ.js';
|
|
24
24
|
import '../Loader-CJ8ZCdwy.js';
|
|
@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
5
5
|
import { useStyles } from '../hooks/useStyles.js';
|
|
6
|
-
import { I as Icon } from '../Icon-
|
|
6
|
+
import { I as Icon } from '../Icon-DD_Vyrw0.js';
|
|
7
7
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
8
8
|
import { S as Scrollbar } from '../Scrollbar-CrGXCZ_F.js';
|
|
9
9
|
import 'lodash/castArray';
|
|
@@ -16,7 +16,7 @@ import 'lodash/maxBy';
|
|
|
16
16
|
import 'lodash/upperFirst';
|
|
17
17
|
import '../hooks/styleAttributes.js';
|
|
18
18
|
import 'react-inlinesvg';
|
|
19
|
-
import '../Link-
|
|
19
|
+
import '../Link-CeQuavin.js';
|
|
20
20
|
import '../tslib.es6-5FtW-kfi.js';
|
|
21
21
|
import '../Tooltip-DJufHBiQ.js';
|
|
22
22
|
import '../Title-BfSFPJtJ.js';
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import Select, { components } from 'react-select';
|
|
4
|
-
import { I as Icon } from '../Icon-
|
|
4
|
+
import { I as Icon } from '../Icon-DD_Vyrw0.js';
|
|
5
5
|
import React, { useMemo, useRef, useCallback, useEffect } from 'react';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import CreatableSelect from 'react-select/creatable';
|
|
8
8
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
9
9
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
10
10
|
import { B as Badge } from '../Badge-CrhdvxY6.js';
|
|
11
|
-
import { G as Group } from '../Group-
|
|
11
|
+
import { G as Group } from '../Group-CVUfaHaS.js';
|
|
12
12
|
import { D as Divider } from '../Divider-U5UdY-ef.js';
|
|
13
13
|
import 'react-inlinesvg';
|
|
14
14
|
import '../hooks/useStyles.js';
|
|
@@ -20,7 +20,7 @@ import 'prop-types';
|
|
|
20
20
|
import '../hooks/useMediaQueries.js';
|
|
21
21
|
import 'react-responsive';
|
|
22
22
|
import '../hooks/styleAttributes.js';
|
|
23
|
-
import '../Link-
|
|
23
|
+
import '../Link-CeQuavin.js';
|
|
24
24
|
import '../Tooltip-DJufHBiQ.js';
|
|
25
25
|
import '../Title-BfSFPJtJ.js';
|
|
26
26
|
import 'lodash/castArray';
|
|
@@ -128,7 +128,7 @@ var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
|
|
|
128
128
|
var clearStyle = useMemo(function () { return new Proxy({}, { get: function () { return function () { }; } }); }, []);
|
|
129
129
|
var elevation = props.elevation, isClearable = props.isClearable, isCreatable = props.isCreatable, isDisabled = props.isDisabled, isLoading = props.isLoading, isMulti = props.isMulti, isSearchable = props.isSearchable, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, closeMenuOnSelect = props.closeMenuOnSelect, defaultValue = props.defaultValue, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, dropdownFillHover = props.dropdownFillHover, dropdownIcon = props.dropdownIcon, dropdownIconFill = props.dropdownIconFill, dropdownIconShape = props.dropdownIconShape, filterOption = props.filterOption, hideSelectedOptions = props.hideSelectedOptions, hideValueContainer = props.hideValueContainer,
|
|
130
130
|
// @ts-expect-error // because there is a defaultValue
|
|
131
|
-
initialValue = props.initialValue, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loadingMessage = props.loadingMessage, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuItemSize = props.menuItemSize, multipleItemFill = props.multipleItemFill, multipleItemFillHover = props.multipleItemFillHover, multipleItemIcon = props.multipleItemIcon, multipleItemIconFill = props.multipleItemIconFill, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, openMenuOnClick = props.openMenuOnClick, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, optionSelected = props.optionSelected, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, set = props.set, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, onChange = props.onChange, onInputChange = props.onInputChange;
|
|
131
|
+
initialValue = props.initialValue, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loadingMessage = props.loadingMessage, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuIsOpen = props.menuIsOpen, menuItemSize = props.menuItemSize, multipleItemFill = props.multipleItemFill, multipleItemFillHover = props.multipleItemFillHover, multipleItemIcon = props.multipleItemIcon, multipleItemIconFill = props.multipleItemIconFill, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, openMenuOnClick = props.openMenuOnClick, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, optionSelected = props.optionSelected, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, set = props.set, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, onChange = props.onChange, onInputChange = props.onInputChange;
|
|
132
132
|
var defaultRef = useRef(null);
|
|
133
133
|
var selectRef = ref || defaultRef;
|
|
134
134
|
// React-select wai function as "loadingMessage" property
|
|
@@ -264,7 +264,7 @@ var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
|
|
|
264
264
|
(selectAppearanceItem.size &&
|
|
265
265
|
"select_size_".concat(selectAppearanceItem.size).replace(/([A-Z])/g, '-$1').toLowerCase()), hideValueContainer && 'select_state_hide-value-container', set && "select_set_".concat(set)), ref: selectRef, after: after, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, before: before, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, closeMenuOnSelect: closeMenuOnSelect !== null && closeMenuOnSelect !== void 0 ? closeMenuOnSelect : false, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, elevation: elevation || selectAppearanceItem.elevation, filterOption: filterOption, headingFill: headingFillClass, headingFillHover: headingFillHoverClass, headingTextColor: headingTextColorClass, headingTextSize: headingTextSizeClass, headingTextWeight: headingTextWeightClass, hideSelectedOptions: hideSelectedOptions, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputTextSize: inputTextSizeClass || selectAppearanceItem.inputTextSize, instanceId: instanceId,
|
|
266
266
|
// @ts-expect-error
|
|
267
|
-
loadingMessage: getLoadingMessage, menuAfter: menuAfter, menuBefore: menuBefore, menuItemSize: menuItemSize, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass, noOptionBorderType: optionBorderTypeClass, noOptionsFill: optionFillClass, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText || selectAppearanceItem.noOptionsText, openMenuOnClick: openMenuOnClick, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, options: options, optionSelected: optionSelected, optionShape: optionShapeClass, placeholder: placeholder || selectAppearanceItem.placeholder, placeholderTextColor: placeholderTextColor || selectAppearanceItem.placeholderTextColor, placeholderTextSize: placeholderTextSize || selectAppearanceItem.placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, components: {
|
|
267
|
+
loadingMessage: getLoadingMessage, menuAfter: menuAfter, menuBefore: menuBefore, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass, noOptionBorderType: optionBorderTypeClass, noOptionsFill: optionFillClass, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText || selectAppearanceItem.noOptionsText, openMenuOnClick: openMenuOnClick, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, options: options, optionSelected: optionSelected, optionShape: optionShapeClass, placeholder: placeholder || selectAppearanceItem.placeholder, placeholderTextColor: placeholderTextColor || selectAppearanceItem.placeholderTextColor, placeholderTextSize: placeholderTextSize || selectAppearanceItem.placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, components: {
|
|
268
268
|
ClearIndicator: SelectClearIndicator,
|
|
269
269
|
Control: SelectControl,
|
|
270
270
|
DropdownIndicator: SelectDropdownIndicator,
|
|
@@ -3,7 +3,7 @@ import { useCallback } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useSiteMenuContext } from '../context/UIContext.js';
|
|
5
5
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
6
|
-
import { I as Icon } from '../Icon-
|
|
6
|
+
import { I as Icon } from '../Icon-DD_Vyrw0.js';
|
|
7
7
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
8
8
|
import 'prop-types';
|
|
9
9
|
import '../hooks/useMediaQueries.js';
|
|
@@ -15,7 +15,7 @@ import '../hooks/useStyles.js';
|
|
|
15
15
|
import 'lodash/maxBy';
|
|
16
16
|
import 'lodash/upperFirst';
|
|
17
17
|
import '../hooks/styleAttributes.js';
|
|
18
|
-
import '../Link-
|
|
18
|
+
import '../Link-CeQuavin.js';
|
|
19
19
|
import '../tslib.es6-5FtW-kfi.js';
|
|
20
20
|
import '../Tooltip-DJufHBiQ.js';
|
|
21
21
|
import '../Title-BfSFPJtJ.js';
|
package/dist/components/Tab.js
CHANGED
|
@@ -5,7 +5,7 @@ import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
|
5
5
|
import { useStyles } from '../hooks/useStyles.js';
|
|
6
6
|
import { B as Badge } from '../Badge-CrhdvxY6.js';
|
|
7
7
|
import { D as Divider } from '../Divider-U5UdY-ef.js';
|
|
8
|
-
import { L as Link } from '../Link-
|
|
8
|
+
import { L as Link } from '../Link-CeQuavin.js';
|
|
9
9
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
10
10
|
import 'lodash/castArray';
|
|
11
11
|
import 'lodash/camelCase';
|
|
@@ -25,7 +25,7 @@ var tabConfig = {
|
|
|
25
25
|
},
|
|
26
26
|
};
|
|
27
27
|
function Tab(props) {
|
|
28
|
-
var children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, badgeValue = props.badgeValue, before = props.before, className = props.className, dataTour = props.dataTour,
|
|
28
|
+
var children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, badgeValue = props.badgeValue, before = props.before, className = props.className, dataTour = props.dataTour, _d = props.dividerDirection, dividerDirection = _d === void 0 ? 'horizontal' : _d, dividerFill = props.dividerFill, dividerFillActive = props.dividerFillActive, dividerFillActiveHover = props.dividerFillActiveHover, dividerFillDisabled = props.dividerFillDisabled, dividerFillHover = props.dividerFillHover, dividerSize = props.dividerSize, href = props.href, label = props.label, labelColor = props.labelColor, labelColorActive = props.labelColorActive, labelColorDisabled = props.labelColorDisabled, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextAlign = props.labelTextAlign, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, reset = props.reset, set = props.set, target = props.target, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
|
|
29
29
|
var alignDirectionClass = useDeviceTargetClass(props, {
|
|
30
30
|
prefix: 'align_',
|
|
31
31
|
propsKey: 'alignDirection',
|
|
@@ -98,14 +98,9 @@ function Tab(props) {
|
|
|
98
98
|
? dividerFillDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillDisabled)
|
|
99
99
|
: dividerFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFill), fillHover: isHover && (dividerFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillHover)), direction: dividerDirection, fillActive: isActive && (dividerFillActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillActive)), fillActiveHover: dividerFillActiveHover, size: dividerSize })] })), after] }) }) }));
|
|
100
100
|
}
|
|
101
|
-
Tab.defaultProps = {
|
|
102
|
-
direction: 'horizontal',
|
|
103
|
-
LinkComponent: 'a',
|
|
104
|
-
size: 'normal',
|
|
105
|
-
};
|
|
106
101
|
|
|
107
102
|
function TabGroup(props) {
|
|
108
|
-
var id = props.id,
|
|
103
|
+
var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, set = props.set, style = props.style;
|
|
109
104
|
var contentAlignClass = useDeviceTargetClass(props, {
|
|
110
105
|
prefix: 'group_content-align_',
|
|
111
106
|
propsKey: 'contentAlign',
|
|
@@ -148,7 +143,7 @@ function TabGroup(props) {
|
|
|
148
143
|
});
|
|
149
144
|
// @ts-expect-error
|
|
150
145
|
var _a = useStyles(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
|
|
151
|
-
return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass),
|
|
146
|
+
return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass), "data-tour": dataTour, id: id, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
|
|
152
147
|
}
|
|
153
148
|
|
|
154
149
|
export { Tab, TabGroup, tabConfig };
|
|
@@ -101,6 +101,20 @@
|
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
+
.choice {
|
|
105
|
+
&_wrap {
|
|
106
|
+
&_wrap {
|
|
107
|
+
flex-wrap: wrap;
|
|
108
|
+
}
|
|
109
|
+
&_nowrap {
|
|
110
|
+
flex-wrap: nowrap;
|
|
111
|
+
}
|
|
112
|
+
&_wrap-reverse {
|
|
113
|
+
flex-wrap: wrap-reverse;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
104
118
|
:root {
|
|
105
119
|
--choice-item-background-hover: var(--color-surface-secondary);
|
|
106
120
|
|
|
@@ -9,16 +9,20 @@
|
|
|
9
9
|
}
|
|
10
10
|
.icon {
|
|
11
11
|
&_size {
|
|
12
|
-
@each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144
|
|
12
|
+
@each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144 {
|
|
13
13
|
&_$(size) {
|
|
14
|
-
width: $(size)px;
|
|
15
|
-
height: $(size)px;
|
|
16
|
-
min-width: $(size)px;
|
|
17
|
-
min-height: $(size)px;
|
|
18
|
-
font-size: $(size)px;
|
|
14
|
+
width: $(size) px;
|
|
15
|
+
height: $(size) px;
|
|
16
|
+
min-width: $(size) px;
|
|
17
|
+
min-height: $(size) px;
|
|
18
|
+
font-size: $(size) px;
|
|
19
19
|
display: flex;
|
|
20
20
|
justify-content: center;
|
|
21
21
|
align-items: center;
|
|
22
|
+
& > svg {
|
|
23
|
+
width: $(size) px;
|
|
24
|
+
height: $(size) px;
|
|
25
|
+
}
|
|
22
26
|
}
|
|
23
27
|
}
|
|
24
28
|
}
|
|
@@ -35,6 +35,11 @@
|
|
|
35
35
|
var(--font-primary);
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
@define-mixin text-xxs $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
|
|
39
|
+
@mixin font $weight, 9px, 12px, $minLetterSpacing, 9px, 12px, $maxLetterSpacing,
|
|
40
|
+
var(--font-primary);
|
|
41
|
+
}
|
|
42
|
+
|
|
38
43
|
@define-mixin text-xs $weight: normal, $minLetterSpacing: 0px, $maxLetterSpacing: 0px {
|
|
39
44
|
@mixin font $weight, 9px, 12px, $minLetterSpacing, 9px, 12px, $maxLetterSpacing,
|
|
40
45
|
var(--font-primary);
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
@define-mixin h1-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
2
|
-
@mixin font $weight, var(--typography-h1-min), var(--typography-h1-max
|
|
3
|
-
var(--typography-h1-min-line-height
|
|
4
|
-
var(--typography-h1-
|
|
2
|
+
@mixin font $weight, var(--typography-h1-min, 32px), var(--typography-h1-max, 48px),
|
|
3
|
+
$minLetterSpacing, var(--typography-h1-min-line-height, 80px),
|
|
4
|
+
var(--typography-h1-max-line-height, 96px), $maxLetterSpacing,
|
|
5
|
+
var(--typography-h1-font, system-ui);
|
|
5
6
|
}
|
|
6
7
|
|
|
7
8
|
@define-mixin h2-new $weight: normal, $minLetterSpacing: 0, $maxLetterSpacing: 0 {
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
function useViewportFix() {
|
|
4
|
+
useEffect(function () {
|
|
5
|
+
// https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
|
6
|
+
var setViewportProperty = function () {
|
|
7
|
+
// "vh" unit is equal to 1% of the height of the initial containing block
|
|
8
|
+
// https://www.w3.org/TR/css-values-3/#viewport-relative-lengths
|
|
9
|
+
var vh = window.innerHeight * 0.01;
|
|
10
|
+
/** NOTE:
|
|
11
|
+
* In JavaScript, you can always get the value of the current viewport
|
|
12
|
+
* by using the global variable window.innerHeight. This value takes
|
|
13
|
+
* the browser’s interface into account and is updated when its
|
|
14
|
+
* visibility changes. The trick is to store the viewport value
|
|
15
|
+
* in a CSS variable and apply that to the element instead of the vh unit.
|
|
16
|
+
* Let’s say our CSS custom variable is --vh for this example.
|
|
17
|
+
* That means we will want to apply it in our CSS like this:
|
|
18
|
+
* ```
|
|
19
|
+
* .my-element {
|
|
20
|
+
* height: 100vh; (Fallback for browsers that do not support Custom Properties)
|
|
21
|
+
* height: calc(var(--vh, 1vh) * 100);
|
|
22
|
+
* }
|
|
23
|
+
* ```
|
|
24
|
+
* We told JavaScript to grab the height of the viewport and then
|
|
25
|
+
* drilled it down into 1/100th of that total so we have a value
|
|
26
|
+
* to assign as our viewport height unit value.
|
|
27
|
+
* Then we politely asked JS to create the CSS variable "--vh" at the ":root":
|
|
28
|
+
*/
|
|
29
|
+
document.documentElement.style.setProperty('--vh', "".concat(vh, "px"));
|
|
30
|
+
};
|
|
31
|
+
// Update the value of "--vh" after render
|
|
32
|
+
setViewportProperty();
|
|
33
|
+
// Update the value of "--vh" by listening to the window resize event
|
|
34
|
+
window.addEventListener('resize', setViewportProperty);
|
|
35
|
+
return function () {
|
|
36
|
+
window.removeEventListener('resize', setViewportProperty);
|
|
37
|
+
};
|
|
38
|
+
}, []);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export { useViewportFix };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Canvas, Meta } from '@storybook/blocks'
|
|
2
|
+
|
|
3
|
+
import * as TooltipStories from '../Appearance.stories.js'
|
|
4
|
+
|
|
5
|
+
<Meta title="Atoms / Tooltip / Appearance" />
|
|
6
|
+
|
|
7
|
+
# Appearance
|
|
8
|
+
|
|
9
|
+
## surfacePrimary
|
|
10
|
+
|
|
11
|
+
<Canvas sourceState="shown" of={TooltipStories.surfacePrimary} />
|
|
12
|
+
|
|
13
|
+
## surfaceSecondary
|
|
14
|
+
|
|
15
|
+
<Canvas sourceState="shown" of={TooltipStories.surfaceSecondary} />
|
|
16
|
+
|
|
17
|
+
## surfaceTertiary
|
|
18
|
+
|
|
19
|
+
<Canvas sourceState="shown" of={TooltipStories.surfaceTertiary} />
|
|
20
|
+
./stories/Appearance.stories.js
|