-
- share
-
+
+ share
+
+
@@ -275,9 +280,7 @@ exports[`renders comment stream 1`] = `
>
- }
- />
-
-
diff --git a/src/core/client/ui/components/Button/__snapshots__/Button.spec.tsx.snap b/src/core/client/ui/components/Button/__snapshots__/Button.spec.tsx.snap
deleted file mode 100644
index 8bf299c6b..000000000
--- a/src/core/client/ui/components/Button/__snapshots__/Button.spec.tsx.snap
+++ /dev/null
@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`forwards ref 1`] = `
-
- Push me
-
-`;
-
-exports[`renders a regular sized, primary colored ghost button with fullWidth 1`] = `
-
- Push me
-
-`;
-
-exports[`renders active state 1`] = `
-
- Push me
-
-`;
-
-exports[`renders correctly 1`] = `
-
- Push me
-
-`;
diff --git a/src/core/client/ui/components/Button/__snapshots__/ButtonIcon.spec.tsx.snap b/src/core/client/ui/components/Button/__snapshots__/ButtonIcon.spec.tsx.snap
deleted file mode 100644
index f22026d07..000000000
--- a/src/core/client/ui/components/Button/__snapshots__/ButtonIcon.spec.tsx.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`forwards ref 1`] = `
-
- Push me
-
-`;
-
-exports[`renders correctly 1`] = `
-
- Push me
-
-`;
diff --git a/src/core/client/ui/components/Button/index.ts b/src/core/client/ui/components/Button/index.ts
deleted file mode 100644
index e17fab004..000000000
--- a/src/core/client/ui/components/Button/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default, default as Button, ButtonProps } from "./Button";
-export { default as ButtonIcon, ButtonIconProps } from "./ButtonIcon";
diff --git a/src/core/client/ui/components/CallOut/CallOut.css b/src/core/client/ui/components/CallOut/CallOut.css
deleted file mode 100644
index bde9c25c4..000000000
--- a/src/core/client/ui/components/CallOut/CallOut.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.root {
- composes: bodyCopy from "~coral-ui/shared/typography.css";
- position: relative;
- display: inline-flex;
- justify-content: center;
- align-items: center;
- padding: var(--spacing-4);
- box-sizing: border-box;
- border-width: 1px;
- border-style: solid;
- word-break: break-word;
-}
-
-.borderless {
- border-style: none;
-}
-
-.colorRegular {
- background-color: var(--palette-grey-lightest);
- border-color: var(--palette-grey-light);
- color: var(--palette-text-primary);
-}
-
-.colorPrimary {
- background-color: var(--palette-primary-lightest);
- border-color: var(--palette-primary-light);
- color: var(--palette-text-primary);
-}
-
-.colorError {
- background-color: var(--palette-error-lightest);
- border-color: var(--palette-error-light);
- color: var(--palette-text-primary);
-}
-
-.colorSuccess {
- background-color: var(--palette-success-lightest);
- border-color: var(--palette-success-light);
- color: var(--palette-text-primary);
-}
-
-.fullWidth {
- display: flex;
- width: 100%;
-}
-
-.inner {
- width: 100%;
-}
diff --git a/src/core/client/ui/components/CallOut/CallOut.spec.tsx b/src/core/client/ui/components/CallOut/CallOut.spec.tsx
deleted file mode 100644
index e958b1d76..000000000
--- a/src/core/client/ui/components/CallOut/CallOut.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import CallOut from "./CallOut";
-
-it("renders correctly", () => {
- const props: PropTypesOf
= {
- className: "custom",
- color: "error",
- children: "Hello World",
- };
- const renderer = TestRenderer.create();
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/CallOut/CallOut.tsx b/src/core/client/ui/components/CallOut/CallOut.tsx
deleted file mode 100644
index 075d368eb..000000000
--- a/src/core/client/ui/components/CallOut/CallOut.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent, ReactNode } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./CallOut.css";
-
-export interface CallOutProps {
- /**
- * The content of the component.
- */
- children: ReactNode;
- /**
- * Convenient prop to override the root styling.
- */
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
- /**
- * Color of the CallOut
- */
- color?: "regular" | "primary" | "error" | "success";
- /*
- * If set renders a full width CallOut
- */
- fullWidth?: boolean;
-
- /*
- * If set removes border
- */
- borderless?: boolean;
-}
-
-const CallOut: FunctionComponent = (props) => {
- const {
- borderless,
- className,
- classes,
- color,
- fullWidth,
- children,
- ...rest
- } = props;
-
- const rootClassName = cn(
- classes.root,
- {
- [classes.colorRegular]: color === "regular",
- [classes.colorError]: color === "error",
- [classes.colorPrimary]: color === "primary",
- [classes.colorSuccess]: color === "success",
- [classes.borderless]: borderless,
- [classes.fullWidth]: fullWidth,
- },
- className
- );
-
- return (
-
- );
-};
-
-CallOut.defaultProps = {
- color: "regular",
- fullWidth: false,
-} as Partial;
-
-const enhanced = withStyles(styles)(CallOut);
-export default enhanced;
diff --git a/src/core/client/ui/components/CallOut/README.mdx b/src/core/client/ui/components/CallOut/README.mdx
deleted file mode 100644
index 2b9b6265b..000000000
--- a/src/core/client/ui/components/CallOut/README.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-name: CallOut
-menu: UI Kit v1
----
-
-import { Playground } from 'docz'
-import CallOut from './CallOut'
-import HorizontalGutter from '../HorizontalGutter'
-
-# CallOut
-
-## Basic Use
-
-
- This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.
- This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.
- This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.
- The email address or password you entered is incorrect. Try again
- The email address or password you entered is incorrect. Try again
-
-
-
-
diff --git a/src/core/client/ui/components/CallOut/__snapshots__/CallOut.spec.tsx.snap b/src/core/client/ui/components/CallOut/__snapshots__/CallOut.spec.tsx.snap
deleted file mode 100644
index 056cdb13a..000000000
--- a/src/core/client/ui/components/CallOut/__snapshots__/CallOut.spec.tsx.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/CallOut/index.ts b/src/core/client/ui/components/CallOut/index.ts
deleted file mode 100644
index 189466420..000000000
--- a/src/core/client/ui/components/CallOut/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./CallOut";
diff --git a/src/core/client/ui/components/Card/Card.css b/src/core/client/ui/components/Card/Card.css
deleted file mode 100644
index 1d8d78776..000000000
--- a/src/core/client/ui/components/Card/Card.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.root {
- position: relative;
- padding: calc(2 * var(--mini-unit));
- box-sizing: border-box;
- border: 1px solid rgba(0, 0, 0, 0.25);
- box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
- border-radius: var(--round-corners);
- background-color: var(--palette-common-white);
- /*
- Fallback begin
-
- Unfortunately Firefox / IE does not support
- `word-break: break-word` yet.
- */
- word-break: break-all;
- /* Fallback end */
- word-break: break-word;
-}
diff --git a/src/core/client/ui/components/Card/Card.spec.tsx b/src/core/client/ui/components/Card/Card.spec.tsx
deleted file mode 100644
index 030ab9675..000000000
--- a/src/core/client/ui/components/Card/Card.spec.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import Card from "./Card";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- className: "custom",
- children: "Hello World",
- };
- const renderer = TestRenderer.create();
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Card/Card.tsx b/src/core/client/ui/components/Card/Card.tsx
deleted file mode 100644
index cd41c9d6d..000000000
--- a/src/core/client/ui/components/Card/Card.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent, ReactNode, Ref } from "react";
-
-import { withForwardRef, withStyles } from "coral-ui/hocs";
-
-import styles from "./Card.css";
-
-export interface CardProps extends React.HTMLAttributes {
- /**
- * The content of the component.
- */
- children: ReactNode;
- /**
- * Convenient prop to override the root styling.
- */
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
-
- tabIndex?: number;
- forwardRef?: Ref;
-}
-
-const Card: FunctionComponent = (props) => {
- const { className, classes, children, forwardRef, ...rest } = props;
-
- const rootClassName = cn(classes.root, className);
-
- return (
-
- {children}
-
- );
-};
-
-const enhanced = withForwardRef(withStyles(styles)(Card));
-export default enhanced;
diff --git a/src/core/client/ui/components/Card/CloseButton.css b/src/core/client/ui/components/Card/CloseButton.css
deleted file mode 100644
index f38be18dc..000000000
--- a/src/core/client/ui/components/Card/CloseButton.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.root {
- min-height: 0px;
- padding: calc(0.5 * var(--mini-unit));
- margin-left: calc(2 * var(--mini-unit));
- float: right;
- position: relative;
- top: -5px;
- right: -5px;
-}
-
-.icon {
- display: block;
-}
\ No newline at end of file
diff --git a/src/core/client/ui/components/Card/CloseButton.tsx b/src/core/client/ui/components/Card/CloseButton.tsx
deleted file mode 100644
index 11738e6a8..000000000
--- a/src/core/client/ui/components/Card/CloseButton.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { FunctionComponent, Ref } from "react";
-
-import { withForwardRef, withStyles } from "coral-ui/hocs";
-import { PropTypesOf } from "coral-ui/types";
-
-import BaseButton from "../BaseButton";
-import Icon from "../Icon";
-
-import styles from "./CloseButton.css";
-
-export interface CloseButtonProps
- extends Omit, "ref"> {
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles & PropTypesOf["classes"];
-
- /** Internal: Forwarded Ref */
- forwardRef?: Ref;
-}
-
-const CloseButton: FunctionComponent = (props) => {
- const {
- classes: { icon: iconClassName, ...restClasses },
- forwardRef,
- ...rest
- } = props;
- return (
-
-
- close
-
-
- );
-};
-
-const enhanced = withForwardRef(withStyles(styles)(CloseButton));
-export default enhanced;
diff --git a/src/core/client/ui/components/Card/README.mdx b/src/core/client/ui/components/Card/README.mdx
deleted file mode 100644
index 0e2b94553..000000000
--- a/src/core/client/ui/components/Card/README.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
----
-name: Card
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-
-import Card from "./Card";
-import CloseButton from "./CloseButton";
-import HorizontalGutter from "../HorizontalGutter";
-
-# Card
-
-## Basic Use
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
- velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
- est laborum.
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
- incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
- nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
- eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
- in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
diff --git a/src/core/client/ui/components/Card/__snapshots__/Card.spec.tsx.snap b/src/core/client/ui/components/Card/__snapshots__/Card.spec.tsx.snap
deleted file mode 100644
index ab86ffe73..000000000
--- a/src/core/client/ui/components/Card/__snapshots__/Card.spec.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
- Hello World
-
-`;
diff --git a/src/core/client/ui/components/Card/index.ts b/src/core/client/ui/components/Card/index.ts
deleted file mode 100644
index 68d2a3f46..000000000
--- a/src/core/client/ui/components/Card/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./Card";
-export { default as CardCloseButton } from "./CloseButton";
diff --git a/src/core/client/ui/components/Check/CheckIcon.css b/src/core/client/ui/components/Check/CheckIcon.css
deleted file mode 100644
index 878265611..000000000
--- a/src/core/client/ui/components/Check/CheckIcon.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.base {
-}
diff --git a/src/core/client/ui/components/Check/CheckIcon.tsx b/src/core/client/ui/components/Check/CheckIcon.tsx
deleted file mode 100644
index df843671d..000000000
--- a/src/core/client/ui/components/Check/CheckIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-import variables from "coral-ui/theme/variables";
-
-import styles from "./CheckIcon.css";
-
-interface Props {
- className?: string;
- classes: typeof styles;
-}
-
-const CheckIcon: FunctionComponent = ({
- className,
- classes,
- ...rest
-}) => (
-
-);
-
-export default withStyles(styles)(CheckIcon);
diff --git a/src/core/client/ui/components/Check/index.ts b/src/core/client/ui/components/Check/index.ts
deleted file mode 100644
index 6654aafec..000000000
--- a/src/core/client/ui/components/Check/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as CheckIcon } from "./CheckIcon";
diff --git a/src/core/client/ui/components/CheckBox/CheckBox.css b/src/core/client/ui/components/CheckBox/CheckBox.css
deleted file mode 100644
index 4a989c25f..000000000
--- a/src/core/client/ui/components/CheckBox/CheckBox.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.root {
-}
-
-.input {
- cursor: pointer;
- position: absolute; /* take it out of document flow */
- opacity: 0; /* hide it */
-}
-
-.label {
- composes: bodyCopy from "~coral-ui/shared/typography.css";
- position: relative;
- display: inline-block;
- cursor: pointer;
- user-select: none;
- padding-left: 25px;
-}
-
-.labelSpan {
- padding-bottom: 1px;
-}
-
-.labelLight {
- color: var(--palette-text-light);
-}
-
-/* Box. */
-.input + .label:before {
- content: "";
- position: absolute;
- left: 0px;
- top: 4px;
- display: inline-block;
- width: 14px;
- height: 14px;
- background: var(--palette-common-white);
- border: 1px solid var(--palette-text-primary);
- box-sizing: border-box;
-}
-
-/* Box focus */
-.label.focus:before {
- @mixin outline;
-}
-
-/* Box checked */
-.input:checked + .label:before {
- background: var(--palette-primary-main);
- border: 1px solid var(--palette-primary-main);
-}
-
-/* Disabled state label. */
-.input:disabled + .label {
- cursor: auto;
- opacity: 0.6;
-}
-
-/* Disabled box. */
-.input:disabled + .label:before {
- box-shadow: none;
- border: 1px solid var(--palette-grey-main);
- background: var(--palette-grey-lightest);
-}
-
-/* Checkmark. Could be replaced with an image */
-.input:checked + .label:after {
- content: "";
- position: absolute;
- left: 2px;
- top: 10px;
- color: var(--palette-text-light);
- background: currentColor;
- width: 2px;
- height: 2px;
- box-shadow: 2px 0 0 currentColor, 4px 0 0 currentColor,
- 4px -2px 0 currentColor, 4px -4px 0 currentColor, 4px -6px 0 currentColor,
- 4px -8px 0 currentColor;
- transform: rotate(45deg);
- box-sizing: border-box;
-}
-
-.input:checked:disabled + .label:after {
- color: var(--palette-text-primary);
-}
diff --git a/src/core/client/ui/components/CheckBox/CheckBox.spec.tsx b/src/core/client/ui/components/CheckBox/CheckBox.spec.tsx
deleted file mode 100644
index 00c6a5562..000000000
--- a/src/core/client/ui/components/CheckBox/CheckBox.spec.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import CheckBox from "./CheckBox";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- className: "custom",
- id: "checkboxID",
- checked: true,
- children: "Yes I agree",
- };
- const renderer = TestRenderer.create();
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/CheckBox/CheckBox.tsx b/src/core/client/ui/components/CheckBox/CheckBox.tsx
deleted file mode 100644
index 63e82d29f..000000000
--- a/src/core/client/ui/components/CheckBox/CheckBox.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import cn from "classnames";
-import React, { ChangeEvent, Component, EventHandler, FocusEvent } from "react";
-import { v4 as uuid } from "uuid";
-
-import { withKeyboardFocus, withStyles } from "coral-ui/hocs";
-
-import styles from "./CheckBox.css";
-
-export interface CheckBoxProps {
- id?: string;
- /**
- * checked or not.
- */
- checked?: boolean;
- /**
- * Convenient prop to override the root styling.
- */
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
- /**
- * Mark as readonly
- */
- readOnly?: boolean;
- /**
- * Name
- */
- name?: string;
- /**
- * onChange
- */
- onChange?: EventHandler>;
-
- disabled?: boolean;
- children: React.ReactNode;
- /**
- * Display a light text.
- */
- light?: boolean;
-
- // These handlers are passed down by the `withKeyboardFocus` HOC.
- onFocus: EventHandler>;
- onBlur: EventHandler>;
- keyboardFocus: boolean;
-}
-
-class CheckBox extends Component {
- public state = {
- randomID: uuid(),
- };
- public render() {
- const {
- className,
- classes,
- id,
- light,
- children,
- keyboardFocus,
- ...rest
- } = this.props;
-
- const rootClassName = cn(classes.root, className);
- const finalID = id || this.state.randomID;
-
- return (
-
-
-
-
- );
- }
-}
-
-const enhanced = withStyles(styles)(withKeyboardFocus(CheckBox));
-export default enhanced;
diff --git a/src/core/client/ui/components/CheckBox/README.mdx b/src/core/client/ui/components/CheckBox/README.mdx
deleted file mode 100644
index 62a16c444..000000000
--- a/src/core/client/ui/components/CheckBox/README.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-name: CheckBox
-menu: UI Kit v1
----
-
-import { Playground } from 'docz'
-import CheckBox from './CheckBox.tsx'
-import HorizontalGutter from '../HorizontalGutter'
-
-# CheckBox
-
-## Basic Use
-
-
- Yes I agree
- No I don't agree
- I don't know
-
-
diff --git a/src/core/client/ui/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap b/src/core/client/ui/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap
deleted file mode 100644
index 11ce87d61..000000000
--- a/src/core/client/ui/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-
-
-
-`;
diff --git a/src/core/client/ui/components/CheckBox/index.ts b/src/core/client/ui/components/CheckBox/index.ts
deleted file mode 100644
index 151b40bd5..000000000
--- a/src/core/client/ui/components/CheckBox/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./CheckBox";
-export { default } from "./CheckBox";
diff --git a/src/core/client/ui/components/ClickOutside/ClickOutside.spec.tsx b/src/core/client/ui/components/ClickOutside/ClickOutside.spec.tsx
deleted file mode 100644
index 54d4bb201..000000000
--- a/src/core/client/ui/components/ClickOutside/ClickOutside.spec.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { mount } from "enzyme";
-import React from "react";
-import simulant from "simulant";
-import sinon from "sinon";
-
-import UIContext from "../UIContext";
-import {
- ClickFarAwayCallback,
- ClickFarAwayRegister,
- ClickOutside,
- default as ClickOutsideWithContext,
-} from "./ClickOutside";
-
-let container: HTMLElement;
-
-beforeAll(() => {
- container = document.createElement("div");
- document.body.appendChild(container);
-});
-
-afterAll(() => {
- document.body.removeChild(container);
-});
-
-it("should render correctly", () => {
- const noop = () => null;
- const wrapper = mount(
-
- Hello World!
-
- );
- expect(wrapper.html()).toMatchSnapshot();
- wrapper.unmount();
-});
-
-it("should detect click outside", () => {
- const onClickOutside = sinon.spy();
- const wrapper = mount(
-
- Hello World!
- ,
- {
- attachTo: container,
- }
- );
- simulant.fire(container, "click");
-
- expect(onClickOutside.calledOnce).toEqual(true);
- wrapper.unmount();
-});
-
-it("should ignore click inside", () => {
- const onClickOutside = sinon.spy();
- const wrapper = mount(
-
-
- ,
- {
- attachTo: container,
- }
- );
-
- const target = document.getElementById("click-outside-test-button")!;
- simulant.fire(target, "click");
-
- expect(onClickOutside.calledOnce).toEqual(false);
- wrapper.unmount();
-});
-
-it("should detect click far away", () => {
- let emitFarAwayClick: ClickFarAwayCallback = Function;
- const unlisten = sinon.spy();
- const registerClickFarAway: ClickFarAwayRegister = (cb) => {
- emitFarAwayClick = cb;
- return unlisten;
- };
- const onClickOutside = sinon.spy();
- const wrapper = mount(
-
-
- ,
- {
- attachTo: container,
- }
- );
-
- expect(onClickOutside.calledOnce).toEqual(false);
- emitFarAwayClick();
- expect(onClickOutside.calledOnce).toEqual(true);
- expect(unlisten.calledOnce).toEqual(false);
- wrapper.unmount();
- expect(unlisten.calledOnce).toEqual(true);
-});
-
-it("should get registerClickFarAway from context", () => {
- const registerClickFarAway: ClickFarAwayRegister = sinon.spy();
- const onClickOutside = sinon.spy();
- const context: any = {
- registerClickFarAway,
- };
- const wrapper = mount(
-
-
-
-
- ,
- {
- attachTo: container,
- }
- );
-
- expect(wrapper.find(ClickOutside).prop("registerClickFarAway")).toEqual(
- registerClickFarAway
- );
- wrapper.unmount();
-});
diff --git a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
deleted file mode 100644
index f9f5d5323..000000000
--- a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { FunctionComponent } from "react";
-import { findDOMNode } from "react-dom";
-
-import UIContext from "../UIContext";
-
-export type ClickFarAwayCallback = () => void;
-export type ClickFarAwayUnlistenCallback = () => void;
-
-export type ClickFarAwayRegister = (
- callback: ClickFarAwayCallback
-) => ClickFarAwayUnlistenCallback;
-
-export interface ClickOutsideProps {
- onClickOutside: (e?: MouseEvent) => void;
-
- /**
- * A way to listen for clicks that are e.g. outside of the
- * current frame for `ClickOutside`
- */
- registerClickFarAway?: ClickFarAwayRegister;
-
- children: React.ReactNode;
-}
-
-export class ClickOutside extends React.Component {
- public domNode: Element | null = null;
- private unlisten?: ClickFarAwayUnlistenCallback;
-
- public handleClick = (e: MouseEvent) => {
- const { onClickOutside } = this.props;
- if (!e || !this.domNode!.contains(e.target as HTMLInputElement)) {
- // eslint-disable-next-line no-unused-expressions
- onClickOutside && onClickOutside(e);
- }
- };
-
- public handleClickFarAway = () => {
- const { onClickOutside } = this.props;
- // eslint-disable-next-line no-unused-expressions
- onClickOutside && onClickOutside();
- };
-
- public componentDidMount() {
- // TODO: find another solution to `findDOMNode`.
- // eslint-disable-next-line react/no-find-dom-node
- this.domNode = findDOMNode(this) as Element;
- document.addEventListener("click", this.handleClick, true);
-
- // Listen to far away clicks.
- if (this.props.registerClickFarAway) {
- this.unlisten = this.props.registerClickFarAway(this.handleClickFarAway);
- }
- }
-
- public componentWillUnmount() {
- document.removeEventListener("click", this.handleClick, true);
-
- // Unlisten to far away clicks.
- if (this.unlisten) {
- this.unlisten();
- this.unlisten = undefined;
- }
- }
-
- public render() {
- return this.props.children;
- }
-}
-
-const ClickOutsideWithContext: FunctionComponent = (
- props
-) => (
-
- {({ registerClickFarAway }) => (
-
- )}
-
-);
-
-export default ClickOutsideWithContext;
diff --git a/src/core/client/ui/components/ClickOutside/README.mdx b/src/core/client/ui/components/ClickOutside/README.mdx
deleted file mode 100644
index 91017b65b..000000000
--- a/src/core/client/ui/components/ClickOutside/README.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-name: ClickOutside
-menu: UI Kit v1
----
-
-import { Playground } from 'docz'
-import ClickOutside from './ClickOutside'
-import Button from '../Button/Button'
-
-# ClickOutside
-
-A Component to handle click events outside the children components.
-
-## Basic usage
-Wrap a Component with `` and pass a function to `onClickOutside`. This function will trigger when the user
-clicks outside the component.
-
-### Test
-Click the blue background. It should trigger an alert. Nothing should happen if you click the button.
-
-
-
- {
- if (e.srcElement.id === "outside") {
- alert('You clicked outside!');
- }}}>
-
-
-
-
diff --git a/src/core/client/ui/components/ClickOutside/__snapshots__/ClickOutside.spec.tsx.snap b/src/core/client/ui/components/ClickOutside/__snapshots__/ClickOutside.spec.tsx.snap
deleted file mode 100644
index 883a02a51..000000000
--- a/src/core/client/ui/components/ClickOutside/__snapshots__/ClickOutside.spec.tsx.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `"Hello World!"`;
diff --git a/src/core/client/ui/components/ClickOutside/index.ts b/src/core/client/ui/components/ClickOutside/index.ts
deleted file mode 100644
index 91803ea08..000000000
--- a/src/core/client/ui/components/ClickOutside/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default, ClickFarAwayRegister } from "./ClickOutside";
diff --git a/src/core/client/ui/components/Counter/Counter.css b/src/core/client/ui/components/Counter/Counter.css
deleted file mode 100644
index 4a43a1d86..000000000
--- a/src/core/client/ui/components/Counter/Counter.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.root {
- font-size: calc(14rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-sans-serif);
- line-height: 1;
- letter-spacing: calc(0.2em / 14);
- border-radius: var(--round-corners);
- padding: 2px 3px 3px 3px;
- color: inherit;
-}
-
-.sizeSmall {
- font-size: calc(12rem / var(--rem-base));
- padding: 2px 3px;
- line-height: 1;
-}
-
-.text {
- color: var(--palette-text-light);
-}
-
-.colorPrimary {
- background-color: var(--palette-primary-main);
-}
-
-.colorGrey {
- background-color: var(--palette-grey-lightest);
- box-shadow: inset 0px 0px 0px 1px var(--palette-grey-dark);
- & .text {
- color: var(--palette-grey-dark);
- }
-}
-
-.colorDark {
- background-color: var(--palette-grey-dark);
-}
-
-.colorError {
- background-color: var(--palette-error-darkest);
-}
-
-.colorInherit {
- background-color: currentColor;
-}
diff --git a/src/core/client/ui/components/Counter/Counter.spec.tsx b/src/core/client/ui/components/Counter/Counter.spec.tsx
deleted file mode 100644
index a1747e753..000000000
--- a/src/core/client/ui/components/Counter/Counter.spec.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import Counter from "./Counter";
-
-it("renders correctly", () => {
- const renderer = createRenderer();
- renderer.render(20);
- expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Counter/Counter.tsx b/src/core/client/ui/components/Counter/Counter.tsx
deleted file mode 100644
index 38e3a6295..000000000
--- a/src/core/client/ui/components/Counter/Counter.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./Counter.css";
-
-interface Props {
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
- /**
- * The color of the component. It supports those theme colors that make sense for this component.
- */
- color?: "inherit" | "dark" | "grey" | "primary" | "error";
-
- size?: "sm" | "md";
-}
-
-const Counter: FunctionComponent = ({
- classes,
- color,
- className,
- children,
- size,
- ...rest
-}) => {
- const rootClassName = cn(
- classes.root,
- {
- [classes.colorPrimary]: color === "primary",
- [classes.colorDark]: color === "dark",
- [classes.colorGrey]: color === "grey",
- [classes.colorInherit]: color === "inherit",
- [classes.colorError]: color === "error",
- [classes.sizeSmall]: size === "sm",
- },
- className
- );
- return (
-
- {children}
-
- );
-};
-
-Counter.defaultProps = {
- color: "inherit",
-};
-
-const enhanced = withStyles(styles)(Counter);
-export default enhanced;
diff --git a/src/core/client/ui/components/Counter/README.mdx b/src/core/client/ui/components/Counter/README.mdx
deleted file mode 100644
index 2658f959f..000000000
--- a/src/core/client/ui/components/Counter/README.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
----
-name: Counter
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-
-import Flex from "../Flex";
-import Counter from "./Counter";
-
-# Counter
-
-## Basic usage
-
-
-
- Comments 23
-
-
-
-
-
- 23
-
- 15
-
-
- 10
-
-
- 20
-
-
-
diff --git a/src/core/client/ui/components/Counter/__snapshots__/Counter.spec.tsx.snap b/src/core/client/ui/components/Counter/__snapshots__/Counter.spec.tsx.snap
deleted file mode 100644
index 427bba4cf..000000000
--- a/src/core/client/ui/components/Counter/__snapshots__/Counter.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
- 20
-
-`;
diff --git a/src/core/client/ui/components/Counter/index.ts b/src/core/client/ui/components/Counter/index.ts
deleted file mode 100644
index e09713ba4..000000000
--- a/src/core/client/ui/components/Counter/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Counter";
diff --git a/src/core/client/ui/components/Delay/Delay.spec.tsx b/src/core/client/ui/components/Delay/Delay.spec.tsx
deleted file mode 100644
index 668882f5d..000000000
--- a/src/core/client/ui/components/Delay/Delay.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import Delay from "./Delay";
-
-it("renders correctly", () => {
- jest.useFakeTimers();
- try {
- const props: PropTypesOf = {
- children: "custom",
- ms: 3000,
- };
- const renderer = TestRenderer.create(Hello);
- expect(renderer.toJSON()).toMatchSnapshot();
- jest.advanceTimersByTime(3000);
- expect(renderer.toJSON()).toMatchSnapshot();
- } finally {
- jest.useRealTimers();
- }
-});
diff --git a/src/core/client/ui/components/Delay/Delay.tsx b/src/core/client/ui/components/Delay/Delay.tsx
deleted file mode 100644
index 0210a106c..000000000
--- a/src/core/client/ui/components/Delay/Delay.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { Component } from "react";
-
-interface Props {
- ms?: number;
- children: React.ReactNode;
-}
-
-interface State {
- render: boolean;
-}
-
-export class Delay extends Component {
- public static defaultProps: Partial = {
- ms: 500,
- };
- private timeout: any;
- public state = {
- render: false,
- };
- constructor(props: Props) {
- super(props);
- this.timeout = setTimeout(() => {
- this.setState({ render: true });
- }, props.ms);
- }
- public componentWillUnmount() {
- clearTimeout(this.timeout);
- }
- public render() {
- if (!this.state.render) {
- return null;
- }
- return <>{this.props.children};
- }
-}
-
-export default Delay;
diff --git a/src/core/client/ui/components/Delay/README.mdx b/src/core/client/ui/components/Delay/README.mdx
deleted file mode 100644
index c1a370f0a..000000000
--- a/src/core/client/ui/components/Delay/README.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-name: Delay
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-import Delay from "./Delay.tsx";
-import HorizontalGutter from "../HorizontalGutter";
-import Spinner from "../Spinner";
-
-# Delay
-
-## Basic Use
-
-
-
- Spinner will show up in 3 seconds
-
-
-
-
-
diff --git a/src/core/client/ui/components/Delay/__snapshots__/Delay.spec.tsx.snap b/src/core/client/ui/components/Delay/__snapshots__/Delay.spec.tsx.snap
deleted file mode 100644
index 840f2a190..000000000
--- a/src/core/client/ui/components/Delay/__snapshots__/Delay.spec.tsx.snap
+++ /dev/null
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `null`;
-
-exports[`renders correctly 2`] = `"Hello"`;
diff --git a/src/core/client/ui/components/Delay/index.ts b/src/core/client/ui/components/Delay/index.ts
deleted file mode 100644
index a478b6813..000000000
--- a/src/core/client/ui/components/Delay/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Delay";
diff --git a/src/core/client/ui/components/Dropdown/Button.css b/src/core/client/ui/components/Dropdown/Button.css
deleted file mode 100644
index 6dcc99823..000000000
--- a/src/core/client/ui/components/Dropdown/Button.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.root {
- composes: menuItem from "~coral-ui/shared/typography.css";
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: var(--v2-spacing-2);
- width: 100%;
- text-align: left;
- line-height: 1;
-}
-
-.anchor {
- color: var(--palette-primary-main);
- text-decoration: underline;
- &:visited {
- color: var(--palette-primary-main);
- }
-}
-
-.root:disabled {
- opacity: 0.6;
-}
-
-.root:not(:disabled):active {
- background-color: var(--palette-primary-lightest);
-}
-
-.mouseHover {
- background-color: var(--palette-primary-lightest);
-}
-
-.iconBefore {
- display: flex;
- justify-content: baseline;
- align-items: center;
- color: var(--palette-grey-main);
- margin-right: var(--v2-spacing-2);
-}
-.iconAfter {
- display: flex;
- align-items: center;
- justify-content: baseline;
- margin-left: var(--v2-spacing-2);
- text-decoration: unset;
-}
-.iconOpenInNew {
- padding-top: 1px;
- color: var(--palette-primary-main);
-}
-
-.blankAdornment {
- padding-right: var(--v2-spacing-6);
-}
diff --git a/src/core/client/ui/components/Dropdown/Button.spec.tsx b/src/core/client/ui/components/Dropdown/Button.spec.tsx
deleted file mode 100644
index e25560b72..000000000
--- a/src/core/client/ui/components/Dropdown/Button.spec.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { noop } from "lodash";
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { PropTypesOf } from "coral-framework/types";
-
-import Button from "./Button";
-
-it("renders anchor button", () => {
- const props: PropTypesOf = {
- href: "/moderate",
- children: "link",
- onClick: noop,
- className: "custom",
- target: "_blank",
- };
- const renderer = createRenderer();
- renderer.render();
- expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
-
-it("renders button", () => {
- const props: PropTypesOf = {
- children: "link",
- onClick: noop,
- className: "custom",
- blankAdornment: true,
- };
- const renderer = createRenderer();
- renderer.render();
- expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Dropdown/Button.tsx b/src/core/client/ui/components/Dropdown/Button.tsx
deleted file mode 100644
index 8dc3d4226..000000000
--- a/src/core/client/ui/components/Dropdown/Button.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import { Flex } from "../";
-import BaseButton, { BaseButtonProps } from "../BaseButton";
-import Icon from "../Icon";
-
-import styles from "./Button.css";
-
-interface Props extends Omit {
- children: React.ReactNode;
- icon?: React.ReactNode;
- href?: string;
- className?: string;
- onClick?: React.EventHandler;
- classes: typeof styles;
- /**
- * adornment if set is rendered at the end of the button.
- */
- adornment?: React.ReactNode;
- /**
- * blankAdornment if true will leave some blank space after the text, so
- * that it looks nice, if mixed with other buttons which have an external link
- * icon as adornment.
- */
- blankAdornment?: boolean;
-}
-
-const Button: FunctionComponent = ({
- blankAdornment,
- className,
- href,
- onClick,
- children,
- classes,
- icon,
- disabled,
- adornment,
- ...rest
-}) => {
- return (
-
-
- {icon && {icon}
}
-
- {children}
-
-
- {adornment && {adornment}
}
- {!adornment && rest.target === "_blank" && (
-
- open_in_new
-
- )}
-
- );
-};
-
-export default withStyles(styles)(Button);
diff --git a/src/core/client/ui/components/Dropdown/Divider.css b/src/core/client/ui/components/Dropdown/Divider.css
deleted file mode 100644
index 99c93d7a6..000000000
--- a/src/core/client/ui/components/Dropdown/Divider.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.root {
- border: 0;
- border-bottom: 1px solid var(--palette-divider);
- margin: 0;
-}
diff --git a/src/core/client/ui/components/Dropdown/Divider.spec.tsx b/src/core/client/ui/components/Dropdown/Divider.spec.tsx
deleted file mode 100644
index 0489e8451..000000000
--- a/src/core/client/ui/components/Dropdown/Divider.spec.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import Divider from "./Divider";
-
-it("renders correctly", () => {
- const renderer = createRenderer();
- renderer.render();
- expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Dropdown/Divider.tsx b/src/core/client/ui/components/Dropdown/Divider.tsx
deleted file mode 100644
index ba0fc2c91..000000000
--- a/src/core/client/ui/components/Dropdown/Divider.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./Divider.css";
-
-interface Props {
- className?: string;
- classes: typeof styles;
-}
-
-const Divider: FunctionComponent = ({ className, classes, ...rest }) => (
-
-);
-
-export default withStyles(styles)(Divider);
diff --git a/src/core/client/ui/components/Dropdown/Dropdown.css b/src/core/client/ui/components/Dropdown/Dropdown.css
deleted file mode 100644
index 660ced0b0..000000000
--- a/src/core/client/ui/components/Dropdown/Dropdown.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.root {
- padding: calc(0.5 * var(--mini-unit)) 0;
-}
diff --git a/src/core/client/ui/components/Dropdown/Dropdown.spec.tsx b/src/core/client/ui/components/Dropdown/Dropdown.spec.tsx
deleted file mode 100644
index 2c70af334..000000000
--- a/src/core/client/ui/components/Dropdown/Dropdown.spec.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { PropTypesOf } from "coral-framework/types";
-
-import Button from "./Button";
-import Divider from "./Divider";
-import Dropdown from "./Dropdown";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- children: (
- <>
-
-
-
-
-
- ),
- className: "custom",
- };
- const renderer = createRenderer();
- renderer.render();
- expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Dropdown/Dropdown.tsx b/src/core/client/ui/components/Dropdown/Dropdown.tsx
deleted file mode 100644
index c3da8b50b..000000000
--- a/src/core/client/ui/components/Dropdown/Dropdown.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./Dropdown.css";
-
-interface Props {
- children?: React.ReactNode;
- className?: string;
- classes: typeof styles;
-}
-
-const Dropdown: FunctionComponent = ({
- className,
- children,
- classes,
- ...rest
-}) => {
- return (
-
- {children}
-
- );
-};
-
-export default withStyles(styles)(Dropdown);
diff --git a/src/core/client/ui/components/Dropdown/README.mdx b/src/core/client/ui/components/Dropdown/README.mdx
deleted file mode 100644
index a9b663046..000000000
--- a/src/core/client/ui/components/Dropdown/README.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
----
-name: Dropdown
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-
-import {
- Dropdown,
- Divider as DropdownDivider,
- Button as DropdownButton,
-} from "./";
-import { Button, ButtonIcon } from "../Button";
-import ClickOutside from "../ClickOutside";
-import Popover from "../Popover";
-
-# Dropdown
-
-## Basic usage
-
-
-
-
diff --git a/src/core/client/ui/components/Dropdown/__snapshots__/Button.spec.tsx.snap b/src/core/client/ui/components/Dropdown/__snapshots__/Button.spec.tsx.snap
deleted file mode 100644
index 6c34fec47..000000000
--- a/src/core/client/ui/components/Dropdown/__snapshots__/Button.spec.tsx.snap
+++ /dev/null
@@ -1,44 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders anchor button 1`] = `
-
-`;
-
-exports[`renders button 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/Dropdown/__snapshots__/Divider.spec.tsx.snap b/src/core/client/ui/components/Dropdown/__snapshots__/Divider.spec.tsx.snap
deleted file mode 100644
index 722ea5f94..000000000
--- a/src/core/client/ui/components/Dropdown/__snapshots__/Divider.spec.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/Dropdown/__snapshots__/Dropdown.spec.tsx.snap b/src/core/client/ui/components/Dropdown/__snapshots__/Dropdown.spec.tsx.snap
deleted file mode 100644
index 9c171d0f0..000000000
--- a/src/core/client/ui/components/Dropdown/__snapshots__/Dropdown.spec.tsx.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-
-
- Shortcuts
-
-
- Report Bug
-
-
-
- Sign Out
-
-
-
-`;
diff --git a/src/core/client/ui/components/Dropdown/index.ts b/src/core/client/ui/components/Dropdown/index.ts
deleted file mode 100644
index ff2882546..000000000
--- a/src/core/client/ui/components/Dropdown/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Dropdown } from "./Dropdown";
-export { default as Button } from "./Button";
-export { default as Divider } from "./Divider";
diff --git a/src/core/client/ui/components/FieldSet/FieldSet.css b/src/core/client/ui/components/FieldSet/FieldSet.css
deleted file mode 100644
index 1b81616a4..000000000
--- a/src/core/client/ui/components/FieldSet/FieldSet.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.root {
- border: 0;
- padding: 0;
-}
diff --git a/src/core/client/ui/components/FieldSet/FieldSet.spec.tsx b/src/core/client/ui/components/FieldSet/FieldSet.spec.tsx
deleted file mode 100644
index 559840299..000000000
--- a/src/core/client/ui/components/FieldSet/FieldSet.spec.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-framework/types";
-
-import FieldSet from "./FieldSet";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- children: "content",
- };
- const renderer = TestRenderer.create();
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/FieldSet/FieldSet.tsx b/src/core/client/ui/components/FieldSet/FieldSet.tsx
deleted file mode 100644
index c0db95e91..000000000
--- a/src/core/client/ui/components/FieldSet/FieldSet.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import cn from "classnames";
-import React, { AllHTMLAttributes, FunctionComponent, Ref } from "react";
-
-import { withForwardRef, withStyles } from "coral-ui/hocs";
-import { PropTypesOf } from "coral-ui/types";
-
-import styles from "./FieldSet.css";
-
-interface InnerProps extends AllHTMLAttributes {
- /**
- * This prop can be used to add custom classnames.
- * It is handled by the `withStyles `HOC.
- */
- classes: typeof styles;
- /** Internal: Forwarded Ref */
- forwardRef?: Ref;
-}
-
-const FieldSet: FunctionComponent = (props) => {
- const { className, classes, forwardRef: ref, ...rest } = props;
- const rootClassName = cn(classes.root, className);
- return ;
-};
-const enhanced = withForwardRef(withStyles(styles)(FieldSet));
-export type FieldSetProps = PropTypesOf;
-export default enhanced;
diff --git a/src/core/client/ui/components/FieldSet/README.mdx b/src/core/client/ui/components/FieldSet/README.mdx
deleted file mode 100644
index bc9c6a353..000000000
--- a/src/core/client/ui/components/FieldSet/README.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-name: FieldSet
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-
-# FieldSet
-
-Simple `fieldset` with removed styling for accessibility purposes.
diff --git a/src/core/client/ui/components/FieldSet/__snapshots__/FieldSet.spec.tsx.snap b/src/core/client/ui/components/FieldSet/__snapshots__/FieldSet.spec.tsx.snap
deleted file mode 100644
index e8dda0396..000000000
--- a/src/core/client/ui/components/FieldSet/__snapshots__/FieldSet.spec.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/FieldSet/index.ts b/src/core/client/ui/components/FieldSet/index.ts
deleted file mode 100644
index e9ef62e50..000000000
--- a/src/core/client/ui/components/FieldSet/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./FieldSet";
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
deleted file mode 100644
index 1e2ce97fc..000000000
--- a/src/core/client/ui/components/Flex/Flex.css
+++ /dev/null
@@ -1,574 +0,0 @@
-.root {
-}
-
-.flex {
- display: flex;
-}
-
-.spacing-1 {
- & > * {
- margin: 0 var(--spacing-1) 0 0 !important;
- }
- &.directionRowReverse {
- & > * {
- margin: 0 0 0 var(--spacing-1) !important;
- }
- }
- &.directionColumn {
- & > * {
- margin: 0 0 var(--spacing-1) 0 !important;
- }
- }
- &.directionColumnReverse {
- & > * {
- margin: var(--spacing-1) 0 0 0 !important;
- }
- }
- & > *:last-child {
- margin: 0 !important;
- }
-}
-
-.spacing-2 {
- & > * {
- margin: 0 var(--spacing-2) 0 0 !important;
- }
- &.directionRowReverse {
- & > * {
- margin: 0 0 0 var(--spacing-2) !important;
- }
- }
- &.directionColumn {
- & > * {
- margin: 0 0 var(--spacing-2) 0 !important;
- }
- }
- &.directionColumnReverse {
- & > * {
- margin: var(--spacing-2) 0 0 0 !important;
- }
- }
- & > *:last-child {
- margin: 0 !important;
- }
-}
-
-.spacing-3 {
- & > * {
- margin: 0 var(--spacing-3) 0 0 !important;
- }
- &.directionRowReverse {
- & > * {
- margin: 0 0 0 var(--spacing-3) !important;
- }
- }
- &.directionColumn {
- & > * {
- margin: 0 0 var(--spacing-3) 0 !important;
- }
- }
- &.directionColumnReverse {
- & > * {
- margin: var(--spacing-3) 0 0 0 !important;
- }
- }
- & > *:last-child {
- margin: 0 !important;
- }
-}
-
-.spacing-4 {
- & > * {
- margin: 0 var(--spacing-4) 0 0 !important;
- }
- &.directionRowReverse {
- & > * {
- margin: 0 0 0 var(--spacing-4) !important;
- }
- }
- &.directionColumn {
- & > * {
- margin: 0 0 var(--spacing-4) 0 !important;
- }
- }
- &.directionColumnReverse {
- & > * {
- margin: var(--spacing-4) 0 0 0 !important;
- }
- }
- & > *:last-child {
- margin: 0 !important;
- }
-}
-
-.spacing-5 {
- & > * {
- margin: 0 var(--spacing-5) 0 0 !important;
- }
- &.directionRowReverse {
- & > * {
- margin: 0 0 0 var(--spacing-5) !important;
- }
- }
- &.directionColumn {
- & > * {
- margin: 0 0 var(--spacing-5) 0 !important;
- }
- }
- &.directionColumnReverse {
- & > * {
- margin: var(--spacing-5) 0 0 0 !important;
- }
- }
- & > *:last-child {
- margin: 0 !important;
- }
-}
-
-.spacing-6 {
- & > * {
- margin: 0 var(--spacing-6) 0 0 !important;
- }
- &.directionRowReverse {
- & > * {
- margin: 0 0 0 var(--spacing-6) !important;
- }
- }
- &.directionColumn {
- & > * {
- margin: 0 0 var(--spacing-6) 0 !important;
- }
- }
- &.directionColumnReverse {
- & > * {
- margin: var(--spacing-6) 0 0 0 !important;
- }
- }
- & > *:last-child {
- margin: 0 !important;
- }
-}
-
-.spacing-7 {
- & > * {
- margin: 0 var(--spacing-7) 0 0 !important;
- }
- &.directionRowReverse {
- & > * {
- margin: 0 0 0 var(--spacing-7) !important;
- }
- }
- &.directionColumn {
- & > * {
- margin: 0 0 var(--spacing-7) 0 !important;
- }
- }
- &.directionColumnReverse {
- & > * {
- margin: var(--spacing-7) 0 0 0 !important;
- }
- }
- & > *:last-child {
- margin: 0 !important;
- }
-}
-
-.spacing-8 {
- & > * {
- margin: 0 var(--spacing-8) 0 0 !important;
- }
- &.directionRowReverse {
- & > * {
- margin: 0 0 0 var(--spacing-8) !important;
- }
- }
- &.directionColumn {
- & > * {
- margin: 0 0 var(--spacing-8) 0 !important;
- }
- }
- &.directionColumnReverse {
- & > * {
- margin: var(--spacing-8) 0 0 0 !important;
- }
- }
- & > *:last-child {
- margin: 0 !important;
- }
-}
-
-.spacing-9 {
- & > * {
- margin: 0 var(--spacing-9) 0 0 !important;
- }
- &.directionRowReverse {
- & > * {
- margin: 0 0 0 var(--spacing-9) !important;
- }
- }
- &.directionColumn {
- & > * {
- margin: 0 0 var(--spacing-9) 0 !important;
- }
- }
- &.directionColumnReverse {
- & > * {
- margin: var(--spacing-9) 0 0 0 !important;
- }
- }
- & > *:last-child {
- margin: 0 !important;
- }
-}
-
-.halfItemGutter {
- & > * {
- margin: 0 calc(0.5 * var(--mini-unit)) 0 0 !important;
- }
- &.directionRowReverse {
- & > * {
- margin: 0 0 0 calc(0.5 * var(--mini-unit)) !important;
- }
- }
- &.directionColumn {
- & > * {
- margin: 0 0 calc(0.5 * var(--mini-unit)) 0 !important;
- }
- }
- &.directionColumnReverse {
- & > * {
- margin: calc(0.5 * var(--mini-unit)) 0 0 0 !important;
- }
- }
- & > *:last-child {
- margin: 0 !important;
- }
-}
-
-.doubleItemGutter {
- & > * {
- margin: 0 calc(2 * var(--mini-unit)) 0 0 !important;
- }
- &.directionRowReverse {
- & > * {
- margin: 0 0 0 calc(2 * var(--mini-unit)) !important;
- }
- }
- &.directionColumn {
- & > * {
- margin: 0 0 calc(2 * var(--mini-unit)) 0 !important;
- }
- }
- &.directionColumnReverse {
- & > * {
- margin: calc(2 * var(--mini-unit)) 0 0 0 !important;
- }
- }
- & > *:last-child {
- margin: 0 !important;
- }
-}
-
-.itemGutter {
- & > * {
- margin: 0 var(--mini-unit) 0 0 !important;
- }
- &.directionRowReverse {
- & > * {
- margin: 0 0 0 var(--mini-unit) !important;
- }
- }
- &.directionColumn {
- & > * {
- margin: 0 0 var(--mini-unit) 0 !important;
- }
- }
- &.directionColumnReverse {
- & > * {
- margin: var(--mini-unit) 0 0 0 !important;
- }
- }
- & > *:last-child {
- margin: 0 !important;
- }
-}
-
-.wrap {
- flex-wrap: wrap;
-}
-
-.wrapReverse {
- flex-wrap: wrap-reverse;
-}
-
-.wrap,
-.wrapReverse {
- &:not(.directionColumn).itemGutter {
- &:not(:empty) {
- margin-top: calc(-1 * var(--mini-unit)) !important;
- }
- & > * {
- margin-top: var(--mini-unit) !important;
- }
- }
- &.directionColumn.itemGutter {
- &:not(:empty) {
- margin-left: calc(-1 * var(--mini-unit)) !important;
- }
- &.itemGutter > * {
- margin-left: var(--mini-unit) !important;
- }
- }
-
- &:not(.directionColumn).halfItemGutter {
- &:not(:empty) {
- margin-top: calc(-0.5 * var(--mini-unit)) !important;
- }
- & > * {
- margin-top: calc(0.5 * var(--mini-unit)) !important;
- }
- }
- &.directionColumn.halfItemGutter {
- &:not(:empty) {
- margin-left: calc(-0.5 * var(--mini-unit)) !important;
- }
- &.halfItemGutter > * {
- margin-left: calc(0.5 * var(--mini-unit)) !important;
- }
- }
-
- &:not(.directionColumn).doubleItemGutter {
- &:not(:empty) {
- margin-top: calc(-2 * var(--mini-unit)) !important;
- }
- & > * {
- margin-top: calc(2 * var(--mini-unit)) !important;
- }
- }
- &.directionColumn.doubleItemGutter {
- &:not(:empty) {
- margin-left: calc(-2 * var(--mini-unit)) !important;
- }
- &.doubleItemGutter > * {
- margin-left: calc(2 * var(--mini-unit)) !important;
- }
- }
-
- &:not(.directionColumn).tripleItemGutter {
- &:not(:empty) {
- margin-top: calc(-3 * var(--mini-unit)) !important;
- }
- & > * {
- margin-top: calc(3 * var(--mini-unit)) !important;
- }
- }
- &.directionColumn.tripleItemGutter {
- &:not(:empty) {
- margin-left: calc(-3 * var(--mini-unit)) !important;
- }
- &.tripleItemGutter > * {
- margin-left: calc(3 * var(--mini-unit)) !important;
- }
- }
-
- &:not(.directionColumn).spacing-1 {
- &:not(:empty) {
- margin-top: calc(-1 * var(--spacing-1)) !important;
- }
- & > * {
- margin-top: var(--spacing-1) !important;
- }
- }
- &.directionColumn.spacing-1 {
- &:not(:empty) {
- margin-left: calc(-1 * var(--spacing-1)) !important;
- }
- &.itemGutter > * {
- margin-left: var(--spacing-1) !important;
- }
- }
-
- &:not(.directionColumn).spacing-2 {
- &:not(:empty) {
- margin-top: calc(-1 * var(--spacing-2)) !important;
- }
- & > * {
- margin-top: var(--spacing-2) !important;
- }
- }
- &.directionColumn.spacing-2 {
- &:not(:empty) {
- margin-left: calc(-1 * var(--spacing-2)) !important;
- }
- &.itemGutter > * {
- margin-left: var(--spacing-2) !important;
- }
- }
-
- &:not(.directionColumn).spacing-3 {
- &:not(:empty) {
- margin-top: calc(-1 * var(--spacing-3)) !important;
- }
- & > * {
- margin-top: var(--spacing-3) !important;
- }
- }
- &.directionColumn.spacing-3 {
- &:not(:empty) {
- margin-left: calc(-1 * var(--spacing-3)) !important;
- }
- &.itemGutter > * {
- margin-left: var(--spacing-3) !important;
- }
- }
-
- &:not(.directionColumn).spacing-4 {
- &:not(:empty) {
- margin-top: calc(-1 * var(--spacing-4)) !important;
- }
- & > * {
- margin-top: var(--spacing-4) !important;
- }
- }
- &.directionColumn.spacing-4 {
- &:not(:empty) {
- margin-left: calc(-1 * var(--spacing-4)) !important;
- }
- &.itemGutter > * {
- margin-left: var(--spacing-4) !important;
- }
- }
-
- &:not(.directionColumn).spacing-5 {
- &:not(:empty) {
- margin-top: calc(-1 * var(--spacing-5)) !important;
- }
- & > * {
- margin-top: var(--spacing-5) !important;
- }
- }
- &.directionColumn.spacing-5 {
- &:not(:empty) {
- margin-left: calc(-1 * var(--spacing-5)) !important;
- }
- &.itemGutter > * {
- margin-left: var(--spacing-5) !important;
- }
- }
-
- &:not(.directionColumn).spacing-6 {
- &:not(:empty) {
- margin-top: calc(-1 * var(--spacing-6)) !important;
- }
- & > * {
- margin-top: var(--spacing-6) !important;
- }
- }
- &.directionColumn.spacing-6 {
- &:not(:empty) {
- margin-left: calc(-1 * var(--spacing-6)) !important;
- }
- &.itemGutter > * {
- margin-left: var(--spacing-6) !important;
- }
- }
-
- &:not(.directionColumn).spacing-7 {
- &:not(:empty) {
- margin-top: calc(-1 * var(--spacing-7)) !important;
- }
- & > * {
- margin-top: var(--spacing-7) !important;
- }
- }
- &.directionColumn.spacing-7 {
- &:not(:empty) {
- margin-left: calc(-1 * var(--spacing-7)) !important;
- }
- &.itemGutter > * {
- margin-left: var(--spacing-7) !important;
- }
- }
-
- &:not(.directionColumn).spacing-8 {
- &:not(:empty) {
- margin-top: calc(-1 * var(--spacing-8)) !important;
- }
- & > * {
- margin-top: var(--spacing-8) !important;
- }
- }
- &.directionColumn.spacing-8 {
- &:not(:empty) {
- margin-left: calc(-1 * var(--spacing-8)) !important;
- }
- &.itemGutter > * {
- margin-left: var(--spacing-8) !important;
- }
- }
-
- &:not(.directionColumn).spacing-9 {
- &:not(:empty) {
- margin-top: calc(-1 * var(--spacing-9)) !important;
- }
- & > * {
- margin-top: var(--spacing-9) !important;
- }
- }
- &.directionColumn.spacing-9 {
- &:not(:empty) {
- margin-left: calc(-1 * var(--spacing-9)) !important;
- }
- &.itemGutter > * {
- margin-left: var(--spacing-9) !important;
- }
- }
-}
-
-.justifyFlexStart {
- justify-content: flex-start;
-}
-.justifyFlexEnd {
- justify-content: flex-end;
-}
-.justifyCenter {
- justify-content: center;
-}
-.justifySpaceBetween {
- justify-content: space-between;
-}
-.justifySpaceAround {
- justify-content: space-around;
-}
-.justifySpaceEvenly {
- justify-content: space-evenly;
-}
-
-.alignFlexStart {
- align-items: flex-start;
-}
-.alignFlexEnd {
- align-items: flex-end;
-}
-.alignCenter {
- align-items: center;
-}
-.alignBaseline {
- align-items: baseline;
-}
-.alignStretch {
- align-items: stretch;
-}
-
-.directionRow {
- flex-direction: row;
-}
-.directionColumn {
- flex-direction: column;
-}
-.directionRowReverse {
- flex-direction: row-reverse;
-}
-.directionColumnReverse {
- flex-direction: column-reverse;
-}
diff --git a/src/core/client/ui/components/Flex/Flex.spec.tsx b/src/core/client/ui/components/Flex/Flex.spec.tsx
deleted file mode 100644
index e1e6299d1..000000000
--- a/src/core/client/ui/components/Flex/Flex.spec.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import Flex from "./Flex";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- justifyContent: "center",
- alignItems: "center",
- direction: "row",
- };
- const renderer = TestRenderer.create(
-
- Hello World
-
- );
- expect(renderer.toJSON()).toMatchSnapshot();
-});
-
-it("renders with wrap", () => {
- const props: PropTypesOf = {
- wrap: true,
- };
- const renderer = TestRenderer.create(
-
- Hello World
-
- );
- expect(renderer.toJSON()).toMatchSnapshot();
-});
-
-it("renders with wrap reverse", () => {
- const props: PropTypesOf = {
- wrap: "reverse",
- };
- const renderer = TestRenderer.create(
-
- Hello World
-
- );
- expect(renderer.toJSON()).toMatchSnapshot();
-});
-
-it("renders with item gutter", () => {
- const props: PropTypesOf = {
- itemGutter: true,
- };
- const renderer = TestRenderer.create(
-
- Hello World
-
- );
- expect(renderer.toJSON()).toMatchSnapshot();
-});
-
-it("renders with half item gutter", () => {
- const props: PropTypesOf = {
- itemGutter: "half",
- };
- const renderer = TestRenderer.create(
-
- Hello World
-
- );
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
deleted file mode 100644
index 86ad461e1..000000000
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent, Ref } from "react";
-
-import { pascalCase } from "coral-common/utils";
-import { withForwardRef, withStyles } from "coral-ui/hocs";
-import { Spacing } from "coral-ui/theme/variables";
-import { PropTypesOf } from "coral-ui/types";
-
-/** Needs to be loaded after styles, because Box styles have priority */
-import Box from "../Box";
-
-import styles from "./Flex.css";
-
-interface Props extends Omit, "ref"> {
- /**
- * This prop can be used to add custom classnames.
- * It is handled by the `withStyles `HOC.
- */
- classes: typeof styles;
- id?: string;
- role?: string;
- justifyContent?:
- | "flex-start"
- | "flex-end"
- | "center"
- | "space-around"
- | "space-between"
- | "space-evenly";
- alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
- direction?: "row" | "column" | "row-reverse" | "column-reverse";
- /** @deprecated use `spacing` instead */
- itemGutter?: boolean | "half" | "double" | "triple";
- /** Adds a gutter between items. Uses predefined sizes from design tokens */
- spacing?: Spacing;
- className?: string;
- wrap?: boolean | "reverse";
-
- /** Internal: Forwarded Ref */
- forwardRef?: Ref;
-}
-
-const Flex: FunctionComponent = (props) => {
- const {
- classes,
- className,
- justifyContent,
- alignItems,
- direction,
- itemGutter,
- wrap,
- forwardRef,
- children,
- spacing,
- ...rest
- } = props;
-
- const classObject: Record = {
- [classes.itemGutter]: itemGutter === true,
- [classes.halfItemGutter]: itemGutter === "half",
- [classes.doubleItemGutter]: itemGutter === "double",
- [classes.tripleItemGutter]: itemGutter === "triple",
- [classes.wrap]: wrap === true,
- [classes.wrapReverse]: wrap === "reverse",
- };
-
- if (justifyContent) {
- classObject[
- (classes as any)[`justify${pascalCase(justifyContent)}`]
- ] = true;
- }
-
- if (alignItems) {
- classObject[(classes as any)[`align${pascalCase(alignItems)}`]] = true;
- }
-
- if (direction) {
- classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
- }
-
- const rootClassNames: string = cn(classes.root, className);
- const flexClassNames: string = cn(
- classes.flex,
- classObject,
- (itemGutter || spacing) && "gutter",
- spacing && (classes as any)[`spacing-${spacing}`]
- );
-
- // text nodes can't be modified with css, so replace them with spans.
- // Readd spaces at the beginning or end of text nodes because
- // flex removes it.
- const content = React.Children.map(children, (child) => {
- if (typeof child === "string") {
- return {child.replace(/^ +| +$/g, "\xa0")};
- }
- return child;
- });
-
- if (wrap && itemGutter) {
- // The first div is required to support nested `Flex` components with itemGutters.
- return (
-
- {content}
-
- );
- }
- return (
-
- {content}
-
- );
-};
-
-const enhanced = withForwardRef(withStyles(styles)(Flex));
-export default enhanced;
-export type FlexProps = PropTypesOf;
diff --git a/src/core/client/ui/components/Flex/README.mdx b/src/core/client/ui/components/Flex/README.mdx
deleted file mode 100644
index 3ca921a03..000000000
--- a/src/core/client/ui/components/Flex/README.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
----
-name: Flex
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-import Flex from "./Flex";
-import HorizontalGutter from "../HorizontalGutter";
-import Button from "../Button";
-
-# Flex
-
-`Flex` is a wrapper around `flexbox`.
-
-## Justify content
-
-
- I'm centered
-
-
-## Align items
-
-
-
-
-
-
-
-
-
-## Direction
-
-
-
-
-
-
-
-
-
-## Item Gutter
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
deleted file mode 100644
index 5f915908a..000000000
--- a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
+++ /dev/null
@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-`;
-
-exports[`renders with half item gutter 1`] = `
-
-`;
-
-exports[`renders with item gutter 1`] = `
-
-`;
-
-exports[`renders with wrap 1`] = `
-
-`;
-
-exports[`renders with wrap reverse 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/Flex/index.ts b/src/core/client/ui/components/Flex/index.ts
deleted file mode 100644
index 434836f6d..000000000
--- a/src/core/client/ui/components/Flex/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default, FlexProps } from "./Flex";
diff --git a/src/core/client/ui/components/FormField/FormField.css b/src/core/client/ui/components/FormField/FormField.css
deleted file mode 100644
index c3a2af639..000000000
--- a/src/core/client/ui/components/FormField/FormField.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.root {
-}
diff --git a/src/core/client/ui/components/FormField/FormField.spec.tsx b/src/core/client/ui/components/FormField/FormField.spec.tsx
deleted file mode 100644
index d5f264a47..000000000
--- a/src/core/client/ui/components/FormField/FormField.spec.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { InputDescription, InputLabel, TextField } from "../../components";
-import FormField from "../FormField";
-
-it("renders correctly", () => {
- const renderer = TestRenderer.create(
- Form Components should go here
- );
- expect(renderer.toJSON()).toMatchSnapshot();
-});
-
-it("works with multiple form components", () => {
- const renderer = TestRenderer.create(
-
- Username
-
- An identifier displayed on your comments. You may use “_” and “.”
-
-
-
- );
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/FormField/FormField.tsx b/src/core/client/ui/components/FormField/FormField.tsx
deleted file mode 100644
index dc3e9c431..000000000
--- a/src/core/client/ui/components/FormField/FormField.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent, ReactNode } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-import { PropTypesOf } from "coral-ui/types";
-
-import HorizontalGutter from "../HorizontalGutter";
-
-import styles from "./FormField.css";
-
-interface Props extends Omit, "ref"> {
- children: ReactNode;
- classes: typeof styles;
- id?: string;
- className?: string;
-}
-
-const FormField: FunctionComponent = (props) => {
- const { classes, className, children, ...rest } = props;
-
- return (
-
- {children}
-
- );
-};
-
-const enhanced = withStyles(styles)(FormField);
-export default enhanced;
diff --git a/src/core/client/ui/components/FormField/README.mdx b/src/core/client/ui/components/FormField/README.mdx
deleted file mode 100644
index ead5633a3..000000000
--- a/src/core/client/ui/components/FormField/README.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-name: FormField
-menu: UI Kit v1
----
-
-import { Playground } from 'docz'
-import { InputLabel, ValidationMessage, TextField, InputDescription, FormField } from '../'
-
-# FormField
-
-`FormField` is to be used with Form Components: `InputLabel`, `InputDescription`, `TextField`, `ValidationMessage`, etc.
-FormField manages the gutters between inner elements. It's a form field wrapper of the `Flex` Component.
-
-## Justify content
-
-
- Username
- A unique identifier displayed on your comments. You may use “_” and “.”
-
- Invalid characters. Try again.
-
-
diff --git a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
deleted file mode 100644
index 10a2d0a73..000000000
--- a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
- Form Components should go here
-
-`;
-
-exports[`works with multiple form components 1`] = `
-
-
-
- An identifier displayed on your comments. You may use “_” and “.”
-
-
-
-
-
- Form Components should go here
-
-`;
diff --git a/src/core/client/ui/components/InputLabel/InputLabel.css b/src/core/client/ui/components/InputLabel/InputLabel.css
deleted file mode 100644
index d84a7f655..000000000
--- a/src/core/client/ui/components/InputLabel/InputLabel.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.root {
- display: block;
- padding-bottom: var(--spacing-1)
-}
diff --git a/src/core/client/ui/components/InputLabel/InputLabel.spec.tsx b/src/core/client/ui/components/InputLabel/InputLabel.spec.tsx
deleted file mode 100644
index 91a59b38e..000000000
--- a/src/core/client/ui/components/InputLabel/InputLabel.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import InputLabel from "./InputLabel";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- className: "custom",
- };
- const renderer = TestRenderer.create(
- Hello
- );
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/InputLabel/InputLabel.tsx b/src/core/client/ui/components/InputLabel/InputLabel.tsx
deleted file mode 100644
index e1810d04d..000000000
--- a/src/core/client/ui/components/InputLabel/InputLabel.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent, ReactNode } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-import { PropTypesOf } from "coral-ui/types";
-
-import Typography from "../Typography";
-
-import styles from "./InputLabel.css";
-
-export interface InputLabelProps
- extends Omit, "ref"> {
- id?: string;
- htmlFor?: string;
- /**
- * The content of the component.
- */
- children?: ReactNode;
- /**
- * Convenient prop to override the root styling.
- */
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
-}
-
-const InputLabelProps: FunctionComponent = (props) => {
- const { className, children, classes, ...rest } = props;
-
- const rootClassName = cn(classes.root, className);
-
- return (
-
- {children}
-
- );
-};
-
-const enhanced = withStyles(styles)(InputLabelProps);
-export default enhanced;
diff --git a/src/core/client/ui/components/InputLabel/README.mdx b/src/core/client/ui/components/InputLabel/README.mdx
deleted file mode 100644
index cef12992d..000000000
--- a/src/core/client/ui/components/InputLabel/README.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-name: InputLabel
-menu: UI Kit v1
----
-
-import { Playground } from 'docz'
-import InputLabel from './InputLabel.tsx'
-import HorizontalGutter from '../HorizontalGutter'
-
-# InputLabel
-
-## Basic Use
-
-
- Well... Hello there.
-
-
-
-
diff --git a/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap b/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap
deleted file mode 100644
index c619963ce..000000000
--- a/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/InputLabel/index.ts b/src/core/client/ui/components/InputLabel/index.ts
deleted file mode 100644
index b5002b7c0..000000000
--- a/src/core/client/ui/components/InputLabel/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InputLabel";
diff --git a/src/core/client/ui/components/Marker/Count.css b/src/core/client/ui/components/Marker/Count.css
deleted file mode 100644
index aec911bf2..000000000
--- a/src/core/client/ui/components/Marker/Count.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.root {
- composes: markerText from "~coral-ui/shared/typography.css";
- border-left: 1px solid currentColor;
- margin-left: calc(0.5 * var(--mini-unit));
- margin-right: calc(-0.25 * var(--mini-unit));
- padding-top: 2px;
- padding-bottom: 2px;
- padding-left: calc(0.5 * var(--mini-unit));
- white-space: nowrap;
-}
diff --git a/src/core/client/ui/components/Marker/Count.spec.tsx b/src/core/client/ui/components/Marker/Count.spec.tsx
deleted file mode 100644
index 7b81152f5..000000000
--- a/src/core/client/ui/components/Marker/Count.spec.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import Count from "./Count";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- className: "custom",
- children: "30",
- };
- const renderer = TestRenderer.create(Hello);
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Marker/Count.tsx b/src/core/client/ui/components/Marker/Count.tsx
deleted file mode 100644
index 3cc8fad73..000000000
--- a/src/core/client/ui/components/Marker/Count.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./Count.css";
-
-interface Props {
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
- children: React.ReactNode;
-}
-
-const Count: FunctionComponent = (props) => {
- const { className, children, classes, ...rest } = props;
- const rootClassName = cn(classes.root, className);
-
- return (
-
- {children}
-
- );
-};
-
-const enhanced = withStyles(styles)(Count);
-export default enhanced;
diff --git a/src/core/client/ui/components/Marker/Marker.css b/src/core/client/ui/components/Marker/Marker.css
deleted file mode 100644
index 1468a83b4..000000000
--- a/src/core/client/ui/components/Marker/Marker.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.root {
- composes: markerText from "~coral-ui/shared/typography.css";
-
- color: var(--palette-error-main);
- border: 1px solid currentColor;
- border-radius: 20px;
- padding: 1px var(--mini-unit);
- white-space: nowrap;
-}
-
-.colorPrimary {
- color: var(--palette-primary-darkest);
-}
-
-.colorGrey {
- color: var(--palette-grey-darkest);
-}
-
-.colorError {
- color: var(--palette-error-darkest);
-}
-
-.variantRegular {
-}
-
-.variantFilled {
- &.colorPrimary {
- background-color: var(--palette-primary-lightest);
- }
-
- &.colorGrey {
- background-color: var(--palette-grey-lightest);
- }
-
- &.colorError {
- background-color: var(--palette-error-lightest);
- }
-}
diff --git a/src/core/client/ui/components/Marker/Marker.spec.tsx b/src/core/client/ui/components/Marker/Marker.spec.tsx
deleted file mode 100644
index b1cdcb91d..000000000
--- a/src/core/client/ui/components/Marker/Marker.spec.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import Marker from "./Marker";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- className: "custom",
- color: "error",
- variant: "filled",
- children: "Spam",
- };
- const renderer = TestRenderer.create(Hello);
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Marker/Marker.tsx b/src/core/client/ui/components/Marker/Marker.tsx
deleted file mode 100644
index 5c4a9f843..000000000
--- a/src/core/client/ui/components/Marker/Marker.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./Marker.css";
-
-interface Props {
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
- children: React.ReactNode;
- /**
- * The color of the component. It supports those theme colors that make sense for this component.
- */
- color?: "grey" | "primary" | "error";
-
- variant?: "regular" | "filled";
-}
-
-const Marker: FunctionComponent = (props) => {
- const { className, children, classes, color, variant, ...rest } = props;
-
- const rootClassName = cn(classes.root, className, {
- [classes.colorPrimary]: color === "primary",
- [classes.colorGrey]: color === "grey",
- [classes.colorError]: color === "error",
- [classes.variantRegular]: variant === "regular",
- [classes.variantFilled]: variant === "filled",
- });
-
- return (
-
- {children}
-
- );
-};
-
-Marker.defaultProps = {
- color: "grey",
- variant: "regular",
-};
-
-const enhanced = withStyles(styles)(Marker);
-export default enhanced;
diff --git a/src/core/client/ui/components/Marker/README.mdx b/src/core/client/ui/components/Marker/README.mdx
deleted file mode 100644
index ef4450593..000000000
--- a/src/core/client/ui/components/Marker/README.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
----
-name: Marker
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-import Marker from "./Marker";
-import Count from "./Count";
-import HorizontalGutter from "../HorizontalGutter";
-import Flex from "../Flex";
-
-# Marker
-
-## Basic Use
-
-
-
-
- Toxic
- Karma
- Spam
- Banned Word
-
- With a count 1
-
-
-
- Premod
- Link
-
-
-
- Spam 2
-
-
- Suspect Word
-
-
- Offensive 1
-
-
-
-
diff --git a/src/core/client/ui/components/Marker/__snapshots__/Count.spec.tsx.snap b/src/core/client/ui/components/Marker/__snapshots__/Count.spec.tsx.snap
deleted file mode 100644
index a0dfbda82..000000000
--- a/src/core/client/ui/components/Marker/__snapshots__/Count.spec.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
- Hello
-
-`;
diff --git a/src/core/client/ui/components/Marker/__snapshots__/Marker.spec.tsx.snap b/src/core/client/ui/components/Marker/__snapshots__/Marker.spec.tsx.snap
deleted file mode 100644
index c885b116a..000000000
--- a/src/core/client/ui/components/Marker/__snapshots__/Marker.spec.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
- Hello
-
-`;
diff --git a/src/core/client/ui/components/Marker/index.ts b/src/core/client/ui/components/Marker/index.ts
deleted file mode 100644
index 2622c15bd..000000000
--- a/src/core/client/ui/components/Marker/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default, default as Marker } from "./Marker";
-export { default as Count } from "./Count";
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
deleted file mode 100644
index 469d8b606..000000000
--- a/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { mount } from "enzyme";
-import React from "react";
-import { MediaQueryMatchers } from "react-responsive";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import UIContext from "../UIContext";
-import { default as MatchMediaWithContext, MatchMedia } from "./MatchMedia";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- lteWidth: "xs",
- gteWidth: "sm",
- component: "div",
- screen: true,
- children: Hello World
,
- };
- const renderer = createRenderer();
- renderer.render();
- expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
-
-it("renders less than and great than correctly", () => {
- const props: PropTypesOf = {
- ltWidth: "xs",
- gtWidth: "sm",
- children: Hello World
,
- };
- const renderer = createRenderer();
- renderer.render();
- expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
-
-it("map new speech prop to older aural prop", () => {
- const props: PropTypesOf = {
- speech: true,
- children: Hello World
,
- };
- const renderer = createRenderer();
- renderer.render();
- expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
-
-it("should get mediaQueryValues from context", () => {
- const mediaQueryValues: Partial = {
- width: 100,
- };
- const context: any = {
- mediaQueryValues,
- };
- const wrapper = mount(
-
-
- Hello World
-
-
- );
- expect(wrapper.find(MatchMedia).prop("values")).toEqual(mediaQueryValues);
-});
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
deleted file mode 100644
index cf3ecadf6..000000000
--- a/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { FunctionComponent, ReactNode } from "react";
-import Responsive, { MediaQueryMatchers } from "react-responsive";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import theme from "../../theme/variables";
-import UIContext from "../UIContext";
-
-type Breakpoints = keyof typeof theme.breakpoints;
-
-interface Props {
- /** greater than or equal width. */
- gteWidth?: Breakpoints;
-
- /** greater than width. */
- gtWidth?: Breakpoints;
-
- /** less than equals width. */
- lteWidth?: Breakpoints;
-
- /** less than equals width. */
- ltWidth?: Breakpoints;
- children: ReactNode | ((matches: boolean) => React.ReactNode);
- className?: string;
- component?:
- | string
- | React.SFC
- | React.ClassType
- | React.ComponentClass;
- all?: boolean;
- print?: boolean;
- screen?: boolean;
- speech?: boolean;
- values?: Partial;
-}
-
-export const MatchMedia: FunctionComponent = (props) => {
- const {
- speech,
- gteWidth,
- gtWidth,
- lteWidth,
- ltWidth,
- values,
- ...rest
- } = props;
- const mapped = {
- // TODO: Temporarily map newer speech to older aural type until
- // react-responsive supports the speech prop.
- aural: speech,
- minWidth: gtWidth
- ? theme.breakpoints[gtWidth] + 1
- : gteWidth
- ? theme.breakpoints[gteWidth]
- : undefined,
- maxWidth: ltWidth
- ? theme.breakpoints[ltWidth] - 1
- : lteWidth
- ? theme.breakpoints[lteWidth]
- : undefined,
- device: values,
- };
- return ;
-};
-
-const MatchMediaWithContext: FunctionComponent = (props) => (
-
- {({ mediaQueryValues }) => (
-
- )}
-
-);
-
-export default MatchMediaWithContext;
-export type MatchMediaProps = PropTypesOf;
diff --git a/src/core/client/ui/components/MatchMedia/README.mdx b/src/core/client/ui/components/MatchMedia/README.mdx
deleted file mode 100644
index 13f0e6175..000000000
--- a/src/core/client/ui/components/MatchMedia/README.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
----
-name: MatchMedia
-menu: UI Kit v1
----
-
-import { Playground } from 'docz'
-import MatchMedia from './MatchMedia'
-
-# MatchMedia
-
-`MatchMedia` uses media queries to provide responsive rendering.
-
-## Basic usage
-
-
- I'm a very small screen
-
-
- I'm a small screen
-
-
- I'm a medium screen
-
-
- I'm a large screen
-
-
- I'm a very large screen
-
-
- I'm a super large screen
-
-
-
-## Using render props
-
-
- {matches => {matches ? "I'm big" : "I'm small"}}
-
-
diff --git a/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap b/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
deleted file mode 100644
index b2139264e..000000000
--- a/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`map new speech prop to older aural prop 1`] = `
-
-
- Hello World
-
-
-`;
-
-exports[`renders correctly 1`] = `
-
-
- Hello World
-
-
-`;
-
-exports[`renders less than and great than correctly 1`] = `
-
-
- Hello World
-
-
-`;
diff --git a/src/core/client/ui/components/MatchMedia/index.ts b/src/core/client/ui/components/MatchMedia/index.ts
deleted file mode 100644
index 66da09460..000000000
--- a/src/core/client/ui/components/MatchMedia/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default, MatchMediaProps } from "./MatchMedia";
diff --git a/src/core/client/ui/components/Message/Message.css b/src/core/client/ui/components/Message/Message.css
deleted file mode 100644
index c6da9ef06..000000000
--- a/src/core/client/ui/components/Message/Message.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.root {
- composes: alertMessage from "~coral-ui/shared/typography.css";
- position: relative;
- display: inline-flex;
- justify-content: flex-start;
- align-items: center;
- padding: calc(0.5 * var(--mini-unit)) var(--mini-unit);
- box-sizing: border-box;
- border-radius: var(--round-corners);
- border-width: 1px;
- border-style: solid;
- border-left-width: calc(0.5 * var(--mini-unit));
-}
-
-.colorGrey {
- background-color: var(--palette-common-white);
- border-color: var(--palette-grey-main);
- color: var(--palette-grey-main);
-}
-
-.colorDark {
- background-color: var(--palette-text-primary);
- border-width: 0px;
- color: var(--palette-text-light);
-}
-
-.colorError {
- background-color: var(--palette-error-light);
- border-color: var(--palette-error-darkest);
- border-width: 0px;
- border-left-width: calc(0.5 * var(--mini-unit));
- color: var(--palette-text-light);
-}
-
-.colorPrimary {
- background-color: var(--palette-primary-light);
- border-color: var(--palette-primary-darkest);
- border-width: 0px;
- border-left-width: calc(0.5 * var(--mini-unit));
- color: var(--palette-text-light);
-}
-
-.fullWidth {
- display: flex;
- width: 100%;
-}
diff --git a/src/core/client/ui/components/Message/Message.spec.tsx b/src/core/client/ui/components/Message/Message.spec.tsx
deleted file mode 100644
index 2e02522b6..000000000
--- a/src/core/client/ui/components/Message/Message.spec.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import Message from "./Message";
-import MessageIcon from "./MessageIcon";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- className: "custom",
- children: "Hello World",
- };
- const renderer = TestRenderer.create();
- expect(renderer.toJSON()).toMatchSnapshot();
-});
-
-it("renders icon", () => {
- const renderer = TestRenderer.create(
-
- alertAlert Message
-
- );
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx
deleted file mode 100644
index 58e735d12..000000000
--- a/src/core/client/ui/components/Message/Message.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent, ReactNode } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./Message.css";
-
-export interface MessageProps {
- /**
- * The content of the component.
- */
- children: ReactNode;
- /**
- * Convenient prop to override the root styling.
- */
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
- /*
- * If set renders a full width message
- */
- fullWidth?: boolean;
- /*
- * Name of color, "grey" stays by default - common gray one
- */
- color?: "error" | "grey" | "primary" | "dark";
-}
-
-const Message: FunctionComponent = (props) => {
- const { className, classes, fullWidth, children, color, ...rest } = props;
-
- const rootClassName = cn(
- classes.root,
- {
- [classes.colorGrey]: color === "grey",
- [classes.colorError]: color === "error",
- [classes.colorPrimary]: color === "primary",
- [classes.colorDark]: color === "dark",
- [classes.fullWidth]: fullWidth,
- },
- className
- );
-
- return (
-
- {children}
-
- );
-};
-
-Message.defaultProps = {
- color: "grey",
- fullWidth: false,
-};
-
-const enhanced = withStyles(styles)(Message);
-export default enhanced;
diff --git a/src/core/client/ui/components/Message/MessageIcon.css b/src/core/client/ui/components/Message/MessageIcon.css
deleted file mode 100644
index a6ebb20be..000000000
--- a/src/core/client/ui/components/Message/MessageIcon.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.root {
- align-self: flex-start;
- margin-top: 1px;
- flex-shrink: 0;
- &:first-child {
- margin-right: calc(0.5 * var(--mini-unit));
- }
-}
diff --git a/src/core/client/ui/components/Message/MessageIcon.tsx b/src/core/client/ui/components/Message/MessageIcon.tsx
deleted file mode 100644
index 533bf040b..000000000
--- a/src/core/client/ui/components/Message/MessageIcon.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent, HTMLAttributes, Ref } from "react";
-
-import Icon, { IconProps } from "coral-ui/components/Icon";
-import { withForwardRef, withStyles } from "coral-ui/hocs";
-
-import styles from "./MessageIcon.css";
-
-interface Props extends Omit, "color"> {
- /**
- * This prop can be used to add custom classnames.
- * It is handled by the `withStyles `HOC.
- */
- classes: typeof styles & IconProps["classes"];
-
- size?: IconProps["size"];
-
- /** The name of the icon to render */
- children: string;
-
- /** Internal: Forwarded Ref */
- forwardRef?: Ref;
-}
-
-export const MessageIcon: FunctionComponent = (props) => {
- const { classes, className, forwardRef, ...rest } = props;
- const rootClassName = cn(classes.root, className);
- return ;
-};
-
-MessageIcon.defaultProps = {
- size: "sm",
-};
-
-const enhanced = withForwardRef(withStyles(styles)(MessageIcon));
-export default enhanced;
diff --git a/src/core/client/ui/components/Message/README.mdx b/src/core/client/ui/components/Message/README.mdx
deleted file mode 100644
index 7690b85f9..000000000
--- a/src/core/client/ui/components/Message/README.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-name: Message
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-import Message from "./Message";
-import MessageIcon from "./MessageIcon";
-import HorizontalGutter from "../HorizontalGutter";
-
-# Message
-
-## Basic Use
-
-
-
- This is a message
-
- Contrary to popular belief, Lorem Ipsum is not simply random text.
-
-
- Contrary to popular belief, Lorem Ipsum is not simply random text.
-
-
- Contrary to popular belief, Lorem Ipsum is not simply random text.
-
-
-
-
-## Usage with icon
-
-
-
-
- alarmEdit: 1 min 23 secs Remaining
-
-
-
diff --git a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
deleted file mode 100644
index 2a977f72b..000000000
--- a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
- Hello World
-
-`;
-
-exports[`renders icon 1`] = `
-
-
- alert
-
- Alert Message
-
-`;
diff --git a/src/core/client/ui/components/Message/index.ts b/src/core/client/ui/components/Message/index.ts
deleted file mode 100644
index 84f6b9009..000000000
--- a/src/core/client/ui/components/Message/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default, default as Message } from "./Message";
-export { default as MessageIcon } from "./MessageIcon";
diff --git a/src/core/client/ui/components/Modal/Modal.css b/src/core/client/ui/components/Modal/Modal.css
deleted file mode 100644
index c2e74ec19..000000000
--- a/src/core/client/ui/components/Modal/Modal.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.root {
- position: fixed;
- top: 0px;
- left: 0px;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- z-index: var(--zindex-modal);
-}
-
-.scroll {
- position: relative;
- overflow-y: auto;
- width: 100%;
- height: 100%;
-}
-
-.alignContainer1 {
- display: table;
- margin: 0 auto;
- height: 100%;
-}
-
-.alignContainer2 {
- display: table-cell;
- vertical-align: middle;
-}
-
-.wrapper {
- pointer-events: all;
-}
diff --git a/src/core/client/ui/components/Modal/Modal.mdx.css b/src/core/client/ui/components/Modal/Modal.mdx.css
deleted file mode 100644
index 9b2098d45..000000000
--- a/src/core/client/ui/components/Modal/Modal.mdx.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.card {
- max-width: 500px;
-}
diff --git a/src/core/client/ui/components/Modal/Modal.spec.tsx b/src/core/client/ui/components/Modal/Modal.spec.tsx
deleted file mode 100644
index d86e168ed..000000000
--- a/src/core/client/ui/components/Modal/Modal.spec.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { noop } from "lodash";
-import React from "react";
-import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
-import sinon from "sinon";
-
-import { act } from "coral-framework/testHelpers";
-
-import Modal from "./Modal";
-
-const createNodeMock = () => ({
- focus: noop,
-});
-
-it("renders correctly", () => {
- expect(document.body.lastChild).toBeNull();
- let testRenderer: ReactTestRenderer;
- act(() => {
- testRenderer = TestRenderer.create(
-
- Test
- ,
- { createNodeMock }
- );
- });
- expect(testRenderer!.toJSON()).toBeNull();
- expect(document.body.lastChild).toBeNull();
- act(() => {
- testRenderer.update(
-
- Test
-
- );
- });
- expect(testRenderer!.toJSON()).toMatchSnapshot();
- expect(document.body.lastElementChild!.getAttribute("data-portal")).toBe(
- "modal"
- );
- act(() => {
- testRenderer.unmount();
- });
- expect(document.body.lastChild).toBeNull();
-});
-
-it("relays backdrop click events", () => {
- const event = {};
- const onBackdropClick = sinon.stub();
- const onClose = sinon.stub();
- expect(document.body.lastChild).toBeNull();
- let testRenderer: ReactTestRenderer;
- act(() => {
- testRenderer = TestRenderer.create(
-
- Test
- ,
- { createNodeMock }
- );
- });
- testRenderer!.root
- .findByProps({ "data-testid": "backdrop" })
- .props.onClick(event);
- act(() => {
- testRenderer.unmount();
- });
- expect(onBackdropClick.called).toBe(true);
- expect(onClose.calledWith(event, "backdropClick")).toBe(true);
-});
-
-it("relays esc events", () => {
- const escEvent = { keyCode: 27 };
- const otherEvent = { keyCode: 100 };
- const onEscapeKeyDown = sinon.stub();
- const onClose = sinon.stub();
- expect(document.body.lastChild).toBeNull();
- let testRenderer: ReactTestRenderer;
- act(() => {
- testRenderer = TestRenderer.create(
-
- Test
- ,
- { createNodeMock }
- );
- });
- const el = testRenderer!.root.find((i) => i.props.onKeyDown);
- el.props.onKeyDown(escEvent);
- el.props.onKeyDown(otherEvent);
- act(() => {
- testRenderer.unmount();
- });
- expect(onEscapeKeyDown.called).toBe(true);
- expect(onClose.calledWith(escEvent, "escapeKeyDown")).toBe(true);
- expect(onClose.calledWith(otherEvent, "escapeKeyDown")).toBe(false);
-});
diff --git a/src/core/client/ui/components/Modal/Modal.tsx b/src/core/client/ui/components/Modal/Modal.tsx
deleted file mode 100644
index e6d4bb9c8..000000000
--- a/src/core/client/ui/components/Modal/Modal.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import cn from "classnames";
-import React, {
- FunctionComponent,
- useCallback,
- useEffect,
- useState,
-} from "react";
-import ReactDOM from "react-dom";
-
-import { withStyles } from "coral-ui/hocs";
-import { PropTypesOf } from "coral-ui/types";
-
-import Backdrop from "../Backdrop";
-import NoScroll from "../NoScroll";
-import TrapFocus from "../TrapFocus";
-
-import styles from "./Modal.css";
-
-function appendDivNode() {
- const div = document.createElement("div");
- document.body.appendChild(div);
- div.setAttribute("data-portal", "modal");
- return div;
-}
-
-/**
- * useDOMNode is a React hook that returns a DOM node
- * to be used as a portal for the modal.
- *
- * @param open whether the modal is open or not.
- */
-function useDOMNode(open: boolean) {
- const [modalDOMNode, setModalDOMNode] = useState(null);
- useEffect(() => {
- if (open) {
- const node = appendDivNode();
- setModalDOMNode(node);
- return () => {
- node.parentElement!.removeChild(node);
- setModalDOMNode(null);
- };
- }
- return;
- }, [open]);
- return modalDOMNode;
-}
-
-interface Props {
- onClose?: (
- event: React.KeyboardEvent | React.MouseEvent,
- reason: "backdropClick" | "escapeKeyDown"
- ) => void;
- onBackdropClick?: React.EventHandler;
- onEscapeKeyDown?: React.EventHandler;
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
- open?: boolean;
- children?: PropTypesOf["children"];
-}
-
-const Modal: FunctionComponent = ({
- classes,
- open,
- onClose,
- className,
- onBackdropClick,
- onEscapeKeyDown,
- children,
- ...rest
-}) => {
- const rootClassName = cn(classes.root, className);
-
- const modalDOMNode = useDOMNode(Boolean(open));
- const handleEscapeKeyDown = useCallback(
- (e: React.KeyboardEvent) => {
- if (e.keyCode === 27) {
- if (onEscapeKeyDown) {
- onEscapeKeyDown(e);
- }
- if (onClose) {
- onClose(e, "escapeKeyDown");
- }
- }
- },
- [onEscapeKeyDown, onClose]
- );
- const handleBackdropClick = useCallback(
- (e: React.MouseEvent) => {
- if (onBackdropClick) {
- onBackdropClick(e);
- }
- if (onClose) {
- onClose(e, "backdropClick");
- }
- },
- [onBackdropClick, onClose]
- );
- const handleWrapperClick = useCallback((e: React.MouseEvent) => {
- e.stopPropagation();
- }, []);
-
- if (open && modalDOMNode) {
- return ReactDOM.createPortal(
- ,
- modalDOMNode
- );
- }
- return null;
-};
-
-const enhanced = withStyles(styles)(Modal);
-export default enhanced;
diff --git a/src/core/client/ui/components/Modal/README.mdx b/src/core/client/ui/components/Modal/README.mdx
deleted file mode 100644
index cd4f57f31..000000000
--- a/src/core/client/ui/components/Modal/README.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
----
-name: Modal
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-import { useState, useCallback } from "react";
-
-import Button from "../Button";
-import Card, { CardCloseButton } from "../Card";
-import Typography from "../Typography";
-import Flex from "../Flex";
-import HorizontalGutter from "../HorizontalGutter";
-import Modal from "./Modal";
-
-import styles from "./Modal.mdx.css";
-
-# Modal
-
-## Basic usage
-
-
- {() => {
- const [open, setOpen] = useState(false);
- const show = useCallback(() => setOpen(true));
- const hide = useCallback(() => setOpen(false));
- return (
- <>
-
-
- {({ firstFocusableRef, lastFocusableRef }) => (
-
-
-
-
-
- Are you sure you want to ban ButFirstCoffee?
-
-
- Once banned, this user will no longer be able to comment,
- use reactions, or report comments.
-
-
-
-
-
-
-
-
- )}
-
-
- );
- }}
-
diff --git a/src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap b/src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap
deleted file mode 100644
index a8ac4e4be..000000000
--- a/src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap
+++ /dev/null
@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/Modal/index.ts b/src/core/client/ui/components/Modal/index.ts
deleted file mode 100644
index 09b91f72b..000000000
--- a/src/core/client/ui/components/Modal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Modal";
diff --git a/src/core/client/ui/components/NoScroll/NoScroll.css b/src/core/client/ui/components/NoScroll/NoScroll.css
deleted file mode 100644
index 7546b152d..000000000
--- a/src/core/client/ui/components/NoScroll/NoScroll.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.noScroll {
- overflow: hidden;
-}
diff --git a/src/core/client/ui/components/NoScroll/NoScroll.spec.tsx b/src/core/client/ui/components/NoScroll/NoScroll.spec.tsx
deleted file mode 100644
index c0a35a2f5..000000000
--- a/src/core/client/ui/components/NoScroll/NoScroll.spec.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
-
-import { act } from "coral-framework/testHelpers";
-
-import NoScroll from "./NoScroll";
-
-it("renders correctly", () => {
- expect(document.body.className).toBe("");
- let testRenderer: ReactTestRenderer;
- act(() => {
- testRenderer = TestRenderer.create();
- });
- expect(document.body.className).toBe("NoScroll-noScroll");
- act(() => {
- testRenderer.update();
- });
- expect(document.body.className).toBe("");
-});
-
-it("renders correctly with multiple instances", () => {
- expect(document.body.className).toBe("");
- let testRenderer: ReactTestRenderer;
- act(() => {
- testRenderer = TestRenderer.create(
- <>
-
-
-
-
- );
- });
- expect(document.body.className).toBe("NoScroll-noScroll");
- act(() => {
- testRenderer.update(
- <>
-
-
-
-
- );
- });
- expect(document.body.className).toBe("NoScroll-noScroll");
- act(() => {
- testRenderer.update(
- <>
-
-
-
-
- );
- });
- expect(document.body.className).toBe("");
-});
diff --git a/src/core/client/ui/components/NoScroll/NoScroll.tsx b/src/core/client/ui/components/NoScroll/NoScroll.tsx
deleted file mode 100644
index 2c6f7ced5..000000000
--- a/src/core/client/ui/components/NoScroll/NoScroll.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { FunctionComponent, useEffect } from "react";
-
-import styles from "./NoScroll.css";
-
-interface Props {
- /** If set to true, will disable scrolling on `` */
- active?: boolean;
-}
-
-/** Counter of current instances */
-let instances = 0;
-
-const NoScroll: FunctionComponent = ({ active }) => {
- useEffect(() => {
- if (active) {
- if (instances++ === 0) {
- // Add className.
- document.body.className = document.body.className
- .split(/\s+/)
- .filter((s) => s)
- .concat(styles.noScroll)
- .join(" ");
- }
-
- // Cleanup hook.
- return () => {
- if (--instances === 0) {
- // Remove className.
- document.body.className = document.body.className
- .split(/\s+/)
- .filter((s) => s && s !== styles.noScroll)
- .join(" ");
- }
- };
- }
- return;
- }, [active]);
- return null;
-};
-
-export default NoScroll;
diff --git a/src/core/client/ui/components/NoScroll/README.mdx b/src/core/client/ui/components/NoScroll/README.mdx
deleted file mode 100644
index c4e5cb9dc..000000000
--- a/src/core/client/ui/components/NoScroll/README.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-name: NoScroll
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-import { useState } from "react";
-
-import Button from "../Button";
-import NoScroll from "./NoScroll";
-
-# NoScroll
-
-Disables scrolling of ``.
-
-## Basic usage
-
-
- {() => {
- const [value, setValue] = useState(false);
- return (
-
-
-
-
- );
- }}
-
diff --git a/src/core/client/ui/components/NoScroll/index.ts b/src/core/client/ui/components/NoScroll/index.ts
deleted file mode 100644
index 71333faa8..000000000
--- a/src/core/client/ui/components/NoScroll/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./NoScroll";
diff --git a/src/core/client/ui/components/PasswordField/PasswordField.css b/src/core/client/ui/components/PasswordField/PasswordField.css
deleted file mode 100644
index 3bdff0643..000000000
--- a/src/core/client/ui/components/PasswordField/PasswordField.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.root {
- width: calc(29 * var(--mini-unit));
- height: 36px;
- line-height: 36px;
- box-sizing: border-box;
-}
-
-.colorRegular {
- background-color: var(--palette-common-white);
- color: var(--palette-common-black);
- border: 1px solid var(--palette-grey-light);
-}
-
-.colorError {
- background-color: var(--palette-common-white);
- border-color: var(--palette-error-main);
- border: 2px solid var(--palette-error-darkest);
-}
-
-.fullWidth {
- width: 100%;
-}
-
-.wrapper {
- position: relative;
- display: inline-flex;
- align-items: center;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
-}
-
-.icon {
- position: absolute;
- display: inline-block;
- right: 0px;
- padding: 4px calc(1 * var(--mini-unit));
- cursor: pointer;
- line-height: 0;
-}
-
-/* ie11 specific css */
-_:-ms-lang(x), .icon { top: 8px; }
-
-.input {
- composes: inputText placeholderPseudo from "~coral-ui/shared/typography.css";
- display: block;
- padding: calc(0.5 * var(--mini-unit)) calc(3 * var(--mini-unit))
- calc(0.5 * var(--mini-unit)) calc(0.5 * var(--mini-unit));
- border-radius: var(--round-corners);
- width: 100%;
- height: 100%;
- box-sizing: border-box;
-
- &:read-only {
- background-color: var(--palette-grey-lightest);
- }
- &:disabled {
- color: var(--palette-text-secondary);
- background-color: var(--palette-grey-lightest);
- }
-}
diff --git a/src/core/client/ui/components/PasswordField/PasswordField.spec.tsx b/src/core/client/ui/components/PasswordField/PasswordField.spec.tsx
deleted file mode 100644
index a5e4618f5..000000000
--- a/src/core/client/ui/components/PasswordField/PasswordField.spec.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import PasswordField from "./PasswordField";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- className: "custom",
- defaultValue: "Hello World",
- };
- const renderer = TestRenderer.create();
- expect(renderer.toJSON()).toMatchSnapshot();
-
- renderer.root.findByProps({ role: "button" }).props.onClick();
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/PasswordField/PasswordField.tsx b/src/core/client/ui/components/PasswordField/PasswordField.tsx
deleted file mode 100644
index fab01a2b6..000000000
--- a/src/core/client/ui/components/PasswordField/PasswordField.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import cn from "classnames";
-import React, {
- AllHTMLAttributes,
- ChangeEvent,
- Component,
- EventHandler,
- KeyboardEvent,
-} from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import Icon from "../Icon";
-
-import styles from "./PasswordField.css";
-
-export interface PasswordFieldProps {
- id?: string;
- /**
- * The content value of the component.
- */
- defaultValue?: string;
- /**
- * The content value of the component.
- */
- value?: string;
- /**
- * Convenient prop to override the root styling.
- */
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
- /**
- * Color of the PasswordField
- */
- color?: "regular" | "error";
- /*
- * If set renders a full width button
- */
- fullWidth?: boolean;
- /**
- * Placeholder
- */
- placeholder?: string;
- /**
- * Mark as readonly
- */
- readOnly?: boolean;
- /**
- * Name
- */
- name?: string;
- /**
- * onChange
- */
- onChange?: EventHandler>;
-
- disabled?: boolean;
-
- autoComplete?: AllHTMLAttributes["autoComplete"];
- autoCorrect?: AllHTMLAttributes["autoCorrect"];
- autoCapitalize?: AllHTMLAttributes["autoCapitalize"];
- spellCheck?: AllHTMLAttributes["spellCheck"];
-
- showPasswordTitle?: string;
- hidePasswordTitle?: string;
-}
-
-interface State {
- reveal: boolean;
-}
-
-class PasswordField extends Component {
- public static defaultProps: Partial = {
- color: "regular",
- placeholder: "",
- showPasswordTitle: "Hide password",
- hidePasswordTitle: "Show password",
- autoCapitalize: "off",
- autoCorrect: "off",
- autoComplete: "off",
- spellCheck: false,
- };
-
- public state = {
- reveal: false,
- };
-
- private handleVisibilityKeyUp = (e: KeyboardEvent) => {
- // Number 13 is the "Enter" key on the keyboard
- if (e.keyCode === 13) {
- this.toggleVisibility();
- }
- };
-
- private toggleVisibility = () => {
- this.setState((state) => ({
- reveal: !state.reveal,
- }));
- };
-
- public render() {
- const {
- className,
- classes,
- color,
- fullWidth,
- value,
- placeholder,
- hidePasswordTitle,
- showPasswordTitle,
- ...rest
- } = this.props;
-
- const rootClassName = cn(
- {
- [classes.fullWidth]: fullWidth,
- },
- classes.root,
- className
- );
-
- const inputClassName = cn(
- {
- [classes.colorRegular]: color === "regular",
- [classes.colorError]: color === "error",
- [classes.fullWidth]: fullWidth,
- },
- classes.input
- );
-
- const reveal = this.state.reveal;
-
- return (
-
-
-
-
- {reveal ? "visibility_off" : "visibility"}
-
-
-
-
-
-
-
- visibility_off
-
-
-
-
-
-
- {(props) =>
- children({
- ref: props.ref,
- toggleVisibility: this.toggleVisibility,
- visible,
- })
- }
-
-
- {(props) => (
-
- {description && (
-
{description}
- )}
- {visible && (
-
- {includeArrow && (
-
- )}
- {typeof body === "function"
- ? body({
- scheduleUpdate: props.scheduleUpdate,
- toggleVisibility: this.toggleVisibility,
- visible,
- })
- : body}
-
- )}
-
-
-
-
-
-`;
diff --git a/src/core/client/ui/components/RadioButton/index.ts b/src/core/client/ui/components/RadioButton/index.ts
deleted file mode 100644
index ed12488fa..000000000
--- a/src/core/client/ui/components/RadioButton/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./RadioButton";
-export { default } from "./RadioButton";
diff --git a/src/core/client/ui/components/RelativeTime/README.mdx b/src/core/client/ui/components/RelativeTime/README.mdx
deleted file mode 100644
index fe90c99aa..000000000
--- a/src/core/client/ui/components/RelativeTime/README.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-name: RelativeTime
-menu: UI Kit v1
----
-
-import { Playground } from 'docz'
-import RelativeTime from './RelativeTime'
-
-# RelativeTime
-
-Renders relative time until given `date`.
-
-## Basic usage
-
- "".concat(value, " ", unit, " ", suffix)} />
-
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.css b/src/core/client/ui/components/RelativeTime/RelativeTime.css
deleted file mode 100644
index c3a2af639..000000000
--- a/src/core/client/ui/components/RelativeTime/RelativeTime.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.root {
-}
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx b/src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx
deleted file mode 100644
index fe56898d3..000000000
--- a/src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-import { create } from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import UIContext from "../UIContext";
-import RelativeTime from "./RelativeTime";
-
-it("uses default formatter", () => {
- const props = {
- date: "2018-12-17T03:24:00.000Z",
- };
- const tree = create().toJSON();
-
- expect(tree).toMatchSnapshot();
-});
-
-it("uses formatter from context", () => {
- const context: any = {
- timeagoFormatter: () => "My Context Formatter",
- };
- const props: PropTypesOf = {
- date: "2018-12-17T03:24:00.000Z",
- };
- const tree = create(
-
-
-
- ).toJSON();
-
- expect(tree).toMatchSnapshot();
-});
-
-it("uses formatter from props", () => {
- const props = {
- date: "2018-12-17T03:24:00.000Z",
- formatter: () => "My Props Formatter",
- };
- const tree = create().toJSON();
-
- expect(tree).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.tsx b/src/core/client/ui/components/RelativeTime/RelativeTime.tsx
deleted file mode 100644
index 3560e1b61..000000000
--- a/src/core/client/ui/components/RelativeTime/RelativeTime.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import cn from "classnames";
-import React, { Ref } from "react";
-import TimeAgo, { Formatter } from "react-timeago";
-
-import { UIContext } from "coral-ui/components";
-import { withForwardRef, withStyles } from "coral-ui/hocs";
-import { PropTypesOf } from "coral-ui/types";
-
-import styles from "./RelativeTime.css";
-
-interface Props {
- date: string;
- live?: boolean;
- classes: typeof styles;
- className?: string;
- formatter?: Formatter;
-
- /** Internal: Forwarded Ref */
- forwardRef?: Ref;
-}
-
-const defaultFormatter: Formatter = (value, unit, suffix, timestamp: string) =>
- new Date(timestamp).toISOString();
-
-const RelativeTime: React.FunctionComponent = (props) => {
- const { date, classes, live, className, formatter } = props;
- return (
-
- {({ timeagoFormatter }) => (
-
- )}
-
- );
-};
-
-const enhanced = withForwardRef(withStyles(styles)(RelativeTime));
-export type RelativeTimeProps = PropTypesOf;
-export default enhanced;
diff --git a/src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap b/src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap
deleted file mode 100644
index 4c76ba168..000000000
--- a/src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`uses default formatter 1`] = `
-
-`;
-
-exports[`uses formatter from context 1`] = `
-
-`;
-
-exports[`uses formatter from props 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/RelativeTime/index.ts b/src/core/client/ui/components/RelativeTime/index.ts
deleted file mode 100644
index 90bd4c0ca..000000000
--- a/src/core/client/ui/components/RelativeTime/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default, RelativeTimeProps } from "./RelativeTime";
diff --git a/src/core/client/ui/components/SelectField/OptGroup.spec.tsx b/src/core/client/ui/components/SelectField/OptGroup.spec.tsx
deleted file mode 100644
index 2bf24d7db..000000000
--- a/src/core/client/ui/components/SelectField/OptGroup.spec.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import OptGroup from "./OptGroup";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- label: "mamals",
- children: ,
- };
- const renderer = TestRenderer.create();
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/SelectField/OptGroup.tsx b/src/core/client/ui/components/SelectField/OptGroup.tsx
deleted file mode 100644
index 7cdb0c138..000000000
--- a/src/core/client/ui/components/SelectField/OptGroup.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { FunctionComponent } from "react";
-
-export interface OptGroupProps {
- label: string;
- children?: React.ReactNode;
-}
-
-const OptionGroup: FunctionComponent = (props) => {
- return ;
-};
-
-export default OptionGroup;
diff --git a/src/core/client/ui/components/SelectField/Option.spec.tsx b/src/core/client/ui/components/SelectField/Option.spec.tsx
deleted file mode 100644
index 9cedda3cf..000000000
--- a/src/core/client/ui/components/SelectField/Option.spec.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import Option from "./Option";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- disabled: false,
- hidden: false,
- value: "apple",
- children: "Apple",
- };
- const renderer = TestRenderer.create();
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/SelectField/Option.tsx b/src/core/client/ui/components/SelectField/Option.tsx
deleted file mode 100644
index 105e8f0d4..000000000
--- a/src/core/client/ui/components/SelectField/Option.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { FunctionComponent } from "react";
-
-export interface OptionProps {
- value?: string;
- disabled?: boolean;
- hidden?: boolean;
- children?: React.ReactNode;
-}
-
-const Option: FunctionComponent = (props) => {
- return ;
-};
-
-export default Option;
diff --git a/src/core/client/ui/components/SelectField/README.mdx b/src/core/client/ui/components/SelectField/README.mdx
deleted file mode 100644
index 55aeb43b3..000000000
--- a/src/core/client/ui/components/SelectField/README.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
----
-name: SelectField
-menu: UI Kit v1
----
-
-import { Playground } from 'docz'
-import { useState } from "react";
-
-import SelectField from './SelectField.tsx'
-import Option from './Option.tsx'
-import OptGroup from './OptGroup.tsx'
-import HorizontalGutter from '../HorizontalGutter'
-
-# SelectField
-
-## Basic Use
-
- {() => {
- const [value, setValue] = useState("blue");
- return (
- setValue(e.target.value)}>
-
-
-
- );
- }}
-
-
-## Groups
-
- {() => {
- const [value, setValue] = useState("dog");
- return (
- setValue(e.target.value)}>
-
-
-
- );
- }}
-
-
-
-## Disabled
-
-
-
-
-
-
diff --git a/src/core/client/ui/components/SelectField/SelectField.css b/src/core/client/ui/components/SelectField/SelectField.css
deleted file mode 100644
index dedd6d5b2..000000000
--- a/src/core/client/ui/components/SelectField/SelectField.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.root {
- position: relative;
- display: inline-block;
-}
-
-.afterWrapper {
- position: absolute;
- display: inline-flex;
- justify-content: center;
- align-items: center;
- right: calc(0.5 * var(--mini-unit));
- height: 100%;
- user-select: none;
- pointer-events: none;
-}
-
-.keyboardFocus:focus {
- @mixin outline;
-}
-
-.select {
- composes: menuItem from "~coral-ui/shared/typography.css";
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- outline: none;
- color: var(--palette-text-primary);
- width: 100%;
- font-family: system-ui !important;
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &:-moz-focusring {
- color: transparent;
- text-shadow: 0 0 0 #000;
- }
-
- &:disabled {
- background-color: var(--palette-grey-lightest);
- border-color: var(--palette-text-secondary);
- color: var(--palette-text-secondary);
- }
-
- border: 1px solid var(--palette-grey-light);
- border-radius: var(--round-corners);
- background-color: var(--palette-common-white);
-
- padding: calc(0.5 * var(--mini-unit)) calc(2 * var(--mini-unit))
- calc(0.5 * var(--mini-unit)) var(--mini-unit);
-
- &::-ms-expand {
- display: none;
- }
-}
-
-.fullWidth {
- width: 100%;
-}
-
-.afterWrapperDisabled {
- color: var(--palette-text-secondary);
-}
diff --git a/src/core/client/ui/components/SelectField/SelectField.spec.tsx b/src/core/client/ui/components/SelectField/SelectField.spec.tsx
deleted file mode 100644
index c06a6f750..000000000
--- a/src/core/client/ui/components/SelectField/SelectField.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { noop } from "lodash";
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import SelectField from "./SelectField";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- id: "selectID",
- autofocus: true,
- name: "selectName",
- value: "pie",
- className: "customClassName",
- fullWidth: true,
- onChange: noop,
- disabled: true,
- };
- const renderer = TestRenderer.create();
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/SelectField/SelectField.tsx b/src/core/client/ui/components/SelectField/SelectField.tsx
deleted file mode 100644
index 1511bf24c..000000000
--- a/src/core/client/ui/components/SelectField/SelectField.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import cn from "classnames";
-import React, {
- ChangeEvent,
- EventHandler,
- FocusEvent,
- FunctionComponent,
- MouseEvent,
-} from "react";
-
-import { withKeyboardFocus, withStyles } from "coral-ui/hocs";
-
-import Icon from "../Icon";
-
-import styles from "./SelectField.css";
-
-export interface SelectFieldProps {
- /**
- * Value that has been selected.
- */
- value?: string;
-
- /**
- * Convenient prop to override the root styling.
- */
- className?: string;
-
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
-
- /*
- * If set renders a full width button
- */
- fullWidth?: boolean;
-
- id?: string;
- autofocus?: boolean;
- name?: string;
- onChange?: EventHandler>;
- onClick?: EventHandler;
- disabled?: boolean;
-
- // These handlers are passed down by the `withKeyboardFocus` HOC.
- onFocus: EventHandler>;
- onBlur: EventHandler>;
- keyboardFocus: boolean;
-
- afterWrapper?: React.ReactElement;
-}
-
-const SelectField: FunctionComponent = (props) => {
- const {
- className,
- classes,
- fullWidth,
- keyboardFocus,
- children,
- disabled,
- afterWrapper,
- ...rest
- } = props;
-
- const rootClassName = cn(classes.root, className, {
- [classes.fullWidth]: fullWidth,
- });
-
- const selectClassName = cn(classes.select, {
- [classes.keyboardFocus]: keyboardFocus,
- });
-
- const afterWrapperClassName = cn(classes.afterWrapper, {
- [classes.afterWrapperDisabled]: disabled,
- });
-
- return (
-
-
-
- {afterWrapper}
-
-
- );
-};
-
-SelectField.defaultProps = {
- afterWrapper: expand_more,
-};
-
-const enhanced = withStyles(styles)(withKeyboardFocus(SelectField));
-export default enhanced;
diff --git a/src/core/client/ui/components/SelectField/__snapshots__/OptGroup.spec.tsx.snap b/src/core/client/ui/components/SelectField/__snapshots__/OptGroup.spec.tsx.snap
deleted file mode 100644
index 122f55640..000000000
--- a/src/core/client/ui/components/SelectField/__snapshots__/OptGroup.spec.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/SelectField/__snapshots__/Option.spec.tsx.snap b/src/core/client/ui/components/SelectField/__snapshots__/Option.spec.tsx.snap
deleted file mode 100644
index ccf4e9b7f..000000000
--- a/src/core/client/ui/components/SelectField/__snapshots__/Option.spec.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/SelectField/__snapshots__/SelectField.spec.tsx.snap b/src/core/client/ui/components/SelectField/__snapshots__/SelectField.spec.tsx.snap
deleted file mode 100644
index 480265bdb..000000000
--- a/src/core/client/ui/components/SelectField/__snapshots__/SelectField.spec.tsx.snap
+++ /dev/null
@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-
-
-
- expand_more
-
-
-
-`;
diff --git a/src/core/client/ui/components/SelectField/index.ts b/src/core/client/ui/components/SelectField/index.ts
deleted file mode 100644
index f2f8e347f..000000000
--- a/src/core/client/ui/components/SelectField/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default, default as SelectField } from "./SelectField";
-export { default as Option } from "./Option";
-export { default as OptGroup } from "./OptGroup";
diff --git a/src/core/client/ui/components/Spinner/README.mdx b/src/core/client/ui/components/Spinner/README.mdx
deleted file mode 100644
index 3f51f980a..000000000
--- a/src/core/client/ui/components/Spinner/README.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-name: Spinner
-menu: UI Kit v1
----
-
-import { Playground } from "docz"
-import Spinner from "./Spinner"
-
-# Spinner
-
-## Basic usage
-
-
-
-
diff --git a/src/core/client/ui/components/Spinner/Spinner.css b/src/core/client/ui/components/Spinner/Spinner.css
deleted file mode 100644
index 4115e48a1..000000000
--- a/src/core/client/ui/components/Spinner/Spinner.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.spinner {
- animation: rotator 1.4s linear infinite;
-}
-
-@keyframes rotator {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(270deg);
- }
-}
-
-.path {
- stroke: var(--palette-primary-main);
- stroke-dasharray: 187;
- stroke-dashoffset: 0;
- transform-origin: center;
- animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
-}
-
-@keyframes colors {
- 0% {
- stroke: var(--palette-primary-main);
- }
- 100% {
- stroke: var(--palette-primary-light);
- }
-}
-
-@keyframes dash {
- 0% {
- stroke-dashoffset: 187;
- }
- 50% {
- stroke-dashoffset: 46.75;
- transform: rotate(135deg);
- }
- 100% {
- stroke-dashoffset: 187;
- transform: rotate(450deg);
- }
-}
-
-@keyframes fullRotator {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
-
-/* Hack for IE and Edge as they don't support css animations on SVG elements. */
-_:-ms-lang(x),
-.path {
- stroke-dasharray: 160;
-}
-
-_:-ms-lang(x),
-.spinner {
- animation: fullRotator 1.4s linear infinite;
-}
diff --git a/src/core/client/ui/components/Spinner/Spinner.spec.tsx b/src/core/client/ui/components/Spinner/Spinner.spec.tsx
deleted file mode 100644
index 05521bf86..000000000
--- a/src/core/client/ui/components/Spinner/Spinner.spec.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import Spinner from "../Spinner";
-
-it("renders correctly", () => {
- const renderer = TestRenderer.create();
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Spinner/Spinner.tsx b/src/core/client/ui/components/Spinner/Spinner.tsx
deleted file mode 100644
index 121044969..000000000
--- a/src/core/client/ui/components/Spinner/Spinner.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./Spinner.css";
-
-type Size = "xs" | "sm" | "md";
-
-export interface SpinnerProps {
- /**
- * Convenient prop to override the root styling.
- */
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
-
- size?: Size;
-}
-
-function calculateSize(size: Size): number {
- switch (size) {
- case "xs":
- return 15;
- case "sm":
- return 30;
- case "md":
- return 40;
- default:
- throw new Error(`Unknown ${size}`);
- }
-}
-
-const Spinner: FunctionComponent = (props) => {
- const { className, classes } = props;
-
- const rootClassName = cn(classes.spinner, className);
- const s = calculateSize(props.size!);
-
- return (
-
- );
-};
-
-Spinner.defaultProps = {
- size: "md",
-};
-
-const enhanced = withStyles(styles)(Spinner);
-export default enhanced;
diff --git a/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap b/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
deleted file mode 100644
index cd6f511b5..000000000
--- a/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/Spinner/index.ts b/src/core/client/ui/components/Spinner/index.ts
deleted file mode 100644
index 66d1096a0..000000000
--- a/src/core/client/ui/components/Spinner/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Spinner";
diff --git a/src/core/client/ui/components/Steps/Circle.css b/src/core/client/ui/components/Steps/Circle.css
deleted file mode 100644
index 35fe24162..000000000
--- a/src/core/client/ui/components/Steps/Circle.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.root {
- display: inline-block;
- width: 20px;
- height: 20px;
- background-color: var(--palette-common-white);
- border: 2px solid var(--palette-grey-light);
- box-sizing: border-box;
- border-radius: 100%;
- z-index: 1;
-}
-
-.active,
-.completed {
- background-color: var(--palette-success-main);
- border-color: var(--palette-success-main);
-}
-
-.icon {
- color: var(--palette-text-light);
- font-weight: bold;
- margin-top: -4px;
- margin-left: 1px;
-}
diff --git a/src/core/client/ui/components/Steps/Circle.tsx b/src/core/client/ui/components/Steps/Circle.tsx
deleted file mode 100644
index 9f41f8c78..000000000
--- a/src/core/client/ui/components/Steps/Circle.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import Icon from "../Icon";
-
-import styles from "./Circle.css";
-
-interface CircleProps {
- active?: boolean;
- completed?: boolean;
-}
-
-const Circle: FunctionComponent = ({ active, completed }) => {
- const rootClassName = cn(styles.root, {
- [styles.active]: active,
- [styles.completed]: completed,
- });
- return (
-
- {completed && done}
-
- );
-};
-
-export default Circle;
diff --git a/src/core/client/ui/components/Steps/Line.css b/src/core/client/ui/components/Steps/Line.css
deleted file mode 100644
index 70af335b8..000000000
--- a/src/core/client/ui/components/Steps/Line.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.root {
- display: inline-block;
- width: 200px;
- height: 0px;
- border: 1px solid var(--palette-grey-light);
- box-sizing: border-box;
- z-index: 1;
-}
-
-.completed {
- border-color: var(--palette-success-main);
-}
diff --git a/src/core/client/ui/components/Steps/Line.tsx b/src/core/client/ui/components/Steps/Line.tsx
deleted file mode 100644
index 6748419e1..000000000
--- a/src/core/client/ui/components/Steps/Line.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import styles from "./Line.css";
-
-interface LineProps {
- completed?: boolean;
- className?: string;
-}
-
-const Line: FunctionComponent = ({ completed, className }) => {
- const rootClassName = cn(
- styles.root,
- {
- [styles.completed]: completed,
- },
- className
- );
- return ;
-};
-
-export default Line;
diff --git a/src/core/client/ui/components/Steps/README.mdx b/src/core/client/ui/components/Steps/README.mdx
deleted file mode 100644
index 0f6856df6..000000000
--- a/src/core/client/ui/components/Steps/README.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-name: Steps
-menu: UI Kit v1
----
-
-# Steps
-
-### Examples
-
-import { Playground } from 'docz'
-import { Flex, Step, StepBar } from './index'
-
-
-
- Create Admin Account
- Add Organization Details
- Add Permitted Domains
-
-
diff --git a/src/core/client/ui/components/Steps/Step.css b/src/core/client/ui/components/Steps/Step.css
deleted file mode 100644
index c1fe8663d..000000000
--- a/src/core/client/ui/components/Steps/Step.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.root {
- position: relative;
-}
-
-.text {
- position: absolute;
- top: 26px;
- transform: translateX(-50%);
- left: 8%;
- white-space: nowrap;
-}
diff --git a/src/core/client/ui/components/Steps/Step.tsx b/src/core/client/ui/components/Steps/Step.tsx
deleted file mode 100644
index 1bf44c495..000000000
--- a/src/core/client/ui/components/Steps/Step.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { Component, ReactNode, ReactText } from "react";
-
-import Flex from "../Flex";
-import Typography from "../Typography";
-import Circle from "./Circle";
-import Line from "./Line";
-
-import styles from "./Step.css";
-
-interface StepProps {
- children?: ReactText | ReactNode;
- active?: boolean;
- completed?: boolean;
- last?: boolean;
- hidden?: boolean;
- classes?: {
- line?: string;
- };
-}
-
-class Step extends Component {
- public render() {
- const { children, completed, active, last, hidden, classes } = this.props;
- if (hidden) {
- return null;
- }
- return (
-
-
-
- {!last && (
-
- )}
-
- {children}
-
- );
- }
-}
-
-export default Step;
diff --git a/src/core/client/ui/components/Steps/StepBar.css b/src/core/client/ui/components/Steps/StepBar.css
deleted file mode 100644
index 536b516c7..000000000
--- a/src/core/client/ui/components/Steps/StepBar.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
- width: 100%;
- position: relative;
- display: block;
- padding: calc(2 * var(--mini-unit)) 0;
-}
diff --git a/src/core/client/ui/components/Steps/StepBar.tsx b/src/core/client/ui/components/Steps/StepBar.tsx
deleted file mode 100644
index 023913bec..000000000
--- a/src/core/client/ui/components/Steps/StepBar.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import cn from "classnames";
-import React, { Component, ReactNode } from "react";
-
-import Flex from "../Flex";
-
-import styles from "./StepBar.css";
-
-interface StepBarProps {
- children: ReactNode;
- currentStep: number;
- className?: string;
-}
-
-class StepBar extends Component {
- public render() {
- const { children, currentStep } = this.props;
- const steps = React.Children.toArray(children);
- const stepsToRender = steps
- .filter((child: React.ReactElement) => !child.props.hidden)
- .map((child: React.ReactElement, index: number, arr) =>
- React.cloneElement(child, {
- last: arr.length - 1 === index,
- active: currentStep === index,
- completed: currentStep > index,
- })
- );
-
- return (
-
-
- {stepsToRender}
-
-
- );
- }
-}
-
-export default StepBar;
diff --git a/src/core/client/ui/components/Steps/index.ts b/src/core/client/ui/components/Steps/index.ts
deleted file mode 100644
index 98a8b1891..000000000
--- a/src/core/client/ui/components/Steps/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as StepBar } from "./StepBar";
-export { default as Step } from "./Step";
diff --git a/src/core/client/ui/components/SubBar/Navigation.css b/src/core/client/ui/components/SubBar/Navigation.css
deleted file mode 100644
index 2f1eb37ab..000000000
--- a/src/core/client/ui/components/SubBar/Navigation.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.root {
- height: 100%;
- border-bottom: 1px solid var(--palette-divider);
- padding: 0 calc(1.5 * var(--mini-unit));
-}
-
-.ul {
- list-style: none;
- padding: 0;
- display: flex;
- height: 100%;
- margin: 0;
- align-items: flex-end;
-
- & > * {
- margin: 0 calc(3 * var(--mini-unit)) 0 0;
- }
- & > *:last-child {
- margin: 0;
- }
-}
diff --git a/src/core/client/ui/components/SubBar/Navigation.spec.tsx b/src/core/client/ui/components/SubBar/Navigation.spec.tsx
deleted file mode 100644
index 1a3953b98..000000000
--- a/src/core/client/ui/components/SubBar/Navigation.spec.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { PropTypesOf } from "coral-framework/types";
-
-import Navigation from "./Navigation";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- children: "children",
- };
- const renderer = createRenderer();
- renderer.render();
- expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/SubBar/Navigation.tsx b/src/core/client/ui/components/SubBar/Navigation.tsx
deleted file mode 100644
index 8a19567b4..000000000
--- a/src/core/client/ui/components/SubBar/Navigation.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./Navigation.css";
-
-interface Props {
- className?: string;
- classes: typeof styles;
- children?: React.ReactNode;
-}
-
-const Navigation: FunctionComponent = ({
- children,
- className,
- classes,
-}) => (
-
-);
-
-export default withStyles(styles)(Navigation);
diff --git a/src/core/client/ui/components/SubBar/NavigationItem.css b/src/core/client/ui/components/SubBar/NavigationItem.css
deleted file mode 100644
index 4404d797b..000000000
--- a/src/core/client/ui/components/SubBar/NavigationItem.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.root {
- height: 100%;
-}
-
-.anchor {
- composes: adminTabItem from "~coral-ui/shared/typography.css";
- color: var(--palette-grey-dark);
- height: 100%;
- display: inline-flex;
- align-items: center;
- text-transform: uppercase;
- text-decoration: none;
- box-sizing: border-box;
- border-bottom: 3px solid transparent;
- &:hover {
- cursor: pointer;
- }
- & > * {
- margin: 0 calc(0.5 * var(--mini-unit)) 0 0;
- }
- & > *:last-child {
- margin: 0;
- }
-}
-
-.active {
- composes: adminTabItemActive from "~coral-ui/shared/typography.css";
- border-bottom: 3px solid var(--palette-primary-main);
- color: var(--palette-primary-main);
-}
diff --git a/src/core/client/ui/components/SubBar/NavigationItem.spec.tsx b/src/core/client/ui/components/SubBar/NavigationItem.spec.tsx
deleted file mode 100644
index 1f7e58c22..000000000
--- a/src/core/client/ui/components/SubBar/NavigationItem.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { noop } from "lodash";
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { PropTypesOf } from "coral-framework/types";
-
-import NavigationItem from "./NavigationItem";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- href: "/moderate",
- children: "link",
- onClick: noop,
- active: true,
- className: "custom",
- };
- const renderer = createRenderer();
- renderer.render();
- expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/SubBar/NavigationItem.tsx b/src/core/client/ui/components/SubBar/NavigationItem.tsx
deleted file mode 100644
index 3f0d3ab06..000000000
--- a/src/core/client/ui/components/SubBar/NavigationItem.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./NavigationItem.css";
-
-interface Props {
- children: React.ReactNode;
- href?: string;
- className?: string;
- active?: boolean;
- onClick?: React.EventHandler;
- classes: typeof styles;
-}
-
-const NavigationItem: FunctionComponent = ({
- children,
- href,
- className,
- active,
- onClick,
- classes,
- ...rest
-}) => {
- return (
-
-
- {children}
-
-
- );
-};
-
-export default withStyles(styles)(NavigationItem);
diff --git a/src/core/client/ui/components/SubBar/README.mdx b/src/core/client/ui/components/SubBar/README.mdx
deleted file mode 100644
index f74761ade..000000000
--- a/src/core/client/ui/components/SubBar/README.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
----
-name: SubBar
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-
-import { SubBar, Navigation, NavigationItem, Divider } from "./";
-import Icon from "../Icon";
-import Counter from "../Counter";
-
-# SubBar
-
-## Basic usage
-
-
-
-
-
- flag
- Reported
- 20
-
-
- access_time
- Pending
- 100
-
-
- forum
- Unmoderated
- 2.3k
-
-
- cancel
- Rejected
-
-
-
-
diff --git a/src/core/client/ui/components/SubBar/SubBar.css b/src/core/client/ui/components/SubBar/SubBar.css
deleted file mode 100644
index 98b5742ef..000000000
--- a/src/core/client/ui/components/SubBar/SubBar.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.root {
- background-color: var(--palette-common-white);
- height: calc(6 * var(--mini-unit));
-}
-
-.container {
- max-width: 1280px;
- margin: 0 auto;
- height: 100%;
- box-sizing: border-box;
- position: relative;
-}
-
-.gutterBegin {
- padding-left: calc(2 * var(--mini-unit));
-}
-.gutterEnd {
- padding-right: calc(2 * var(--mini-unit));
-}
diff --git a/src/core/client/ui/components/SubBar/SubBar.spec.tsx b/src/core/client/ui/components/SubBar/SubBar.spec.tsx
deleted file mode 100644
index f5f348648..000000000
--- a/src/core/client/ui/components/SubBar/SubBar.spec.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { PropTypesOf } from "coral-framework/types";
-
-import SubBar from "./SubBar";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- children: "child",
- gutterBegin: true,
- gutterEnd: true,
- className: "custom",
- };
- const renderer = createRenderer();
- renderer.render();
- expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/SubBar/SubBar.tsx b/src/core/client/ui/components/SubBar/SubBar.tsx
deleted file mode 100644
index 6576cac8b..000000000
--- a/src/core/client/ui/components/SubBar/SubBar.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent, HTMLAttributes } from "react";
-
-import { Flex } from "coral-ui/components";
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./SubBar.css";
-
-interface Props extends HTMLAttributes {
- children?: React.ReactNode;
- className?: string;
- gutterBegin?: boolean;
- gutterEnd?: boolean;
- classes: typeof styles;
-}
-
-const SubBar: FunctionComponent = ({
- gutterBegin,
- gutterEnd,
- className,
- children,
- classes,
- ...rest
-}) => {
- return (
-
-
- {children}
-
-
- );
-};
-
-export default withStyles(styles)(SubBar);
diff --git a/src/core/client/ui/components/SubBar/__snapshots__/Navigation.spec.tsx.snap b/src/core/client/ui/components/SubBar/__snapshots__/Navigation.spec.tsx.snap
deleted file mode 100644
index 54f9bae45..000000000
--- a/src/core/client/ui/components/SubBar/__snapshots__/Navigation.spec.tsx.snap
+++ /dev/null
@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
- children
-
-`;
diff --git a/src/core/client/ui/components/SubBar/__snapshots__/NavigationItem.spec.tsx.snap b/src/core/client/ui/components/SubBar/__snapshots__/NavigationItem.spec.tsx.snap
deleted file mode 100644
index 7ad60ce3d..000000000
--- a/src/core/client/ui/components/SubBar/__snapshots__/NavigationItem.spec.tsx.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
- link
-
-`;
diff --git a/src/core/client/ui/components/SubBar/__snapshots__/SubBar.spec.tsx.snap b/src/core/client/ui/components/SubBar/__snapshots__/SubBar.spec.tsx.snap
deleted file mode 100644
index 22bc584a3..000000000
--- a/src/core/client/ui/components/SubBar/__snapshots__/SubBar.spec.tsx.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
- child
-
-`;
diff --git a/src/core/client/ui/components/SubBar/index.ts b/src/core/client/ui/components/SubBar/index.ts
deleted file mode 100644
index 7f912c793..000000000
--- a/src/core/client/ui/components/SubBar/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as SubBar } from "./SubBar";
-export { default as Navigation } from "./Navigation";
-export { default as NavigationItem } from "./NavigationItem";
diff --git a/src/core/client/ui/components/Table/README.mdx b/src/core/client/ui/components/Table/README.mdx
deleted file mode 100644
index a712bba40..000000000
--- a/src/core/client/ui/components/Table/README.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
----
-name: Table
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-
-import { Table, TableBody, TableHead, TableRow, TableCell } from "./";
-
-# Table
-
-## Basic usage
-
-
-
-
-
- Username
- Email Address
- Member Since
-
-
-
-
- ButFirstCoffee
- coffee@mail.com
- 01/27/2019
-
-
- SneaksOnSneaks
- hisairness@mail.com
- 04/27/2019
-
-
-
-
diff --git a/src/core/client/ui/components/Table/Table.css b/src/core/client/ui/components/Table/Table.css
deleted file mode 100644
index 60ab1c748..000000000
--- a/src/core/client/ui/components/Table/Table.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.root {
- border-collapse: collapse;
- box-sizing: border-box;
-}
-
-.fullWidth {
- width: 100%;
-}
diff --git a/src/core/client/ui/components/Table/Table.spec.tsx b/src/core/client/ui/components/Table/Table.spec.tsx
deleted file mode 100644
index d1e96d01d..000000000
--- a/src/core/client/ui/components/Table/Table.spec.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { Table, TableBody, TableCell, TableHead, TableRow } from "./";
-
-it("renders correctly", () => {
- const renderer = createRenderer();
- renderer.render(
-
-
-
- Username
- Email Address
- Member Since
-
-
-
-
- ButFirstCoffee
- coffee@mail.com
- 01/27/2019
-
-
- SneaksOnSneaks
- hisairness@mail.com
- 04/27/2019
-
-
-
- );
- expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Table/Table.tsx b/src/core/client/ui/components/Table/Table.tsx
deleted file mode 100644
index 16ba68cf9..000000000
--- a/src/core/client/ui/components/Table/Table.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./Table.css";
-
-interface Props extends React.HTMLAttributes {
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
-
- fullWidth?: boolean;
-}
-
-const Table: FunctionComponent = ({
- classes,
- className,
- fullWidth,
- children,
- ...rest
-}) => {
- const rootClassName = cn(classes.root, className, {
- [classes.fullWidth]: fullWidth,
- });
- return (
-
- );
-};
-
-const enhanced = withStyles(styles)(Table);
-export default enhanced;
diff --git a/src/core/client/ui/components/Table/TableBody.css b/src/core/client/ui/components/Table/TableBody.css
deleted file mode 100644
index c3a2af639..000000000
--- a/src/core/client/ui/components/Table/TableBody.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.root {
-}
diff --git a/src/core/client/ui/components/Table/TableBody.tsx b/src/core/client/ui/components/Table/TableBody.tsx
deleted file mode 100644
index eec6528b8..000000000
--- a/src/core/client/ui/components/Table/TableBody.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./TableBody.css";
-
-interface Props extends React.HTMLAttributes {
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
-}
-
-const TableBody: FunctionComponent = ({
- classes,
- className,
- children,
- ...rest
-}) => {
- const rootClassName = cn(classes.root, className);
- return (
-
- {children}
-
- );
-};
-
-const enhanced = withStyles(styles)(TableBody);
-export default enhanced;
diff --git a/src/core/client/ui/components/Table/TableCell.css b/src/core/client/ui/components/Table/TableCell.css
deleted file mode 100644
index 20de7e6b4..000000000
--- a/src/core/client/ui/components/Table/TableCell.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.root {
- /* acts like min-width in a cell */
- height: calc(4.5 * var(--mini-unit));
- text-align: left;
- padding: var(--mini-unit) calc(1.5 * var(--mini-unit));
- box-sizing: border-box;
-}
-
-.header {
- composes: tableHeading from "~coral-ui/shared/typography.css";
-}
-
-.body {
- composes: tableData from "~coral-ui/shared/typography.css";
-}
-
-.alignCenter {
- text-align: center;
-}
-
-.alignEnd {
- text-align: right;
-}
diff --git a/src/core/client/ui/components/Table/TableCell.tsx b/src/core/client/ui/components/Table/TableCell.tsx
deleted file mode 100644
index 84519465f..000000000
--- a/src/core/client/ui/components/Table/TableCell.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent, useContext } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import { TableHeadContext } from "./TableHead";
-
-import styles from "./TableCell.css";
-
-interface Props
- extends Omit, "align"> {
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
-
- align?: "begin" | "center" | "end";
-}
-
-const TableCell: FunctionComponent = ({
- align,
- classes,
- className,
- children,
- ...rest
-}) => {
- const inTableHead = useContext(TableHeadContext);
- const rootClassName = cn(classes.root, className, {
- [classes.header]: inTableHead,
- [classes.body]: !inTableHead,
- [classes.alignCenter]: align === "center",
- [classes.alignEnd]: align === "end",
- });
- const Component = inTableHead ? "th" : "td";
- return (
-
- {children}
-
- );
-};
-
-const enhanced = withStyles(styles)(TableCell);
-export default enhanced;
diff --git a/src/core/client/ui/components/Table/TableHead.css b/src/core/client/ui/components/Table/TableHead.css
deleted file mode 100644
index e5a3097c6..000000000
--- a/src/core/client/ui/components/Table/TableHead.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.root {
- background: var(--palette-grey-lightest);
- border: 1px solid var(--palette-grey-lighter);
- box-sizing: border-box;
-}
diff --git a/src/core/client/ui/components/Table/TableHead.tsx b/src/core/client/ui/components/Table/TableHead.tsx
deleted file mode 100644
index 84bf7eb1b..000000000
--- a/src/core/client/ui/components/Table/TableHead.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./TableHead.css";
-
-export const TableHeadContext = React.createContext(false);
-
-interface Props extends React.HTMLAttributes {
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
-}
-
-const TableHead: FunctionComponent = ({
- classes,
- className,
- children,
- ...rest
-}) => {
- const rootClassName = cn(classes.root, className);
- return (
-
-
- {children}
-
-
- );
-};
-
-const enhanced = withStyles(styles)(TableHead);
-export default enhanced;
diff --git a/src/core/client/ui/components/Table/TableRow.css b/src/core/client/ui/components/Table/TableRow.css
deleted file mode 100644
index aab1194cf..000000000
--- a/src/core/client/ui/components/Table/TableRow.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.root {
- box-sizing: border-box;
-}
-
-.body:nth-child(even) {
- background-color: var(--palette-grey-lightest);
-}
-
-.body:first-child:hover {
- border-top: 1px solid var(--palette-primary-main);
-}
-.body:hover {
- background-color: var(--palette-primary-lightest);
- box-shadow: inset 0px 0px 0px 1px var(--palette-primary-main);
-}
diff --git a/src/core/client/ui/components/Table/TableRow.tsx b/src/core/client/ui/components/Table/TableRow.tsx
deleted file mode 100644
index 861589fc9..000000000
--- a/src/core/client/ui/components/Table/TableRow.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent, useContext } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import { TableHeadContext } from "./TableHead";
-
-import styles from "./TableRow.css";
-
-interface Props extends React.HTMLAttributes {
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
-}
-
-const TableRow: FunctionComponent = ({
- classes,
- className,
- children,
- ...rest
-}) => {
- const inTableHead = useContext(TableHeadContext);
- const rootClassName = cn(classes.root, className, {
- [classes.body]: !inTableHead,
- });
- return (
-
- {children}
-
- );
-};
-
-const enhanced = withStyles(styles)(TableRow);
-export default enhanced;
diff --git a/src/core/client/ui/components/Table/__snapshots__/Table.spec.tsx.snap b/src/core/client/ui/components/Table/__snapshots__/Table.spec.tsx.snap
deleted file mode 100644
index cc7452766..000000000
--- a/src/core/client/ui/components/Table/__snapshots__/Table.spec.tsx.snap
+++ /dev/null
@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-
-
-
- Username
-
-
- Email Address
-
-
- Member Since
-
-
-
-
-
-
- ButFirstCoffee
-
-
- coffee@mail.com
-
-
- 01/27/2019
-
-
-
-
- SneaksOnSneaks
-
-
- hisairness@mail.com
-
-
- 04/27/2019
-
-
-
-
-`;
diff --git a/src/core/client/ui/components/Table/index.ts b/src/core/client/ui/components/Table/index.ts
deleted file mode 100644
index 627b960e7..000000000
--- a/src/core/client/ui/components/Table/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as Table } from "./Table";
-export { default as TableBody } from "./TableBody";
-export { default as TableHead } from "./TableHead";
-export { default as TableRow } from "./TableRow";
-export { default as TableCell } from "./TableCell";
diff --git a/src/core/client/ui/components/Tabs/README.mdx b/src/core/client/ui/components/Tabs/README.mdx
deleted file mode 100644
index 8724be90c..000000000
--- a/src/core/client/ui/components/Tabs/README.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-name: Tabs
-menu: UI Kit v1
----
-
-# Tabs
-
-### Examples
-
-import { Playground } from "docz";
-import { useState } from "react";
-
-import { Flex, TabBar, Tab, TabContent, TabPane } from "./index";
-
-## Primary Tabs
-
-
- {() => {
- const [activeID, setActiveID] = useState("two");
- return (
-
- setActiveID(id)}
- >
- One
- Two
- Three
-
-
- Hola One
- Hola Two
- Hola Three
-
-
- );
- }}
-
-
-## Secondary Tabs
-
-
- {() => {
- const [activeID, setActiveID] = useState("two");
- return (
-
- setActiveID(id)}
- >
- One
- Two
- Three
-
-
- Hola One
- Hola Two
- Hola Three
-
-
- );
- }}
- (
-
- props.setActiveID(id)}
- >
- One
- Two
- Three
-
-
- Hola One
- Hola Two
- Hola Three
-
-
- )}
- />
-
diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css
deleted file mode 100644
index edb984c8a..000000000
--- a/src/core/client/ui/components/Tabs/Tab.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.root {
- display: inline-block;
- list-style: none;
- margin-right: -1px;
- margin-bottom: -1px;
-}
-
-.button {
- height: 100%;
- box-sizing: border-box;
- border-bottom: 0;
- list-style: none;
- padding: var(--mini-unit);
- font-weight: var(--font-weight-regular);
- font-family: var(--font-family-serif);
-
- &:hover {
- cursor: pointer;
- }
-}
-
-.root:first-child .primary {
- border-top-left-radius: var(--round-corners);
-}
-
-.root:last-child .primary {
- border-top-right-radius: var(--round-corners);
-}
-
-.primary {
- position: relative;
- background: var(--palette-grey-lightest);
- color: var(--palette-grey-main);
- border: 1px solid var(--palette-grey-lighter);
- padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2);
- &.active {
- background-color: var(--palette-common-white);
- color: var(--palette-common-black);
- border-bottom: 0;
- border-top-width: calc(0.5 * var(--mini-unit));
- border-top-color: var(--palette-primary-main);
- border-radius: 0;
- z-index: 10;
- }
-}
-
-.secondary {
- font-family: var(--font-family-sans-serif);
- color: var(--palette-grey-dark);
- padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2)
- calc(0.5 * var(--mini-unit) + 3px) calc(var(--mini-unit) * 2);
-
- &.active {
- color: var(--palette-text-primary);
- font-weight: var(--font-weight-medium);
- border-bottom: 3px solid var(--palette-primary-main);
- padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2);
- }
-}
diff --git a/src/core/client/ui/components/Tabs/Tab.spec.tsx b/src/core/client/ui/components/Tabs/Tab.spec.tsx
deleted file mode 100644
index b2ad3ccc3..000000000
--- a/src/core/client/ui/components/Tabs/Tab.spec.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import Tab from "./Tab";
-
-it("renders correctly", () => {
- const renderer = TestRenderer.create(Three);
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
deleted file mode 100644
index ec63ce04a..000000000
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import cn from "classnames";
-import React from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import BaseButton from "../BaseButton";
-
-import styles from "./Tab.css";
-
-export interface TabProps {
- /**
- * Convenient prop to override the root styling.
- */
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
- /**
- * The id/name of the tab
- */
- tabID: string;
- /**
- * Active status
- */
- active?: boolean;
- /**
- * Style variant
- */
- variant?: "primary" | "secondary";
- /**
- * Action taken on tab click
- */
- onTabClick?: (tabID: string) => void;
-}
-
-class Tab extends React.Component {
- public handleTabClick = () => {
- if (this.props.onTabClick) {
- this.props.onTabClick(this.props.tabID);
- }
- };
-
- public render() {
- const { className, classes, children, tabID, active, variant } = this.props;
-
- const buttonClassName = cn(
- classes.button,
- {
- [classes.primary]: variant === "primary",
- [classes.secondary]: variant === "secondary",
- [classes.active]: active,
- },
- className
- );
-
- return (
-
-
- {children}
-
-
- );
- }
-}
-
-const enhanced = withStyles(styles)(Tab);
-export default enhanced;
diff --git a/src/core/client/ui/components/Tabs/TabBar.css b/src/core/client/ui/components/Tabs/TabBar.css
deleted file mode 100644
index fc7f90bb7..000000000
--- a/src/core/client/ui/components/Tabs/TabBar.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.root {
- display: flex;
- padding: 0;
- margin: 0;
- align-items: flex-end;
-}
-
-.primary {
- border-bottom: 1px solid var(--palette-grey-lighter);
-}
-
-.secondary {
- border-bottom: 1px solid var(--palette-divider);
-}
diff --git a/src/core/client/ui/components/Tabs/TabBar.spec.tsx b/src/core/client/ui/components/Tabs/TabBar.spec.tsx
deleted file mode 100644
index f0d3422aa..000000000
--- a/src/core/client/ui/components/Tabs/TabBar.spec.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import Tab from "./Tab";
-import TabBar from "./TabBar";
-
-it("renders correctly", () => {
- const renderer = TestRenderer.create(
-
- One
- Two
- Three
-
- );
- expect(renderer.toJSON()).toMatchSnapshot();
-});
-
-it("sets initial tab as active", () => {
- const renderer = TestRenderer.create(
-
- One
- Two
- Three
-
- );
-
- const testInstance = renderer.root;
- expect(testInstance.findByType(TabBar).props.activeTab).toBe("one");
- const tabs = testInstance.findAllByType(Tab);
- expect(tabs.length).toBe(3);
- expect(tabs[0].props.active).toBe(true);
- expect(tabs[1].props.active).toBe(false);
- expect(tabs[2].props.active).toBe(false);
-});
diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx
deleted file mode 100644
index de39d00c5..000000000
--- a/src/core/client/ui/components/Tabs/TabBar.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./TabBar.css";
-
-export interface TabBarProps {
- /**
- * Convenient prop to override the root styling.
- */
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
- /**
- * Style variant
- */
- variant?: "primary" | "secondary";
- /**
- * Active tab id/name
- */
- activeTab?: string;
- /**
- * Default active tab id/name
- */
- defaultActiveTab?: string;
- /**
- * Action taken on tab click
- */
- onTabClick?: (tabID: string) => void;
-}
-
-const TabBar: FunctionComponent = (props) => {
- const {
- className,
- classes,
- children,
- onTabClick,
- activeTab,
- variant,
- defaultActiveTab,
- } = props;
-
- const rootClassName = cn(
- classes.root,
- [
- {
- [classes.primary]: variant === "primary",
- [classes.secondary]: variant === "secondary",
- },
- ],
- className
- );
-
- const tabs = React.Children.toArray(children).map(
- (child: React.ReactElement, index: number) =>
- React.cloneElement(child, {
- tabID: child.props.tabID ? child.props.tabID : index,
- active:
- defaultActiveTab && !activeTab
- ? child.props.tabID === defaultActiveTab
- : child.props.tabID === activeTab,
- variant,
- onTabClick,
- })
- );
-
- return (
-
- );
-};
-
-TabBar.defaultProps = {
- variant: "primary",
-};
-
-const enhanced = withStyles(styles)(TabBar);
-export default enhanced;
diff --git a/src/core/client/ui/components/Tabs/TabContent.spec.tsx b/src/core/client/ui/components/Tabs/TabContent.spec.tsx
deleted file mode 100644
index 050c82bde..000000000
--- a/src/core/client/ui/components/Tabs/TabContent.spec.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import TabContent from "./TabContent";
-import TabPane from "./TabPane";
-
-it("renders correctly", () => {
- const renderer = TestRenderer.create(
-
- Hola One
- Hola Two
- Hola Three
-
- );
- expect(renderer.toJSON()).toMatchSnapshot();
-});
-
-it("sets initial tab as active, renders only one", () => {
- const renderer = TestRenderer.create(
-
- Hola One
- Hola Two
- Hola Three
-
- );
-
- const testInstance = renderer.root;
- expect(testInstance.findByType(TabContent).props.activeTab).toBe("one");
- const panes = testInstance.findAllByType(TabPane);
- expect(panes.length).toBe(1);
-});
diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx
deleted file mode 100644
index 223720870..000000000
--- a/src/core/client/ui/components/Tabs/TabContent.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-export interface TabContentProps {
- /**
- * Active tab id/name
- */
- activeTab?: string;
- /**
- * classNames
- */
- className?: string;
-}
-
-const TabContent: FunctionComponent = (props) => {
- const { children, activeTab, className } = props;
- return (
- <>
- {React.Children.toArray(children)
- .filter(
- (child: React.ReactElement) => child.props.tabID === activeTab
- )
- .map((child: React.ReactElement, i) =>
- React.cloneElement(child, {
- tabID: child.props.tabID ? child.props.tabID : i,
- className: cn(className, child.props.className),
- })
- )}
-
- );
-};
-
-export default TabContent;
diff --git a/src/core/client/ui/components/Tabs/TabPane.spec.tsx b/src/core/client/ui/components/Tabs/TabPane.spec.tsx
deleted file mode 100644
index 746fc4802..000000000
--- a/src/core/client/ui/components/Tabs/TabPane.spec.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import TabPane from "./TabPane";
-
-it("renders correctly", () => {
- const renderer = TestRenderer.create(Three);
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Tabs/TabPane.tsx b/src/core/client/ui/components/Tabs/TabPane.tsx
deleted file mode 100644
index 9dd3c6575..000000000
--- a/src/core/client/ui/components/Tabs/TabPane.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { FunctionComponent } from "react";
-
-export interface TabBarProps {
- /**
- * Convenient prop to override the root styling.
- */
- className?: string;
- /**
- * Name of the tab
- */
- tabID: string;
-}
-
-const TabPane: FunctionComponent = (props) => {
- const { className, children, tabID, ...rest } = props;
- return (
-
- );
-};
-
-export default TabPane;
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
deleted file mode 100644
index 44c943182..000000000
--- a/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-
-
-`;
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
deleted file mode 100644
index 06a3d4ece..000000000
--- a/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
+++ /dev/null
@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
- -
-
-
- -
-
-
- -
-
-
-
-`;
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap
deleted file mode 100644
index 0069bd989..000000000
--- a/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap
deleted file mode 100644
index ad884add2..000000000
--- a/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
-`;
diff --git a/src/core/client/ui/components/Tabs/index.ts b/src/core/client/ui/components/Tabs/index.ts
deleted file mode 100644
index f8818e9ea..000000000
--- a/src/core/client/ui/components/Tabs/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as TabBar } from "./TabBar";
-export { default as Tab } from "./Tab";
-export { default as TabPane } from "./TabPane";
-export { default as TabContent } from "./TabContent";
diff --git a/src/core/client/ui/components/Tag/README.mdx b/src/core/client/ui/components/Tag/README.mdx
deleted file mode 100644
index 2f3b09896..000000000
--- a/src/core/client/ui/components/Tag/README.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-name: Tag
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-import Tag from "./Tag";
-import HorizontalGutter from "../HorizontalGutter";
-import Flex from "../Flex";
-
-# Tag
-
-## Basic Use
-
-
-
- Staff
- Featured
- Rejected
-
-
-
-## Pill variant
-
-
-
- Staff
-
- Featured
-
-
- Rejected
-
-
-
diff --git a/src/core/client/ui/components/Tag/Tag.css b/src/core/client/ui/components/Tag/Tag.css
deleted file mode 100644
index 5e7f47f52..000000000
--- a/src/core/client/ui/components/Tag/Tag.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.root {
- composes: tagText from "~coral-ui/shared/typography.css";
- color: var(--palette-text-light);
- line-height: 1;
- padding: var(--spacing-1);
- white-space: nowrap;
- border-radius: 2px;
- display: inline-block;
-}
-
-.colorPrimary {
- background-color: var(--palette-primary-dark);
-}
-
-.colorGrey {
- background-color: var(--palette-grey-dark);
-}
-
-.colorError {
- background-color: var(--palette-error-dark);
-}
-
-.colorDarkest {
- background-color: var(--palette-primary-darkest);
-}
-
-.variantPill {
- border-radius: 20px;
- padding: 2px 6px;
- font-weight: var(--font-weight-sans-medium);
- &.colorGrey {
- border: 1px solid var(--palette-grey-dark);
- background-color: var(--palette-grey-lightest);
- color: var(--palette-grey-dark);
- }
- &.colorPrimary {
- border: 1px solid var(--palette-primary-dark);
- background-color: var(--palette-primary-lightest);
- color: var(--palette-primary-dark);
- }
- &.colorError {
- border: 1px solid var(--palette-error-dark);
- background-color: var(--palette-error-lightest);
- color: var(--palette-error-dark);
- }
-}
-
-.uppercase {
- text-transform: uppercase;
-}
diff --git a/src/core/client/ui/components/Tag/Tag.spec.tsx b/src/core/client/ui/components/Tag/Tag.spec.tsx
deleted file mode 100644
index 9505ec34b..000000000
--- a/src/core/client/ui/components/Tag/Tag.spec.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import Tag from "./Tag";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- className: "custom",
- children: "Spam",
- };
- const renderer = TestRenderer.create(Staff);
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/Tag/Tag.tsx b/src/core/client/ui/components/Tag/Tag.tsx
deleted file mode 100644
index 074519135..000000000
--- a/src/core/client/ui/components/Tag/Tag.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./Tag.css";
-
-interface Props {
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
- children: React.ReactNode;
- color?: "grey" | "primary" | "error" | "dark";
-
- variant?: "regular" | "pill";
-}
-
-const Tag: FunctionComponent = (props) => {
- const { className, children, classes, variant, color, ...rest } = props;
-
- const rootClassName = cn(classes.root, className, {
- [classes.variantPill]: variant === "pill",
- [classes.colorPrimary]: color === "primary",
- [classes.colorError]: color === "error",
- [classes.colorGrey]: color === "grey",
- [classes.colorDarkest]: color === "dark",
- [classes.uppercase]: variant !== "pill",
- });
-
- return (
-
- {children}
-
- );
-};
-
-Tag.defaultProps = {
- color: "grey",
- variant: "regular",
-};
-
-const enhanced = withStyles(styles)(Tag);
-export default enhanced;
diff --git a/src/core/client/ui/components/Tag/__snapshots__/Tag.spec.tsx.snap b/src/core/client/ui/components/Tag/__snapshots__/Tag.spec.tsx.snap
deleted file mode 100644
index e28a88335..000000000
--- a/src/core/client/ui/components/Tag/__snapshots__/Tag.spec.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-
- Staff
-
-`;
diff --git a/src/core/client/ui/components/Tag/index.ts b/src/core/client/ui/components/Tag/index.ts
deleted file mode 100644
index 5fa3b2fcd..000000000
--- a/src/core/client/ui/components/Tag/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default, default as Tag } from "./Tag";
diff --git a/src/core/client/ui/components/TextField/README.mdx b/src/core/client/ui/components/TextField/README.mdx
deleted file mode 100644
index 427f7345e..000000000
--- a/src/core/client/ui/components/TextField/README.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
----
-name: TextField
-menu: UI Kit v1
----
-
-import { Playground } from "docz";
-
-import TextField from "./TextField";
-import Button from "../Button";
-import Icon from "../Icon";
-import Flex from "../Flex";
-import HorizontalGutter from "../HorizontalGutter";
-
-# TextField
-
-## Basic Use
-
-
-
-
-
- search
-
- }
- />
-
-
-
-
- Seconds}
- />
-
-
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
deleted file mode 100644
index dee506685..000000000
--- a/src/core/client/ui/components/TextField/TextField.css
+++ /dev/null
@@ -1,68 +0,0 @@
-.root {
- display: flex;
- width: calc(29 * var(--mini-unit));
- align-items: center;
- height: 36px;
-}
-
-.input {
- composes: inputText placeholderPseudo from "~coral-ui/shared/typography.css";
- position: relative;
- display: block;
- padding: calc(0.5 * var(--mini-unit));
- box-sizing: border-box;
- border-radius: var(--round-corners);
- width: 100%;
- align-self: stretch;
- margin-top: 0;
- margin-bottom: 0;
-
- &:read-only {
- background-color: var(--palette-grey-lightest);
- }
- &:disabled {
- color: var(--palette-text-secondary);
- background-color: var(--palette-grey-lightest);
- }
- &:focus {
- box-shadow: 0 0 3px rgba(81, 125, 207, 1);
- border: 1px solid rgba(81, 125, 207, 1);
- }
-}
-
-.adornment {
- margin-left: calc(0.5 * var(--mini-unit));
-}
-
-.colorRegular {
- background-color: var(--palette-common-white);
- color: var(--palette-common-black);
- border: 1px solid var(--palette-grey-light);
-}
-
-.colorError {
- background-color: var(--palette-common-white);
- border-color: var(--palette-error-main);
- border: 2px solid var(--palette-error-darkest);
-}
-
-.fullWidth {
- width: 100%;
-}
-
-.textAlignCenter {
- text-align: center;
-}
-
-.seamlessAdornment {
- border-right: 0;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
-
- & + .adornment {
- height: 100%;
- margin: 0;
- display: flex;
- align-items: stretch;
- }
-}
diff --git a/src/core/client/ui/components/TextField/TextField.spec.tsx b/src/core/client/ui/components/TextField/TextField.spec.tsx
deleted file mode 100644
index 9c0be1f70..000000000
--- a/src/core/client/ui/components/TextField/TextField.spec.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-ui/types";
-
-import TextField from "./TextField";
-
-it("renders correctly", () => {
- const props: PropTypesOf = {
- className: "custom",
- defaultValue: "Hello World",
- adornment: "Unit",
- };
- const renderer = TestRenderer.create();
- expect(renderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
deleted file mode 100644
index ac6fa7b76..000000000
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import cn from "classnames";
-import React, {
- AllHTMLAttributes,
- ChangeEvent,
- EventHandler,
- FunctionComponent,
-} from "react";
-
-import { withStyles } from "coral-ui/hocs";
-
-import styles from "./TextField.css";
-
-export interface TextFieldProps {
- id?: string;
- /**
- * The content value of the component.
- */
- defaultValue?: string;
- /**
- * The content value of the component.
- */
- value?: string;
- /**
- * Convenient prop to override the root styling.
- */
- className?: string;
- /**
- * Override or extend the styles applied to the component.
- */
- classes: typeof styles;
- /**
- * Color of the TextField
- */
- color?: "regular" | "error";
- /*
- * If set renders a full width button
- */
- fullWidth?: boolean;
- /**
- * Placeholder
- */
- placeholder?: string;
- /**
- * Mark as readonly
- */
- readOnly?: boolean;
- /**
- * Name
- */
- name?: string;
- /**
- * type: Here we only allow text type values
- */
- type?:
- | "email"
- | "number"
- | "password"
- | "search"
- | "tel"
- | "text"
- | "url"
- | string;
- /**
- * onChange
- */
- onChange?: EventHandler>;
- onKeyPress?: React.EventHandler;
- onKeyDown?: React.EventHandler;
-
- disabled?: boolean;
-
- autoComplete?: AllHTMLAttributes["autoComplete"];
- autoCorrect?: AllHTMLAttributes["autoCorrect"];
- autoCapitalize?: AllHTMLAttributes["autoCapitalize"];
- spellCheck?: AllHTMLAttributes["spellCheck"];
-
- textAlignCenter?: boolean;
- adornment?: React.ReactNode;
-
- variant?: "regular" | "seamlessAdornment";
-}
-
-const TextField: FunctionComponent = (props) => {
- const {
- className,
- classes,
- color,
- fullWidth,
- value,
- placeholder,
- adornment,
- textAlignCenter,
- variant,
- ...rest
- } = props;
-
- const rootClassName = cn(
- classes.root,
- {
- [classes.fullWidth]: fullWidth,
- },
- className
- );
-
- const inputClassName = cn(classes.input, {
- [classes.colorRegular]: color === "regular",
- [classes.colorError]: color === "error",
- [classes.textAlignCenter]: textAlignCenter,
- [classes.seamlessAdornment]: variant === "seamlessAdornment",
- });
-
- return (
-
-
- {adornment &&
{adornment}
}
-
Hello World!
}
-
-
- )}
-
-
diff --git a/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx b/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx
deleted file mode 100644
index bdeb29df6..000000000
--- a/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import { create } from "react-test-renderer";
-
-import ToggleShow from "./ToggleShow";
-
-it("renders correctly", () => {
- const tree = create(
-
- {({ toggleShow, show }) => (
-
- {show &&
SHOW ME
}
-
-
- {show &&
SHOW ME
}
-
-
-
- SHOW ME
-
-
-
-
-
-`;
diff --git a/src/core/client/ui/components/Tooltip/Tooltip.css b/src/core/client/ui/components/Tooltip/Tooltip.css
deleted file mode 100644
index b48b12e0e..000000000
--- a/src/core/client/ui/components/Tooltip/Tooltip.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.root {
- align-items: center;
- display: flex;
-}
-
-.tooltip {
- width: max-content;
- max-width: 220px;
-}
-
-.title {
- line-height: 1;
-}
diff --git a/src/core/client/ui/components/Tooltip/Tooltip.tsx b/src/core/client/ui/components/Tooltip/Tooltip.tsx
deleted file mode 100644
index 69c1dbe40..000000000
--- a/src/core/client/ui/components/Tooltip/Tooltip.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { Box, ClickOutside, Popover, Typography } from "coral-ui/components";
-import { PropTypesOf } from "coral-ui/types";
-
-import styles from "./Tooltip.css";
-
-interface Props {
- id: string;
- className?: string;
- title: React.ReactNode;
- body: React.ReactNode;
- button: PropTypesOf["children"];
-}
-
-export const Tooltip: FunctionComponent = ({
- id,
- className,
- title,
- body,
- button,
-}) => {
- return (
- (
-
- {
- // Don't propagate click events when clicking inside of popover to
- // avoid accidentally activating other components.
- evt.stopPropagation();
- }}
- >
-
- {title}
-
-
-
- {body}
-
-
-
- )}
- placement={"bottom"}
- dark
- >
- {(props) => button(props)}
-
- );
-};
-
-export default Tooltip;
diff --git a/src/core/client/ui/components/Tooltip/TooltipButton.css b/src/core/client/ui/components/Tooltip/TooltipButton.css
deleted file mode 100644
index e2777894c..000000000
--- a/src/core/client/ui/components/Tooltip/TooltipButton.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.button {
- line-height: 0;
- color: var(--palette-grey-dark);
- padding: 6px;
-}
diff --git a/src/core/client/ui/components/Tooltip/TooltipButton.tsx b/src/core/client/ui/components/Tooltip/TooltipButton.tsx
deleted file mode 100644
index 965049d2b..000000000
--- a/src/core/client/ui/components/Tooltip/TooltipButton.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import cn from "classnames";
-import React, { ButtonHTMLAttributes, FunctionComponent, Ref } from "react";
-
-import { BaseButton, Icon } from "coral-ui/components";
-import { withForwardRef } from "coral-ui/hocs";
-import { PropTypesOf } from "coral-ui/types";
-
-import styles from "./TooltipButton.css";
-
-interface Props extends ButtonHTMLAttributes {
- active?: boolean;
- className?: string;
- toggleVisibility: () => void;
-
- /** Internal: Forwarded Ref */
- forwardRef?: Ref;
- "aria-label": string;
-}
-
-const TooltipButton: FunctionComponent = ({
- active,
- className,
- toggleVisibility,
- forwardRef,
- "aria-label": ariaLabel,
-}) => (
- {
- evt.stopPropagation();
- toggleVisibility();
- }}
- aria-label={ariaLabel}
- ref={forwardRef}
- >
- info
-
-);
-
-const enhanced = withForwardRef(TooltipButton);
-export type TooltipButtonProps = PropTypesOf;
-export default enhanced;
diff --git a/src/core/client/ui/components/Tooltip/index.ts b/src/core/client/ui/components/Tooltip/index.ts
deleted file mode 100644
index cb15bc14c..000000000
--- a/src/core/client/ui/components/Tooltip/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default, default as Tooltip } from "./Tooltip";
-export { default as TooltipButton } from "./TooltipButton";
diff --git a/src/core/client/ui/components/TrapFocus/README.mdx b/src/core/client/ui/components/TrapFocus/README.mdx
deleted file mode 100644
index 46df2907a..000000000
--- a/src/core/client/ui/components/TrapFocus/README.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-name: TrapFocus
-menu: UI Kit v1
----
-
-import { Playground } from 'docz'
-import TrapFocus from './TrapFocus'
-import Button from '../Button'
-
-# TrapFocus
-
-Traps focus inside component when using keyboard navigation for accessibility purposes.
-
-## Basic usage
-
-
-
-
- {({firstFocusableRef, lastFocusableRef}) =>
-
-
-
-
- }
-
-
-
- warning
-
- Hello World
-
-`;
diff --git a/src/core/client/ui/components/ValidationMessage/index.ts b/src/core/client/ui/components/ValidationMessage/index.ts
deleted file mode 100644
index 6fb76fcbc..000000000
--- a/src/core/client/ui/components/ValidationMessage/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default, ValidationMessageProps } from "./ValidationMessage";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
deleted file mode 100644
index 09345e163..000000000
--- a/src/core/client/ui/components/index.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-export { default as AbsoluteTime } from "./AbsoluteTime";
-export { default as BaseButton } from "./BaseButton";
-export { default as Button } from "./Button";
-export { default as Backdrop } from "./Backdrop";
-export { default as ButtonIcon } from "./Button/ButtonIcon";
-export { default as Typography } from "./Typography";
-export { default as Popover } from "./Popover";
-export { default as RelativeTime } from "./RelativeTime";
-export {
- default as UIContext,
- UIContextProps,
- useUIContext,
-} from "./UIContext";
-export { default as Flex } from "./Flex";
-export { default as MatchMedia } from "./MatchMedia";
-export { default as TrapFocus } from "./TrapFocus";
-export { default as ValidationMessage } from "./ValidationMessage";
-export { default as InputLabel } from "./InputLabel";
-export { default as TextField } from "./TextField";
-export { default as CallOut } from "./CallOut";
-export { default as ClickOutside } from "./ClickOutside";
-export { default as Popup } from "./Popup";
-export { default as FormField } from "./FormField";
-export { default as InputDescription } from "./InputDescription";
-export { default as Spinner } from "./Spinner";
-export { default as FieldSet } from "./FieldSet";
-export { default as HorizontalGutter } from "./HorizontalGutter";
-export { default as Icon } from "./Icon";
-export { default as AriaInfo } from "./AriaInfo";
-export { default as Message, MessageIcon } from "./Message";
-export { Tab, TabBar, TabContent, TabPane } from "./Tabs";
-export { StepBar, Step } from "./Steps";
-export { SelectField, Option, OptGroup } from "./SelectField";
-export { default as TextLink } from "./TextLink";
-export { default as Timestamp } from "./Timestamp";
-export { default as CheckBox } from "./CheckBox";
-export { default as RadioButton } from "./RadioButton";
-export { default as Delay } from "./Delay";
-export { default as Box } from "./Box";
-export { default as Tooltip, TooltipButton } from "./Tooltip";
-export {
- AppBar,
- Begin as AppBarBegin,
- End as AppBarEnd,
- Divider as AppBarDivider,
- Navigation as AppBarNavigation,
- NavigationItem as AppBarNavigationItem,
-} from "./AppBar";
-export { CheckIcon } from "./Check";
-export {
- SubBar,
- Navigation as SubBarNavigation,
- NavigationItem as SubBarNavigationItem,
-} from "./SubBar";
-export { BrandName, BrandMark, LogoHorizontal } from "./Brand";
-export { default as Counter } from "./Counter";
-export { Marker, Count as MarkerCount } from "./Marker";
-export { default as Card, CardCloseButton } from "./Card";
-export { default as PasswordField } from "./PasswordField";
-export { TileSelector, Option as TileOption } from "./TileSelector";
-export {
- Dropdown,
- Divider as DropdownDivider,
- Button as DropdownButton,
-} from "./Dropdown";
-export { Table, TableBody, TableHead, TableRow, TableCell } from "./Table";
-export { default as Tag } from "./Tag";
-export { default as Modal } from "./Modal";
diff --git a/src/core/client/ui/components/v2/AppBar/AppBar.css b/src/core/client/ui/components/v2/AppBar/AppBar.css
index 300b9e089..a01949f04 100644
--- a/src/core/client/ui/components/v2/AppBar/AppBar.css
+++ b/src/core/client/ui/components/v2/AppBar/AppBar.css
@@ -1,8 +1,8 @@
-$mainNavBackgroundDefaultColor: var(--v2-colors-pure-white);
+$mainNavBackgroundDefaultColor: $colors-pure-white;
.root {
background-color: $mainNavBackgroundDefaultColor;
- border-bottom: 1px solid var(--v2-palette-divider);
+ border-bottom: 1px solid var(--palette-divider);
}
.container {
diff --git a/src/core/client/ui/components/v2/AppBar/AppBar.tsx b/src/core/client/ui/components/v2/AppBar/AppBar.tsx
index 2fa21fbc1..7fae8705b 100644
--- a/src/core/client/ui/components/v2/AppBar/AppBar.tsx
+++ b/src/core/client/ui/components/v2/AppBar/AppBar.tsx
@@ -1,7 +1,7 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
import { withStyles } from "coral-ui/hocs";
import styles from "./AppBar.css";
diff --git a/src/core/client/ui/components/v2/AppBar/Begin.tsx b/src/core/client/ui/components/v2/AppBar/Begin.tsx
index 9f66f2dfc..3f00c1eca 100644
--- a/src/core/client/ui/components/v2/AppBar/Begin.tsx
+++ b/src/core/client/ui/components/v2/AppBar/Begin.tsx
@@ -1,7 +1,7 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
import { withStyles } from "coral-ui/hocs";
import { PropTypesOf } from "coral-ui/types";
diff --git a/src/core/client/ui/components/v2/AppBar/Divider.css b/src/core/client/ui/components/v2/AppBar/Divider.css
index e65a81acf..07df553f4 100644
--- a/src/core/client/ui/components/v2/AppBar/Divider.css
+++ b/src/core/client/ui/components/v2/AppBar/Divider.css
@@ -1,4 +1,4 @@
-$mainNavDividerColor: var(--v2-colors-grey-400);
+$mainNavDividerColor: var(--palette-grey-400);
.root {
height: 32px;
diff --git a/src/core/client/ui/components/v2/AppBar/End.tsx b/src/core/client/ui/components/v2/AppBar/End.tsx
index 828019543..e7069375d 100644
--- a/src/core/client/ui/components/v2/AppBar/End.tsx
+++ b/src/core/client/ui/components/v2/AppBar/End.tsx
@@ -1,7 +1,7 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
import { withStyles } from "coral-ui/hocs";
import { PropTypesOf } from "coral-ui/types";
diff --git a/src/core/client/ui/components/v2/AppBar/NavigationItem.css b/src/core/client/ui/components/v2/AppBar/NavigationItem.css
index c517e483c..ca79336a1 100644
--- a/src/core/client/ui/components/v2/AppBar/NavigationItem.css
+++ b/src/core/client/ui/components/v2/AppBar/NavigationItem.css
@@ -1,17 +1,17 @@
-$main-nav-text: var(--v2-colors-mono-100);
-$main-nav-background: var(--v2-colors-pure-white);
-$main-nav-hover-background: var(--v2-colors-coral-200);
-$main-nav-active-background: var(--v2-colors-coral-500);
-$main-nav-active-text: var(--v2-colors-pure-white);
-$main-nav-hover-text: var(--v2-colors-mono-500);
+$main-nav-text: var(--palette-text-100);
+$main-nav-background: $colors-pure-white;
+$main-nav-hover-background: $colors-coral-200;
+$main-nav-active-background: $colors-coral-500;
+$main-nav-active-text: $colors-pure-white;
+$main-nav-hover-text: var(--palette-text-500);
.root {
}
.anchor {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-semi-bold);
- font-size: var(--v2-font-size-3);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-size: var(--font-size-3);
text-transform: uppercase;
color: $main-nav-text;
@@ -29,9 +29,9 @@ $main-nav-hover-text: var(--v2-colors-mono-500);
}
.active {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-bold);
- font-size: var(--v2-font-size-3);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-bold);
+ font-size: var(--font-size-3);
text-transform: uppercase;
background-color: $main-nav-active-background;
diff --git a/src/core/client/ui/components/v2/AppNotification/AppNotification.css b/src/core/client/ui/components/v2/AppNotification/AppNotification.css
index 3da3fe913..808132a24 100644
--- a/src/core/client/ui/components/v2/AppNotification/AppNotification.css
+++ b/src/core/client/ui/components/v2/AppNotification/AppNotification.css
@@ -1,8 +1,8 @@
.root {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-bold);
- line-height: var(--v2-line-height-min);
- padding: var(--v2-spacing-2);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-bold);
+ line-height: var(--line-height-min);
+ padding: var(--spacing-2);
}
.inner {
@@ -11,5 +11,5 @@
}
.success {
- background-color: var(--v2-colors-green-300);
+ background-color: var(--palette-success-300);
}
diff --git a/src/core/client/ui/components/v2/Box/Box.css b/src/core/client/ui/components/v2/Box/Box.css
index 647068f01..6fb665fbe 100644
--- a/src/core/client/ui/components/v2/Box/Box.css
+++ b/src/core/client/ui/components/v2/Box/Box.css
@@ -4,237 +4,237 @@
/* Margin */
.ml-1 {
- margin-left: var(--v2-spacing-1) !important;
+ margin-left: var(--spacing-1) !important;
}
.mr-1 {
- margin-right: var(--v2-spacing-1) !important;
+ margin-right: var(--spacing-1) !important;
}
.mt-1 {
- margin-top: var(--v2-spacing-1) !important;
+ margin-top: var(--spacing-1) !important;
}
.mb-1 {
- margin-bottom: var(--v2-spacing-1) !important;
+ margin-bottom: var(--spacing-1) !important;
}
.ml-2 {
- margin-left: var(--v2-spacing-2) !important;
+ margin-left: var(--spacing-2) !important;
}
.mr-2 {
- margin-right: var(--v2-spacing-2) !important;
+ margin-right: var(--spacing-2) !important;
}
.mt-2 {
- margin-top: var(--v2-spacing-2) !important;
+ margin-top: var(--spacing-2) !important;
}
.mb-2 {
- margin-bottom: var(--v2-spacing-2) !important;
+ margin-bottom: var(--spacing-2) !important;
}
.ml-3 {
- margin-left: var(--v2-spacing-3) !important;
+ margin-left: var(--spacing-3) !important;
}
.mr-3 {
- margin-right: var(--v2-spacing-3) !important;
+ margin-right: var(--spacing-3) !important;
}
.mt-3 {
- margin-top: var(--v2-spacing-3) !important;
+ margin-top: var(--spacing-3) !important;
}
.mb-3 {
- margin-bottom: var(--v2-spacing-3) !important;
+ margin-bottom: var(--spacing-3) !important;
}
.ml-4 {
- margin-left: var(--v2-spacing-4) !important;
+ margin-left: var(--spacing-4) !important;
}
.mr-4 {
- margin-right: var(--v2-spacing-4) !important;
+ margin-right: var(--spacing-4) !important;
}
.mt-4 {
- margin-top: var(--v2-spacing-4) !important;
+ margin-top: var(--spacing-4) !important;
}
.mb-4 {
- margin-bottom: var(--v2-spacing-4) !important;
+ margin-bottom: var(--spacing-4) !important;
}
.ml-5 {
- margin-left: var(--v2-spacing-5) !important;
+ margin-left: var(--spacing-5) !important;
}
.mr-5 {
- margin-right: var(--v2-spacing-5) !important;
+ margin-right: var(--spacing-5) !important;
}
.mt-5 {
- margin-top: var(--v2-spacing-5) !important;
+ margin-top: var(--spacing-5) !important;
}
.mb-5 {
- margin-bottom: var(--v2-spacing-5) !important;
+ margin-bottom: var(--spacing-5) !important;
}
.ml-6 {
- margin-left: var(--v2-spacing-6) !important;
+ margin-left: var(--spacing-6) !important;
}
.mr-6 {
- margin-right: var(--v2-spacing-6) !important;
+ margin-right: var(--spacing-6) !important;
}
.mt-6 {
- margin-top: var(--v2-spacing-6) !important;
+ margin-top: var(--spacing-6) !important;
}
.mb-6 {
- margin-bottom: var(--v2-spacing-6) !important;
+ margin-bottom: var(--spacing-6) !important;
}
.ml-7 {
- margin-left: var(--v2-spacing-7) !important;
+ margin-left: var(--spacing-7) !important;
}
.mr-7 {
- margin-right: var(--v2-spacing-7) !important;
+ margin-right: var(--spacing-7) !important;
}
.mt-7 {
- margin-top: var(--v2-spacing-7) !important;
+ margin-top: var(--spacing-7) !important;
}
.mb-7 {
- margin-bottom: var(--v2-spacing-7) !important;
+ margin-bottom: var(--spacing-7) !important;
}
.ml-8 {
- margin-left: var(--v2-spacing-8) !important;
+ margin-left: var(--spacing-8) !important;
}
.mr-8 {
- margin-right: var(--v2-spacing-8) !important;
+ margin-right: var(--spacing-8) !important;
}
.mt-8 {
- margin-top: var(--v2-spacing-8) !important;
+ margin-top: var(--spacing-8) !important;
}
.mb-8 {
- margin-bottom: var(--v2-spacing-8) !important;
+ margin-bottom: var(--spacing-8) !important;
}
.ml-9 {
- margin-left: var(--v2-spacing-9) !important;
+ margin-left: var(--spacing-9) !important;
}
.mr-9 {
- margin-right: var(--v2-spacing-9) !important;
+ margin-right: var(--spacing-9) !important;
}
.mt-9 {
- margin-top: var(--v2-spacing-9) !important;
+ margin-top: var(--spacing-9) !important;
}
.mb-9 {
- margin-bottom: var(--v2-spacing-9) !important;
+ margin-bottom: var(--spacing-9) !important;
}
/* Padding */
.pl-1 {
- padding-left: var(--v2-spacing-1) !important;
+ padding-left: var(--spacing-1) !important;
}
.pr-1 {
- padding-right: var(--v2-spacing-1) !important;
+ padding-right: var(--spacing-1) !important;
}
.pt-1 {
- padding-top: var(--v2-spacing-1) !important;
+ padding-top: var(--spacing-1) !important;
}
.pb-1 {
- padding-bottom: var(--v2-spacing-1) !important;
+ padding-bottom: var(--spacing-1) !important;
}
.pl-2 {
- padding-left: var(--v2-spacing-2) !important;
+ padding-left: var(--spacing-2) !important;
}
.pr-2 {
- padding-right: var(--v2-spacing-2) !important;
+ padding-right: var(--spacing-2) !important;
}
.pt-2 {
- padding-top: var(--v2-spacing-2) !important;
+ padding-top: var(--spacing-2) !important;
}
.pb-2 {
- padding-bottom: var(--v2-spacing-2) !important;
+ padding-bottom: var(--spacing-2) !important;
}
.pl-3 {
- padding-left: var(--v2-spacing-3) !important;
+ padding-left: var(--spacing-3) !important;
}
.pr-3 {
- padding-right: var(--v2-spacing-3) !important;
+ padding-right: var(--spacing-3) !important;
}
.pt-3 {
- padding-top: var(--v2-spacing-3) !important;
+ padding-top: var(--spacing-3) !important;
}
.pb-3 {
- padding-bottom: var(--v2-spacing-3) !important;
+ padding-bottom: var(--spacing-3) !important;
}
.pl-4 {
- padding-left: var(--v2-spacing-4) !important;
+ padding-left: var(--spacing-4) !important;
}
.pr-4 {
- padding-right: var(--v2-spacing-4) !important;
+ padding-right: var(--spacing-4) !important;
}
.pt-4 {
- padding-top: var(--v2-spacing-4) !important;
+ padding-top: var(--spacing-4) !important;
}
.pb-4 {
- padding-bottom: var(--v2-spacing-4) !important;
+ padding-bottom: var(--spacing-4) !important;
}
.pl-5 {
- padding-left: var(--v2-spacing-5) !important;
+ padding-left: var(--spacing-5) !important;
}
.pr-5 {
- padding-right: var(--v2-spacing-5) !important;
+ padding-right: var(--spacing-5) !important;
}
.pt-5 {
- padding-top: var(--v2-spacing-5) !important;
+ padding-top: var(--spacing-5) !important;
}
.pb-5 {
- padding-bottom: var(--v2-spacing-5) !important;
+ padding-bottom: var(--spacing-5) !important;
}
.pl-6 {
- padding-left: var(--v2-spacing-6) !important;
+ padding-left: var(--spacing-6) !important;
}
.pr-6 {
- padding-right: var(--v2-spacing-6) !important;
+ padding-right: var(--spacing-6) !important;
}
.pt-6 {
- padding-top: var(--v2-spacing-6) !important;
+ padding-top: var(--spacing-6) !important;
}
.pb-6 {
- padding-bottom: var(--v2-spacing-6) !important;
+ padding-bottom: var(--spacing-6) !important;
}
.pl-7 {
- padding-left: var(--v2-spacing-7) !important;
+ padding-left: var(--spacing-7) !important;
}
.pr-7 {
- padding-right: var(--v2-spacing-7) !important;
+ padding-right: var(--spacing-7) !important;
}
.pt-7 {
- padding-top: var(--v2-spacing-7) !important;
+ padding-top: var(--spacing-7) !important;
}
.pb-7 {
- padding-bottom: var(--v2-spacing-7) !important;
+ padding-bottom: var(--spacing-7) !important;
}
.pl-8 {
- padding-left: var(--v2-spacing-8) !important;
+ padding-left: var(--spacing-8) !important;
}
.pr-8 {
- padding-right: var(--v2-spacing-8) !important;
+ padding-right: var(--spacing-8) !important;
}
.pt-8 {
- padding-top: var(--v2-spacing-8) !important;
+ padding-top: var(--spacing-8) !important;
}
.pb-8 {
- padding-bottom: var(--v2-spacing-8) !important;
+ padding-bottom: var(--spacing-8) !important;
}
.pl-9 {
- padding-left: var(--v2-spacing-9) !important;
+ padding-left: var(--spacing-9) !important;
}
.pr-9 {
- padding-right: var(--v2-spacing-9) !important;
+ padding-right: var(--spacing-9) !important;
}
.pt-9 {
- padding-top: var(--v2-spacing-9) !important;
+ padding-top: var(--spacing-9) !important;
}
.pb-9 {
- padding-bottom: var(--v2-spacing-9) !important;
+ padding-bottom: var(--spacing-9) !important;
}
diff --git a/src/core/client/ui/components/v2/Box/Box.tsx b/src/core/client/ui/components/v2/Box/Box.tsx
index 35e5c29f2..0adc408d8 100644
--- a/src/core/client/ui/components/v2/Box/Box.tsx
+++ b/src/core/client/ui/components/v2/Box/Box.tsx
@@ -7,7 +7,7 @@ import React, {
} from "react";
import { withForwardRef, withStyles } from "coral-ui/hocs";
-import { Spacing } from "coral-ui/theme/variables";
+import { Spacing } from "coral-ui/theme/sharedVariables";
import styles from "./Box.css";
diff --git a/src/core/client/ui/components/v2/Brand/BrandName.css b/src/core/client/ui/components/v2/Brand/BrandName.css
index ae2712900..17865046a 100644
--- a/src/core/client/ui/components/v2/Brand/BrandName.css
+++ b/src/core/client/ui/components/v2/Brand/BrandName.css
@@ -2,9 +2,9 @@
margin: 0;
- font-weight: var(--v2-font-weight-secondary-bold);
- font-family: var(--v2-font-family-secondary);
- color: var(--v2-colors-coral-500);
+ font-weight: var(--font-weight-secondary-bold);
+ font-family: var(--font-family-secondary);
+ color: $colors-coral-500;
font-size: 1.15rem;
line-height: 1.15rem;
diff --git a/src/core/client/ui/components/v2/Button/Button.css b/src/core/client/ui/components/v2/Button/Button.css
index 884f8876e..5d80d2ec4 100644
--- a/src/core/client/ui/components/v2/Button/Button.css
+++ b/src/core/client/ui/components/v2/Button/Button.css
@@ -1,126 +1,126 @@
/* Design tokens */
/* flat button */
-$button-flat-regular-foreground: var(--v2-colors-teal-600);
-$button-flat-mono-foreground: var(--v2-colors-grey-500);
-$button-flat-alert-foreground: var(--v2-colors-red-500);
-$button-flat-alt-foreground: var(--v2-colors-green-500);
-$button-flat-dark-foreground: var(--v2-colors-blue-500);
+$button-flat-regular-foreground: $colors-teal-600;
+$button-flat-mono-foreground: var(--palette-grey-500);
+$button-flat-alert-foreground: var(--palette-error-500);
+$button-flat-alt-foreground: var(--palette-success-500);
+$button-flat-dark-foreground: $colors-teal-900;
-$button-flat-background: var(--v2-colors-pure-white);
+$button-flat-background: inherit;
-$button-flat-regular-background-hover: var(--v2-colors-teal-100);
-$button-flat-mono-background-hover: var(--v2-colors-grey-200);
-$button-flat-alert-background-hover: var(--v2-colors-red-100);
-$button-flat-alt-background-hover: var(--v2-colors-green-100);
-$button-flat-dark-background-hover: var(--v2-colors-blue-100);
+$button-flat-regular-background-hover: $colors-teal-100;
+$button-flat-mono-background-hover: var(--palette-grey-200);
+$button-flat-alert-background-hover: var(--palette-error-100);
+$button-flat-alt-background-hover: var(--palette-success-100);
+$button-flat-dark-background-hover: $colors-teal-100;
-$button-flat-regular-background-active: var(--v2-colors-teal-200);
-$button-flat-mono-background-active: var(--v2-colors-grey-300);
-$button-flat-alert-background-active: var(--v2-colors-red-200);
-$button-flat-alt-background-active: var(--v2-colors-green-200);
-$button-flat-dark-background-active: var(--v2-colors-blue-200);
+$button-flat-regular-background-active: $colors-teal-200;
+$button-flat-mono-background-active: var(--palette-grey-300);
+$button-flat-alert-background-active: var(--palette-error-200);
+$button-flat-alt-background-active: var(--palette-success-200);
+$button-flat-dark-background-active: $colors-teal-200;
-$button-flat-foreground-disabled: var(--v2-colors-grey-400);
+$button-flat-foreground-disabled: var(--palette-grey-400);
/* regular button */
-$button-regular-foreground: var(--v2-colors-pure-white);
+$button-regular-foreground: var(--palette-text-000);
-$button-regular-regular-background: var(--v2-colors-teal-600);
-$button-regular-mono-background: var(--v2-colors-grey-500);
-$button-regular-alert-background: var(--v2-colors-red-500);
-$button-regular-alt-background: var(--v2-colors-green-500);
-$button-regular-dark-background: var(--v2-colors-blue-500);
-$button-regular-stream-background: var(--v2-colors-stream-blue-500);
+$button-regular-regular-background: $colors-teal-600;
+$button-regular-mono-background: var(--palette-grey-500);
+$button-regular-alert-background: var(--palette-error-500);
+$button-regular-alt-background: var(--palette-success-500);
+$button-regular-dark-background: $colors-teal-900;
+$button-regular-stream-background: var(--palette-primary-500);
-$button-regular-regular-background-hover: var(--v2-colors-teal-700);
-$button-regular-mono-background-hover: var(--v2-colors-grey-600);
-$button-regular-alert-background-hover: var(--v2-colors-red-600);
-$button-regular-alt-background-hover: var(--v2-colors-green-600);
-$button-regular-dark-background-hover: var(--v2-colors-blue-600);
-$button-regular-stream-background-hover: var(--v2-colors-stream-blue-600);
+$button-regular-regular-background-hover: $colors-teal-700;
+$button-regular-mono-background-hover: var(--palette-grey-600);
+$button-regular-alert-background-hover: var(--palette-error-600);
+$button-regular-alt-background-hover: var(--palette-success-600);
+$button-regular-dark-background-hover: $colors-teal-800;
+$button-regular-stream-background-hover: var(--palette-primary-600);
-$button-regular-regular-background-active: var(--v2-colors-teal-800);
-$button-regular-mono-background-active: var(--v2-colors-grey-700);
-$button-regular-alert-background-active: var(--v2-colors-red-700);
-$button-regular-alt-background-active: var(--v2-colors-green-700);
-$button-regular-dark-background-active: var(--v2-colors-blue-700);
-$button-regular-stream-background-active: var(--v2-colors-stream-blue-700);
+$button-regular-regular-background-active: $colors-teal-800;
+$button-regular-mono-background-active: var(--palette-grey-700);
+$button-regular-alert-background-active: var(--palette-error-700);
+$button-regular-alt-background-active: var(--palette-success-700);
+$button-regular-dark-background-active: $colors-teal-700;
+$button-regular-stream-background-active: var(--palette-primary-700);
-$button-regular-background-disabled: var(--v2-colors-grey-300);
-$button-regular-stream-background-disabled: var(--v2-colors-stream-blue-200);
+$button-regular-background-disabled: var(--palette-grey-300);
+$button-regular-stream-background-disabled: var(--palette-primary-200);
/* outline button */
-$button-outline-background: var(--v2-colors-pure-white);
-$button-outline-background-disabled: var(--v2-colors-grey-300);
-$button-outline-foreground-disabled: var(--v2-colors-pure-white);
-$button-outline-foreground-hover: var(--v2-colors-pure-white);
-$button-outline-foreground-active: var(--v2-colors-pure-white);
+$button-outline-background: inherit;
+$button-outline-background-disabled: var(--palette-grey-300);
+$button-outline-foreground-disabled: var(--palette-text-000);
+$button-outline-foreground-hover: var(--palette-text-000);
+$button-outline-foreground-active: var(--palette-text-000);
-$button-outline-regular-foreground: var(--v2-colors-teal-600);
-$button-outline-mono-foreground: var(--v2-colors-grey-500);
-$button-outline-alert-foreground: var(--v2-colors-red-500);
-$button-outline-alt-foreground: var(--v2-colors-green-500);
-$button-outline-dark-foreground: var(--v2-colors-blue-500);
-$button-outline-stream-foreground: var(--v2-colors-stream-blue-500);
+$button-outline-regular-foreground: $colors-teal-600;
+$button-outline-mono-foreground: var(--palette-grey-500);
+$button-outline-alert-foreground: var(--palette-error-500);
+$button-outline-alt-foreground: var(--palette-success-500);
+$button-outline-dark-foreground: $colors-teal-900;
+$button-outline-stream-foreground: var(--palette-primary-500);
-$button-outline-regular-border: var(--v2-colors-teal-600);
-$button-outline-mono-border: var(--v2-colors-grey-500);
-$button-outline-alert-border: var(--v2-colors-red-500);
-$button-outline-alt-border: var(--v2-colors-green-500);
-$button-outline-dark-border: var(--v2-colors-blue-500);
-$button-outline-stream-border: var(--v2-colors-stream-blue-500);
+$button-outline-regular-border: $colors-teal-600;
+$button-outline-mono-border: var(--palette-grey-500);
+$button-outline-alert-border: var(--palette-error-500);
+$button-outline-alt-border: var(--palette-success-500);
+$button-outline-dark-border: $colors-teal-900;
+$button-outline-stream-border: var(--palette-primary-500);
-$button-outline-regular-background-hover: var(--v2-colors-teal-600);
-$button-outline-mono-background-hover: var(--v2-colors-grey-500);
-$button-outline-alert-background-hover: var(--v2-colors-red-500);
-$button-outline-alt-background-hover: var(--v2-colors-green-500);
-$button-outline-dark-background-hover: var(--v2-colors-blue-500);
-$button-outline-stream-background-hover: var(--v2-colors-stream-blue-500);
+$button-outline-regular-background-hover: $colors-teal-600;
+$button-outline-mono-background-hover: var(--palette-grey-500);
+$button-outline-alert-background-hover: var(--palette-error-500);
+$button-outline-alt-background-hover: var(--palette-success-500);
+$button-outline-dark-background-hover: $colors-teal-900;
+$button-outline-stream-background-hover: var(--palette-primary-500);
-$button-outline-regular-background-active: var(--v2-colors-teal-800);
-$button-outline-mono-background-active: var(--v2-colors-grey-700);
-$button-outline-alert-background-active: var(--v2-colors-red-700);
-$button-outline-alt-background-active: var(--v2-colors-green-700);
-$button-outline-dark-background-active: var(--v2-colors-blue-700);
-$button-outline-stream-background-active: var(--v2-colors-stream-blue-500);
+$button-outline-regular-background-active: $colors-teal-800;
+$button-outline-mono-background-active: var(--palette-grey-700);
+$button-outline-alert-background-active: var(--palette-error-700);
+$button-outline-alt-background-active: var(--palette-success-700);
+$button-outline-dark-background-active: $colors-teal-700;
+$button-outline-stream-background-active: var(--palette-primary-500);
-$button-outline-regular-border-active: var(--v2-colors-teal-800);
-$button-outline-mono-border-active: var(--v2-colors-grey-700);
-$button-outline-alert-border-active: var(--v2-colors-red-700);
-$button-outline-alt-border-active: var(--v2-colors-green-700);
-$button-outline-dark-border-active: var(--v2-colors-blue-700);
-$button-outline-stream-border-active: var(--v2-colors-stream-blue-500);
+$button-outline-regular-border-active: $colors-teal-800;
+$button-outline-mono-border-active: var(--palette-grey-700);
+$button-outline-alert-border-active: var(--palette-error-700);
+$button-outline-alt-border-active: var(--palette-success-700);
+$button-outline-dark-border-active: $colors-teal-700;
+$button-outline-stream-border-active: var(--palette-primary-500);
/* text button */
$button-text-background: transparent;
-$button-text-foreground-disabled: var(--v2-colors-pure-white);
+$button-text-foreground-disabled: var(--palette-text-000);
-$button-text-regular-foreground: var(--v2-colors-teal-600);
-$button-text-mono-foreground: var(--v2-colors-grey-500);
-$button-text-alert-foreground: var(--v2-colors-red-500);
-$button-text-alt-foreground: var(--v2-colors-green-500);
-$button-text-dark-foreground: var(--v2-colors-blue-500);
-$button-text-stream-foreground: var(--v2-colors-stream-blue-500);
+$button-text-regular-foreground: $colors-teal-600;
+$button-text-mono-foreground: var(--palette-grey-500);
+$button-text-alert-foreground: var(--palette-error-500);
+$button-text-alt-foreground: var(--palette-success-500);
+$button-text-dark-foreground: $colors-teal-900;
+$button-text-stream-foreground: var(--palette-primary-500);
-$button-text-regular-foreground-hover: var(--v2-colors-teal-700);
-$button-text-mono-foreground-hover: var(--v2-colors-grey-600);
-$button-text-alert-foreground-hover: var(--v2-colors-red-600);
-$button-text-alt-foreground-hover: var(--v2-colors-green-600);
-$button-text-dark-foreground-hover: var(--v2-colors-blue-600);
-$button-text-stream-foreground-hover: var(--v2-colors-stream-blue-700);
+$button-text-regular-foreground-hover: $colors-teal-700;
+$button-text-mono-foreground-hover: var(--palette-grey-600);
+$button-text-alert-foreground-hover: var(--palette-error-600);
+$button-text-alt-foreground-hover: var(--palette-success-600);
+$button-text-dark-foreground-hover: $colors-teal-800;
+$button-text-stream-foreground-hover: var(--palette-primary-700);
-$button-text-regular-foreground-active: var(--v2-colors-teal-800);
-$button-text-mono-foreground-active: var(--v2-colors-grey-700);
-$button-text-alert-foreground-active: var(--v2-colors-red-700);
-$button-text-alt-foreground-active: var(--v2-colors-green-700);
-$button-text-dark-foreground-active: var(--v2-colors-blue-700);
-$button-text-stream-foreground-active: var(--v2-colors-stream-blue-700);
+$button-text-regular-foreground-active: $colors-teal-800;
+$button-text-mono-foreground-active: var(--palette-grey-700);
+$button-text-alert-foreground-active: var(--palette-error-700);
+$button-text-alt-foreground-active: var(--palette-success-700);
+$button-text-dark-foreground-active: $colors-teal-700;
+$button-text-stream-foreground-active: var(--palette-primary-700);
/* Class Definitions */
.root {
- border-radius: var(--v2-round-corners);
+ border-radius: var(--round-corners);
background-color: transparent;
position: relative;
display: inline-flex;
@@ -131,12 +131,12 @@ $button-text-stream-foreground-active: var(--v2-colors-stream-blue-700);
transition: 0.2s ease-out background-color;
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-bold);
- line-height: var(--v2-line-height-reset);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-bold);
+ line-height: var(--line-height-3);
& > * {
- margin: 0 var(--v2-spacing-1) 0 0;
+ margin: 0 var(--spacing-1) 0 0;
/* convince safari */
align-self: center;
}
@@ -145,11 +145,11 @@ $button-text-stream-foreground-active: var(--v2-colors-stream-blue-700);
}
&.iconLeft i {
- padding-right: var(--v2-spacing-1);
+ padding-right: var(--spacing-1);
}
&.iconRight i {
- padding-left: var(--v2-spacing-1);
+ padding-left: var(--spacing-1);
}
}
@@ -180,37 +180,37 @@ $button-text-stream-foreground-active: var(--v2-colors-stream-blue-700);
}
.sizeSmall {
- font-size: var(--v2-font-size-1);
+ font-size: var(--font-size-1);
&:not(.variantText) {
- padding: var(--v2-spacing-1) var(--v2-spacing-2);
+ padding: var(--spacing-1) var(--spacing-2);
&.iconLeft,
&.iconRight {
- padding-left: var(--v2-spacing-2);
- padding-right: var(--v2-spacing-2);
+ padding-left: var(--spacing-2);
+ padding-right: var(--spacing-2);
}
}
}
.sizeRegular {
- font-size: var(--v2-font-size-1);
+ font-size: var(--font-size-1);
&:not(.variantText) {
- padding: var(--v2-spacing-2) var(--v2-spacing-3);
+ padding: var(--spacing-2) var(--spacing-3);
&.iconLeft,
&.iconRight {
- padding-left: var(--v2-spacing-2);
- padding-right: var(--v2-spacing-2);
+ padding-left: var(--spacing-2);
+ padding-right: var(--spacing-2);
}
}
}
.sizeLarge {
- font-size: var(--v2-font-size-2);
+ font-size: var(--font-size-2);
&:not(.variantText) {
- padding: var(--v2-spacing-3) var(--v2-spacing-5);
+ padding: var(--spacing-3) var(--spacing-5);
&.iconLeft,
&.iconRight {
- padding-left: var(--v2-spacing-4);
- padding-right: var(--v2-spacing-4);
+ padding-left: var(--spacing-4);
+ padding-right: var(--spacing-4);
}
}
}
@@ -640,8 +640,8 @@ $button-text-stream-foreground-active: var(--v2-colors-stream-blue-700);
}
.variantTextUnderlined {
- font-weight: var(--v2-font-weight-primary-bold);
- font-family: var(--v2-font-family-primary);
+ font-weight: var(--font-weight-primary-bold);
+ font-family: var(--font-family-primary);
text-decoration: underline;
&.colorRegular {
diff --git a/src/core/client/ui/components/v2/CallOut/CallOut.css b/src/core/client/ui/components/v2/CallOut/CallOut.css
index aadab72e5..2460aa8ce 100644
--- a/src/core/client/ui/components/v2/CallOut/CallOut.css
+++ b/src/core/client/ui/components/v2/CallOut/CallOut.css
@@ -1,16 +1,16 @@
-$callout-regular-bg: var(--v2-colors-grey-100);
-$callout-regular-text: var(--v2-colors-mono-500);
-$callout-regular-border: var(--v2-colors-grey-300);
+$callout-regular-bg: var(--palette-grey-100);
+$callout-regular-text: var(--palette-text-500);
+$callout-regular-border: var(--palette-grey-300);
.root {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
- font-size: var(--v2-font-size-2);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
+ font-size: var(--font-size-2);
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
- padding: var(--v2-spacing-4);
+ padding: var(--spacing-4);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
@@ -28,21 +28,21 @@ $callout-regular-border: var(--v2-colors-grey-300);
}
.colorPrimary {
- background-color: var(--palette-primary-lightest);
- border-color: var(--palette-primary-light);
- color: var(--palette-text-primary);
+ background-color: $colors-teal-100;
+ border-color: $colors-teal-300;
+ color: var(--palette-text-500);
}
.colorError {
- background-color: var(--palette-error-lightest);
- border-color: var(--palette-error-light);
- color: var(--palette-text-primary);
+ background-color: var(--palette-error-100);
+ border-color: var(--palette-error-300);
+ color: var(--palette-text-500);
}
.colorSuccess {
- background-color: var(--palette-success-lightest);
- border-color: var(--palette-success-light);
- color: var(--palette-text-primary);
+ background-color: var(--palette-success-100);
+ border-color: var(--palette-success-300);
+ color: var(--palette-text-500);
}
.fullWidth {
diff --git a/src/core/client/ui/components/v2/Card/Card.css b/src/core/client/ui/components/v2/Card/Card.css
index c19d02bed..1ff8acad4 100644
--- a/src/core/client/ui/components/v2/Card/Card.css
+++ b/src/core/client/ui/components/v2/Card/Card.css
@@ -1,11 +1,11 @@
.root {
position: relative;
- padding: var(--v2-spacing-4);
+ padding: var(--spacing-4);
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
border-radius: var(--round-corners);
- background-color: var(--palette-common-white);
+ background-color: $colors-pure-white;
/*
Fallback begin
diff --git a/src/core/client/ui/components/v2/CheckBox/CheckBox.css b/src/core/client/ui/components/v2/CheckBox/CheckBox.css
index b20ddde87..2dee87d8c 100644
--- a/src/core/client/ui/components/v2/CheckBox/CheckBox.css
+++ b/src/core/client/ui/components/v2/CheckBox/CheckBox.css
@@ -12,12 +12,12 @@
display: inline-block;
cursor: pointer;
user-select: none;
- padding-left: calc(var(--v2-spacing-3) + 14px);
- color: var(--v2-palette-input-label);
- font-size: var(--v2-font-size-3);
- font-weight: var(--v2-font-weight-primary-regular);
- font-family: var(--v2-font-family-primary);
- line-height: var(--v2-line-height-reset);
+ padding-left: calc(var(--spacing-3) + 14px);
+ color: var(--palette-text-500);
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-3);
}
.labelSpan {
@@ -25,7 +25,7 @@
}
.labelLight {
- color: var(--palette-text-light);
+ color: var(--palette-text-000);
}
/* Box. */
@@ -38,8 +38,8 @@
display: inline-block;
width: 14px;
height: 14px;
- background: var(--v2-palette-input-background);
- border: 1px solid var(--v2-palette-input-label);
+ background: var(--palette-background-input);
+ border: 1px solid var(--palette-text-500);
border-radius: 2px;
box-sizing: border-box;
}
@@ -52,17 +52,17 @@
/* Box checked */
input:checked.default + .label:before {
- background: var(--v2-palette-primary-main);
- border: 1px solid var(--v2-palette-primary-main);
+ background: $colors-teal-700;
+ border: 1px solid $colors-teal-700;
}
.input:checked.streamBlue + .label:before {
- background: var(--v2-colors-stream-blue-500);
- border: 1px solid var(--v2-colors-stream-blue-500);
+ background: var(--palette-primary-500);
+ border: 1px solid var(--palette-primary-500);
}
input:checked + .label {
- font-weight: var(--v2-font-weight-primary-bold);
+ font-weight: var(--font-weight-primary-bold);
}
/* Disabled state label. */
@@ -74,8 +74,8 @@ input:checked + .label {
/* Disabled box. */
.input:disabled + .label:before {
box-shadow: none;
- border: 1px solid var(--v2-palette-input-disabled-foreground);
- background: var(--v2-palette-input-disabled-background);
+ border: 1px solid var(--palette-text-input-disabled);
+ background: var(--palette-background-input-disabled);
}
/* Checkmark. Could be replaced with an image */
@@ -86,7 +86,7 @@ input:checked + .label {
top: 50%;
margin-top: -1px;
transform: translateY(-50%);
- color: var(--v2-palette-input-background);
+ color: var(--palette-background-input);
background: currentColor;
width: 2px;
height: 2px;
@@ -98,5 +98,5 @@ input:checked + .label {
}
.input:checked:disabled + .label:after {
- color: var(--v2-palette-input-disabled-foreground);
+ color: var(--palette-text-input-disabled);
}
diff --git a/src/core/client/ui/components/v2/CheckIcon/CheckIcon.css b/src/core/client/ui/components/v2/CheckIcon/CheckIcon.css
new file mode 100644
index 000000000..bb9d21a19
--- /dev/null
+++ b/src/core/client/ui/components/v2/CheckIcon/CheckIcon.css
@@ -0,0 +1,5 @@
+.base {
+ & path {
+ fill: var(--palette-success-500)
+ }
+}
diff --git a/src/core/client/ui/components/v2/CheckIcon/CheckIcon.tsx b/src/core/client/ui/components/v2/CheckIcon/CheckIcon.tsx
new file mode 100644
index 000000000..f4ba2a936
--- /dev/null
+++ b/src/core/client/ui/components/v2/CheckIcon/CheckIcon.tsx
@@ -0,0 +1,31 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./CheckIcon.css";
+
+interface Props {
+ className?: string;
+ classes: typeof styles;
+}
+
+const CheckIcon: FunctionComponent = ({
+ className,
+ classes,
+ ...rest
+}) => (
+
+);
+
+export default withStyles(styles)(CheckIcon);
diff --git a/src/core/client/ui/components/Check/README.mdx b/src/core/client/ui/components/v2/CheckIcon/README.mdx
similarity index 100%
rename from src/core/client/ui/components/Check/README.mdx
rename to src/core/client/ui/components/v2/CheckIcon/README.mdx
diff --git a/src/core/client/ui/components/v2/CheckIcon/index.ts b/src/core/client/ui/components/v2/CheckIcon/index.ts
new file mode 100644
index 000000000..75b53e2f3
--- /dev/null
+++ b/src/core/client/ui/components/v2/CheckIcon/index.ts
@@ -0,0 +1 @@
+export { default } from "./CheckIcon";
diff --git a/src/core/client/ui/components/v2/Counter/Counter.css b/src/core/client/ui/components/v2/Counter/Counter.css
index 5a21500c8..379ddfa0d 100644
--- a/src/core/client/ui/components/v2/Counter/Counter.css
+++ b/src/core/client/ui/components/v2/Counter/Counter.css
@@ -1,13 +1,13 @@
-$counterBadgeForegroundColor: var(--v2-colors-pure-white);
-$counterBadgeBackgroundDefaultColor: var(--v2-colors-grey-500);
-$counterBadgeBackgroundEmphasisColor: var(--v2-colors-grey-500);
-$counterBadgeBackgroundAlertColor: var(--v2-colors-grey-500);
+$counterBadgeForegroundColor: var(--palette-text-000);
+$counterBadgeBackgroundDefaultColor: var(--palette-grey-500);
+$counterBadgeBackgroundEmphasisColor: var(--palette-grey-500);
+$counterBadgeBackgroundAlertColor: var(--palette-grey-500);
.root {
- font-size: var(--v2-font-size-2);
- font-weight: var(--v2-font-weight-primary-bold);
- font-family: var(--v2-font-family-primary);
- line-height: var(--v2-line-height-reset);
+ font-size: var(--font-size-2);
+ font-weight: var(--font-weight-primary-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-3);
letter-spacing: calc(0.2em / 14);
border-radius: var(--round-corners);
padding: 1px 3px 1px 3px;
@@ -15,9 +15,9 @@ $counterBadgeBackgroundAlertColor: var(--v2-colors-grey-500);
}
.sizeSmall {
- font-size: var(--v2-font-size-1);
+ font-size: var(--font-size-1);
padding: 2px 3px;
- line-height: var(--v2-line-height-reset);
+ line-height: var(--line-height-3);
}
.text {
@@ -29,23 +29,23 @@ $counterBadgeBackgroundAlertColor: var(--v2-colors-grey-500);
}
.colorPrimary {
- background-color: var(--palette-primary-main);
+ background-color: $colors-teal-700;
}
.colorGrey {
- background-color: var(--palette-grey-lightest);
- box-shadow: inset 0px 0px 0px 1px var(--palette-grey-dark);
+ background-color: var(--palette-grey-200);
+ box-shadow: inset 0px 0px 0px 1px var(--palette-grey-600);
& .text {
- color: var(--palette-grey-dark);
+ color: var(--palette-grey-600);
}
}
.colorDark {
- background-color: var(--palette-grey-dark);
+ background-color: var(--palette-grey-600);
}
.colorError {
- background-color: var(--palette-error-darkest);
+ background-color: var(--palette-error-700);
}
.colorEmphasis {
diff --git a/src/core/client/ui/components/v2/Divider/Divider.css b/src/core/client/ui/components/v2/Divider/Divider.css
index 8599c35a4..b17373e3c 100644
--- a/src/core/client/ui/components/v2/Divider/Divider.css
+++ b/src/core/client/ui/components/v2/Divider/Divider.css
@@ -1,4 +1,4 @@
-$divider-border-color: var(--v2-colors-grey-300);
+$divider-border-color: var(--palette-grey-300);
.root {
border-top: 0;
@@ -7,17 +7,17 @@ $divider-border-color: var(--v2-colors-grey-300);
}
.spacing1 {
- margin: var(--v2-spacing-1) 0;
+ margin: var(--spacing-1) 0;
}
.spacing2 {
- margin: var(--v2-spacing-2) 0;
+ margin: var(--spacing-2) 0;
}
.spacing3 {
- margin: var(--v2-spacing-3) 0;
+ margin: var(--spacing-3) 0;
}
.spacing4 {
- margin: var(--v2-spacing-4) 0;
+ margin: var(--spacing-4) 0;
}
diff --git a/src/core/client/ui/components/v2/Dropdown/Button.css b/src/core/client/ui/components/v2/Dropdown/Button.css
index f3b974265..b8a8650a2 100644
--- a/src/core/client/ui/components/v2/Dropdown/Button.css
+++ b/src/core/client/ui/components/v2/Dropdown/Button.css
@@ -1,21 +1,21 @@
.root {
- font-size: var(--v2-font-size-3);
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
+ font-size: var(--font-size-3);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
display: flex;
justify-content: space-between;
align-items: center;
- padding: var(--v2-spacing-2);
+ padding: var(--spacing-2);
width: 100%;
text-align: left;
line-height: 1;
}
.anchor {
- color: var(--v2-palette-primary-main);
+ color: $colors-teal-700;
text-decoration: underline;
&:visited {
- color: var(--v2-palette-primary-main);
+ color: $colors-teal-700;
}
}
@@ -24,32 +24,32 @@
}
.root:not(:disabled):active {
- background-color: var(--v2-palette-primary-lightest);
+ background-color: $colors-teal-100;
}
.mouseHover {
- background-color: var(--v2-palette-primary-lightest);
+ background-color: $colors-teal-100;
}
.iconBefore {
display: flex;
justify-content: baseline;
align-items: center;
- color: var(--v2-palette-grey-main);
- margin-right: var(--v2-spacing-2);
+ color: var(--palette-grey-500);
+ margin-right: var(--spacing-2);
}
.iconAfter {
display: flex;
align-items: center;
justify-content: baseline;
- margin-left: var(--v2-spacing-2);
+ margin-left: var(--spacing-2);
text-decoration: unset;
}
.iconOpenInNew {
padding-top: 1px;
- color: var(--v2-palette-primary-main);
+ color: $colors-teal-700;
}
.blankAdornment {
- padding-right: var(--v2-spacing-6);
+ padding-right: var(--spacing-6);
}
diff --git a/src/core/client/ui/components/v2/Dropdown/Divider.css b/src/core/client/ui/components/v2/Dropdown/Divider.css
index 9e8bfecd3..80c966407 100644
--- a/src/core/client/ui/components/v2/Dropdown/Divider.css
+++ b/src/core/client/ui/components/v2/Dropdown/Divider.css
@@ -1,4 +1,4 @@
-$dropdownDividerBorderColor: var(--v2-colors-grey-300);
+$dropdownDividerBorderColor: var(--palette-grey-300);
.root {
border: 0;
diff --git a/src/core/client/ui/components/v2/DurationField/DurationField.css b/src/core/client/ui/components/v2/DurationField/DurationField.css
index d88b02a39..230324787 100644
--- a/src/core/client/ui/components/v2/DurationField/DurationField.css
+++ b/src/core/client/ui/components/v2/DurationField/DurationField.css
@@ -8,8 +8,8 @@
}
.unit {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-semi-bold);
- font-size: var(--v2-font-size-2);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-size: var(--font-size-2);
line-height: 36px;
}
diff --git a/src/core/client/ui/components/v2/DurationField/DurationField.tsx b/src/core/client/ui/components/v2/DurationField/DurationField.tsx
index 07457d12d..e778b4245 100644
--- a/src/core/client/ui/components/v2/DurationField/DurationField.tsx
+++ b/src/core/client/ui/components/v2/DurationField/DurationField.tsx
@@ -9,7 +9,7 @@ import React, {
} from "react";
import TIME from "coral-common/time";
-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
import { Option, SelectField } from "../SelectField";
import TextField, { TextFieldProps } from "../TextField";
diff --git a/src/core/client/ui/components/v2/Flex/Flex.css b/src/core/client/ui/components/v2/Flex/Flex.css
index bebac3e69..1e2ce97fc 100644
--- a/src/core/client/ui/components/v2/Flex/Flex.css
+++ b/src/core/client/ui/components/v2/Flex/Flex.css
@@ -7,21 +7,21 @@
.spacing-1 {
& > * {
- margin: 0 var(--v2-spacing-1) 0 0 !important;
+ margin: 0 var(--spacing-1) 0 0 !important;
}
&.directionRowReverse {
& > * {
- margin: 0 0 0 var(--v2-spacing-1) !important;
+ margin: 0 0 0 var(--spacing-1) !important;
}
}
&.directionColumn {
& > * {
- margin: 0 0 var(--v2-spacing-1) 0 !important;
+ margin: 0 0 var(--spacing-1) 0 !important;
}
}
&.directionColumnReverse {
& > * {
- margin: var(--v2-spacing-1) 0 0 0 !important;
+ margin: var(--spacing-1) 0 0 0 !important;
}
}
& > *:last-child {
@@ -31,21 +31,21 @@
.spacing-2 {
& > * {
- margin: 0 var(--v2-spacing-2) 0 0 !important;
+ margin: 0 var(--spacing-2) 0 0 !important;
}
&.directionRowReverse {
& > * {
- margin: 0 0 0 var(--v2-spacing-2) !important;
+ margin: 0 0 0 var(--spacing-2) !important;
}
}
&.directionColumn {
& > * {
- margin: 0 0 var(--v2-spacing-2) 0 !important;
+ margin: 0 0 var(--spacing-2) 0 !important;
}
}
&.directionColumnReverse {
& > * {
- margin: var(--v2-spacing-2) 0 0 0 !important;
+ margin: var(--spacing-2) 0 0 0 !important;
}
}
& > *:last-child {
@@ -55,21 +55,21 @@
.spacing-3 {
& > * {
- margin: 0 var(--v2-spacing-3) 0 0 !important;
+ margin: 0 var(--spacing-3) 0 0 !important;
}
&.directionRowReverse {
& > * {
- margin: 0 0 0 var(--v2-spacing-3) !important;
+ margin: 0 0 0 var(--spacing-3) !important;
}
}
&.directionColumn {
& > * {
- margin: 0 0 var(--v2-spacing-3) 0 !important;
+ margin: 0 0 var(--spacing-3) 0 !important;
}
}
&.directionColumnReverse {
& > * {
- margin: var(--v2-spacing-3) 0 0 0 !important;
+ margin: var(--spacing-3) 0 0 0 !important;
}
}
& > *:last-child {
@@ -79,21 +79,21 @@
.spacing-4 {
& > * {
- margin: 0 var(--v2-spacing-4) 0 0 !important;
+ margin: 0 var(--spacing-4) 0 0 !important;
}
&.directionRowReverse {
& > * {
- margin: 0 0 0 var(--v2-spacing-4) !important;
+ margin: 0 0 0 var(--spacing-4) !important;
}
}
&.directionColumn {
& > * {
- margin: 0 0 var(--v2-spacing-4) 0 !important;
+ margin: 0 0 var(--spacing-4) 0 !important;
}
}
&.directionColumnReverse {
& > * {
- margin: var(--v2-spacing-4) 0 0 0 !important;
+ margin: var(--spacing-4) 0 0 0 !important;
}
}
& > *:last-child {
@@ -103,21 +103,21 @@
.spacing-5 {
& > * {
- margin: 0 var(--v2-spacing-5) 0 0 !important;
+ margin: 0 var(--spacing-5) 0 0 !important;
}
&.directionRowReverse {
& > * {
- margin: 0 0 0 var(--v2-spacing-5) !important;
+ margin: 0 0 0 var(--spacing-5) !important;
}
}
&.directionColumn {
& > * {
- margin: 0 0 var(--v2-spacing-5) 0 !important;
+ margin: 0 0 var(--spacing-5) 0 !important;
}
}
&.directionColumnReverse {
& > * {
- margin: var(--v2-spacing-5) 0 0 0 !important;
+ margin: var(--spacing-5) 0 0 0 !important;
}
}
& > *:last-child {
@@ -127,21 +127,21 @@
.spacing-6 {
& > * {
- margin: 0 var(--v2-spacing-6) 0 0 !important;
+ margin: 0 var(--spacing-6) 0 0 !important;
}
&.directionRowReverse {
& > * {
- margin: 0 0 0 var(--v2-spacing-6) !important;
+ margin: 0 0 0 var(--spacing-6) !important;
}
}
&.directionColumn {
& > * {
- margin: 0 0 var(--v2-spacing-6) 0 !important;
+ margin: 0 0 var(--spacing-6) 0 !important;
}
}
&.directionColumnReverse {
& > * {
- margin: var(--v2-spacing-6) 0 0 0 !important;
+ margin: var(--spacing-6) 0 0 0 !important;
}
}
& > *:last-child {
@@ -151,21 +151,21 @@
.spacing-7 {
& > * {
- margin: 0 var(--v2-spacing-7) 0 0 !important;
+ margin: 0 var(--spacing-7) 0 0 !important;
}
&.directionRowReverse {
& > * {
- margin: 0 0 0 var(--v2-spacing-7) !important;
+ margin: 0 0 0 var(--spacing-7) !important;
}
}
&.directionColumn {
& > * {
- margin: 0 0 var(--v2-spacing-7) 0 !important;
+ margin: 0 0 var(--spacing-7) 0 !important;
}
}
&.directionColumnReverse {
& > * {
- margin: var(--v2-spacing-7) 0 0 0 !important;
+ margin: var(--spacing-7) 0 0 0 !important;
}
}
& > *:last-child {
@@ -175,21 +175,21 @@
.spacing-8 {
& > * {
- margin: 0 var(--v2-spacing-8) 0 0 !important;
+ margin: 0 var(--spacing-8) 0 0 !important;
}
&.directionRowReverse {
& > * {
- margin: 0 0 0 var(--v2-spacing-8) !important;
+ margin: 0 0 0 var(--spacing-8) !important;
}
}
&.directionColumn {
& > * {
- margin: 0 0 var(--v2-spacing-8) 0 !important;
+ margin: 0 0 var(--spacing-8) 0 !important;
}
}
&.directionColumnReverse {
& > * {
- margin: var(--v2-spacing-8) 0 0 0 !important;
+ margin: var(--spacing-8) 0 0 0 !important;
}
}
& > *:last-child {
@@ -199,21 +199,21 @@
.spacing-9 {
& > * {
- margin: 0 var(--v2-spacing-9) 0 0 !important;
+ margin: 0 var(--spacing-9) 0 0 !important;
}
&.directionRowReverse {
& > * {
- margin: 0 0 0 var(--v2-spacing-9) !important;
+ margin: 0 0 0 var(--spacing-9) !important;
}
}
&.directionColumn {
& > * {
- margin: 0 0 var(--v2-spacing-9) 0 !important;
+ margin: 0 0 var(--spacing-9) 0 !important;
}
}
&.directionColumnReverse {
& > * {
- margin: var(--v2-spacing-9) 0 0 0 !important;
+ margin: var(--spacing-9) 0 0 0 !important;
}
}
& > *:last-child {
@@ -373,154 +373,154 @@
&:not(.directionColumn).spacing-1 {
&:not(:empty) {
- margin-top: calc(-1 * var(--v2-spacing-1)) !important;
+ margin-top: calc(-1 * var(--spacing-1)) !important;
}
& > * {
- margin-top: var(--v2-spacing-1) !important;
+ margin-top: var(--spacing-1) !important;
}
}
&.directionColumn.spacing-1 {
&:not(:empty) {
- margin-left: calc(-1 * var(--v2-spacing-1)) !important;
+ margin-left: calc(-1 * var(--spacing-1)) !important;
}
&.itemGutter > * {
- margin-left: var(--v2-spacing-1) !important;
+ margin-left: var(--spacing-1) !important;
}
}
&:not(.directionColumn).spacing-2 {
&:not(:empty) {
- margin-top: calc(-1 * var(--v2-spacing-2)) !important;
+ margin-top: calc(-1 * var(--spacing-2)) !important;
}
& > * {
- margin-top: var(--v2-spacing-2) !important;
+ margin-top: var(--spacing-2) !important;
}
}
&.directionColumn.spacing-2 {
&:not(:empty) {
- margin-left: calc(-1 * var(--v2-spacing-2)) !important;
+ margin-left: calc(-1 * var(--spacing-2)) !important;
}
&.itemGutter > * {
- margin-left: var(--v2-spacing-2) !important;
+ margin-left: var(--spacing-2) !important;
}
}
&:not(.directionColumn).spacing-3 {
&:not(:empty) {
- margin-top: calc(-1 * var(--v2-spacing-3)) !important;
+ margin-top: calc(-1 * var(--spacing-3)) !important;
}
& > * {
- margin-top: var(--v2-spacing-3) !important;
+ margin-top: var(--spacing-3) !important;
}
}
&.directionColumn.spacing-3 {
&:not(:empty) {
- margin-left: calc(-1 * var(--v2-spacing-3)) !important;
+ margin-left: calc(-1 * var(--spacing-3)) !important;
}
&.itemGutter > * {
- margin-left: var(--v2-spacing-3) !important;
+ margin-left: var(--spacing-3) !important;
}
}
&:not(.directionColumn).spacing-4 {
&:not(:empty) {
- margin-top: calc(-1 * var(--v2-spacing-4)) !important;
+ margin-top: calc(-1 * var(--spacing-4)) !important;
}
& > * {
- margin-top: var(--v2-spacing-4) !important;
+ margin-top: var(--spacing-4) !important;
}
}
&.directionColumn.spacing-4 {
&:not(:empty) {
- margin-left: calc(-1 * var(--v2-spacing-4)) !important;
+ margin-left: calc(-1 * var(--spacing-4)) !important;
}
&.itemGutter > * {
- margin-left: var(--v2-spacing-4) !important;
+ margin-left: var(--spacing-4) !important;
}
}
&:not(.directionColumn).spacing-5 {
&:not(:empty) {
- margin-top: calc(-1 * var(--v2-spacing-5)) !important;
+ margin-top: calc(-1 * var(--spacing-5)) !important;
}
& > * {
- margin-top: var(--v2-spacing-5) !important;
+ margin-top: var(--spacing-5) !important;
}
}
&.directionColumn.spacing-5 {
&:not(:empty) {
- margin-left: calc(-1 * var(--v2-spacing-5)) !important;
+ margin-left: calc(-1 * var(--spacing-5)) !important;
}
&.itemGutter > * {
- margin-left: var(--v2-spacing-5) !important;
+ margin-left: var(--spacing-5) !important;
}
}
&:not(.directionColumn).spacing-6 {
&:not(:empty) {
- margin-top: calc(-1 * var(--v2-spacing-6)) !important;
+ margin-top: calc(-1 * var(--spacing-6)) !important;
}
& > * {
- margin-top: var(--v2-spacing-6) !important;
+ margin-top: var(--spacing-6) !important;
}
}
&.directionColumn.spacing-6 {
&:not(:empty) {
- margin-left: calc(-1 * var(--v2-spacing-6)) !important;
+ margin-left: calc(-1 * var(--spacing-6)) !important;
}
&.itemGutter > * {
- margin-left: var(--v2-spacing-6) !important;
+ margin-left: var(--spacing-6) !important;
}
}
&:not(.directionColumn).spacing-7 {
&:not(:empty) {
- margin-top: calc(-1 * var(--v2-spacing-7)) !important;
+ margin-top: calc(-1 * var(--spacing-7)) !important;
}
& > * {
- margin-top: var(--v2-spacing-7) !important;
+ margin-top: var(--spacing-7) !important;
}
}
&.directionColumn.spacing-7 {
&:not(:empty) {
- margin-left: calc(-1 * var(--v2-spacing-7)) !important;
+ margin-left: calc(-1 * var(--spacing-7)) !important;
}
&.itemGutter > * {
- margin-left: var(--v2-spacing-7) !important;
+ margin-left: var(--spacing-7) !important;
}
}
&:not(.directionColumn).spacing-8 {
&:not(:empty) {
- margin-top: calc(-1 * var(--v2-spacing-8)) !important;
+ margin-top: calc(-1 * var(--spacing-8)) !important;
}
& > * {
- margin-top: var(--v2-spacing-8) !important;
+ margin-top: var(--spacing-8) !important;
}
}
&.directionColumn.spacing-8 {
&:not(:empty) {
- margin-left: calc(-1 * var(--v2-spacing-8)) !important;
+ margin-left: calc(-1 * var(--spacing-8)) !important;
}
&.itemGutter > * {
- margin-left: var(--v2-spacing-8) !important;
+ margin-left: var(--spacing-8) !important;
}
}
&:not(.directionColumn).spacing-9 {
&:not(:empty) {
- margin-top: calc(-1 * var(--v2-spacing-9)) !important;
+ margin-top: calc(-1 * var(--spacing-9)) !important;
}
& > * {
- margin-top: var(--v2-spacing-9) !important;
+ margin-top: var(--spacing-9) !important;
}
}
&.directionColumn.spacing-9 {
&:not(:empty) {
- margin-left: calc(-1 * var(--v2-spacing-9)) !important;
+ margin-left: calc(-1 * var(--spacing-9)) !important;
}
&.itemGutter > * {
- margin-left: var(--v2-spacing-9) !important;
+ margin-left: var(--spacing-9) !important;
}
}
}
diff --git a/src/core/client/ui/components/v2/Flex/Flex.tsx b/src/core/client/ui/components/v2/Flex/Flex.tsx
index 86ad461e1..153e0e971 100644
--- a/src/core/client/ui/components/v2/Flex/Flex.tsx
+++ b/src/core/client/ui/components/v2/Flex/Flex.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent, Ref } from "react";
import { pascalCase } from "coral-common/utils";
import { withForwardRef, withStyles } from "coral-ui/hocs";
-import { Spacing } from "coral-ui/theme/variables";
+import { Spacing } from "coral-ui/theme/sharedVariables";
import { PropTypesOf } from "coral-ui/types";
/** Needs to be loaded after styles, because Box styles have priority */
diff --git a/src/core/client/ui/components/v2/FormField/FormField.tsx b/src/core/client/ui/components/v2/FormField/FormField.tsx
index 7e8189738..bb3320275 100644
--- a/src/core/client/ui/components/v2/FormField/FormField.tsx
+++ b/src/core/client/ui/components/v2/FormField/FormField.tsx
@@ -1,11 +1,10 @@
import cn from "classnames";
import React, { FunctionComponent, ReactNode } from "react";
+import { HorizontalGutter } from "coral-ui/components/v2";
import { withStyles } from "coral-ui/hocs";
import { PropTypesOf } from "coral-ui/types";
-import HorizontalGutter from "coral-ui/components/HorizontalGutter";
-
import styles from "./FormField.css";
interface Props extends Omit, "ref"> {
diff --git a/src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.css b/src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.css
index 36f24ac54..89ef65dbc 100644
--- a/src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.css
+++ b/src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.css
@@ -1,9 +1,9 @@
-$configureDescriptionColor: var(--v2-colors-mono-500);
+$configureDescriptionColor: var(--palette-text-500);
.root {
color: $configureDescriptionColor;
- line-height: var(--v2-line-height-body-short);
- font-size: var(--v2-font-size-3);
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
+ line-height: var(--line-height-field-description);
+ font-size: var(--font-size-3);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
}
diff --git a/src/core/client/ui/components/v2/FormFieldFooter/FormFieldFooter.css b/src/core/client/ui/components/v2/FormFieldFooter/FormFieldFooter.css
index 93dd77c89..c16fdfe6c 100644
--- a/src/core/client/ui/components/v2/FormFieldFooter/FormFieldFooter.css
+++ b/src/core/client/ui/components/v2/FormFieldFooter/FormFieldFooter.css
@@ -1,7 +1,7 @@
.root {
- color: var(--v2-colors-mono-100);
- font-size: var(--v2-font-size-2);
- line-height: var(--v2-line-height-reset);
- font-weight: var(--v2-font-weight-primary-regular);
- font-family: var(--v2-font-family-primary);
+ color: var(--palette-text-100);
+ font-size: var(--font-size-2);
+ line-height: var(--line-height-3);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
}
diff --git a/src/core/client/ui/components/v2/FormFieldFooter/FormFieldFooter.tsx b/src/core/client/ui/components/v2/FormFieldFooter/FormFieldFooter.tsx
index d41d29b5b..a3e834af1 100644
--- a/src/core/client/ui/components/v2/FormFieldFooter/FormFieldFooter.tsx
+++ b/src/core/client/ui/components/v2/FormFieldFooter/FormFieldFooter.tsx
@@ -1,11 +1,10 @@
import cn from "classnames";
import React, { FunctionComponent, ReactNode } from "react";
+import { HorizontalGutter } from "coral-ui/components/v2";
import { withStyles } from "coral-ui/hocs";
import { PropTypesOf } from "coral-ui/types";
-import HorizontalGutter from "coral-ui/components/HorizontalGutter";
-
import styles from "./FormFieldFooter.css";
interface Props extends Omit, "ref"> {
diff --git a/src/core/client/ui/components/v2/FormFieldHeader/FormFieldHeader.tsx b/src/core/client/ui/components/v2/FormFieldHeader/FormFieldHeader.tsx
index a0efd4858..57f0d4738 100644
--- a/src/core/client/ui/components/v2/FormFieldHeader/FormFieldHeader.tsx
+++ b/src/core/client/ui/components/v2/FormFieldHeader/FormFieldHeader.tsx
@@ -1,11 +1,10 @@
import cn from "classnames";
import React, { FunctionComponent, ReactNode } from "react";
+import { HorizontalGutter } from "coral-ui/components/v2";
import { withStyles } from "coral-ui/hocs";
import { PropTypesOf } from "coral-ui/types";
-import HorizontalGutter from "coral-ui/components/HorizontalGutter";
-
import styles from "./FormFieldHeader.css";
interface Props extends Omit, "ref"> {
diff --git a/src/core/client/ui/components/v2/HelperText/HelperText.css b/src/core/client/ui/components/v2/HelperText/HelperText.css
index 0dd1ce851..d77967b50 100644
--- a/src/core/client/ui/components/v2/HelperText/HelperText.css
+++ b/src/core/client/ui/components/v2/HelperText/HelperText.css
@@ -1,7 +1,7 @@
.root {
- color: var(--v2-palette-input-helper);
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
- font-size: var(--v2-font-size-2);
- line-height: var(--v2-line-height-body-short);
+ color: var(--palette-text-100);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
+ font-size: var(--font-size-2);
+ line-height: var(--line-height-4);
}
diff --git a/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.tsx b/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.tsx
index 22f864ae4..75db8c742 100644
--- a/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.tsx
+++ b/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.tsx
@@ -2,7 +2,7 @@ import cn from "classnames";
import React, { FunctionComponent, Ref } from "react";
import { withForwardRef, withStyles } from "coral-ui/hocs";
-import { Spacing } from "coral-ui/theme/variables";
+import { Spacing } from "coral-ui/theme/sharedVariables";
import { PropTypesOf } from "coral-ui/types";
/** Needs to be loaded after styles, because Box styles have priority */
diff --git a/src/core/client/ui/components/v2/HorizontalRule/HorizontalRule.css b/src/core/client/ui/components/v2/HorizontalRule/HorizontalRule.css
index 30d0d4e86..fa183879e 100644
--- a/src/core/client/ui/components/v2/HorizontalRule/HorizontalRule.css
+++ b/src/core/client/ui/components/v2/HorizontalRule/HorizontalRule.css
@@ -1,5 +1,5 @@
.root {
border: 0;
- border-bottom: 1px solid var(--v2-colors-grey-300);
+ border-bottom: 1px solid var(--palette-grey-300);
padding-top: 1px;
}
diff --git a/src/core/client/ui/components/v2/Icon/Icon.css b/src/core/client/ui/components/v2/Icon/Icon.css
index fe3eca5c7..fe8cb51fc 100644
--- a/src/core/client/ui/components/v2/Icon/Icon.css
+++ b/src/core/client/ui/components/v2/Icon/Icon.css
@@ -26,38 +26,38 @@
}
.xs {
- font-size: 10px;
- width: 10px;
+ font-size: var(--font-size-icon-xs);
+ width: var(--font-size-icon-xs);
}
.sm {
- font-size: 14px;
- width: 14px;
+ font-size: var(--font-size-icon-sm);
+ width: var(--font-size-icon-sm);
}
.md {
- font-size: 18px;
- width: 18px;
+ font-size: var(--font-size-icon-md);
+ width: var(--font-size-icon-md);
}
.lg {
- font-size: 24px;
- width: 24px;
+ font-size: var(--font-size-icon-lg);
+ width: var(--font-size-icon-lg);
}
.xl {
- font-size: 36px;
- width: 36px;
+ font-size: var(--font-size-icon-xl);
+ width: var(--font-size-icon-xl);
}
.colorPrimary {
- color: var(--v2-colors-teal-700);
+ color: $colors-teal-700;
}
.colorError {
- color: var(--v2-colors-red-500);
+ color: var(--palette-error-500);
}
.colorSuccess {
- color: var(--v2-colors-green-500);
+ color: var(--palette-success-500);
}
.colorStream {
- color: var(--v2-colors-stream-blue-500);
+ color: var(--palette-primary-500);
}
diff --git a/src/core/client/ui/components/v2/InputDescription/InputDescription.css b/src/core/client/ui/components/v2/InputDescription/InputDescription.css
new file mode 100644
index 000000000..6a2e80d9f
--- /dev/null
+++ b/src/core/client/ui/components/v2/InputDescription/InputDescription.css
@@ -0,0 +1,8 @@
+.root {
+ color: var(--palette-text-100);
+
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-4);
+}
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.spec.tsx b/src/core/client/ui/components/v2/InputDescription/InputDescription.spec.tsx
similarity index 100%
rename from src/core/client/ui/components/InputDescription/InputDescription.spec.tsx
rename to src/core/client/ui/components/v2/InputDescription/InputDescription.spec.tsx
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.tsx b/src/core/client/ui/components/v2/InputDescription/InputDescription.tsx
similarity index 70%
rename from src/core/client/ui/components/InputDescription/InputDescription.tsx
rename to src/core/client/ui/components/v2/InputDescription/InputDescription.tsx
index 699369921..5d1f28d6f 100644
--- a/src/core/client/ui/components/InputDescription/InputDescription.tsx
+++ b/src/core/client/ui/components/v2/InputDescription/InputDescription.tsx
@@ -1,8 +1,12 @@
+import cn from "classnames";
import React, { FunctionComponent, ReactNode } from "react";
-import { Typography } from "coral-ui/components";
import { PropTypesOf } from "coral-ui/types";
+import Typography from "../Typography";
+
+import styles from "./InputDescription.css";
+
interface InputDescriptionProps {
children: ReactNode;
id?: string;
@@ -13,14 +17,9 @@ interface InputDescriptionProps {
const InputDescription: FunctionComponent = (props) => {
const { className, children, ...rest } = props;
return (
-
+
{children}
-
+
);
};
diff --git a/src/core/client/ui/components/InputDescription/README.mdx b/src/core/client/ui/components/v2/InputDescription/README.mdx
similarity index 100%
rename from src/core/client/ui/components/InputDescription/README.mdx
rename to src/core/client/ui/components/v2/InputDescription/README.mdx
diff --git a/src/core/client/ui/components/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap b/src/core/client/ui/components/v2/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
similarity index 58%
rename from src/core/client/ui/components/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap
rename to src/core/client/ui/components/v2/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
index 688492e16..5204c261e 100644
--- a/src/core/client/ui/components/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap
+++ b/src/core/client/ui/components/v2/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
@@ -2,8 +2,8 @@
exports[`renders correctly 1`] = `
- This text is only for screen readers
+ Form Components should go here
`;
diff --git a/src/core/client/ui/components/InputDescription/index.ts b/src/core/client/ui/components/v2/InputDescription/index.ts
similarity index 100%
rename from src/core/client/ui/components/InputDescription/index.ts
rename to src/core/client/ui/components/v2/InputDescription/index.ts
diff --git a/src/core/client/ui/components/v2/InputLabel/InputLabel.css b/src/core/client/ui/components/v2/InputLabel/InputLabel.css
index e1bc5768e..f652e43f7 100644
--- a/src/core/client/ui/components/v2/InputLabel/InputLabel.css
+++ b/src/core/client/ui/components/v2/InputLabel/InputLabel.css
@@ -1,9 +1,9 @@
.root {
display: block;
- font-size: var(--v2-font-size-2);
- font-weight: var(--v2-font-weight-primary-bold);
- font-family: var(--v2-font-family-primary);
- line-height: var(--v2-line-height-reset);
- color: var(--v2-colors-mono-500);
+ font-size: var(--font-size-2);
+ font-weight: var(--font-weight-primary-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-3);
+ color: var(--palette-text-500);
}
diff --git a/src/core/client/ui/components/v2/Label/Label.css b/src/core/client/ui/components/v2/Label/Label.css
index 100976323..f387400e0 100644
--- a/src/core/client/ui/components/v2/Label/Label.css
+++ b/src/core/client/ui/components/v2/Label/Label.css
@@ -1,9 +1,9 @@
.root {
- color: var(--v2-palette-input-label);
- font-size: var(--v2-font-size-2);
- line-height: var(--v2-line-height-reset);
- font-weight: var(--v2-font-weight-primary-bold);
- font-family: var(--v2-font-family-primary);
+ color: var(--palette-text-500);
+ font-size: var(--font-size-2);
+ line-height: var(--line-height-3);
+ font-weight: var(--font-weight-primary-bold);
+ font-family: var(--font-family-primary);
padding-left: 0;
display: block;
}
diff --git a/src/core/client/ui/components/v2/ListGroup/ListGroup.css b/src/core/client/ui/components/v2/ListGroup/ListGroup.css
index c868d5411..c6231d74b 100644
--- a/src/core/client/ui/components/v2/ListGroup/ListGroup.css
+++ b/src/core/client/ui/components/v2/ListGroup/ListGroup.css
@@ -1,5 +1,5 @@
.root {
- border: 1px solid var(--v2-colors-grey-300);
+ border: 1px solid var(--palette-grey-300);
border-radius: var(--round-corners);
overflow-y: auto;
}
diff --git a/src/core/client/ui/components/v2/ListGroup/ListGroupRow.css b/src/core/client/ui/components/v2/ListGroup/ListGroupRow.css
index f8e8901de..2cdf7a9db 100644
--- a/src/core/client/ui/components/v2/ListGroup/ListGroupRow.css
+++ b/src/core/client/ui/components/v2/ListGroup/ListGroupRow.css
@@ -1,6 +1,6 @@
.root {
- border-bottom: 1px solid var(--v2-colors-grey-200);
- padding: var(--v2-spacing-2);
+ border-bottom: 1px solid var(--palette-grey-200);
+ padding: var(--spacing-2);
&:last-child {
border-bottom: none;
diff --git a/src/core/client/ui/components/v2/Marker/Count.css b/src/core/client/ui/components/v2/Marker/Count.css
index 86f07c13f..ba78d0626 100644
--- a/src/core/client/ui/components/v2/Marker/Count.css
+++ b/src/core/client/ui/components/v2/Marker/Count.css
@@ -1,6 +1,6 @@
.root {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
font-size: 0.8125rem;
letter-spacing: calc(-0.35em / 13);
diff --git a/src/core/client/ui/components/v2/Marker/Marker.css b/src/core/client/ui/components/v2/Marker/Marker.css
index d88db08e0..42b973165 100644
--- a/src/core/client/ui/components/v2/Marker/Marker.css
+++ b/src/core/client/ui/components/v2/Marker/Marker.css
@@ -1,9 +1,9 @@
-$markerReportedColor: var(--v2-colors-red-500);
-$markerPendingColor: var(--v2-colors-teal-700);
+$markerReportedColor: var(--palette-error-500);
+$markerPendingColor: $colors-teal-700;
.root {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-semi-bold);
font-size: 0.8125rem;
letter-spacing: calc(-0.35em / 13);
@@ -26,7 +26,7 @@ $markerPendingColor: var(--v2-colors-teal-700);
}
.variantFilled {
- color: var(--v2-colors-pure-white);
+ color: var(--palette-text-000);
&.colorReported {
background-color: $markerReportedColor;
border-color: $markerReportedColor;
diff --git a/src/core/client/ui/components/v2/MatchMedia/MatchMedia.tsx b/src/core/client/ui/components/v2/MatchMedia/MatchMedia.tsx
index 425f42e66..5d34dc46c 100644
--- a/src/core/client/ui/components/v2/MatchMedia/MatchMedia.tsx
+++ b/src/core/client/ui/components/v2/MatchMedia/MatchMedia.tsx
@@ -2,10 +2,10 @@ import React, { FunctionComponent, ReactNode } from "react";
import Responsive, { MediaQueryMatchers } from "react-responsive";
import { UIContext } from "coral-ui/components/v2";
-import theme from "coral-ui/theme/variables2";
+import breakpoints from "coral-ui/theme/breakpoints";
import { PropTypesOf } from "coral-ui/types";
-type Breakpoints = keyof typeof theme.breakpoints;
+type Breakpoints = keyof typeof breakpoints;
interface Props {
/** greater than or equal width. */
@@ -40,14 +40,14 @@ export const MatchMedia: FunctionComponent = (props) => {
// react-responsive supports the speech prop.
aural: speech,
minWidth: gtWidth
- ? theme.breakpoints[gtWidth] + 1
+ ? breakpoints[gtWidth] + 1
: gteWidth
- ? theme.breakpoints[gteWidth]
+ ? breakpoints[gteWidth]
: undefined,
maxWidth: ltWidth
- ? theme.breakpoints[ltWidth] - 1
+ ? breakpoints[ltWidth] - 1
: lteWidth
- ? theme.breakpoints[lteWidth]
+ ? breakpoints[lteWidth]
: undefined,
};
return ;
diff --git a/src/core/client/ui/components/v2/Message/Message.css b/src/core/client/ui/components/v2/Message/Message.css
index 1a9bfef75..d72dccffd 100644
--- a/src/core/client/ui/components/v2/Message/Message.css
+++ b/src/core/client/ui/components/v2/Message/Message.css
@@ -1,30 +1,30 @@
-$messageErrorBackgroundColor: var(--v2-colors-red-500);
-$messageErrorForegroundColor: var(--v2-colors-pure-white);
+$messageErrorBackgroundColor: var(--palette-error-500);
+$messageErrorForegroundColor: var(--palette-text-000);
.root {
position: relative;
display: inline-flex;
justify-content: flex-start;
align-items: center;
- padding: var(--v2-spacing-1) var(--v2-spacing-2);
+ padding: var(--spacing-1) var(--spacing-2);
box-sizing: border-box;
border-radius: var(--round-corners);
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-bold);
- font-size: var(--v2-font-size-2);
- line-height: var(--v2-line-height-title);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-bold);
+ font-size: var(--font-size-2);
+ line-height: var(--line-height-3);
}
.colorGrey {
- background-color: var(--palette-common-white);
- border-color: var(--palette-grey-main);
- color: var(--palette-grey-main);
+ background-color: inherit;
+ border-color: var(--palette-grey-500);
+ color: var(--palette-grey-500);
}
.colorDark {
- background-color: var(--palette-text-primary);
+ background-color: var(--palette-text-500);
border-width: 0px;
- color: var(--palette-text-light);
+ color: var(--palette-text-000);
}
.colorError {
@@ -33,11 +33,11 @@ $messageErrorForegroundColor: var(--v2-colors-pure-white);
}
.colorPrimary {
- background-color: var(--palette-primary-light);
- border-color: var(--palette-primary-darkest);
+ background-color: $colors-teal-300;
+ border-color: $colors-teal-900;
border-width: 0px;
border-left-width: calc(0.5 * var(--mini-unit));
- color: var(--palette-text-light);
+ color: var(--palette-text-000);
}
.fullWidth {
diff --git a/src/core/client/ui/components/v2/Message/MessageIcon.tsx b/src/core/client/ui/components/v2/Message/MessageIcon.tsx
index 533bf040b..8bbccd7be 100644
--- a/src/core/client/ui/components/v2/Message/MessageIcon.tsx
+++ b/src/core/client/ui/components/v2/Message/MessageIcon.tsx
@@ -1,9 +1,10 @@
import cn from "classnames";
import React, { FunctionComponent, HTMLAttributes, Ref } from "react";
-import Icon, { IconProps } from "coral-ui/components/Icon";
import { withForwardRef, withStyles } from "coral-ui/hocs";
+import Icon, { IconProps } from "../Icon";
+
import styles from "./MessageIcon.css";
interface Props extends Omit, "color"> {
diff --git a/src/core/client/ui/components/v2/Modal/Modal.css b/src/core/client/ui/components/v2/Modal/Modal.css
index 92b04ca37..1c67b8304 100644
--- a/src/core/client/ui/components/v2/Modal/Modal.css
+++ b/src/core/client/ui/components/v2/Modal/Modal.css
@@ -5,7 +5,7 @@
width: 100%;
height: 100%;
box-sizing: border-box;
- z-index: var(--zindex-modal);
+ z-index: $zindex-modal;
}
.scroll {
diff --git a/src/core/client/ui/components/v2/Modal/ModalHeader.css b/src/core/client/ui/components/v2/Modal/ModalHeader.css
index a3b445dc1..3589c3bf4 100644
--- a/src/core/client/ui/components/v2/Modal/ModalHeader.css
+++ b/src/core/client/ui/components/v2/Modal/ModalHeader.css
@@ -1,6 +1,6 @@
-$modal-header-background: var(--v2-colors-white-500);
+$modal-header-background: $colors-white-500;
.root {
background-color: $modal-header-background;
- padding: var(--v2-spacing-4);
+ padding: var(--spacing-4);
}
diff --git a/src/core/client/ui/components/v2/PasswordField/PasswordField.css b/src/core/client/ui/components/v2/PasswordField/PasswordField.css
index 707be40cd..9aad2892f 100644
--- a/src/core/client/ui/components/v2/PasswordField/PasswordField.css
+++ b/src/core/client/ui/components/v2/PasswordField/PasswordField.css
@@ -5,27 +5,59 @@
box-sizing: border-box;
}
+
+.input {
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
+ font-size: var(--font-size-3);
+ line-height: var(--line-height-3);
+ display: block;
+ padding: var(--spacing-2);
+ border-radius: var(--round-corners);
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+
+ &:read-only {
+ background-color: var(--palette-background-input-disabled);
+ }
+ &:disabled {
+ background-color: var(--palette-background-input-disabled);
+ border-color: var(--palette-text-input-disabled);
+ }
+ &:focus {
+ outline: none;
+ }
+ &::placeholder {
+ color: var(--palette-text-placeholder);
+ }
+}
+
.colorRegular {
- background-color: var(--v2-palette-input-background);
- color: var(--v2-palette-input-value);
- border: 1px solid var(--v2-palette-input-border);
+ background-color: var(--palette-background-input);
+ color: var(--palette-text-500);
+ border: 1px solid var(--palette-grey-500);
+ &:focus {
+ border: 1px solid $colors-teal-500;
+ box-shadow: inset 0px 0px 0px 1px $colors-teal-500;
+ }
}
.colorStreamBlue {
- background-color: var(--v2-palette-input-background);
- color: var(--v2-palette-input-value);
- border: 1px solid var(--v2-palette-input-border);
+ background-color: var(--palette-background-input);
+ color: var(--palette-text-500);
+ border: 1px solid var(--palette-grey-500);
&:focus {
- border: 1px solid var(--v2-colors-stream-blue-500);
- box-shadow: inset 0px 0px 0px 1px var(--v2-colors-stream-blue-500);
+ border: 1px solid var(--palette-primary-500);
+ box-shadow: inset 0px 0px 0px 1px var(--palette-primary-500);
}
}
.colorError {
- background-color: var(--v2-palette-input-background);
- border-color: var(--v2-colors-red-500);
- border: 2px solid var(--v2-colors-red-500);
+ background-color: var(--palette-background-input);
+ border-color: var(--palette-error-500);
+ border: 2px solid var(--palette-error-500);
}
.fullWidth {
@@ -52,32 +84,3 @@
/* ie11 specific css */
_:-ms-lang(x), .icon { top: 8px; }
-
-.input {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
- font-size: var(--v2-font-size-3);
- line-height: var(--v2-line-height-reset);
- display: block;
- padding: var(--v2-spacing-2);
- border-radius: var(--round-corners);
- width: 100%;
- height: 100%;
- box-sizing: border-box;
-
- &:read-only {
- background-color: var(--v2-palette-input-disabled-background);
- }
- &:disabled {
- background-color: var(--v2-palette-input-disabled-background);
- border-color: var(--v2-palette-input-disabled-foreground);
- }
- &:focus {
- outline: none;
- border: 1px solid var(--v2-palette-input-focused-border);
- box-shadow: inset 0px 0px 0px 1px var(--v2-palette-input-focused-border);
- }
- &::placeholder {
- color: var(--v2-palette-input-placeholder);
- }
-}
diff --git a/src/core/client/ui/components/v2/PasswordField/PasswordField.tsx b/src/core/client/ui/components/v2/PasswordField/PasswordField.tsx
index 83fb28ef8..215b3f1fa 100644
--- a/src/core/client/ui/components/v2/PasswordField/PasswordField.tsx
+++ b/src/core/client/ui/components/v2/PasswordField/PasswordField.tsx
@@ -7,10 +7,9 @@ import React, {
KeyboardEvent,
} from "react";
+import Icon from "coral-ui/components/v2/Icon";
import { withStyles } from "coral-ui/hocs";
-import Icon from "coral-ui/components/Icon";
-
import styles from "./PasswordField.css";
export interface PasswordFieldProps {
diff --git a/src/core/client/ui/components/v2/Popover/Arrow.css b/src/core/client/ui/components/v2/Popover/Arrow.css
index e1a56a025..8a515e3bd 100644
--- a/src/core/client/ui/components/v2/Popover/Arrow.css
+++ b/src/core/client/ui/components/v2/Popover/Arrow.css
@@ -1,7 +1,7 @@
-$popoverBorderColor: var(--v2-colors-grey-400);
-$popoverBackgroundColor: var(--v2-colors-pure-white);
-$popoverDarkBackgroundColor: var(--v2-colors-grey-500);
-$popoverDarkBorderColor: var(--v2-colors-grey-500);
+$popoverBorderColor: var(--palette-grey-400);
+$popoverBackgroundColor: var(--palette-background-popover);
+$popoverDarkBackgroundColor: var(--palette-background-tooltip);
+$popoverDarkBorderColor: var(--palette-background-tooltip);
.root {
position: absolute;
diff --git a/src/core/client/ui/components/v2/Popover/Popover.css b/src/core/client/ui/components/v2/Popover/Popover.css
index a440c53f0..be8c9b172 100644
--- a/src/core/client/ui/components/v2/Popover/Popover.css
+++ b/src/core/client/ui/components/v2/Popover/Popover.css
@@ -1,7 +1,7 @@
-$popoverBorderColor: var(--v2-colors-grey-400);
-$popoverBackgroundColor: var(--v2-colors-pure-white);
-$popoverDarkBackgroundColor: var(--v2-colors-grey-500);
-$popoverDarkBorderColor: var(--v2-colors-grey-500);
+$popoverBorderColor: var(--palette-grey-400);
+$popoverBackgroundColor: var(--palette-background-popover);
+$popoverDarkBackgroundColor: var(--palette-background-tooltip);
+$popoverDarkBorderColor: var(--palette-background-tooltip);
.root {
}
@@ -10,9 +10,9 @@ $popoverDarkBorderColor: var(--v2-colors-grey-500);
background: $popoverBackgroundColor;
border: 1px solid $popoverBorderColor;
box-sizing: border-box;
- box-shadow: var(--elevation-main);
+ box-shadow: var(--shadow-popover);
border-radius: var(--round-corners);
- z-index: var(--zindex-popover);
+ z-index: $zindex-popover;
margin: 2px;
}
diff --git a/src/core/client/ui/components/v2/Popover/Popover.tsx b/src/core/client/ui/components/v2/Popover/Popover.tsx
index 6f3c014a8..bb782c750 100644
--- a/src/core/client/ui/components/v2/Popover/Popover.tsx
+++ b/src/core/client/ui/components/v2/Popover/Popover.tsx
@@ -3,12 +3,12 @@ import React from "react";
import { Manager, Popper, Reference } from "react-popper";
import { oncePerFrame } from "coral-common/utils";
+import { AriaInfo } from "coral-ui/components/v2";
import { withStyles } from "coral-ui/hocs";
import { PropTypesOf } from "coral-ui/types";
-import { AriaInfo } from "coral-ui/components";
-
import Arrow from "./Arrow";
+
import styles from "./Popover.css";
type Placement =
diff --git a/src/core/client/ui/components/Popup/Popup.ts b/src/core/client/ui/components/v2/Popup/Popup.ts
similarity index 100%
rename from src/core/client/ui/components/Popup/Popup.ts
rename to src/core/client/ui/components/v2/Popup/Popup.ts
diff --git a/src/core/client/ui/components/Popup/README.mdx b/src/core/client/ui/components/v2/Popup/README.mdx
similarity index 100%
rename from src/core/client/ui/components/Popup/README.mdx
rename to src/core/client/ui/components/v2/Popup/README.mdx
diff --git a/src/core/client/ui/components/Popup/index.ts b/src/core/client/ui/components/v2/Popup/index.ts
similarity index 100%
rename from src/core/client/ui/components/Popup/index.ts
rename to src/core/client/ui/components/v2/Popup/index.ts
diff --git a/src/core/client/ui/components/v2/RadioButton/RadioButton.css b/src/core/client/ui/components/v2/RadioButton/RadioButton.css
index 53769cde6..8ce189e54 100644
--- a/src/core/client/ui/components/v2/RadioButton/RadioButton.css
+++ b/src/core/client/ui/components/v2/RadioButton/RadioButton.css
@@ -12,20 +12,20 @@
position: relative;
cursor: pointer;
user-select: none;
- color: var(--v2-palette-input-label);
- font-size: var(--v2-font-size-3);
- font-weight: var(--v2-font-weight-primary-regular);
- font-family: var(--v2-font-family-primary);
- line-height: var(--v2-line-height-body-short);
+ color: var(--palette-text-500);
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-field-description);
align-items: center;
}
.labelChecked {
- font-weight: var(--v2-font-weight-primary-semi-bold);
+ font-weight: var(--font-weight-primary-semi-bold);
}
.labelLight {
- color: var(--palette-text-light);
+ color: var(--palette-text-000);
}
/* Box. */
@@ -35,8 +35,8 @@
display: inline-block;
width: 14px;
height: 14px;
- background: var(--v2-palette-input-background);
- border: 1px solid var(--v2-palette-input-label);
+ background: var(--palette-background-input);
+ border: 1px solid var(--palette-text-500);
border-radius: 50%;
box-sizing: border-box;
flex-shrink: 0;
@@ -49,8 +49,8 @@
/* Box checked */
.input:checked + .label:before {
- border: 1px solid var(--v2-palette-input-label);
- background: var(--v2-palette-input-background);
+ border: 1px solid var(--palette-text-500);
+ background: var(--palette-background-input);
}
/* Disabled state label. */
@@ -62,14 +62,14 @@
/* Disabled box. */
.input:disabled + .label:before {
box-shadow: none;
- border: 1px solid var(--v2-palette-input-disabled-foreground);
- background: var(--v2-palette-input-disabled-background);
+ border: 1px solid var(--palette-text-input-disabled);
+ background: var(--palette-background-input-disabled);
}
/* Checkmark. Could be replaced with an image */
.input:checked + .label:after {
content: "";
- background: var(--v2-palette-input-label);
+ background: var(--palette-text-500);
border-radius: 50%;
position: absolute;
left: 3px;
@@ -79,5 +79,5 @@
}
.input:checked:disabled + .label:after {
- background: var(--v2-palette-input-disabled-background);
+ background: var(--palette-background-input-disabled);
}
diff --git a/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx b/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx
index e75bc3633..6508dfc93 100644
--- a/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx
+++ b/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx
@@ -2,7 +2,7 @@ import cn from "classnames";
import React, { ChangeEvent, Component, EventHandler, FocusEvent } from "react";
import { v4 as uuid } from "uuid";
-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
import { withKeyboardFocus, withStyles } from "coral-ui/hocs";
import styles from "./RadioButton.css";
diff --git a/src/core/client/ui/components/v2/SelectField/OptGroup.spec.tsx b/src/core/client/ui/components/v2/SelectField/OptGroup.spec.tsx
index e2f3ace37..2bf24d7db 100644
--- a/src/core/client/ui/components/v2/SelectField/OptGroup.spec.tsx
+++ b/src/core/client/ui/components/v2/SelectField/OptGroup.spec.tsx
@@ -2,6 +2,7 @@ import React from "react";
import TestRenderer from "react-test-renderer";
import { PropTypesOf } from "coral-ui/types";
+
import OptGroup from "./OptGroup";
it("renders correctly", () => {
diff --git a/src/core/client/ui/components/v2/SelectField/Option.spec.tsx b/src/core/client/ui/components/v2/SelectField/Option.spec.tsx
index 7b010ebf7..9cedda3cf 100644
--- a/src/core/client/ui/components/v2/SelectField/Option.spec.tsx
+++ b/src/core/client/ui/components/v2/SelectField/Option.spec.tsx
@@ -2,6 +2,7 @@ import React from "react";
import TestRenderer from "react-test-renderer";
import { PropTypesOf } from "coral-ui/types";
+
import Option from "./Option";
it("renders correctly", () => {
diff --git a/src/core/client/ui/components/v2/SelectField/SelectField.css b/src/core/client/ui/components/v2/SelectField/SelectField.css
index ef73d3fc0..d36bb0ada 100644
--- a/src/core/client/ui/components/v2/SelectField/SelectField.css
+++ b/src/core/client/ui/components/v2/SelectField/SelectField.css
@@ -8,26 +8,26 @@
display: inline-flex;
justify-content: center;
align-items: center;
- right: var(--v2-spacing-2);
+ right: var(--spacing-2);
height: 100%;
user-select: none;
pointer-events: none;
}
.keyboardFocus:focus {
- outline: 1px solid var(--v2-palette-input-focused-border);
- border: 1px solid var(--v2-palette-input-focused-border);
+ outline: 1px solid $colors-teal-500;
+ border: 1px solid $colors-teal-500;
}
.selectFont {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
- font-size: var(--v2-font-size-3);
- line-height: var(--v2-line-height-reset);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
+ font-size: var(--font-size-3);
+ line-height: var(--line-height-3);
}
.selectColor {
- color: var(--v2-palette-input-value);
+ color: var(--palette-text-500);
}
.select {
@@ -48,14 +48,15 @@
}
&:disabled {
- background-color: var(--v2-palette-input-disabled-background);
+ background-color: var(--palette-background-input-disabled);
+ color: var(--palette-text-input-disabled);
}
border-radius: var(--round-corners);
- background-color: var(--v2-palette-input-background);
- border: 1px solid var(--v2-palette-input-border);
- padding: calc(var(--v2-spacing-2) - 2px) var(--v2-spacing-6)
- calc(var(--v2-spacing-2) - 2px) var(--v2-spacing-2);
+ background-color: var(--palette-background-input);
+ border: 1px solid var(--palette-grey-500);
+ padding: calc(var(--spacing-2) - 2px) var(--spacing-6)
+ calc(var(--spacing-2) - 2px) var(--spacing-2);
&::-ms-expand {
display: none;
@@ -67,5 +68,5 @@
}
.afterWrapperDisabled {
- color: var(--v2-palette-input-value);
+ color: var(--palette-text-500);
}
diff --git a/src/core/client/ui/components/v2/SelectField/SelectField.spec.tsx b/src/core/client/ui/components/v2/SelectField/SelectField.spec.tsx
index 4f72525b8..c06a6f750 100644
--- a/src/core/client/ui/components/v2/SelectField/SelectField.spec.tsx
+++ b/src/core/client/ui/components/v2/SelectField/SelectField.spec.tsx
@@ -3,6 +3,7 @@ import React from "react";
import TestRenderer from "react-test-renderer";
import { PropTypesOf } from "coral-ui/types";
+
import SelectField from "./SelectField";
it("renders correctly", () => {
diff --git a/src/core/client/ui/components/v2/SelectField/SelectField.tsx b/src/core/client/ui/components/v2/SelectField/SelectField.tsx
index 32ddc5d3a..ee227a006 100644
--- a/src/core/client/ui/components/v2/SelectField/SelectField.tsx
+++ b/src/core/client/ui/components/v2/SelectField/SelectField.tsx
@@ -1,8 +1,12 @@
import cn from "classnames";
-import React, { ChangeEvent, EventHandler, FocusEvent } from "react";
-import { FunctionComponent } from "react";
+import React, {
+ ChangeEvent,
+ EventHandler,
+ FocusEvent,
+ FunctionComponent,
+} from "react";
-import Icon from "coral-ui/components/Icon";
+import Icon from "coral-ui/components/v2/Icon";
import { withKeyboardFocus, withStyles } from "coral-ui/hocs";
import styles from "./SelectField.css";
diff --git a/src/core/client/ui/components/v2/Spinner/Spinner.css b/src/core/client/ui/components/v2/Spinner/Spinner.css
index 6a2739702..1f56a3a41 100644
--- a/src/core/client/ui/components/v2/Spinner/Spinner.css
+++ b/src/core/client/ui/components/v2/Spinner/Spinner.css
@@ -12,7 +12,7 @@
}
.path {
- stroke: var(--v2-palette-primary-main);
+ stroke: var(--palette-primary-700);
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
@@ -21,10 +21,10 @@
@keyframes colors {
0% {
- stroke: var(--v2-palette-primary-main);
+ stroke: var(--palette-primary-700);
}
100% {
- stroke: var(--v2-palette-primary-light);
+ stroke: var(--palette-primary-300);
}
}
diff --git a/src/core/client/ui/components/v2/Steps/Circle.css b/src/core/client/ui/components/v2/Steps/Circle.css
index f991f5678..aaea9557d 100644
--- a/src/core/client/ui/components/v2/Steps/Circle.css
+++ b/src/core/client/ui/components/v2/Steps/Circle.css
@@ -2,8 +2,8 @@
display: inline-block;
width: 20px;
height: 20px;
- background-color: var(--v2-colors-pure-white);
- border: 2px solid var(--v2-colors-grey-400);
+ background-color: inherit;
+ border: 2px solid var(--palette-grey-400);
box-sizing: border-box;
border-radius: 100%;
z-index: 1;
@@ -11,12 +11,12 @@
.active,
.completed {
- background-color: var(--v2-colors-green-400);
- border-color: var(--v2-colors-green-400);
+ background-color: var(--palette-success-400);
+ border-color: var(--palette-success-400);
}
.icon {
- color: var(--v2-colors-pure-white);
+ color: var(--palette-text-000);
font-weight: bold;
margin-top: -8px;
margin-left: 1px;
diff --git a/src/core/client/ui/components/v2/Steps/Line.css b/src/core/client/ui/components/v2/Steps/Line.css
index 9e3c4b2e3..6d8262a60 100644
--- a/src/core/client/ui/components/v2/Steps/Line.css
+++ b/src/core/client/ui/components/v2/Steps/Line.css
@@ -2,11 +2,11 @@
display: inline-block;
width: 200px;
height: 0px;
- border: 1px solid var(--v2-colors-grey-400);
+ border: 1px solid var(--palette-grey-400);
box-sizing: border-box;
z-index: 1;
}
.completed {
- border-color: var(--v2-colors-green-400);
+ border-color: var(--palette-success-400);
}
diff --git a/src/core/client/ui/components/v2/Steps/Step.css b/src/core/client/ui/components/v2/Steps/Step.css
index 799f950e2..002784686 100644
--- a/src/core/client/ui/components/v2/Steps/Step.css
+++ b/src/core/client/ui/components/v2/Steps/Step.css
@@ -3,12 +3,12 @@
}
.text {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
- font-size: var(--v2-font-size-3);
- line-height: var(--v2-line-height-5);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
+ font-size: var(--font-size-3);
+ line-height: var(--line-height-5);
- color: var(--v2-colors-mono-500);
+ color: var(--palette-text-500);
position: absolute;
top: 26px;
diff --git a/src/core/client/ui/components/v2/SubBar/NavigationItem.css b/src/core/client/ui/components/v2/SubBar/NavigationItem.css
index da37e281f..ca03874ae 100644
--- a/src/core/client/ui/components/v2/SubBar/NavigationItem.css
+++ b/src/core/client/ui/components/v2/SubBar/NavigationItem.css
@@ -1,13 +1,13 @@
-$navigation-item-selected: var(--v2-colors-teal-600);
-$navigation-item-default: var(--v2-colors-mono-100);
+$navigation-item-selected: $colors-teal-600;
+$navigation-item-default: var(--palette-text-100);
.root {
height: 100%;
}
.anchor {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-semi-bold);
font-size: var(--font-size-2);
text-transform: uppercase;
color: $navigation-item-default;
@@ -16,7 +16,7 @@ $navigation-item-default: var(--v2-colors-mono-100);
align-items: center;
text-decoration: none;
box-sizing: border-box;
- padding: var(--v2-spacing-3) 0;
+ padding: var(--spacing-3) 0;
border-bottom: 3px solid transparent;
&:hover {
cursor: pointer;
@@ -30,7 +30,7 @@ $navigation-item-default: var(--v2-colors-mono-100);
}
.active {
- font-weight: var(--v2-font-weight-primary-bold);
+ font-weight: var(--font-weight-primary-bold);
border-bottom: 3px solid $navigation-item-selected;
color: $navigation-item-selected;
}
diff --git a/src/core/client/ui/components/v2/SubBar/SubBar.css b/src/core/client/ui/components/v2/SubBar/SubBar.css
index 012b6db98..0d7112e1b 100644
--- a/src/core/client/ui/components/v2/SubBar/SubBar.css
+++ b/src/core/client/ui/components/v2/SubBar/SubBar.css
@@ -1,5 +1,5 @@
-$sub-bar-background: var(--v2-colors-pure-white);
-$sub-bar-border: var(--v2-colors-grey-300);
+$sub-bar-background: inherit;
+$sub-bar-border: var(--palette-grey-300);
.root {
background-color: $sub-bar-background;
diff --git a/src/core/client/ui/components/v2/SubBar/SubBar.tsx b/src/core/client/ui/components/v2/SubBar/SubBar.tsx
index 6576cac8b..7e9a50d29 100644
--- a/src/core/client/ui/components/v2/SubBar/SubBar.tsx
+++ b/src/core/client/ui/components/v2/SubBar/SubBar.tsx
@@ -1,7 +1,7 @@
import cn from "classnames";
import React, { FunctionComponent, HTMLAttributes } from "react";
-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
import { withStyles } from "coral-ui/hocs";
import styles from "./SubBar.css";
diff --git a/src/core/client/ui/components/v2/Table/Table.spec.tsx b/src/core/client/ui/components/v2/Table/Table.spec.tsx
index 3f3c7dae7..d1e96d01d 100644
--- a/src/core/client/ui/components/v2/Table/Table.spec.tsx
+++ b/src/core/client/ui/components/v2/Table/Table.spec.tsx
@@ -1,7 +1,7 @@
import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
-import { Table, TableBody, TableCell, TableHead, TableRow } from ".";
+import { Table, TableBody, TableCell, TableHead, TableRow } from "./";
it("renders correctly", () => {
const renderer = createRenderer();
diff --git a/src/core/client/ui/components/v2/Table/TableCell.css b/src/core/client/ui/components/v2/Table/TableCell.css
index ede14d04d..2492f7b47 100644
--- a/src/core/client/ui/components/v2/Table/TableCell.css
+++ b/src/core/client/ui/components/v2/Table/TableCell.css
@@ -1,5 +1,5 @@
-$tableBodyTextColor: var(--v2-colors-mono-500);
-$tableHeaderTextColor: var(--v2-colors-mono-500);
+$tableBodyTextColor: var(--palette-text-500);
+$tableHeaderTextColor: var(--palette-text-500);
.root {
/* acts like min-width in a cell */
@@ -10,19 +10,19 @@ $tableHeaderTextColor: var(--v2-colors-mono-500);
}
.header {
- font-family: var(--v2-font-family-primary);
- line-height: var(--v2-line-height-reset);
- font-weight: var(--v2-font-weight-primary-bold);
- font-size: var(--v2-font-size-2);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-3);
+ font-weight: var(--font-weight-primary-bold);
+ font-size: var(--font-size-2);
color: $tableHeaderTextColor;
- padding: var(--v2-spacing-3);
+ padding: var(--spacing-3);
}
.body {
- font-family: var(--v2-font-family-primary);
- line-height: var(--v2-line-height-title);
- font-weight: var(--v2-font-weight-primary-regular);
- font-size: var(--v2-font-size-2);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-3);
+ font-weight: var(--font-weight-primary-regular);
+ font-size: var(--font-size-2);
color: $tableBodyTextColor;
}
diff --git a/src/core/client/ui/components/v2/Table/TableHead.css b/src/core/client/ui/components/v2/Table/TableHead.css
index 7cc07fc6f..8f21f0d91 100644
--- a/src/core/client/ui/components/v2/Table/TableHead.css
+++ b/src/core/client/ui/components/v2/Table/TableHead.css
@@ -1,4 +1,4 @@
-$tableHeaderBackgroundColor: var(--v2-colors-grey-200);
+$tableHeaderBackgroundColor: var(--palette-grey-200);
.root {
background: $tableHeaderBackgroundColor;
diff --git a/src/core/client/ui/components/v2/Table/TableRow.css b/src/core/client/ui/components/v2/Table/TableRow.css
index 7c0f282b7..9d8c9af39 100644
--- a/src/core/client/ui/components/v2/Table/TableRow.css
+++ b/src/core/client/ui/components/v2/Table/TableRow.css
@@ -1,5 +1,5 @@
-$tableHighlightColor: var(--v2-colors-grey-100);
-$tableHoverColor: var(--v2-colors-teal-100);
+$tableHighlightColor: var(--palette-grey-100);
+$tableHoverColor: $colors-teal-100;
.root {
box-sizing: border-box;
diff --git a/src/core/client/ui/components/v2/Tabs/Tab.css b/src/core/client/ui/components/v2/Tabs/Tab.css
index 79d0e043a..295be8456 100644
--- a/src/core/client/ui/components/v2/Tabs/Tab.css
+++ b/src/core/client/ui/components/v2/Tabs/Tab.css
@@ -1,8 +1,8 @@
-$tab-selected: var(--v2-colors-teal-600);
-$tab-default: var(--v2-colors-mono-100);
+$tab-selected: $colors-teal-600;
+$tab-default: var(--palette-text-100);
-$tab-stream-selected: var(--v2-colors-stream-blue-500);
-$tab-stream-default: var(--v2-colors-mono-500);
+$tab-stream-selected: var(--palette-primary-500);
+$tab-stream-default: var(--palette-text-500);
.root {
display: inline-block;
@@ -20,76 +20,76 @@ $tab-stream-default: var(--v2-colors-mono-500);
}
.root:first-child .primary {
- border-top-left-radius: var(--v2-round-corners);
+ border-top-left-radius: var(--round-corners);
}
.root:last-child .primary {
- border-top-right-radius: var(--v2-round-corners);
+ border-top-right-radius: var(--round-corners);
}
.default {
- margin-right: var(--v2-spacing-3);
+ margin-right: var(--spacing-3);
margin-bottom: -1px;
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-semi-bold);
color: $tab-default;
- padding-bottom: calc(var(--v2-spacing-1) + 2px);
+ padding-bottom: calc(var(--spacing-1) + 2px);
&.active {
color: $tab-selected;
- font-weight: var(--v2-font-weight-primary-bold);
+ font-weight: var(--font-weight-primary-bold);
border-bottom: 2px solid $tab-selected;
- padding-bottom: var(--v2-spacing-1);
+ padding-bottom: var(--spacing-1);
}
}
.primary {
position: relative;
- background: var(--palette-grey-lightest);
- color: var(--palette-grey-main);
- border: 1px solid var(--palette-grey-lighter);
+ background: var(--palette-grey-200);
+ color: var(--palette-grey-500);
+ border: 1px solid var(--palette-grey-300);
padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2);
&.active {
background-color: var(--palette-common-white);
- color: var(--palette-common-black);
+ color: var(--palette-text-900);
border-bottom: 0;
border-top-width: calc(0.5 * var(--mini-unit));
- border-top-color: var(--palette-primary-main);
+ border-top-color: $colors-teal-700;
border-radius: 0;
z-index: 10;
}
}
.secondary {
- margin-right: var(--v2-spacing-3);
+ margin-right: var(--spacing-3);
margin-bottom: -1px;
- font-family: var(--v2-font-family-primary);
+ font-family: var(--font-family-primary);
color: $tab-default;
- padding-bottom: var(--v2-spacing-2);
+ padding-bottom: var(--spacing-2);
&.active {
color: $tab-selected;
- font-weight: var(--v2-font-weight-primary-bold);
+ font-weight: var(--font-weight-primary-bold);
border-bottom: 3px solid $tab-selected;
- padding-bottom: calc(var(--v2-spacing-2) - 3px);
+ padding-bottom: calc(var(--spacing-2) - 3px);
}
}
.streamSecondary {
- margin-right: var(--v2-spacing-3);
+ margin-right: var(--spacing-3);
margin-bottom: -1px;
- font-family: var(--v2-font-family-primary);
+ font-family: var(--font-family-primary);
color: $tab-stream-default;
- padding-bottom: var(--v2-spacing-2);
+ padding-bottom: var(--spacing-2);
&.active {
color: $tab-stream-selected;
- font-weight: var(--v2-font-weight-primary-bold);
+ font-weight: var(--font-weight-primary-bold);
border-bottom: 3px solid $tab-stream-selected;
- padding-bottom: calc(var(--v2-spacing-2) - 3px);
+ padding-bottom: calc(var(--spacing-2) - 3px);
}
}
@@ -99,34 +99,34 @@ $tab-stream-default: var(--v2-colors-mono-500);
margin-right: 0px;
margin-bottom: -1px;
- padding-top: var(--v2-spacing-3);
- padding-bottom: var(--v2-spacing-3);
- padding-left: var(--v2-spacing-6);
- padding-right: var(--v2-spacing-6);
+ padding-top: var(--spacing-3);
+ padding-bottom: var(--spacing-3);
+ padding-left: var(--spacing-6);
+ padding-right: var(--spacing-6);
- background: var(--v2-colors-grey-100);
- border: 1px solid var(--v2-colors-grey-300);
+ background: var(--palette-grey-100);
+ border: 1px solid var(--palette-grey-300);
border-bottom-width: 0px;
- font-family: var(--v2-font-family-secondary);
+ font-family: var(--font-family-secondary);
font-style: normal;
- font-weight: var(--v2-font-weight-secondary-regular);
- font-size: var(--v2-font-size-4);
- line-height: var(--v2-line-height-5);
+ font-weight: var(--font-weight-secondary-regular);
+ font-size: var(--font-size-4);
+ line-height: var(--line-height-5);
- color: var(--v2-colors-mono-500);
+ color: var(--palette-text-500);
&.active {
z-index: 10;
- background-color: var(--v2-colors-pure-white);
+ background-color: var(--palette-background-body);
border-bottom: 0;
border-radius: 0;
- color: var(--v2-colors-stream-blue-500);
- font-weight: var(--v2-font-weight-secondary-bold);
+ color: var(--palette-primary-500);
+ font-weight: var(--font-weight-secondary-bold);
- border-top: 1px solid var(--v2-colors-stream-blue-500);
+ border-top: 1px solid var(--palette-primary-500);
overflow: visible;
}
@@ -140,8 +140,8 @@ $tab-stream-default: var(--v2-colors-mono-500);
width: calc(100% + 2px);
height: 4px;
- background-color: var(--v2-colors-stream-blue-500);
- color: var(--v2-colors-stream-blue-500);
+ background-color: var(--palette-primary-500);
+ color: var(--palette-primary-500);
content: "active";
overflow: hidden;
}
diff --git a/src/core/client/ui/components/v2/Tabs/TabBar.css b/src/core/client/ui/components/v2/Tabs/TabBar.css
index cd7dfd24b..e786a7bb3 100644
--- a/src/core/client/ui/components/v2/Tabs/TabBar.css
+++ b/src/core/client/ui/components/v2/Tabs/TabBar.css
@@ -1,6 +1,6 @@
-$moderateCardTabDefaultColor: var(--v2-colors-grey-100);
-$moderateCardTabPrimaryColor: var(--v2-colors-grey-300);
-$moderateCardTabSecondaryColor: var(--v2-palette-divider);
+$moderateCardTabDefaultColor: var(--palette-grey-100);
+$moderateCardTabPrimaryColor: var(--palette-grey-300);
+$moderateCardTabSecondaryColor: var(--palette-divider);
.root {
display: flex;
diff --git a/src/core/client/ui/components/v2/Tag/Tag.css b/src/core/client/ui/components/v2/Tag/Tag.css
index d8eafbba2..023ea6a99 100644
--- a/src/core/client/ui/components/v2/Tag/Tag.css
+++ b/src/core/client/ui/components/v2/Tag/Tag.css
@@ -1,21 +1,21 @@
-$tag-color-primary: var(--v2-palette-primary-main);
-$tag-color-primary-light: var(--v2-palette-primary-lightest);
-$tag-color-grey: var(--v2-palette-grey-main);
-$tag-color-grey-light: var(--v2-palette-grey-light);
-$tag-color-error: var(--v2-palette-error-main);
-$tag-color-error-light: var(--v2-palette-error-lightest);
-$tag-color-dark: var(--v2-palette-primary-darkest);
-$tag-color-dark-light: var(--v2-palette-primary-lightest);
-$tag-text-color: var(--v2-palette-text-light);
-$tag-pill-bg: var(--v2-colors-pure-white);
+$tag-color-primary: $colors-teal-700;
+$tag-color-primary-light: $colors-teal-100;
+$tag-color-grey: var(--palette-grey-500);
+$tag-color-grey-light: var(--palette-grey-100);
+$tag-color-error: var(--palette-error-500);
+$tag-color-error-light: var(--palette-error-100);
+$tag-color-dark: $colors-teal-900;
+$tag-color-dark-light: $colors-teal-100;
+$tag-text-color: var(--palette-text-000);
+$tag-pill-bg: inherit;
.root {
- font-size: var(--v2-font-size-2);
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-semi-bold);
+ font-size: var(--font-size-2);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-semi-bold);
color: $tag-text-color;
- line-height: var(--v2-line-height-reset);
- padding: var(--v2-spacing-1);
+ line-height: var(--line-height-3);
+ padding: var(--spacing-1);
white-space: nowrap;
border-radius: 2px;
display: inline-block;
@@ -38,7 +38,7 @@ $tag-pill-bg: var(--v2-colors-pure-white);
}
.colorStreamBlue {
- background-color: var(--v2-colors-stream-blue-500);
+ background-color: var(--palette-primary-500);
}
.variantPill {
@@ -62,8 +62,8 @@ $tag-pill-bg: var(--v2-colors-pure-white);
color: $tag-color-dark;
}
&.colorStreamBlue {
- border: 1px solid var(--v2-colors-stream-blue-500);
- color: var(--v2-colors-stream-blue-500);
+ border: 1px solid var(--palette-primary-500);
+ color: var(--palette-primary-500);
}
}
diff --git a/src/core/client/ui/components/v2/TextField/TextField.css b/src/core/client/ui/components/v2/TextField/TextField.css
index 79f1f03a0..51125dcf0 100644
--- a/src/core/client/ui/components/v2/TextField/TextField.css
+++ b/src/core/client/ui/components/v2/TextField/TextField.css
@@ -1,14 +1,14 @@
-$input-value: var(--v2-colors-mono-500);
-$input-border: var(--v2-colors-grey-500);
-$input-background: var(--v2-colors-pure-white);
-$input-placeholder: var(--v2-colors-mono-100);
-$input-regular-focused-border: var(--v2-colors-teal-500);
-$input-streamBlue-focused-border: var(--v2-colors-stream-blue-500);
-$input-disabled-background: var(--v2-colors-white-500);
-$input-disabled-value: var(--v2-colors-grey-400);
-$input-disabled-border: var(--v2-colors-grey-400);
-$input-error-border: var(--v2-colors-red-500);
-$input-dark-focused-border: var(--v2-colors-blue-500);
+$input-value: var(--palette-text-500);
+$input-border: var(--palette-grey-500);
+$input-background: var(--palette-background-input);
+$input-placeholder: var(--palette-text-placeholder);
+$input-regular-focused-border: $colors-teal-500;
+$input-streamBlue-focused-border: var(--palette-primary-500);
+$input-disabled-background: var(--palette-background-input-disabled);
+$input-disabled-value: var(--palette-text-input-disabled);
+$input-disabled-border: var(--palette-grey-400);
+$input-error-border: var(--palette-error-500);
+$input-dark-focused-border: $colors-teal-900;
.root {
display: flex;
@@ -18,16 +18,16 @@ $input-dark-focused-border: var(--v2-colors-blue-500);
}
.input {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
- font-size: var(--v2-font-size-3);
- line-height: var(--v2-line-height-reset);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
+ font-size: var(--font-size-3);
+ line-height: var(--line-height-3);
position: relative;
display: block;
- padding: var(--v2-spacing-2);
+ padding: var(--spacing-2);
box-sizing: border-box;
background-color: $input-background;
- border-radius: var(--v2-round-corners);
+ border-radius: var(--round-corners);
border-style: solid;
width: 100%;
align-self: stretch;
@@ -50,12 +50,12 @@ $input-dark-focused-border: var(--v2-colors-blue-500);
}
.adornment {
- margin-left: var(--v2-spacing-2);
+ margin-left: var(--spacing-2);
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
- font-size: var(--v2-font-size-3);
- line-height: var(--v2-line-height-reset);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
+ font-size: var(--font-size-3);
+ line-height: var(--line-height-3);
}
.colorRegular {
diff --git a/src/core/client/ui/components/v2/TextField/TextField.tsx b/src/core/client/ui/components/v2/TextField/TextField.tsx
index aba3f63f4..422d13282 100644
--- a/src/core/client/ui/components/v2/TextField/TextField.tsx
+++ b/src/core/client/ui/components/v2/TextField/TextField.tsx
@@ -107,6 +107,7 @@ const TextField: FunctionComponent = (props) => {
[classes.colorRegular]: color === "regular",
[classes.colorError]: color === "error",
[classes.colorDark]: color === "dark",
+ [classes.colorStreamBlue]: color === "streamBlue",
[classes.textAlignCenter]: textAlignCenter,
[classes.seamlessAdornment]: variant === "seamlessAdornment",
});
diff --git a/src/core/client/ui/components/v2/TextFieldAdornment/TextFieldAdornment.css b/src/core/client/ui/components/v2/TextFieldAdornment/TextFieldAdornment.css
index 5284935ba..46bb62af8 100644
--- a/src/core/client/ui/components/v2/TextFieldAdornment/TextFieldAdornment.css
+++ b/src/core/client/ui/components/v2/TextFieldAdornment/TextFieldAdornment.css
@@ -1,7 +1,7 @@
.root {
- color: var(--v2-palette-input-label);
- font-size: var(--v2-font-size-3);
- font-weight: var(--v2-font-weight-primary-regular);
- font-family: var(--v2-font-family-primary);
- line-height: var(--v2-line-height-title);
+ color: var(--palette-text-500);
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-4);
}
diff --git a/src/core/client/ui/components/v2/TextLink/TextLink.css b/src/core/client/ui/components/v2/TextLink/TextLink.css
index 9a074c8d5..309844ce3 100644
--- a/src/core/client/ui/components/v2/TextLink/TextLink.css
+++ b/src/core/client/ui/components/v2/TextLink/TextLink.css
@@ -1,5 +1,5 @@
.root {
- color: var(--v2-palette-primary-main);
+ color: $colors-teal-700;
text-decoration: underline;
}
diff --git a/src/core/client/ui/components/v2/TextLink/TextLink.tsx b/src/core/client/ui/components/v2/TextLink/TextLink.tsx
index 1237592c9..386b14c13 100644
--- a/src/core/client/ui/components/v2/TextLink/TextLink.tsx
+++ b/src/core/client/ui/components/v2/TextLink/TextLink.tsx
@@ -1,7 +1,7 @@
import cn from "classnames";
-import { Icon } from "coral-ui/components";
import React, { AnchorHTMLAttributes, StatelessComponent } from "react";
+import { Icon } from "coral-ui/components/v2";
import { withStyles } from "coral-ui/hocs";
import styles from "./TextLink.css";
diff --git a/src/core/client/ui/components/v2/Textarea/Textarea.css b/src/core/client/ui/components/v2/Textarea/Textarea.css
index 6f67fec30..cce4e5fbe 100644
--- a/src/core/client/ui/components/v2/Textarea/Textarea.css
+++ b/src/core/client/ui/components/v2/Textarea/Textarea.css
@@ -1,25 +1,26 @@
.root {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
- font-size: var(--v2-font-size-3);
- line-height: var(--v2-line-height-body-short);
- padding: var(--v2-spacing-2);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
+ font-size: var(--font-size-3);
+ line-height: var(--line-height-field-description);
+ padding: var(--spacing-2);
box-sizing: border-box;
border-radius: var(--round-corners);
- color: var(--v2-palette-input-value);
- background-color: var(--v2-palette-input-background);
- border: 1px solid var(--v2-palette-input-border);
+ color: var(--palette-text-500);
+ background-color: var(--palette-background-input);
+ border: 1px solid var(--palette-grey-500);
&:read-only {
- background-color: var(--v2-palette-input-disabled-background);
+ background-color: var(--palette-background-input-disabled);
}
&:disabled {
- background-color: var(--v2-palette-input-disabled-background);
- border-color: var(--v2-palette-input-disabled-foreground);
+ background-color: var(--palette-background-input-disabled);
+ border-color: var(--palette-text-input-disabled);
+ color: var(--palette-text-input-disabled);
}
&:focus {
outline: none;
- border: 1px solid var(--v2-palette-input-focused-border);
- box-shadow: inset 0px 0px 0px 1px var(--v2-palette-input-focused-border);
+ border: 1px solid $colors-teal-500;
+ box-shadow: inset 0px 0px 0px 1px $colors-teal-500;
}
}
diff --git a/src/core/client/ui/components/TileSelector/README.mdx b/src/core/client/ui/components/v2/TileSelector/README.mdx
similarity index 98%
rename from src/core/client/ui/components/TileSelector/README.mdx
rename to src/core/client/ui/components/v2/TileSelector/README.mdx
index 3c570b038..d83d56d83 100644
--- a/src/core/client/ui/components/TileSelector/README.mdx
+++ b/src/core/client/ui/components/v2/TileSelector/README.mdx
@@ -1,6 +1,6 @@
---
name: TileSelector
-menu: UI Kit v1
+menu: UI Kit v2
---
import { Playground } from "docz";
diff --git a/src/core/client/ui/components/v2/TileSelector/TileOption.css b/src/core/client/ui/components/v2/TileSelector/TileOption.css
new file mode 100644
index 000000000..a8b485185
--- /dev/null
+++ b/src/core/client/ui/components/v2/TileSelector/TileOption.css
@@ -0,0 +1,31 @@
+.input {
+ cursor: pointer;
+ position: absolute; /* take it out of document flow */
+ opacity: 0; /* hide it */
+}
+
+.label {
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-5);
+
+ display: inline-flex;
+ align-items: center;
+ position: relative;
+ cursor: pointer;
+ user-select: none;
+ border: 1px solid var(--palette-grey-300);
+ border-radius: var(--round-corners);
+ color: var(--palette-text-500);
+ padding: var(--spacing-1);
+ line-height: var(--line-height-3);
+ box-sizing: border-box;
+ height: 100%;
+}
+
+.checked {
+ border: 1px solid var(--palette-grey-700);
+ background: var(--palette-grey-700);
+ color: var(--palette-text-000);
+}
diff --git a/src/core/client/ui/components/TileSelector/TileOption.tsx b/src/core/client/ui/components/v2/TileSelector/TileOption.tsx
similarity index 100%
rename from src/core/client/ui/components/TileSelector/TileOption.tsx
rename to src/core/client/ui/components/v2/TileSelector/TileOption.tsx
diff --git a/src/core/client/ui/components/TileSelector/TileSelector.css b/src/core/client/ui/components/v2/TileSelector/TileSelector.css
similarity index 100%
rename from src/core/client/ui/components/TileSelector/TileSelector.css
rename to src/core/client/ui/components/v2/TileSelector/TileSelector.css
diff --git a/src/core/client/ui/components/TileSelector/TileSelector.tsx b/src/core/client/ui/components/v2/TileSelector/TileSelector.tsx
similarity index 96%
rename from src/core/client/ui/components/TileSelector/TileSelector.tsx
rename to src/core/client/ui/components/v2/TileSelector/TileSelector.tsx
index f46056390..5cd47ef24 100644
--- a/src/core/client/ui/components/TileSelector/TileSelector.tsx
+++ b/src/core/client/ui/components/v2/TileSelector/TileSelector.tsx
@@ -1,7 +1,7 @@
import cn from "classnames";
import React, { FunctionComponent, ReactElement, useCallback } from "react";
-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
import styles from "./TileSelector.css";
diff --git a/src/core/client/ui/components/TileSelector/index.ts b/src/core/client/ui/components/v2/TileSelector/index.ts
similarity index 100%
rename from src/core/client/ui/components/TileSelector/index.ts
rename to src/core/client/ui/components/v2/TileSelector/index.ts
diff --git a/src/core/client/ui/components/v2/Timestamp/Timestamp.css b/src/core/client/ui/components/v2/Timestamp/Timestamp.css
index 2375b394e..7a7863955 100644
--- a/src/core/client/ui/components/v2/Timestamp/Timestamp.css
+++ b/src/core/client/ui/components/v2/Timestamp/Timestamp.css
@@ -1,4 +1,4 @@
-$timestampColor: var(--v2-colors-mono-100);
+$timestampColor: var(--palette-text-100);
.root {
cursor: default;
@@ -6,8 +6,8 @@ $timestampColor: var(--v2-colors-mono-100);
.text {
color: $timestampColor;
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
- font-size: var(--v2-font-size-2);
- line-height: var(--v2-line-height-reset);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
+ font-size: var(--font-size-2);
+ line-height: var(--line-height-3);
}
diff --git a/src/core/client/ui/components/v2/Tooltip/Tooltip.css b/src/core/client/ui/components/v2/Tooltip/Tooltip.css
index a29ee6e9a..6ff72d3e7 100644
--- a/src/core/client/ui/components/v2/Tooltip/Tooltip.css
+++ b/src/core/client/ui/components/v2/Tooltip/Tooltip.css
@@ -1,4 +1,4 @@
-$tooltip-contents: var(--v2-colors-pure-white);
+$tooltip-contents: var(--palette-text-000);
.root {
align-items: center;
@@ -11,19 +11,19 @@ $tooltip-contents: var(--v2-colors-pure-white);
}
.title {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-bold);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-bold);
color: $tooltip-contents;
- line-height: var(--v2-line-height-body-short);
- margin: 0 0 var(--v2-spacing-1) 0;
- font-size: var(--v2-font-size-2);
+ line-height: var(--line-height-4);
+ margin: 0 0 var(--spacing-1) 0;
+ font-size: var(--font-size-2);
}
.contents {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
color: $tooltip-contents;
- line-height: var(--v2-line-height-body-short);
+ line-height: var(--line-height-4);
margin: 0;
- font-size: var(--v2-font-size-2);
+ font-size: var(--font-size-2);
}
diff --git a/src/core/client/ui/components/v2/Tooltip/Tooltip.tsx b/src/core/client/ui/components/v2/Tooltip/Tooltip.tsx
index 2e73445d6..1f7a37a0e 100644
--- a/src/core/client/ui/components/v2/Tooltip/Tooltip.tsx
+++ b/src/core/client/ui/components/v2/Tooltip/Tooltip.tsx
@@ -1,8 +1,7 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
-import { Box, ClickOutside } from "coral-ui/components";
-import { Popover } from "coral-ui/components/v2";
+import { Box, ClickOutside, Popover } from "coral-ui/components/v2";
import { PropTypesOf } from "coral-ui/types";
import styles from "./Tooltip.css";
diff --git a/src/core/client/ui/components/v2/Tooltip/TooltipButton.css b/src/core/client/ui/components/v2/Tooltip/TooltipButton.css
index ba72cfef2..75dfcd06d 100644
--- a/src/core/client/ui/components/v2/Tooltip/TooltipButton.css
+++ b/src/core/client/ui/components/v2/Tooltip/TooltipButton.css
@@ -1,4 +1,4 @@
-$tooltip-button: var(--v2-colors-mono-500);
+$tooltip-button: var(--palette-text-500);
.button {
line-height: 0;
diff --git a/src/core/client/ui/components/v2/Tooltip/TooltipButton.tsx b/src/core/client/ui/components/v2/Tooltip/TooltipButton.tsx
index 658188e0d..8964b1ff4 100644
--- a/src/core/client/ui/components/v2/Tooltip/TooltipButton.tsx
+++ b/src/core/client/ui/components/v2/Tooltip/TooltipButton.tsx
@@ -2,11 +2,10 @@ import cn from "classnames";
import React, { ButtonHTMLAttributes, FunctionComponent, Ref } from "react";
import { BaseButton, Icon } from "coral-ui/components/v2";
+import { IconColor } from "coral-ui/components/v2/Icon/Icon";
import { withForwardRef } from "coral-ui/hocs";
import { PropTypesOf } from "coral-ui/types";
-import { IconColor } from "coral-ui/components/v2/Icon/Icon";
-
import styles from "./TooltipButton.css";
interface Props extends ButtonHTMLAttributes {
diff --git a/src/core/client/ui/components/Typography/README.mdx b/src/core/client/ui/components/v2/Typography/README.mdx
similarity index 99%
rename from src/core/client/ui/components/Typography/README.mdx
rename to src/core/client/ui/components/v2/Typography/README.mdx
index 2436c1a4d..118783e74 100644
--- a/src/core/client/ui/components/Typography/README.mdx
+++ b/src/core/client/ui/components/v2/Typography/README.mdx
@@ -1,6 +1,6 @@
---
name: Typography
-menu: UI Kit v1
+menu: UI Kit v2
---
import { Playground } from "docz";
diff --git a/src/core/client/ui/components/v2/Typography/Typography.css b/src/core/client/ui/components/v2/Typography/Typography.css
new file mode 100644
index 000000000..d49ea4687
--- /dev/null
+++ b/src/core/client/ui/components/v2/Typography/Typography.css
@@ -0,0 +1,232 @@
+.root {
+ margin: 0;
+ padding: 0;
+}
+
+.heading1 {
+ font-size: var(--font-size-6);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-6);
+ color: var(--palette-text-500);
+}
+
+.heading2 {
+ font-size: var(--font-size-5);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-5);
+ color: var(--palette-text-500);
+}
+
+.heading3 {
+ font-size: var(--font-size-4);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-4);
+ color: var(--palette-text-500);
+}
+
+.heading4 {
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-3);
+ color: var(--palette-text-500);
+}
+
+.heading5 {
+ font-size: var(--font-size-2);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-2);
+ color: var(--palette-text-500);
+}
+
+.header1 {
+ font-size: var(--font-size-6);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-6);
+ color: var(--palette-text-500);
+}
+
+.header2 {
+ font-size: var(--font-size-5);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-5);
+ color: var(--palette-text-500);
+}
+
+.header3 {
+ font-size: var(--font-size-4);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-4);
+ color: var(--palette-text-500);
+}
+
+.header4 {
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-3);
+ color: var(--palette-text-500);
+}
+
+.header5 {
+ font-size: var(--font-size-2);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-2);
+ color: var(--palette-text-500);
+}
+
+.bodyCopy {
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-4);
+ color: var(--palette-text-500);
+}
+
+.bodyCopyBold {
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-primary-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-4);
+ color: var(--palette-text-500);
+}
+
+.bodyShort {
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-4);
+ color: var(--palette-text-500);
+}
+
+.fieldDescription {
+ font-size: var(--font-size-2);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-3);
+ color: var(--palette-text-100);
+}
+
+.button {
+ font-size: var(--font-size-2);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-4);
+ color: var(--palette-text-500);
+}
+
+.buttonLarge {
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-5);
+ color: var(--palette-text-500);
+}
+
+.detail {
+ font-size: var(--font-size-2);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-4);
+ color: var(--palette-text-500);
+}
+
+.timestamp {
+ font-size: var(--font-size-2);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-4);
+ color: var(--palette-text-100);
+}
+
+.alignLeft {
+ text-align: left;
+}
+
+.alignCenter {
+ text-align: center;
+}
+
+.alignRight {
+ text-align: right;
+}
+
+.alignJustify {
+ text-align: justify;
+}
+
+.noWrap {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.gutterBottom {
+ margin-bottom: 0.35em;
+}
+
+.paragraph {
+ margin-bottom: var(--mini-unit);
+}
+
+.colorPrimary {
+ color: $colors-teal-700;
+}
+
+.colorTextPrimary {
+ color: var(--palette-text-500);
+}
+
+.colorTextSecondary {
+ color: var(--palette-text-100);
+}
+
+.colorTextDark {
+ color: var(--palette-text-900);
+}
+
+.colorTextLight {
+ color: var(--palette-text-000);
+}
+
+.colorError {
+ color: var(--palette-error-500);
+}
+
+.colorErrorDark {
+ color: var(--palette-error-600);
+}
+
+.colorWarning {
+ color: "#DC8400";
+}
+
+.colorSuccess {
+ color: var(--palette-success-500);
+}
+
+.inputLabel {
+ font-size: var(--font-size-4);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-3);
+ color: var(--palette-text-500);
+}
+
+/* V2 Typography */
+
+.bodyCommentV2 {
+ font-size: var(--font-size-3);
+ font-weight: var(--font-weight-primary-regular);
+ font-family: var(--font-family-primary);
+ line-height: var(--line-height-comment-body);
+ color: var(--palette-text-500);
+}
diff --git a/src/core/client/ui/components/Typography/Typography.spec.tsx b/src/core/client/ui/components/v2/Typography/Typography.spec.tsx
similarity index 100%
rename from src/core/client/ui/components/Typography/Typography.spec.tsx
rename to src/core/client/ui/components/v2/Typography/Typography.spec.tsx
diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/v2/Typography/Typography.tsx
similarity index 99%
rename from src/core/client/ui/components/Typography/Typography.tsx
rename to src/core/client/ui/components/v2/Typography/Typography.tsx
index d3fd67958..ad4e9f794 100644
--- a/src/core/client/ui/components/Typography/Typography.tsx
+++ b/src/core/client/ui/components/v2/Typography/Typography.tsx
@@ -1,12 +1,11 @@
import cn from "classnames";
import React, { FunctionComponent, ReactNode } from "react";
+/** Needs to be loaded after styles, because Box styles have priority */
+import { Box } from "coral-ui/components/v2";
import { withForwardRef, withStyles } from "coral-ui/hocs";
import { PropTypesOf } from "coral-ui/types";
-/** Needs to be loaded after styles, because Box styles have priority */
-import Box from "../Box";
-
/* In this case the Box styles have higher priority! */
import styles from "./Typography.css";
diff --git a/src/core/client/ui/components/Typography/__snapshots__/Typography.spec.tsx.snap b/src/core/client/ui/components/v2/Typography/__snapshots__/Typography.spec.tsx.snap
similarity index 100%
rename from src/core/client/ui/components/Typography/__snapshots__/Typography.spec.tsx.snap
rename to src/core/client/ui/components/v2/Typography/__snapshots__/Typography.spec.tsx.snap
diff --git a/src/core/client/ui/components/Typography/index.ts b/src/core/client/ui/components/v2/Typography/index.ts
similarity index 100%
rename from src/core/client/ui/components/Typography/index.ts
rename to src/core/client/ui/components/v2/Typography/index.ts
diff --git a/src/core/client/ui/components/v2/index.ts b/src/core/client/ui/components/v2/index.ts
index 6e1d8b88c..8083a543f 100644
--- a/src/core/client/ui/components/v2/index.ts
+++ b/src/core/client/ui/components/v2/index.ts
@@ -15,6 +15,7 @@ export {
UIContextProps,
useUIContext,
} from "./UIContext";
+export { BrandName, BrandMark, LogoHorizontal } from "./Brand";
export { default as ClickOutside } from "./ClickOutside";
export { default as Box } from "./Box";
export { default as Button } from "./Button";
@@ -71,8 +72,12 @@ export {
default as ValidationMessage,
ValidationMessageProps,
} from "./ValidationMessage";
-export { BrandName, BrandMark, LogoHorizontal } from "./Brand";
export { default as InputLabel } from "./InputLabel";
export { default as AppNotification } from "./AppNotification";
export { default as HorizontalRule } from "./HorizontalRule";
export { StepBar, Step } from "./Steps";
+export { default as CheckIcon } from "./CheckIcon";
+export { default as InputDescription } from "./InputDescription";
+export { default as Popup } from "./Popup";
+export { default as Typography } from "./Typography";
+export { TileSelector, Option as TileOption } from "./TileSelector";
diff --git a/src/core/client/ui/components/v3/Button/Button.css b/src/core/client/ui/components/v3/Button/Button.css
index 61715e8e4..b71205dc2 100644
--- a/src/core/client/ui/components/v3/Button/Button.css
+++ b/src/core/client/ui/components/v3/Button/Button.css
@@ -1,5 +1,5 @@
.base {
- border-radius: var(--v2-round-corners);
+ border-radius: var(--round-corners);
}
.upperCase {
@@ -7,55 +7,55 @@
}
.fontFamilyPrimary {
- font-family: var(--v2-font-family-primary);
+ font-family: var(--font-family-primary);
}
.fontFamilySecondary{
- font-family: var(--v2-font-family-secondary);
+ font-family: var(--font-family-secondary);
}
.fontWeightPrimaryBold {
- font-weight: var(--v2-font-weight-primary-bold);
+ font-weight: var(--font-weight-primary-bold);
}
.fontWeightPrimarySemiBold {
- font-weight: var(--v2-font-weight-primary-semi-bold);
+ font-weight: var(--font-weight-primary-semi-bold);
}
.fontWeightPrimaryRegular {
- font-weight: var(--v2-font-weight-primary-regular);
+ font-weight: var(--font-weight-primary-regular);
}
.fontWeightSecondaryBold {
- font-weight: var(--v2-font-weight-secondary-bold);
+ font-weight: var(--font-weight-secondary-bold);
}
.fontWeightSecondarySemiBold {
- font-weight: var(--v2-font-weight-secondary-bold);
+ font-weight: var(--font-weight-secondary-bold);
}
.fontWeightSecondaryRegular {
- font-weight: var(--v2-font-weight-secondary-regular);
+ font-weight: var(--font-weight-secondary-regular);
}
.fontSizeExtraSmall {
- font-size: var(--v2-font-size-1);
- line-height: var(--v2-line-height-3);
+ font-size: var(--font-size-1);
+ line-height: var(--line-height-3);
}
.fontSizeSmall {
- font-size: var(--v2-font-size-2);
- line-height: var(--v2-line-height-3);
+ font-size: var(--font-size-2);
+ line-height: var(--line-height-3);
}
.fontSizeMedium {
- font-size: var(--v2-font-size-2);
- line-height: var(--v2-line-height-3);
+ font-size: var(--font-size-2);
+ line-height: var(--line-height-3);
}
.fontSizeLarge {
- font-size: var(--v2-font-size-3);
- line-height: var(--v2-line-height-3);
+ font-size: var(--font-size-3);
+ line-height: var(--line-height-3);
}
.textAlignLeft {
@@ -71,31 +71,31 @@
}
.paddingSizeExtraSmall {
- padding-left: var(--v2-spacing-2);
- padding-right: var(--v2-spacing-2);
- padding-top: var(--v2-spacing-1);
- padding-bottom: var(--v2-spacing-1);
+ padding-left: var(--spacing-2);
+ padding-right: var(--spacing-2);
+ padding-top: var(--spacing-1);
+ padding-bottom: var(--spacing-1);
}
.paddingSizeSmall {
- padding-left: var(--v2-spacing-3);
- padding-right: var(--v2-spacing-3);
- padding-top: var(--v2-spacing-2);
- padding-bottom: var(--v2-spacing-2);
+ padding-left: var(--spacing-3);
+ padding-right: var(--spacing-3);
+ padding-top: var(--spacing-2);
+ padding-bottom: var(--spacing-2);
}
.paddingSizeMedium {
- padding-left: var(--v2-spacing-4);
- padding-right: var(--v2-spacing-4);
- padding-top: var(--v2-spacing-3);
- padding-bottom: var(--v2-spacing-3);
+ padding-left: var(--spacing-4);
+ padding-right: var(--spacing-4);
+ padding-top: var(--spacing-3);
+ padding-bottom: var(--spacing-3);
}
.paddingSizeLarge {
- padding-left: var(--v2-spacing-5);
- padding-right: var(--v2-spacing-5);
- padding-top: var(--v2-spacing-4);
- padding-bottom: var(--v2-spacing-4);
+ padding-left: var(--spacing-5);
+ padding-right: var(--spacing-5);
+ padding-top: var(--spacing-4);
+ padding-bottom: var(--spacing-4);
}
.filled {
@@ -103,98 +103,98 @@
border-width: 1px;
&.colorPrimary {
- color: var(--v2-colors-pure-white);
+ color: var(--palette-text-000);
&:not(.disabled),
&:not(:disabled) {
- background-color: var(--v2-colors-stream-blue-500);
- border-color: var(--v2-colors-stream-blue-500);
+ background-color: var(--palette-primary-500);
+ border-color: var(--palette-primary-500);
}
&:hover, &.mouseHover {
- background-color: var(--v2-colors-stream-blue-600);
- border-color: var(--v2-colors-stream-blue-600);
+ background-color: var(--palette-primary-600);
+ border-color: var(--palette-primary-600);
}
&:active, &.active {
- background-color: var(--v2-colors-stream-blue-700);
- border-color: var(--v2-colors-stream-blue-700);
+ background-color: var(--palette-primary-700);
+ border-color: var(--palette-primary-700);
}
&.disabled {
- color: var(--v2-colors-grey-400);
- background-color: var(--v2-colors-grey-200);
- border-color: var(--v2-colors-grey-200);
+ color: var(--palette-grey-400);
+ background-color: var(--palette-grey-200);
+ border-color: var(--palette-grey-200);
}
}
&.colorSecondary {
- color: var(--v2-colors-pure-white);
+ color: var(--palette-text-000);
&:not(.disabled),
&:not(:disabled) {
- background-color: var(--v2-colors-grey-500);
- border-color: var(--v2-colors-grey-500);
+ background-color: var(--palette-grey-500);
+ border-color: var(--palette-grey-500);
}
&:hover, &.mouseHover {
- background-color: var(--v2-colors-grey-600);
- border-color: var(--v2-colors-grey-600);
+ background-color: var(--palette-grey-600);
+ border-color: var(--palette-grey-600);
}
&:active, &.active {
- background-color: var(--v2-colors-grey-700);
- border-color: var(--v2-colors-grey-700);
+ background-color: var(--palette-grey-700);
+ border-color: var(--palette-grey-700);
}
&.disabled {
- color: var(--v2-colors-grey-400);
- background-color: var(--v2-colors-grey-200);
- border-color: var(--v2-colors-grey-200);
+ color: var(--palette-grey-400);
+ background-color: var(--palette-grey-200);
+ border-color: var(--palette-grey-200);
}
}
&.colorNegative {
- color: var(--v2-colors-pure-white);
+ color: var(--palette-text-000);
&:not(.disabled),
&:not(:disabled) {
- background-color: var(--v2-colors-red-500);
- border-color: var(--v2-colors-red-500);
+ background-color: var(--palette-error-500);
+ border-color: var(--palette-error-500);
}
&:hover, &.mouseHover {
- background-color: var(--v2-colors-red-600);
- border-color: var(--v2-colors-red-600);
+ background-color: var(--palette-error-600);
+ border-color: var(--palette-error-600);
}
&:active, &.active {
- background-color: var(--v2-colors-red-700);
- border-color: var(--v2-colors-red-700);
+ background-color: var(--palette-error-700);
+ border-color: var(--palette-error-700);
}
&.disabled {
- color: var(--v2-colors-grey-400);
- background-color: var(--v2-colors-grey-200);
- border-color: var(--v2-colors-grey-200);
+ color: var(--palette-grey-400);
+ background-color: var(--palette-grey-200);
+ border-color: var(--palette-grey-200);
}
}
&.colorPositive {
- color: var(--v2-colors-pure-white);
+ color: var(--palette-text-000);
&:not(.disabled),
&:not(:disabled) {
- background-color: var(--v2-colors-green-500);
- border-color: var(--v2-colors-green-500);
+ background-color: var(--palette-success-500);
+ border-color: var(--palette-success-500);
}
&:hover, &.mouseHover {
- background-color: var(--v2-colors-green-600);
- border-color: var(--v2-colors-green-600);
+ background-color: var(--palette-success-600);
+ border-color: var(--palette-success-600);
}
&:active, &.active {
- background-color: var(--v2-colors-green-700);
- border-color: var(--v2-colors-green-700);
+ background-color: var(--palette-success-700);
+ border-color: var(--palette-success-700);
}
&.disabled {
- color: var(--v2-colors-grey-400);
- background-color: var(--v2-colors-grey-200);
- border-color: var(--v2-colors-grey-200);
+ color: var(--palette-grey-400);
+ background-color: var(--palette-grey-200);
+ border-color: var(--palette-grey-200);
}
}
}
@@ -206,25 +206,25 @@
&:not(.disabled),
&:not(:disabled) {
- background-color: var(--v2-colors-pure-white);
- border-color: var(--v2-colors-stream-blue-500);
- color: var(--v2-colors-stream-blue-500);
+ background-color: inherit;
+ border-color: var(--palette-primary-500);
+ color: var(--palette-primary-500);
}
&:hover, &.mouseHover {
- background-color: var(--v2-colors-stream-blue-500);
- border-color: var(--v2-colors-stream-blue-500);
- color: var(--v2-colors-pure-white);
+ background-color: var(--palette-primary-500);
+ border-color: var(--palette-primary-500);
+ color: var(--palette-text-000);
}
&:active, &.active {
- background-color: var(--v2-colors-stream-blue-600);
- border-color: var(--v2-colors-stream-blue-600);
- color: var(--v2-colors-pure-white);
+ background-color: var(--palette-primary-600);
+ border-color: var(--palette-primary-600);
+ color: var(--palette-text-000);
}
&.disabled {
- background-color: var(--v2-colors-pure-white);
- border-color: var(--v2-colors-grey-400);
- color: var(--v2-colors-grey-400);
+ background-color: inherit;
+ border-color: var(--palette-grey-400);
+ color: var(--palette-grey-400);
}
}
@@ -234,25 +234,25 @@
&:not(.disabled),
&:not(:disabled) {
- background-color: var(--v2-colors-pure-white);
- border-color: var(--v2-colors-grey-500);
- color: var(--v2-colors-grey-500);
+ background-color: inherit;
+ border-color: var(--palette-grey-500);
+ color: var(--palette-grey-500);
}
&:hover, &.mouseHover {
- background-color: var(--v2-colors-grey-500);
- border-color: var(--v2-colors-grey-500);
- color: var(--v2-colors-pure-white);
+ background-color: var(--palette-grey-500);
+ border-color: var(--palette-grey-500);
+ color: var(--palette-text-000);
}
&:active, &.active {
- background-color: var(--v2-colors-grey-600);
- border-color: var(--v2-colors-grey-600);
- color: var(--v2-colors-pure-white);
+ background-color: var(--palette-grey-600);
+ border-color: var(--palette-grey-600);
+ color: var(--palette-text-000);
}
&.disabled {
- background-color: var(--v2-colors-pure-white);
- border-color: var(--v2-colors-grey-400);
- color: var(--v2-colors-grey-400);
+ background-color: inherit;
+ border-color: var(--palette-grey-400);
+ color: var(--palette-grey-400);
}
}
@@ -262,25 +262,25 @@
&:not(.disabled),
&:not(:disabled) {
- background-color: var(--v2-colors-pure-white);
- border-color: var(--v2-colors-red-500);
- color: var(--v2-colors-red-500);
+ background-color: inherit;
+ border-color: var(--palette-error-500);
+ color: var(--palette-error-500);
}
&:hover, &.mouseHover {
- background-color: var(--v2-colors-red-500);
- border-color: var(--v2-colors-red-500);
- color: var(--v2-colors-pure-white);
+ background-color: var(--palette-error-500);
+ border-color: var(--palette-error-500);
+ color: var(--palette-text-000);
}
&:active, &.active {
- background-color: var(--v2-colors-red-600);
- border-color: var(--v2-colors-red-600);
- color: var(--v2-colors-pure-white);
+ background-color: var(--palette-error-600);
+ border-color: var(--palette-error-600);
+ color: var(--palette-text-000);
}
&.disabled {
- background-color: var(--v2-colors-pure-white);
- border-color: var(--v2-colors-grey-400);
- color: var(--v2-colors-grey-400);
+ background-color: inherit;
+ border-color: var(--palette-grey-400);
+ color: var(--palette-grey-400);
}
}
@@ -290,25 +290,25 @@
&:not(.disabled),
&:not(:disabled) {
- background-color: var(--v2-colors-pure-white);
- border-color: var(--v2-colors-green-500);
- color: var(--v2-colors-green-500);
+ background-color: inherit;
+ border-color: var(--palette-success-500);
+ color: var(--palette-success-500);
}
&:hover, &.mouseHover {
- background-color: var(--v2-colors-green-500);
- border-color: var(--v2-colors-green-500);
- color: var(--v2-colors-pure-white);
+ background-color: var(--palette-success-500);
+ border-color: var(--palette-success-500);
+ color: var(--palette-text-000);
}
&:active, &.active {
- background-color: var(--v2-colors-green-600);
- border-color: var(--v2-colors-green-600);
- color: var(--v2-colors-pure-white);
+ background-color: var(--palette-success-600);
+ border-color: var(--palette-success-600);
+ color: var(--palette-text-000);
}
&.disabled {
- background-color: var(--v2-colors-pure-white);
- border-color: var(--v2-colors-grey-400);
- color: var(--v2-colors-grey-400);
+ background-color: inherit;
+ border-color: var(--palette-grey-400);
+ color: var(--palette-grey-400);
}
}
}
@@ -319,68 +319,68 @@
&.colorPrimary {
&:not(.disabled),
&:not(:disabled) {
- color: var(--v2-colors-stream-blue-500);
+ color: var(--palette-primary-500);
}
&:hover, &.mouseHover {
- color: var(--v2-colors-stream-blue-600);
+ color: var(--palette-primary-600);
}
&:active, &.active {
- color: var(--v2-colors-stream-blue-700);
+ color: var(--palette-primary-700);
}
&.disabled {
- color: var(--v2-colors-grey-400);
+ color: var(--palette-grey-400);
}
}
&.colorSecondary {
&:not(.disabled),
&:not(:disabled) {
- color: var(--v2-colors-grey-500);
+ color: var(--palette-grey-500);
}
&:hover, &.mouseHover {
- color: var(--v2-colors-grey-600);
+ color: var(--palette-grey-600);
}
&:active, &.active {
- color: var(--v2-colors-grey-700);
+ color: var(--palette-grey-700);
}
&.disabled {
- color: var(--v2-colors-grey-400);
+ color: var(--palette-grey-400);
}
}
&.colorNegative {
&:not(.disabled),
&:not(:disabled) {
- color: var(--v2-colors-red-500);
+ color: var(--palette-error-500);
}
&:hover, &.mouseHover {
- color: var(--v2-colors-red-600);
+ color: var(--palette-error-600);
}
&:active, &.active {
- color: var(--v2-colors-red-700);
+ color: var(--palette-error-700);
}
&.disabled {
- color: var(--v2-colors-grey-400);
+ color: var(--palette-grey-400);
}
}
&.colorPositive{
&:not(.disabled),
&:not(:disabled) {
- color: var(--v2-colors-green-500);
+ color: var(--palette-success-500);
}
&:hover, &.mouseHover {
- color: var(--v2-colors-green-600);
+ color: var(--palette-success-600);
}
&:active, &.active {
- color: var(--v2-colors-green-700);
+ color: var(--palette-success-700);
}
&.disabled {
- color: var(--v2-colors-grey-400);
+ color: var(--palette-grey-400);
}
}
}
diff --git a/src/core/client/ui/components/v3/Button/Button.tsx b/src/core/client/ui/components/v3/Button/Button.tsx
index 20c171d93..ea691cf88 100644
--- a/src/core/client/ui/components/v3/Button/Button.tsx
+++ b/src/core/client/ui/components/v3/Button/Button.tsx
@@ -1,10 +1,10 @@
import cn from "classnames";
import { pick } from "lodash";
-import React from "react";
+import React, { Ref } from "react";
import { BaseButton } from "coral-ui/components/v2";
import { BaseButtonProps } from "coral-ui/components/v2/BaseButton";
-import { withStyles } from "coral-ui/hocs";
+import { withForwardRef, withStyles } from "coral-ui/hocs";
import styles from "./Button.css";
@@ -25,10 +25,14 @@ interface Props extends Omit {
color?: "primary" | "secondary" | "positive" | "negative" | "none";
variant?: "filled" | "outlined" | "flat" | "none";
+ active?: boolean;
upperCase?: boolean;
underline?: boolean;
disabled?: boolean;
fullWidth?: boolean;
+
+ /** Internal: Forwarded Ref */
+ forwardRef?: Ref;
}
export class Button extends React.Component {
@@ -50,6 +54,8 @@ export class Button extends React.Component {
underline = false,
fullWidth = false,
href,
+ forwardRef,
+ active,
...rest
} = this.props;
@@ -60,6 +66,7 @@ export class Button extends React.Component {
[classes.filled]: variant === "filled",
[classes.outlined]: variant === "outlined",
[classes.flat]: variant === "flat",
+ [classes.active]: active,
[classes.fontSizeExtraSmall]: fontSize === "extraSmall",
[classes.fontSizeSmall]: fontSize === "small",
[classes.fontSizeMedium]: fontSize === "medium",
@@ -105,6 +112,7 @@ export class Button extends React.Component {
to={to}
href={href}
anchor={href ? true : false}
+ ref={forwardRef}
{...rest}
>
{children}
@@ -113,6 +121,6 @@ export class Button extends React.Component {
}
}
-const enhanced = withStyles(styles)(Button);
+const enhanced = withForwardRef(withStyles(styles)(Button));
export default enhanced;
diff --git a/src/core/client/ui/components/v3/CallOut/CallOut.css b/src/core/client/ui/components/v3/CallOut/CallOut.css
index 3a7f51a06..658aada47 100644
--- a/src/core/client/ui/components/v3/CallOut/CallOut.css
+++ b/src/core/client/ui/components/v3/CallOut/CallOut.css
@@ -1,7 +1,7 @@
.root {
position: relative;
- padding: var(--v2-spacing-2);
+ padding: var(--spacing-2);
}
.topBorder {
@@ -17,88 +17,88 @@
}
.title {
- font-family: var(--v2-font-family-primary);
+ font-family: var(--font-family-primary);
}
.titleBold {
- font-weight: var(--v2-font-weight-primary-bold);
- font-size: var(--v2-font-size-3);
- line-height: var(--v2-line-height-5);
+ font-weight: var(--font-weight-primary-bold);
+ font-size: var(--font-size-3);
+ line-height: var(--line-height-5);
}
.titleSemiBold {
- font-weight: var(--v2-font-weight-primary-semi-bold);
- font-size: var(--v2-font-size-2);
- line-height: var(--v2-line-height-5);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-size: var(--font-size-2);
+ line-height: var(--line-height-5);
}
.titleMargin {
- margin-bottom: var(--v2-spacing-2);
+ margin-bottom: var(--spacing-2);
}
.body {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-regular);
- font-size: var(--v2-font-size-2);
- line-height: var(--v2-line-height-3);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-regular);
+ font-size: var(--font-size-2);
+ line-height: var(--line-height-3);
}
.closeButton {
position: absolute;
- top: var(--v2-spacing-1);
- right: var(--v2-spacing-2);
+ top: var(--spacing-1);
+ right: var(--spacing-2);
}
.leftIcon {
- margin-left: var(--v2-spacing-1);
- margin-right: var(--v2-spacing-3);
+ margin-left: var(--spacing-1);
+ margin-right: var(--spacing-3);
}
.icon {
&.mono {
- color: var(--v2-colors-mono-500);
+ color: var(--palette-text-500);
}
&.positive {
- color: var(--v2-colors-green-500);
+ color: var(--palette-success-500);
}
&.negative {
- color: var(--v2-colors-red-500);
+ color: var(--palette-error-500);
}
&.primary {
- color: var(--v2-colors-stream-blue-500);
+ color: var(--palette-primary-500);
}
&.warning {
- color: var(--v2-colors-yellow-500);
+ color: var(--palette-warning-500);
}
}
.mono {
- background-color: var(--v2-colors-grey-100);
- border-color: var(--v2-colors-grey-500);
- color: var(--v2-colors-mono-500);
+ background-color: var(--palette-grey-100);
+ border-color: var(--palette-grey-500);
+ color: var(--palette-text-500);
}
.positive {
- background-color: var(--v2-colors-green-100);
- border-color: var(--v2-colors-green-500);
- color: var(--v2-colors-mono-500);
+ background-color: var(--palette-success-100);
+ border-color: var(--palette-success-500);
+ color: var(--palette-text-500);
}
.negative {
- background-color: var(--v2-colors-stream-red-100);
- border-color: var(--v2-colors-stream-red-500);
- color: var(--v2-colors-mono-500);
+ background-color: $colors-stream-red-100;
+ border-color: $colors-stream-red-500;
+ color: var(--palette-text-500);
}
.primary {
- background-color: var(--v2-colors-stream-blue-100);
- border-color: var(--v2-colors-stream-blue-500);
- color: var(--v2-colors-mono-500);
+ background-color: var(--palette-primary-100);
+ border-color: var(--palette-primary-500);
+ color: var(--palette-text-500);
}
.warning {
- background-color: var(--v2-colors-yellow-100);
- border-color: var(--v2-colors-yellow-500);
- color: var(--v2-colors-mono-500);
+ background-color: var(--palette-warning-100);
+ border-color: var(--palette-warning-500);
+ color: var(--palette-text-500);
}
diff --git a/src/core/client/ui/components/v3/ExperimentalTag/ExperimentalTag.css b/src/core/client/ui/components/v3/ExperimentalTag/ExperimentalTag.css
index 2a64d38be..2b8ccb028 100644
--- a/src/core/client/ui/components/v3/ExperimentalTag/ExperimentalTag.css
+++ b/src/core/client/ui/components/v3/ExperimentalTag/ExperimentalTag.css
@@ -1,22 +1,22 @@
.root {
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-bold);
- font-size: var(--v2-font-size-2);
- line-height: var(--v2-line-height-2);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-bold);
+ font-size: var(--font-size-2);
+ line-height: var(--line-height-2);
- border-radius: var(--v2-round-corners);
+ border-radius: var(--round-corners);
- background-color: var(--v2-colors-stream-blue-100);
- color: var(--v2-colors-stream-blue-500);
+ background-color: var(--palette-primary-100);
+ color: var(--palette-primary-500);
- padding-top: var(--v2-spacing-1);
- padding-bottom: var(--v2-spacing-1);
- padding-left: var(--v2-spacing-2);
- padding-right: var(--v2-spacing-2);
+ padding-top: var(--spacing-1);
+ padding-bottom: var(--spacing-1);
+ padding-left: var(--spacing-2);
+ padding-right: var(--spacing-2);
- margin-right: var(--v2-spacing-1);
+ margin-right: var(--spacing-1);
}
.button {
- color: var(--v2-colors-mono-100);
+ color: var(--palette-text-100);
}
diff --git a/src/core/client/ui/components/v3/Tombstone/Tombstone.css b/src/core/client/ui/components/v3/Tombstone/Tombstone.css
index 45b659698..7e1a93046 100644
--- a/src/core/client/ui/components/v3/Tombstone/Tombstone.css
+++ b/src/core/client/ui/components/v3/Tombstone/Tombstone.css
@@ -1,13 +1,13 @@
.root {
- background-color: var(--v2-colors-grey-200);
+ background-color: var(--palette-grey-200);
- font-family: var(--v2-font-family-primary);
- font-weight: var(--v2-font-weight-primary-semi-bold);
- font-size: var(--v2-font-size-2);
- line-height: var(--v2-line-height-3);
- color: var(--v2-colors-mono-500);
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-size: var(--font-size-2);
+ line-height: var(--line-height-3);
+ color: var(--palette-text-500);
- padding: var(--v2-spacing-4);
+ padding: var(--spacing-4);
text-align: center;
}
diff --git a/src/core/client/ui/components/v3/ValidationMessage/ValidationMessage.css b/src/core/client/ui/components/v3/ValidationMessage/ValidationMessage.css
index 26bdd9d80..f57f10ac3 100644
--- a/src/core/client/ui/components/v3/ValidationMessage/ValidationMessage.css
+++ b/src/core/client/ui/components/v3/ValidationMessage/ValidationMessage.css
@@ -1,13 +1,15 @@
.root {
- font-family: var(--v2-font-family-primary);
+ font-family: var(--font-family-primary);
- font-weight: var(--v2-font-weight-primary-semi-bold);
- font-size: var(--v2-font-size-2);
- line-height: var(--v2-line-height-3);
+ font-weight: var(--font-weight-primary-semi-bold);
+ font-size: var(--font-size-2);
+ line-height: var(--line-height-3);
- color: var(--v2-colors-red-500);
+ color: var(--palette-error-500);
}
.icon {
- margin-right: var(--v2-spacing-1);
+ margin-right: var(--spacing-1);
+
+ min-width: 16px;
}
diff --git a/src/core/client/ui/components/v3/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/v3/ValidationMessage/ValidationMessage.tsx
index 4776daf4e..eae6fbeb3 100644
--- a/src/core/client/ui/components/v3/ValidationMessage/ValidationMessage.tsx
+++ b/src/core/client/ui/components/v3/ValidationMessage/ValidationMessage.tsx
@@ -4,23 +4,32 @@ import React, { FunctionComponent, ReactNode } from "react";
import { FieldMeta, hasError } from "coral-framework/lib/form";
import { Flex, Icon } from "coral-ui/components/v2";
import { withStyles } from "coral-ui/hocs";
+import { PropTypesOf } from "coral-ui/types";
import styles from "./ValidationMessage.css";
+type JustifyContent = PropTypesOf["justifyContent"];
+
interface Props {
children?: ReactNode;
variant?: "text" | "none";
classes: typeof styles;
className?: string;
meta?: FieldMeta;
+ justifyContent?: JustifyContent;
}
-const render = (content: any, classes: typeof styles, className?: string) => {
+const render = (
+ content: any,
+ classes: typeof styles,
+ className?: string,
+ justifyContent?: JustifyContent
+) => {
const rootClassName = cn(classes.root, className);
return (
-
+
error
@@ -35,13 +44,19 @@ const ValidationMessage: FunctionComponent = ({
className,
children,
meta,
+ justifyContent,
}) => {
if (children) {
- return render(children, classes, className);
+ return render(children, classes, className, justifyContent);
}
if (meta && hasError(meta)) {
- return render(meta.error || meta.submitError, classes, className);
+ return render(
+ meta.error || meta.submitError,
+ classes,
+ className,
+ justifyContent
+ );
}
return null;
diff --git a/src/core/client/ui/hooks/useDateTimeFormat.ts b/src/core/client/ui/hooks/useDateTimeFormat.ts
index 473f9fd13..faed541a6 100644
--- a/src/core/client/ui/hooks/useDateTimeFormat.ts
+++ b/src/core/client/ui/hooks/useDateTimeFormat.ts
@@ -1,6 +1,6 @@
import { useMemo } from "react";
-import { useUIContext } from "coral-ui/components";
+import { useUIContext } from "coral-ui/components/v2";
export default function useDateTimeFormat(options: Intl.DateTimeFormatOptions) {
const { locales } = useUIContext();
diff --git a/src/core/client/ui/shared/buttonReset.css b/src/core/client/ui/shared/buttonReset.css
deleted file mode 100644
index f5a7fd268..000000000
--- a/src/core/client/ui/shared/buttonReset.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.buttonReset {
- /* reset button */
- user-select: none;
- font-family: inherit;
- outline: none;
- border: none;
- touch-action: manipulation;
- padding: 0;
- margin: 0;
- overflow: hidden;
-
- /* Unify anchor and button. */
- cursor: pointer;
- display: inline-block;
- box-sizing: border-box;
- text-align: center;
- text-decoration: none;
- align-items: flex-start;
- vertical-align: middle;
- white-space: nowrap;
- background: transparent;
- font-size: inherit;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
- -webkit-appearance: none;
-
- &:disabled {
- cursor: default;
- }
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &:-moz-focusring {
- textshadow: 0 0 0 #000;
- }
-}
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
deleted file mode 100644
index 3ed8f4462..000000000
--- a/src/core/client/ui/shared/typography.css
+++ /dev/null
@@ -1,384 +0,0 @@
-@font-face {
- font-family: "Source Sans Pro";
- font-style: normal;
- font-display: block;
- font-weight: 300;
- src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
- url("~typeface-source-sans-pro/files/source-sans-pro-latin-300.woff2")
- format("woff2"),
- url("~typeface-source-sans-pro/files/source-sans-pro-latin-300.woff")
- format("woff");
-}
-@font-face {
- font-family: "Source Sans Pro";
- font-style: italic;
- font-display: block;
- font-weight: 300;
- src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
- url("~typeface-source-sans-pro/files/source-sans-pro-latin-300italic.woff2")
- format("woff2"),
- url("~typeface-source-sans-pro/files/source-sans-pro-latin-300italic.woff")
- format("woff");
-}
-
-@font-face {
- font-family: "Source Sans Pro";
- font-style: normal;
- font-display: block;
- font-weight: 400;
- src: local("Source Sans Pro Regular italic"),
- local("Source Sans Pro-Regularitalic"),
- url("~typeface-source-sans-pro/files/source-sans-pro-latin-400.woff2")
- format("woff2"),
- url("~typeface-source-sans-pro/files/source-sans-pro-latin-400.woff")
- format("woff");
-}
-@font-face {
- font-family: "Source Sans Pro";
- font-style: italic;
- font-display: block;
- font-weight: 400;
- src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
- url("~typeface-source-sans-pro/files/source-sans-pro-latin-400italic.woff2")
- format("woff2"),
- url("~typeface-source-sans-pro/files/source-sans-pro-latin-400italic.woff")
- format("woff");
-}
-
-@font-face {
- font-family: "Source Sans Pro";
- font-style: normal;
- font-display: block;
- font-weight: 600;
- src: local("Source Sans Pro SemiBold italic"),
- local("Source Sans Pro-SemiBolditalic"),
- url("~typeface-source-sans-pro/files/source-sans-pro-latin-600.woff2")
- format("woff2"),
- url("~typeface-source-sans-pro/files/source-sans-pro-latin-600.woff")
- format("woff");
-}
-
-@font-face {
- font-family: "Source Sans Pro";
- font-style: normal;
- font-display: block;
- font-weight: 700;
- src: local("Source Sans Pro SemiBold italic"),
- local("Source Sans Pro-SemiBolditalic"),
- url("~typeface-source-sans-pro/files/source-sans-pro-latin-700.woff2")
- format("woff2"),
- url("~typeface-source-sans-pro/files/source-sans-pro-latin-700.woff")
- format("woff");
-}
-
-@font-face {
- font-family: "Manuale";
- font-style: normal;
- font-display: block;
- font-weight: 400;
- src: local("Manuale Regular "), local("Manuale-Regular"),
- url("~typeface-manuale/files/manuale-latin-400.woff2") format("woff2"),
- url("~typeface-manuale/files/manuale-latin-400.woff") format("woff");
-}
-
-@font-face {
- font-family: "Manuale";
- font-style: normal;
- font-display: block;
- font-weight: 600;
- src: local("Manuale SemiBold "), local("Manuale-SemiBold"),
- url("~typeface-manuale/files/manuale-latin-600.woff2") format("woff2"),
- url("~typeface-manuale/files/manuale-latin-600.woff") format("woff");
-}
-
-@font-face {
- font-family: "Manuale";
- font-style: normal;
- font-display: block;
- font-weight: 700;
- src: local("Manuale SemiBold "), local("Manuale-SemiBold"),
- url("~typeface-manuale/files/manuale-latin-700.woff2") format("woff2"),
- url("~typeface-manuale/files/manuale-latin-700.woff") format("woff");
-}
-
-/* V2 Font Faces */
-
-@font-face {
- font-family: "Nunito";
- font-style: normal;
- font-display: block;
- font-weight: 400;
- src: local("Nunito Regular"), local("Nunito-Regular"),
- url("~typeface-nunito/files/nunito-latin-400.woff2") format("woff2"),
- url("~typeface-nunito/files/nunito-latin-400.woff") format("woff");
-}
-
-@font-face {
- font-family: "Nunito";
- font-style: normal;
- font-display: block;
- font-weight: 700;
- src: local("Nunito SemiBold"), local("Nunito-SemiBold"),
- url("~typeface-nunito/files/nunito-latin-700.woff2") format("woff2"),
- url("~typeface-nunito/files/nunito-latin-700.woff") format("woff");
-}
-
-@font-face {
- font-family: "Open Sans";
- font-style: normal;
- font-display: block;
- font-weight: 400;
- src: local("Open Sans Regular"), local("Open Sans-Regular"),
- url("~typeface-open-sans/files/open-sans-latin-400.woff2") format("woff2"),
- url("~typeface-open-sans/files/open-sans-latin-400.woff") format("woff");
-}
-
-@font-face {
- font-family: "Open Sans";
- font-style: normal;
- font-display: block;
- font-weight: 600;
- src: local("Open Sans SemiBold"), local("Open Sans-SemiBold"),
- url("~typeface-open-sans/files/open-sans-latin-600.woff2") format("woff2"),
- url("~typeface-open-sans/files/open-sans-latin-600.woff") format("woff");
-}
-
-@font-face {
- font-family: "Open Sans";
- font-style: normal;
- font-display: block;
- font-weight: 700;
- src: local("Open Sans Bold"), local("Open Sans-Bold"),
- url("~typeface-open-sans/files/open-sans-latin-700.woff2") format("woff2"),
- url("~typeface-open-sans/files/open-sans-latin-700.woff") format("woff");
-}
-
-/* --- */
-
-.heading1 {
- @mixin heading1;
-}
-
-.heading2 {
- @mixin heading2;
-}
-
-.heading3 {
- @mixin heading3;
-}
-
-.heading4 {
- @mixin heading4;
-}
-.heading5 {
- @mixin heading5;
-}
-
-.header1 {
- @mixin header1;
-}
-
-.header2 {
- @mixin header2;
-}
-
-.header3 {
- @mixin header3;
-}
-
-.header4 {
- @mixin header4;
-}
-.header5 {
- @mixin header5;
-}
-
-.bodyCopy {
- @mixin bodyCopy;
-}
-
-.bodyShort {
- @mixin bodyShort;
-}
-
-.fieldDescription {
- @mixin fieldDescription;
-}
-
-.button {
- color: var(--palette-text-secondary);
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-medium);
- font-size: calc(14rem / var(--rem-base));
- line-height: calc(18em / 14);
- letter-spacing: calc(0.57em / 14);
-}
-
-.buttonLarge {
- color: var(--palette-text-secondary);
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-medium);
- font-size: calc(16rem / var(--rem-base));
- line-height: calc(20em / 16);
- letter-spacing: calc(0.57em / 16);
-}
-
-.timestamp {
- color: var(--palette-text-secondary);
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-regular);
- font-size: calc(14rem / var(--rem-base));
- line-height: calc(18em / 14);
- letter-spacing: 0;
-}
-
-.alertMessage {
- color: var(--palette-common-black);
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-medium);
- font-size: calc(16rem / var(--rem-base));
- line-height: calc(18em / 16);
- letter-spacing: calc(-0.1em / 16);
-}
-
-.inputText {
- font-weight: var(--font-weight-regular);
- font-family: var(--font-family-sans-serif);
- font-size: calc(16rem / var(--rem-base));
- line-height: 1;
- letter-spacing: calc(0.2em / 16);
- color: var(--palette-text-primary);
-}
-
-.detail {
- font-size: calc(14rem / var(--rem-base));
- font-weight: var(--font-weight-regular);
- font-family: var(--font-family-sans-serif);
- line-height: calc(18em / 16);
- letter-spacing: calc(0.2em / 16);
- color: var(--palette-text-secondary);
-}
-
-.placeholder {
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-regular);
- font-size: calc(16rem / var(--rem-base));
- line-height: calc(20em / 16);
- letter-spacing: 0;
- color: var(--palette-grey-lighter);
-}
-
-.placeholderPseudo::placeholder {
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-regular);
- font-size: calc(16rem / var(--rem-base));
- line-height: calc(20em / 16);
- letter-spacing: 0;
- color: var(--palette-grey-lighter);
-}
-
-.menuItem {
- font-size: calc(16rem / var(--rem-base));
- font-weight: var(--font-weight-regular);
- font-family: var(--font-family-sans-serif);
- line-height: calc(19em / 16);
- letter-spacing: calc(0.2em / 16);
- color: var(--palette-text-primary);
-}
-
-.navItem {
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-medium);
- font-size: calc(16rem / var(--rem-base));
- letter-spacing: calc(-0.1em / 16);
- text-transform: uppercase;
-}
-
-.navItemActive {
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-bold);
- font-size: calc(16rem / var(--rem-base));
- letter-spacing: calc(-0.35em / 16);
- text-transform: uppercase;
-}
-
-.adminTabItem {
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-medium);
- font-size: calc(14rem / var(--rem-base));
- letter-spacing: calc(-0.1em / 14);
- text-transform: uppercase;
-}
-
-.adminTabItemActive {
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-bold);
- font-size: calc(14rem / var(--rem-base));
- letter-spacing: calc(-0.35em / 14);
- text-transform: uppercase;
-}
-
-.markerText {
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-medium);
- font-size: calc(13rem / var(--rem-base));
- letter-spacing: calc(-0.35em / 13);
-}
-
-.tagText {
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-medium);
- font-size: calc(12rem / var(--rem-base));
- letter-spacing: calc(-0.2em / 12);
-}
-
-.sideNavigationItem {
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-regular);
- font-size: calc(18rem / var(--rem-base));
- line-height: calc(18em / 18);
- letter-spacing: calc(0.2em / 18);
- text-decoration: none;
- text-transform: uppercase;
- color: var(--palette-grey-main);
-}
-
-.sideNavigationActive {
- composes: sideNavigationItem;
- font-weight: var(--font-weight-bold);
- letter-spacing: calc(0.1em / 18);
- color: var(--palette-text-primary);
-}
-
-.tableHeading {
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-medium);
- font-size: calc(14rem / var(--rem-base));
- line-height: calc(20em / 14);
- color: var(--palette-grey-dark);
-}
-
-.tableData {
- font-family: var(--font-family-sans-serif);
- font-weight: var(--font-weight-regular);
- font-size: calc(14rem / var(--rem-base));
- line-height: calc(14em / 14);
- color: var(--palette-grey-dark);
-}
-
-.inputLabel {
- font-size: calc(18rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-serif);
- line-height: calc(18em / 18);
- letter-spacing: calc(0.2em / 18);
- color: var(--palette-text-dark);
-}
-
-/* V2 Typography */
-
-.bodyCommentV2 {
- @mixin bodyCommentV2;
-}
-
-/* --- */
diff --git a/src/core/client/ui/theme/admin.css.ts b/src/core/client/ui/theme/admin.css.ts
new file mode 100644
index 000000000..b9120b352
--- /dev/null
+++ b/src/core/client/ui/theme/admin.css.ts
@@ -0,0 +1,41 @@
+/*
+ Variables defined in `variables.ts` are already available
+ flattened and in kebab case.
+
+ These are additionally variables we define.
+*/
+
+import flat from "flat";
+import fs from "fs";
+import { kebabCase, mapKeys, mapValues } from "lodash";
+import path from "path";
+import postcss from "postcss";
+import postcssJs from "postcss-js";
+
+import adminVariables from "./adminVariables";
+import breakpoints from "./breakpoints";
+
+const flatKebabVariables = mapKeys(
+ mapValues(flat(adminVariables, { delimiter: "-" }), (v) => v.toString()),
+ (_, k) => `--${kebabCase(k)}`
+);
+
+const typography = fs
+ .readFileSync(path.join(__dirname, "./typography.css"))
+ .toString();
+const typographyObject = postcssJs.objectify(postcss.parse(typography));
+
+const cssObject = {
+ ...typographyObject,
+ ":root": {
+ ...flatKebabVariables,
+ "--mini-unit": "calc(1px * var(--mini-unit-small))",
+ },
+ [`@media (min-width: ${breakpoints.xs}px)`]: {
+ ":root": {
+ "--mini-unit": "calc(1px * var(--mini-unit-large))",
+ },
+ },
+};
+
+module.exports = cssObject;
diff --git a/src/core/client/ui/theme/adminVariables.ts b/src/core/client/ui/theme/adminVariables.ts
new file mode 100644
index 000000000..1e336b3a9
--- /dev/null
+++ b/src/core/client/ui/theme/adminVariables.ts
@@ -0,0 +1,22 @@
+import colors from "./colors";
+import sharedVariables from "./sharedVariables";
+
+const adminVariables = {
+ ...sharedVariables,
+ palette: {
+ ...sharedVariables.palette,
+ primary: {
+ 100: colors.teal100,
+ 200: colors.teal200,
+ 300: colors.teal300,
+ 400: colors.teal400,
+ 500: colors.teal500,
+ 600: colors.teal600,
+ 700: colors.teal700,
+ 800: colors.teal800,
+ 900: colors.teal900,
+ },
+ },
+};
+
+export default adminVariables;
diff --git a/src/core/client/ui/theme/breakpoints.ts b/src/core/client/ui/theme/breakpoints.ts
new file mode 100644
index 000000000..22dca2c24
--- /dev/null
+++ b/src/core/client/ui/theme/breakpoints.ts
@@ -0,0 +1,9 @@
+const breakpoints = {
+ xs: 320,
+ sm: 640,
+ md: 1024,
+ lg: 1400,
+ xl: 1600,
+};
+
+export default breakpoints;
diff --git a/src/core/client/ui/theme/colors.ts b/src/core/client/ui/theme/colors.ts
new file mode 100644
index 000000000..2928a6e4a
--- /dev/null
+++ b/src/core/client/ui/theme/colors.ts
@@ -0,0 +1,87 @@
+const colors = {
+ coral200: "#FED5C0",
+ coral100: "#FEECDF",
+ coral300: "#FCB99F",
+ coral400: "#FA9D87",
+ coral500: "#F77160",
+ coral600: "#D44A46",
+ coral700: "#B13036",
+ coral800: "#8F1E2D",
+ coral900: "#761227",
+ blue100: "#D2DCF6",
+ blue200: "#A7BAEE",
+ blue300: "#7188CD",
+ blue400: "#44589C",
+ blue500: "#17255A",
+ blue600: "#101C4D",
+ blue700: "#0B1440",
+ blue800: "#070D34",
+ blue900: "#04092B",
+ grey100: "#F4F7F7",
+ grey200: "#EAEFF0",
+ grey300: "#CBD1D2",
+ grey400: "#9FA4A6",
+ grey500: "#65696B",
+ grey600: "#49545C",
+ grey700: "#32404D",
+ grey800: "#202E3E",
+ grey900: "#132033",
+ green100: "#D8F9D5",
+ green200: "#ADF3AD",
+ green300: "#7CDB85",
+ green400: "#54B767",
+ green500: "#268742",
+ green600: "#1B743D",
+ green700: "#136138",
+ green800: "#0C4E32",
+ green900: "#07402E",
+ red100: "#FCE5D9",
+ red200: "#FAC6B4",
+ red300: "#F29D8B",
+ red400: "#E5766C",
+ red500: "#D53F3F",
+ red600: "#B72E39",
+ red700: "#991F34",
+ red800: "#7B142E",
+ red900: "#660C2B",
+ streamRed100: "#FFEAE9",
+ streamRed200: "#FFA29E",
+ streamRed300: "#FF7F78",
+ streamRed400: "#ED5454",
+ streamRed500: "#D53F3F",
+ streamRed600: "#B72E39",
+ streamRed700: "#991F34",
+ streamRed800: "#7B142E",
+ streamRed900: "#660C2B",
+ yellow100: "#FFFACC",
+ yellow500: "#FFE91F",
+ yellow900: "#FFD702",
+ teal100: "#E2FAF7",
+ teal200: "#C2F9EA",
+ teal300: "#9FECDF",
+ teal400: "#81DBD3",
+ teal500: "#59C3C3",
+ teal600: "#419EA7",
+ teal700: "#2C7B8C",
+ teal800: "#1C5B71",
+ teal900: "#11435D",
+ streamBlue100: "#EBF6FF",
+ streamBlue200: "#B7DCFF",
+ streamBlue300: "#61B3FF",
+ streamBlue400: "#2897FF",
+ streamBlue500: "#0070D9",
+ streamBlue600: "#0062BE",
+ streamBlue700: "#005AAE",
+ streamBlue800: "#004688",
+ streamBlue900: "#00386D",
+ mono900: "#14171A",
+ mono500: "#353F44",
+ mono100: "#65696B",
+ white500: "#EFEFEF",
+ pure: {
+ white: "#FFFFFF",
+ black: "#000000",
+ },
+};
+
+export default colors;
diff --git a/src/core/client/ui/theme/compatibility.ts b/src/core/client/ui/theme/compatibility.ts
new file mode 100644
index 000000000..638a0f62a
--- /dev/null
+++ b/src/core/client/ui/theme/compatibility.ts
@@ -0,0 +1,7 @@
+/**
+ * compat is used to set the value of a css variable while allowing
+ * it to be overridden by an older css variable if it's set.
+ */
+export function compat(value: string, previousVariable: string) {
+ return `var(--${previousVariable}, ${value})`;
+}
diff --git a/src/core/client/ui/theme/mixins.css b/src/core/client/ui/theme/mixins.css
index 75e58b651..e70b4d852 100644
--- a/src/core/client/ui/theme/mixins.css
+++ b/src/core/client/ui/theme/mixins.css
@@ -1,128 +1,6 @@
-@define-mixin bodyCopy {
- font-size: calc(16rem / var(--rem-base));
- font-weight: var(--font-weight-regular);
- font-family: var(--font-family-sans-serif);
- line-height: calc(22em / 16);
- letter-spacing: calc(0.2em / 16);
- color: var(--palette-text-primary);
-}
-
-@define-mixin bodyShort {
- font-size: var(--font-size-rem-4);
- font-weight: var(--font-weight-regular);
- font-family: var(--font-family-sans-serif);
- line-height: var(--line-height-body-short);
- color: var(--palette-text-primary);
-}
-
-@define-mixin fieldDescription {
- font-size: var(--font-size-rem-3);
- font-weight: var(--font-weight-regular);
- font-family: var(--font-family-sans-serif);
- line-height: var(--line-height-body-short);
- color: var(--palette-grey-dark);
-}
-
-@define-mixin heading1 {
- font-size: calc(24rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-serif);
- line-height: calc(26em / 24);
- letter-spacing: calc(0.2em / 24);
- color: var(--palette-text-primary);
-}
-
-@define-mixin heading2 {
- font-size: calc(20rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-serif);
- line-height: calc(22em / 20);
- letter-spacing: calc(0.2em / 20);
- color: var(--palette-text-primary);
-}
-
-@define-mixin heading3 {
- font-size: calc(18rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-serif);
- line-height: calc(20em / 18);
- letter-spacing: calc(0.2em / 18);
- color: var(--palette-text-primary);
-}
-
-@define-mixin heading4 {
- font-size: calc(16rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-serif);
- line-height: calc(18em / 16);
- letter-spacing: calc(0.2em / 16);
- color: var(--palette-text-primary);
-}
-@define-mixin heading5 {
- font-size: calc(14rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-serif);
- line-height: calc(16em / 16);
- letter-spacing: calc(0.2em / 16);
- color: var(--palette-text-primary);
-}
-
-@define-mixin header1 {
- font-size: calc(24rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-sans-serif);
- line-height: calc(26em / 24);
- letter-spacing: calc(0.2em / 24);
- color: var(--palette-grey-darkest);
-}
-
-@define-mixin header2 {
- font-size: calc(20rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-sans-serif);
- line-height: calc(22em / 20);
- letter-spacing: calc(0.2em / 20);
- color: var(--palette-grey-darkest);
-}
-
-@define-mixin header3 {
- font-size: calc(18rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-sans-serif);
- line-height: calc(20em / 18);
- letter-spacing: calc(0.2em / 18);
- color: var(--palette-grey-darkest);
-}
-
-@define-mixin header4 {
- font-size: calc(16rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-sans-serif);
- line-height: calc(18em / 16);
- letter-spacing: calc(0.2em / 16);
- color: var(--palette-grey-darkest);
-}
-@define-mixin header5 {
- font-size: calc(14rem / var(--rem-base));
- font-weight: var(--font-weight-medium);
- font-family: var(--font-family-sans-serif);
- line-height: calc(16em / 16);
- letter-spacing: calc(0.2em / 16);
- color: var(--palette-grey-darkest);
-}
@define-mixin outline {
outline-width: 3px;
outline-color: Highlight;
outline-color: -webkit-focus-ring-color;
outline-style: auto;
}
-
-/* V2 --- */
-
-@define-mixin bodyCommentV2 {
- font-size: var(--v2-font-size-3);
- font-weight: var(--v2-font-weight-primary-regular);
- font-family: var(--v2-font-family-primary);
- line-height: var(--v2-line-height-body-comment);
- color: var(--v2-palette-text-primary);
-}
diff --git a/src/core/client/ui/theme/sassLikeVariables.ts b/src/core/client/ui/theme/sassLikeVariables.ts
new file mode 100644
index 000000000..4ad935970
--- /dev/null
+++ b/src/core/client/ui/theme/sassLikeVariables.ts
@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const variables = {
+ colors: require("./colors").default,
+ breakpoints: require("./breakpoints").default,
+ zindex: require("./zIndex").default,
+};
+
+export default variables;
diff --git a/src/core/client/ui/theme/sharedVariables.ts b/src/core/client/ui/theme/sharedVariables.ts
new file mode 100644
index 000000000..e95aba694
--- /dev/null
+++ b/src/core/client/ui/theme/sharedVariables.ts
@@ -0,0 +1,143 @@
+/**
+ * This file is required by node, it should be valid node js code.
+ * We keep the `.ts` extension to keep the types.
+ */
+
+import colors from "./colors";
+import { compat } from "./compatibility";
+
+const variables = {
+ /** Use this to remove round corners or make them more round. */
+ roundCorners: "3px",
+ /** Different color palettes currently in use. */
+ palette: {
+ /** Color palette that is used for background colors. */
+ background: {
+ body: colors.pure.white,
+ popover: colors.pure.white,
+ tooltip: colors.grey500,
+ input: colors.pure.white,
+ inputDisabled: colors.white500,
+ },
+ /** Color palette that is used for text. */
+ text: {
+ "000": compat(colors.pure.white, "palette-text-light"),
+ 100: compat(colors.mono100, "palette-text-secondary"),
+ 500: compat(colors.mono500, "palette-text-primary"),
+ 900: compat(colors.mono900, "palette-text-dark"),
+ placeholder: compat(colors.grey400, "palette-grey-lighter"),
+ inputDisabled: compat(colors.grey400, "palette-grey-lighter"),
+ },
+ /** Color palette that is used for grey shades. */
+ grey: {
+ 100: compat(colors.grey100, "palette-grey-lightest"),
+ 200: compat(colors.grey200, "palette-grey-lightest"),
+ 300: compat(colors.grey300, "palette-grey-lighter"),
+ 400: compat(colors.grey400, "palette-grey-lighter"),
+ 500: compat(colors.grey500, "palette-grey-main"),
+ 600: compat(colors.grey600, "palette-grey-dark"),
+ 700: compat(colors.grey700, "palette-grey-darkest"),
+ 800: compat(colors.grey800, "palette-grey-darkest"),
+ 900: compat(colors.grey900, "palette-grey-darkest"),
+ },
+ /** Color palette that is used for indicating something negative and is usually red. */
+ error: {
+ 100: compat(colors.red100, "palette-error-lightest"),
+ 200: compat(colors.red200, "palette-error-lighter"),
+ 300: compat(colors.red300, "palette-error-lighter"),
+ 400: compat(colors.red400, "palette-error-light"),
+ 500: compat(colors.red500, "palette-error-main"),
+ 600: compat(colors.red600, "palette-error-main"),
+ 700: compat(colors.red700, "palette-error-dark"),
+ 800: compat(colors.red800, "palette-error-darkest"),
+ 900: compat(colors.red900, "palette-error-darkest"),
+ },
+ /** Color palette that is used for indicating something positive and is usually green. */
+ success: {
+ 100: compat(colors.green100, "palette-success-lightest"),
+ 200: compat(colors.green200, "palette-success-lighter"),
+ 300: compat(colors.green300, "palette-success-lighter"),
+ 400: compat(colors.green400, "palette-success-light"),
+ 500: compat(colors.green500, "palette-success-main"),
+ 600: compat(colors.green600, "palette-success-main"),
+ 700: compat(colors.green700, "palette-success-dark"),
+ 800: compat(colors.green800, "palette-success-darkest"),
+ 900: compat(colors.green900, "palette-success-darkest"),
+ },
+ /** Color palette that is used for indicating a warning and is usually yellow. */
+ warning: {
+ 100: compat(colors.yellow100, "palette-warning-main"),
+ 500: compat(colors.yellow500, "palette-warning-main"),
+ },
+ divider: "rgba(0, 0, 0, 0.12)",
+ },
+ /** Different font families currently in use. */
+ fontFamily: {
+ primary: compat('"Open Sans"', "font-family-sans-serif"),
+ secondary: compat('"Nunito"', "font-family-serif"),
+ },
+ /** Different font weights with matching values for the fonts. */
+ fontWeight: {
+ primary: {
+ bold: compat("700", "font-weight-sans-bold"),
+ semiBold: compat("600", "font-weight-sans-medium"),
+ regular: compat("300", "font-weight-sans-regular"),
+ },
+ secondary: {
+ bold: compat("700", "font-weight-serif-bold"),
+ regular: compat("300", "font-weight-serif-regular"),
+ },
+ },
+ fontSize: {
+ 1: "0.75rem",
+ 2: "0.875rem",
+ 3: "1rem",
+ 4: "1.125rem",
+ 5: "1.25rem",
+ 6: "1.5rem",
+ 7: "1.75rem",
+ 8: "2rem",
+ 9: "2.25rem",
+ iconXl: "2.25rem",
+ iconLg: "1.5rem",
+ iconMd: "1.125rem",
+ iconSm: "0.875rem",
+ iconXs: "0.75rem",
+ },
+ lineHeight: {
+ commentBody: "1.45rem",
+ fieldDescription: "1.3rem",
+ 1: "0.75rem",
+ 2: "0.875rem",
+ 3: "1rem",
+ 4: "1.125rem",
+ 5: "1.25rem",
+ 6: "1.5rem",
+ 7: "1.75rem",
+ 8: "2rem",
+ },
+ /** Different shadows that are currently used in Coral. */
+ shadow: {
+ popover: compat("1px 0px 4px rgba(0, 0, 0, 0.25)", "elevation-main"),
+ },
+ /** Different spacing units currenty used in Coral. */
+ spacing: {
+ 1: "4px",
+ 2: "8px",
+ 3: "12px",
+ 4: "16px",
+ 5: "24px",
+ 6: "32px",
+ 7: "44px",
+ 8: "60px",
+ 9: "84px",
+ },
+ /** Grid units for smaller and larger screens. */
+ miniUnit: {
+ small: 4,
+ large: 8,
+ },
+};
+
+export type Spacing = keyof typeof variables["spacing"];
+export default variables;
diff --git a/src/core/client/ui/theme/stream.css.ts b/src/core/client/ui/theme/stream.css.ts
new file mode 100644
index 000000000..f357797b8
--- /dev/null
+++ b/src/core/client/ui/theme/stream.css.ts
@@ -0,0 +1,41 @@
+/*
+ Variables defined in `variables.ts` are already available
+ flattened and in kebab case.
+
+ These are additionally variables we define.
+*/
+
+import flat from "flat";
+import fs from "fs";
+import { kebabCase, mapKeys, mapValues } from "lodash";
+import path from "path";
+import postcss from "postcss";
+import postcssJs from "postcss-js";
+
+import breakpoints from "./breakpoints";
+import streamVariables from "./streamVariables";
+
+const flatKebabVariables = mapKeys(
+ mapValues(flat(streamVariables, { delimiter: "-" }), (v) => v.toString()),
+ (_, k) => `--${kebabCase(k)}`
+);
+
+const typography = fs
+ .readFileSync(path.join(__dirname, "./typography.css"))
+ .toString();
+const typographyObject = postcssJs.objectify(postcss.parse(typography));
+
+const cssObject = {
+ ...typographyObject,
+ ":root": {
+ ...flatKebabVariables,
+ "--mini-unit": "calc(1px * var(--mini-unit-small))",
+ },
+ [`@media (min-width: ${breakpoints.xs}px)`]: {
+ ":root": {
+ "--mini-unit": "calc(1px * var(--mini-unit-large))",
+ },
+ },
+};
+
+module.exports = cssObject;
diff --git a/src/core/client/ui/theme/streamVariables.ts b/src/core/client/ui/theme/streamVariables.ts
new file mode 100644
index 000000000..db8cedef0
--- /dev/null
+++ b/src/core/client/ui/theme/streamVariables.ts
@@ -0,0 +1,24 @@
+import colors from "./colors";
+import { compat } from "./compatibility";
+import sharedVariables from "./sharedVariables";
+
+const streamVariables = {
+ ...sharedVariables,
+ palette: {
+ ...sharedVariables.palette,
+ /** Color palette that is used as the primary color. */
+ primary: {
+ 100: compat(colors.streamBlue100, "palette-primary-lightest"),
+ 200: compat(colors.streamBlue200, "palette-primary-lighter"),
+ 300: compat(colors.streamBlue300, "palette-primary-light"),
+ 400: compat(colors.streamBlue400, "palette-primary-main"),
+ 500: compat(colors.streamBlue500, "palette-primary-main"),
+ 600: compat(colors.streamBlue600, "palette-primary-main"),
+ 700: compat(colors.streamBlue700, "palette-primary-main"),
+ 800: compat(colors.streamBlue800, "palette-primary-dark"),
+ 900: compat(colors.streamBlue900, "palette-primary-darkest"),
+ },
+ },
+};
+
+export default streamVariables;
diff --git a/src/core/client/ui/theme/typography.css b/src/core/client/ui/theme/typography.css
new file mode 100644
index 000000000..625079577
--- /dev/null
+++ b/src/core/client/ui/theme/typography.css
@@ -0,0 +1,154 @@
+@font-face {
+ font-family: "Source Sans Pro";
+ font-style: normal;
+ font-display: block;
+ font-weight: 300;
+ src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
+ url("~typeface-source-sans-pro/files/source-sans-pro-latin-300.woff2")
+ format("woff2"),
+ url("~typeface-source-sans-pro/files/source-sans-pro-latin-300.woff")
+ format("woff");
+}
+@font-face {
+ font-family: "Source Sans Pro";
+ font-style: italic;
+ font-display: block;
+ font-weight: 300;
+ src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
+ url("~typeface-source-sans-pro/files/source-sans-pro-latin-300italic.woff2")
+ format("woff2"),
+ url("~typeface-source-sans-pro/files/source-sans-pro-latin-300italic.woff")
+ format("woff");
+}
+
+@font-face {
+ font-family: "Source Sans Pro";
+ font-style: normal;
+ font-display: block;
+ font-weight: 400;
+ src: local("Source Sans Pro Regular italic"),
+ local("Source Sans Pro-Regularitalic"),
+ url("~typeface-source-sans-pro/files/source-sans-pro-latin-400.woff2")
+ format("woff2"),
+ url("~typeface-source-sans-pro/files/source-sans-pro-latin-400.woff")
+ format("woff");
+}
+@font-face {
+ font-family: "Source Sans Pro";
+ font-style: italic;
+ font-display: block;
+ font-weight: 400;
+ src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
+ url("~typeface-source-sans-pro/files/source-sans-pro-latin-400italic.woff2")
+ format("woff2"),
+ url("~typeface-source-sans-pro/files/source-sans-pro-latin-400italic.woff")
+ format("woff");
+}
+
+@font-face {
+ font-family: "Source Sans Pro";
+ font-style: normal;
+ font-display: block;
+ font-weight: 600;
+ src: local("Source Sans Pro SemiBold italic"),
+ local("Source Sans Pro-SemiBolditalic"),
+ url("~typeface-source-sans-pro/files/source-sans-pro-latin-600.woff2")
+ format("woff2"),
+ url("~typeface-source-sans-pro/files/source-sans-pro-latin-600.woff")
+ format("woff");
+}
+
+@font-face {
+ font-family: "Source Sans Pro";
+ font-style: normal;
+ font-display: block;
+ font-weight: 700;
+ src: local("Source Sans Pro SemiBold italic"),
+ local("Source Sans Pro-SemiBolditalic"),
+ url("~typeface-source-sans-pro/files/source-sans-pro-latin-700.woff2")
+ format("woff2"),
+ url("~typeface-source-sans-pro/files/source-sans-pro-latin-700.woff")
+ format("woff");
+}
+
+@font-face {
+ font-family: "Manuale";
+ font-style: normal;
+ font-display: block;
+ font-weight: 400;
+ src: local("Manuale Regular "), local("Manuale-Regular"),
+ url("~typeface-manuale/files/manuale-latin-400.woff2") format("woff2"),
+ url("~typeface-manuale/files/manuale-latin-400.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Manuale";
+ font-style: normal;
+ font-display: block;
+ font-weight: 600;
+ src: local("Manuale SemiBold "), local("Manuale-SemiBold"),
+ url("~typeface-manuale/files/manuale-latin-600.woff2") format("woff2"),
+ url("~typeface-manuale/files/manuale-latin-600.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Manuale";
+ font-style: normal;
+ font-display: block;
+ font-weight: 700;
+ src: local("Manuale SemiBold "), local("Manuale-SemiBold"),
+ url("~typeface-manuale/files/manuale-latin-700.woff2") format("woff2"),
+ url("~typeface-manuale/files/manuale-latin-700.woff") format("woff");
+}
+
+/* V2 Font Faces */
+
+@font-face {
+ font-family: "Nunito";
+ font-style: normal;
+ font-display: block;
+ font-weight: 400;
+ src: local("Nunito Regular"), local("Nunito-Regular"),
+ url("~typeface-nunito/files/nunito-latin-400.woff2") format("woff2"),
+ url("~typeface-nunito/files/nunito-latin-400.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Nunito";
+ font-style: normal;
+ font-display: block;
+ font-weight: 700;
+ src: local("Nunito SemiBold"), local("Nunito-SemiBold"),
+ url("~typeface-nunito/files/nunito-latin-700.woff2") format("woff2"),
+ url("~typeface-nunito/files/nunito-latin-700.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-display: block;
+ font-weight: 400;
+ src: local("Open Sans Regular"), local("Open Sans-Regular"),
+ url("~typeface-open-sans/files/open-sans-latin-400.woff2") format("woff2"),
+ url("~typeface-open-sans/files/open-sans-latin-400.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-display: block;
+ font-weight: 600;
+ src: local("Open Sans SemiBold"), local("Open Sans-SemiBold"),
+ url("~typeface-open-sans/files/open-sans-latin-600.woff2") format("woff2"),
+ url("~typeface-open-sans/files/open-sans-latin-600.woff") format("woff");
+}
+
+@font-face {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-display: block;
+ font-weight: 700;
+ src: local("Open Sans Bold"), local("Open Sans-Bold"),
+ url("~typeface-open-sans/files/open-sans-latin-700.woff2") format("woff2"),
+ url("~typeface-open-sans/files/open-sans-latin-700.woff") format("woff");
+}
diff --git a/src/core/client/ui/theme/variables.css.ts b/src/core/client/ui/theme/variables.css.ts
deleted file mode 100644
index 402e7e44a..000000000
--- a/src/core/client/ui/theme/variables.css.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- Variables defined in `variables.ts` are already available
- flattened and in kebab case.
-
- These are additionally variables we define.
-*/
-
-import flat from "flat";
-import { kebabCase, mapKeys, mapValues, pickBy } from "lodash";
-
-import variables from "./variables";
-import variables2 from "./variables2";
-
-const flatKebabVariables = mapKeys(
- mapValues(flat(variables, { delimiter: "-" }), (v) => v.toString()),
- (_, k) => `--${kebabCase(k)}`
-);
-
-// These are the default css standard variables.
-const cssVariables = pickBy(
- flatKebabVariables,
- (v, k) => !k.startsWith("breakpoints-")
-);
-
-const v2FlatKebabVariables = mapKeys(
- mapValues(flat(variables2, { delimiter: "-" }), (v) => v.toString()),
- (_, k) => `--v2-${kebabCase(k)}`
-);
-
-const cssVariablesV2 = pickBy(
- v2FlatKebabVariables,
- (v, k) => !k.startsWith("breakpoints-")
-);
-
-const style = {
- ":root": {
- ...Object.assign({}, cssVariables, cssVariablesV2),
- "--mini-unit": "calc(1px * var(--mini-unit-small))",
- },
- [`@media (min-width: ${variables.breakpoints.xs}px)`]: {
- ":root": {
- "--mini-unit": "calc(1px * var(--mini-unit-large))",
- },
- },
-};
-
-module.exports = style;
diff --git a/src/core/client/ui/theme/variables.ts b/src/core/client/ui/theme/variables.ts
deleted file mode 100644
index 94889f4ad..000000000
--- a/src/core/client/ui/theme/variables.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * This file is required by node, it should be valid node js code.
- * We keep the `.ts` extension to keep the types.
- */
-
-const variables = {
- elevation: {
- main: "1px 0px 4px rgba(0, 0, 0, 0.25)",
- },
- palette: {
- /* Primary colors */
- primary: {
- darkest: "#0D5B8F",
- dark: "#2B7EB5",
- main: "#3498DB",
- light: "#67B2E4",
- lighter: "#8DC5EB",
- lightest: "#EBF5FB",
- },
- /* Secondary colors */
- grey: {
- darkest: "#404345",
- dark: "#65696B",
- main: "#787D80",
- light: "#9A9DA0",
- lighter: "#BBBEBF",
- lightest: "#F5F5F5",
- },
- /* Success colors */
- success: {
- darkest: "#03AB61",
- dark: "#02BD6B",
- main: "#00CD73",
- light: "#40D996",
- lighter: "#83EBBD",
- lightest: "#E6FAF1",
- },
- /* Error colors */
- error: {
- darkest: "#F50F0C",
- dark: "#FF1F1C",
- main: "#FA4643",
- light: "#FB7472",
- lighter: "#FC9795",
- lightest: "#FEF0EF",
- },
- /* Warning colors */
- warning: {
- main: "#DC8400",
- },
- /* Text colors */
- text: {
- primary: "#3B4A53",
- secondary: "#787D80",
- light: "#fff",
- dark: "#14171A",
- },
- /* Background colors */
- background: {
- light: "#F6F6F6",
- },
- /* Common colors */
- common: {
- white: "#FFF",
- black: "#000",
- },
- /* Divider */
- divider: "rgba(0, 0, 0, 0.12)",
- highlight: "#FFD863",
- brand: {
- main: "#f77160",
- light: "#f97f70",
- lighter: "#fc9e92",
- },
- },
- /* gitter and spacing */
- miniUnitSmall: 4,
- miniUnitLarge: 8,
- /* Borders */
- roundCorners: "2px",
- /* Typography */
- remBase: 16,
- fontFamilySansSerif: '"Source Sans Pro"',
- fontFamilySerif: '"Manuale"',
- /** Deprecated */
- fontWeightLight: 300,
- fontWeightRegular: 400,
- fontWeightMedium: 600,
- fontWeightBold: 700,
- /** End Deprecated */
- fontSize: {
- 1: "12px",
- 2: "14px",
- 3: "16px",
- 4: "18px",
- 5: "20px",
- 6: "24px",
- 7: "28px",
- 8: "32px",
- rem: {
- 1: "0.75rem",
- 2: "0.875rem",
- 3: "1rem",
- 4: "1.125rem",
- 5: "1.25rem",
- 6: "1.5rem",
- 7: "1.75rem",
- 8: "2rem",
- },
- },
- fontWeight: {
- sans: {
- regular: 400,
- medium: 600,
- bold: 700,
- },
- serif: {
- regular: 400,
- medium: 600,
- bold: 600,
- },
- },
- lineHeight: {
- 1: "1.1em",
- 2: "1.2em",
- 3: "1.45em",
- bodyShort: 1.142,
- },
- /* Breakpoints */
- breakpoints: {
- xs: 320,
- sm: 640,
- md: 1024,
- lg: 1400,
- xl: 1600,
- },
- zindex: {
- popover: 300,
- modal: 1000,
- },
- spacing: {
- 1: "4px",
- 2: "8px",
- 3: "12px",
- 4: "16px",
- 5: "24px",
- 6: "32px",
- 7: "44px",
- 8: "60px",
- 9: "84px",
- },
-};
-
-export type Spacing = keyof typeof variables["spacing"];
-export type Shade = keyof typeof variables["palette"]["primary"];
-export default variables;
diff --git a/src/core/client/ui/theme/variables2.ts b/src/core/client/ui/theme/variables2.ts
deleted file mode 100644
index fc0b30d55..000000000
--- a/src/core/client/ui/theme/variables2.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-const colors = {
- coral200: "#FED5C0",
- coral100: "#FEECDF",
- coral300: "#FCB99F",
- coral400: "#FA9D87",
- coral500: "#F77160",
- coral600: "#D44A46",
- coral700: "#B13036",
- coral800: "#8F1E2D",
- coral900: "#761227",
- blue100: "#D2DCF6",
- blue200: "#A7BAEE",
- blue300: "#7188CD",
- blue400: "#44589C",
- blue500: "#17255A",
- blue600: "#101C4D",
- blue700: "#0B1440",
- blue800: "#070D34",
- blue900: "#04092B",
- grey100: "#F4F7F7",
- grey200: "#EAEFF0",
- grey300: "#CBD1D2",
- grey400: "#9FA4A6",
- grey500: "#65696B",
- grey600: "#49545C",
- grey700: "#32404D",
- grey800: "#202E3E",
- grey900: "#132033",
- green100: "#D8F9D5",
- green200: "#ADF3AD",
- green300: "#7CDB85",
- green400: "#54B767",
- green500: "#268742",
- green600: "#1B743D",
- green700: "#136138",
- green800: "#0C4E32",
- green900: "#07402E",
- red100: "#FCE5D9",
- red200: "#FAC6B4",
- red300: "#F29D8B",
- red400: "#E5766C",
- red500: "#D53F3F",
- red600: "#B72E39",
- red700: "#991F34",
- red800: "#7B142E",
- red900: "#660C2B",
- streamRed100: "#FFEAE9",
- streamRed200: "#FFA29E",
- streamRed300: "#FF7F78",
- streamRed400: "#ED5454",
- streamRed500: "#D53F3F",
- streamRed600: "#B72E39",
- streamRed700: "#991F34",
- streamRed800: "#7B142E",
- streamRed900: "#660C2B",
- yellow100: "#FFFACC",
- yellow500: "#FFE91F",
- yellow900: "#FFD702",
- teal100: "#E2FAF7",
- teal200: "#C2F9EA",
- teal300: "#9FECDF",
- teal400: "#81DBD3",
- teal500: "#59C3C3",
- teal600: "#419EA7",
- teal700: "#2C7B8C",
- teal800: "#1C5B71",
- teal900: "#11435D",
- streamBlue100: "#EBF6FF",
- streamBlue200: "#B7DCFF",
- streamBlue300: "#61B3FF",
- streamBlue400: "#2897FF",
- streamBlue500: "#0070D9",
- streamBlue600: "#0062BE",
- streamBlue700: "#005AAE",
- streamBlue800: "#004688",
- streamBlue900: "#00386D",
- mono900: "#14171A",
- mono500: "#353F44",
- mono100: "#65696B",
- white500: "#EFEFEF",
- pure: {
- white: "#FFFFFF",
- black: "#000000",
- },
-};
-
-const variables2 = {
- colors,
- palette: {
- text: {
- light: colors.white500,
- dark: colors.mono900,
- primary: colors.mono500,
- secondary: colors.mono100,
- },
- primary: {
- lightest: colors.teal100,
- light: colors.teal300,
- main: colors.teal700,
- darkest: colors.teal900,
- },
- grey: {
- main: colors.grey500,
- lightest: colors.grey200,
- lighter: colors.grey300,
- darkest: colors.grey700,
- },
- error: {
- lightest: colors.red100,
- main: colors.red500,
- darkest: colors.red700,
- },
- success: {
- main: colors.green500,
- },
- divider: "rgba(0, 0, 0, 0.12)",
- input: {
- value: colors.mono500,
- placeholder: colors.mono100,
- icon: colors.mono500,
- label: colors.mono500,
- helper: colors.mono100,
- border: colors.grey500,
- background: colors.pure.white,
- disabled: {
- foreground: colors.grey400,
- background: colors.white500,
- },
- focused: {
- border: colors.teal500,
- },
- error: {
- border: colors.red500,
- },
- },
- },
- fontFamily: {
- primary: "Open Sans",
- secondary: "Nunito",
- },
- lineHeight: {
- bodyComment: 1.45,
- bodyShort: 1.3,
- reset: 1,
- title: 1.15,
- 1: "0.75rem",
- 2: "0.875rem",
- 3: "1rem",
- 4: "1.125rem",
- 5: "1.25rem",
- 6: "1.5rem",
- 7: "1.75rem",
- 8: "2rem",
- },
- fontSize: {
- 1: "0.75rem",
- 2: "0.875rem",
- 3: "1rem",
- 4: "1.125rem",
- 5: "1.25rem",
- 6: "1.5rem",
- 7: "1.75rem",
- 8: "2rem",
- 9: "2.25rem",
- iconLarge: "1.5rem",
- iconMedium: "1.125rem",
- iconSmall: "0.875rem",
- iconXSmall: "0.75rem",
- },
- fontWeight: {
- primary: {
- bold: 700,
- semiBold: 600,
- regular: 300,
- },
- secondary: {
- bold: 700,
- regular: 300,
- },
- },
- spacing: {
- 1: "4px",
- 2: "8px",
- 3: "12px",
- 4: "16px",
- 5: "24px",
- 6: "32px",
- 7: "44px",
- 8: "60px",
- 9: "84px",
- },
- roundCorners: "3px",
- breakpoints: {
- xs: 320,
- sm: 640,
- md: 1024,
- lg: 1400,
- xl: 1600,
- },
-};
-
-export default variables2;
diff --git a/src/core/client/ui/theme/zIndex.ts b/src/core/client/ui/theme/zIndex.ts
new file mode 100644
index 000000000..9d11f2c7d
--- /dev/null
+++ b/src/core/client/ui/theme/zIndex.ts
@@ -0,0 +1,6 @@
+const zindex = {
+ popover: 300,
+ modal: 1000,
+};
+
+export default zindex;
diff --git a/src/core/common/utils/isBeforeDate.spec.ts b/src/core/common/utils/isBeforeDate.spec.ts
index 4359ca55a..74fa6d0d5 100644
--- a/src/core/common/utils/isBeforeDate.spec.ts
+++ b/src/core/common/utils/isBeforeDate.spec.ts
@@ -1,4 +1,5 @@
import timekeeper from "timekeeper";
+
import isBeforeDate from "./isBeforeDate";
it("works correctly", () => {
diff --git a/src/core/server/app/handlers/api/account/confirm.ts b/src/core/server/app/handlers/api/account/confirm.ts
index 651648778..5d3853f2e 100644
--- a/src/core/server/app/handlers/api/account/confirm.ts
+++ b/src/core/server/app/handlers/api/account/confirm.ts
@@ -8,7 +8,6 @@ import {
UserForbiddenError,
UserNotFoundError,
} from "coral-server/errors";
-import { GQLUSER_ROLE } from "coral-server/graph/schema/__generated__/types";
import { retrieveUser, User } from "coral-server/models/user";
import { decodeJWT, extractTokenFromRequest } from "coral-server/services/jwt";
import {
@@ -18,6 +17,8 @@ import {
} from "coral-server/services/users/auth/confirm";
import { RequestHandler } from "coral-server/types/express";
+import { GQLUSER_ROLE } from "coral-server/graph/schema/__generated__/types";
+
export type ConfirmRequestOptions = Pick<
AppOptions,
"mongo" | "mailerQueue" | "signingConfig" | "redis" | "config"
diff --git a/src/core/server/app/handlers/api/install.ts b/src/core/server/app/handlers/api/install.ts
index 3bc2f100c..080ca01dc 100644
--- a/src/core/server/app/handlers/api/install.ts
+++ b/src/core/server/app/handlers/api/install.ts
@@ -2,7 +2,6 @@ import Joi from "@hapi/joi";
import { v4 as uuid } from "uuid";
import { LanguageCode, LOCALES } from "coral-common/helpers/i18n/locales";
-
import { AppOptions } from "coral-server/app";
import { validate } from "coral-server/app/request/body";
import { RequestLimiter } from "coral-server/app/request/limiter";
diff --git a/src/core/server/app/handlers/api/version.ts b/src/core/server/app/handlers/api/version.ts
index 2584ed5d9..196e010af 100644
--- a/src/core/server/app/handlers/api/version.ts
+++ b/src/core/server/app/handlers/api/version.ts
@@ -1,6 +1,7 @@
-import { revision, version } from "coral-common/version";
import { RequestHandler } from "express";
+import { revision, version } from "coral-common/version";
+
export const versionHandler: RequestHandler = (req, res, next) => {
res.json({ version, revision });
};
diff --git a/src/core/server/app/helpers/entrypoints.ts b/src/core/server/app/helpers/entrypoints.ts
index 110c1814a..760176282 100644
--- a/src/core/server/app/helpers/entrypoints.ts
+++ b/src/core/server/app/helpers/entrypoints.ts
@@ -1,6 +1,7 @@
-import logger from "coral-server/logger";
import fs from "fs";
+import logger from "coral-server/logger";
+
export interface Asset {
src: string;
integrity: string;
diff --git a/src/core/server/app/middleware/graphql/graphqlMiddleware.ts b/src/core/server/app/middleware/graphql/graphqlMiddleware.ts
index 9418aa319..070a71fff 100644
--- a/src/core/server/app/middleware/graphql/graphqlMiddleware.ts
+++ b/src/core/server/app/middleware/graphql/graphqlMiddleware.ts
@@ -1,12 +1,11 @@
import { GraphQLExtension, GraphQLOptions } from "apollo-server-express";
-import { Handler } from "express";
-import { FieldDefinitionNode, GraphQLError, ValidationContext } from "graphql";
-
// TODO: when https://github.com/apollographql/apollo-server/pull/1907 is merged, update this import path
import {
ExpressGraphQLOptionsFunction,
graphqlExpress,
} from "apollo-server-express/dist/expressApollo";
+import { Handler } from "express";
+import { FieldDefinitionNode, GraphQLError, ValidationContext } from "graphql";
import { Config } from "coral-server/config";
import {
diff --git a/src/core/server/app/middleware/graphql/persistedQueryMiddleware.ts b/src/core/server/app/middleware/graphql/persistedQueryMiddleware.ts
index fbf25d446..45d9c0fb5 100644
--- a/src/core/server/app/middleware/graphql/persistedQueryMiddleware.ts
+++ b/src/core/server/app/middleware/graphql/persistedQueryMiddleware.ts
@@ -1,9 +1,10 @@
import { AppOptions } from "coral-server/app";
import { RawQueryNotAuthorized } from "coral-server/errors";
import { getPersistedQuery } from "coral-server/graph/persisted";
-import { GQLUSER_ROLE } from "coral-server/graph/schema/__generated__/types";
import { RequestHandler } from "coral-server/types/express";
+import { GQLUSER_ROLE } from "coral-server/graph/schema/__generated__/types";
+
type PersistedQueryMiddlewareOptions = Pick<
AppOptions,
"persistedQueryCache" | "persistedQueriesRequired"
diff --git a/src/core/server/app/middleware/passport/strategies/local.ts b/src/core/server/app/middleware/passport/strategies/local.ts
index 4dcbb04b2..f4ff172ea 100644
--- a/src/core/server/app/middleware/passport/strategies/local.ts
+++ b/src/core/server/app/middleware/passport/strategies/local.ts
@@ -1,4 +1,5 @@
import Joi from "@hapi/joi";
+import { Redis } from "ioredis";
import { Db } from "mongodb";
import { Strategy as LocalStrategy } from "passport-local";
@@ -11,7 +12,6 @@ import {
verifyUserPassword,
} from "coral-server/models/user";
import { Request } from "coral-server/types/express";
-import { Redis } from "ioredis";
const verifyFactory = (
mongo: Db,
diff --git a/src/core/server/app/router/index.ts b/src/core/server/app/router/index.ts
index 0e8ba3aab..45ae36e63 100644
--- a/src/core/server/app/router/index.ts
+++ b/src/core/server/app/router/index.ts
@@ -2,7 +2,6 @@ import express, { Router } from "express";
import { LanguageCode } from "coral-common/helpers/i18n/locales";
import { AppOptions } from "coral-server/app";
-
import playground from "coral-server/app/middleware/playground";
import { RouterOptions } from "coral-server/app/router/types";
import logger from "coral-server/logger";
diff --git a/src/core/server/app/url.spec.ts b/src/core/server/app/url.spec.ts
index af70acd0a..f85ea658c 100644
--- a/src/core/server/app/url.spec.ts
+++ b/src/core/server/app/url.spec.ts
@@ -1,9 +1,10 @@
+import { Request } from "express";
+
import {
doesRequireSchemePrefixing,
extractParentsOrigin,
prefixSchemeIfRequired,
} from "coral-server/app/url";
-import { Request } from "express";
it("extracts the url when the parentUrl is not provided", () => {
const req = { headers: {}, query: {} } as Request;
diff --git a/src/core/server/app/url.ts b/src/core/server/app/url.ts
index d7b00aa67..f4d54cef5 100644
--- a/src/core/server/app/url.ts
+++ b/src/core/server/app/url.ts
@@ -1,7 +1,8 @@
+import { URL } from "url";
+
import { Config } from "coral-server/config";
import { Tenant } from "coral-server/models/tenant";
import { Request } from "coral-server/types/express";
-import { URL } from "url";
export function reconstructURL(req: Request, path = "/"): string {
const scheme = req.secure ? "https" : "http";
diff --git a/src/core/server/cron/notificationDigesting.ts b/src/core/server/cron/notificationDigesting.ts
index 379b8badb..27eb60349 100644
--- a/src/core/server/cron/notificationDigesting.ts
+++ b/src/core/server/cron/notificationDigesting.ts
@@ -2,13 +2,14 @@ import { Db } from "mongodb";
import path from "path";
import { Config } from "coral-server/config";
-import { GQLDIGEST_FREQUENCY } from "coral-server/graph/schema/__generated__/types";
import { MailerQueue } from "coral-server/queue/tasks/mailer";
import { DigestibleTemplate } from "coral-server/queue/tasks/mailer/templates";
import { JWTSigningConfig } from "coral-server/services/jwt";
import NotificationContext from "coral-server/services/notifications/context";
import { TenantCache } from "coral-server/services/tenant/cache";
+import { GQLDIGEST_FREQUENCY } from "coral-server/graph/schema/__generated__/types";
+
import {
ScheduledJob,
ScheduledJobCommand,
diff --git a/src/core/server/errors/index.spec.ts b/src/core/server/errors/index.spec.ts
index 4f9eb267d..8a541d8d6 100644
--- a/src/core/server/errors/index.spec.ts
+++ b/src/core/server/errors/index.spec.ts
@@ -1,6 +1,6 @@
import { VError } from "verror";
-import { CoralError, DuplicateUserError, WrappedInternalError } from ".";
+import { CoralError, DuplicateUserError, WrappedInternalError } from "./";
it("has the right inheritance chain", () => {
const err = new DuplicateUserError();
diff --git a/src/core/server/events/listeners/slack/slack.ts b/src/core/server/events/listeners/slack/slack.ts
index 3fc9e23a0..a29d419e4 100644
--- a/src/core/server/events/listeners/slack/slack.ts
+++ b/src/core/server/events/listeners/slack/slack.ts
@@ -1,7 +1,7 @@
import logger from "coral-server/logger";
import { createFetch } from "coral-server/services/fetch";
-import SlackPublishEvent, { Trigger } from "./publishEvent";
+import { GQLMODERATION_QUEUE } from "coral-server/graph/schema/__generated__/types";
import {
CommentCreatedCoralEventPayload,
@@ -13,8 +13,8 @@ import {
CoralEventPublisherFactory,
} from "../../publisher";
import { CoralEventType } from "../../types";
+import SlackPublishEvent, { Trigger } from "./publishEvent";
-import { GQLMODERATION_QUEUE } from "coral-server/graph/schema/__generated__/types";
type SlackCoralEventListenerPayloads =
| CommentFeaturedCoralEventPayload
| CommentEnteredModerationQueueCoralEventPayload
diff --git a/src/core/server/graph/extensions/ErrorWrappingExtension.ts b/src/core/server/graph/extensions/ErrorWrappingExtension.ts
index 0969cf870..04993d105 100644
--- a/src/core/server/graph/extensions/ErrorWrappingExtension.ts
+++ b/src/core/server/graph/extensions/ErrorWrappingExtension.ts
@@ -9,6 +9,7 @@ import {
WrappedInternalError,
} from "coral-server/errors";
import GraphContext from "coral-server/graph/context";
+
import { getOriginalError } from "./helpers";
function hoistCoralErrorExtensions(
diff --git a/src/core/server/graph/loaders/CommentModerationActions.ts b/src/core/server/graph/loaders/CommentModerationActions.ts
index 85203c487..874bc3fdc 100644
--- a/src/core/server/graph/loaders/CommentModerationActions.ts
+++ b/src/core/server/graph/loaders/CommentModerationActions.ts
@@ -1,11 +1,12 @@
import { defaultTo } from "lodash";
import GraphContext from "coral-server/graph/context";
+import { retrieveCommentModerationActionConnection } from "coral-server/models/action/moderation/comment";
+
import {
CommentToStatusHistoryArgs,
UserToCommentModerationActionHistoryArgs,
} from "coral-server/graph/schema/__generated__/types";
-import { retrieveCommentModerationActionConnection } from "coral-server/models/action/moderation/comment";
export default (ctx: GraphContext) => ({
forModerator: (
diff --git a/src/core/server/graph/loaders/Users.ts b/src/core/server/graph/loaders/Users.ts
index c6bbfd8b2..7a71e2b34 100644
--- a/src/core/server/graph/loaders/Users.ts
+++ b/src/core/server/graph/loaders/Users.ts
@@ -2,11 +2,6 @@ import DataLoader from "dataloader";
import { defaultTo } from "lodash";
import Context from "coral-server/graph/context";
-import {
- GQLUSER_ROLE,
- GQLUSER_STATUS,
- QueryToUsersArgs,
-} from "coral-server/graph/schema/__generated__/types";
import { Connection } from "coral-server/models/helpers";
import {
retrieveManyUsers,
@@ -15,6 +10,12 @@ import {
UserConnectionInput,
} from "coral-server/models/user";
+import {
+ GQLUSER_ROLE,
+ GQLUSER_STATUS,
+ QueryToUsersArgs,
+} from "coral-server/graph/schema/__generated__/types";
+
type UserConnectionFilterInput = UserConnectionInput["filter"];
const roleFilter = (role?: GQLUSER_ROLE): UserConnectionFilterInput => {
diff --git a/src/core/server/graph/mutators/Sites.ts b/src/core/server/graph/mutators/Sites.ts
index ebe14c99e..167e8ecc4 100644
--- a/src/core/server/graph/mutators/Sites.ts
+++ b/src/core/server/graph/mutators/Sites.ts
@@ -1,10 +1,11 @@
import TenantContext from "coral-server/graph/context";
+import { Site } from "coral-server/models/site";
+import { create, update } from "coral-server/services/sites";
+
import {
GQLCreateSiteInput,
GQLUpdateSiteInput,
} from "coral-server/graph/schema/__generated__/types";
-import { Site } from "coral-server/models/site";
-import { create, update } from "coral-server/services/sites";
export const Sites = (ctx: TenantContext) => ({
create: async (input: GQLCreateSiteInput): Promise | null> =>
diff --git a/src/core/server/graph/resolvers/BanStatus.ts b/src/core/server/graph/resolvers/BanStatus.ts
index 61334e8ae..475b9e7e0 100644
--- a/src/core/server/graph/resolvers/BanStatus.ts
+++ b/src/core/server/graph/resolvers/BanStatus.ts
@@ -1,6 +1,7 @@
-import { GQLBanStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as user from "coral-server/models/user";
+import { GQLBanStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export type BanStatusInput = user.ConsolidatedBanStatus & {
userID: string;
};
diff --git a/src/core/server/graph/resolvers/BanStatusHistory.ts b/src/core/server/graph/resolvers/BanStatusHistory.ts
index bddaa2acb..da94b97d5 100644
--- a/src/core/server/graph/resolvers/BanStatusHistory.ts
+++ b/src/core/server/graph/resolvers/BanStatusHistory.ts
@@ -1,6 +1,7 @@
-import { GQLBanStatusHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as user from "coral-server/models/user";
+import { GQLBanStatusHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export const BanStatusHistory: Required> = {
diff --git a/src/core/server/graph/resolvers/CloseCommenting.ts b/src/core/server/graph/resolvers/CloseCommenting.ts
index 469f538de..cf5fc8630 100644
--- a/src/core/server/graph/resolvers/CloseCommenting.ts
+++ b/src/core/server/graph/resolvers/CloseCommenting.ts
@@ -1,7 +1,8 @@
-import { GQLCloseCommentingTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as settings from "coral-server/models/settings";
import { translate } from "coral-server/services/i18n";
+import { GQLCloseCommentingTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export const CloseCommenting: GQLCloseCommentingTypeResolver = {
message: (closeCommenting, input, ctx) => {
if (closeCommenting.message) {
diff --git a/src/core/server/graph/resolvers/CommentRevision.ts b/src/core/server/graph/resolvers/CommentRevision.ts
index 92b3d2e22..2df9d12e2 100644
--- a/src/core/server/graph/resolvers/CommentRevision.ts
+++ b/src/core/server/graph/resolvers/CommentRevision.ts
@@ -1,7 +1,8 @@
-import { GQLCommentRevisionTypeResolver } from "coral-server/graph/schema/__generated__/types";
import { decodeActionCounts } from "coral-server/models/action/comment";
import { Comment, Revision } from "coral-server/models/comment";
+import { GQLCommentRevisionTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export interface WrappedCommentRevision {
revision: Revision;
comment: Comment;
diff --git a/src/core/server/graph/resolvers/DisableCommenting.ts b/src/core/server/graph/resolvers/DisableCommenting.ts
index 4e6fae5b7..15458f4ae 100644
--- a/src/core/server/graph/resolvers/DisableCommenting.ts
+++ b/src/core/server/graph/resolvers/DisableCommenting.ts
@@ -1,7 +1,8 @@
-import { GQLDisableCommentingTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as settings from "coral-server/models/settings";
import { translate } from "coral-server/services/i18n";
+import { GQLDisableCommentingTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export const DisableCommenting: GQLDisableCommentingTypeResolver = {
message: (disableCommenting, input, ctx) => {
if (disableCommenting.message) {
diff --git a/src/core/server/graph/resolvers/Flag.ts b/src/core/server/graph/resolvers/Flag.ts
index 9db1563f5..408415d8e 100644
--- a/src/core/server/graph/resolvers/Flag.ts
+++ b/src/core/server/graph/resolvers/Flag.ts
@@ -1,8 +1,9 @@
+import * as actions from "coral-server/models/action/comment";
+
import {
GQLCOMMENT_FLAG_REASON,
GQLFlagTypeResolver,
} from "coral-server/graph/schema/__generated__/types";
-import * as actions from "coral-server/models/action/comment";
export const Flag: GQLFlagTypeResolver = {
reason: ({ id, reason }, args, ctx) => {
diff --git a/src/core/server/graph/resolvers/Invite.ts b/src/core/server/graph/resolvers/Invite.ts
index a3e5f2682..5b3feaf25 100644
--- a/src/core/server/graph/resolvers/Invite.ts
+++ b/src/core/server/graph/resolvers/Invite.ts
@@ -1,6 +1,7 @@
-import { GQLInviteTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as invite from "coral-server/models/invite";
+import { GQLInviteTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export const Invite: GQLInviteTypeResolver = {
createdBy: ({ createdBy }, args, ctx) =>
ctx.loaders.Users.user.load(createdBy),
diff --git a/src/core/server/graph/resolvers/ModerationQueue.ts b/src/core/server/graph/resolvers/ModerationQueue.ts
index bb149dd87..99fc2f1b9 100644
--- a/src/core/server/graph/resolvers/ModerationQueue.ts
+++ b/src/core/server/graph/resolvers/ModerationQueue.ts
@@ -4,6 +4,7 @@ import {
CommentConnectionInput,
retrieveCommentConnection,
} from "coral-server/models/comment";
+
import {
GQLCOMMENT_SORT,
GQLModerationQueueTypeResolver,
diff --git a/src/core/server/graph/resolvers/ModeratorNote.ts b/src/core/server/graph/resolvers/ModeratorNote.ts
index d45d1c088..cba8b560a 100644
--- a/src/core/server/graph/resolvers/ModeratorNote.ts
+++ b/src/core/server/graph/resolvers/ModeratorNote.ts
@@ -1,6 +1,7 @@
-import { GQLModeratorNoteTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as user from "coral-server/models/user";
+import { GQLModeratorNoteTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export const ModeratorNote: Required> = {
diff --git a/src/core/server/graph/resolvers/PremodStatus.ts b/src/core/server/graph/resolvers/PremodStatus.ts
index cdb095e0b..0deabab6f 100644
--- a/src/core/server/graph/resolvers/PremodStatus.ts
+++ b/src/core/server/graph/resolvers/PremodStatus.ts
@@ -1,6 +1,7 @@
-import { GQLPremodStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as user from "coral-server/models/user";
+import { GQLPremodStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export type PremodStatusInput = user.ConsolidatedPremodStatus & {
userID: string;
};
diff --git a/src/core/server/graph/resolvers/PremodStatusHistory.ts b/src/core/server/graph/resolvers/PremodStatusHistory.ts
index 3061f22d9..0898a0a08 100644
--- a/src/core/server/graph/resolvers/PremodStatusHistory.ts
+++ b/src/core/server/graph/resolvers/PremodStatusHistory.ts
@@ -1,6 +1,7 @@
-import { GQLPremodStatusHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as user from "coral-server/models/user";
+import { GQLPremodStatusHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export const PremodStatusHistory: Required> = {
diff --git a/src/core/server/graph/resolvers/Profile.ts b/src/core/server/graph/resolvers/Profile.ts
index 886c2237f..925699db4 100644
--- a/src/core/server/graph/resolvers/Profile.ts
+++ b/src/core/server/graph/resolvers/Profile.ts
@@ -1,6 +1,7 @@
-import { GQLProfileTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as user from "coral-server/models/user";
+import { GQLProfileTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
const resolveType: GQLProfileTypeResolver = (profile) => {
switch (profile.type) {
case "local":
diff --git a/src/core/server/graph/resolvers/SuspensionStatus.ts b/src/core/server/graph/resolvers/SuspensionStatus.ts
index 12dfea420..b77c1cda1 100644
--- a/src/core/server/graph/resolvers/SuspensionStatus.ts
+++ b/src/core/server/graph/resolvers/SuspensionStatus.ts
@@ -1,6 +1,7 @@
-import { GQLSuspensionStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as user from "coral-server/models/user";
+import { GQLSuspensionStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export type SuspensionStatusInput = user.ConsolidatedSuspensionStatus & {
userID: string;
};
diff --git a/src/core/server/graph/resolvers/SuspensionStatusHistory.ts b/src/core/server/graph/resolvers/SuspensionStatusHistory.ts
index 5f0985543..000a65d6d 100644
--- a/src/core/server/graph/resolvers/SuspensionStatusHistory.ts
+++ b/src/core/server/graph/resolvers/SuspensionStatusHistory.ts
@@ -1,6 +1,7 @@
-import { GQLSuspensionStatusHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as user from "coral-server/models/user";
+import { GQLSuspensionStatusHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export const SuspensionStatusHistory: Required> = {
diff --git a/src/core/server/graph/resolvers/Tag.ts b/src/core/server/graph/resolvers/Tag.ts
index e6baf15d7..f6ab49a69 100644
--- a/src/core/server/graph/resolvers/Tag.ts
+++ b/src/core/server/graph/resolvers/Tag.ts
@@ -1,6 +1,7 @@
-import { GQLTagTypeResolver } from "coral-server/graph/schema/__generated__/types";
import { CommentTag } from "coral-server/models/comment/tag";
+import { GQLTagTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export const Tag: GQLTagTypeResolver = {
code: ({ type }) => type,
createdBy: ({ createdBy }, input, ctx) => {
diff --git a/src/core/server/graph/resolvers/UserStatus.ts b/src/core/server/graph/resolvers/UserStatus.ts
index 29ebf0fc6..0cbc63240 100644
--- a/src/core/server/graph/resolvers/UserStatus.ts
+++ b/src/core/server/graph/resolvers/UserStatus.ts
@@ -1,8 +1,9 @@
+import * as user from "coral-server/models/user";
+
import {
GQLUSER_STATUS,
GQLUserStatusTypeResolver,
} from "coral-server/graph/schema/__generated__/types";
-import * as user from "coral-server/models/user";
import { BanStatusInput } from "./BanStatus";
import { PremodStatusInput } from "./PremodStatus";
diff --git a/src/core/server/graph/resolvers/UsernameHistory.ts b/src/core/server/graph/resolvers/UsernameHistory.ts
index c38ace013..acff66761 100644
--- a/src/core/server/graph/resolvers/UsernameHistory.ts
+++ b/src/core/server/graph/resolvers/UsernameHistory.ts
@@ -1,6 +1,7 @@
-import { GQLUsernameHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as user from "coral-server/models/user";
+import { GQLUsernameHistoryTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export const UsernameHistory: Required> = {
diff --git a/src/core/server/graph/resolvers/UsernameStatus.ts b/src/core/server/graph/resolvers/UsernameStatus.ts
index fb3f09e32..605cb30c9 100644
--- a/src/core/server/graph/resolvers/UsernameStatus.ts
+++ b/src/core/server/graph/resolvers/UsernameStatus.ts
@@ -1,6 +1,7 @@
-import { GQLUsernameStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
import * as user from "coral-server/models/user";
+import { GQLUsernameStatusTypeResolver } from "coral-server/graph/schema/__generated__/types";
+
export type UsernameStatusInput = user.ConsolidatedUsernameStatus & {
userID: string;
};
diff --git a/src/core/server/graph/scalars/locale.ts b/src/core/server/graph/scalars/locale.ts
index dc292189b..f3074e48a 100644
--- a/src/core/server/graph/scalars/locale.ts
+++ b/src/core/server/graph/scalars/locale.ts
@@ -1,7 +1,8 @@
-import { LOCALES } from "coral-common/helpers/i18n";
import { GraphQLScalarType } from "graphql";
import { Kind } from "graphql/language";
+import { LOCALES } from "coral-common/helpers/i18n";
+
function assertSupportLocale(locale: string) {
if (!LOCALES.includes(locale as any)) {
throw new Error(`Supported locales are ${JSON.stringify(LOCALES)}`);
diff --git a/src/core/server/logger/serializers.ts b/src/core/server/logger/serializers.ts
index d2781dc18..b49c0eca4 100644
--- a/src/core/server/logger/serializers.ts
+++ b/src/core/server/logger/serializers.ts
@@ -1,9 +1,9 @@
import { stdSerializers } from "bunyan";
import { GraphQLError } from "graphql";
import StackUtils from "stack-utils";
+import VError from "verror";
import { CoralError, CoralErrorContext } from "coral-server/errors";
-import VError from "verror";
interface SerializedError {
id?: string;
diff --git a/src/core/server/logger/streams/index.ts b/src/core/server/logger/streams/index.ts
index 33b0d4e56..dda53b4bf 100644
--- a/src/core/server/logger/streams/index.ts
+++ b/src/core/server/logger/streams/index.ts
@@ -1,6 +1,7 @@
+import PrettyStream from "@coralproject/bunyan-prettystream";
+
import config from "coral-server/config";
-import PrettyStream from "@coralproject/bunyan-prettystream";
import { SecretStream } from "./SecretStream";
export function getStreams() {
diff --git a/src/core/server/models/action/comment.ts b/src/core/server/models/action/comment.ts
index a2f23e388..8ad4d4816 100644
--- a/src/core/server/models/action/comment.ts
+++ b/src/core/server/models/action/comment.ts
@@ -4,15 +4,6 @@ import { Db } from "mongodb";
import { v4 as uuid } from "uuid";
import { Sub } from "coral-common/types";
-import {
- GQLActionPresence,
- GQLCOMMENT_FLAG_DETECTED_REASON,
- GQLCOMMENT_FLAG_REASON,
- GQLCOMMENT_FLAG_REPORTED_REASON,
- GQLDontAgreeActionCounts,
- GQLFlagActionCounts,
- GQLReactionActionCounts,
-} from "coral-server/graph/schema/__generated__/types";
import logger from "coral-server/logger";
import {
Connection,
@@ -24,6 +15,16 @@ import {
import { TenantResource } from "coral-server/models/tenant";
import { commentActions as collection } from "coral-server/services/mongodb/collections";
+import {
+ GQLActionPresence,
+ GQLCOMMENT_FLAG_DETECTED_REASON,
+ GQLCOMMENT_FLAG_REASON,
+ GQLCOMMENT_FLAG_REPORTED_REASON,
+ GQLDontAgreeActionCounts,
+ GQLFlagActionCounts,
+ GQLReactionActionCounts,
+} from "coral-server/graph/schema/__generated__/types";
+
export enum ACTION_TYPE {
/**
* REACTION corresponds to a reaction to a comment from a user.
diff --git a/src/core/server/models/action/moderation/comment.ts b/src/core/server/models/action/moderation/comment.ts
index 93bb39a41..88fc135fa 100644
--- a/src/core/server/models/action/moderation/comment.ts
+++ b/src/core/server/models/action/moderation/comment.ts
@@ -2,7 +2,6 @@ import { Db } from "mongodb";
import { v4 as uuid } from "uuid";
import { Sub } from "coral-common/types";
-import { GQLCOMMENT_STATUS } from "coral-server/graph/schema/__generated__/types";
import {
Connection,
ConnectionInput,
@@ -12,6 +11,8 @@ import {
import { TenantResource } from "coral-server/models/tenant";
import { commentModerationActions as collection } from "coral-server/services/mongodb/collections";
+import { GQLCOMMENT_STATUS } from "coral-server/graph/schema/__generated__/types";
+
/**
* CommentModerationAction stores information around a moderation action that
* was created for a given Comment Revision.
diff --git a/src/core/server/models/helpers/query.ts b/src/core/server/models/helpers/query.ts
index 7ffca0d30..7bbed68f2 100644
--- a/src/core/server/models/helpers/query.ts
+++ b/src/core/server/models/helpers/query.ts
@@ -1,5 +1,4 @@
import { isUndefined, omitBy } from "lodash";
-
import { Collection, Cursor, FilterQuery as MongoFilterQuery } from "mongodb";
import { Writable } from "coral-common/types";
diff --git a/src/core/server/models/invite.ts b/src/core/server/models/invite.ts
index 54aeef75f..24b80e95a 100644
--- a/src/core/server/models/invite.ts
+++ b/src/core/server/models/invite.ts
@@ -2,10 +2,11 @@ import { Db } from "mongodb";
import { v4 as uuid } from "uuid";
import { Sub } from "coral-common/types";
-import { GQLUSER_ROLE } from "coral-server/graph/schema/__generated__/types";
import { TenantResource } from "coral-server/models/tenant";
import { invites as collection } from "coral-server/services/mongodb/collections";
+import { GQLUSER_ROLE } from "coral-server/graph/schema/__generated__/types";
+
export interface Invite extends TenantResource {
readonly id: string;
email: string;
diff --git a/src/core/server/queue/tasks/mailer/content.ts b/src/core/server/queue/tasks/mailer/content.ts
index 67803f875..21a0218a5 100644
--- a/src/core/server/queue/tasks/mailer/content.ts
+++ b/src/core/server/queue/tasks/mailer/content.ts
@@ -3,12 +3,12 @@ import nunjucks, { Environment, ILoader } from "nunjucks";
import path from "path";
import { Config } from "coral-server/config";
+import { Tenant } from "coral-server/models/tenant";
import {
TenantCache,
TenantCacheAdapter,
} from "coral-server/services/tenant/cache";
-import { Tenant } from "coral-server/models/tenant";
import { EmailTemplate } from "./templates";
// templateDirectory is the directory containing the email templates.
diff --git a/src/core/server/services/comments/actions.ts b/src/core/server/services/comments/actions.ts
index 2640f9121..80ddc5f38 100644
--- a/src/core/server/services/comments/actions.ts
+++ b/src/core/server/services/comments/actions.ts
@@ -29,6 +29,7 @@ import {
} from "coral-server/stacks/helpers";
import { GQLCOMMENT_FLAG_REPORTED_REASON } from "coral-server/graph/schema/__generated__/types";
+
import {
publishCommentFlagCreated,
publishCommentReactionCreated,
diff --git a/src/core/server/services/comments/comments.ts b/src/core/server/services/comments/comments.ts
index aaca825b7..be7fe2fd3 100644
--- a/src/core/server/services/comments/comments.ts
+++ b/src/core/server/services/comments/comments.ts
@@ -2,7 +2,6 @@ import { DateTime } from "luxon";
import { Db } from "mongodb";
import { CommentNotFoundError } from "coral-server/errors";
-import { GQLTAG } from "coral-server/graph/schema/__generated__/types";
import {
addCommentTag,
removeCommentTag,
@@ -12,6 +11,8 @@ import { getLatestRevision } from "coral-server/models/comment/helpers";
import { Tenant } from "coral-server/models/tenant";
import { User } from "coral-server/models/user";
+import { GQLTAG } from "coral-server/graph/schema/__generated__/types";
+
/**
* getCommentEditableUntilDate will return the date that the given comment is
* still editable until.
diff --git a/src/core/server/services/comments/moderation/counts.spec.ts b/src/core/server/services/comments/moderation/counts.spec.ts
index 59e533ce0..a7ed4ac4b 100644
--- a/src/core/server/services/comments/moderation/counts.spec.ts
+++ b/src/core/server/services/comments/moderation/counts.spec.ts
@@ -1,4 +1,5 @@
import { GQLCOMMENT_STATUS } from "coral-server/graph/schema/__generated__/types";
+
import { calculateCountsDiff } from "./counts";
it("allows transition from NONE to APPROVED", () => {
diff --git a/src/core/server/services/comments/pipeline/phases/detectLinks.ts b/src/core/server/services/comments/pipeline/phases/detectLinks.ts
index eb8bd2b3e..5246d95df 100755
--- a/src/core/server/services/comments/pipeline/phases/detectLinks.ts
+++ b/src/core/server/services/comments/pipeline/phases/detectLinks.ts
@@ -1,8 +1,4 @@
import { DeepPartial } from "coral-common/types";
-import {
- GQLCOMMENT_FLAG_REASON,
- GQLCOMMENT_STATUS,
-} from "coral-server/graph/schema/__generated__/types";
import { ACTION_TYPE } from "coral-server/models/action/comment";
import { RevisionMetadata } from "coral-server/models/comment";
import { GlobalModerationSettings } from "coral-server/models/settings";
@@ -11,6 +7,11 @@ import {
IntermediatePhaseResult,
} from "coral-server/services/comments/pipeline";
+import {
+ GQLCOMMENT_FLAG_REASON,
+ GQLCOMMENT_STATUS,
+} from "coral-server/graph/schema/__generated__/types";
+
const testPremodLinksEnable = (
settings: DeepPartial,
metadata: RevisionMetadata
diff --git a/src/core/server/services/comments/pipeline/phases/preModerate.ts b/src/core/server/services/comments/pipeline/phases/preModerate.ts
index aaad2295d..f940e9366 100755
--- a/src/core/server/services/comments/pipeline/phases/preModerate.ts
+++ b/src/core/server/services/comments/pipeline/phases/preModerate.ts
@@ -1,14 +1,15 @@
import { DeepPartial } from "coral-common/types";
-import {
- GQLCOMMENT_STATUS,
- GQLMODERATION_MODE,
-} from "coral-server/graph/schema/__generated__/types";
import { GlobalModerationSettings } from "coral-server/models/settings";
import {
IntermediateModerationPhase,
IntermediatePhaseResult,
} from "coral-server/services/comments/pipeline";
+import {
+ GQLCOMMENT_STATUS,
+ GQLMODERATION_MODE,
+} from "coral-server/graph/schema/__generated__/types";
+
const testModerationMode = (settings: DeepPartial) =>
settings.moderation === GQLMODERATION_MODE.PRE;
diff --git a/src/core/server/services/comments/pipeline/phases/preModerateUser.ts b/src/core/server/services/comments/pipeline/phases/preModerateUser.ts
index 813ad4188..07ab71a6c 100644
--- a/src/core/server/services/comments/pipeline/phases/preModerateUser.ts
+++ b/src/core/server/services/comments/pipeline/phases/preModerateUser.ts
@@ -1,9 +1,10 @@
-import { GQLCOMMENT_STATUS } from "coral-server/graph/schema/__generated__/types";
import {
IntermediateModerationPhase,
IntermediatePhaseResult,
} from "coral-server/services/comments/pipeline";
+import { GQLCOMMENT_STATUS } from "coral-server/graph/schema/__generated__/types";
+
// If a given user is set to always premod, set to premod.
export const premodUser: IntermediateModerationPhase = ({
author,
diff --git a/src/core/server/services/comments/pipeline/phases/premodNewCommenter.ts b/src/core/server/services/comments/pipeline/phases/premodNewCommenter.ts
index 5c468ea3c..6d920cb2b 100644
--- a/src/core/server/services/comments/pipeline/phases/premodNewCommenter.ts
+++ b/src/core/server/services/comments/pipeline/phases/premodNewCommenter.ts
@@ -1,13 +1,14 @@
-import {
- GQLCOMMENT_FLAG_REASON,
- GQLCOMMENT_STATUS,
-} from "coral-server/graph/schema/__generated__/types";
import { ACTION_TYPE } from "coral-server/models/action/comment";
import {
IntermediatePhaseResult,
ModerationPhaseContext,
} from "coral-server/services/comments/pipeline";
+import {
+ GQLCOMMENT_FLAG_REASON,
+ GQLCOMMENT_STATUS,
+} from "coral-server/graph/schema/__generated__/types";
+
export const premodNewCommenter = async ({
tenant,
author,
diff --git a/src/core/server/services/comments/pipeline/phases/recentCommentHistory.ts b/src/core/server/services/comments/pipeline/phases/recentCommentHistory.ts
index b7bc97891..b19991712 100644
--- a/src/core/server/services/comments/pipeline/phases/recentCommentHistory.ts
+++ b/src/core/server/services/comments/pipeline/phases/recentCommentHistory.ts
@@ -1,9 +1,5 @@
import { DateTime } from "luxon";
-import {
- GQLCOMMENT_FLAG_REASON,
- GQLCOMMENT_STATUS,
-} from "coral-server/graph/schema/__generated__/types";
import { ACTION_TYPE } from "coral-server/models/action/comment";
import {
calculateRejectionRate,
@@ -14,6 +10,11 @@ import {
ModerationPhaseContext,
} from "coral-server/services/comments/pipeline";
+import {
+ GQLCOMMENT_FLAG_REASON,
+ GQLCOMMENT_STATUS,
+} from "coral-server/graph/schema/__generated__/types";
+
export const recentCommentHistory = async ({
tenant,
author,
diff --git a/src/core/server/services/comments/pipeline/phases/storyClosed.spec.ts b/src/core/server/services/comments/pipeline/phases/storyClosed.spec.ts
index 8588c805f..ba1b13f34 100644
--- a/src/core/server/services/comments/pipeline/phases/storyClosed.spec.ts
+++ b/src/core/server/services/comments/pipeline/phases/storyClosed.spec.ts
@@ -1,7 +1,8 @@
import { DateTime } from "luxon";
import { storyClosed } from "coral-server/services/comments/pipeline/phases/storyClosed";
-import { ModerationPhaseContext } from "..";
+
+import { ModerationPhaseContext } from "../";
describe("storyClosed", () => {
it("throws an error when the story is closed", () => {
diff --git a/src/core/server/services/comments/pipeline/pipeline.spec.ts b/src/core/server/services/comments/pipeline/pipeline.spec.ts
index f7d9cad25..26abc5d25 100644
--- a/src/core/server/services/comments/pipeline/pipeline.spec.ts
+++ b/src/core/server/services/comments/pipeline/pipeline.spec.ts
@@ -1,8 +1,9 @@
+import { ACTION_TYPE } from "coral-server/models/action/comment";
+
import {
GQLCOMMENT_FLAG_REASON,
GQLCOMMENT_STATUS,
} from "coral-server/graph/schema/__generated__/types";
-import { ACTION_TYPE } from "coral-server/models/action/comment";
import { compose, ModerationPhaseContext } from "./pipeline";
diff --git a/src/core/server/services/i18n/translation.spec.ts b/src/core/server/services/i18n/translation.spec.ts
index 643e3a917..31b9689c3 100644
--- a/src/core/server/services/i18n/translation.spec.ts
+++ b/src/core/server/services/i18n/translation.spec.ts
@@ -1,4 +1,4 @@
-import { I18n } from ".";
+import { I18n } from "./";
it("loads the translations without error", async () => {
const translation = new I18n("en-US");
diff --git a/src/core/server/services/jwt/index.ts b/src/core/server/services/jwt/index.ts
index 23874e59d..cd2c49188 100644
--- a/src/core/server/services/jwt/index.ts
+++ b/src/core/server/services/jwt/index.ts
@@ -7,7 +7,6 @@ import { Bearer, BearerOptions } from "permit";
import { v4 as uuid } from "uuid";
import { DEFAULT_SESSION_DURATION } from "coral-common/constants";
-
import {
AuthenticationError,
JWTRevokedError,
diff --git a/src/core/server/services/migrate/migration_sample.ts b/src/core/server/services/migrate/migration_sample.ts
index 574a0787e..fbdc2dee5 100644
--- a/src/core/server/services/migrate/migration_sample.ts
+++ b/src/core/server/services/migrate/migration_sample.ts
@@ -3,7 +3,6 @@ import { Db } from "mongodb";
// Use the following collections reference to interact with specific
// collections.
// import collections from "coral-server/services/mongodb/collections";
-
import Migration from "coral-server/services/migrate/migration";
export default class extends Migration {
diff --git a/src/core/server/services/notifications/context.ts b/src/core/server/services/notifications/context.ts
index 13d9eebd7..fccc65038 100644
--- a/src/core/server/services/notifications/context.ts
+++ b/src/core/server/services/notifications/context.ts
@@ -2,7 +2,6 @@ import DataLoader from "dataloader";
import { Db } from "mongodb";
import { Config } from "coral-server/config";
-import { GQLDIGEST_FREQUENCY } from "coral-server/graph/schema/__generated__/types";
import logger, { Logger } from "coral-server/logger";
import { Comment, retrieveManyComments } from "coral-server/models/comment";
import { retrieveManyStories, Story } from "coral-server/models/story";
@@ -16,6 +15,8 @@ import {
import { DigestibleTemplate } from "coral-server/queue/tasks/mailer/templates";
import { JWTSigningConfig } from "coral-server/services/jwt";
+import { GQLDIGEST_FREQUENCY } from "coral-server/graph/schema/__generated__/types";
+
import { generateUnsubscribeURL } from "./categories/unsubscribe";
interface Options {
diff --git a/src/core/server/services/users/auth/reset.ts b/src/core/server/services/users/auth/reset.ts
index ee231dd12..edb051bee 100644
--- a/src/core/server/services/users/auth/reset.ts
+++ b/src/core/server/services/users/auth/reset.ts
@@ -4,6 +4,8 @@ import { DateTime } from "luxon";
import { Db } from "mongodb";
import { v4 as uuid } from "uuid";
+import { constructTenantURL } from "coral-server/app/url";
+import { Config } from "coral-server/config";
import {
LocalProfileNotSetError,
PasswordResetTokenExpired,
@@ -26,8 +28,6 @@ import {
verifyJWT,
} from "coral-server/services/jwt";
-import { constructTenantURL } from "coral-server/app/url";
-import { Config } from "coral-server/config";
import { validatePassword } from "../helpers";
export interface ResetToken extends Required {
diff --git a/src/index.ts b/src/index.ts
index b6366a44b..86128b860 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,11 @@
import dotenv from "dotenv";
import { rewrite } from "env-rewrite";
+import express from "express";
import sourceMapSupport from "source-map-support";
+import createCoral from "./core";
+import logger from "./core/server/logger";
+
// Configure the source map support so stack traces will reference the source
// files rather than the transpiled code.
sourceMapSupport.install({
@@ -28,11 +32,6 @@ process.on("unhandledRejection", (err) => {
throw err;
});
-import express from "express";
-
-import createCoral from "./core";
-import logger from "./core/server/logger";
-
// Create the app that will serve as the mounting point for the Coral Server.
const parent = express();
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 62a41f775..e0516e4f4 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -504,6 +504,7 @@ comments-reportPopover-pleaseLeaveAdditionalInformation =
Please leave any additional information that may be helpful to our moderators.
comments-reportPopover-maxCharacters = Max. { $maxCharacters } Characters
+comments-reportPopover-restrictToMaxCharacters = Please restrict your report to { $maxCharacters } characters
comments-reportPopover-cancel = Cancel
comments-reportPopover-submit = Submit
diff --git a/src/types/postcss-js.d.ts b/src/types/postcss-js.d.ts
new file mode 100644
index 000000000..05ee814bf
--- /dev/null
+++ b/src/types/postcss-js.d.ts
@@ -0,0 +1 @@
+declare module "postcss-js";