[next] Install (#1957)

* Wip

* Adding Wizard and initial step <3

* Wip

* Adding more steps to the Install Wizard

* Mantaining state across steps

* Adding Steps

* Step Component

* wip

* feat: improved logging

* feat: added tenant install route

* Progress

* Refactor

* Adding rest install mutation

* Wip

* Done

* Addding snapshots

* URL validators

* Adding validation for url, and final step

* Header component and main variants

* fix: resolved router

* fix: corrected spec for prop

* fix: updated test snapshot

* Translations

* Translations

* Adding extra validation

* prefixing events with On - onSaveData

* prefixing events with On - onSaveData

* Adding translations, and colors from the palette

* Centering steps

* Ready

* feat: added production redirects

* fix: fixes during production

* fix: removed dead code

* Placeholder translations

* removing submit from cancel

* Adding a description for the URL field

* typo

* Refactor and renaming

* Using white as var

* Refactor and renaming

* feat: use new palette colors

* fix: extracted styles

* Adding await to avoid race condition with setState :)

* lint

* feat: added urls

* fix: wizard leaking styles

* fix: simplify icon style

* fix: adjust global body css to remove padding to allow seamless integration

* fix: types and small refactors

* fix: correctly filter wizard children

* refactor: simplify step containers

* fix: better typecheck

* test: remove obsolete snapshots

* fix: don't export FormProps

src/core/client/ui/components/Button/Button.css

@@ -99,7 +99,7 @@
 }
 
 .variantFilled {
-  color: var(--palette-common-white);
+  color: var(--palette-text-light);
   &.colorRegular {
     background-color: var(--palette-grey-main);
   }
@@ -243,7 +243,7 @@
       &:active,
       &.active {
         border: 1px solid currentColor;
-        color: var(--palette-common-white);
+        color: var(--palette-text-light);
         background-color: var(--palette-grey-main);
       }
     }
@@ -254,7 +254,7 @@
       &:active,
       &.active {
         border: 1px solid currentColor;
-        color: var(--palette-common-white);
+        color: var(--palette-text-light);
         background-color: var(--palette-primary-main);
       }
     }
@@ -265,7 +265,7 @@
       &:active,
       &.active {
         border: 1px solid currentColor;
-        color: var(--palette-common-white);
+        color: var(--palette-text-light);
         background-color: var(--palette-error-main);
       }
     }
@@ -276,7 +276,7 @@
       &:active,
       &.active {
         border: 1px solid currentColor;
-        color: var(--palette-common-white);
+        color: var(--palette-text-light);
         background-color: var(--palette-success-main);
       }
     }

src/core/client/ui/components/Message/Message.css

@@ -21,7 +21,7 @@
 .colorError {
   background-color: var(--palette-error-light);
   border-color: var(--palette-error-darkest);
-  color: var(--palette-common-white);
+  color: var(--palette-text-light);
 }
 
 .fullWidth {

src/core/client/ui/components/Steps/Circle.css

@@ -0,0 +1,23 @@
+.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;
+}

src/core/client/ui/components/Steps/Circle.tsx

@@ -0,0 +1,23 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+import Icon from "../Icon";
+import * as styles from "./Circle.css";
+
+interface CircleProps {
+  active?: boolean;
+  completed?: boolean;
+}
+
+const Circle: StatelessComponent<CircleProps> = ({ active, completed }) => {
+  const rootClassName = cn(styles.root, {
+    [styles.active]: active,
+    [styles.completed]: completed,
+  });
+  return (
+    <span className={rootClassName}>
+      {completed && <Icon className={styles.icon}>done</Icon>}
+    </span>
+  );
+};
+
+export default Circle;

src/core/client/ui/components/Steps/Line.css

@@ -0,0 +1,12 @@
+.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);
+}

src/core/client/ui/components/Steps/Line.tsx

