@openfin/ui-library 0.1.19 → 0.1.20-alpha.1623952084

package/dist/components/controls/Toggle/toggle.js

@@ -48,10 +48,10 @@ const InputContainer = styled_components_1.default(Box_1.Box) `
   height: var(--px-toggle);
   width: calc(2 * var(--px-toggle));
   border: 1px solid
-    ${({ isChecked, theme }) => (isChecked ? theme.palette.brandPrimary : theme.palette.inputBg)};
+    ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.background6};
   border-radius: calc(0.5 * var(--px-toggle));
 
-  background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.inputBg};
+  background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.background6};
   transition: background var(--openfin-ui-globalTransition),
     border-color var(---openfin-ui-globalTransition);
 

package/dist/components/input/BaseInput/baseInput.d.ts

@@ -3,8 +3,8 @@ import { WithStatusProps } from '../../system/HOC';
 export declare type BaseInputProps = InputHTMLAttributes<HTMLInputElement> & {
     message?: string;
     label?: string;
+    type?: string;
     renderInput?: Function;
-    isFullWidth?: true;
 } & WithStatusProps;
 /**
  * @private This should not be exposed beyond the ui-library.
@@ -12,9 +12,7 @@ export declare type BaseInputProps = InputHTMLAttributes<HTMLInputElement> & {
 export declare const BaseInput: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     message?: string | undefined;
     label?: string | undefined;
+    type?: string | undefined;
     renderInput?: Function | undefined;
-    isFullWidth?: true | undefined;
 } & WithStatusProps & import("react").RefAttributes<HTMLInputElement>>;
-export declare const StyledInputField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputHTMLAttributes<HTMLInputElement> & WithStatusProps & {
-    isFullWidth?: true | undefined;
-}, never>;
+export declare const StyledInputField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputHTMLAttributes<HTMLInputElement> & WithStatusProps, never>;

package/dist/components/input/BaseInput/baseInput.js

@@ -25,13 +25,30 @@ const Text_1 = require("../../typography/Text");
  * @private This should not be exposed beyond the ui-library.
  */
 exports.BaseInput = react_1.forwardRef((_a, ref) => {
-    var { className, renderInput, message, label, status, name } = _a, inputProps = __rest(_a, ["className", "renderInput", "message", "label", "status", "name"]);
-    return (jsx_runtime_1.jsxs(InputContainer, Object.assign({ flexDirection: "column", alignItems: "flex-start" }, { children: [!!label && (jsx_runtime_1.jsx(InputLabel, Object.assign({ as: "label", htmlFor: name, weight: "bold" }, { children: label }), void 0)),
-            !!renderInput && renderInput(Object.assign({ name, status }, inputProps)),
-            !renderInput && (jsx_runtime_1.jsx(exports.StyledInputField, Object.assign({ className: className, name: name, status: status }, inputProps, { ref: ref }), void 0)),
+    var { className, renderInput, message, label, status, name, type } = _a, inputProps = __rest(_a, ["className", "renderInput", "message", "label", "status", "name", "type"]);
+    const displayLabelInline = type === 'checkbox' || type === 'radio';
+    return (jsx_runtime_1.jsxs(InputContainer, Object.assign({ flexDirection: "column", alignItems: "flex-start" }, { children: [jsx_runtime_1.jsxs(LabelWrapper, Object.assign({ inline: displayLabelInline }, { children: [!!label && (jsx_runtime_1.jsx(InputLabel, Object.assign({ as: "label", htmlFor: name, weight: "bold" }, { children: label }), void 0)),
+                    !!renderInput && renderInput(Object.assign({ name, status }, inputProps)),
+                    !renderInput && (jsx_runtime_1.jsx(exports.StyledInputField, Object.assign({ className: className, name: name, status: status }, inputProps, { ref: ref }), void 0))] }), void 0),
             !!message && jsx_runtime_1.jsx(InputMessage, Object.assign({ status: status }, { children: message }), void 0)] }), void 0));
 });
 exports.BaseInput.displayName = 'BaseInput';
+const LabelWrapper = styled_components_1.default(Box_1.Box) `
+  align-items: ${({ inline }) => (inline ? 'center' : 'flex-start')};
+  flex-direction: ${({ inline }) => (inline ? 'row-reverse' : 'column')};
+  justify-content: ${({ inline }) => (inline ? 'flex-end' : 'flex-start')};
+  width: 100%;
+
+  ${({ inline, theme }) => inline &&
+    `
+    ${InputLabel} {
+      cursor: pointer;
+      margin-bottom: 0;
+      margin-left: ${theme.px.small};
+      font-weight: ${theme.fontWeight.normal};
+    }
+  `}
+`;
 const InputLabel = styled_components_1.default(Text_1.Text) `
   margin-bottom: ${({ theme }) => theme.px.small};
 `;
@@ -43,8 +60,8 @@ const InputContainer = styled_components_1.default(Box_1.Box) `
   font-size: ${({ theme }) => theme.fontSize.base};
 `;
 exports.StyledInputField = styled_components_1.default.input `
