From 8b8ff4fc348f58c4d0629cbfc734044405058b9a Mon Sep 17 00:00:00 2001
From: Nikolay Karev <karev.n@gmail.com>
Date: Thu, 7 Oct 2021 20:38:35 +1100
Subject: [PATCH] Adding test cases

---
 ui/src/.storybook/preview.js                  |   1 +
 ui/src/package.json                           |  16 +-
 ui/src/src/App.js                             |   4 +-
 ui/src/src/components/suite/Form.tsx          |   4 +-
 ui/src/src/components/testcase/Dialog.tsx     |  34 +
 ui/src/src/components/testcase/Form.tsx       |  71 ++
 .../ui/{Filter.tsx => Attribute.tsx}          |  13 +-
 .../ui/{Filters.tsx => Attributes.tsx}        |  20 +-
 ui/src/src/components/ui/Button.tsx           |   6 +-
 ui/src/src/components/ui/Checkbox.tsx         |  31 +-
 ui/src/src/components/ui/Dialog.tsx           |   6 +-
 ui/src/src/components/ui/ListBox.tsx          |  12 +-
 ui/src/src/components/ui/typography.ts        |   2 +-
 ui/src/src/domain/index.ts                    |  20 +-
 ui/src/src/index.css                          |  12 +-
 ui/src/src/services/backend.ts                |  80 ++-
 .../{Form.stories.js => Form.stories.tsx}     |   4 +-
 ...der.stories.js => SuiteHeader.stories.tsx} |   3 +-
 .../components/testcase/Form.stories.tsx      |  29 +
 .../components/testcase/List.stories.tsx      |  35 +
 ...lter.stories.tsx => Attribute.stories.tsx} |   8 +-
 .../components/ui/Attributes.stories.tsx      |  20 +
 .../stories/components/ui/Filters.stories.tsx |  19 -
 .../ui/{attributes.js => attributes.ts}       |   0
 ui/src/src/testcases/SuiteHeader.tsx          |   2 +-
 ui/src/src/testcases/TestCaseList.tsx         |  15 +-
 ui/src/src/testcases/TestCaseTree.tsx         |  55 +-
 ui/src/src/testcases/TestCasesFilters.tsx     |  16 +-
 ui/src/src/testcases/TestCasesPanel.tsx       |  73 +-
 ui/src/src/testcases/TestCasesScreen.tsx      |   2 +-
 .../testcases/TestCasesScreenStateless.tsx    |   2 +-
 ui/src/src/testcases/TestSuiteScreen.tsx      |   2 +-
 ui/src/tailwind.config.js                     |   2 +-
 ui/src/yarn.lock                              | 648 +++++++++---------
 34 files changed, 815 insertions(+), 452 deletions(-)
 create mode 100644 ui/src/src/components/testcase/Dialog.tsx
 create mode 100644 ui/src/src/components/testcase/Form.tsx
 rename ui/src/src/components/ui/{Filter.tsx => Attribute.tsx} (92%)
 rename ui/src/src/components/ui/{Filters.tsx => Attributes.tsx} (71%)
 rename ui/src/src/stories/components/suite/{Form.stories.js => Form.stories.tsx} (73%)
 rename ui/src/src/stories/components/suite/{SuiteHeader.stories.js => SuiteHeader.stories.tsx} (73%)
 create mode 100644 ui/src/src/stories/components/testcase/Form.stories.tsx
 rename ui/src/src/stories/components/ui/{Filter.stories.tsx => Attribute.stories.tsx} (57%)
 create mode 100644 ui/src/src/stories/components/ui/Attributes.stories.tsx
 delete mode 100644 ui/src/src/stories/components/ui/Filters.stories.tsx
 rename ui/src/src/stories/components/ui/{attributes.js => attributes.ts} (100%)

diff --git a/ui/src/.storybook/preview.js b/ui/src/.storybook/preview.js
index 3cc1e409..fa526928 100644
--- a/ui/src/.storybook/preview.js
+++ b/ui/src/.storybook/preview.js
@@ -1,4 +1,5 @@
 import '../src/index.css';
+import 'tailwindcss/tailwind.css';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
diff --git a/ui/src/package.json b/ui/src/package.json
index 355ba57e..f883559f 100644
--- a/ui/src/package.json
+++ b/ui/src/package.json
@@ -102,20 +102,20 @@
   },
   "devDependencies": {
     "@craco/craco": "^6.3.0",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-links": "^6.3.8",
+    "@storybook/addon-actions": "^6.3.10",
+    "@storybook/addon-essentials": "^6.3.10",
+    "@storybook/addon-links": "^6.3.10",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.3.8",
-    "@storybook/manager-webpack5": "^6.3.8",
-    "@storybook/node-logger": "^6.3.8",
-    "@storybook/react": "^6.3.8",
+    "@storybook/builder-webpack5": "^6.3.10",
+    "@storybook/manager-webpack5": "^6.3.10",
+    "@storybook/node-logger": "^6.3.10",
+    "@storybook/react": "^6.3.10",
     "@types/react-router": "^5.1.16",
     "autoprefixer": "^9",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "prettier": "^2.4.0",
-    "storybook": "^6.3.8",
+    "storybook": "^6.3.10",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "typescript": "^4.4.3"
   }
diff --git a/ui/src/src/App.js b/ui/src/src/App.js
index ccdcba6a..5cf488cc 100644
--- a/ui/src/src/App.js
+++ b/ui/src/src/App.js
@@ -1,8 +1,10 @@
 import React, { Component } from "react";
+import "tailwindcss/tailwind.css";
+import "./App.css";
 import Header from "./common/Header";
 import Main from "./common/Main";
 import Footer from "./common/Footer";
-import "./App.css";
+
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faStroopwafel } from "@fortawesome/free-solid-svg-icons";
 import { RecoilRoot } from "recoil";
