[New Nav Feature] Created EuiCollapsibleGroup (#3031)

* Added `EuiCollapsibleNavGroup` component

* Initial render of nav group

* Adding background color options

* Fixing more colors

* Added `collapsible` prop

* cleanup

* remove slugify

* Added `titleSize` and `titleElement` to groups and better docs

* better docs

* snaps

* doc cleanoup

* Fixing contrast of focus state of dark bg

* specific classname target

* Using EuiTitle and sizing to wrap title

* `collapsible` -> `isCollapsible`

* Fixing `id` as state and exporting proper Prop types

src-docs/src/views/collapsible_nav/collapsible_nav_example.js

@@ -11,12 +11,17 @@ import {
   EuiText,
   EuiSpacer,
   EuiCallOut,
+  EuiCollapsibleNavGroup,
 } from '../../../../src/components';
 
 import CollapsibleNav from './collapsible_nav';
 const collapsibleNavSource = require('!!raw-loader!./collapsible_nav');
 const collapsibleNavHtml = renderToHtml(CollapsibleNav);
 
+import CollapsibleNavGroup from './collapsible_nav_group';
+const collapsibleNavGroupSource = require('!!raw-loader!./collapsible_nav_group');
+const collapsibleNavGroupHtml = renderToHtml(CollapsibleNavGroup);
+
 export const CollapsibleNavExample = {
   title: 'Collapsible nav',
   intro: (
@@ -64,6 +69,55 @@ export const CollapsibleNavExample = {
       ),
       props: { EuiCollapsibleNav },
       demo: <CollapsibleNav />,
+      snippet: `<EuiButton onClick={() => setNavIsOpen(!navIsOpen)}>Toggle nav</EuiButton>
+{navIsOpen && (
+  <EuiCollapsibleNav
+    docked={navIsDocked}
+    onClose={() => setNavIsOpen(false)}
+  />
+)}`,
+    },
+    {
+      title: 'Collapsible nav group',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: collapsibleNavGroupSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: collapsibleNavGroupHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            An <strong>EuiCollapsibleNavGroup</strong> adds some basic borders
+            and <EuiCode>background</EuiCode> color of <EuiCode>none</EuiCode>,{' '}
+            <EuiCode>light</EuiCode>, or <EuiCode>dark</EuiCode>. Give each
+            seaction a heading by providing an optional <EuiCode>title</EuiCode>{' '}
+            and <EuiCode>iconType</EuiCode>. Make the section collapsible (
+            <Link to="/layout/accordion">accordion style</Link>) with{' '}
+            <EuiCode language="js">isCollapsible=true</EuiCode>.
+          </p>
+          <p>
+            When in <EuiCode>isCollapsible</EuiCode> mode, a{' '}
+            <EuiCode>title</EuiCode> and{' '}
+            <EuiCode language="ts">initialIsOpen:boolean</EuiCode> is required.
+          </p>
+        </>
+      ),
+      props: {
+        EuiCollapsibleNavGroup,
+      },
+      demo: <CollapsibleNavGroup />,
+      snippet: `<EuiCollapsibleNavGroup
+  title="Nav group"
+  iconType="logo"
+  isCollapsible={true}
+  initialIsOpen={true}
+  background="none"
+/>`,
     },
   ],
 };

src-docs/src/views/collapsible_nav/collapsible_nav_group.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { EuiCollapsibleNavGroup } from '../../../../src/components/collapsible_nav';
+import { EuiText } from '../../../../src/components/text';
+import { EuiCode } from '../../../../src/components/code';
+
+export default () => (
+  <>
+    <EuiCollapsibleNavGroup>
+      <EuiText size="s" color="subdued">
+        <p>This is a basic group without any modifications</p>
+      </EuiText>
+    </EuiCollapsibleNavGroup>
+    <EuiCollapsibleNavGroup title="Nav group" iconType="logoElastic">
+      <EuiText size="s" color="subdued">
+        <p>
+          This is a nice group with a heading supplied via{' '}
+          <EuiCode>title</EuiCode> and <EuiCode>iconType</EuiCode>.
+        </p>
+      </EuiText>
+    </EuiCollapsibleNavGroup>
+    <EuiCollapsibleNavGroup
+      background="light"
+      title="Nav group"
+      isCollapsible={true}
+      iconType="logoElastic"
+      initialIsOpen={true}>
+      <EuiText size="s" color="subdued">
+        <p>
+          This group is <EuiCode>collapsible</EuiCode> and set with{' '}
+          <EuiCode>initialIsOpen</EuiCode>. It has a heading that is the
+          collapsing button via <EuiCode>title</EuiCode> and{' '}
+          <EuiCode>iconType</EuiCode>.
+        </p>
+      </EuiText>
+    </EuiCollapsibleNavGroup>
+    <EuiCollapsibleNavGroup
+      title="Nav group"
+      iconType="logoGCPMono"
+      iconSize="xxl"
+      titleSize="s"
+      isCollapsible={true}
+      initialIsOpen={false}
+      background="dark">
+      <EuiText size="s">
+        <p>
+          This is a <EuiCode>dark</EuiCode> <EuiCode>collapsible</EuiCode> group
+          that is initally set to closed,{' '}
+          <EuiCode>iconSize=&quot;xxl&quot;</EuiCode> and{' '}
+          <EuiCode>titleSize=&quot;s&quot;</EuiCode>.
+        </p>
+      </EuiText>
+    </EuiCollapsibleNavGroup>
+  </>
+);

src/components/collapsible_nav/_index.scss

@@ -1,2 +1,4 @@
 @import 'variables';
+
+@import 'collapsible_nav_group/index';
 @import 'collapsible_nav';

src/components/collapsible_nav/_variables.scss

@@ -1,2 +1,14 @@
 // Sizing
 $euiCollapsibleNavWidth: $euiSize * 20; // ~ 320px
+
+$euiCollapsibleNavGroupLightBackgroundColor: $euiPageBackgroundColor;
+
+$euiCollapsibleNavGroupDarkBackgroundColor: lightOrDarkTheme(
+  shade($euiColorDarkestShade, 20%),
+  shade($euiColorLightestShade, 50%),
+);
+
+$euiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor(
+  $euiColorPrimary,
+  $euiCollapsibleNavGroupDarkBackgroundColor
+);