@openfin/ui-library 0.1.11-alpha.1620227229 → 0.1.11

package/README.md

@@ -1,18 +1,8 @@
 # OpenFin UI Library
 
-> React component library for OpenFin Workspace products – Informed by [Spatial](https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial---Components).
-
-**Storybook:** [openfin-ui.netlify.com](https://openfin-ui.netlify.com) (pw: pizza)
-**NPM Package:** [@openfin/ui-library](https://www.npmjs.com/package/@openfin/ui-library)
+**[openfin-ui.netlify.com](https://openfin-ui.netlify.com)** `pw: pizza`
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/8fc15443-c69c-473b-b5cf-c5dbc516b0bf/deploy-status)](https://app.netlify.com/sites/openfin-ui/deploys)
-![Release Package](https://github.com/openfin/ui-library/actions/workflows/release-package.yml/badge.svg)
-
-## What is this for?
-
-**TL;DR** – Use this library and write less CSS.
-
-This is an opinionated React component library, which aims to provide the basic building blocks that you can use in any OpenFin environment. It was built w/ our [Spatial Design System](https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial---Components) in mind, so it should always reflect OpenFin's latest branding and designs.
 
 ## Installation
 
@@ -33,140 +23,101 @@ $ yarn add @openfin/ui-library
 $ yarn add @openfin/ui-library@v1.0.1
 ```
 
-## Usage
+## Working in tandem on UI Library and Application
 
-### ThemeProvider
+Sometimes you may need to work on the `ui-library` alongside your own application. We use [yalc](https://www.npmjs.com/package/yalc) for this. It solves a few problems that `yarn link` creates and it's pretty intuitive
 
-`ThemeProvider` is the component that provides theme information to the `ui-library` components nested deeply within your application. Make sure to include this above your application so your components will be styled properly.
+### 1. Install and setup yalc
 
-```javascript
-import { ThemeProvider } from '@openfin/ui-library';
-import MyApp from 'some/cool/place';
+```bash
+# Make sure yalc is installed globally
+$ npm i yalc -g
 
-const MyCoolAppContainer = () => (
-  <ThemeProvider>
-    <MyApp />
-  </ThemeProvider>
-);
+# Set up yalc in ui-library
+$ cd ui-library/
+$ yalc publish
+
+# Add local ui-library package to your app
+$ cd ../myCoolApp/
+$ yalc add @openfin/ui-library
 ```
 
-### Basic Usage
+This links your local copy of UI Library to your app using symlinks and `package.json`.
 
-```javascript
-import { Box, H1, Icon, TextInput } from '@openfin/ui-library';
+### 2. Working with yalc
 
-export const MyApp = () => (
-  <Box flexDirection="column">
-    <H1>
-      <Icon icon="OpenFinIcon" /> Cool heading
-    </H1>
+Once you're setup, subsequent changes in UI Library can be propagated across easily.
 
-    <TextInput placeholder="Cool stuff goes here" />
-  </Box>
-);
+After making changes in `ui-library`, run `yarn build && yalc push`. This will apply a version bump to the local yalc package respository. It will also update the package in your app directory, but you will most likely need to restart any development servers to see the changes.
+
+```sh
+# push updates from ui-library side to your app
+$ yarn build && yalc push
 ```
 
-**View the [Full Component Docs](./src/components) for more usage info.**
+#### Known Issues
 
-### Extending Components
+- Storybook does not pick up changes after a `yalc push` and must be restarted
 
-Whenever possible, it is prefereable to use the components as-is. However – using [styled-components](https://styled-components.com/docs), it is very easy. Try using the following guiding principles when doing so:
+## Using UI Library
 
-- Familiarize yourself w/ the `theme` prop, and use it whenever possible.
-- Avoid hard-coded pixel values.
-- Don't _ever_ use hard-coded color values.
+### Theme Provider
 
-```javascript
-import { Box, Text } from '@openfin/ui-library';
-import styled from 'styled-components';
-
-export const MyCoolComponent = () => (
-  <Container flexDirection="column">
-    <ImportantText>How cool is this?</ImportantText>
-    <Text weight="bold">Super cool</Text>
-  </Container>
-);
+The `ThemeProvider` is a component that provides theme information to the `ui-library` components nested deeply within your application. Make sure to include this above your application so your components will be styled properly.
 
-const Container = styled(Box)`
-  background: ${({ theme }) => theme.palette.background6};
-  border-radius: ${({ theme }) => theme.radius.small};
-  margin: ${({ theme }) => `${theme.px.small} 0 ${theme.px.base}`};
-`;
+```javascript
+import { ThemeProvider } from '@openfin/ui-library';
+import MyApp from 'some/cool/place';
 
-const ImportantText = styled(Text)`
-  color: ${({ theme }) => theme.palette.statusWarning};
-  cursor: pointer;
-  font-weight: ${({ theme }) => theme.fontWeight.bold};
-`;
+const MyCoolAppContainer = () => (
+  <ThemeProvider>
+    <MyApp />
+  </ThemeProvider>
+);
 ```
 
-## Contributing
-
-### Open a pull request 😎
+## [Storybook](https://storybook.js.org)
 
-Pull requests are a great way to express an idea or need, if it's easier to "show" instead of "tell", go for it, propose a change!
-
-Also keep in mind, UI Library is a home of centralized common components, **used by several products**. It's reasonable to expect PRs may spark conversations about the **essence of the change** and it's benefits and impact across the application ecosystem.
-
-Meaning: While there are no hard rules about what belongs in _our_ library, if a change is too opinionated or too specialized, it may make sense to leave it out. **A library that does less, is a lot easier to know and work with**.
-
-### Storybook
+Great for exploring and experimenting with UI Library components. It's also a used for [testing our components](https://storybook.js.org/docs/react/workflows/unit-testing).
 
-Great for exploring and experimenting with UI Library components. It's also used for [testing our components](https://storybook.js.org/docs/react/workflows/unit-testing).
+### Storybook For Developers
 
 ```bash
-# Run it locally
 $ yarn storybook
 ```
 
-### Codesandbox.io
+### Storybook For Designers
 
-Great for developer experimentation without all of the overhead.
+Great for a quick look at the latest build, [check it out](https://openfin-ui.netlify.com)
 
-The sandbox is currently **private**, request access and [give it a try](https://codesandbox.io/s/openfin-ui-library-39y7c).
+## UI Lib @ Codesandbox.io
 
-### Working locally w/ other apps
-
-Sometimes you may need to work on the `ui-library` alongside your own application. We use [yalc](https://www.npmjs.com/package/yalc) for this. It solves a few problems that `yarn link` creates, and it's pretty intuitive.
-
-#### 1. Install and setup yalc
+Great for developer experimentation without all of the overhead.
 
-```bash
-# Make sure yalc is installed globally
-$ npm i yalc -g
+The sandbox is currently **private**, request access and [give it a try](https://codesandbox.io/s/openfin-ui-library-39y7c).
 
-# Set up yalc in ui-library
-$ cd ui-library/
-$ yalc publish
+## How to test
 
-# Add local ui-library package to your app
-$ cd ../myCoolApp/
-$ yalc add @openfin/ui-library
+```sh
+yarn test
 ```
 
-This links your local copy of UI Library to your app using symlinks and `package.json`.
-
-#### 2. Working with yalc
-
-Once you're setup, subsequent changes in UI Library can be propagated across easily.
+## How to Contribute
 
-After making changes in `ui-library`, run `yarn build && yalc push`. This will apply a version bump to the local yalc package respository. It will also update the package in your app directory, but you will most likely need to restart any development servers to see the changes.
+### 1. Git pre-push hook is handled by Husky automatically
 
 ```sh
-# push updates from ui-library side to your app
-$ yarn build && yalc push
+$ yarn git:pre-push
+# Husky should runs this command automatically before pushing
 ```
 
-#### Known Issues
+### 2. Open a pull request 😎
 
-- Storybook does not pick up changes after a `yalc push` and must be restarted
+Pull requests are a great way to express an idea or need, if it's easier to "show" instead of "tell", go for it, propose a change!
 
-### Linting
+Also keep in mind, UI Library is a home of centralized common components, **used by several products**. It's reasonable to expect PRs may spark conversations about the **essence of the change** and it's benefits and impact across the application ecosystem.
 
-```sh
-# Husky runs this command automatically before pushing
-$ yarn git:pre-push
-```
+Meaning: While there are no hard rules about what belongs in _our_ library, if a change is too opinionated or too specialized, it may make sense to leave it out. **A library that does less, is a lot easier to know and work with**.
 
 ## Compiling the Library
 
@@ -182,12 +133,6 @@ Extending base config used by `tsc` when bundling the library for a new release.
 
 Extending base config used by `Storybook` to quiet some extraneous warnings.
 
-## Testing
-
-```sh
-yarn test
-```
-
 ## Versioning & Releasing
 
 ### 1. Create a release branch
@@ -221,3 +166,96 @@ Once your release branch is merged into main, you should now create a release th
 - Enter a description that includes all feature ticket numbers that were included since the previous release. Don't worry, you can always go back and edit it later.
 
 This triggers a Github Action to automatically build the latest version of the `ui-library` and package it for remote installation. Check the status of this task within this repo's actions tab.
+
+## Components
+
+### Controls
+
+- [Button](./src/components/controls/Button)
+- [Icon](./src/components/controls/Icon)
+- [Input](./src/components/input/Input)
+- [Toggle](./src/components/controls/Toggle)
+- [Badge](./src/components/controls/Badge)
+
+### Layout
+
+- [Box](./src/components/layout/Box)
+
+### List
+
+- [DefinitionList](./src/components/list/DefinitionList)
+
+### System
+
+- [GlobalStyles](./src/components/system/GlobalStyles)
+- [ThemeProvider](./src/components/system/ThemeProvider)
+- [Themes](./src/components/system/ThemeProvider/themes) (included OpenFin Themes)
+
+### [Typography](./src/components/typography)
+
+- Text
+- Heading
+
+## [Hooks](./src/hooks)
+
+- useMediaQuery
+- useLayoutMediaQuery
+- useColorScheme
+- useTheme
+
+## [Mixins](./src/components/system/ThemeProvider/lib/mixins.ts)
+
+CSS fragments that you can include in any styled component
+
+- `${Mixins.noSelect}`
+- `${Mixins.textOverflow}`
+- `${Mixins.scrollbar.base}`
+- `${Mixins.scrollbar.small}`
+
+## Variants
+
+### What are variants?
+
+Variants as a concept is shared with the Design team and [Spatial](https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial) and it's a way of describing the _variations_ of a given component.
+
+**In Figma**, variants are represented as a matrix of options mapped / instrumented into the design itself.
+
+**In UI Library**, variants are represented as a matrix of component props key:values mapped / instrumented into Styled Component css partials.
+
+This isn't a new idea, or proprietary to Figma, but it is a built-in first class construct in that software. It's **not** built into the Styled Components as a first class construct, we are creating it here in the UI Library as a novel way to mirror that visual mapping in component builds. It's syntactic sugar, an opinion for working with fragments of style using Styled Components.
+
+_It may be slightly more verbose with a bit of initial cognitive cost to represent component variations this way._ Let's commit to this pattern for now, to see it at scale, "in the wild". And let's also commit to continuing to evaluate it's usefulness. The goal is to offer a **semantic symmetry with design and build** that hopefuly translates to more consistent and stable products over a longer timeline.
+
+### Can I see an example of variants?
+
+Yes! [Button](./src/components/Button), [Icon](./src/components/Icon), and [Toggle](./src/components/Toggle) all implement variants in the UI Library mirroring the variants in Figma.
+
+### How does it work?
+
+```tsx
+// component.variants.ts
+export const variants = {
+  propName: {
+    propValueA: css`
+      /* CSS... */
+      color: red;
+    `,
+    propValueB: css`
+      /* CSS... */
+      color: blue;
+    `,
+  },
+};
+
+// component.tsx
+const Component = styled.div<{ propName: string }>`
+  /* Injects a CSS Partial matching prop name -> value */
+  ${getVariantCSS(variants, 'propName')};
+`;
+
+// Component with red text
+<Component someProp="propValueA" />
+
+// Component with blue text
+<Component someProp="propValueB" />
+```

package/dist/components/elements/Badge/badge.js

@@ -37,5 +37,5 @@ const BadgeElement = styled_components_1.default(Box_1.Box) `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-shadow: ${({ theme }) => theme.shadow.base};
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
 `;

package/dist/components/elements/Icon/icon.d.ts

@@ -8,9 +8,8 @@ export declare type PropsWithChild = {
     icon?: never;
     children: ReactNode;
 };
-export declare type IconSizeProps = {
+export declare type IconProps = HTMLAttributes<HTMLDivElement> & (PropsWithIcon | PropsWithChild) & {
     size?: IconSizeType;
     containerSize?: IconSizeType;
 };
-export declare type IconProps = HTMLAttributes<HTMLDivElement> & (PropsWithIcon | PropsWithChild) & IconSizeProps;
 export declare const Icon: import("styled-components").StyledComponent<({ icon, children, size, containerSize, ...props }: IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,13 +1,9 @@
-import { InputHTMLAttributes } from 'react';
+import { FC, InputHTMLAttributes } from 'react';
 import { WithStatusProps } from '../../system/HOC';
 export declare type BaseInputProps = InputHTMLAttributes<HTMLInputElement> & {
     message?: string;
     label?: string;
     renderInput?: Function;
 } & WithStatusProps;
-export declare const BaseInput: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
-    message?: string | undefined;
-    label?: string | undefined;
-    renderInput?: Function | undefined;
-} & WithStatusProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const BaseInput: FC<BaseInputProps>;
 export declare const StyledInputField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputHTMLAttributes<HTMLInputElement> & WithStatusProps, never>;

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

@@ -16,19 +16,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledInputField = exports.BaseInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Box_1 = require("../../layout/Box");
+const HOC_1 = require("../../system/HOC");
 const ThemeProvider_1 = require("../../system/ThemeProvider");
 const Text_1 = require("../../typography/Text");
-exports.BaseInput = react_1.forwardRef((_a, ref) => {
+exports.BaseInput = HOC_1.withStatus((_a) => {
     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)),
+            !renderInput && (jsx_runtime_1.jsx(exports.StyledInputField, Object.assign({ className: className, name: name, status: status }, inputProps), void 0)),
             !!message && jsx_runtime_1.jsx(InputMessage, Object.assign({ status: status }, { children: message }), void 0)] }), void 0));
 });
-exports.BaseInput.displayName = 'BaseInput';
 const InputLabel = styled_components_1.default(Text_1.Text) `
   margin-bottom: ${({ theme }) => theme.px.small};
 `;
@@ -44,7 +43,7 @@ exports.StyledInputField = styled_components_1.default.input `
   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: ${({ theme }) => theme.shadow.base};
+  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}`};

package/dist/components/input/NumberInput/numberInput.d.ts

@@ -1,14 +1,3 @@
-import { ChangeEventHandler } from 'react';
+import { FC } from 'react';
 import { BaseInputProps } from '../BaseInput';
-interface NumberInputProps extends Omit<BaseInputProps, 'value'> {
-    min?: number;
-    max?: number;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    /**
-     * @default 1
-     */
-    step?: number;
-    value?: number;
-}
-export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};
+export declare const NumberInput: FC<BaseInputProps>;

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

@@ -27,12 +27,12 @@ var Direction;
     Direction[Direction["Up"] = 1] = "Up";
     Direction[Direction["Down"] = -1] = "Down";
 })(Direction || (Direction = {}));
-exports.NumberInput = react_1.forwardRef((_a, ref) => {
-    var { min, max, onChange, step = 1, value } = _a, props = __rest(_a, ["min", "max", "onChange", "step", "value"]);
+const NumberInput = (_a) => {
+    var { min, max, onChange, step = 1, value = '' } = _a, props = __rest(_a, ["min", "max", "onChange", "step", "value"]);
     // Since we are recreating the +/- buttons, we need to capture the value state at this level.
     const stepInterval = Number(step);
-    const [num, setNum] = react_1.useState(Number(value));
-    react_1.useEffect(() => setNum(Number(value)), []);
+    const [num, setNum] = react_1.useState(value);
+    react_1.useEffect(() => setNum(value), []);
     const takeStep = (direction) => {
         const base = num ? Number(num) : 0;
         const lower = min ? Number(min) : undefined;
@@ -42,7 +42,7 @@ exports.NumberInput = react_1.forwardRef((_a, ref) => {
     };
     return (jsx_runtime_1.jsx(BaseInput_1.BaseInput, Object.assign({ type: "number" }, props, { renderInput: (_a) => {
             var inputProps = __rest(_a, []);
-            return (jsx_runtime_1.jsx(StyledNumberInput, Object.assign({ ref: ref, onIncrement: () => takeStep(Direction.Up), onDecrement: () => takeStep(Direction.Down), onChange: (event) => {
+            return (jsx_runtime_1.jsx(StyledNumberInput, Object.assign({ onIncrement: () => takeStep(Direction.Up), onDecrement: () => takeStep(Direction.Down), onChange: (event) => {
                     const { value } = event === null || event === void 0 ? void 0 : event.target;
                     if (value) {
                         setNum(Number(value));
@@ -50,15 +50,14 @@ exports.NumberInput = react_1.forwardRef((_a, ref) => {
                     onChange && onChange(event);
                 }, min: min, max: max, step: step }, inputProps, { value: num }), void 0));
         } }), void 0));
-});
-exports.NumberInput.displayName = 'NumberInput';
-const StyledNumberInput = react_1.forwardRef((_a, ref) => {
+};
+exports.NumberInput = NumberInput;
+const StyledNumberInput = (_a) => {
     var { onIncrement, onDecrement } = _a, props = __rest(_a, ["onIncrement", "onDecrement"]);
-    return (jsx_runtime_1.jsxs(StyledInputContainer, { children: [jsx_runtime_1.jsx(Input, Object.assign({ ref: ref }, props), void 0),
+    return (jsx_runtime_1.jsxs(StyledInputContainer, { children: [jsx_runtime_1.jsx(Input, Object.assign({}, props), void 0),
             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";
+};
 const StyledInputContainer = styled_components_1.default.div `
   position: relative;
   overflow: hidden;

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

@@ -1,8 +1,4 @@
-/// <reference types="react" />
+import { FC } from 'react';
 import { BaseInputProps } from '../BaseInput';
 export declare type TextInputProps = BaseInputProps;
-export declare const TextInput: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
-    message?: string | undefined;
-    label?: string | undefined;
-    renderInput?: Function | undefined;
-} & import("../../system/HOC").WithStatusProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextInput: FC<TextInputProps>;

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

@@ -1,10 +1,21 @@
 "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.TextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const BaseInput_1 = require("../BaseInput");
-exports.TextInput = react_1.forwardRef((props, ref) => {
-    return jsx_runtime_1.jsx(BaseInput_1.BaseInput, Object.assign({ ref: ref, type: "text" }, props), void 0);
-});
-exports.TextInput.displayName = 'TextInput';
+const TextInput = (_a) => {
+    var props = __rest(_a, []);
+    return jsx_runtime_1.jsx(BaseInput_1.BaseInput, Object.assign({ type: "text" }, props), void 0);
+};
+exports.TextInput = TextInput;

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

@@ -1,4 +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

@@ -1,2 +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/constants.d.ts

@@ -136,7 +136,9 @@ export declare const Radius: {
  * Note: This does not include any `text-shadow`
  */
 export declare const Shadow: {
+    small: string;
     base: string;
+    large: string;
 };
 /**
  * FontStack --

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

@@ -161,7 +161,9 @@ exports.Radius = {
  * Note: This does not include any `text-shadow`
  */
 exports.Shadow = {
-    [exports.Size.base]: `0 4px 4px rgba(0, 0, 0, 0.25)`,
+    [exports.Size.small]: `0 0 ${exports.UnitPx.base} rgba(0,0,0,0.5)`,
+    [exports.Size.base]: `0 0 ${exports.UnitPx.large} rgba(0,0,0,0.5)`,
+    [exports.Size.large]: `0 0 ${exports.UnitPx.xlarge} rgba(0,0,0,0.5)`,
 };
 const fonts = [
     'Inter',

package/dist/index.d.ts

@@ -2,12 +2,11 @@ export * from './components/controls/Button';
 export * from './components/controls/Toggle';
 export * from './components/elements/Badge';
 export * from './components/elements/Icon';
-export * from './components/elements/Loader';
 export * from './components/input/RawInput';
 export * from './components/input/TextInput';
 export * from './components/input/NumberInput';
 export * from './components/layout/Box';
-export * from './components/layout/DefinitionList';
+export * from './components/list/DefinitionList';
 export * from './components/system/GlobalStyles';
 export * from './components/system/ThemeProvider';
 export * from './components/typography/Heading';

package/dist/index.js

@@ -27,12 +27,11 @@ __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/Loader"), exports);
 __exportStar(require("./components/input/RawInput"), exports);
 __exportStar(require("./components/input/TextInput"), exports);
 __exportStar(require("./components/input/NumberInput"), exports);
 __exportStar(require("./components/layout/Box"), exports);
-__exportStar(require("./components/layout/DefinitionList"), exports);
+__exportStar(require("./components/list/DefinitionList"), exports);
 __exportStar(require("./components/system/GlobalStyles"), exports);
 __exportStar(require("./components/system/ThemeProvider"), exports);
 __exportStar(require("./components/typography/Heading"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.11-alpha.1620227229",
+  "version": "0.1.11",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",
@@ -10,7 +10,7 @@
     "dist/**/*"
   ],
   "engines": {
-    "node": "12",
+    "node": "14",
     "yarn": "1"
   },
   "license": "MIT",
@@ -19,19 +19,19 @@
     "tinycolor2": "^1.4.2"
   },
   "peerDependencies": {
-    "styled-components": "^5.2.3"
+    "styled-components": "^5.2.1"
   },
   "devDependencies": {
     "@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.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/node-logger": "^6.2.9",
+    "@storybook/addon-actions": "^6.2.8",
+    "@storybook/addon-essentials": "^6.2.8",
+    "@storybook/addon-links": "^6.2.8",
+    "@storybook/node-logger": "^6.2.8",
     "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.2.9",
+    "@storybook/react": "^6.2.8",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.2",
@@ -42,7 +42,7 @@
     "@types/node": "^14.14.34",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
-    "@types/styled-components": "^5.1.9",
+    "@types/styled-components": "^5.1.8",
     "@types/tinycolor2": "^1.4.2",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
@@ -61,13 +61,13 @@
     "react-scripts": "4.0.1",
     "rimraf": "^3.0.2",
     "storybook-addon-performance": "^0.15.2",
-    "styled-components": "^5.2.3",
+    "styled-components": "^5.2.1",
     "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.2.4",
+    "typescript": "^4.1.3",
     "web-vitals": "^1.1.0"
   },
   "scripts": {

package/dist/components/elements/Loader/index.d.ts

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

package/dist/components/elements/Loader/index.js

@@ -1,13 +0,0 @@
-"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("./loader"), exports);

package/dist/components/elements/Loader/loader.d.ts

@@ -1,4 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { IconSizeProps } from '../Icon';
-export declare type LoaderProps = IconSizeProps & HTMLAttributes<HTMLDivElement>;
-export declare const Loader: import("styled-components").StyledComponent<({ ...props }: LoaderProps) => JSX.Element, import("styled-components").DefaultTheme, IconSizeProps & HTMLAttributes<HTMLDivElement>, never>;

package/dist/components/elements/Loader/loader.js

@@ -1,25 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Loader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Icon_1 = require("../Icon");
-exports.Loader = styled_components_1.default((_a) => {
-    var props = __rest(_a, []);
-    return (jsx_runtime_1.jsx(Icon_1.Icon, Object.assign({}, props, { children: jsx_runtime_1.jsx("svg", Object.assign({ width: "100%", height: "100%", viewBox: "0 0 38 38", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor" }, { children: jsx_runtime_1.jsx("g", Object.assign({ fill: "none", fillRule: "evenodd" }, { children: jsx_runtime_1.jsxs("g", Object.assign({ transform: "translate(1 1)", strokeWidth: "2" }, { children: [jsx_runtime_1.jsx("circle", { strokeOpacity: ".5", cx: "18", cy: "18", r: "18" }, void 0),
-                        jsx_runtime_1.jsx("path", Object.assign({ d: "M36 18c0-9.94-8.06-18-18-18" }, { children: jsx_runtime_1.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 18 18", to: "360 18 18", dur: "1s", repeatCount: "indefinite" }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }), void 0));
-}) ``;