New form component

package.json

@@ -37,7 +37,8 @@
     "meow": "^5.0.0",
     "patch-package": "^6.5.1",
     "path": "^0.12.7",
-    "postinstall-postinstall": "^2.1.0"
+    "postinstall-postinstall": "^2.1.0",
+    "react-hook-form": "7.37.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
@@ -112,6 +113,7 @@
     "husky": "^0.11.3",
     "jest": "^24.0.0",
     "jest-axe": "^5.0.1",
+    "lottie-react": "^2.4.0",
     "mini-css-extract-plugin": "1.6.2",
     "mutationobserver-shim": "^0.3.7",
     "polished": "^4.0.3",

src/components/card-interactive/CardCheckbox.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
-import Checkbox from '../form-elements/checkbox/Checkbox';
+import Checkbox from '../form/checkbox/Checkbox';
 import generateRandomString from '../../js/generateRandomString';
 
 export interface CardCheckboxPropsType

src/components/card-interactive/CardRadio.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
-import Radio from '../form-elements/radio/Radio';
+import Radio from '../form/radio/Radio';
 import generateRandomString from '../../js/generateRandomString';
 import {useCardRadioGroupContext} from './CardRadioGroupContext';
 import type {StyleType} from './types';

src/components/form-elements/Input.stories.mdx → src/components/form/Input.stories.mdx

@@ -8,7 +8,7 @@ import Input, {SIZE, COLOR} from './Input';
 import Flex from '../flex/Flex';
 
 <Meta
-  title="Components/form/Input"
+  title="Components/Form Elements/Input"
   component={Input}
   argTypes={{
     value: {

src/components/form-elements/Select.stories.mdx → src/components/form/Select.stories.mdx

@@ -6,7 +6,7 @@ import hex from '../colors/hex';
 import Headline from '../text/Headline';
 
 <Meta
-  title="Components/form/Select"
+  title="Components/Form Elements/Select"
   component={Select}
   argTypes={{
     options: {

src/components/form-elements/Textarea.stories.mdx → src/components/form/Textarea.stories.mdx

@@ -10,7 +10,7 @@ import hex from '../colors/hex';
 import PageHeader from 'blocks/PageHeader';
 
 <Meta
-  title="Components/form/Textarea"
+  title="Components/Form Elements/Textarea"
   component={Textarea}
   argTypes={{
     type: {

src/components/form-elements/checkbox/Checkbox.stories.mdx → src/components/form/checkbox/Checkbox.stories.mdx

@@ -12,7 +12,7 @@ import Checkbox from './Checkbox';
 import CheckboxA11y from './stories/Checkbox.a11y.mdx';
 
 <Meta
-  title="Components/form/Checkbox"
+  title="Components/Form Elements/Checkbox"
   component={Checkbox}
   argTypes={{
     children: {

src/components/form-elements/radio/Radio.stories.mdx → src/components/form/radio/Radio.stories.mdx

@@ -14,7 +14,7 @@ import RadioGroup from './RadioGroup';
 import RadioA11y from './stories/Radio.a11y.mdx';
 
 <Meta
-  title="Components/form/Radio"
+  title="Components/Form Elements/Radio"
   component={Radio}
   argTypes={{
     children: {

src/components/form-elements/radio/RadioGroup.stories.mdx → src/components/form/radio/RadioGroup.stories.mdx

@@ -19,7 +19,7 @@ import RadioGroupA11y from './stories/RadioGroup.a11y.mdx';
 const colorOptions = ['light', 'dark'];
 
 <Meta
-  title="Components/Form/Radio group"
+  title="Components/Form Elements/Radio group"
   component={RadioGroup}
   argTypes={{
     children: {

src/components/search/Search.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import cx from 'classnames';
-import Input, {COLOR, SIZE} from '../form-elements/Input';
-import type {InputPropsType} from '../form-elements/Input';
+import Input, {COLOR, SIZE} from '../form/Input';
+import type {InputPropsType} from '../form/Input';
 import Icon from '../icons/Icon';
 import Button, {ButtonTypeType} from '../buttons/Button';
 

src/components/select-menu/SelectMenuOption.tsx

@@ -7,7 +7,7 @@ import type {IconTypeType} from '../icons/Icon';
 
 import SubjectIcon from '../subject-icons/SubjectIcon';
 import Icon from '../icons/Icon';
-import Checkbox from '../form-elements/checkbox/Checkbox';
+import Checkbox from '../form/checkbox/Checkbox';
 import Text from '../text/Text';
 
 export type SelectOptionElementPropsType = {

src/components/wizard/Wizard.stories.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {Wizard, WizardStep, useWizard} from './Wizard';
+import Input from '../form/Input';
+import RadioGroup from '../form/radio/RadioGroup';
+import Radio from '../form/radio/Radio';
+import Dialog from '../dialog/Dialog';
+import './_wizard-stories.scss';
+import CreateAccountStory from './stories/create-account';
+import AskYourQuestionStory from './stories/ask-your-question';
+import MonetisationStory from './stories/monetisation';
+
+export default {
+  title: 'Components/Wizard',
+  decorators: [
+    Story => (
+      <Dialog size="fullscreen" open>
+        <Story />
+      </Dialog>
+    ),
+  ],
+};
+
+const InputField = ({name}) => {
+  return <Input name={name} />;
+};
+
+const FirstStepForm = () => {
+  const {next} = useWizard();
+
+  return (
+    <form
+      onSubmit={() => {
+        next();
+      }}
+    >
+      <WizardStep.Title>step 1 title</WizardStep.Title>
+      <InputField name="first_name" />
+      <WizardStep.Submit>next</WizardStep.Submit>
+    </form>
+  );
+};
+
+export const Default = () => {
+  const onComplete = () => {
+    alert('wizard form completed');
+  };
+  const onChange = () => null;
+
+  return (
+    <Wizard onComplete={onComplete}>
+      <Wizard.ProgressBar>form title</Wizard.ProgressBar>
+      <WizardStep as="div">
+        <Wizard.Title subtitle="form subtitle">form title</Wizard.Title>
+        <FirstStepForm />
+      </WizardStep>
+      <WizardStep>
+        <WizardStep.Title>step 2 title</WizardStep.Title>
+        <Input name="last_name" />
+        <WizardStep.Submit>next</WizardStep.Submit>
+      </WizardStep>
+      <WizardStep>
+        <WizardStep.Title>Last step title</WizardStep.Title>
+        <RadioGroup name="account_type" onChange={onChange}>
+          <Radio value="student">Student</Radio>
+          <Radio value="parent">Parent</Radio>
+        </RadioGroup>
+        <WizardStep.Submit>next</WizardStep.Submit>
+      </WizardStep>
+    </Wizard>
+  );
+};
+
+export const CreateAccount = CreateAccountStory;
+export const AskYourQuestion = AskYourQuestionStory;
+export const Monetisation = MonetisationStory;