[Docs] New Templates section (#5632)

* [Docs] Create new section for “Templates”
- Moves Page Template, SuperDatePicker, and Searchable Sitewide Template
- Fixes routes

scripts/a11y-testing.js

@@ -4,13 +4,13 @@ const { AxePuppeteer } = require('@axe-core/puppeteer');
 
 const docsPages = async (root, page) => {
   const pagesToSkip = [
-    `${root}#/layout/page`, // Has duplicate `<main>` element
+    `${root}#/templates/page-template`, // Has duplicate `<main>` element
     `${root}#/layout/page-header`, // Has duplicate `<header>` element
     `${root}#/display/aspect-ratio`,
     `${root}#/forms/combo-box`,
     `${root}#/forms/color-selection`,
     `${root}#/forms/date-picker`,
-    `${root}#/forms/super-date-picker`,
+    `${root}#/templates/super-date-picker`,
   ];
 
   return [

src-docs/src/routes.js

@@ -26,6 +26,12 @@ import {
   writingExamplesSections,
 } from './views/guidelines/writing_examples';
 
+// Templates
+
+import { PageTemplateExample } from './views/page/page_template_example';
+
+import { SitewideSearchExample } from './views/selectable/selectable_sitewide_template_example';
+
 // Services
 
 import { ColorPaletteExample } from './views/color_palette/color_palette_example';
@@ -163,8 +169,6 @@ import { OutsideClickDetectorExample } from './views/outside_click_detector/outs
 
 import { OverlayMaskExample } from './views/overlay_mask/overlay_mask_example';
 
-import { PageExample } from './views/page/page_example';
-
 import { PageHeaderExample } from './views/page_header/page_header_example';
 
 import { PaginationExample } from './views/pagination/pagination_example';
@@ -439,6 +443,14 @@ const navigation = [
       },
     ],
   },
+  {
+    name: 'Templates',
+    items: [
+      PageTemplateExample,
+      SitewideSearchExample,
+      SuperDatePickerExample,
+    ].map((example) => createExample(example)),
+  },
   {
     name: 'Layout',
     items: [
@@ -449,7 +461,6 @@ const navigation = [
       HeaderExample,
       HorizontalRuleExample,
       ModalExample,
-      PageExample,
       PageHeaderExample,
       PanelExample,
       PopoverExample,
@@ -520,7 +531,6 @@ const navigation = [
       SearchBarExample,
       SelectableExample,
       SuggestExample,
-      SuperDatePickerExample,
       SuperSelectExample,
     ].map((example) => createExample(example)),
   },

src-docs/src/views/auto_refresh/auto_refresh_example.js

@@ -37,7 +37,7 @@ export const AutoRefreshExample = {
       text: (
         <p>
           This is a component that is used by the{' '}
-          <Link to="/forms/super-date-picker">
+          <Link to="/templates/super-date-picker">
             <strong>EuiSuperDatePicker</strong>
           </Link>{' '}
           component to create an automatic refresh configuration. It merely

src-docs/src/views/bottom_bar/bottom_bar_example.js

@@ -23,7 +23,7 @@ export const BottomBarExample = {
     <EuiCallOut>
       <p>
         <strong>EuiPageTemplate</strong> offers a quick way to{' '}
-        <Link to="/layout/page#showing-a-bottom-bar">
+        <Link to="/templates/page-template#showing-a-bottom-bar">
           apply a bottom bar to your page layouts
         </Link>
         .

src-docs/src/views/datagrid/_row_auto_height_data.json

@@ -2391,7 +2391,7 @@
     "comments": 4,
     "created_at": "2021-05-04T12:44:31Z",
     "author_association": "NONE",
-    "body": "## Summary\r\n\r\nUsing the super time picker in Kibana can lead to UI crashing for edge case values (see https://github.com/elastic/kibana/issues/91138).\r\n\r\n## How to reproduce\r\n\r\n1. Navigate here https://eui.elastic.co/#/forms/super-date-picker#configurations\r\n2. Select “days ago” and entering a value of 9 9s\r\n3. See error\r\n\r\nIs there a recommended way to handle this outside of the elastic/eui lib such that we can not crash and guide users to the erroneous input?\r\n\r\n## Gif\r\n\r\n![supertimepickerbug](https://user-images.githubusercontent.com/8155004/117005090-21d59380-ace7-11eb-87ec-af7897b879f9.gif)\r\n"
+    "body": "## Summary\r\n\r\nUsing the super time picker in Kibana can lead to UI crashing for edge case values (see https://github.com/elastic/kibana/issues/91138).\r\n\r\n## How to reproduce\r\n\r\n1. Navigate here https://eui.elastic.co/#/templates/super-date-picker#configurations\r\n2. Select “days ago” and entering a value of 9 9s\r\n3. See error\r\n\r\nIs there a recommended way to handle this outside of the elastic/eui lib such that we can not crash and guide users to the erroneous input?\r\n\r\n## Gif\r\n\r\n![supertimepickerbug](https://user-images.githubusercontent.com/8155004/117005090-21d59380-ace7-11eb-87ec-af7897b879f9.gif)\r\n"
   },
   {
     "html_url": "https://github.com/elastic/eui/issues/4774",
@@ -6879,7 +6879,7 @@
     "comments": 0,
     "created_at": "2020-09-10T20:23:33Z",
     "author_association": "NONE",
-    "body": "SuperDatePicker does not properly restore relative dates\r\n\r\nSteps to reproduce:\r\n1. Go to https://elastic.github.io/eui/#/forms/super-date-picker and to the first time picker on that page\r\n2. Click start date to edit the start date and enter `15` `months ago`\r\n![image](https://user-images.githubusercontent.com/8397647/92798784-ddbd0980-f378-11ea-975b-874cdea6a1e4.png)\r\n3. Observe SuperDatePicker puts human friendly desc in start date of `~ 1 year ago` which is handy.\r\n4. Click `Update`\r\n5. Observe the time picker reflects `15 months ago` just fine.\r\n![image](https://user-images.githubusercontent.com/8397647/92799079-21177800-f379-11ea-9c5c-b68a0b70272f.png)\r\n6. Click to edit the start date again\r\n7. Observe that `1` `year ago` is populate in the time picker GUI instead of `15 months ago`. Note the underlying date is still correct (verify this by looking at the absolute date at the bottom of the picker).\r\n![image](https://user-images.githubusercontent.com/8397647/92799418-6340b980-f379-11ea-99c0-7e470bf54bd5.png)\r\n8. As a user I would expect it to restore `15 months ago` and if I manually fix it myself it causes the dialog to get stuck in \"update mode\" (see https://github.com/elastic/eui/issues/4025)\r\n"
+    "body": "SuperDatePicker does not properly restore relative dates\r\n\r\nSteps to reproduce:\r\n1. Go to https://elastic.github.io/eui/#/templates/super-date-picker and to the first time picker on that page\r\n2. Click start date to edit the start date and enter `15` `months ago`\r\n![image](https://user-images.githubusercontent.com/8397647/92798784-ddbd0980-f378-11ea-975b-874cdea6a1e4.png)\r\n3. Observe SuperDatePicker puts human friendly desc in start date of `~ 1 year ago` which is handy.\r\n4. Click `Update`\r\n5. Observe the time picker reflects `15 months ago` just fine.\r\n![image](https://user-images.githubusercontent.com/8397647/92799079-21177800-f379-11ea-9c5c-b68a0b70272f.png)\r\n6. Click to edit the start date again\r\n7. Observe that `1` `year ago` is populate in the time picker GUI instead of `15 months ago`. Note the underlying date is still correct (verify this by looking at the absolute date at the bottom of the picker).\r\n![image](https://user-images.githubusercontent.com/8397647/92799418-6340b980-f379-11ea-99c0-7e470bf54bd5.png)\r\n8. As a user I would expect it to restore `15 months ago` and if I manually fix it myself it causes the dialog to get stuck in \"update mode\" (see https://github.com/elastic/eui/issues/4025)\r\n"
   },
   {
     "html_url": "https://github.com/elastic/eui/issues/4024",

src-docs/src/views/empty_prompt/empty_prompt_example.js

@@ -317,10 +317,11 @@ export const EmptyPromptExample = {
         <>
           <p>
             When using a <strong>EuiEmptyPrompt</strong> in a{' '}
-            <Link to="/layout/page">EuiPageTemplate</Link>, pay attention to the
-            template you’re passing. The template will determine which{' '}
-            <EuiCode>color</EuiCode> and <EuiCode>hasBorder</EuiCode> prop you
-            should use to ensure consistency across our Elastic products.
+            <Link to="/templates/page-template">EuiPageTemplate</Link>, pay
+            attention to the template you’re passing. The template will
+            determine which <EuiCode>color</EuiCode> and{' '}
+            <EuiCode>hasBorder</EuiCode> prop you should use to ensure
+            consistency across our Elastic products.
           </p>
           <PageTemplateTable />
 
@@ -348,7 +349,7 @@ export const EmptyPromptExample = {
             You can then tie multiple types of empty states together to create a
             seamless loading to empty or loading to error experience. The
             following example shows how to encorprate these states with{' '}
-            <Link to="/layout/page#simple-layout-with-centered-content">
+            <Link to="/templates/page-template#simple-layout-with-centered-content">
               <strong>EuiPageTemplate</strong>
             </Link>{' '}
             using <EuiCode>{'template="centeredContent"'}</EuiCode>.

src-docs/src/views/home/home_view.js

@@ -186,7 +186,7 @@ export const HomeView = () => (
         <EuiFlexItem grow={false} className="guideHomePage__blockformCard">
           <EuiCard
             hasBorder
-            href="#/layout/page"
+            href="#/templates/page-template"
             textAlign="left"
             image={imagePages}
             title="Pages"

src-docs/src/views/page/page_example.js → src-docs/src/views/page/page_template_example.js

@@ -74,21 +74,22 @@ const PageCustomContentTemplateSource = require('!!raw-loader!./page_custom_cont
 import PageLegacy from './page';
 const PageLegacySource = require('!!raw-loader!./page');
 
-export const PageExample = {
-  title: 'Page',
+export const PageTemplateExample = {
+  title: 'Page template',
   intro: (
     <>
       <EuiText>
         <p>
           Page layouts are modular and fit together in a precise manner, though
           certain parts can also be added or removed as needed. EUI provides
-          both the indivdual page components and an over-arching template for
-          easily creating some pre-defined layouts.
+          both the <strong>individual page components</strong> and an
+          over-arching <strong>template</strong> for easily creating some
+          pre-defined layouts.
         </p>
       </EuiText>
       <EuiSpacer />
       <EuiCallOut
-        iconType="document"
+        iconType="documentation"
         title="The following examples showcase the both the template and custom built usages of the page components."
       >
         <p>
@@ -97,6 +98,17 @@ export const PageExample = {
           layout.
         </p>
       </EuiCallOut>
+      <EuiSpacer />
+      <EuiCallOut
+        color="danger"
+        iconType="alert"
+        title="Do not nest multiple EuiPageTemplate components."
+      >
+        <p>
+          The template is a very fragile component that will cause unexpected
+          results if nested.
+        </p>
+      </EuiCallOut>
     </>
   ),
   sections: [
@@ -390,7 +402,7 @@ export const PageExample = {
           <p>
             Similar to the previous example, you can create a centered panel to
             emphasize incompleteness even with a page header. For this setup, we
-            recommend using setting <strong>EuiPageContent</strong> to use the{' '}
+            recommend setting <strong>EuiPageContent</strong> to use the{' '}
             <EuiCode>subdued</EuiCode> color as to not have nested shadows.
           </p>
           <EuiCallOut
@@ -495,7 +507,7 @@ export const PageExample = {
       text: (
         <>
           <p>
-            Though it is not recomended for most layouts, some require the
+            Though it is not recommended for most layouts, some require the
             control of scrolling to be handled through child components. You can
             achieve this through nested flex groups and overflow properties;
             adding certain combinations of{' '}
@@ -633,7 +645,7 @@ export const PageExample = {
       text: (
         <p>
           Also similar to the previous examples, you can create a centered panel
-          to emphasis incompleteness even with a page header. For this setup,
+          to emphasize incompleteness even with a page header. For this setup,
           You will need to use nested <strong>EuiPageContent</strong> components
           in order for the centering to work.
         </p>

src-docs/src/views/page_header/page_header_example.js

@@ -35,7 +35,7 @@ export const PageHeaderExample = {
       <p>
         While the <strong>EuiPageHeader</strong> component can be placed
         anywhere within your page layout, we recommend using it within the{' '}
-        <Link to="/layout/page">
+        <Link to="/templates/page-template">
           <strong>EuiPageTemplate</strong>
         </Link>{' '}
         component by passing the configuration props as its{' '}

src-docs/src/views/panel/panel_example.js

@@ -88,13 +88,13 @@ export const PanelExample = {
           <strong>EuiPanel</strong> is a building block component. Use it as a
           layout helper for containing content. It is also commonly used as a
           base for other larger components like{' '}
-          <Link to="/layout/page">
+          <Link to="/templates/page-template">
             <strong>EuiPage</strong>
           </Link>
           ,{' '}
           <Link to="/layout/popover">
             <strong>EuiPopover</strong>
-          </Link>
+          </Link>{' '}
           and{' '}
           <Link to="/display/card">
             <strong>EuiCard</strong>