@openfin/ui-library 0.1.6 → 0.1.7-alpha.1617063648

package/dist/components/controls/Button/button.d.ts

@@ -33,5 +33,5 @@ export declare const Button: FC<ButtonProps>;
  */
 export declare const ButtonPrimary: FC<ButtonProps>;
 export declare const ButtonSecondary: FC<ButtonProps>;
-export declare const ButtonTertiary: FC<ButtonProps>;
+export declare const ButtonTextOnly: FC<ButtonProps>;
 export {};

package/dist/components/controls/Button/button.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonTertiary = exports.ButtonSecondary = exports.ButtonPrimary = exports.Button = void 0;
+exports.ButtonTextOnly = exports.ButtonSecondary = exports.ButtonPrimary = exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Box_1 = require("../../layout/Box");
@@ -79,5 +79,5 @@ const ButtonPrimary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assig
 exports.ButtonPrimary = ButtonPrimary;
 const ButtonSecondary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "secondary" }), void 0));
 exports.ButtonSecondary = ButtonSecondary;
-const ButtonTertiary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "textOnly" }), void 0));
-exports.ButtonTertiary = ButtonTertiary;
+const ButtonTextOnly = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "textOnly" }), void 0));
+exports.ButtonTextOnly = ButtonTextOnly;

package/dist/components/controls/Toggle/toggle.d.ts

@@ -1,9 +1,9 @@
-import { FC, InputHTMLAttributes } from 'react';
+import React, { FC, InputHTMLAttributes } from 'react';
 export declare type LabelSideType = 'left' | 'right';
 export declare type ToggleProps = InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     labelSide?: LabelSideType;
     type?: 'checkbox' | 'radio';
-    onChange?: Function;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 export declare const Toggle: FC<ToggleProps>;

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

@@ -21,12 +21,15 @@ const styled_components_1 = __importDefault(require("styled-components"));
 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"]);
+    var { id, label, onChange, labelSide = 'right', type = 'checkbox' } = _a, inputProps = __rest(_a, ["id", "label", "onChange", "labelSide", "type"]);
     const [isChecked, setIsChecked] = react_1.useState(inputProps.checked);
