@wireapp/react-ui-kit 9.0.11 → 9.1.0

package/lib/Form/Checkbox.js

@@ -67,7 +67,7 @@ const StyledLabel = (_a) => {
                 fill: theme.general.backgroundColor,
             }, [`.${Input_1.INPUT_CLASSNAME} + & > svg`]: Object.assign({ fill: 'none', position: 'absolute', top: '50%', transform: 'translateY(-50%)' }, (labelBeforeCheckbox
                 ? {
-                    right: theme.fontSizes.small,
+                    right: '11px',
                 }
                 : {
                     left: '4px',

package/lib/Form/IndicatorRangeInput.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { CSSObject } from '@emotion/react';
+import { TextProps } from '../Text';
+type DataListOptions = {
+    value: number;
+    label: string;
+    heading?: string;
+};
+export interface IndicatorRangeInputProps<T = HTMLInputElement> extends TextProps<T> {
+    label?: string;
+    wrapperCSS?: CSSObject;
+    dataListOptions: DataListOptions[];
+}
+export declare const IndicatorRangeInput: FC<IndicatorRangeInputProps>;
+export {};
+//# sourceMappingURL=IndicatorRangeInput.d.ts.map

package/lib/Form/IndicatorRangeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndicatorRangeInput.d.ts","sourceRoot":"","sources":["../../src/Form/IndicatorRangeInput.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,EAAE,EAAsB,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAMzC,OAAO,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAElC,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,wBAAwB,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,eAAe,EAAE,eAAe,EAAE,CAAC;CACpC;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA6E5D,CAAC"}

package/lib/Form/IndicatorRangeInput.js

@@ -0,0 +1,53 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IndicatorRangeInput = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const IndicatorRangeInput_styles_1 = require("./IndicatorRangeInput.styles");
+const InputLabel_1 = require("./InputLabel");
+exports.IndicatorRangeInput = (0, react_1.forwardRef)((_a, ref) => {
+    var { id = Math.random().toString(), label, min = '0', max = '100', value = '0', onChange, wrapperCSS, dataListOptions } = _a, inputProps = __rest(_a, ["id", "label", "min", "max", "value", "onChange", "wrapperCSS", "dataListOptions"]);
+    const minNum = Number(min);
+    const isCustomSlider = !!dataListOptions.length;
+    const listLength = dataListOptions.length - 1;
+    const valueNum = Number(value);
+    const maxNum = isCustomSlider ? Number(listLength) : Number(max);
+    const backgroundSize = (0, react_1.useMemo)(() => {
+        if (isCustomSlider && valueNum === 0) {
+            const firstOptionThumbPosition = `calc(((100% - 10px) / (${listLength} * 2) - 4px) / 2)`;
+            return `${firstOptionThumbPosition} 100%`;
+        }
+        return `${((valueNum - minNum) * 100) / (maxNum - minNum)}% 100%`;
+    }, [isCustomSlider, valueNum, minNum, maxNum, listLength]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { wrapperCSS, width: '100%' } }, { children: [label && (0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: IndicatorRangeInput_styles_1.containerStyles }, { children: [isCustomSlider && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { position: 'relative', display: 'flex', marginBottom: '20px' } }, { children: dataListOptions.map(dataListOption => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: (theme) => (0, IndicatorRangeInput_styles_1.headingStyle)(listLength, theme) }, { children: dataListOption === null || dataListOption === void 0 ? void 0 : dataListOption.heading }), dataListOption.value))) }))), (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, css: (theme) => (0, IndicatorRangeInput_styles_1.rangeStyles)(backgroundSize, valueNum, listLength, isCustomSlider, theme), id: id, name: id, min: minNum, max: maxNum, value: value, onChange: onChange, type: "range", list: "tickMarks" }, inputProps)), isCustomSlider && ((0, jsx_runtime_1.jsx)("datalist", Object.assign({ id: "tickMarks", css: (theme) => (0, IndicatorRangeInput_styles_1.dataListOption)(listLength, theme) }, { children: dataListOptions.map((dataListOption, index) => ((0, jsx_runtime_1.jsx)("option", { value: dataListOption.value, label: dataListOption.label }, index))) })))] }))] })));
+});
+exports.IndicatorRangeInput.displayName = 'IndicatorRangeInput';

package/lib/Form/IndicatorRangeInput.styles.d.ts

@@ -0,0 +1,7 @@
+import { CSSObject } from '@emotion/react/dist/emotion-react.cjs';
+import { Theme } from '../Layout';
+export declare const rangeStyles: (backgroundSize: string, value: number, listLength: number, isCustomSlider: boolean, theme: Theme) => CSSObject;
+export declare const headingStyle: (listLength: number, theme: Theme) => CSSObject;
+export declare const dataListOption: (listLength: number, theme: Theme) => CSSObject;
+export declare const containerStyles: CSSObject;
+//# sourceMappingURL=IndicatorRangeInput.styles.d.ts.map

