From 7b44ac2ab144499fd7709e7c618a3116a515de0d Mon Sep 17 00:00:00 2001
From: FelixBlaisThon <fblais@coveo.com>
Date: Fri, 14 Feb 2020 14:15:11 -0500
Subject: [PATCH 1/3] refactor(form layout): clean form layout section in
 react-vapor

-childElement, -group, -splitLayout
---
 packages/react-vapor/docs/src/styles/Menu.tsx |   3 -
 .../src/styles/form-layouts/FormChild.tsx     | 132 ------------------
 .../src/styles/form-layouts/FormGroups.tsx    |  25 ----
 .../src/styles/form-layouts/SplitLayout.tsx   |  62 --------
 .../docs/src/styles/form-layouts/index.tsx    |   6 -
 5 files changed, 228 deletions(-)
 delete mode 100644 packages/react-vapor/docs/src/styles/form-layouts/FormChild.tsx
 delete mode 100644 packages/react-vapor/docs/src/styles/form-layouts/FormGroups.tsx
 delete mode 100644 packages/react-vapor/docs/src/styles/form-layouts/SplitLayout.tsx

diff --git a/packages/react-vapor/docs/src/styles/Menu.tsx b/packages/react-vapor/docs/src/styles/Menu.tsx
index 174f3d59e0..747ff8f0eb 100644
--- a/packages/react-vapor/docs/src/styles/Menu.tsx
+++ b/packages/react-vapor/docs/src/styles/Menu.tsx
@@ -71,9 +71,6 @@ const Navigation: React.FunctionComponent = () => (
             <NavigationLink href="/file-input" name="File input" />
         </NavigationSection>
         <NavigationSection title="Form Layout" baseUrl="/form-layout" svgName="dashboard">
-            <NavigationLink href="/groups" name="Groups" />
-            <NavigationLink href="/child-element" name="Child element" />
-            <NavigationLink href="/split-layout" name="Split layout" />
             <NavigationLink href="/child-section-element" name="Child section element" />
         </NavigationSection>
         <NavigationSection title="Headers" baseUrl="/headers" svgName="explorer">
diff --git a/packages/react-vapor/docs/src/styles/form-layouts/FormChild.tsx b/packages/react-vapor/docs/src/styles/form-layouts/FormChild.tsx
deleted file mode 100644
index 840a848d3b..0000000000
--- a/packages/react-vapor/docs/src/styles/form-layouts/FormChild.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import * as React from 'react';
-
-import {Svg} from '../../../../src/components/svg/Svg';
-import VaporComponent from '../../demo-building-blocs/VaporComponent';
-
-export const FormChild = () => (
-    <VaporComponent
-        id="child-element"
-        title="Child element"
-        usage="Displays a from element has the child of another."
-        withSource
-    >
-        <div className="coveo-parent">
-            <label className="coveo-checkbox-label">
-                <input type="checkbox" className="coveo-checkbox" />
-                <button type="button" />
-                <span className="label">With child</span>
-            </label>
-            <div className="coveo-child">
-                <label className="coveo-checkbox-label">
-                    <input type="checkbox" className="coveo-checkbox" />
-                    <button type="button" />
-                    <span className="label">Child checkbox</span>
-                </label>
-            </div>
-        </div>
-
-        <div className="coveo-parent mt2 p2 bg-white">
-            <label className="coveo-checkbox-label">
-                <input type="checkbox" className="coveo-checkbox" />
-                <button type="button" />
-                <span className="label">Can have a different color?</span>
-            </label>
-            <div className="coveo-child mod-pure-white">
-                <label className="coveo-checkbox-label">
-                    <input type="checkbox" className="coveo-checkbox" />
-                    <button type="button" />
-                    <span className="label">Yes</span>
-                </label>
-            </div>
-        </div>
-
-        <div className="coveo-form mt2 coveo-parent">
-            <label className="coveo-checkbox-label">
-                <input type="checkbox" className="coveo-checkbox" />
-                <button type="button" />
-                <span className="label">It works with input elements too</span>
-            </label>
-            <div className="coveo-child">
-                <div className="input-field form-group">
-                    <input type="text" disabled required placeholder="Placeholder text" />
-                    <label>
-                        {' '}
-                        Enabled invalid input
-                        <span
-                            className="inline-help-tooltip"
-                            title=""
-                            data-placement="right"
-                            data-original-title="A simple inline help text."
-                        >
-                            <span className="inline-help-icon">
-                                <Svg svgName="info" />
-                            </span>
-                        </span>
-                    </label>
-                </div>
-            </div>
-        </div>
-        <div className="coveo-form mt2 coveo-parent">
-            <label className="coveo-checkbox-label">
-                <input type="checkbox" className="coveo-checkbox" checked />
-                <button type="button" />
-                <span className="label">or radio button</span>
-            </label>
-            <div className="coveo-child">
-                <fieldset className="form-group">
-                    <span className="form-control-label">A radio-select</span>
-                    <div className="form-control radio-select">
-                        <div className="radio-option">
-                            <input name="enabledOptions" type="radio" id="Option1-child" value="blue" />
-                            <label htmlFor="Option1-child">Blue</label>
-                        </div>
-                        <div className="radio-option">
-                            <input name="enabledOptions" type="radio" id="Option2-child" value="green" checked />
-                            <label htmlFor="Option2-child">Green</label>
-                        </div>
-                    </div>
-                </fieldset>
-            </div>
-        </div>
-        <div className="coveo-form mt2 p2">
-            <div className="flex flex-row">
-                <fieldset className="form-group">
-                    <span className="form-control-label">A radio-select</span>
-                    <div className="form-control radio-select">
-                        <div className="radio-option">
-                            <input name="enabledOptions" type="radio" id="Option4-child" value="blue2" />
-                            <label htmlFor="Option4-child">Blue</label>
-                        </div>
-                        <div className="radio-option">
-                            <input name="enabledOptions" type="radio" id="Option5-child" value="green2" checked />
-                            <label htmlFor="Option5-child">Green</label>
-                        </div>
-                        <div className="radio-option">
-                            <input name="enabledOptions" type="radio" id="Option6-child" value="yellow" />
-                            <label htmlFor="Option6-child">Yellow</label>
-                        </div>
-                    </div>
-                </fieldset>
-                <div className="p2">
-                    <div className="coveo-child vertical">
-                        <div className="form-control">
-                            <label className="coveo-checkbox-label">
-                                <input type="checkbox" className="coveo-checkbox" disabled />
-                                <button type="button" />
-                                <span className="label">Option 1</span>
-                            </label>
-                            <br />
-                            <label className="mt1 coveo-checkbox-label">
-                                <input type="checkbox" className="coveo-checkbox" checked disabled />
-                                <button type="button" />
-                                <span className="label">Option 2</span>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </VaporComponent>
-);
-
-export default FormChild;
diff --git a/packages/react-vapor/docs/src/styles/form-layouts/FormGroups.tsx b/packages/react-vapor/docs/src/styles/form-layouts/FormGroups.tsx
deleted file mode 100644
index 90afe31899..0000000000
--- a/packages/react-vapor/docs/src/styles/form-layouts/FormGroups.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-import VaporComponent from '../../demo-building-blocs/VaporComponent';
-
-export const FormGroups = () => (
-    <VaporComponent id="groups" title="Groups" usage="Simple vertical form!" withSource>
-        <div className="coveo-form">
-            <fieldset className="form-group input-field">
-                {/* fieldset tag is optional, you can use a simple div */}
-                <input type="text" required />
-                <label>Basic</label>
-            </fieldset>
-            <div className="form-group input-field">
-                <input type="text" required placeholder="Placeholder text" />
-                <label>With placeholder</label>
-            </div>
-            <div className="form-group input-field">
-                <input type="text" required placeholder="Placeholder text" value="My value" />
-                <label>With value</label>
-            </div>
-        </div>
-    </VaporComponent>
-);
-
-export default FormGroups;
diff --git a/packages/react-vapor/docs/src/styles/form-layouts/SplitLayout.tsx b/packages/react-vapor/docs/src/styles/form-layouts/SplitLayout.tsx
deleted file mode 100644
index d5b1deea31..0000000000
--- a/packages/react-vapor/docs/src/styles/form-layouts/SplitLayout.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react';
-
-import VaporComponent from '../../demo-building-blocs/VaporComponent';
-
-export const SplitLayout = () => (
-    <VaporComponent
-        id="split-layout"
-        title="Split layout"
-        usage="Simple flex column layout, principally used in our forms."
-        withSource
-    >
-        <div className="flex flex-column overflow-auto mod-border" style={{height: '280px'}}>
-            <div className="split-layout">
-                <div className="column">
-                    <p className="p1" style={{lineHeight: '24px'}}>
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
-                        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
-                        beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
-                        odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
-                        sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-                        voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
-                        laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui
-                        in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat
-                        quo voluptas nulla pariatur?
-                    </p>
-                </div>
-                <div className="column">
-                    <ul className="collapsible" data-collapsible="expandable">
-                        <li>
-                            <button type="button" className="collapsible-header active btn with-icon">
-                                Text example
-                            </button>
-                            <div className="collapsible-body">
-                                <p>Lorem ipsum dolor sit amet.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <button type="button" className="collapsible-header btn with-icon">
-                                Inputs
-                            </button>
-                            <div className="collapsible-body">
-                                <div className="coveo-form">
-                                    <fieldset className="form-group input-field mod-fixed-width">
-                                        <input type="text" required />
-                                        <label>Input 1</label>
-                                    </fieldset>
-                                    <fieldset className="form-group input-field mod-fixed-width">
-                                        <input type="text" required />
-                                        <label>Input 2</label>
-                                    </fieldset>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </VaporComponent>
-);
-
-export default SplitLayout;
diff --git a/packages/react-vapor/docs/src/styles/form-layouts/index.tsx b/packages/react-vapor/docs/src/styles/form-layouts/index.tsx
index 9a0ba50fde..d851812535 100644
--- a/packages/react-vapor/docs/src/styles/form-layouts/index.tsx
+++ b/packages/react-vapor/docs/src/styles/form-layouts/index.tsx
@@ -1,17 +1,11 @@
 import * as React from 'react';
 import {Redirect, Route, RouteComponentProps} from 'react-router-dom';
 
-import FormChild from './FormChild';
 import FormChildSection from './FormChildSection';
-import FormGroups from './FormGroups';
-import SplitLayout from './SplitLayout';
 
 const FormLayout: React.FunctionComponent<RouteComponentProps> = ({match}) => {
     return (
         <>
-            <Route path={`${match.url}/groups`} component={FormGroups} />
-            <Route path={`${match.url}/child-element`} component={FormChild} />
-            <Route path={`${match.url}/split-layout`} component={SplitLayout} />
             <Route path={`${match.url}/child-section-element`} component={FormChildSection} />
             <Route exact path={`${match.url}/`} component={() => <Redirect to={`${match.url}/groups`} />} />
         </>

From 2c4aeec4e22ddc85ddfce2d735c6a513b2e8a643 Mon Sep 17 00:00:00 2001
From: FelixBlaisThon <fblais@coveo.com>
Date: Fri, 21 Feb 2020 14:06:25 -0500
Subject: [PATCH 2/3] refactor(form layout): remove this section from
 react-vapor/style

child section element has been remove since the class child-section is used in only one file in the
entire admin (we can change this component with something ele)
---
 .../src/styles/form-layouts/FormChild.tsx     | 132 ------------------
 .../styles/form-layouts/FormChildSection.tsx  |  56 --------
 .../src/styles/form-layouts/FormGroups.tsx    |  25 ----
 .../src/styles/form-layouts/SplitLayout.tsx   |  62 --------
 .../demo/src/styles/form-layouts/index.tsx    |  15 --
 5 files changed, 290 deletions(-)
 delete mode 100644 packages/demo/src/styles/form-layouts/FormChild.tsx
 delete mode 100644 packages/demo/src/styles/form-layouts/FormChildSection.tsx
 delete mode 100644 packages/demo/src/styles/form-layouts/FormGroups.tsx
 delete mode 100644 packages/demo/src/styles/form-layouts/SplitLayout.tsx
 delete mode 100644 packages/demo/src/styles/form-layouts/index.tsx

diff --git a/packages/demo/src/styles/form-layouts/FormChild.tsx b/packages/demo/src/styles/form-layouts/FormChild.tsx
deleted file mode 100644
index a8058d33a3..0000000000
--- a/packages/demo/src/styles/form-layouts/FormChild.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import * as React from 'react';
-
-import {Svg} from 'react-vapor';
-import VaporComponent from '../../demo-building-blocs/VaporComponent';
-
-export const FormChild = () => (
-    <VaporComponent
-        id="child-element"
-        title="Child element"
-        usage="Displays a from element has the child of another."
-        withSource
-    >
-        <div className="coveo-parent">
-            <label className="coveo-checkbox-label">
-                <input type="checkbox" className="coveo-checkbox" />
-                <button type="button" />
-                <span className="label">With child</span>
-            </label>
-            <div className="coveo-child">
-                <label className="coveo-checkbox-label">
-                    <input type="checkbox" className="coveo-checkbox" />
-                    <button type="button" />
-                    <span className="label">Child checkbox</span>
-                </label>
-            </div>
-        </div>
-
-        <div className="coveo-parent mt2 p2 bg-white">
-            <label className="coveo-checkbox-label">
-                <input type="checkbox" className="coveo-checkbox" />
-                <button type="button" />
-                <span className="label">Can have a different color?</span>
-            </label>
-            <div className="coveo-child mod-pure-white">
-                <label className="coveo-checkbox-label">
-                    <input type="checkbox" className="coveo-checkbox" />
-                    <button type="button" />
-                    <span className="label">Yes</span>
-                </label>
-            </div>
-        </div>
-
-        <div className="coveo-form mt2 coveo-parent">
-            <label className="coveo-checkbox-label">
-                <input type="checkbox" className="coveo-checkbox" />
-                <button type="button" />
-                <span className="label">It works with input elements too</span>
-            </label>
-            <div className="coveo-child">
-                <div className="input-field form-group">
-                    <input type="text" disabled required placeholder="Placeholder text" />
-                    <label>
-                        {' '}
-                        Enabled invalid input
-                        <span
-                            className="inline-help-tooltip"
-                            title=""
-                            data-placement="right"
-                            data-original-title="A simple inline help text."
-                        >
-                            <span className="inline-help-icon">
-                                <Svg svgName="info" />
-                            </span>
-                        </span>
-                    </label>
-                </div>
-            </div>
-        </div>
-        <div className="coveo-form mt2 coveo-parent">
-            <label className="coveo-checkbox-label">
-                <input type="checkbox" className="coveo-checkbox" checked />
-                <button type="button" />
-                <span className="label">or radio button</span>
-            </label>
-            <div className="coveo-child">
-                <fieldset className="form-group">
-                    <span className="form-control-label">A radio-select</span>
-                    <div className="form-control radio-select">
-                        <div className="radio-option">
-                            <input name="enabledOptions" type="radio" id="Option1-child" value="blue" />
-                            <label htmlFor="Option1-child">Blue</label>
-                        </div>
-                        <div className="radio-option">
-                            <input name="enabledOptions" type="radio" id="Option2-child" value="green" checked />
-                            <label htmlFor="Option2-child">Green</label>
-                        </div>
-                    </div>
-                </fieldset>
-            </div>
-        </div>
-        <div className="coveo-form mt2 p2">
-            <div className="flex flex-row">
-                <fieldset className="form-group">
-                    <span className="form-control-label">A radio-select</span>
-                    <div className="form-control radio-select">
-                        <div className="radio-option">
-                            <input name="enabledOptions" type="radio" id="Option4-child" value="blue2" />
-                            <label htmlFor="Option4-child">Blue</label>
-                        </div>
-                        <div className="radio-option">
-                            <input name="enabledOptions" type="radio" id="Option5-child" value="green2" checked />
-                            <label htmlFor="Option5-child">Green</label>
-                        </div>
-                        <div className="radio-option">
-                            <input name="enabledOptions" type="radio" id="Option6-child" value="yellow" />
-                            <label htmlFor="Option6-child">Yellow</label>
-                        </div>
-                    </div>
-                </fieldset>
-                <div className="p2">
-                    <div className="coveo-child vertical">
-                        <div className="form-control">
-                            <label className="coveo-checkbox-label">
-                                <input type="checkbox" className="coveo-checkbox" disabled />
-                                <button type="button" />
-                                <span className="label">Option 1</span>
-                            </label>
-                            <br />
-                            <label className="mt1 coveo-checkbox-label">
-                                <input type="checkbox" className="coveo-checkbox" checked disabled />
-                                <button type="button" />
-                                <span className="label">Option 2</span>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </VaporComponent>
-);
-
-export default FormChild;
diff --git a/packages/demo/src/styles/form-layouts/FormChildSection.tsx b/packages/demo/src/styles/form-layouts/FormChildSection.tsx
deleted file mode 100644
index 3ce759aaf1..0000000000
--- a/packages/demo/src/styles/form-layouts/FormChildSection.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react';
-
-import VaporComponent from '../../demo-building-blocs/VaporComponent';
-
-export const FormChildSection = () => (
-    <VaporComponent
-        id="child-section-element"
-        title="Child section element"
-        usage="Displays a from section has the child of another."
-        withSource
-    >
-        <div className="coveo-form">
-            <div className="form-group">
-                <div className="form-control">
-                    <div className="btn dropdown-toggle">
-                        <span className="dropdown-selected-value">Default Option</span>
-                        <span className="dropdown-toggle-arrow" />
-                    </div>
-                </div>
-                <div className="child-section">
-                    <div className="form-control form-group">
-                        <div className="btn dropdown-toggle">
-                            <span className="dropdown-selected-value">Default Option</span>
-                            <span className="dropdown-toggle-arrow" />
-                        </div>
-                    </div>
-                    <div className="input-field form-group">
-                        <input type="text" required />
-                        <label>Input 1</label>
-                    </div>
-                </div>
-            </div>
-
-            <div className="form-group">
-                <div className="form-control">
-                    <div className="btn dropdown-toggle">
-                        <span className="dropdown-selected-value">Default Option</span>
-                        <span className="dropdown-toggle-arrow" />
-                    </div>
-                </div>
-                <div className="child-section mod-child-section-first-input">
-                    <div className="input-field form-group">
-                        <input type="text" required />
-                        <label>Input 1</label>
-                    </div>
-                    <div className="input-field form-group">
-                        <input type="text" required />
-                        <label>Input 2</label>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </VaporComponent>
-);
-
-export default FormChildSection;
diff --git a/packages/demo/src/styles/form-layouts/FormGroups.tsx b/packages/demo/src/styles/form-layouts/FormGroups.tsx
deleted file mode 100644
index 90afe31899..0000000000
--- a/packages/demo/src/styles/form-layouts/FormGroups.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-import VaporComponent from '../../demo-building-blocs/VaporComponent';
-
-export const FormGroups = () => (
-    <VaporComponent id="groups" title="Groups" usage="Simple vertical form!" withSource>
-        <div className="coveo-form">
-            <fieldset className="form-group input-field">
-                {/* fieldset tag is optional, you can use a simple div */}
-                <input type="text" required />
-                <label>Basic</label>
-            </fieldset>
-            <div className="form-group input-field">
-                <input type="text" required placeholder="Placeholder text" />
-                <label>With placeholder</label>
-            </div>
-            <div className="form-group input-field">
-                <input type="text" required placeholder="Placeholder text" value="My value" />
-                <label>With value</label>
-            </div>
-        </div>
-    </VaporComponent>
-);
-
-export default FormGroups;
diff --git a/packages/demo/src/styles/form-layouts/SplitLayout.tsx b/packages/demo/src/styles/form-layouts/SplitLayout.tsx
deleted file mode 100644
index d5b1deea31..0000000000
--- a/packages/demo/src/styles/form-layouts/SplitLayout.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react';
-
-import VaporComponent from '../../demo-building-blocs/VaporComponent';
-
-export const SplitLayout = () => (
-    <VaporComponent
-        id="split-layout"
-        title="Split layout"
-        usage="Simple flex column layout, principally used in our forms."
-        withSource
-    >
-        <div className="flex flex-column overflow-auto mod-border" style={{height: '280px'}}>
-            <div className="split-layout">
-                <div className="column">
-                    <p className="p1" style={{lineHeight: '24px'}}>
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
-                        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
-                        beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
-                        odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
-                        sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-                        voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
-                        laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui
-                        in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat
-                        quo voluptas nulla pariatur?
-                    </p>
-                </div>
-                <div className="column">
-                    <ul className="collapsible" data-collapsible="expandable">
-                        <li>
-                            <button type="button" className="collapsible-header active btn with-icon">
-                                Text example
-                            </button>
-                            <div className="collapsible-body">
-                                <p>Lorem ipsum dolor sit amet.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <button type="button" className="collapsible-header btn with-icon">
-                                Inputs
-                            </button>
-                            <div className="collapsible-body">
-                                <div className="coveo-form">
-                                    <fieldset className="form-group input-field mod-fixed-width">
-                                        <input type="text" required />
-                                        <label>Input 1</label>
-                                    </fieldset>
-                                    <fieldset className="form-group input-field mod-fixed-width">
-                                        <input type="text" required />
-                                        <label>Input 2</label>
-                                    </fieldset>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </VaporComponent>
-);
-
-export default SplitLayout;
diff --git a/packages/demo/src/styles/form-layouts/index.tsx b/packages/demo/src/styles/form-layouts/index.tsx
deleted file mode 100644
index d851812535..0000000000
--- a/packages/demo/src/styles/form-layouts/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import {Redirect, Route, RouteComponentProps} from 'react-router-dom';
-
-import FormChildSection from './FormChildSection';
-
-const FormLayout: React.FunctionComponent<RouteComponentProps> = ({match}) => {
-    return (
-        <>
-            <Route path={`${match.url}/child-section-element`} component={FormChildSection} />
-            <Route exact path={`${match.url}/`} component={() => <Redirect to={`${match.url}/groups`} />} />
-        </>
-    );
-};
-
-export default FormLayout;

From 7859cee0faa6f085d21d8973cfa9edf0163a7fb4 Mon Sep 17 00:00:00 2001
From: FelixBlaisThon <fblais@coveo.com>
Date: Fri, 21 Feb 2020 14:08:02 -0500
Subject: [PATCH 3/3] refactor(form layout): removed form layout from menu.tsx
 and index.tsx

---
 packages/demo/src/styles/Menu.tsx  | 3 ---
 packages/demo/src/styles/index.tsx | 2 --
 2 files changed, 5 deletions(-)

diff --git a/packages/demo/src/styles/Menu.tsx b/packages/demo/src/styles/Menu.tsx
index b51632644e..bfac47b1bc 100644
--- a/packages/demo/src/styles/Menu.tsx
+++ b/packages/demo/src/styles/Menu.tsx
@@ -56,9 +56,6 @@ const Navigation: React.FunctionComponent = () => (
             <NavigationLink href="/progress-bar" name="Progress bar" />
             <NavigationLink href="/file-input" name="File input" />
         </NavigationSection>
-        <NavigationSection title="Form Layout" baseUrl="/form-layout" svgName="dashboard">
-            <NavigationLink href="/child-section-element" name="Child section element" />
-        </NavigationSection>
         <NavigationSection title="Headers" baseUrl="/headers" svgName="explorer">
             <NavigationLink href="/panel" name="Panel" />
             <NavigationLink href="/site" name="Site" />
diff --git a/packages/demo/src/styles/index.tsx b/packages/demo/src/styles/index.tsx
index 21800bf670..396f389a08 100644
--- a/packages/demo/src/styles/index.tsx
+++ b/packages/demo/src/styles/index.tsx
@@ -6,7 +6,6 @@ import Colors from './colors';
 import Components from './components';
 import Filtering from './filtering';
 import FormControls from './form';
-import FormLayout from './form-layouts';
 import GeneralGuidelines from './general-guidelines';
 import Headers from './headers';
 import Icons from './icons';
@@ -30,7 +29,6 @@ const Styles: React.FunctionComponent<RouteComponentProps> = ({match}) => {
                     <Route path={`${match.url}/components`} component={Components} />
                     <Route path={`${match.url}/filtering`} component={Filtering} />
                     <Route path={`${match.url}/form-controls`} component={FormControls} />
-                    <Route path={`${match.url}/form-layout`} component={FormLayout} />
                     <Route path={`${match.url}/headers`} component={Headers} />
                     <Route path={`${match.url}/icons`} component={Icons} />
                     <Route path={`${match.url}/messages`} component={Messages} />