@openfin/ui-library 0.1.2 → 0.1.3-alpha.1616639854

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

@@ -18,7 +18,7 @@ exports.Toggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
-const Input_1 = require("../../input/Input");
+const RawInput_1 = require("../../input/RawInput");
 const Box_1 = require("../../layout/Box");
 const Toggle = (_a) => {
     var { id, label, labelSide = 'right', type = 'checkbox', onChange = () => { } } = _a, inputProps = __rest(_a, ["id", "label", "labelSide", "type", "onChange"]);
@@ -49,7 +49,8 @@ const InputContainer = styled_components_1.default(Box_1.Box) `
   border-radius: calc(0.5 * var(--px-toggle));
 
   background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.inputBg};
-  transition: background var(--global-transition);
+  transition: background var(--global-transition),
+    border-color var(--global-transition);
 
   &:focus-within {
     border-color: ${({ theme }) => theme.palette.inputFocused};
@@ -69,7 +70,7 @@ const ToggleKnob = styled_components_1.default.button `
   transition: left var(--global-transition);
   pointer-events: none; /* Allow pass-thru for native input */
 `;
-const ToggleInput = styled_components_1.default(Input_1.Input) `
+const ToggleInput = styled_components_1.default(RawInput_1.RawInput) `
   position: absolute;
   top: 0;
   left: 0;

package/dist/components/elements/Icon/openfin/WorkspaceIcon.js

@@ -18,9 +18,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  */
 const WorkspaceIcon = (_a) => {
     var { color = 'currentColor' } = _a, props = __rest(_a, ["color"]);
-    return (jsx_runtime_1.jsxs("svg", Object.assign({ width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsx_runtime_1.jsx("rect", { x: "0.000244141", y: "0.00012207", width: "7.49997", height: "8.74997", rx: "1.16071", fill: color }, void 0),
-            jsx_runtime_1.jsx("rect", { x: "9.33048", y: "5.58035", width: "6.33926", height: "8.83925", rx: "0.580355", stroke: color, strokeWidth: "1.16071" }, void 0),
-            jsx_runtime_1.jsx("rect", { x: "8.75012", width: "7.49997", height: "3.74999", rx: "1.16071", fill: color }, void 0),
-            jsx_runtime_1.jsx("rect", { y: "10", width: "7.49997", height: "4.99998", rx: "1.16071", fill: color }, void 0)] }), void 0));
+    return (jsx_runtime_1.jsxs("svg", Object.assign({ width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsx_runtime_1.jsx("path", { d: "M6.73811 2.8125H3.53137C3.13442 2.8125 2.81262 3.1343 2.81262 3.53125V7.51204C2.81262 7.909 3.13442 8.23079 3.53137 8.23079H6.73811C7.13506 8.23079 7.45686 7.909 7.45686 7.51204V3.53125C7.45686 3.1343 7.13506 2.8125 6.73811 2.8125Z", fill: color }, void 0),
+            jsx_runtime_1.jsx("path", { d: "M12.1565 6.26758H8.94971C8.75123 6.26758 8.59033 6.42848 8.59033 6.62696V11.3818C8.59033 11.5803 8.75123 11.7412 8.94971 11.7412H12.1565C12.3549 11.7412 12.5158 11.5803 12.5158 11.3818V6.62696C12.5158 6.42848 12.3549 6.26758 12.1565 6.26758Z", stroke: color, strokeWidth: "0.718753" }, void 0),
+            jsx_runtime_1.jsx("path", { d: "M12.1564 2.8125H8.94971C8.55275 2.8125 8.23096 3.1343 8.23096 3.53125V4.41587C8.23096 4.81283 8.55275 5.13463 8.94971 5.13463H12.1564C12.5534 5.13463 12.8752 4.81283 12.8752 4.41587V3.53125C12.8752 3.1343 12.5534 2.8125 12.1564 2.8125Z", fill: color }, void 0),
+            jsx_runtime_1.jsx("path", { d: "M6.73798 9.00488H3.53125C3.1343 9.00488 2.8125 9.32668 2.8125 9.72364V11.3823C2.8125 11.7793 3.1343 12.1011 3.53125 12.1011H6.73798C7.13494 12.1011 7.45674 11.7793 7.45674 11.3823V9.72364C7.45674 9.32668 7.13494 9.00488 6.73798 9.00488Z", fill: color }, void 0)] }), void 0));
 };
 exports.WorkspaceIcon = WorkspaceIcon;

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

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

package/dist/components/input/{Input → RawInput}/index.js

@@ -10,4 +10,4 @@ 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("./input"), exports);
+__exportStar(require("./rawInput"), exports);

package/dist/components/input/RawInput/rawInput.d.ts

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'react';
+export declare type RawInputProps = InputHTMLAttributes<HTMLInputElement>;
+/**
+ * Unstyled input extended by other components
+ */
+export declare const RawInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/input/{Input/input.js → RawInput/rawInput.js}

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
+exports.RawInput = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 /**
- * Unstyled Input extended by other components
+ * Unstyled input extended by other components
  */
-exports.Input = styled_components_1.default.input ``;
-exports.Input.displayName = 'Input';
+exports.RawInput = styled_components_1.default.input ``;
+exports.RawInput.displayName = 'RawInput';

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

@@ -1,3 +1,6 @@
 import { FC, InputHTMLAttributes } from 'react';
-export declare type TextInputProps = InputHTMLAttributes<HTMLInputElement>;
-export declare const TextInput: import("styled-components").StyledComponent<FC<TextInputProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
+    message?: string;
+    label?: string;
+};
+export declare const TextInput: FC;

package/dist/components/input/TextInput/textInput.js

@@ -17,14 +17,48 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
-const Input_1 = require("../Input");
-const TextInputInner = (_a) => {
-    var { className } = _a, rest = __rest(_a, ["className"]);
-    return (jsx_runtime_1.jsx(Input_1.Input, Object.assign({ className: className, type: "text" }, rest), void 0));
-};
-exports.TextInput = styled_components_1.default(TextInputInner) `
+const RawInput_1 = require("../RawInput");
+const HOC_1 = require("../../system/HOC");
+const Box_1 = require("../../layout/Box");
+const Text_1 = require("../../typography/Text");
+const ThemeProvider_1 = require("../../system/ThemeProvider");
+exports.TextInput = HOC_1.withStatus((_a) => {
+    var { className, message, label, status, name } = _a, rest = __rest(_a, ["className", "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)),
+            jsx_runtime_1.jsx(StyledInputField, Object.assign({ className: className, type: "text", name: name, status: status }, rest), void 0),
+            !!message && jsx_runtime_1.jsx(InputMessage, Object.assign({ status: status }, { children: message }), void 0)] }), void 0));
+});
+const InputLabel = styled_components_1.default(Text_1.Text) `
+  margin-bottom: ${({ theme }) => theme.px.small};
+`;
+const InputMessage = styled_components_1.default(Text_1.Text) `
+  color: ${({ theme, status }) => ThemeProvider_1.getStatusColor(theme, status, 'textHelp')};
+  margin-top: ${({ theme }) => theme.px.small};
+`;
+const InputContainer = styled_components_1.default(Box_1.Box) `
+  font-size: ${({ theme }) => theme.fontSize.base};
+`;
+const StyledInputField = styled_components_1.default(RawInput_1.RawInput) `
   background: ${({ theme }) => theme.palette.inputBg};
   border: 1px solid ${({ theme }) => theme.palette.inputBg};
+  border-color: ${({ theme, status }) => ThemeProvider_1.getStatusColor(theme, status, 'inputBg')};
+  border-radius: ${({ theme }) => theme.radius.small};
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   color: ${({ theme }) => theme.palette.inputColor};
+  font-size: ${({ theme }) => theme.fontSize.base};
+  padding: ${({ theme }) => `${theme.px.small} ${theme.px.base}`};
+  transition: border-color var(--global-transition);
+
+  &:focus {
+    outline: 0;
+    border-color: ${({ theme }) => theme.palette.inputFocused};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:disabled::placeholder {
+    color: ${({ theme }) => theme.palette.inputDisabled};
+  }
 `;