+    react_1.useEffect(() => {
+        setIsChecked(inputProps.checked);
+    }, [inputProps.checked]);
     return (jsx_runtime_1.jsxs(ToggleContainer, Object.assign({ labelSide: labelSide }, { children: [label ? jsx_runtime_1.jsx(ToggleLabel, Object.assign({ htmlFor: id }, { children: label }), void 0) : undefined,
-            jsx_runtime_1.jsxs(InputContainer, Object.assign({ isChecked: isChecked }, { children: [jsx_runtime_1.jsx(ToggleInput, Object.assign({ id: id, type: type }, inputProps, { onChange: (event) => {
+            jsx_runtime_1.jsxs(InputContainer, Object.assign({ isChecked: isChecked }, { children: [jsx_runtime_1.jsx(ToggleInput, Object.assign({}, inputProps, { id: id, type: type, onChange: (event) => {
                             setIsChecked(event.target.checked);
-                            onChange(event);
+                            onChange === null || onChange === void 0 ? void 0 : onChange(event);
                         } }), void 0),
                     jsx_runtime_1.jsx(ToggleKnob, { tabIndex: -1 }, void 0)] }), void 0)] }), void 0));
 };

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

@@ -1,6 +1,7 @@
 import { FC, InputHTMLAttributes } from 'react';
+import { WithStatusProps } from '../../system/HOC';
 export declare type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
     message?: string;
     label?: string;
 };
-export declare const TextInput: FC;
+export declare const TextInput: FC<TextInputProps & WithStatusProps>;

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

@@ -23,9 +23,9 @@ 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"]);
+    var { className, message, label, status, name } = _a, inputProps = __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),
+            jsx_runtime_1.jsx(StyledInputField, Object.assign({ className: className, type: "text", name: name, status: status }, inputProps), 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) `

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

@@ -1,7 +1,7 @@
 import { DefaultTheme } from 'styled-components';
 import { PaletteType } from '../lib/types';
 /**
- * Create a theme by accepting an incomplete theme object and deriving the remaining colors based on brand colors.
+ * Create a theme by accepting an incomplete theme object and deriving the remaining colors based on button colors.
  *
  * @param {Partial<PaletteType>} paletteConfig The provided theme keys, whether we or the end user defined them.
  * @returns {DefaultTheme}

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = void 0;
-const colors_1 = require("./colors");
 const config_1 = require("../lib/config");
 const constants_1 = require("../lib/constants");
-const palette_1 = require("../lib/palette");
+const colors_1 = require("./colors");
+const palette_1 = require("./palette");
 const LIGHTNESS_PERCENTAGE_ACTIVE = 2;
 const LIGHTNESS_PERCENTAGE_HOVER = 5;
 const LIGHTNESS_PERCENTAGE_FOCUSED = 20;
@@ -22,14 +22,20 @@ const base = {
     px: constants_1.UnitPx,
 };
 /**
- * Create a theme by accepting an incomplete theme object and deriving the remaining colors based on brand colors.
+ * Created Active, Hover, and Focused Colors derived from base color
+ */
+const createDerivedButtonPalette = (key, baseColor) => ({
+    [`${key}Active`]: colors_1.darkenColor(baseColor, LIGHTNESS_PERCENTAGE_ACTIVE),
+    [`${key}Hover`]: colors_1.lightenColor(baseColor, LIGHTNESS_PERCENTAGE_HOVER),
+    [`${key}Focused`]: colors_1.lightenColor(baseColor, LIGHTNESS_PERCENTAGE_FOCUSED),
+});
+/**
+ * Create a theme by accepting an incomplete theme object and deriving the remaining colors based on button colors.
  *
  * @param {Partial<PaletteType>} paletteConfig The provided theme keys, whether we or the end user defined them.
  * @returns {DefaultTheme}
  */
 const createTheme = (paletteConfig) => {
-    const brandPrimary = paletteConfig.brandPrimary;
-    const brandSecondary = paletteConfig.brandSecondary;
-    return Object.assign(Object.assign({}, base), { palette: Object.assign(Object.assign({}, paletteConfig), { [palette_1.Palette.brandPrimaryActive]: colors_1.darkenColor(brandPrimary, LIGHTNESS_PERCENTAGE_ACTIVE), [palette_1.Palette.brandPrimaryHover]: colors_1.lightenColor(brandPrimary, LIGHTNESS_PERCENTAGE_HOVER), [palette_1.Palette.brandPrimaryFocused]: colors_1.lightenColor(brandPrimary, LIGHTNESS_PERCENTAGE_FOCUSED), [palette_1.Palette.brandSecondaryActive]: colors_1.darkenColor(brandSecondary, LIGHTNESS_PERCENTAGE_ACTIVE), [palette_1.Palette.brandSecondaryHover]: colors_1.lightenColor(brandSecondary, LIGHTNESS_PERCENTAGE_HOVER), [palette_1.Palette.brandSecondaryFocused]: colors_1.lightenColor(brandSecondary, LIGHTNESS_PERCENTAGE_FOCUSED) }) });
+    return Object.assign(Object.assign({}, base), { palette: Object.assign(Object.assign(Object.assign({}, paletteConfig), createDerivedButtonPalette(palette_1.Palette.brandPrimary, paletteConfig.brandPrimary)), createDerivedButtonPalette(palette_1.Palette.brandSecondary, paletteConfig.brandSecondary)) });
 };
 exports.createTheme = createTheme;

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

@@ -32,7 +32,7 @@ exports.OpenFinDarkTheme = createTheme_1.createTheme(Object.assign(Object.assign
     // Background levels
     [palette_1.Palette.background1]: constants_1.Color.darkGray6, [palette_1.Palette.background2]: constants_1.Color.darkGray5, [palette_1.Palette.background3]: constants_1.Color.darkGray4, [palette_1.Palette.background4]: constants_1.Color.darkGray3, [palette_1.Palette.background5]: constants_1.Color.darkGray2, [palette_1.Palette.background6]: constants_1.Color.darkGray1, 
     // Brand
-    [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray2, 
+    [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray1, 
     // Inputs
     [palette_1.Palette.inputBg]: constants_1.Color.darkGray1, [palette_1.Palette.inputColor]: constants_1.Color.white, [palette_1.Palette.inputPlaceholder]: constants_1.Color.lightGray4, [palette_1.Palette.inputDisabled]: constants_1.Color.neutralGray, [palette_1.Palette.inputFocused]: constants_1.Color.lightGray4, 
     // Text

package/dist/storybookHelpers.js

@@ -48,6 +48,9 @@ exports.SpatialLink = styled_components_1.default.a.attrs({
   display: block;
   color: ${({ theme }) => theme.palette.textDefault};
   text-decoration: none;
+  padding: ${({ theme }) => theme.px.small};
+  border: 1px solid ${({ theme }) => theme.palette.textDefault};
+  border-radius: ${({ theme }) => theme.radius.small};
   &:after {
     display: block;
     content: 'Source: Spatial';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.6",
+  "version": "0.1.7-alpha.1617063648",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",