@@ -0,0 +1,17 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+import * as styles from "./Line.css";
+
+interface CircleProps {
+  active?: boolean;
+  completed?: boolean;
+}
+
+const Line: StatelessComponent<CircleProps> = ({ active, completed }) => {
+  const rootClassName = cn(styles.root, {
+    [styles.completed]: completed,
+  });
+  return <span className={rootClassName} />;
+};
+
+export default Line;

src/core/client/ui/components/Steps/Step.css

@@ -0,0 +1,11 @@
+.root {
+  position: relative;
+}
+
+.text {
+  position: absolute;
+  top: 26px;
+  transform: translateX(-50%);
+  left: 8%;
+  white-space: nowrap;
+}

src/core/client/ui/components/Steps/Step.tsx

@@ -0,0 +1,39 @@
+import React, { Component, ReactNode, ReactText } from "react";
+import Flex from "../Flex";
+import Typography from "../Typography";
+import Circle from "./Circle";
+import Line from "./Line";
+import * as styles from "./Step.css";
+
+interface StepProps {
+  children: ReactText | ReactNode;
+  active?: boolean;
+  completed?: boolean;
+  last?: boolean;
+  hidden?: boolean;
+}
+
+class Step extends Component<StepProps> {
+  public render() {
+    const { children, completed, active, last, hidden } = this.props;
+    if (hidden) {
+      return null;
+    }
+    return (
+      <div className={styles.root}>
+        <Flex
+          direction="row"
+          justifyContent="center"
+          alignItems="center"
+          itemGutter
+        >
+          <Circle completed={completed} active={active} />
+          {!last && <Line completed={completed} />}
+        </Flex>
+        <Typography className={styles.text}>{children}</Typography>
+      </div>
+    );
+  }
+}
+
+export default Step;

src/core/client/ui/components/Steps/StepBar.css

@@ -0,0 +1,6 @@
+.root {
+  width: 100%;
+  position: relative;
+  display: block;
+  padding: calc(2 * var(--spacing-unit)) 0;
+}

src/core/client/ui/components/Steps/StepBar.tsx

@@ -0,0 +1,41 @@
+import cn from "classnames";
+import React, { Component, ReactNode } from "react";
+import Flex from "../Flex";
+import * as styles from "./StepBar.css";
+
+interface StepBarProps {
+  children: ReactNode;
+  currentStep: number;
+  className?: string;
+}
+
+class StepBar extends Component<StepBarProps> {
+  public render() {
+    const { children, currentStep } = this.props;
+    const steps = React.Children.toArray(children);
+    const stepsToRender = steps
+      .filter((child: React.ReactElement<any>) => !child.props.hidden)
+      .map((child: React.ReactElement<any>, index: number, arr) =>
+        React.cloneElement(child, {
+          last: arr.length - 1 === index,
+          active: currentStep === index,
+          completed: currentStep > index,
+        })
+      );
+
+    return (
+      <div className={cn(styles.root, this.props.className)}>
+        <Flex
+          direction="row"
+          itemGutter
+          alignItems="center"
+          justifyContent="center"
+        >
+          {stepsToRender}
+        </Flex>
+      </div>
+    );
+  }
+}
+
+export default StepBar;

src/core/client/ui/components/Steps/index.ts

@@ -0,0 +1,2 @@
+export { default as StepBar } from "./StepBar";
+export { default as Step } from "./Step";

src/core/client/ui/components/Steps/steps.mdx

@@ -0,0 +1,18 @@
+---
+name: Steps
+menu: UI Kit
+---
+
+# Steps
+
+### Examples
+
+import { Flex, Step, StepBar } from './index'
+
+<Playground>
+    <StepBar currentStep={1}>
+      <Step>Create Admin Account</Step>
+      <Step>Add Organization Details</Step>
+      <Step>Add Permitted Domains</Step>
+    </StepBar>
+</Playground>

src/core/client/ui/components/index.ts

@@ -22,3 +22,4 @@ 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";