From 329137145bc352824de435a865f95883f8817308 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 26 Sep 2023 15:44:48 -0700 Subject: [PATCH] [architecture] Export subcomponents with `.` namespacing - a la `EuiPageTemplate` + update stories to use namespaced components instead of direct imports + add stories for the new group component --- .../collapsible_nav_beta.stories.tsx | 80 +++++++--------- .../collapsible_nav_beta.tsx | 5 +- .../collapsible_nav_group.stories.tsx | 94 +++++++++++++++++++ src/components/collapsible_nav_beta/index.ts | 17 +++- 4 files changed, 144 insertions(+), 52 deletions(-) create mode 100644 src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx index 4dc29d2e083e..b8a211631884 100644 --- a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx +++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx @@ -11,18 +11,15 @@ import type { Meta, StoryObj } from '@storybook/react'; import { EuiHeader, EuiHeaderSection, EuiHeaderSectionItem } from '../header'; import { EuiPageTemplate } from '../page_template'; -import { EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter } from '../flyout'; +import { EuiFlyout } from '../flyout'; import { EuiButton } from '../button'; import { EuiTitle } from '../title'; -import { - EuiCollapsibleNavItem, - EuiCollapsibleNavItemProps, -} from './collapsible_nav_item'; import { EuiCollapsibleNavBeta, EuiCollapsibleNavBetaProps, -} from './collapsible_nav_beta'; + EuiCollapsibleNavItemProps, +} from './'; const meta: Meta = { title: 'EuiCollapsibleNavBeta', @@ -89,9 +86,14 @@ const renderGroup = ( export const KibanaExample: Story = { render: ({ ...args }) => ( - - - + + - - - - - - - - - + + - - - + ), }; @@ -323,28 +325,10 @@ export const KibanaExample: Story = { export const SecurityExample: Story = { render: ({ ...args }) => ( - - - + - - - + + - - + ), }; @@ -458,10 +442,10 @@ const MockConsumerFlyout: FunctionComponent = () => { {flyoutIsOpen && ( setFlyoutOpen(false)}> - + Some other mock consumer flyout that should overlap EuiCollapsibleNav - + )} diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx index 94eed9771526..c9c597e7141f 100644 --- a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx +++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx @@ -36,8 +36,9 @@ export type EuiCollapsibleNavBetaProps = CommonProps & 'side' | 'focusTrapProps' | 'includeFixedHeadersInFocusTrap' > & { /** - * ReactNode(s) to render as navigation flyout content, typically `EuiCollapsibleNavItem`s. - * You may also want to use `EuiFlyoutBody` and `EuiFlyoutFooter` for organization. + * ReactNode(s) to render as navigation flyout content, typically `EuiCollapsibleNavBeta.Item`s. + * You will likely want to use `EuiCollapsibleNavBeta.Body` and `EuiCollapsibleNavBeta.Footer` + * for organization. */ children?: ReactNode; /** diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx new file mode 100644 index 000000000000..e4fc402fc8b2 --- /dev/null +++ b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx @@ -0,0 +1,94 @@ +/* + * 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, PropsWithChildren } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { EuiHeader, EuiHeaderSection } from '../../header'; +import { EuiPageTemplate } from '../../page_template'; + +import { EuiCollapsibleNavBeta, EuiCollapsibleNavBetaProps } from '../'; +import { + EuiCollapsibleNavGroup, + EuiCollapsibleNavGroupProps, +} from './collapsible_nav_group'; + +const meta: Meta = { + title: 'EuiCollapsibleNavBeta.Group', + component: EuiCollapsibleNavGroup, + parameters: { + layout: 'fullscreen', + }, + args: { + title: 'Elastic', + icon: 'logoElastic', + items: [ + { title: 'Get started', href: '#' }, + { title: 'Dashboards', href: '#' }, + { + title: 'Explore', + href: '#', + items: [ + { title: 'Hello', href: '#' }, + { title: 'World', href: '#' }, + ], + }, + ], + }, + argTypes: { + wrapperProps: { control: 'object' }, + }, +}; +export default meta; +type Story = StoryObj; + +const CollapsibleNavTemplate: FunctionComponent< + PropsWithChildren & Partial +> = ({ children, ...props }) => { + return ( + <> + + + + {children} + + + + + Hello world + + + ); +}; + +export const Playground: Story = { + render: ({ ...args }) => ( + + + + ), + args: { + wrapperProps: { 'data-test-subj': 'test' }, + }, +}; + +export const EdgeCaseTesting: Story = { + render: ({ ...args }) => ( + + + + + + + + + ), + args: { + href: '#', + }, +}; diff --git a/src/components/collapsible_nav_beta/index.ts b/src/components/collapsible_nav_beta/index.ts index c393404f2fb5..5e0edf43b846 100644 --- a/src/components/collapsible_nav_beta/index.ts +++ b/src/components/collapsible_nav_beta/index.ts @@ -11,11 +11,24 @@ * development usage. It is not yet fully documented or supported. */ +import { EuiCollapsibleNavBeta as _EuiCollapsibleNavBeta } from './collapsible_nav_beta'; +import { + EuiCollapsibleNavBody, + EuiCollapsibleNavFooter, +} from './collapsible_nav_body_footer'; +import { EuiCollapsibleNavGroup } from './collapsible_nav_group'; +import { EuiCollapsibleNavItem } from './collapsible_nav_item'; + +export const EuiCollapsibleNavBeta = Object.assign(_EuiCollapsibleNavBeta, { + Body: EuiCollapsibleNavBody, + Footer: EuiCollapsibleNavFooter, + Group: EuiCollapsibleNavGroup, + Item: EuiCollapsibleNavItem, +}); export type { EuiCollapsibleNavBetaProps } from './collapsible_nav_beta'; -export { EuiCollapsibleNavBeta } from './collapsible_nav_beta'; +export { EuiCollapsibleNavItem }; export type { EuiCollapsibleNavItemProps, EuiCollapsibleNavSubItemProps, } from './collapsible_nav_item'; -export { EuiCollapsibleNavItem } from './collapsible_nav_item';