[Emotion] Convert EuiCollapsibleNav and EuiCollapsibleNavGroup (#6865)

* Convert EuiCollapsibleNav to Emotion

* [EuiCollapsibleNavGroup] Set up base Emotion styles

* [EuiCollapsibleNavGroup] Convert `background` prop to Emotion

+ set theme colorMode on all children within `background="dark"`

* Remove unused focus animation

- doesn't seem to be doing anything or used, so presumably became deprecated in Amsterdam

* Remove unused font-weight

- `EuiTitle` already sets a font weight of 700, so this isn't really being used meaningfully anywhere

* Convert remaining padding CSS

- nest `euiCollapsibleNavGroup__heading` padding as well for consistency and so we can skip adding another Emotion var

* Delete all Sass files

* Convert Enzyme tests to RTL

* [docs] Remove now-unnecessary `EuiThemeProvider` from collapsible nav docs

- since `background="dark"` now automatically sets the theme

* Set up Storybooks

- break from 'playground' example for `EuiCollapsibleGroupNav` to set up schema of different display types (since they're individually fairly different, and affect prop usage substantially)

* Add full pattern storybook demo

- 50/50 on this, but it's useful for QA

* changelog

* Revert "Add full pattern storybook demo"

This reverts commit c3ced8c.

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

@@ -28,7 +28,6 @@ import { KibanaNavLinks, SecurityGroup } from './collapsible_nav_list';
 
 import contentSvg from '../../images/content.svg';
 import { useExitPath } from '../../services/routing/routing';
-import { EuiThemeProvider } from '../../../../src/services';
 
 const TopLinks: EuiPinnableListGroupItemProps[] = [
   {
@@ -161,23 +160,21 @@ const CollapsibleNavAll = () => {
       {/* Dark deployments section */}
       <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
         <EuiCollapsibleNavGroup isCollapsible={false} background="dark">
-          <EuiThemeProvider colorMode="dark">
-            <EuiListGroup
-              maxWidth="none"
-              gutterSize="none"
-              size="s"
-              listItems={[
-                {
-                  label: 'Manage deployment',
-                  href: '#',
-                  iconType: 'logoCloud',
-                  iconProps: {
-                    color: 'ghost',
-                  },
+          <EuiListGroup
+            maxWidth="none"
+            gutterSize="none"
+            size="s"
+            listItems={[
+              {
+                label: 'Manage deployment',
+                href: '#',
+                iconType: 'logoCloud',
+                iconProps: {
+                  color: 'ghost',
                 },
-              ]}
-            />
-          </EuiThemeProvider>
+              },
+            ]}
+          />
         </EuiCollapsibleNavGroup>
       </EuiFlexItem>
 

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

@@ -11,7 +11,6 @@ import {
 import { EuiSpacer } from '../../../../src/components/spacer';
 import { EuiButton, EuiButtonIcon } from '../../../../src/components/button';
 import { EuiLink } from '../../../../src/components/link';
-import { EuiThemeProvider } from '../../../../src/services';
 
 const deploymentsList: EuiListGroupProps['listItems'] = [
   {
@@ -62,13 +61,9 @@ export const DeploymentsGroup = (
     initialIsOpen={false}
     background="dark"
   >
-    <div role="group" className="kibanaNavDeployment__content">
-      <EuiThemeProvider colorMode="dark">
-        <EuiListGroup listItems={deploymentsList} flush />
-        <EuiSpacer size="s" />
-        <EuiButton fullWidth>Manage deployments</EuiButton>
-      </EuiThemeProvider>
-    </div>
+    <EuiListGroup listItems={deploymentsList} flush />
+    <EuiSpacer size="s" />
+    <EuiButton fullWidth>Manage deployments</EuiButton>
   </EuiCollapsibleNavGroup>
 );