diff --git a/ui/src/src/components/suite/Form.tsx b/ui/src/src/components/suite/Form.tsx
index 605c92d6..42570533 100644
--- a/ui/src/src/components/suite/Form.tsx
+++ b/ui/src/src/components/suite/Form.tsx
@@ -23,11 +23,11 @@ const Form = ({ initialValues, initialFocus, onSubmit, onCancel, ...other }: For
   <Formik initialValues={initialValues} validationSchema={schema} onSubmit={onSubmit}>
     {({ values, errors, handleSubmit, handleChange, handleBlur }) => (
       <form onSubmit={handleSubmit} {...other}>
-        <h3 className="uppercase font-medium text-base text-neutral-fade2 mt-3 mb-5">Save a new test case</h3>
+        <h3 className="uppercase font-medium text-base text-neutral-fade2 mt-3 mb-5">Save a new test suite</h3>
         <p className="text-base text-neutral mb-4">
           Your new test suite requires a name. Please choose something meaningful and easy to remember.
         </p>
-        <label htmlFor="name" className={clsx("block mb-2", captionClasses)}>
+        <label htmlFor="name" className={clsx("block mb-2 font-medium", captionClasses)}>
           Suite name
         </label>
         <TextInput
diff --git a/ui/src/src/components/testcase/Dialog.tsx b/ui/src/src/components/testcase/Dialog.tsx
new file mode 100644
index 00000000..251fa394
--- /dev/null
+++ b/ui/src/src/components/testcase/Dialog.tsx
@@ -0,0 +1,34 @@
+import { useRef } from "react";
+import { ExistingAttribute, FakeAttribute } from "../../domain";
+import Dialog from "../ui/Dialog";
+import Form, { FormValues } from "./Form";
+
+export type SuiteDialogProps = {
+  onCancel: VoidFunction;
+  onSubmit: (values: FormValues) => void;
+  attributes: (FakeAttribute | ExistingAttribute)[];
+};
+
+const TestCaseDialog = ({ onCancel, onSubmit, attributes, ...other }: SuiteDialogProps) => {
+  const firstElementRef = useRef<HTMLInputElement>(null);
+  const initialValues: FormValues = {
+    attributes: [],
+    name: "",
+    description: "",
+  };
+  return (
+    <Dialog open onClose={onCancel} className="max-w-xl w-full" onOverlayClick={onCancel} {...other}>
+      <Dialog.Close onClick={onCancel} />
+      <Form
+        initialValues={initialValues}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        className="p-8"
+        initialFocus={firstElementRef}
+        attributes={attributes}
+      />
+    </Dialog>
+  );
+};
+
+export default TestCaseDialog;
diff --git a/ui/src/src/components/testcase/Form.tsx b/ui/src/src/components/testcase/Form.tsx
new file mode 100644
index 00000000..97e633d9
--- /dev/null
+++ b/ui/src/src/components/testcase/Form.tsx
@@ -0,0 +1,71 @@
+import { Formik } from "formik";
+import { OKCancelFooter } from "../ui/Dialog";
+import TextInput from "../ui/TextInput";
+import * as Yup from "yup";
+import FieldError from "../ui/FieldError";
+import clsx from "clsx";
+import { captionClasses } from "../ui/typography";
+import { FormHTMLAttributes, Ref } from "react";
+import { ExistingAttribute, FakeAttribute } from "../../domain";
+import Attributes from "../ui/Attributes";
+import { FilterValue } from "../ui/Attribute";
+const schema = Yup.object().shape({
+  name: Yup.string().required("Please give this test case a name"),
+});
+
+export type FormValues = {
+  name: string;
+  description: string;
+  attributes: FilterValue[];
+};
+
+export type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & {
+  initialValues: FormValues;
+  initialFocus?: Ref<HTMLInputElement>;
+  onSubmit: (values: FormValues) => void;
+  onCancel: VoidFunction;
+  attributes: (ExistingAttribute | FakeAttribute)[];
+};
+
+const Form = ({ initialValues, initialFocus, onSubmit, onCancel, attributes, ...other }: FormProps) => (
+  <Formik initialValues={initialValues} validationSchema={schema} onSubmit={onSubmit}>
+    {({ values, errors, handleSubmit, handleChange, handleBlur, setFieldValue }) => (
+      <form onSubmit={handleSubmit} {...other}>
+        <h3 className="uppercase font-medium text-base text-neutral-fade2 mt-3 mb-5">Create a new test case</h3>
+        <label htmlFor="name" className={clsx("block mb-2 font-medium", captionClasses)}>
+          Test case name
+        </label>
+        <TextInput
+          ref={initialFocus}
+          name="name"
+          className="block w-full"
+          placeholder="Suite name"
+          value={values.name}
+          onChange={handleChange}
+        />
+        <FieldError>{errors.name}</FieldError>
+        <label htmlFor="description" className={clsx("block mb-2 font-medium mt-8", captionClasses)}>
+          Description
+        </label>
+        <TextInput
+          name="description"
+          className="block w-full"
+          placeholder="Description"
+          value={values.description}
+          onChange={handleChange}
+        />
+        <label className={clsx("block mb-2 font-medium mt-8", captionClasses)}>Attributes</label>
+        <Attributes
+          attributes={attributes}
+          value={values.attributes}
+          onChange={value => setFieldValue("attributes", value)}
+          addLinkContent="Add attribute"
+          className="flex-col"
+        />
+        <OKCancelFooter OKText="Save" OKType="submit" onCancelClick={onCancel} className="pt-8" />
+      </form>
+    )}
+  </Formik>
+);
+
+export default Form;
diff --git a/ui/src/src/components/ui/Filter.tsx b/ui/src/src/components/ui/Attribute.tsx
similarity index 92%
rename from ui/src/src/components/ui/Filter.tsx
rename to ui/src/src/components/ui/Attribute.tsx
index 5426f5a9..dbaf27c1 100644
--- a/ui/src/src/components/ui/Filter.tsx
+++ b/ui/src/src/components/ui/Attribute.tsx
@@ -12,14 +12,15 @@ export type FilterValue = {
   values: string[];
 };
 
-export type FilterProps = {
+export type AttributeProps = {
   value: FilterValue;
   onChange: (value: FilterValue) => void;
   attributes: (ExistingAttribute | FakeAttribute)[];
   onRemoveClick: EventHandler<MouseEvent>;
   disabled?: boolean;
 };
-const Filter = ({ value, onChange, attributes, onRemoveClick, disabled }: FilterProps) => {
+
+const Attribute = ({ value, onChange, attributes, onRemoveClick, disabled }: AttributeProps) => {
   const selectedAttribute = useMemo(
     () => attributes.find(attribute => attribute.id === value?.attribute),
     [attributes, value],
@@ -48,7 +49,7 @@ const Filter = ({ value, onChange, attributes, onRemoveClick, disabled }: Filter
   return (
     <div
       className={clsx(
-        "inline-flex items-center gap-2 flex-nowrap pl-3",
+        "inline-flex items-center gap-2  pl-2.5",
         inputBorderClasses,
         inputBackgroundClasses,
         inputTextClasses,
@@ -56,7 +57,7 @@ const Filter = ({ value, onChange, attributes, onRemoveClick, disabled }: Filter
     >
       <CustomListbox
         disabled={disabled}
-        className="flex-grow flex-shrink-0"
+        className="flex-grow flex-shrink"
         buttonClassName="pl-1"
         value={value?.attribute}
         onChange={handleAttributeChange}
@@ -77,7 +78,7 @@ const Filter = ({ value, onChange, attributes, onRemoveClick, disabled }: Filter
       <span className="font-semibold">{selectedValues.length > 1 ? "in" : "="}</span>
       <CustomListbox
         disabled={disabled}
-        className="flex-grow flex-shrink-0"
+        className="flex-grow flex-shrink"
         buttonClassName="pl-1"
         value={selectedValues as any}
         onChange={handleValueChange}
@@ -113,4 +114,4 @@ const Filter = ({ value, onChange, attributes, onRemoveClick, disabled }: Filter
     </div>
   );
 };
-export default Filter;
+export default Attribute;
diff --git a/ui/src/src/components/ui/Filters.tsx b/ui/src/src/components/ui/Attributes.tsx
similarity index 71%
rename from ui/src/src/components/ui/Filters.tsx
rename to ui/src/src/components/ui/Attributes.tsx
index c00039b7..42582de0 100644
--- a/ui/src/src/components/ui/Filters.tsx
+++ b/ui/src/src/components/ui/Attributes.tsx
@@ -1,23 +1,28 @@
-import Filter, { FilterValue } from "./Filter";
+import Attribute, { FilterValue } from "./Attribute";
 import PlusCircleIcon from "@heroicons/react/solid/PlusCircleIcon";
 import { ExistingAttribute, FakeAttribute } from "../../domain";
+import clsx from "clsx";
+import { ReactNode } from "react";
 
-export type FiltersProps = {
+export type AttributesProps = {
   attributes: (ExistingAttribute | FakeAttribute)[];
   value: FilterValue[];
   onChange: (value: FilterValue[]) => void;
   disabled?: boolean;
+  className?: string;
+  addLinkContent: ReactNode;
 };
-const Filters = ({ attributes, value, onChange, disabled }: FiltersProps) => {
+
+const Attributes = ({ attributes, value, onChange, disabled, className, addLinkContent }: AttributesProps) => {
   const handleFilterChange = (index: number) => (newValue: FilterValue) =>
     onChange(value.map((filter, i) => (i === index ? newValue : filter)));
   const handleRemoveFilterClick = (index: number) => () =>
     onChange(value.map((filter, i) => (i === index ? undefined : filter)!).filter(Boolean));
   const handleAddFilterClick = () => onChange([...value, { attribute: undefined, values: [] }]);
   return (
-    <div className="flex flex-wrap gap-3">
+    <div className={clsx("flex flex-wrap gap-3", className)}>
       {value.map((filter, index) => (
-        <Filter
+        <Attribute
           disabled={disabled}
           key={index}
           value={filter}
@@ -30,12 +35,13 @@ const Filters = ({ attributes, value, onChange, disabled }: FiltersProps) => {
         className="flex items-center text-base text-primary gap-1 focus:outline-focus"
         onClick={handleAddFilterClick}
         disabled={disabled}
+        type="button"
       >
         <PlusCircleIcon className="w-5 h-5" />
-        <span>Add filter</span>
+        <span>{addLinkContent}</span>
       </button>
     </div>
   );
 };
 
-export default Filters;
+export default Attributes;
diff --git a/ui/src/src/components/ui/Button.tsx b/ui/src/src/components/ui/Button.tsx
index 03930a95..c13f6bee 100644
--- a/ui/src/src/components/ui/Button.tsx
+++ b/ui/src/src/components/ui/Button.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { ButtonHTMLAttributes } from "react";
 import { focusClasses } from "./focus";
 
-export const baseClasses = "duration-200 font-semibold ";
+export const baseClasses = "duration-200 font-medium";
 
 const Button = ({ className, ...other }: ButtonHTMLAttributes<HTMLButtonElement>) => (
   <button className={clsx(className, baseClasses)} {...other} />
@@ -24,8 +24,8 @@ Button.Transparent = Transparent;
 
 export const linkTextClasses = "text-base";
 export const linkClasses = "pl-3 pr-3 rounded-md";
-export const linkNeutralClasses = "text-neutral-fade1 hover:text-neutral";
-export const linkPrimaryClasses = "text-base text-primary hover:text-primary-hover";
+export const linkNeutralClasses = "text-neutral-fade2 hover:text-neutral";
+export const linkPrimaryClasses = "text-primary hover:text-primary-hover";
 const Link = ({ className, ...other }: ButtonHTMLAttributes<HTMLButtonElement>) => (
   <button className={clsx(className, baseClasses, linkTextClasses, focusClasses, linkClasses)} {...other} />
 );
diff --git a/ui/src/src/components/ui/Checkbox.tsx b/ui/src/src/components/ui/Checkbox.tsx
index 4bd7fdb9..4af57ddd 100644
--- a/ui/src/src/components/ui/Checkbox.tsx
+++ b/ui/src/src/components/ui/Checkbox.tsx
@@ -14,21 +14,30 @@ const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
   ({ checked, indeterminate, className, onClick, iconClassName, disabled, ...other }, ref) => (
     <button
       ref={ref}
-      className={clsx("border-2 rounded-md w-6 h-6", focusClasses, className, { "opacity-60": disabled })}
+      className={clsx("border-2 rounded-md w-6 h-6 flex-shrink-0 relative", focusClasses, className, {
+        "opacity-60": disabled,
+      })}
       onClick={disabled ? undefined : onClick}
       {...other}
     >
-      {indeterminate ? (
-        <svg viewBox="0 0 24 24" className="w-5 h-5 fill-current">
-          <rect fill="current" width="16" height="16" x="4" y="4" rx="3" ry="3"></rect>
-        </svg>
-      ) : (
-        <CheckIcon
-          className={clsx("w-5 h-5 stroke-current block duration-200 transition-opacity", iconClassName, {
+      <svg
+        viewBox="0 0 24 24"
+        className={clsx("w-6 h-6 fill-current absolute top-0 left-0 duration-200 transition-opacity", {
+          "opacity-0": !indeterminate,
+        })}
+      >
+        <rect fill="current" width="16" height="16" x="2" y="2" rx="3" ry="3"></rect>
+      </svg>
+
+      <CheckIcon
+        className={clsx(
+          "w-5 h-5 stroke-current block duration-200 transition-opacity absolute top-0 left-0",
+          iconClassName,
+          {
             "opacity-0": !checked,
-          })}
-        />
-      )}
+          },
+        )}
+      />
     </button>
   ),
 );
diff --git a/ui/src/src/components/ui/Dialog.tsx b/ui/src/src/components/ui/Dialog.tsx
index 4591261f..0ad3fc72 100644
--- a/ui/src/src/components/ui/Dialog.tsx
+++ b/ui/src/src/components/ui/Dialog.tsx
@@ -4,7 +4,7 @@ import XCircleIcon from "@heroicons/react/outline/XCircleIcon";
 import clsx from "clsx";
 import { ButtonHTMLAttributes, EventHandler, MouseEvent, PropsWithChildren } from "react";
 import { useLayoutEffect } from "react";
-import Button from "./Button";
+import Button, { linkNeutralClasses } from "./Button";
 import { focusClasses } from "./focus";
 
 export type DialogProps = PropsWithChildren<{
@@ -28,7 +28,7 @@ const Dialog = ({ children, className, onOverlayClick, onClose, ...other }: Dial
       className="text-neutral z-20 inset-0 fixed flex items-center justify-center overflow-y-auto font-sans"
       onClose={onClose}
     >
-      <div className="flex items-center justify-center min-h-screen">
+      <div className="flex items-center justify-center min-h-screen w-full">
         <HeadlessDialog.Overlay
           className="z-10 absolute opacity-80 bg-white w-screen h-screen"
           onClick={onOverlayClick}
@@ -78,7 +78,7 @@ export const OKCancelFooter = ({
     <Button.Primary onClick={onOKClick} type={OKType} className="pl-8 pr-8">
       {OKText}
     </Button.Primary>
-    <Button.Link onClick={onCancelClick} type={cancelType}>
+    <Button.Link className={linkNeutralClasses} onClick={onCancelClick} type={cancelType}>
       {cancelText}
     </Button.Link>
   </div>
diff --git a/ui/src/src/components/ui/ListBox.tsx b/ui/src/src/components/ui/ListBox.tsx
index 4956fc97..562a8fb8 100644
--- a/ui/src/src/components/ui/ListBox.tsx
+++ b/ui/src/src/components/ui/ListBox.tsx
@@ -6,7 +6,9 @@ import { inputBorderClasses, inputLayoutClasses, inputTextClasses } from "./inpu
 import { focusClasses } from "./focus";
 import { PropsWithChildren, ReactNode } from "react";
 
-const Placeholder = ({ children }: PropsWithChildren<{}>) => <span className="text-neutral-fade2">{children}</span>;
+const Placeholder = ({ children }: PropsWithChildren<{}>) => (
+  <span className="text-neutral-fade2 whitespace-nowrap">{children}</span>
+);
 
 export type BasicListboxProps<TValue> = PropsWithChildren<{
   label?: ReactNode;
@@ -35,7 +37,13 @@ export function BasicListbox<TValue>({
       className={clsx(className, "relative", "flex")}
     >
       <HeadlessListBox.Button
-        className={clsx("flex items-center gap-1", buttonClassName, inputTextClasses, inputLayoutClasses, focusClasses)}
+        className={clsx(
+          "flex flex-grow items-center gap-1",
+          buttonClassName,
+          inputTextClasses,
+          inputLayoutClasses,
+          focusClasses,
+        )}
       >
         <span className="flex-grow">{label}</span>
         <SelectorIcon className="w-4 h-4 text-neutral-fade2 hover:text-neutral-fade1 transition-colors duration-200" />
diff --git a/ui/src/src/components/ui/typography.ts b/ui/src/src/components/ui/typography.ts
index bd1075a9..a60f313e 100644
--- a/ui/src/src/components/ui/typography.ts
+++ b/ui/src/src/components/ui/typography.ts
@@ -1 +1 @@
-export const captionClasses = "uppercase text-sm font-medium text-neutral-fade2";
+export const captionClasses = "uppercase text-sm font-normal text-neutral-fade2 tracking-wider";
diff --git a/ui/src/src/domain/index.ts b/ui/src/src/domain/index.ts
index 13ea23a5..fe11b73c 100644
--- a/ui/src/src/domain/index.ts
+++ b/ui/src/src/domain/index.ts
@@ -62,9 +62,27 @@ export type ExistingSuite = WithID & Meta & Suite;
 
 export interface TestCase {
   readonly name: string;
+  readonly description: string;
+  readonly attributes: FilterValue[];
 }
 
-export type ExistingTestCase = WithID & TestCase;
+export type ExistingTestCase = WithID &
+  TestCase &
+  Meta & {
+    readonly automated: boolean;
+    readonly broken: boolean;
+    readonly metadata: Record<string, any>;
+    readonly steps: never[];
+  };
+export type FilterValue = {
+  attribute: string | undefined;
+  values: string[];
+};
+export type NewTestCase = {
+  name: string;
+  description: string;
+  attributes: FilterValue[];
+};
 export type TestCaseGroup = {
   readonly id: string;
   readonly count: number;
diff --git a/ui/src/src/index.css b/ui/src/src/index.css
index e3e73be1..6819ce27 100644
--- a/ui/src/src/index.css
+++ b/ui/src/src/index.css
@@ -1,13 +1,7 @@
-@tailwind base; 
-
-@tailwind components;
-
-@tailwind utilities;
-
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap');
 
-body {
+html body {
   margin: 0;
   padding: 0;
   font-family: 'Noto Sans', sans-serif;
@@ -15,7 +9,7 @@ body {
 }
 
 html {
-  font-size: 15px;
+  font-size: 16px;
 }
 
 body .tailwind .pl-5 {
diff --git a/ui/src/src/services/backend.ts b/ui/src/src/services/backend.ts
index bf4a898d..4ce42149 100644
--- a/ui/src/src/services/backend.ts
+++ b/ui/src/src/services/backend.ts
@@ -1,5 +1,6 @@
 import qs from "qs";
 import * as Utils from "../common/Utils";
+
 import {
   ExistingAttribute,
   ExistingSuite,
@@ -15,6 +16,7 @@ import {
   RootTestCaseGroup,
   isExistingAttributeFilter,
   isExistingAttribute,
+  NewTestCase,
 } from "../domain";
 
 export const getApiBaseUrl = (url: string) => (process.env.REACT_APP_BASE_API_URL || "/api/") + url;
@@ -51,7 +53,8 @@ const getMutationOptions = <TBody>(body: TBody) => ({
 
 const backend = {
   get: <TBody>(url: string, options?: RequestInit) => fetchJSON(url, "GET", options) as Promise<TBody>,
-  post: <TBody>(url: string, body: TBody) => fetchJSON(url, "POST", getMutationOptions(body)),
+  post: <TBody, TResponse>(url: string, body: TBody) =>
+    fetchJSON(url, "POST", getMutationOptions(body)) as Promise<TResponse>,
   delete: (url: string) => fetchInternal(url, "DELETE"),
   put: <TBody>(url: string, body: TBody) => fetchJSON(url, "PUT", getMutationOptions(body)),
 };
@@ -120,7 +123,73 @@ const mapFiltersToQueryParams = (filters: AttributeFilterDraft[]): string =>
     .join("&");
 
 const mapGroupsToQueryParams = (groups: string[]) => groups.map(group => `groups=${group}`).join("&");
+type NewServerTestCase = {
+  attributes: Record<string, string[]>;
+  description: string;
+  name: string;
+  id: null;
+  steps: never[];
+};
+const mapAttributeToServer =
+  (attributes: (FakeAttribute | ExistingAttribute)[], attribute: string | undefined) =>
+  (value: string): string | undefined => {
+    const attr = attributes.find(item => item.id === attribute);
+    if (!attr) {
+      return undefined;
+    }
+    return attr.values.find(val => val.id === value)?.name;
+  };
 
+const mapNewTestCaseToBackend =
+  (attributes: (FakeAttribute | ExistingAttribute)[]) =>
+  (values: NewTestCase): NewServerTestCase => {
+    return {
+      attributes: values.attributes.reduce(
+        (acc, attribute) => ({
+          ...acc,
+          [attribute.attribute!]: attribute.values
+            .map(mapAttributeToServer(attributes, attribute.attribute))
+            .filter(Boolean),
+        }),
+        {},
+      ),
+      id: null,
+      name: values.name,
+      description: values.description,
+      steps: [],
+    };
+  };
+type ServerTestCase = Omit<NewServerTestCase, "id"> &
+  WithID &
+  Meta & {
+    automated: boolean;
+    broken: boolean;
+    metadata: Record<string, never>;
+  };
+const mapServerTestCaseAttributesToClient =
+  (attributes: (FakeAttribute | ExistingAttribute)[]) =>
+  (serverAttributes: Record<string, string[]>): { attribute: string; values: string[] }[] => {
+    return Object.entries(serverAttributes).map(([attr, values]) => {
+      const attribute = attributes.find(item => item.id === attr);
+      return {
+        attribute: attr,
+        values: values.map(value => (attribute?.values ?? []).find(val => val.name === value)!.id!),
+      };
+    });
+  };
+const mapServerTestCaseToClient =
+  (attributes: (FakeAttribute | ExistingAttribute)[]) =>
+  (serverTestCase: ServerTestCase): ExistingTestCase => ({
+    ...copyMeta(serverTestCase),
+    automated: serverTestCase.automated,
+    broken: serverTestCase.broken,
+    name: serverTestCase.name,
+    description: serverTestCase.description,
+    deleted: serverTestCase.deleted,
+    steps: serverTestCase.steps,
+    metadata: serverTestCase.metadata,
+    attributes: mapServerTestCaseAttributesToClient(attributes)(serverTestCase.attributes),
+  });
 export const backendService = {
   project: (projectId: string) => ({
     testSuites: {
@@ -145,7 +214,14 @@ export const backendService = {
         ),
       list: (filters: AttributeFilterDraft[], offset: number = 0) =>
         backend.get<ExistingTestCase[]>(
-          projectId + "/testcase?skip=" + offset.toString() + mapFiltersToQueryParams(filters),
+          projectId + "/testcase?limit=50&skip=" + offset.toString() + mapFiltersToQueryParams(filters),
+        ),
+      create: async (values: NewTestCase, attributes: (ExistingAttribute | FakeAttribute)[]) =>
+        mapServerTestCaseToClient(attributes)(
+          await backend.post<NewServerTestCase, ServerTestCase>(
+            projectId + "/testcase",
+            mapNewTestCaseToBackend(attributes)(values),
+          ),
         ),
     },
   }),
diff --git a/ui/src/src/stories/components/suite/Form.stories.js b/ui/src/src/stories/components/suite/Form.stories.tsx
similarity index 73%
rename from ui/src/src/stories/components/suite/Form.stories.js
rename to ui/src/src/stories/components/suite/Form.stories.tsx
index 9e1d7e15..0e6ca3b5 100644
--- a/ui/src/src/stories/components/suite/Form.stories.js
+++ b/ui/src/src/stories/components/suite/Form.stories.tsx
@@ -10,5 +10,5 @@ export default {
   argTypes: { onSubmit: { action: true }, onCancel: { action: true } },
 };
 
-export const Default = args => <Form {...args} />;
-export const Dialog = args => <SuiteDialog {...args} />;
+export const Default = (args: any) => <Form {...args} />;
+export const Dialog = (args: any) => <SuiteDialog {...args} />;
diff --git a/ui/src/src/stories/components/suite/SuiteHeader.stories.js b/ui/src/src/stories/components/suite/SuiteHeader.stories.tsx
similarity index 73%
rename from ui/src/src/stories/components/suite/SuiteHeader.stories.js
rename to ui/src/src/stories/components/suite/SuiteHeader.stories.tsx
index a2a31414..9698949a 100644
--- a/ui/src/src/stories/components/suite/SuiteHeader.stories.js
+++ b/ui/src/src/stories/components/suite/SuiteHeader.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import SuiteHeader from "../../../testcases/SuiteHeader";
 
 export default {
@@ -10,4 +9,4 @@ export default {
   argTypes: { onChange: { action: true } },
 };
 
-export const Default = args => <SuiteHeader {...args} />;
+export const Default = (args: any) => <SuiteHeader {...args} />;
diff --git a/ui/src/src/stories/components/testcase/Form.stories.tsx b/ui/src/src/stories/components/testcase/Form.stories.tsx
new file mode 100644
index 00000000..c178f79b
--- /dev/null
+++ b/ui/src/src/stories/components/testcase/Form.stories.tsx
@@ -0,0 +1,29 @@
+import { RefObject } from "react";
+import TestCaseDialog from "../../../components/testcase/Dialog";
+import Form, { FormValues } from "../../../components/testcase/Form";
+import { ExistingAttribute, FakeAttribute } from "../../../domain";
+import { attributes } from "../ui/attributes";
+
+export type Args = {
+  readonly initialValues: FormValues;
+  readonly initialFocus: RefObject<HTMLInputElement>;
+};
+
+export type Actions = {
+  attributes: (ExistingAttribute | FakeAttribute)[];
+  onSubmit: (values: FormValues) => Promise<void>;
+  onCancel: VoidFunction;
+  initialValues: FormValues;
+};
+
+export default {
+  component: Form,
+  title: "components/testcase/Form",
+  args: {
+    initialValues: { attributes: [{ attribute: "foo", values: ["foo-value-1"] }] },
+    attributes,
+  },
+};
+
+export const Default = (args: Args & Actions) => <Form {...args} />;
+export const Dialog = (args: any) => <TestCaseDialog {...args} />;
diff --git a/ui/src/src/stories/components/testcase/List.stories.tsx b/ui/src/src/stories/components/testcase/List.stories.tsx
index 50ca57f6..5dc047e6 100644
--- a/ui/src/src/stories/components/testcase/List.stories.tsx
+++ b/ui/src/src/stories/components/testcase/List.stories.tsx
@@ -18,22 +18,57 @@ export type Actions = {
   onToggleGroupClick: (group: TestCaseGroup) => void;
 };
 
+const sharedMeta = {
+  createdTime: Date.now(),
+  lastModifiedTime: Date.now(),
+  deleted: false,
+  lastModifiedBy: "root",
+  createdBy: "root",
+};
 const testCases: ExistingTestCase[] = [
   {
     id: "1",
     name: "TestCase 1",
+    description: "Desc",
+    attributes: [],
+    automated: false,
+    steps: [],
+    broken: false,
+    metadata: {},
+    ...sharedMeta,
   },
   {
     id: "2",
     name: "TestCase 2. It has a very very very, incredibly long name.",
+    description: "Desc",
+    attributes: [],
+    automated: false,
+    steps: [],
+    broken: false,
+    metadata: {},
+    ...sharedMeta,
   },
   {
     id: "3",
     name: "TestCase 3. It has a very very very, incredibly long name.",
+    description: "Desc",
+    attributes: [],
+    automated: false,
+    steps: [],
+    broken: false,
+    metadata: {},
+    ...sharedMeta,
   },
   {
     id: "4",
     name: "TestCase 3. It has a very very very, incredibly long name.",
+    description: "Desc",
+    attributes: [],
+    automated: false,
+    steps: [],
+    broken: false,
+    metadata: {},
+    ...sharedMeta,
   },
 ];
 
diff --git a/ui/src/src/stories/components/ui/Filter.stories.tsx b/ui/src/src/stories/components/ui/Attribute.stories.tsx
similarity index 57%
rename from ui/src/src/stories/components/ui/Filter.stories.tsx
rename to ui/src/src/stories/components/ui/Attribute.stories.tsx
index 035d881c..00d09744 100644
--- a/ui/src/src/stories/components/ui/Filter.stories.tsx
+++ b/ui/src/src/stories/components/ui/Attribute.stories.tsx
@@ -1,15 +1,15 @@
 import React, { useState } from "react";
 
-import Filter from "../../../components/ui/Filter";
+import Attribute from "../../../components/ui/Attribute";
 import { attributes } from "./attributes";
 
 export default {
-  component: Filter,
-  title: "components/ui/Filter",
+  component: Attribute,
+  title: "components/ui/Attribute",
   args: { attributes },
 };
 
 export const Default = (args: any) => {
   const [state, setState] = useState({ attribute: undefined, values: [] });
-  return <Filter value={state} onChange={setState} {...args} />;
+  return <Attribute value={state} onChange={setState} {...args} />;
 };
diff --git a/ui/src/src/stories/components/ui/Attributes.stories.tsx b/ui/src/src/stories/components/ui/Attributes.stories.tsx
new file mode 100644
index 00000000..61bb2cb5
--- /dev/null
+++ b/ui/src/src/stories/components/ui/Attributes.stories.tsx
@@ -0,0 +1,20 @@
+import { ReactNode, useState } from "react";
+import { FilterValue } from "../../../components/ui/Attribute";
+
+import Attributes from "../../../components/ui/Attributes";
+import { ExistingAttribute } from "../../../domain";
+import { attributes } from "./attributes";
+
+export default {
+  component: Attributes,
+  title: "components/ui/Attributes",
+  args: {
+    attributes,
+    addLinkContent: "Add filter",
+  },
+};
+
+export const Default = (args: { attributes: ExistingAttribute[]; addLinkContent: ReactNode }) => {
+  const [state, setState] = useState<FilterValue[]>([]);
+  return <Attributes {...args} value={state} onChange={setState} />;
+};
diff --git a/ui/src/src/stories/components/ui/Filters.stories.tsx b/ui/src/src/stories/components/ui/Filters.stories.tsx
deleted file mode 100644
index 1ccd54ed..00000000
--- a/ui/src/src/stories/components/ui/Filters.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { useState } from "react";
-import { FilterValue } from "../../../components/ui/Filter";
-
-import Filters from "../../../components/ui/Filters";
-import { ExistingAttribute } from "../../../domain";
-import { attributes } from "./attributes";
-
-export default {
-  component: Filters,
-  title: "components/ui/Filters",
-  args: {
-    attributes,
-  },
-};
-
-export const Default = (args: { attributes: ExistingAttribute[] }) => {
-  const [state, setState] = useState<FilterValue[]>([]);
-  return <Filters {...args} value={state} onChange={setState} />;
-};
diff --git a/ui/src/src/stories/components/ui/attributes.js b/ui/src/src/stories/components/ui/attributes.ts
similarity index 100%
rename from ui/src/src/stories/components/ui/attributes.js
rename to ui/src/src/stories/components/ui/attributes.ts
diff --git a/ui/src/src/testcases/SuiteHeader.tsx b/ui/src/src/testcases/SuiteHeader.tsx
index 53b8b32d..ba693d8d 100644
--- a/ui/src/src/testcases/SuiteHeader.tsx
+++ b/ui/src/src/testcases/SuiteHeader.tsx
@@ -11,7 +11,7 @@ export type SuiteHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange">
 
 export const SuiteHeaderText = ({ children, className, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
   <h1
-    className={clsx(className, "flex items-center text-neutral text font-semibold text-lg gap-2 p-0 mt-0 mb-0")}
+    className={clsx(className, "flex items-center text-neutral text font-light text-xl gap-2 p-0 mt-0 mb-0")}
     {...props}
   >
     {children}
diff --git a/ui/src/src/testcases/TestCaseList.tsx b/ui/src/src/testcases/TestCaseList.tsx
index 16c45230..7e1d64be 100644
--- a/ui/src/src/testcases/TestCaseList.tsx
+++ b/ui/src/src/testcases/TestCaseList.tsx
@@ -7,8 +7,9 @@ import { useQueryStringState } from "../lib/hooks";
 import { selectorFamily } from "recoil";
 import { backendService } from "../services/backend";
 import { WithProjectID } from "./testCasesScreen.data";
-import Button from "../components/ui/Button";
+import Button, { linkNeutralClasses } from "../components/ui/Button";
 import { useState } from "react";
+import clsx from "clsx";
 export type TestCaseListProps = {
   projectID: string;
   isTestCaseSelected: (id: string) => boolean;
@@ -84,8 +85,16 @@ const TestCaseList = ({
   const testCaseCount = useRecoilValue(testCaseCountSelector({ projectID, filters }));
 
   const [selectedTestCaseID, setSelectedTestCaseID] = useQueryStringState("selected", testCases[0]?.id);
+  const handleAddTestCase = (testCase: ExistingTestCase) => {
+    setTestCases([testCase, ...testCases]);
+  };
   return (
-    <TestCasesPanel projectID={projectID} attributes={attributes} selectedTestCaseID={selectedTestCaseID}>
+    <TestCasesPanel
+      projectID={projectID}
+      attributes={attributes}
+      selectedTestCaseID={selectedTestCaseID}
+      onTestCaseAdded={handleAddTestCase}
+    >
       <div>
         <List>
           {testCases.map(testCase => (
@@ -103,7 +112,7 @@ const TestCaseList = ({
         </List>
         {testCases.length < testCaseCount && (
           <Button.Link
-            className="flex justify-center text-primary text-base w-full"
+            className={clsx("flex justify-center text-primary text-base w-full mt-3 mb-3", linkNeutralClasses)}
             disabled={loadingMore}
             onClick={handleLoadMoreClick}
           >
diff --git a/ui/src/src/testcases/TestCaseTree.tsx b/ui/src/src/testcases/TestCaseTree.tsx
index a1bf8a4f..31ffc1c9 100644
--- a/ui/src/src/testcases/TestCaseTree.tsx
+++ b/ui/src/src/testcases/TestCaseTree.tsx
@@ -1,4 +1,4 @@
-import { selectorFamily, useRecoilValue } from "recoil";
+import { atomFamily, selectorFamily, useRecoilState } from "recoil";
 
 import List from "../components/testcase/List";
 
@@ -6,10 +6,18 @@ import { TestCaseListProps } from "./TestCaseList";
 import TestCaseGroupComponent from "../components/testcase/TestCaseGroup";
 import { ExclusionState, useSelection } from "./hooks";
 
-import { AttributeFilterDraft, getAllTestCases, listToBoolHash, TestCaseGroup } from "../domain";
+import {
+  AttributeFilterDraft,
+  ExistingTestCase,
+  getAllTestCases,
+  listToBoolHash,
+  RootTestCaseGroup,
+  TestCaseGroup,
+} from "../domain";
 import TestCasesPanel from "./TestCasesPanel";
 import { useQueryStringState } from "../lib/hooks";
 import { backendService } from "../services/backend";
+import TestCaseListItem from "../components/testcase/TestCaseListItem";
 
 export type TestCaseTreeProps = TestCaseListProps & {
   groups: string[];
@@ -22,12 +30,23 @@ export type TestCaseListSelectorParams = {
 export type TestCaseTreeSelectorParams = TestCaseListSelectorParams & {
   groups: string[];
 };
-export const testCaseTreeSelector = selectorFamily({
+
+const testCaseTreeAtom = atomFamily<RootTestCaseGroup | undefined, TestCaseTreeSelectorParams>({
+  key: "test-case-tree-atom",
+  default: undefined,
+});
+
+export const testCaseTreeSelector = selectorFamily<RootTestCaseGroup, TestCaseTreeSelectorParams>({
   key: "test-case-list-selector",
   get:
     ({ projectID, filters, groups }: TestCaseTreeSelectorParams) =>
-    () =>
+    ({ get }) =>
+      get(testCaseTreeAtom({ projectID, filters, groups })) ||
       backendService.project(projectID).testCases.tree(filters, groups),
+  set:
+    params =>
+    ({ set }, value) =>
+      set(testCaseTreeAtom(params), value),
 });
 
 export const useToggleGroupState = (exclusionState: ExclusionState) => (group: TestCaseGroup) => {
@@ -51,14 +70,36 @@ const TestCaseTree = ({
   exclusionState,
   disabled,
 }: TestCaseTreeProps) => {
-  const testCases = useRecoilValue(testCaseTreeSelector({ projectID, filters, groups }));
+  const [rootTestCaseGroup, setRootTestCaseGroop] = useRecoilState(
+    testCaseTreeSelector({ projectID, filters, groups }),
+  );
   const [selectedTestCaseID, setSelectedTestCaseID] = useQueryStringState("selected", undefined);
   const [isGroupOpen, toggleGroup] = useSelection();
   const toggleGroupState = useToggleGroupState(exclusionState);
+  const handleTestCaseAdded = (testCase: ExistingTestCase) => {
+    setRootTestCaseGroop({ ...rootTestCaseGroup, testCases: [testCase, ...rootTestCaseGroup.testCases] });
+  };
+
   return (
-    <TestCasesPanel projectID={projectID} attributes={attributes} selectedTestCaseID={selectedTestCaseID}>
+    <TestCasesPanel
+      projectID={projectID}
+      attributes={attributes}
+      selectedTestCaseID={selectedTestCaseID}
+      onTestCaseAdded={handleTestCaseAdded}
+    >
       <List>
-        {testCases.children?.map(testCaseGroup => (
+        {rootTestCaseGroup.testCases.map(testCase => (
+          <TestCaseListItem
+            key={testCase.id}
+            testCase={testCase}
+            onClick={setSelectedTestCaseID}
+            onCheckboxClick={onToggleTestCase}
+            selected={selectedTestCaseID === testCase.id}
+            checked={isTestCaseSelected(testCase.id)}
+            level={-1}
+          />
+        ))}
+        {rootTestCaseGroup.children?.map(testCaseGroup => (
           <TestCaseGroupComponent
             disabled={disabled}
             isTestCaseSelected={isTestCaseSelected}
diff --git a/ui/src/src/testcases/TestCasesFilters.tsx b/ui/src/src/testcases/TestCasesFilters.tsx
index c1fdeb7b..dc2faa30 100644
--- a/ui/src/src/testcases/TestCasesFilters.tsx
+++ b/ui/src/src/testcases/TestCasesFilters.tsx
@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import { MouseEvent } from "react";
 import Button from "../components/ui/Button";
-import { FilterValue } from "../components/ui/Filter";
-import Filters from "../components/ui/Filters";
+import { FilterValue } from "../components/ui/Attribute";
+import Attributes from "../components/ui/Attributes";
 import { inputBackgroundClasses } from "../components/ui/input";
 import Listbox from "../components/ui/ListBox";
 import SelectedValues from "../components/ui/SelectedValues";
@@ -40,7 +40,7 @@ const TestCasesFilter = ({
   const projectAttributesToGroupBy = projectAttributes.filter(attribute => attribute.id !== "broken");
   return (
     <div className="bg-white gap-3 p-5 ml-8 mr-8 mb-8 border">
-      <div className={clsx("w-1/5 h-10 pt-3", captionClasses)}>Grouping</div>
+      <div className={clsx("pb-1", captionClasses)}>Grouping</div>
       <div className="flex min-w">
         {projectAttributes.length > 0 && (
           <Listbox
@@ -69,8 +69,14 @@ const TestCasesFilter = ({
           </div>
         )}
       </div>
-      <div className={clsx("w-1/5 min-h-10 flex items-center pt-2.5", captionClasses)}>Attributes</div>
-      <Filters disabled={disabled} attributes={projectAttributes} value={filters} onChange={onChangeFilters} />
+      <div className={clsx("pb-1 pt-5", captionClasses)}>Attributes</div>
+      <Attributes
+        disabled={disabled}
+        attributes={projectAttributes}
+        value={filters}
+        onChange={onChangeFilters}
+        addLinkContent="Add filter"
+      />
     </div>
   );
 };
diff --git a/ui/src/src/testcases/TestCasesPanel.tsx b/ui/src/src/testcases/TestCasesPanel.tsx
index 8273ab2b..8bc3d72f 100644
--- a/ui/src/src/testcases/TestCasesPanel.tsx
+++ b/ui/src/src/testcases/TestCasesPanel.tsx
@@ -1,46 +1,69 @@
-import Button from "../components/ui/Button";
-import { PropsWithChildren, useMemo } from "react";
+import Button, { linkNeutralClasses } from "../components/ui/Button";
+import { PropsWithChildren, useMemo, useState } from "react";
 import PlayIcon from "@heroicons/react/solid/PlayIcon";
 import PlusCircleIcon from "@heroicons/react/outline/PlusCircleIcon";
-import { ExistingAttribute, FakeAttribute } from "../domain";
+import { ExistingAttribute, ExistingTestCase, FakeAttribute } from "../domain";
 import TestCase from "./TestCase";
-import { mapClientAttributeToServer } from "../services/backend";
-import { captionClasses } from "../components/ui/typography";
+import { backendService, mapClientAttributeToServer } from "../services/backend";
 import clsx from "clsx";
+import { captionClasses } from "../components/ui/typography";
+import Dialog from "../components/testcase/Dialog";
+import { FormValues } from "../components/testcase/Form";
 
 export type TestCasesPanelProps = PropsWithChildren<{
   projectID: string;
   selectedTestCaseID: string | undefined;
   attributes: (ExistingAttribute | FakeAttribute)[];
+  onTestCaseAdded: (testCase: ExistingTestCase) => void;
 }>;
 
 const useLegacyAttributes = (attributes: (ExistingAttribute | FakeAttribute)[]) =>
   useMemo(() => attributes.map(mapClientAttributeToServer), [attributes]);
 
-const TestCasesPanel = ({ children, selectedTestCaseID, projectID, attributes }: TestCasesPanelProps): JSX.Element => {
+const TestCasesPanel = ({
+  children,
+  selectedTestCaseID,
+  projectID,
+  attributes,
+  onTestCaseAdded,
+}: TestCasesPanelProps): JSX.Element => {
   const legacyAttributes = useLegacyAttributes(attributes);
+  const [showAddTestCase, setShowAddTestCase] = useState(false);
+  const handleAddFormSubmit = async (values: FormValues) => {
+    setShowAddTestCase(false);
+    onTestCaseAdded(await backendService.project(projectID).testCases.create(values, attributes));
+  };
   return (
-    <div className="flex mt-5 gap-3">
-      <div className="w-1/3 bg-white ml-8 pb-8  border">
-        <div className="flex gap-2 pt-5 pl-5 items-center flex-wrap">
-          <h2 className={clsx(captionClasses, "m-0 flex-grow")}>Test cases</h2>
-          <Button.Link className="flex gap-2 items-center">
-            <PlusCircleIcon className="w-6 h-6" />
-            Add
-          </Button.Link>
-          <Button.Primary className="flex gap-2 pl-3 pr-3 items-center">
-            <PlayIcon className="w-6 h-6" />
-            Launch
-          </Button.Primary>
+    <>
+      {showAddTestCase && (
+        <Dialog attributes={attributes} onCancel={() => setShowAddTestCase(false)} onSubmit={handleAddFormSubmit} />
+      )}
+      <div className="flex mt-5 gap-3">
+        <div className="w-1/3 bg-white ml-8 pb-8  border">
+          <div className="flex gap-2 pt-5 pl-5 items-center flex-wrap">
+            {/* <h2 className={clsx("font-medium m-0 flex-grow")}>Test cases</h2> */}
+            <h2 className={clsx(captionClasses, "flex-grow")}>Test cases</h2>
+            <Button.Link
+              className={clsx("flex gap-2 items-center", linkNeutralClasses)}
+              onClick={() => setShowAddTestCase(true)}
+            >
+              <PlusCircleIcon className="w-6 h-6" />
+              Add
+            </Button.Link>
+            <Button.Primary className="flex gap-2 pl-3 pr-3 items-center">
+              <PlayIcon className="w-6 h-6" />
+              Launch
+            </Button.Primary>
+          </div>
+          {children}
+        </div>
+        <div className="w-2/3 mr-8 bg-white border p-5 pb-7">
+          {selectedTestCaseID && (
+            <TestCase projectId={projectID} projectAttributes={legacyAttributes} testcaseId={selectedTestCaseID} />
+          )}
         </div>
-        {children}
-      </div>
-      <div className="w-2/3 mr-8 bg-white border p-5">
-        {selectedTestCaseID && (
-          <TestCase projectId={projectID} projectAttributes={legacyAttributes} testcaseId={selectedTestCaseID} />
-        )}
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/ui/src/src/testcases/TestCasesScreen.tsx b/ui/src/src/testcases/TestCasesScreen.tsx
index 4d5b1ca7..b9a7840c 100644
--- a/ui/src/src/testcases/TestCasesScreen.tsx
+++ b/ui/src/src/testcases/TestCasesScreen.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent, useState } from "react";
 import { backendService } from "../services/backend";
 import { useRecoilValue } from "recoil";
 import { useJSONQueryStringState, useQueryStringState } from "../lib/hooks";
-import { FilterValue } from "../components/ui/Filter";
+import { FilterValue } from "../components/ui/Attribute";
 import { AttributeFilterDraft } from "../domain";
 import SuiteDialog from "../components/suite/Dialog";
 import { FormValues } from "../components/suite/Form";
diff --git a/ui/src/src/testcases/TestCasesScreenStateless.tsx b/ui/src/src/testcases/TestCasesScreenStateless.tsx
index 2f3ec78d..ba4b05f4 100644
--- a/ui/src/src/testcases/TestCasesScreenStateless.tsx
+++ b/ui/src/src/testcases/TestCasesScreenStateless.tsx
@@ -37,7 +37,7 @@ export const TestCasesScreenStateless = ({
   ...other
 }: TestCasesScreenStatelessProps) => (
   <div className="tailwind" style={{ marginLeft: "-15px", marginRight: "-15px" }}>
-    <div className="bg-neutral-fade6 pt-8 pb-8 font-sans text-neutral">
+    <div className="bg-neutral-fade6 pt-8 pb-8 font-sans text-neutral font-normal">
       {beforeFilters}
       <TestCasesFilter
         disabled={disableFilters}
diff --git a/ui/src/src/testcases/TestSuiteScreen.tsx b/ui/src/src/testcases/TestSuiteScreen.tsx
index caece883..d45afc98 100644
--- a/ui/src/src/testcases/TestSuiteScreen.tsx
+++ b/ui/src/src/testcases/TestSuiteScreen.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent, useCallback, useMemo, useState } from "react";
 import { backendService } from "../services/backend";
 import { atomFamily, RecoilState, selectorFamily, useRecoilState, useRecoilValue } from "recoil";
 
-import { FilterValue } from "../components/ui/Filter";
+import { FilterValue } from "../components/ui/Attribute";
 import { ExistingAttributeFilter, ExistingSuite, listToBoolHash } from "../domain";
 
 import { attributesSelector } from "./testCasesScreen.data";
diff --git a/ui/src/tailwind.config.js b/ui/src/tailwind.config.js
index 63a73a11..922caf9b 100644
--- a/ui/src/tailwind.config.js
+++ b/ui/src/tailwind.config.js
@@ -30,7 +30,7 @@ module.exports = {
       sans: ["Rubik", "Noto Sans", "sans-serif"],
     },
     fontSize: {
-      base: "16px",
+      base: "15px",
       sm: "13px",
       lg: "28px",
       xl: "34px",
diff --git a/ui/src/yarn.lock b/ui/src/yarn.lock
index fc8f1749..c029ae5a 100644
--- a/ui/src/yarn.lock
+++ b/ui/src/yarn.lock
@@ -2608,17 +2608,17 @@
     prop-types "^15.7.2"
     react-is "^16.6.3"
 
-"@storybook/addon-actions@6.3.8", "@storybook/addon-actions@^6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.3.8.tgz#85e342c30b3118a7885a5cf0ea83c3bb03a18558"
-  integrity sha512-Z6nnxD+pFZ9W/WL8A+53OTTGdRHybdomEgsMaETW4AoNjTOpFu1zY66ah7ENXcQkTT+SuY7yediwxwaGuL1H+g==
-  dependencies:
-    "@storybook/addons" "6.3.8"
-    "@storybook/api" "6.3.8"
-    "@storybook/client-api" "6.3.8"
-    "@storybook/components" "6.3.8"
-    "@storybook/core-events" "6.3.8"
-    "@storybook/theming" "6.3.8"
+"@storybook/addon-actions@6.3.10", "@storybook/addon-actions@^6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.3.10.tgz#e0013e541a0a732a801c2cebd55a592361066a36"
+  integrity sha512-hIgl2yihRVg6GuIosLyoh1NJuM9MeFY8EUbKx10Hv+vBpYdX5hnzOSDxUHGd4CV6OUh2VQ35hC1wMX+N5nh9fw==
+  dependencies:
+    "@storybook/addons" "6.3.10"
+    "@storybook/api" "6.3.10"
+    "@storybook/client-api" "6.3.10"
+    "@storybook/components" "6.3.10"
+    "@storybook/core-events" "6.3.10"
+    "@storybook/theming" "6.3.10"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
     global "^4.4.0"
@@ -2631,17 +2631,17 @@
     util-deprecate "^1.0.2"
     uuid-browser "^3.1.0"
 
-"@storybook/addon-backgrounds@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.3.8.tgz#36e009c4af0406e1280a7b6b691fa7666ff8cd50"
-  integrity sha512-HxyeNfaJi5E0wfCxQhooT6OKEWRU+ukw80nvkuvlM9vuGoxHE4mVCa7oBFk6Ftjwev6njES1c/u8EpuqbRYeZg==
-  dependencies:
-    "@storybook/addons" "6.3.8"
-    "@storybook/api" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
-    "@storybook/components" "6.3.8"
-    "@storybook/core-events" "6.3.8"
-    "@storybook/theming" "6.3.8"
+"@storybook/addon-backgrounds@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.3.10.tgz#64db97ee88b6623f1d43adc06ddf3d290f824bf8"
+  integrity sha512-m0gG1YsKehXnM5Kq9v8L+srVCpKc+diRLb4Y3A1mXq1cfGj26jSDL/stLUnljj8n02K9z7ioRshGwOk/QeQDYQ==
+  dependencies:
+    "@storybook/addons" "6.3.10"
+    "@storybook/api" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
+    "@storybook/components" "6.3.10"
+    "@storybook/core-events" "6.3.10"
+    "@storybook/theming" "6.3.10"
     core-js "^3.8.2"
     global "^4.4.0"
     memoizerific "^1.11.3"
@@ -2649,24 +2649,24 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-controls@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.3.8.tgz#6bf1803d11ec3d95bbc6f806e9c40797dfc9a05d"
-  integrity sha512-fOG+0gvhX7lbJbt0uqy1C2NCraJalE573/zUmSAwa8PQ3woritdpdn+XpV3H84c5+SpCCptZkBkxlfGLuwI1sw==
-  dependencies:
-    "@storybook/addons" "6.3.8"
-    "@storybook/api" "6.3.8"
-    "@storybook/client-api" "6.3.8"
-    "@storybook/components" "6.3.8"
-    "@storybook/node-logger" "6.3.8"
-    "@storybook/theming" "6.3.8"
+"@storybook/addon-controls@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.3.10.tgz#826263e5b4f407982c852c68837f13f14da98625"
+  integrity sha512-sOw4gPRU70sRmBuKrCrjyUPGFauopgrY9QmuFh1ok3jza9QLY8k4ihEBO9X699PiIKtr8XAoqkwh4kw0xfawJA==
+  dependencies:
+    "@storybook/addons" "6.3.10"
+    "@storybook/api" "6.3.10"
+    "@storybook/client-api" "6.3.10"
+    "@storybook/components" "6.3.10"
+    "@storybook/node-logger" "6.3.10"
+    "@storybook/theming" "6.3.10"
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.3.8.tgz#14ef3faebecc80e33e29fa6581659311a730ebe8"
-  integrity sha512-STm2dkX3Cx5w7GMKImujluqXfQxkXnta7TbOzuf49sd04rWpKWiG6KnDFPa6lPvUT8xus3oZedyX3lN2Q2x8bA==
+"@storybook/addon-docs@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.3.10.tgz#5aed33df5b6a6b719fb85b9b215372ce5fdd0a56"
+  integrity sha512-1JMl2E01sUwYlHgc2l+n1MDMSHbZNDPb4/DRpw2p4YZ8VSSOprA4Z4uHmFjabxyfnkv3Sz5isRVeaMqJzHMjdA==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/generator" "^7.12.11"
@@ -2677,20 +2677,20 @@
     "@mdx-js/loader" "^1.6.22"
     "@mdx-js/mdx" "^1.6.22"
     "@mdx-js/react" "^1.6.22"
-    "@storybook/addons" "6.3.8"
-    "@storybook/api" "6.3.8"
-    "@storybook/builder-webpack4" "6.3.8"
-    "@storybook/client-api" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
-    "@storybook/components" "6.3.8"
-    "@storybook/core" "6.3.8"
-    "@storybook/core-events" "6.3.8"
+    "@storybook/addons" "6.3.10"
+    "@storybook/api" "6.3.10"
+    "@storybook/builder-webpack4" "6.3.10"
+    "@storybook/client-api" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
+    "@storybook/components" "6.3.10"
+    "@storybook/core" "6.3.10"
+    "@storybook/core-events" "6.3.10"
     "@storybook/csf" "0.0.1"
-    "@storybook/csf-tools" "6.3.8"
-    "@storybook/node-logger" "6.3.8"
-    "@storybook/postinstall" "6.3.8"
-    "@storybook/source-loader" "6.3.8"
-    "@storybook/theming" "6.3.8"
+    "@storybook/csf-tools" "6.3.10"
+    "@storybook/node-logger" "6.3.10"
+    "@storybook/postinstall" "6.3.10"
+    "@storybook/source-loader" "6.3.10"
+    "@storybook/theming" "6.3.10"
     acorn "^7.4.1"
     acorn-jsx "^5.3.1"
     acorn-walk "^7.2.0"
@@ -2713,36 +2713,36 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-essentials@^6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.3.8.tgz#1cf54ded8e30fcc1b4b24500c6313f181cfa55b3"
-  integrity sha512-8PuXH289gjR0MuRKVfSz38i4kYKSZB3p5z1a+IBqqZBXM6Hujlu4zQE0r9u5qOo7KHT5C/SKWCkn9ZBU9+lSUA==
+"@storybook/addon-essentials@^6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.3.10.tgz#c8e515291ce119796cc19eb323cfdd347c612195"
+  integrity sha512-cjIXfsgAVw+DTVLbD6x8jg8HInOJyY7PKSlHXNOR8HWtH36BEbiuWE6jqnn5jg3o8rjS73DmfkfPHPX8Jdb3YA==
   dependencies:
-    "@storybook/addon-actions" "6.3.8"
-    "@storybook/addon-backgrounds" "6.3.8"
-    "@storybook/addon-controls" "6.3.8"
-    "@storybook/addon-docs" "6.3.8"
+    "@storybook/addon-actions" "6.3.10"
+    "@storybook/addon-backgrounds" "6.3.10"
+    "@storybook/addon-controls" "6.3.10"
+    "@storybook/addon-docs" "6.3.10"
     "@storybook/addon-measure" "^2.0.0"
-    "@storybook/addon-toolbars" "6.3.8"
-    "@storybook/addon-viewport" "6.3.8"
-    "@storybook/addons" "6.3.8"
-    "@storybook/api" "6.3.8"
-    "@storybook/node-logger" "6.3.8"
+    "@storybook/addon-toolbars" "6.3.10"
+    "@storybook/addon-viewport" "6.3.10"
+    "@storybook/addons" "6.3.10"
+    "@storybook/api" "6.3.10"
+    "@storybook/node-logger" "6.3.10"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
     storybook-addon-outline "^1.4.1"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-links@^6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.3.8.tgz#0a76bbb20c8f322666e0ce3a9c96e6951db5280b"
-  integrity sha512-NDP9M+IXsN6CmgJXvAqtmJ4jfANd5VLrV9miAp0i2FHhZ1weKZxaRi0usYfq4k3kdjrQnMqMp2cf7KnB51ZNAQ==
+"@storybook/addon-links@^6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.3.10.tgz#0c4c95def9655a299f3e29aa6e1fe6cde8326ecf"
+  integrity sha512-/gp5+4+niwK7U+28trwvFAgbZat9m4v9xFd5W8jXo8HmPlyDUK5w9Zu14xH6PrAfufFMb+No9b8eZjzOgB5aOQ==
   dependencies:
-    "@storybook/addons" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
-    "@storybook/core-events" "6.3.8"
+    "@storybook/addons" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
+    "@storybook/core-events" "6.3.10"
     "@storybook/csf" "0.0.1"
-    "@storybook/router" "6.3.8"
+    "@storybook/router" "6.3.10"
     "@types/qs" "^6.9.5"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -2767,47 +2767,47 @@
     postcss-loader "^4.2.0"
     style-loader "^1.3.0"
 
-"@storybook/addon-toolbars@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.3.8.tgz#8ac21e57d8a584055e01381010e4b5ece649c7f4"
-  integrity sha512-jo9w3/TjYSYapSzTluVJzeeATzxf85KpPA/MjuqHl4MvTA1R7ApckZOsfRDcql6xrGEYUfGjUF6MRIicuxojeg==
+"@storybook/addon-toolbars@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.3.10.tgz#f3c71aa20d7c69d33eb078dc89ae91d7bacaefd4"
+  integrity sha512-GQJ8sWkyIq2NQpkTfLR73az1pOLQPgLIzib9c10jZ8fpxe3xnBg95I+1UmUYB14Kat7+re0GOhEhMhFEcJZkUA==
   dependencies:
-    "@storybook/addons" "6.3.8"
-    "@storybook/api" "6.3.8"
-    "@storybook/client-api" "6.3.8"
-    "@storybook/components" "6.3.8"
-    "@storybook/theming" "6.3.8"
+    "@storybook/addons" "6.3.10"
+    "@storybook/api" "6.3.10"
+    "@storybook/client-api" "6.3.10"
+    "@storybook/components" "6.3.10"
+    "@storybook/theming" "6.3.10"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addon-viewport@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.3.8.tgz#bd3c1fd8d40faeb23e91e5f911bf254c378a913f"
-  integrity sha512-aHGg1jWqJdncrB7YuAYIk+T2WLlGhcL/mBHYjIYnUWP4jtilW5QLUVr/kOBB0JlLx1v9hrKMsItJQMAP9jN+mw==
-  dependencies:
-    "@storybook/addons" "6.3.8"
-    "@storybook/api" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
-    "@storybook/components" "6.3.8"
-    "@storybook/core-events" "6.3.8"
-    "@storybook/theming" "6.3.8"
+"@storybook/addon-viewport@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.3.10.tgz#35fffca83087e8c89cf594afb4b9e8ccf240b376"
+  integrity sha512-KyR7yajCD1bbiRZthgxYC/7iy3NWp9k6QKR18fq/hEKbNWNoiN00ddFfFJ3sizJUGKourGOoIbSHZlwqI6rtmg==
+  dependencies:
+    "@storybook/addons" "6.3.10"
+    "@storybook/api" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
+    "@storybook/components" "6.3.10"
+    "@storybook/core-events" "6.3.10"
+    "@storybook/theming" "6.3.10"
     core-js "^3.8.2"
     global "^4.4.0"
     memoizerific "^1.11.3"
     prop-types "^15.7.2"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addons@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.8.tgz#c4a839ae9b86fb4a1183466db6eb16201c1a0553"
-  integrity sha512-TzYk1f/wvfoGDkLxXIx85ii5ED7IfGP/6eu00/i2Hyn4uGqdNi/ltSOJxnxa+DZv8KjYQRVAEo/Fbh95IEXI1Q==
-  dependencies:
-    "@storybook/api" "6.3.8"
-    "@storybook/channels" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
-    "@storybook/core-events" "6.3.8"
-    "@storybook/router" "6.3.8"
-    "@storybook/theming" "6.3.8"
+"@storybook/addons@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.10.tgz#a9fab13e6b81279f1dcdc54220dc4becac4b7a21"
+  integrity sha512-nrqyHPFGft6FhLXAB4xfebh3Xe/16574FSV3I96hyhcNwlxRs/ANLQriiDVElz3KfDqyFUIYMoskUBHZNRwWFA==
+  dependencies:
+    "@storybook/api" "6.3.10"
+    "@storybook/channels" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
+    "@storybook/core-events" "6.3.10"
+    "@storybook/router" "6.3.10"
+    "@storybook/theming" "6.3.10"
     core-js "^3.8.2"
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
@@ -2827,19 +2827,19 @@
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
 
-"@storybook/api@6.3.4", "@storybook/api@^6.3.0":
-  version "6.3.4"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.4.tgz#25b8b842104693000b018b3f64986e95fa032b45"
-  integrity sha512-12q6dvSR4AtyuZbKAy3Xt+ZHzZ4ePPRV1q20xtgYBoiFEgB9vbh4XKEeeZD0yIeTamQ2x1Hn87R79Rs1GIdKRQ==
+"@storybook/api@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.10.tgz#d6cd7d32841c9b6a9c2104016649b510190622ac"
+  integrity sha512-7fB6q718UWvgFI+ZqEU0QpXr5cHHli85bTq/w7kSz1VUWjV7vVqtxE3RTbIjMbKHkIVNkVUbZDeDi+r2soK9Tw==
   dependencies:
     "@reach/router" "^1.3.4"
-    "@storybook/channels" "6.3.4"
-    "@storybook/client-logger" "6.3.4"
-    "@storybook/core-events" "6.3.4"
+    "@storybook/channels" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
+    "@storybook/core-events" "6.3.10"
     "@storybook/csf" "0.0.1"
-    "@storybook/router" "6.3.4"
+    "@storybook/router" "6.3.10"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.3.4"
+    "@storybook/theming" "6.3.10"
     "@types/reach__router" "^1.3.7"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -2853,19 +2853,19 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/api@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.8.tgz#251bcf6cc3a4e0b908bea7fb0aa9e48d6c48d720"
-  integrity sha512-8b61KnWhN+sA+Gq+AHH3M4qM0L8pNS9DtdfPi5GUGWzOg6IZ1EgYVsk9afEwkNESxyZ+GM2O6mGu05J0HfyqNg==
+"@storybook/api@6.3.4", "@storybook/api@^6.3.0":
+  version "6.3.4"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.4.tgz#25b8b842104693000b018b3f64986e95fa032b45"
+  integrity sha512-12q6dvSR4AtyuZbKAy3Xt+ZHzZ4ePPRV1q20xtgYBoiFEgB9vbh4XKEeeZD0yIeTamQ2x1Hn87R79Rs1GIdKRQ==
   dependencies:
     "@reach/router" "^1.3.4"
-    "@storybook/channels" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
-    "@storybook/core-events" "6.3.8"
+    "@storybook/channels" "6.3.4"
+    "@storybook/client-logger" "6.3.4"
+    "@storybook/core-events" "6.3.4"
     "@storybook/csf" "0.0.1"
-    "@storybook/router" "6.3.8"
+    "@storybook/router" "6.3.4"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.3.8"
+    "@storybook/theming" "6.3.4"
     "@types/reach__router" "^1.3.7"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -2879,10 +2879,10 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/builder-webpack4@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.3.8.tgz#9ffe866fbd50a94b3cf3ecde1fe4d5f29dd337e8"
-  integrity sha512-Ze/3JRPKwPogKbJJ5Fm4/BJdMbNiqu7DpFQw9s4gBcecBRK0xlfhYaMrPqMS21kEQ2+gr2HPyGRkdoJUAVHXhQ==
+"@storybook/builder-webpack4@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.3.10.tgz#38e5f8888994684bb3d70c18a3ea3c4cb1f149af"
+  integrity sha512-QckIjdBRSrwNZFQGU8IWjFV39oikSVA13X4hXIdtI4po8aZOkq2ZgT29LJQzc+9g3pQDNjZvPiSbGcG+F2y1+g==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-proposal-class-properties" "^7.12.1"
@@ -2905,20 +2905,20 @@
     "@babel/preset-env" "^7.12.11"
     "@babel/preset-react" "^7.12.10"
     "@babel/preset-typescript" "^7.12.7"
-    "@storybook/addons" "6.3.8"
-    "@storybook/api" "6.3.8"
-    "@storybook/channel-postmessage" "6.3.8"
-    "@storybook/channels" "6.3.8"
-    "@storybook/client-api" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
-    "@storybook/components" "6.3.8"
-    "@storybook/core-common" "6.3.8"
-    "@storybook/core-events" "6.3.8"
-    "@storybook/node-logger" "6.3.8"
-    "@storybook/router" "6.3.8"
+    "@storybook/addons" "6.3.10"
+    "@storybook/api" "6.3.10"
+    "@storybook/channel-postmessage" "6.3.10"
+    "@storybook/channels" "6.3.10"
+    "@storybook/client-api" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
+    "@storybook/components" "6.3.10"
+    "@storybook/core-common" "6.3.10"
+    "@storybook/core-events" "6.3.10"
+    "@storybook/node-logger" "6.3.10"
+    "@storybook/router" "6.3.10"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.3.8"
-    "@storybook/ui" "6.3.8"
+    "@storybook/theming" "6.3.10"
+    "@storybook/ui" "6.3.10"
     "@types/node" "^14.0.10"
     "@types/webpack" "^4.41.26"
     autoprefixer "^9.8.6"
@@ -2955,10 +2955,10 @@
     webpack-hot-middleware "^2.25.0"
     webpack-virtual-modules "^0.2.2"
 
-"@storybook/builder-webpack5@^6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-6.3.8.tgz#553673340c2e8cc818a686f63f47e132d0f6f202"
-  integrity sha512-OAIGPgEXH9vqYthZ/UyNyOyC0kEoDPV0aafCfa6ha8rY06fbF8qqPgNSJMQWLMmUoTDq2Vmd9KYBb7LsrIG5BA==
+"@storybook/builder-webpack5@^6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-6.3.10.tgz#888f5f9bd2c801e444e3b477fd88eacfcd6ff0cc"
+  integrity sha512-fnDFS25dVaAapp5ECsnTPVQU0ws5Tpj/x8Lfa/wCqSmq5ia79O9pNFt5vQ+tumhjezYxSUeitI0vF1hHlQrJrg==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-proposal-class-properties" "^7.12.1"
@@ -2980,19 +2980,19 @@
     "@babel/preset-env" "^7.12.11"
     "@babel/preset-react" "^7.12.10"
     "@babel/preset-typescript" "^7.12.7"
-    "@storybook/addons" "6.3.8"
-    "@storybook/api" "6.3.8"
-    "@storybook/channel-postmessage" "6.3.8"
-    "@storybook/channels" "6.3.8"
-    "@storybook/client-api" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
-    "@storybook/components" "6.3.8"
-    "@storybook/core-common" "6.3.8"
-    "@storybook/core-events" "6.3.8"
-    "@storybook/node-logger" "6.3.8"
-    "@storybook/router" "6.3.8"
+    "@storybook/addons" "6.3.10"
+    "@storybook/api" "6.3.10"
+    "@storybook/channel-postmessage" "6.3.10"
+    "@storybook/channels" "6.3.10"
+    "@storybook/client-api" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
+    "@storybook/components" "6.3.10"
+    "@storybook/core-common" "6.3.10"
+    "@storybook/core-events" "6.3.10"
+    "@storybook/node-logger" "6.3.10"
+    "@storybook/router" "6.3.10"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.3.8"
+    "@storybook/theming" "6.3.10"
     "@types/node" "^14.0.10"
     babel-loader "^8.2.2"
     babel-plugin-macros "^3.0.1"
@@ -3017,46 +3017,46 @@
     webpack-hot-middleware "^2.25.0"
     webpack-virtual-modules "^0.4.1"
 
-"@storybook/channel-postmessage@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.3.8.tgz#43a91760e3464017b8f753b5b383a15a8e56f884"
-  integrity sha512-wI08nip2cQBIs1g+i609dDldQsOuSvnGWecWMiE9FwSvWttAyK61Zdph36UhiNzNjCeNdN5nf5qyVFaxZLGXIA==
+"@storybook/channel-postmessage@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.3.10.tgz#7a64e06b43c68f9ba83cf9c350dc9be6c28f5695"
+  integrity sha512-LWzT0kvluQxMBOrVb6vPoZWx6GlFhmgoFRLJPsFhFmXS1FqmWolRvqKr2aIVHj+bpqS7ocngMKY8Zg+FuKwctQ==
   dependencies:
-    "@storybook/channels" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
-    "@storybook/core-events" "6.3.8"
+    "@storybook/channels" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
+    "@storybook/core-events" "6.3.10"
     core-js "^3.8.2"
     global "^4.4.0"
     qs "^6.10.0"
     telejson "^5.3.2"
 
-"@storybook/channels@6.3.4":
-  version "6.3.4"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.3.4.tgz#425b31a67e42ac66ccb03465e4ba2e2ef9c8344b"
-  integrity sha512-zdZzBbIu9JHEe+uw8FqKsNUiFY+iqI9QdHH/pM3DTTQpBN/JM1Xwfo3CkqA8c5PkhSGqpW0YjXoPash4lawr1Q==
+"@storybook/channels@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.3.10.tgz#2b501e7e56bd1109a2c095a127fd78742a1f74da"
+  integrity sha512-olYxCiYjmhbCHtPe7HR1hdGYJZPuSowqVmhLbqrWMf4HFYqBkO3T7em1S+ztCvLPLKbIK6AM2JUom6ob1F8n4g==
   dependencies:
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/channels@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.3.8.tgz#1ae91e1f3c47b215b39c1c31b2a58b7ffafdff35"
-  integrity sha512-+bjIb5rPTglbhLgGywDoKK25x9ClCMV29fd/fiF86rXQlfxq6J+or6ars6p97gS2/J1wgRbh+Yf3WkLNQx7s6A==
+"@storybook/channels@6.3.4":
+  version "6.3.4"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.3.4.tgz#425b31a67e42ac66ccb03465e4ba2e2ef9c8344b"
+  integrity sha512-zdZzBbIu9JHEe+uw8FqKsNUiFY+iqI9QdHH/pM3DTTQpBN/JM1Xwfo3CkqA8c5PkhSGqpW0YjXoPash4lawr1Q==
   dependencies:
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/cli@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-6.3.8.tgz#021e7528d190ae2921735ff08fe58b07fb0b7468"
-  integrity sha512-Vxph08qah9de+hZM0hmZ+qURrUV7ifHpcx7GrpwUFc7V3KnqlIGuqsQ5v7yzQdh3Ys/nti7MvXbC4yNBrCntug==
+"@storybook/cli@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-6.3.10.tgz#5ad3438a0b73299870deda09728dba77717573bf"
+  integrity sha512-FMK/jb+DYOrFF5GKFs/KbLUD6ypcSUxggPd62e/34Mop4hGssZNulEedIN4jZhTLoVhqZnPuRiuz51OZcBjmvA==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/preset-env" "^7.12.11"
-    "@storybook/codemod" "6.3.8"
-    "@storybook/node-logger" "6.3.8"
+    "@storybook/codemod" "6.3.10"
+    "@storybook/node-logger" "6.3.10"
     "@storybook/semver" "^7.3.2"
     boxen "^4.2.0"
     chalk "^4.1.0"
@@ -3080,16 +3080,16 @@
     ts-dedent "^2.0.0"
     update-notifier "^5.0.1"
 
-"@storybook/client-api@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.8.tgz#60e608a5c2afbe6d63a4a063e616bedde8466584"
-  integrity sha512-71HT0K1lswyMSkRRgB1+TGu7X6kFazmoXT3t5wkU6NWIflEngiiJ3w+PMpOGzd6E3Gp3ZOvfkfrzaby5VlBORw==
+"@storybook/client-api@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.10.tgz#b213c1608398c17180cda7def3bfaccdcae62af5"
+  integrity sha512-caqh/TJKQkKSjcBchx44+Fr5Mi9XjAmMvsIJHM2uZv6mV7KUzUqiZNIWj1gvIYeNBF9PXTWUIhEbu6xt65d0UA==
   dependencies:
-    "@storybook/addons" "6.3.8"
-    "@storybook/channel-postmessage" "6.3.8"
-    "@storybook/channels" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
-    "@storybook/core-events" "6.3.8"
+    "@storybook/addons" "6.3.10"
+    "@storybook/channel-postmessage" "6.3.10"
+    "@storybook/channels" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
+    "@storybook/core-events" "6.3.10"
     "@storybook/csf" "0.0.1"
     "@types/qs" "^6.9.5"
     "@types/webpack-env" "^1.16.0"
@@ -3104,32 +3104,32 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-logger@6.3.4":
-  version "6.3.4"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.3.4.tgz#c7ee70463c48bb3af704165d5456351ebb667fc2"
-  integrity sha512-Gu4M5bBHHQznsdoj8uzYymeojwWq+CRNsUUH41BQIND/RJYSX1IYGIj0yNBP449nv2pjHcTGlN8NJDd+PcELCQ==
+"@storybook/client-logger@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.3.10.tgz#dd5156acb7623fa3e656229c36019000f043f4dc"
+  integrity sha512-fRwxPiwQBKHK83IJgA5VoFwbaEj9zHLdYGE1wxJXcBYP0hi5h5ZwnGkNumFDntw1xt+RUs5PsGQ16f+rzE3n+w==
   dependencies:
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/client-logger@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.3.8.tgz#042b81c45f73066e4f6c32942c72f4aca0ae6646"
-  integrity sha512-d/65629nvnlDpeubcElTypHuSvOqxNTNKnuN0oKDM8BsE0EO5rhTfzrx2vhiSW8At8MuD1eFC19BWdCZV18Edg==
+"@storybook/client-logger@6.3.4":
+  version "6.3.4"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.3.4.tgz#c7ee70463c48bb3af704165d5456351ebb667fc2"
+  integrity sha512-Gu4M5bBHHQznsdoj8uzYymeojwWq+CRNsUUH41BQIND/RJYSX1IYGIj0yNBP449nv2pjHcTGlN8NJDd+PcELCQ==
   dependencies:
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/codemod@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-6.3.8.tgz#7f06ee144477a3f6aa4ab590f8a6145ef89c3150"
-  integrity sha512-hQ4mcD44qhDVqMTYRIuG304qXNGH/u7FqBO4AwWdeBElp7nkBdaYWjF3u+b0TUeaC4cZtsPtMzsKZNRIrQ+8Hg==
+"@storybook/codemod@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-6.3.10.tgz#aad0ee5ca8ef59b4d134ff45e213e198d64c9974"
+  integrity sha512-SGsg4RpG3AOTEK73HH6KWRVxs+6zfy3VjTGWYtllZwvjUJxBDU4OaOWucM0y5yDSyX9tM+H4UfZqh/Mb4fIgmg==
   dependencies:
     "@babel/types" "^7.12.11"
     "@mdx-js/mdx" "^1.6.22"
     "@storybook/csf" "0.0.1"
-    "@storybook/csf-tools" "6.3.8"
-    "@storybook/node-logger" "6.3.8"
+    "@storybook/csf-tools" "6.3.10"
+    "@storybook/node-logger" "6.3.10"
     core-js "^3.8.2"
     cross-spawn "^7.0.3"
     globby "^11.0.2"
@@ -3139,15 +3139,15 @@
     recast "^0.19.0"
     regenerator-runtime "^0.13.7"
 
-"@storybook/components@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.8.tgz#cb84b0245d8784d41e7e6be25a0d5774363e5b87"
-  integrity sha512-zIvCk7MAL9z17EI58h7WE/TgFTm0njGwFkQrbXOgGkkKYoFt/yrrs8HqylcqBqfTivJNiXJNnmmx0ooJ83PIwA==
+"@storybook/components@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.10.tgz#27a2bc98280e9fba148a52a405fe2ed27f036099"
+  integrity sha512-s9iOq0jT+h51hid4Vckmy84XAMm8aoZwD/QHpzWs4aRqrT5lqsen3jnlvqEEdEVUbMIoLPPNfOxOZsm4M/7zpQ==
   dependencies:
     "@popperjs/core" "^2.6.0"
-    "@storybook/client-logger" "6.3.8"
+    "@storybook/client-logger" "6.3.10"
     "@storybook/csf" "0.0.1"
-    "@storybook/theming" "6.3.8"
+    "@storybook/theming" "6.3.10"
     "@types/color-convert" "^2.0.0"
     "@types/overlayscrollbars" "^1.12.0"
     "@types/react-syntax-highlighter" "11.0.5"
@@ -3199,18 +3199,18 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/core-client@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.3.8.tgz#9223b9f22ab86d205dac605bcef15ba0f0068e15"
-  integrity sha512-ZO1XA8ENnZXpDN+sW0ElQ468QhV1tJuoGyXXeiKNnpOuKe/7e10vXH9B0VsBc1VIpC0S17cWuq1/vUkcb9fm5Q==
+"@storybook/core-client@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.3.10.tgz#236cafad4c828d178efe122fe3bb15247fae69f0"
+  integrity sha512-UnVfFV7qvRI1o5P4lrMmp+DxEoogVYV0/QrlGJFrKotkG815e58OdVM00bQByMdbsId3Ao2TZM78uj1k2F5J7Q==
   dependencies:
-    "@storybook/addons" "6.3.8"
-    "@storybook/channel-postmessage" "6.3.8"
-    "@storybook/client-api" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
-    "@storybook/core-events" "6.3.8"
+    "@storybook/addons" "6.3.10"
+    "@storybook/channel-postmessage" "6.3.10"
+    "@storybook/client-api" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
+    "@storybook/core-events" "6.3.10"
     "@storybook/csf" "0.0.1"
-    "@storybook/ui" "6.3.8"
+    "@storybook/ui" "6.3.10"
     airbnb-js-shims "^2.2.1"
     ansi-to-html "^0.6.11"
     core-js "^3.8.2"
@@ -3222,10 +3222,10 @@
     unfetch "^4.2.0"
     util-deprecate "^1.0.2"
 
-"@storybook/core-common@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.3.8.tgz#a8ef7aba92c987be692d936fe6d5782f801e170f"
-  integrity sha512-a1buOaYAbs7m8LMeraN9syG9Hp6wePabJoFrcQxwf4EQZcgfwTUkyYarfpsYsy9vFdDzvvANrOYp/fq6Bnx6LA==
+"@storybook/core-common@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.3.10.tgz#2bd958ad1d940749da1de9265f63d7cb198fce71"
+  integrity sha512-E6jlsSPJoISF8B/AwqDZpPNOviSeJTb+ODhnWqz/R4b6hSmuGSPp7LDdOMdQAjTURAxhhjLWQen4smDwuVNzHw==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-proposal-class-properties" "^7.12.1"
@@ -3248,7 +3248,7 @@
     "@babel/preset-react" "^7.12.10"
     "@babel/preset-typescript" "^7.12.7"
     "@babel/register" "^7.12.1"
-    "@storybook/node-logger" "6.3.8"
+    "@storybook/node-logger" "6.3.10"
     "@storybook/semver" "^7.3.2"
     "@types/glob-base" "^0.3.0"
     "@types/micromatch" "^4.0.1"
@@ -3276,6 +3276,13 @@
     util-deprecate "^1.0.2"
     webpack "4"
 
+"@storybook/core-events@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.10.tgz#82b41291b8baf1fae8848c603f0b825b3c42e3b5"
+  integrity sha512-bw3HuqKIMDnEebVf2DG+TdX21D7z7LGFvr5rehNDnUTdnM9+pVLlZZfGkUU6LMRbIzr27CI5dXWdPRTA5kQIZg==
+  dependencies:
+    core-js "^3.8.2"
+
 "@storybook/core-events@6.3.4", "@storybook/core-events@^6.3.0":
   version "6.3.4"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.4.tgz#f841b8659a8729d334acd9a6dcfc470c88a2be8f"
@@ -3283,25 +3290,18 @@
   dependencies:
     core-js "^3.8.2"
 
-"@storybook/core-events@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.8.tgz#4c9a3deb9334b10116befbf2db5534d1319d2f39"
-  integrity sha512-M3d2iX842YfopqmOHlXzL/Xy4fICzaRnet99GdfOqWjZhC2CVSemVk1b/vgfQv4MFYOQkSLsAjkbDH/kU8n9Aw==
-  dependencies:
-    core-js "^3.8.2"
-
-"@storybook/core-server@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.3.8.tgz#0d141e6f315b735a442aebc0f424f911456c769c"
-  integrity sha512-9J7cabcGe/h6nH4KnRvnYOwY1EFeNtl1qOVgej1nh70aIhKyRVMRc+d2gsOAmzmePtK6pocJUjm1/t876P9Ekg==
+"@storybook/core-server@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.3.10.tgz#a5cdfa0adddd1dfaa473d94affc60fdb0a32ac07"
+  integrity sha512-bo3suxIy0HrbAaqbUH70F2E3VzWs235K6t0lr09Skn9AwoMnfdvywXQ+9F7d0plGxV0QzZLcU3n+0sw3rBd7sQ==
   dependencies:
     "@discoveryjs/json-ext" "^0.5.3"
-    "@storybook/builder-webpack4" "6.3.8"
-    "@storybook/core-client" "6.3.8"
-    "@storybook/core-common" "6.3.8"
-    "@storybook/csf-tools" "6.3.8"
-    "@storybook/manager-webpack4" "6.3.8"
-    "@storybook/node-logger" "6.3.8"
+    "@storybook/builder-webpack4" "6.3.10"
+    "@storybook/core-client" "6.3.10"
+    "@storybook/core-common" "6.3.10"
+    "@storybook/csf-tools" "6.3.10"
+    "@storybook/manager-webpack4" "6.3.10"
+    "@storybook/node-logger" "6.3.10"
     "@storybook/semver" "^7.3.2"
     "@types/node" "^14.0.10"
     "@types/node-fetch" "^2.5.7"
@@ -3330,18 +3330,18 @@
     util-deprecate "^1.0.2"
     webpack "4"
 
-"@storybook/core@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.3.8.tgz#daf11902a0a19cee62b51b5d73669d705468667c"
-  integrity sha512-NTPrqX7goy9DnVEqPFvLccjrQ0eHza64ahP75bXo7H5tyVyEDcaI7ynk1l5zkO4+q6Ze9gkRiWIy7Z324kGAMg==
+"@storybook/core@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.3.10.tgz#328be1c31b1d0cdbff6dc9ccd36ef141d1306d66"
+  integrity sha512-u3Cw09G0CpzrVfd0tiqqCLdEpjYlG6gF9R9bOhSFdgGQbgArh6kKrprQDSjUoLVtUx8Ms7p9sHwith1f1ekXnA==
   dependencies:
-    "@storybook/core-client" "6.3.8"
-    "@storybook/core-server" "6.3.8"
+    "@storybook/core-client" "6.3.10"
+    "@storybook/core-server" "6.3.10"
 
-"@storybook/csf-tools@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.3.8.tgz#bc51d2559d2cf1bf761d38a9a913a523d36a7551"
-  integrity sha512-yY+xN+3TKoUNK0KVAhQNPC3Pf7J0gkmSTOhBwRaPjVKQ3Dy8RE+r/+h9v7rxdmWnl7thdt7tWsjaUdy5DPNLug==
+"@storybook/csf-tools@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.3.10.tgz#f455106e872d62f81b1e1ba8b63cd109ab3b5695"
+  integrity sha512-SRf47ZP91yyD62JZjKhUpAABI44d6J2h+WxdRkH/S+3K5U5olllXjKMA6+bzIdy7x0v/w/sI+oi3zU6wycaPMA==
   dependencies:
     "@babel/generator" "^7.12.11"
     "@babel/parser" "^7.12.11"
@@ -3365,20 +3365,20 @@
   dependencies:
     lodash "^4.17.15"
 
-"@storybook/manager-webpack4@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.3.8.tgz#92deb490242567530b1093e9a57371961ea88285"
-  integrity sha512-W4t/NIbkNgxbjW/RsjMV4f3gPwY+Rw69GvoIAVurEEyi6dKJa2tQ1XrGOZMhF3PqWDTybOLTopcp9Ici2MJnMA==
+"@storybook/manager-webpack4@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.3.10.tgz#98b59678b6fee110d64b99aaf504bdbf9844db04"
+  integrity sha512-TDHbqhAxizS1aXn0QBYi7F4coY4WjmVQYQU0vOkR/zUlMbF9pwAyvFgJOnKjqVkqOTi/zim6BX9GlYjC2PW9Qg==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-transform-template-literals" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
-    "@storybook/addons" "6.3.8"
-    "@storybook/core-client" "6.3.8"
-    "@storybook/core-common" "6.3.8"
-    "@storybook/node-logger" "6.3.8"
-    "@storybook/theming" "6.3.8"
-    "@storybook/ui" "6.3.8"
+    "@storybook/addons" "6.3.10"
+    "@storybook/core-client" "6.3.10"
+    "@storybook/core-common" "6.3.10"
+    "@storybook/node-logger" "6.3.10"
+    "@storybook/theming" "6.3.10"
+    "@storybook/ui" "6.3.10"
     "@types/node" "^14.0.10"
     "@types/webpack" "^4.41.26"
     babel-loader "^8.2.2"
@@ -3408,20 +3408,20 @@
     webpack-dev-middleware "^3.7.3"
     webpack-virtual-modules "^0.2.2"
 
-"@storybook/manager-webpack5@^6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack5/-/manager-webpack5-6.3.8.tgz#7d46e4cecce03f9f543346fc915302f6de232236"
-  integrity sha512-2rOxGacI9XiP6BAIFGGQil6PJXgWg03UbWLMYZ3S2SUBk6hC3F3utDix0XXZzkw2Ex8Tb2VC/VcoFooTnZrnMQ==
+"@storybook/manager-webpack5@^6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack5/-/manager-webpack5-6.3.10.tgz#41748c3ebd350c25901a27f5ae001cd291b3aa0e"
+  integrity sha512-wl57VS/iQl0pUxv4IOVO8BXn1HLeaIN9H62Ja2dJ1Nd3hKb8FiQdt9m81MB/Ig2wTqpclMq8Oribef8j9W4Vow==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-transform-template-literals" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
-    "@storybook/addons" "6.3.8"
-    "@storybook/core-client" "6.3.8"
-    "@storybook/core-common" "6.3.8"
-    "@storybook/node-logger" "6.3.8"
-    "@storybook/theming" "6.3.8"
-    "@storybook/ui" "6.3.8"
+    "@storybook/addons" "6.3.10"
+    "@storybook/core-client" "6.3.10"
+    "@storybook/core-common" "6.3.10"
+    "@storybook/node-logger" "6.3.10"
+    "@storybook/theming" "6.3.10"
+    "@storybook/ui" "6.3.10"
     "@types/node" "^14.0.10"
     babel-loader "^8.2.2"
     case-sensitive-paths-webpack-plugin "^2.3.0"
@@ -3449,10 +3449,10 @@
     webpack-dev-middleware "^4.1.0"
     webpack-virtual-modules "^0.4.1"
 
-"@storybook/node-logger@6.3.8", "@storybook/node-logger@^6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.3.8.tgz#664ffc1ed6f9b8fb446005d4b60fc2fba129fc21"
-  integrity sha512-NDXLcvEepnsVGnnhNgRa1SuedPrHJpbi3rubJENCwAy1fD3oB8HIkSCVHaml/htaQXVp6CGMWy02l5iGCVN4ZA==
+"@storybook/node-logger@6.3.10", "@storybook/node-logger@^6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.3.10.tgz#468327f380603c3cfab6734d336fb193871bd2a4"
+  integrity sha512-SqRoCCZxdyK/IJd5IWtNPWtK3g5xzoiFmX43ibPvL8qCl896m5U/+nhQ2vhaU+qd9BmH0LIZjU9QeUB3fsZAqg==
   dependencies:
     "@types/npmlog" "^4.1.2"
     chalk "^4.1.0"
@@ -3471,10 +3471,10 @@
     npmlog "^4.1.2"
     pretty-hrtime "^1.0.3"
 
-"@storybook/postinstall@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.3.8.tgz#9c3a4ad631a4b952b3fdf686cf60716c62f3e131"
-  integrity sha512-qtU68/G1NGcoJuin84ZAk2VhaXkWbJC622ngTVrYWxVWvvryGk4A7Qscx2R9o5R8zmQVV18HZ5d7bs5g0ibsgA==
+"@storybook/postinstall@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.3.10.tgz#56c20cbf3ff895a17f1b72ed1c704d7bbba5a05c"
+  integrity sha512-uFaZTKh4d9FzYWxyc9K7AoFUrU8pA+tsDzXva4sAiB8MbGuq8knMtYkxhNrpV6MZuMXcmeN3PozixUM+tXj3YQ==
   dependencies:
     core-js "^3.8.2"
 
@@ -3491,18 +3491,18 @@
     react-docgen-typescript "^2.0.0"
     tslib "^2.0.0"
 
-"@storybook/react@^6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.3.8.tgz#1b341fb3dd20f2de4c3b542bcda2623fe0babb2b"
-  integrity sha512-X+xFilz6qHEMj6m7nKqoH2uDAIWSbjASj7kGW6rdVj6WvCpLeEQhM4wdrulRXFsbAetWtl/KZnmtjakgXzYGKg==
+"@storybook/react@^6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.3.10.tgz#af065ea32a051244065920df4e86029f65dba2c3"
+  integrity sha512-UNznbvkpxrBd3yVcptcednjhdoEWSz9wLE6yuTbrW5/E9lv4wuHmxFA42GHKVTNy8Pa7qqPgW5t1XfWivNwOOg==
   dependencies:
     "@babel/preset-flow" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.4.3"
-    "@storybook/addons" "6.3.8"
-    "@storybook/core" "6.3.8"
-    "@storybook/core-common" "6.3.8"
-    "@storybook/node-logger" "6.3.8"
+    "@storybook/addons" "6.3.10"
+    "@storybook/core" "6.3.10"
+    "@storybook/core-common" "6.3.10"
+    "@storybook/node-logger" "6.3.10"
     "@storybook/react-docgen-typescript-plugin" "1.0.2-canary.253f8c1.0"
     "@storybook/semver" "^7.3.2"
     "@types/webpack-env" "^1.16.0"
@@ -3520,13 +3520,13 @@
     ts-dedent "^2.0.0"
     webpack "4"
 
-"@storybook/router@6.3.4":
-  version "6.3.4"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.3.4.tgz#f38ec8064a9d1811a68558390727c30220fe7d72"
-  integrity sha512-cNG2bT0BBfqJyaW6xKUnEB/XXSdMkYeI9ShwJ2gh/2Bnidm7eZ/RKUOZ4q5equMm+SxxyZgpBulqnFN+TqPbOA==
+"@storybook/router@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.3.10.tgz#b8efab6310d49cff0db6b8701be34c27536a1daf"
+  integrity sha512-cRyoNrBeBTOfiLYJumm0559cVJeO7z/ZDVcgLxi16uUjhu4nkio0chTwtdtrtTygKxJq8ibWq6LAjZAHDoeq8g==
   dependencies:
     "@reach/router" "^1.3.4"
-    "@storybook/client-logger" "6.3.4"
+    "@storybook/client-logger" "6.3.10"
     "@types/reach__router" "^1.3.7"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -3536,13 +3536,13 @@
     qs "^6.10.0"
     ts-dedent "^2.0.0"
 
-"@storybook/router@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.3.8.tgz#16f6c73a760918adb146e456c5b98614cb747f79"
-  integrity sha512-CafRmHtkwa8CQETum0RaspSExt8mrFsoYZSyrVSWqOyGG048MT3ocCPRsSueor17h+Q5neKamrPVN1jAdSilDg==
+"@storybook/router@6.3.4":
+  version "6.3.4"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.3.4.tgz#f38ec8064a9d1811a68558390727c30220fe7d72"
+  integrity sha512-cNG2bT0BBfqJyaW6xKUnEB/XXSdMkYeI9ShwJ2gh/2Bnidm7eZ/RKUOZ4q5equMm+SxxyZgpBulqnFN+TqPbOA==
   dependencies:
     "@reach/router" "^1.3.4"
-    "@storybook/client-logger" "6.3.8"
+    "@storybook/client-logger" "6.3.4"
     "@types/reach__router" "^1.3.7"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -3560,13 +3560,13 @@
     core-js "^3.6.5"
     find-up "^4.1.0"
 
-"@storybook/source-loader@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.3.8.tgz#b11aaa08b3356d0a1749bcac3b5aab52f426dec1"
-  integrity sha512-aQ3mrpxpVB2w7sST4jbQUBgHLQZTLD0H1SgohHSuNPz2nrYieuxmOfwjbJr1ZCtuZDCi5xyLjDgUJ3wZ1hPsfQ==
+"@storybook/source-loader@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.3.10.tgz#bb8a8356a8ebaea40358837d19d4269a673a26b1"
+  integrity sha512-I8wm8vkLB2S29iAHezkMZzzb1nvc1zZqVaWBlAqK5T2AuQojMIiKapU4Mohj9XORbcFfz7Kn7ULYgrx4cl5lZw==
   dependencies:
-    "@storybook/addons" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
+    "@storybook/addons" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
     "@storybook/csf" "0.0.1"
     core-js "^3.8.2"
     estraverse "^5.2.0"
@@ -3576,15 +3576,15 @@
     prettier "~2.2.1"
     regenerator-runtime "^0.13.7"
 
-"@storybook/theming@6.3.4":
-  version "6.3.4"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.4.tgz#69d3f912c74a7b6ba78c1c95fac3315356468bdd"
-  integrity sha512-L0lJcwUi7mse+U7EBAv5NVt81mH1MtUzk9paik8hMAc68vDtR/X0Cq4+zPsgykCROOTtEGrQ/JUUrpcEqeprTQ==
+"@storybook/theming@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.10.tgz#9a46bff3517fd6bfcc816376b426476811712f2e"
+  integrity sha512-yX7qKrnFaa1otjrf21dP9HpMLJLw+iV7gcNo/RVkPSixWzglCIGgQ8T6vVjfjIgBUl6KbiE2qwqaFjLLe4fIYQ==
   dependencies:
     "@emotion/core" "^10.1.1"
     "@emotion/is-prop-valid" "^0.8.6"
     "@emotion/styled" "^10.0.27"
-    "@storybook/client-logger" "6.3.4"
+    "@storybook/client-logger" "6.3.10"
     core-js "^3.8.2"
     deep-object-diff "^1.1.0"
     emotion-theming "^10.0.27"
@@ -3594,15 +3594,15 @@
     resolve-from "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/theming@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.8.tgz#3af76408aa8a4f13e217cf407e63a03db217eedc"
-  integrity sha512-Np51rvecnuHNevZ7Em0uElT5UkgASP5K2u8NpHcCxP/Hd73wxS/h//6XnjA9Aich7h/JanG71jAC3qqhZabatA==
+"@storybook/theming@6.3.4":
+  version "6.3.4"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.4.tgz#69d3f912c74a7b6ba78c1c95fac3315356468bdd"
+  integrity sha512-L0lJcwUi7mse+U7EBAv5NVt81mH1MtUzk9paik8hMAc68vDtR/X0Cq4+zPsgykCROOTtEGrQ/JUUrpcEqeprTQ==
   dependencies:
     "@emotion/core" "^10.1.1"
     "@emotion/is-prop-valid" "^0.8.6"
     "@emotion/styled" "^10.0.27"
-    "@storybook/client-logger" "6.3.8"
+    "@storybook/client-logger" "6.3.4"
     core-js "^3.8.2"
     deep-object-diff "^1.1.0"
     emotion-theming "^10.0.27"
@@ -3612,21 +3612,21 @@
     resolve-from "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/ui@6.3.8":
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.3.8.tgz#9fb71befbe76f06c478925610ce998c23260a3f3"
-  integrity sha512-R7LlDfRvD/IcARtmGtYAM79ks2HL+nitdfdRpoW8fYZiX3ErfSIScWzzoxRPFqedg64vwOvbIEhXp7N9JDwFZA==
+"@storybook/ui@6.3.10":
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.3.10.tgz#bb2bebac9ceb592fd44503ca2c65f0eb21bb7b93"
+  integrity sha512-TkaHgpTBp0nBr6A/v04k1V2rbRy7ajAoL9bFSU7hLNXDyQInUzT/p13+4JMR2TANSzPAycJNa3zRbO7n1MgV5w==
   dependencies:
     "@emotion/core" "^10.1.1"
-    "@storybook/addons" "6.3.8"
-    "@storybook/api" "6.3.8"
-    "@storybook/channels" "6.3.8"
-    "@storybook/client-logger" "6.3.8"
-    "@storybook/components" "6.3.8"
-    "@storybook/core-events" "6.3.8"
-    "@storybook/router" "6.3.8"
+    "@storybook/addons" "6.3.10"
+    "@storybook/api" "6.3.10"
+    "@storybook/channels" "6.3.10"
+    "@storybook/client-logger" "6.3.10"
+    "@storybook/components" "6.3.10"
+    "@storybook/core-events" "6.3.10"
+    "@storybook/router" "6.3.10"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.3.8"
+    "@storybook/theming" "6.3.10"
     "@types/markdown-to-jsx" "^6.11.3"
     copy-to-clipboard "^3.3.1"
     core-js "^3.8.2"
@@ -15627,12 +15627,12 @@ storybook-addon-outline@^1.4.1:
     "@storybook/core-events" "^6.3.0"
     ts-dedent "^2.1.1"
 
-storybook@^6.3.8:
-  version "6.3.8"
-  resolved "https://registry.yarnpkg.com/storybook/-/storybook-6.3.8.tgz#f2b3a3f6931fca66ed7db2b0120421b2867aff26"
-  integrity sha512-Z+C5tuT2KnEVDxjVqhq5wyanWLzUdkmtmLSpRHnUhyKUQbGKJWcbz+JS+v3WfsnUl78oSE5KKcZW84GYck7zQw==
+storybook@^6.3.10:
+  version "6.3.10"
+  resolved "https://registry.yarnpkg.com/storybook/-/storybook-6.3.10.tgz#2358e815da4d396e324443452fdb02829ba4b479"
+  integrity sha512-VWqtbYW4SMXuLu/txnV6+MXKUfj/U1WWbvCH5Je5eauakeaEh1L5czhKDfampD8ehUNvZmx03zPriESzVRYSYw==
   dependencies:
-    "@storybook/cli" "6.3.8"
+    "@storybook/cli" "6.3.10"
 
 stream-browserify@^2.0.1:
   version "2.0.2"