@openfin/ui-library 0.0.37 → 0.0.39

package/dist/components/typography/Text/text.d.ts

@@ -12,4 +12,8 @@ export declare type TextProps = HTMLAttributes<HTMLElement> & {
  *          <Text size="small">Okay Cool</Text>
  *          <Text weight="bold">Okay Cool</Text>
  */
-export declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TextProps, never>;
+export declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, HTMLAttributes<HTMLElement> & {
+    children: ReactNode;
+    size?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
+    weight?: "bold" | "normal" | undefined;
+}, never>;

package/dist/components/typography/Text/text.js

@@ -18,3 +18,4 @@ exports.Text = styled_components_1.default.span `
   font-weight: ${({ theme, weight = 'normal' }) => theme.fontWeight[weight]};
   line-height: ${({ theme }) => theme.lineHeight.text};
 `;
+exports.Text.displayName = 'Text';

package/dist/hooks/useColorScheme.js

@@ -5,6 +5,11 @@ const useMediaQuery_1 = require("./useMediaQuery");
 exports.ColorScheme = {
     dark: 'dark',
     light: 'light',
+    /**
+     * This is a valid MediaQuery string that we're not using to identify Browsers (older Operating Systems)
+     * that maybe do not have a concept of color scheme.
+     */
+    // none = 'no-preference',
 };
 const buildQuery = (scheme) => `(prefers-color-scheme: ${scheme})`;
 /**

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-export * from './components/elements/Button';
+export * from './components/controls/Button';
+export * from './components/controls/Toggle';
+export * from './components/elements/Badge';
 export * from './components/elements/Icon';
-export * from './components/elements/Input';
-export * from './components/elements/Toggle';
+export * from './components/input/Input';
 export * from './components/layout/Box';
 export * from './components/system/GlobalStyles';
 export * from './components/system/ThemeProvider';

package/dist/index.js

@@ -23,10 +23,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StoryHelpers = void 0;
-__exportStar(require("./components/elements/Button"), exports);
+__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/elements/Input"), exports);
-__exportStar(require("./components/elements/Toggle"), exports);
+__exportStar(require("./components/input/Input"), exports);
 __exportStar(require("./components/layout/Box"), exports);
 __exportStar(require("./components/system/GlobalStyles"), exports);
 __exportStar(require("./components/system/ThemeProvider"), exports);

package/dist/react-app-env.d.js

@@ -0,0 +1,2 @@
+/// <reference types="react-scripts" />
+"use strict";

package/dist/storybookHelpers.d.ts

@@ -1,35 +1,35 @@
 /// <reference types="react" />
 export declare const StoryRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLDivElement> & {
-    alignItems?: "stretch" | "flex-start" | "flex-end" | "center" | "baseline" | "first baseline" | "last baseline" | "start" | "end" | "self-start" | "self-end" | undefined;
-    display?: "flex" | "inline-flex" | undefined;
-    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-    justifyContent?: "stretch" | "flex-start" | "flex-end" | "center" | "start" | "end" | "space-between" | "space-around" | "space-evenly" | "left" | "right" | undefined;
+    alignItems?: import("./components/layout/Box/types").AlignItems | undefined;
+    display?: import("./components/layout/Box/types").Display | undefined;
+    flexDirection?: import("./components/layout/Box/types").FlexDirection | undefined;
+    flexWrap?: import("./components/layout/Box/types").FlexWrap | undefined;
+    justifyContent?: import("./components/layout/Box/types").JustifyContent | undefined;
     gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-    alignSelf?: "stretch" | "flex-start" | "center" | "baseline" | "auto" | " flex-end" | undefined;
+    alignSelf?: import("./components/layout/Box/types").AlignSelf | undefined;
     flexBasis?: string | undefined;
     flexGrow?: 0 | 1 | undefined;
     flexShrink?: 0 | 1 | undefined;
     order?: number | undefined;
-    surfaceLevel?: 3 | 2 | 1 | undefined;
+    background?: import("./components/layout/Box/types").BackgroundLevel | undefined;
     padding?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
 } & {
     gap: string;
     alignItems: string;
 }, "alignItems" | "gap">;
 export declare const StoryColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLDivElement> & {
-    alignItems?: "stretch" | "flex-start" | "flex-end" | "center" | "baseline" | "first baseline" | "last baseline" | "start" | "end" | "self-start" | "self-end" | undefined;
-    display?: "flex" | "inline-flex" | undefined;
-    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-    justifyContent?: "stretch" | "flex-start" | "flex-end" | "center" | "start" | "end" | "space-between" | "space-around" | "space-evenly" | "left" | "right" | undefined;
+    alignItems?: import("./components/layout/Box/types").AlignItems | undefined;
+    display?: import("./components/layout/Box/types").Display | undefined;
+    flexDirection?: import("./components/layout/Box/types").FlexDirection | undefined;
+    flexWrap?: import("./components/layout/Box/types").FlexWrap | undefined;
+    justifyContent?: import("./components/layout/Box/types").JustifyContent | undefined;
     gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-    alignSelf?: "stretch" | "flex-start" | "center" | "baseline" | "auto" | " flex-end" | undefined;
+    alignSelf?: import("./components/layout/Box/types").AlignSelf | undefined;
     flexBasis?: string | undefined;
     flexGrow?: 0 | 1 | undefined;
     flexShrink?: 0 | 1 | undefined;
     order?: number | undefined;
-    surfaceLevel?: 3 | 2 | 1 | undefined;
+    background?: import("./components/layout/Box/types").BackgroundLevel | undefined;
     padding?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
 } & {
     flexDirection: string;
@@ -37,35 +37,35 @@ export declare const StoryColumn: import("styled-components").StyledComponent<"d
     alignItems: string;
 }, "flexDirection" | "alignItems" | "gap">;
 export declare const StoryGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLDivElement> & {
-    alignItems?: "stretch" | "flex-start" | "flex-end" | "center" | "baseline" | "first baseline" | "last baseline" | "start" | "end" | "self-start" | "self-end" | undefined;
-    display?: "flex" | "inline-flex" | undefined;
-    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-    justifyContent?: "stretch" | "flex-start" | "flex-end" | "center" | "start" | "end" | "space-between" | "space-around" | "space-evenly" | "left" | "right" | undefined;
+    alignItems?: import("./components/layout/Box/types").AlignItems | undefined;
+    display?: import("./components/layout/Box/types").Display | undefined;
+    flexDirection?: import("./components/layout/Box/types").FlexDirection | undefined;
+    flexWrap?: import("./components/layout/Box/types").FlexWrap | undefined;
+    justifyContent?: import("./components/layout/Box/types").JustifyContent | undefined;
     gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-    alignSelf?: "stretch" | "flex-start" | "center" | "baseline" | "auto" | " flex-end" | undefined;
+    alignSelf?: import("./components/layout/Box/types").AlignSelf | undefined;
     flexBasis?: string | undefined;
     flexGrow?: 0 | 1 | undefined;
     flexShrink?: 0 | 1 | undefined;
     order?: number | undefined;
-    surfaceLevel?: 3 | 2 | 1 | undefined;
+    background?: import("./components/layout/Box/types").BackgroundLevel | undefined;
     padding?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
 } & {
     gap: string;
 }, "gap">;
 export declare const PlaceholderContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("react").HTMLAttributes<HTMLDivElement> & {
-    alignItems?: "stretch" | "flex-start" | "flex-end" | "center" | "baseline" | "first baseline" | "last baseline" | "start" | "end" | "self-start" | "self-end" | undefined;
-    display?: "flex" | "inline-flex" | undefined;
-    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-    justifyContent?: "stretch" | "flex-start" | "flex-end" | "center" | "start" | "end" | "space-between" | "space-around" | "space-evenly" | "left" | "right" | undefined;
+    alignItems?: import("./components/layout/Box/types").AlignItems | undefined;
+    display?: import("./components/layout/Box/types").Display | undefined;
+    flexDirection?: import("./components/layout/Box/types").FlexDirection | undefined;
+    flexWrap?: import("./components/layout/Box/types").FlexWrap | undefined;
+    justifyContent?: import("./components/layout/Box/types").JustifyContent | undefined;
     gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
-    alignSelf?: "stretch" | "flex-start" | "center" | "baseline" | "auto" | " flex-end" | undefined;
+    alignSelf?: import("./components/layout/Box/types").AlignSelf | undefined;
     flexBasis?: string | undefined;
     flexGrow?: 0 | 1 | undefined;
     flexShrink?: 0 | 1 | undefined;
     order?: number | undefined;
-    surfaceLevel?: 3 | 2 | 1 | undefined;
+    background?: import("./components/layout/Box/types").BackgroundLevel | undefined;
     padding?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
 } & {
     flexDirection: string;

package/dist/storybookHelpers.js

@@ -24,8 +24,8 @@ exports.StoryGrid = styled_components_1.default(Box_1.Box).attrs({
   display: grid;
 `;
 exports.PlaceholderContent = styled_components_1.default(exports.StoryColumn) `
-  background: ${({ theme }) => theme.palette.surfaceMiddle};
-  box-shadow: ${({ theme }) => `0 0 0 1px ${theme.palette.surfaceTop}`};
+  background: ${({ theme }) => theme.palette.background2};
+  box-shadow: ${({ theme }) => `0 0 0 1px ${theme.palette.background3}`};
   padding: ${({ theme }) => theme.px.small};
   border-radius: ${({ theme }) => theme.radius.small};
   user-select: none;

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "main": "dist/index.js",
-  "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*"
@@ -11,15 +10,19 @@
   "license": "MIT",
   "dependencies": {
     "@modulz/radix-icons": "^4.0.0",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.2.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.1.20",
-    "@storybook/addon-essentials": "^6.1.20",
-    "@storybook/addon-links": "^6.1.20",
-    "@storybook/node-logger": "^6.1.20",
-    "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "^6.1.20",
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-typescript": "^7.13.0",
+    "@storybook/addon-actions": "^6.1.21",
+    "@storybook/addon-essentials": "^6.1.21",
+    "@storybook/addon-links": "^6.1.21",
+    "@storybook/node-logger": "^6.1.21",
+    "@storybook/preset-create-react-app": "^3.1.7",
+    "@storybook/react": "^6.1.21",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.2",
@@ -27,15 +30,16 @@
     "@types/faker": "^5.1.7",
     "@types/jest": "^26.0.20",
     "@types/lodash.defaultsdeep": "^4.6.6",
-    "@types/node": "^14.14.22",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/styled-components": "^5.1.7",
-    "@typescript-eslint/eslint-plugin": "^4.14.1",
-    "@typescript-eslint/parser": "^4.14.1",
-    "eslint": "^7.19.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-jest": "^24.1.3",
+    "@types/node": "^14.14.34",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.2",
+    "@types/styled-components": "^5.1.8",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
+    "babel-plugin-styled-components": "^1.12.0",
+    "eslint": "^7.21.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-jest": "^24.2.1",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "faker": "^5.4.0",
@@ -44,20 +48,22 @@
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
     "rimraf": "^3.0.2",
-    "stylelint": "^13.9.0",
-    "stylelint-config-recommended": "^3.0.0",
+    "stylelint": "^13.12.0",
+    "stylelint-config-recommended": "^4.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
     "typescript": "^4.1.3",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "^1.1.0"
   },
   "scripts": {
     "start": "yarn storybook",
     "build": "yarn build:clean && yarn build:bundle",
-    "build:bundle": "tsc -p tsconfig.bundle.json",
+    "build:bundle": "yarn build:scripts && yarn build:types",
     "build:clean": "rimraf dist",
     "build:dev": "yarn build && yalc push",
+    "build:scripts": "NODE_ENV=production babel src -d dist --extensions '.ts,.tsx'",
+    "build:types": "tsc -p tsconfig.bundle.json",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "yarn lint:typescript && yarn lint:styles",

package/dist/components/elements/Toggle/toggle.variants.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.variants = exports.LabelSide = exports.Kind = exports.Variant = void 0;
-const styled_components_1 = require("styled-components");
-exports.Variant = {
-    kind: 'kind',
-    labelSide: 'labelSide',
-};
-exports.Kind = {
-    primary: 'primary',
-    secondary: 'secondary',
-    tertiary: 'tertiary',
-};
-exports.LabelSide = {
-    left: 'left',
-    right: 'right',
-};
-exports.variants = {
-    [exports.Variant.kind]: {
-        [exports.Kind.primary]: styled_components_1.css `
-      --color-background: ${({ theme }) => theme.palette.primaryBg};
-      --color-foreground: ${({ theme }) => theme.palette.primaryColor};
-      --color-active: ${({ theme }) => theme.palette.primaryActive};
-      --color-knob: ${({ theme }) => theme.palette.primaryColor};
-
-      &:disabled {
-        --color-background: ${({ theme }) => theme.palette.primaryDisabledBg};
-        --color-foreground: ${({ theme }) => theme.palette.primaryDisabledColor};
-      }
-    `,
-        [exports.Kind.secondary]: styled_components_1.css `
-      --color-background: ${({ theme }) => theme.palette.secondaryBg};
-      --color-foreground: ${({ theme }) => theme.palette.secondaryColor};
-      --color-active: ${({ theme }) => theme.palette.secondaryActive};
-      --color-knob: ${({ theme }) => theme.palette.secondaryColor};
-
-      &:disabled {
-        --color-background: ${({ theme }) => theme.palette.secondaryDisabledBg};
-        --color-foreground: ${({ theme }) => theme.palette.secondaryDisabledColor};
-      }
-    `,
-        [exports.Kind.tertiary]: styled_components_1.css `
-      --color-background: ${({ theme }) => theme.palette.tertiaryBg};
-      --color-foreground: ${({ theme }) => theme.palette.tertiaryColor};
-      --color-active: ${({ theme }) => theme.palette.tertiaryActive};
-      --color-knob: ${({ theme }) => theme.palette.tertiaryColor};
-
-      &:disabled {
-        --color-background: ${({ theme }) => theme.palette.tertiaryDisabledBg};
-        --color-foreground: ${({ theme }) => theme.palette.tertiaryDisabledColor};
-      }
-    `,
-    },
-    [exports.Variant.labelSide]: {
-        [exports.LabelSide.left]: styled_components_1.css `
-      flex-direction: row;
-    `,
-        [exports.LabelSide.right]: styled_components_1.css `
-      flex-direction: row-reverse;
-    `,
-    },
-};