@linzjs/lui 17.7.0 → 17.9.0
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/CHANGELOG.md +21 -0
- package/dist/components/LuiSwitchButton/LuiSwitchButton.d.ts +6 -0
- package/dist/components/LuiTabs/LuiTabsPanel/LuiTabsPanel.d.ts +2 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +36 -17
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +36 -18
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/LuiSwitchButton/LuiSwitchButton.scss +40 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,24 @@
|
|
|
1
|
+
# [17.9.0](https://github.com/linz/lui/compare/v17.8.1...v17.9.0) (2022-08-08)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **LuiTabsPanel:** adding support for lazy loading content via the mode prop ([#715](https://github.com/linz/lui/issues/715)) ([55ee571](https://github.com/linz/lui/commit/55ee57105a917312fa7ab84c51d89277b9f213c7))
|
|
7
|
+
|
|
8
|
+
## [17.8.1](https://github.com/linz/lui/compare/v17.8.0...v17.8.1) (2022-08-08)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* SwitchButtonBugFixing ([#714](https://github.com/linz/lui/issues/714)) ([3bf8018](https://github.com/linz/lui/commit/3bf80185707752a1ae9cfebf53415cefa5b74d84))
|
|
14
|
+
|
|
15
|
+
# [17.8.0](https://github.com/linz/lui/compare/v17.7.0...v17.8.0) (2022-08-05)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* **LuiInput:** Switch button component ([#713](https://github.com/linz/lui/issues/713)) ([499ddb0](https://github.com/linz/lui/commit/499ddb02fb785603d5edeb0fd38871678e8d7bb8))
|
|
21
|
+
|
|
1
22
|
# [17.7.0](https://github.com/linz/lui/compare/v17.6.0...v17.7.0) (2022-07-28)
|
|
2
23
|
|
|
3
24
|
|
package/dist/index.d.ts
CHANGED
|
@@ -58,3 +58,4 @@ export { LuiShadow } from './components/LuiShadow/LuiShadow';
|
|
|
58
58
|
export { LuiSidePanel } from './components/LuiSidePanel/LuiSidePanel';
|
|
59
59
|
export { LuiSidePanelProvider } from './components/LuiSidePanel/LuiSidePanel';
|
|
60
60
|
export { LuiAccordicard } from './components/LuiAccordicard/LuiAccordicard';
|
|
61
|
+
export { LuiSwitchButton } from './components/LuiSwitchButton/LuiSwitchButton';
|
package/dist/index.js
CHANGED
|
@@ -863,10 +863,17 @@ var LuiTabsGroup = function (props) {
|
|
|
863
863
|
return (React__default["default"].createElement("div", { className: "LuiTabsGroup " + (props.justify ? 'LuiTabsGroup--justified' : ''), role: "tablist", "aria-label": props.ariaLabel }, props.children));
|
|
864
864
|
};
|
|
865
865
|
|
|
866
|
-
var LuiTabsPanel = function (
|
|
866
|
+
var LuiTabsPanel = function (_a) {
|
|
867
|
+
var children = _a.children, panel = _a.panel, _b = _a.mode, mode = _b === void 0 ? 'eager' : _b;
|
|
867
868
|
var context = React.useContext(LuiTabsContext);
|
|
868
|
-
var
|
|
869
|
-
|
|
869
|
+
var _c = React.useState(mode === 'eager'), shouldShow = _c[0], setShouldShow = _c[1];
|
|
870
|
+
var active = context.activePanel === panel;
|
|
871
|
+
React.useEffect(function () {
|
|
872
|
+
if (active && !shouldShow) {
|
|
873
|
+
setShouldShow(true);
|
|
874
|
+
}
|
|
875
|
+
}, [active, shouldShow]);
|
|
876
|
+
return (React__default["default"].createElement("div", { className: clsx('LuiTabsPanel', active && 'LuiTabsPanel--active'), id: panel + "-tab-panel", role: "tabpanel", "aria-labelledby": panel + "-tab" }, shouldShow ? children : null));
|
|
870
877
|
};
|
|
871
878
|
|
|
872
879
|
var LuiTabsPanelSwitch = function (props) {
|
|
@@ -898,8 +905,8 @@ function LuiFormikForm(props) {
|
|
|
898
905
|
" "))));
|
|
899
906
|
}
|
|
900
907
|
|
|
901
|
-
var css_248z$
|
|
902
|
-
styleInject(css_248z$
|
|
908
|
+
var css_248z$5 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiError {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n}\n.LuiError-errorIcon {\n vertical-align: middle;\n display: inline-block;\n}\n.LuiError-errorText {\n margin-left: 0.5rem;\n}";
|
|
909
|
+
styleInject(css_248z$5);
|
|
903
910
|
|
|
904
911
|
var LuiError = function (_a) {
|
|
905
912
|
var error = _a.error, className = _a.className;
|
|
@@ -25067,8 +25074,8 @@ function isChromatic() {
|
|
|
25067
25074
|
return !!((window === null || window === void 0 ? void 0 : window.navigator.userAgent.match(/Chromatic/)) || (window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
|
|
25068
25075
|
}
|
|
25069
25076
|
|
|
25070
|
-
var css_248z$
|
|
25071
|
-
styleInject(css_248z$
|
|
25077
|
+
var css_248z$4 = ":export {\n charcoal: #2a292c;\n fuscous: #6b6966;\n gray: #989189;\n silver: #beb9b4;\n lily: #eaeaea;\n hint: #f9f9f9;\n snow: #ffffff;\n white: #ffffff;\n teal: #00425d;\n sea: #007198;\n electric: #0096cc;\n spray: #73c8e1;\n polar: #e2f3f7;\n sherpa: #004b50;\n surfie: #017a76;\n persian: #00a599;\n downy: #73cdc8;\n iceberg: #dcf5f0;\n sacramento: #004e32;\n salem: #08814d;\n pigment: #0aa245;\n granny: #9bd79b;\n panache: #e9fae7;\n brand-primary: #004b50;\n brand-secondary: #017a76;\n error: #cc0000;\n error-bg: #f5cccc;\n error-focus: #5a0000;\n warning: #ea6a2e;\n warning-bg: #fbdfd2;\n warning-focus: #b33a01;\n success: #0aa245;\n success-bg: #e9fae7;\n info: #3a7cdf;\n info-bg: #d8e5f9;\n visited: #00425d;\n green-hover: #107c3a;\n green-active: #094a22;\n green-btn: #0aa245;\n txt-link: #0096cc;\n primary-hover-btn: #005678;\n selection: #c7e9f3;\n heading-color: #017a76;\n heading-color--secondary: #2a292c;\n base-type-color: #2a292c;\n input-text: #2a292c;\n input-placeholder: #6b6966;\n input-placeholder-when-disabled: #989189;\n base-icon-color: #007198;\n disabled-color: #989189;\n disabled-color-dark: #6b6966;\n linz-color-primary: #023d48;\n linz-color-primary-hover: #01818a;\n linz-color-tertiary: #e1e44a;\n linz-color-tertiary-hover: #cdcf59;\n color-test-pink: #f09;\n linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
|
|
25078
|
+
styleInject(css_248z$4);
|
|
25072
25079
|
|
|
25073
25080
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
25074
25081
|
|
|
@@ -25189,13 +25196,13 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
25189
25196
|
// box-shadow: "-8px 0px 0 0 #cc0000";
|
|
25190
25197
|
// border-radius: "4px";
|
|
25191
25198
|
var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
|
|
25192
|
-
var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$
|
|
25199
|
+
var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$4['sea'], primary75: css_248z$4['electric'], primary50: css_248z$4['spray'], primary25: css_248z$4['polar'], neutral90: css_248z$4['charcoal'], neutral80: css_248z$4['charcoal'], neutral70: css_248z$4['charcoal'], neutral60: css_248z$4['fuscous'], neutral50: css_248z$4['fuscous'], neutral40: css_248z$4['gray'], neutral30: css_248z$4['gray'], neutral20: css_248z$4['silver'], neutral10: css_248z$4['lily'], neutral5: css_248z$4['hint'], danger: css_248z$4['error'], dangerLight: css_248z$4['error-bg'] }) })); }, styles: {
|
|
25193
25200
|
control: function (provided, state) { return (__assign(__assign({}, provided), {
|
|
25194
25201
|
/* matches style of .LuiTextInput-input */
|
|
25195
25202
|
boxShadow: 'none', border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2', '&:hover, &:active': {
|
|
25196
25203
|
borderColor: '#053d52',
|
|
25197
25204
|
} })); },
|
|
25198
|
-
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$
|
|
25205
|
+
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$4['fuscous'] })); },
|
|
25199
25206
|
indicatorSeparator: function (provided) { return (__assign(__assign({}, provided), { width: 0 })); },
|
|
25200
25207
|
input: function (provided) { return (__assign(__assign({}, provided), { height: '40px', minHeight: '40px', fontWeight: 400, input: {
|
|
25201
25208
|
height: '38px !important',
|
|
@@ -25203,10 +25210,10 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
25203
25210
|
singleValue: function (provided) { return (__assign(__assign({}, provided), { color: '#414042', fontWeight: 400 })); },
|
|
25204
25211
|
placeholder: function (provided) { return (__assign(__assign({}, provided), {
|
|
25205
25212
|
/* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
|
|
25206
|
-
fontWeight: 'normal', fontStyle: 'italic', color: css_248z$
|
|
25213
|
+
fontWeight: 'normal', fontStyle: 'italic', color: css_248z$4['input-placeholder'] })); },
|
|
25207
25214
|
option: function (provided, _a) {
|
|
25208
25215
|
var isSelected = _a.isSelected;
|
|
25209
|
-
return (__assign(__assign({}, provided), { color: css_248z$
|
|
25216
|
+
return (__assign(__assign({}, provided), { color: css_248z$4['input-text'], backgroundColor: isSelected ? css_248z$4['selection'] : css_248z$4['white'] }));
|
|
25210
25217
|
},
|
|
25211
25218
|
} });
|
|
25212
25219
|
return (React__default["default"].createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
|
|
@@ -28166,8 +28173,8 @@ var LuiModalHeader = function (props) {
|
|
|
28166
28173
|
React__default["default"].createElement("i", { className: "material-icons-round lui-modal-header-btn-size" }, "close")))))));
|
|
28167
28174
|
};
|
|
28168
28175
|
|
|
28169
|
-
var css_248z$
|
|
28170
|
-
styleInject(css_248z$
|
|
28176
|
+
var css_248z$3 = "@keyframes react-loading-skeleton {\n 100% {\n transform: translateX(100%);\n }\n}\n\n.react-loading-skeleton {\n --base-color: #ebebeb;\n --highlight-color: #f5f5f5;\n --animation-duration: 1.5s;\n --animation-direction: normal;\n --pseudo-element-display: block; /* Enable animation */\n\n background-color: var(--base-color);\n\n width: 100%;\n border-radius: 0.25rem;\n display: inline-flex;\n line-height: 1;\n\n position: relative;\n overflow: hidden;\n z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n content: ' ';\n display: var(--pseudo-element-display);\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n background-repeat: no-repeat;\n background-image: linear-gradient(\n 90deg,\n var(--base-color),\n var(--highlight-color),\n var(--base-color)\n );\n transform: translateX(-100%);\n\n animation-name: react-loading-skeleton;\n animation-direction: var(--animation-direction);\n animation-duration: var(--animation-duration);\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n}\n";
|
|
28177
|
+
styleInject(css_248z$3);
|
|
28171
28178
|
|
|
28172
28179
|
/**
|
|
28173
28180
|
* @internal
|
|
@@ -32733,11 +32740,11 @@ tippy.setDefaultProps({
|
|
|
32733
32740
|
render: render
|
|
32734
32741
|
});
|
|
32735
32742
|
|
|
32736
|
-
var css_248z$
|
|
32737
|
-
styleInject(css_248z$
|
|
32743
|
+
var css_248z$2 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
|
|
32744
|
+
styleInject(css_248z$2);
|
|
32738
32745
|
|
|
32739
|
-
var css_248z = ".tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:\"\";z-index:-1;position:absolute;border-color:transparent;border-style:solid}";
|
|
32740
|
-
styleInject(css_248z);
|
|
32746
|
+
var css_248z$1 = ".tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:\"\";z-index:-1;position:absolute;border-color:transparent;border-style:solid}";
|
|
32747
|
+
styleInject(css_248z$1);
|
|
32741
32748
|
|
|
32742
32749
|
var id = 0;
|
|
32743
32750
|
var getKey = function () { return id++; };
|
|
@@ -32865,6 +32872,17 @@ var LuiAccordicard = function (props) {
|
|
|
32865
32872
|
React__default["default"].createElement(LuiIcon, { className: clsx('LuiAccordicard-chevron', isOpen ? 'LuiAccordicard-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", size: "md" }))));
|
|
32866
32873
|
};
|
|
32867
32874
|
|
|
32875
|
+
var css_248z = ".lui-switch-checkbox {\n height: 0;\n width: 0;\n visibility: hidden;\n}\n\n.lui-switch-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n width: 40px;\n height: 20px;\n background: grey;\n border-radius: 40px;\n position: relative;\n transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 18px;\n height: 16px;\n border-radius: 18px;\n transition: 0.2s;\n background: #fff;\n box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-checkbox:checked + .lui-switch-label .lui-switch-button {\n left: calc(100% - 2px);\n transform: translateX(-100%);\n}\n\n.lui-switch-label:active .lui-switch-button {\n width: 20px;\n}";
|
|
32876
|
+
styleInject(css_248z);
|
|
32877
|
+
|
|
32878
|
+
var LuiSwitchButton = function (props) {
|
|
32879
|
+
var generatedId = useGenerateOrDefaultId();
|
|
32880
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
32881
|
+
React__default["default"].createElement("input", __assign({ className: "lui-switch-checkbox", type: "checkbox", "data-testid": 'lui-switch-new', id: generatedId }, props)),
|
|
32882
|
+
React__default["default"].createElement("label", { "data-testid": "label", style: { background: props.checked ? '#007198' : 'gray' }, className: "lui-switch-label", htmlFor: generatedId },
|
|
32883
|
+
React__default["default"].createElement("span", { className: "lui-switch-button" }))));
|
|
32884
|
+
};
|
|
32885
|
+
|
|
32868
32886
|
exports.FIRM_KEY = FIRM_KEY;
|
|
32869
32887
|
exports.FIRM_NAME_KEY = FIRM_NAME_KEY;
|
|
32870
32888
|
exports.GLOBAL_CLIENT_REFERENCE_KEY = GLOBAL_CLIENT_REFERENCE_KEY;
|
|
@@ -32941,6 +32959,7 @@ exports.LuiSidePanel = LuiSidePanel;
|
|
|
32941
32959
|
exports.LuiSidePanelProvider = LuiSidePanelProvider;
|
|
32942
32960
|
exports.LuiStaticMessage = LuiStaticMessage;
|
|
32943
32961
|
exports.LuiStatusSpinner = LuiStatusSpinner;
|
|
32962
|
+
exports.LuiSwitchButton = LuiSwitchButton;
|
|
32944
32963
|
exports.LuiTab = LuiTab;
|
|
32945
32964
|
exports.LuiTabs = LuiTabs;
|
|
32946
32965
|
exports.LuiTabsContext = LuiTabsContext;
|