-  background: ${({ theme }) => theme.palette.inputBg};
-  border: 1px solid ${({ theme }) => theme.palette.inputBg};
+  background: ${({ theme }) => theme.palette.background5};
+  border: 1px solid ${({ theme }) => theme.palette.background6};
   border-color: ${({ theme, status }) => ThemeProvider_1.getStatusColor(theme, status, 'inputBg')};
   border-radius: ${({ theme }) => theme.radius.small};
   box-shadow: ${({ theme }) => theme.shadow.base};
@@ -52,7 +69,7 @@ exports.StyledInputField = styled_components_1.default.input `
   font-size: ${({ theme }) => theme.fontSize.base};
   padding: ${({ theme }) => `${theme.px.small} ${theme.px.base}`};
   transition: border-color var(--openfin-ui-globalTransition);
-  width: ${({ isFullWidth }) => isFullWidth && '100%'};
+  width: 100%;
 
   &:focus {
     outline: 0;

package/dist/components/input/Checkbox/checkbox.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { BaseInputProps } from '../BaseInput';
+import { WithStatusProps } from '../../system/HOC';
+export declare type CheckboxProps = BaseInputProps;
+export declare const Checkbox: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    message?: string | undefined;
+    label?: string | undefined;
+    type?: string | undefined;
+    renderInput?: Function | undefined;
+} & WithStatusProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input/Checkbox/checkbox.js

@@ -0,0 +1,96 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const BaseInput_1 = require("../BaseInput");
+const Icon_1 = require("../../elements/Icon");
+const ThemeProvider_1 = require("../../system/ThemeProvider");
+exports.Checkbox = React.forwardRef((_a, ref) => {
+    var { status } = _a, props = __rest(_a, ["status"]);
+    return (jsx_runtime_1.jsx(BaseInput_1.BaseInput, Object.assign({}, props, { type: "checkbox", status: status, renderInput: (_a) => {
+            var inputProps = __rest(_a, []);
+            return (jsx_runtime_1.jsxs(Container, { children: [jsx_runtime_1.jsx(Input, Object.assign({ ref: ref, id: inputProps.name, type: "checkbox" }, inputProps), void 0),
+                    jsx_runtime_1.jsx(Fauxbox, Object.assign({ status: status }, { children: jsx_runtime_1.jsx(CheckIcon, {}, void 0) }), void 0)] }, void 0));
+        } }), void 0));
+});
+exports.Checkbox.displayName = 'Checkbox';
+const Container = styled_components_1.default.div `
+  display: inline-block;
+  position: relative;
+`;
+const Fauxbox = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${({ theme }) => theme.px.base};
+  width: ${({ theme }) => theme.px.base};
+  border: 1px solid ${({ theme }) => theme.palette.textDefault};
+  border-color: ${({ theme, status }) => ThemeProvider_1.getStatusColor(theme, status, 'textDefault')};
+  border-radius: 2px;
+  pointer-events: none;
+`;
+const CheckIcon = styled_components_1.default(Icon_1.Icon).attrs({ icon: 'CheckIcon', size: 'small' }) `
+  opacity: 0;
+`;
+const Input = styled_components_1.default.input `
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:checked + ${Fauxbox + ' ' + CheckIcon} {
+    opacity: 1;
+  }
+
+  &:hover + ${Fauxbox} {
+    box-shadow: 0 0 1px 1px ${({ theme }) => theme.palette.inputFocused};
+  }
+
+  &:focus + ${Fauxbox} {
+    box-shadow: 0 0 1px 1px ${({ theme }) => theme.palette.inputFocused};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:disabled + ${Fauxbox} {
+    opacity: 0.5;
+  }
+`;

package/dist/components/input/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './checkbox';

package/dist/components/input/Checkbox/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./checkbox"), exports);

package/dist/components/input/NumberInput/numberInput.js

@@ -58,11 +58,12 @@ const StyledNumberInput = react_1.forwardRef((_a, ref) => {
             jsx_runtime_1.jsxs(ControlContainer, Object.assign({ flexDirection: "column", disabled: props.disabled }, { children: [jsx_runtime_1.jsx(ArrowControl, Object.assign({ onClick: onIncrement, disabled: props.disabled }, { children: jsx_runtime_1.jsx(Icon_1.Icon, { icon: "TriangleUpIcon" }, void 0) }), void 0),
                     jsx_runtime_1.jsx(ArrowControl, Object.assign({ onClick: onDecrement, disabled: props.disabled }, { children: jsx_runtime_1.jsx(Icon_1.Icon, { icon: "TriangleDownIcon" }, void 0) }), void 0)] }), void 0)] }, void 0));
 });