package/lib/Form/IndicatorRangeInput.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndicatorRangeInput.styles.d.ts","sourceRoot":"","sources":["../../src/Form/IndicatorRangeInput.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,uCAAuC,CAAC;AAEhE,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAMhC,eAAO,MAAM,WAAW,mBACN,MAAM,SACf,MAAM,cACD,MAAM,kBACF,OAAO,SAChB,KAAK,KACX,SA8CF,CAAC;AAEF,eAAO,MAAM,YAAY,eAAgB,MAAM,SAAS,KAAK,KAAG,SAmB/D,CAAC;AAEF,eAAO,MAAM,cAAc,eAAgB,MAAM,SAAS,KAAK,KAAG,SA2CjE,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,SAI7B,CAAC"}

package/lib/Form/IndicatorRangeInput.styles.js

@@ -0,0 +1,99 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.containerStyles = exports.dataListOption = exports.headingStyle = exports.rangeStyles = void 0;
+const util_1 = require("../util");
+const thumbSelectors = ['&::-webkit-slider-thumb', '&::-moz-range-thumb', '&::-ms-thumb'];
+const sliderSelectors = ['&::-webkit-slider-runnable-track', '&::-moz-range-track', '&::-ms-track'];
+const rangeStyles = (backgroundSize, value, listLength, isCustomSlider, theme) => {
+    const firstOptionThumbPosition = `calc(((100% - 10px) / (${listLength} * 2) - 4px) / 2)`;
+    const lastOptionThumbPosition = `calc(((100% - 12px) / (${listLength} * 2) - 6px) / 2)`;
+    const isFirstOption = value === 0;
+    const isLastOption = value === listLength;
+    return Object.assign(Object.assign({ appearance: 'none', width: '100%', height: '8px', backgroundImage: `linear-gradient(${theme.general.primaryColor}, ${theme.general.primaryColor})`, backgroundColor: theme.Input.borderHover, backgroundSize: backgroundSize || '0% 100%', backgroundRepeat: 'no-repeat', display: 'flex', alignItems: 'center', borderRadius: '8px', marginBlock: '10px', zIndex: '1', position: 'relative' }, (0, util_1.manySelectors)(thumbSelectors, Object.assign(Object.assign({ '-webkit-appearance': 'none', height: '28px', width: '10px', borderRadius: '4px', background: theme.Button.primaryActiveBorder, cursor: 'pointer', border: 'none', boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.25);', position: 'relative', top: '-9px', zIndex: '2' }, (isCustomSlider && isFirstOption && { left: firstOptionThumbPosition })), (isCustomSlider && isLastOption && { right: lastOptionThumbPosition })))), (0, util_1.manySelectors)(sliderSelectors, {
+        '-webkit-appearance': 'none',
+        boxShadow: 'none',
+        background: 'transparent',
+        height: '8px',
+        width: '100%',
+    }));
+};
+exports.rangeStyles = rangeStyles;
+const headingStyle = (listLength, theme) => {
+    const optionWidth = `calc((100% - 12px) / ${listLength})`;
+    return {
+        color: theme.general.color,
+        fontSize: theme.fontSizes.medium,
+        fontWeight: '400',
+        lineHeight: '1.2em',
+        width: optionWidth,
+        textAlign: 'center',
+        '&:first-of-type': {
+            width: `calc((100% - 10px) / (${listLength} * 2) + (10px / 2))`,
+        },
+        '&:last-of-type': {
+            width: `calc((100% - 12px) / (${listLength} * 2) + 6px)`,
+        },
+    };
+};
+exports.headingStyle = headingStyle;
+const dataListOption = (listLength, theme) => {
+    const optionWidth = `calc((100% - 12px) / ${listLength})`;
+    return {
+        color: theme.Input.labelColor,
+        fontSize: '12px',
+        fontWeight: '400',
+        lineHeight: '1.2em',
+        boxSizing: 'border-box',
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginTop: '20px',
+        position: 'relative',
+        zIndex: '0',
+        option: {
+            display: 'inline-block',
+            width: optionWidth,
+            textAlign: 'center',
+            padding: '0',
+            position: 'relative',
+            '&:first-of-type': {
+                width: `calc((100% - 10px) / (${listLength} * 2) + (10px / 2))`,
+            },
+            '&:last-of-type': {
+                width: `calc((100% - 12px) / (${listLength} * 2) + 6px)`,
+            },
+            '&::before': {
+                content: '""',
+                position: 'absolute',
+                borderLeft: `2px solid ${theme.Select.borderColor}`,
+                width: '2px',
+                height: '27px',
+                top: '-37px',
+                left: '50%',
+            },
+        },
+    };
+};
+exports.dataListOption = dataListOption;
+exports.containerStyles = {
+    width: '100%',
+    position: 'relative',
+    marginTop: '20px',
+};

package/lib/Form/index.d.ts

@@ -5,6 +5,7 @@ export * from './CodeInput';
 export * from './DropFileInput';
 export * from './ErrorMessage';
 export * from './Form';
+export * from './IndicatorRangeInput';
 export * from './Input';
 export * from './InputBlock';
 export * from './InputSubmitCombo';

package/lib/Form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Form/index.ts"],"names":[],"mappings":"AAmBA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Form/index.ts"],"names":[],"mappings":"AAmBA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/lib/Form/index.js

@@ -39,6 +39,7 @@ __exportStar(require("./CodeInput"), exports);
 __exportStar(require("./DropFileInput"), exports);
 __exportStar(require("./ErrorMessage"), exports);
 __exportStar(require("./Form"), exports);
+__exportStar(require("./IndicatorRangeInput"), exports);
 __exportStar(require("./Input"), exports);
 __exportStar(require("./InputBlock"), exports);
 __exportStar(require("./InputSubmitCombo"), exports);

package/lib/Layout/Container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../src/Layout/Container.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,EAAE,EAAc,SAAS,EAAC,MAAM,OAAO,CAAC;AAQhD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,KAAK,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;CACb;AA4BD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAExC,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;AAEhE,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAEzC,CAAC;AAGH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAEzC,CAAC;AAGH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAEzC,CAAC;AAGH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAEzC,CAAC;AAGH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,cAAc,CAE1C,CAAC"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../src/Layout/Container.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,EAAE,EAAc,SAAS,EAAC,MAAM,OAAO,CAAC;AAQhD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,KAAK,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;CACb;AA4BD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAIxC,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;AAEhE,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAEzC,CAAC;AAGH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAEzC,CAAC;AAGH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAEzC,CAAC;AAGH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAEzC,CAAC;AAGH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,cAAc,CAE1C,CAAC"}

package/lib/Layout/Container.js

@@ -54,11 +54,10 @@ const containerStyle = ({ centerText = false, level = undefined, verticalCenter
             width: `${sizes_1.WIDTH.DESKTOP_MIN - sizes_1.GUTTER * 2}px`,
         },
 });
