WIP

src/components/collapsible_nav/beta/collapsible_nav_button.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent } from 'react';
+import { EuiIcon } from '../../icon';
+
+export type EuiCollapsibleNavButtonProps = {
+  isCollapsed?: boolean;
+  isMobile?: boolean;
+};
+
+export const EuiCollapsibleNavButton: FunctionComponent<
+  EuiCollapsibleNavButtonProps
+> = ({ isCollapsed, isMobile }) => {
+  let iconType: string;
+  if (isMobile) {
+    iconType = isCollapsed ? 'cross' : 'menu';
+  } else {
+    iconType = isCollapsed ? 'menuRight' : 'menuLeft';
+  }
+
+  return (
+    <button>
+      <EuiIcon type={iconType} />
+    </button>
+  );
+};

src/components/collapsible_nav/collapsible_nav.styles.ts

@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
+import { logicalCSS } from '../../global_styling';
 
 export const euiCollapsibleNavStyles = ({ euiTheme }: UseEuiTheme) => {
   return {
@@ -16,5 +17,14 @@ export const euiCollapsibleNavStyles = ({ euiTheme }: UseEuiTheme) => {
     overlay: css`
       z-index: ${euiTheme.levels.navigation};
     `,
+    beta: css`
+      ${logicalCSS('border-top', euiTheme.border.thin)}
+      ${logicalCSS('border-right', euiTheme.border.thin)}
+
+      .euiFlyoutFooter {
+        background-color: ${euiTheme.colors.emptyShade};
+        ${logicalCSS('border-top', euiTheme.border.thin)}
+      }
+    `,
   };
 };

src/components/collapsible_nav/collapsible_nav.tsx

@@ -70,7 +70,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   ownFocus = true,
   outsideClickCloses = true,
   closeButtonPosition = 'outside',
-  paddingSize = 'none',
+  paddingSize = 'none', // TODO: 's'?
   focusTrapProps: _focusTrapProps = {},
   ...rest
 }) => {
@@ -92,7 +92,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   const classes = classNames('euiCollapsibleNav', className);
   const euiTheme = useEuiTheme();
   const styles = euiCollapsibleNavStyles(euiTheme);
-  const cssStyles = [styles.euiCollapsibleNav, styles[flyoutType]];
+  const cssStyles = [styles.euiCollapsibleNav, styles[flyoutType], styles.beta];
 
   // Show a trigger button if one was passed but
   // not if navIsDocked and showButtonIfDocked is false

src/components/collapsible_nav/collapsible_nav_item/beta.stories.tsx

@@ -0,0 +1,111 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { EuiButton } from '../../button';
+import { EuiFlyoutBody, EuiFlyoutFooter } from '../../flyout';
+import { EuiCollapsibleNav, EuiCollapsibleNavProps } from '../collapsible_nav';
+import { EuiCollapsibleNavItem } from './collapsible_nav_item';
+
+const meta: Meta<EuiCollapsibleNavProps> = {
+  title: 'EuiCollapsibleNavItem',
+  // component: EuiCollapsibleNav,
+};
+
+export default meta;
+type Story = StoryObj<EuiCollapsibleNavProps>;
+
+const StatefulCollapsibleNav = (props: Partial<EuiCollapsibleNavProps>) => {
+  const [isOpen, setIsOpen] = useState(props.isOpen);
+  return (
+    <EuiCollapsibleNav
+      {...props}
+      isOpen={isOpen}
+      button={
+        <EuiButton onClick={() => setIsOpen((isOpen) => !isOpen)}>
+          Toggle nav
+        </EuiButton>
+      }
+      onClose={() => setIsOpen(false)}
+    />
+  );
+};
+
+export const Beta: Story = {
+  render: ({ ...args }) => <StatefulCollapsibleNav {...args} />,
+  args: {
+    children: (
+      <>
+        <EuiFlyoutBody>
+          <EuiCollapsibleNavItem
+            title="Recent"
+            iconType="clock"
+            isCollapsible
+            initialIsOpen={false}
+          >
+            Test
+          </EuiCollapsibleNavItem>
+          <EuiCollapsibleNavItem
+            title="Elasticsearch"
+            iconType="logoElasticsearch"
+            isCollapsible
+            initialIsOpen={false}
+          >
+            Test
+          </EuiCollapsibleNavItem>
+          <EuiCollapsibleNavItem
+            title="Enterprise Search"
+            iconType="logoEnterpriseSearch"
+            isCollapsible
+            initialIsOpen={false}
+          >
+            Test
+          </EuiCollapsibleNavItem>
+          <EuiCollapsibleNavItem
+            title="Observability"
+            iconType="logoObservability"
+            isCollapsible
+            initialIsOpen={false}
+          >
+            Test
+          </EuiCollapsibleNavItem>
+          <EuiCollapsibleNavItem
+            title="Security"
+            iconType="logoSecurity"
+            isCollapsible
+            initialIsOpen={false}
+          >
+            Test
+          </EuiCollapsibleNavItem>
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiCollapsibleNavItem
+            title="Developer tools"
+            iconType="editorCodeBlock"
+            isCollapsible
+            initialIsOpen={false}
+          >
+            Test
+          </EuiCollapsibleNavItem>
+          <EuiCollapsibleNavItem
+            title="Management"
+            iconType="gear"
+            isCollapsible
+            initialIsOpen={false}
+          >
+            Test
+          </EuiCollapsibleNavItem>
+        </EuiFlyoutFooter>
+      </>
+    ),
+    isOpen: true,
+    size: 240,
+  },
+};

src/components/collapsible_nav/collapsible_nav_item/collapsible_nav_item.styles.ts

@@ -0,0 +1,82 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../../services';
+import {
+  mathWithUnits,
+  logicalCSS,
+  euiCanAnimate,
+} from '../../../global_styling';
+import { euiButtonColor } from '../../../themes/amsterdam/global_styling/mixins/button';
+
+export const euiCollapsibleNavItemStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiCollapsibleNavItem: css`
+      /* TODO - why even use EuiTitle at this point */
+      .euiCollapsibleNavItem__title {
+        color: ${euiTheme.colors.text};
+        font-weight: ${euiTheme.font.weight.semiBold};
+      }
+
+      margin: ${euiTheme.size.s};
+    `,
+    notCollapsible: css`
+      /* If the heading is not in an accordion, it needs the padding */
+      .euiCollapsibleNavGroup__heading {
+        padding: ${euiTheme.size.s};
+      }
+    `,
+    // Children padding
+    childrenWrapper: {
+      euiCollapsibleNavItem__children: css`
+        padding: ${euiTheme.size.s};
+        ${logicalCSS('padding-left', euiTheme.size.xxl)}
+      `,
+    },
+    accordionStyles: {
+      euiCollapsibleNavItem__accordionButton: css`
+        ${logicalCSS('width', '100%')} /* TODO: remove after CSS is fixed */
+        padding-inline: ${euiTheme.size.s};
+        padding-block: ${mathWithUnits(euiTheme.size.s, (x) => x * 0.75)};
+        border-radius: ${euiTheme.border.radius.small};
+
+        &:hover,
+        &:focus {
+          text-decoration: underline; /* TODO: remove after CSS is fixed */
+          background-color: ${euiTheme.colors.lightestShade};
+        }
+
+        ${euiCanAnimate} {
+          transition: background-color ${euiTheme.animation.normal} ease-in-out;
+        }
+
+        /* This class does not accept a custom className */
+        .euiAccordion__buttonContent {
+          flex-basis: 100%;
+        }
+      `,
+      isSelected: css`
+        background-color: ${euiButtonColor(euiThemeContext, 'text')
+          .backgroundColor};
+      `,
+      euiCollapsibleNavItem__accordionArrow: css`
+        color: ${euiTheme.colors.disabledText};
+        transition: transform ${euiTheme.animation.normal} ease-in-out,
+          color ${euiTheme.animation.normal} ease-in-out;
+
+        .euiAccordion-isOpen & {
+          color: ${euiTheme.colors.text};
+          transform: rotate(180deg);
+        }
+      `,
+    },
+  };
+};