-StyledNumberInput.displayName = "StyledNumberInput";
+StyledNumberInput.displayName = 'StyledNumberInput';
 const StyledInputContainer = styled_components_1.default.div `
   position: relative;
   overflow: hidden;
   border-radius: ${({ theme }) => theme.radius.small};
+  width: 100%;
 `;
 const ControlContainer = styled_components_1.default(Box_1.Box) `
   align-items: center;

package/dist/components/input/TextInput/textInput.d.ts

@@ -4,6 +4,6 @@ export declare type TextInputProps = BaseInputProps;
 export declare const TextInput: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
     message?: string | undefined;
     label?: string | undefined;
+    type?: string | undefined;
     renderInput?: Function | undefined;
-    isFullWidth?: true | undefined;
 } & import("../../system/HOC").WithStatusProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/system/ThemeProvider/lib/constants.d.ts

@@ -17,8 +17,8 @@ export declare const Color: {
     readonly neutralGray: "#7D808A";
     readonly darkGray1: "#53565F";
     readonly darkGray2: "#383A40";
-    readonly darkGray3: "#24262B";
-    readonly darkGray4: "#2F3136";
+    readonly darkGray3: "#2F3136";
+    readonly darkGray4: "#24262B";
     readonly darkGray5: "#1E1F23";
     readonly darkGray6: "#111214";
     readonly openFinDarkest: "#3D39CD";

package/dist/components/system/ThemeProvider/lib/constants.js

@@ -41,8 +41,8 @@ exports.Color = {
     neutralGray: '#7D808A',
     darkGray1: '#53565F',
     darkGray2: '#383A40',
-    darkGray3: '#24262B',
-    darkGray4: '#2F3136',
+    darkGray3: '#2F3136',
+    darkGray4: '#24262B',
     darkGray5: '#1E1F23',
     darkGray6: '#111214',
     openFinDarkest: '#3D39CD',

package/dist/components/system/ThemeProvider/themes/openfin.js

@@ -34,6 +34,6 @@ exports.OpenFinDarkTheme = createTheme_1.createTheme(Object.assign(Object.assign
     // Brand
     [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray2, 
     // Inputs
-    [palette_1.Palette.inputBg]: constants_1.Color.darkGray3, [palette_1.Palette.inputColor]: constants_1.Color.white, [palette_1.Palette.inputPlaceholder]: constants_1.Color.lightGray5, [palette_1.Palette.inputDisabled]: constants_1.Color.neutralGray, [palette_1.Palette.inputFocused]: constants_1.Color.lightGray5, 
+    [palette_1.Palette.inputBg]: constants_1.Color.darkGray1, [palette_1.Palette.inputColor]: constants_1.Color.white, [palette_1.Palette.inputPlaceholder]: constants_1.Color.lightGray5, [palette_1.Palette.inputDisabled]: constants_1.Color.neutralGray, [palette_1.Palette.inputFocused]: constants_1.Color.lightGray5, 
     // Text
     [palette_1.Palette.textDefault]: constants_1.Color.white, [palette_1.Palette.textHelp]: constants_1.Color.lightGray5, [palette_1.Palette.textInactive]: constants_1.Color.neutralGray }));

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/elements/Loader';
 export * from './components/input/RawInput';
 export * from './components/input/TextInput';
 export * from './components/input/NumberInput';
+export * from './components/input/Checkbox';
 export * from './components/layout/Box';
 export * from './components/layout/DefinitionList';
 export * from './components/system/GlobalStyles';

package/dist/index.js

@@ -31,6 +31,7 @@ __exportStar(require("./components/elements/Loader"), exports);
 __exportStar(require("./components/input/RawInput"), exports);
 __exportStar(require("./components/input/TextInput"), exports);
 __exportStar(require("./components/input/NumberInput"), exports);
+__exportStar(require("./components/input/Checkbox"), exports);
 __exportStar(require("./components/layout/Box"), exports);
 __exportStar(require("./components/layout/DefinitionList"), exports);
 __exportStar(require("./components/system/GlobalStyles"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.19",
+  "version": "0.1.20-alpha.1623952084",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",
@@ -128,6 +128,9 @@
       "@typescript-eslint/no-unused-vars": "error",
       "@typescript-eslint/no-explicit-any": "error"
     },
+    "globals": {
+      "JSX": "readonly"
+    },
     "settings": {
       "react": {
         "version": "detect"