-const Container = (_a, ref) => {
+exports.Container = (0, react_1.forwardRef)((_a, ref) => {
     var { centerText, level, verticalCenter } = _a, props = __rest(_a, ["centerText", "level", "verticalCenter"]);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: containerStyle({ centerText, level, verticalCenter }) }, props)));
-};
-exports.Container = Container;
+});
 exports.Container.displayName = 'Container';
 exports.ContainerLG = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Container, Object.assign({ ref: ref, level: 'lg' }, props))));
 exports.ContainerLG.displayName = 'ContainerLG';

package/lib/Theme/Theme.d.ts

@@ -15,23 +15,23 @@ export interface Theme extends ETheme {
         extraLarge: string;
     };
     Button?: {
-        primaryBg: String;
-        primaryHoverBg: String;
-        primaryActiveBg: String;
-        primaryActiveBorder: String;
-        primaryFocusBorder: String;
-        primaryDisabledBg: String;
-        primaryDisabledText: String;
-        secondaryActiveBg: String;
-        secondaryActiveBorder: String;
-        secondaryHoverBorder: String;
-        tertiaryBg: String;
-        tertiaryBorder: String;
-        tertiaryHoverBg: String;
-        tertiaryHoverBorder: String;
-        tertiarydisabledBg: String;
-        tertiaryDisabledBorder: String;
-        tertiaryActiveBg: String;
+        primaryBg: string;
+        primaryHoverBg: string;
+        primaryActiveBg: string;
+        primaryActiveBorder: string;
+        primaryFocusBorder: string;
+        primaryDisabledBg: string;
+        primaryDisabledText: string;
+        secondaryActiveBg: string;
+        secondaryActiveBorder: string;
+        secondaryHoverBorder: string;
+        tertiaryBg: string;
+        tertiaryBorder: string;
+        tertiaryHoverBg: string;
+        tertiaryHoverBorder: string;
+        tertiarydisabledBg: string;
+        tertiaryDisabledBorder: string;
+        tertiaryActiveBg: string;
     };
     IconButton: {
         activePrimaryBgColor: string;
@@ -57,9 +57,9 @@ export interface Theme extends ETheme {
     general: {
         backgroundColor: string;
         color: string;
-        contrastColor: String;
+        contrastColor: string;
         dangerColor: string;
-        focusColor: String;
+        focusColor: string;
         primaryColor: string;
     };
     Input: {
@@ -75,7 +75,7 @@ export interface Theme extends ETheme {
         borderColor: string;
         focusedDescriptionColor: string;
         optionHoverBg: string;
-        selectedActiveBg: String;
+        selectedActiveBg: string;
     };
 }
 export declare const themes: {

package/package.json

@@ -69,6 +69,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.0.11",
-  "gitHead": "059508a4d9dbfa8ef710818815ac19f91d5bd3c6"
+  "version": "9.1.0",
+  "gitHead": "c250d52774d731b64e6a8bf13597591dbe9a6299"
 }