@linzjs/lui 17.7.0 → 17.8.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 +7 -0
- package/dist/components/LuiSwitchButton/LuiSwitchButton.d.ts +6 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +25 -14
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +25 -15
- 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,10 @@
|
|
|
1
|
+
# [17.8.0](https://github.com/linz/lui/compare/v17.7.0...v17.8.0) (2022-08-05)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **LuiInput:** Switch button component ([#713](https://github.com/linz/lui/issues/713)) ([499ddb0](https://github.com/linz/lui/commit/499ddb02fb785603d5edeb0fd38871678e8d7bb8))
|
|
7
|
+
|
|
1
8
|
# [17.7.0](https://github.com/linz/lui/compare/v17.6.0...v17.7.0) (2022-07-28)
|
|
2
9
|
|
|
3
10
|
|
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
|
@@ -898,8 +898,8 @@ function LuiFormikForm(props) {
|
|
|
898
898
|
" "))));
|
|
899
899
|
}
|
|
900
900
|
|
|
901
|
-
var css_248z$
|
|
902
|
-
styleInject(css_248z$
|
|
901
|
+
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}";
|
|
902
|
+
styleInject(css_248z$5);
|
|
903
903
|
|
|
904
904
|
var LuiError = function (_a) {
|
|
905
905
|
var error = _a.error, className = _a.className;
|
|
@@ -25067,8 +25067,8 @@ function isChromatic() {
|
|
|
25067
25067
|
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
25068
|
}
|
|
25069
25069
|
|
|
25070
|
-
var css_248z$
|
|
25071
|
-
styleInject(css_248z$
|
|
25070
|
+
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}";
|
|
25071
|
+
styleInject(css_248z$4);
|
|
25072
25072
|
|
|
25073
25073
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
25074
25074
|
|
|
@@ -25189,13 +25189,13 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
25189
25189
|
// box-shadow: "-8px 0px 0 0 #cc0000";
|
|
25190
25190
|
// border-radius: "4px";
|
|
25191
25191
|
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$
|
|
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$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
25193
|
control: function (provided, state) { return (__assign(__assign({}, provided), {
|
|
25194
25194
|
/* matches style of .LuiTextInput-input */
|
|
25195
25195
|
boxShadow: 'none', border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2', '&:hover, &:active': {
|
|
25196
25196
|
borderColor: '#053d52',
|
|
25197
25197
|
} })); },
|
|
25198
|
-
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$
|
|
25198
|
+
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$4['fuscous'] })); },
|
|
25199
25199
|
indicatorSeparator: function (provided) { return (__assign(__assign({}, provided), { width: 0 })); },
|
|
25200
25200
|
input: function (provided) { return (__assign(__assign({}, provided), { height: '40px', minHeight: '40px', fontWeight: 400, input: {
|
|
25201
25201
|
height: '38px !important',
|
|
@@ -25203,10 +25203,10 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
25203
25203
|
singleValue: function (provided) { return (__assign(__assign({}, provided), { color: '#414042', fontWeight: 400 })); },
|
|
25204
25204
|
placeholder: function (provided) { return (__assign(__assign({}, provided), {
|
|
25205
25205
|
/* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
|
|
25206
|
-
fontWeight: 'normal', fontStyle: 'italic', color: css_248z$
|
|
25206
|
+
fontWeight: 'normal', fontStyle: 'italic', color: css_248z$4['input-placeholder'] })); },
|
|
25207
25207
|
option: function (provided, _a) {
|
|
25208
25208
|
var isSelected = _a.isSelected;
|
|
25209
|
-
return (__assign(__assign({}, provided), { color: css_248z$
|
|
25209
|
+
return (__assign(__assign({}, provided), { color: css_248z$4['input-text'], backgroundColor: isSelected ? css_248z$4['selection'] : css_248z$4['white'] }));
|
|
25210
25210
|
},
|
|
25211
25211
|
} });
|
|
25212
25212
|
return (React__default["default"].createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
|
|
@@ -28166,8 +28166,8 @@ var LuiModalHeader = function (props) {
|
|
|
28166
28166
|
React__default["default"].createElement("i", { className: "material-icons-round lui-modal-header-btn-size" }, "close")))))));
|
|
28167
28167
|
};
|
|
28168
28168
|
|
|
28169
|
-
var css_248z$
|
|
28170
|
-
styleInject(css_248z$
|
|
28169
|
+
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";
|
|
28170
|
+
styleInject(css_248z$3);
|
|
28171
28171
|
|
|
28172
28172
|
/**
|
|
28173
28173
|
* @internal
|
|
@@ -32733,11 +32733,11 @@ tippy.setDefaultProps({
|
|
|
32733
32733
|
render: render
|
|
32734
32734
|
});
|
|
32735
32735
|
|
|
32736
|
-
var css_248z$
|
|
32737
|
-
styleInject(css_248z$
|
|
32736
|
+
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}";
|
|
32737
|
+
styleInject(css_248z$2);
|
|
32738
32738
|
|
|
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);
|
|
32739
|
+
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}";
|
|
32740
|
+
styleInject(css_248z$1);
|
|
32741
32741
|
|
|
32742
32742
|
var id = 0;
|
|
32743
32743
|
var getKey = function () { return id++; };
|
|
@@ -32865,6 +32865,16 @@ var LuiAccordicard = function (props) {
|
|
|
32865
32865
|
React__default["default"].createElement(LuiIcon, { className: clsx('LuiAccordicard-chevron', isOpen ? 'LuiAccordicard-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", size: "md" }))));
|
|
32866
32866
|
};
|
|
32867
32867
|
|
|
32868
|
+
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}";
|
|
32869
|
+
styleInject(css_248z);
|
|
32870
|
+
|
|
32871
|
+
var LuiSwitchButton = function (props) {
|
|
32872
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
32873
|
+
React__default["default"].createElement("input", __assign({ className: "lui-switch-checkbox", id: "lui-switch-new", type: "checkbox", "data-testid": 'lui-switch-new' }, props)),
|
|
32874
|
+
React__default["default"].createElement("label", { "data-testid": "label", style: { background: props.checked ? '#007198' : 'gray' }, className: "lui-switch-label", htmlFor: "lui-switch-new" },
|
|
32875
|
+
React__default["default"].createElement("span", { className: "lui-switch-button" }))));
|
|
32876
|
+
};
|
|
32877
|
+
|
|
32868
32878
|
exports.FIRM_KEY = FIRM_KEY;
|
|
32869
32879
|
exports.FIRM_NAME_KEY = FIRM_NAME_KEY;
|
|
32870
32880
|
exports.GLOBAL_CLIENT_REFERENCE_KEY = GLOBAL_CLIENT_REFERENCE_KEY;
|
|
@@ -32941,6 +32951,7 @@ exports.LuiSidePanel = LuiSidePanel;
|
|
|
32941
32951
|
exports.LuiSidePanelProvider = LuiSidePanelProvider;
|
|
32942
32952
|
exports.LuiStaticMessage = LuiStaticMessage;
|
|
32943
32953
|
exports.LuiStatusSpinner = LuiStatusSpinner;
|
|
32954
|
+
exports.LuiSwitchButton = LuiSwitchButton;
|
|
32944
32955
|
exports.LuiTab = LuiTab;
|
|
32945
32956
|
exports.LuiTabs = LuiTabs;
|
|
32946
32957
|
exports.LuiTabsContext = LuiTabsContext;
|