package/dist/components/system/GlobalStyles/globalStyles.js

@@ -22,10 +22,6 @@ exports.GlobalStyles = styled_components_1.createGlobalStyle `
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    /**
-     * Smooths light-on-dark Fonts on Mac
-     */
-    -webkit-font-smoothing: antialiased;
     /**
      * Prevent browser auto-weighting
      * @link https://css-tricks.com/almanac/properties/f/font-synthesis/

package/dist/components/system/HOC/index.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType, FC } from 'react';
+export declare type StatusType = 'success' | 'warning' | 'critical' | 'active';
+export declare type WithStatusProps = {
+    status?: StatusType;
+};
+/**
+ * withStatus HOC
+ * Takes a component and applies the status prop to it.
+ * @returns Instantiated component w/ status and other props applied.
+ */
+export declare const withStatus: <P extends object>(Component: ComponentType<P>) => FC<P & WithStatusProps>;

package/dist/components/system/HOC/index.js

@@ -0,0 +1,25 @@
+"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.withStatus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * withStatus HOC
+ * Takes a component and applies the status prop to it.
+ * @returns Instantiated component w/ status and other props applied.
+ */
+const withStatus = (Component) => function withStatus(_a) {
+    var { status } = _a, props = __rest(_a, ["status"]);
+    return jsx_runtime_1.jsx(Component, Object.assign({ status: status }, props), void 0);
+};
+exports.withStatus = withStatus;

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

@@ -1,4 +1,5 @@
 import { DefaultTheme, StyledProps } from 'styled-components';
+import { StatusType } from '../../HOC';
 export declare type ComponentVariants = {
     [key: string]: {
         [key: string]: any;
@@ -17,3 +18,8 @@ export declare const getVariantCSS: (variants: ComponentVariants, variantProp: s
 export declare const getFontFaces: ({ theme }: {
     theme: DefaultTheme;
 }) => import("styled-components").FlattenSimpleInterpolation;
+/**
+ * Retrive the correct palette value based on the provided status type.
+ * Falls back to optionally provided palette key, then to 'inherit'.
+ */
+export declare const getStatusColor: (theme: DefaultTheme, status?: StatusType | undefined, defaultKey?: "background1" | "background2" | "background3" | "background4" | "background5" | "background6" | "brandPrimary" | "brandSecondary" | "inputBg" | "inputColor" | "inputPlaceholder" | "inputDisabled" | "inputFocused" | "statusSuccess" | "statusWarning" | "statusCritical" | "statusActive" | "textDefault" | "textHelp" | "textInactive" | undefined) => string;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFontFaces = exports.getVariantCSS = void 0;
+exports.getStatusColor = exports.getFontFaces = exports.getVariantCSS = void 0;
 const font_face_base64_1 = __importDefault(require("./font-face-base64"));
 const font_face_cdn_1 = __importDefault(require("./font-face-cdn"));
 /**
@@ -29,3 +29,22 @@ const getFontFaces = ({ theme }) => {
     }
 };
 exports.getFontFaces = getFontFaces;
+/**
+ * Retrive the correct palette value based on the provided status type.
+ * Falls back to optionally provided palette key, then to 'inherit'.
+ */
+const getStatusColor = (theme, status, defaultKey) => {
+    switch (status) {
+        case 'active':
+            return theme.palette.statusActive;
+        case 'critical':
+            return theme.palette.statusCritical;
+        case 'warning':
+            return theme.palette.statusWarning;
+        case 'success':
+            return theme.palette.statusSuccess;
+        default:
+            return defaultKey ? theme.palette[defaultKey] : 'inherit';
+    }
+};
+exports.getStatusColor = getStatusColor;

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

@@ -15,16 +15,17 @@ export declare type TransitionType = keyof typeof Transition;
 export declare type TypographyType = keyof typeof Typography;
 export declare type UnitPxType = keyof typeof UnitPx;
 export declare type UnitType = keyof typeof Unit;
+export declare type PaletteType = Record<keyof typeof Palette, string>;
 export declare type ThemeSet = {
     light: DefaultTheme;
     dark: DefaultTheme;
 };
 export declare type ThemePaletteSet = {
     light: {
-        palette: Record<keyof typeof Palette, string>;
+        palette: PaletteType;
     };
     dark: {
-        palette: Record<keyof typeof Palette, string>;
+        palette: PaletteType;
     };
 };
 /**

package/dist/index.d.ts

@@ -2,7 +2,8 @@ export * from './components/controls/Button';
 export * from './components/controls/Toggle';
 export * from './components/elements/Badge';
 export * from './components/elements/Icon';
-export * from './components/input/Input';
+export * from './components/input/RawInput';
+export * from './components/input/TextInput';
 export * from './components/layout/Box';
 export * from './components/list/DefinitionList';
 export * from './components/system/GlobalStyles';

package/dist/index.js

@@ -27,7 +27,8 @@ __exportStar(require("./components/controls/Button"), exports);
 __exportStar(require("./components/controls/Toggle"), exports);
 __exportStar(require("./components/elements/Badge"), exports);
 __exportStar(require("./components/elements/Icon"), exports);
-__exportStar(require("./components/input/Input"), exports);
+__exportStar(require("./components/input/RawInput"), exports);
+__exportStar(require("./components/input/TextInput"), exports);
 __exportStar(require("./components/layout/Box"), exports);
 __exportStar(require("./components/list/DefinitionList"), exports);
 __exportStar(require("./components/system/GlobalStyles"), exports);

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.2",
+  "version": "0.1.3-alpha.1616639854",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "repository": "github:openfin/ui-library",
+  "homepage": "https://openfin-ui.netlify.app",
   "files": [
     "dist/**/*"
   ],
   "license": "MIT",
-  "dependencies": {
+  "peerDependencies": {
     "@modulz/radix-icons": "^4.0.0",
     "styled-components": "^5.2.1"
   },
@@ -17,6 +19,7 @@
     "@babel/core": "^7.13.10",
     "@babel/preset-env": "^7.13.10",
     "@babel/preset-typescript": "^7.13.0",
+    "@modulz/radix-icons": "^4.0.0",
     "@storybook/addon-actions": "^6.1.21",
     "@storybook/addon-essentials": "^6.1.21",
     "@storybook/addon-links": "^6.1.21",
@@ -48,6 +51,7 @@
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
     "rimraf": "^3.0.2",
+    "styled-components": "^5.2.1",
     "stylelint": "^13.12.0",
     "stylelint-config-recommended": "^4.0.0",
     "stylelint-config-styled-components": "^0.1.1",

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

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

package/dist/components/input/Input/input.d.ts

@@ -1,6 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-export declare type InputProps = InputHTMLAttributes<HTMLInputElement>;
-/**
- * Unstyled Input extended by other components
- */
-export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;