Skip to content

Commit bc1e8a2

Browse files
cee-chencee-chen
committed
[kibana] Provide example of "grouped" API sitting on top of flatter EUI items API
1 parent c12fb27 commit bc1e8a2

1 file changed

Lines changed: 83 additions & 67 deletions

File tree

‎src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx‎

Lines changed: 83 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ import { EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter } from '../flyout';
1515
import { EuiButton } from '../button';
1616
import { EuiTitle } from '../title';
1717

18-
import { EuiCollapsibleNavItem } from './collapsible_nav_item';
18+
import {
19+
EuiCollapsibleNavItem,
20+
EuiCollapsibleNavItemProps,
21+
} from './collapsible_nav_item';
1922
import {
2023
EuiCollapsibleNavBeta,
2124
EuiCollapsibleNavBetaProps,
@@ -59,21 +62,29 @@ const OpenCollapsibleNav: FunctionComponent<
5962
);
6063
};
6164

62-
const KibanaNavTitle: FunctionComponent<{
63-
title: string;
64-
}> = ({ title }) => (
65-
<EuiTitle
66-
size="xxxs"
67-
className="eui-textTruncate"
68-
css={({ euiTheme }) => ({
69-
marginTop: euiTheme.size.base,
70-
paddingBlock: euiTheme.size.xs,
71-
paddingInline: euiTheme.size.s,
72-
})}
73-
>
74-
<div>{title}</div>
75-
</EuiTitle>
76-
);
65+
const renderGroup = (
66+
groupTitle: string,
67+
groupItems: EuiCollapsibleNavItemProps[]
68+
) => {
69+
return [
70+
{
71+
renderItem: () => (
72+
<EuiTitle
73+
size="xxxs"
74+
className="eui-textTruncate"
75+
css={({ euiTheme }) => ({
76+
marginTop: euiTheme.size.base,
77+
paddingBlock: euiTheme.size.xs,
78+
paddingInline: euiTheme.size.s,
79+
})}
80+
>
81+
<div>{groupTitle}</div>
82+
</EuiTitle>
83+
),
84+
},
85+
...groupItems,
86+
];
87+
};
7788

7889
export const KibanaExample: Story = {
7990
render: ({ ...args }) => (
@@ -95,16 +106,17 @@ export const KibanaExample: Story = {
95106
href="#"
96107
items={[
97108
{ title: 'Get started', href: '#' },
98-
{ renderItem: () => <KibanaNavTitle title="Explore" /> },
99-
{ title: 'Discover', href: '#' },
100-
{ title: 'Dashboards', href: '#' },
101-
{ title: 'Visualize library', href: '#' },
102-
{ renderItem: () => <KibanaNavTitle title="Content" /> },
103-
{ title: 'Indices', href: '#' },
104-
{ title: 'Transforms', href: '#' },
105-
{ title: 'Indexing API', href: '#' },
106-
{ renderItem: () => <KibanaNavTitle title="Security" /> },
107-
{ title: 'API keys', href: '#' },
109+
...renderGroup('Explore', [
110+
{ title: 'Discover', href: '#' },
111+
{ title: 'Dashboards', href: '#' },
112+
{ title: 'Visualize library', href: '#' },
113+
]),
114+
...renderGroup('Content', [
115+
{ title: 'Indices', href: '#' },
116+
{ title: 'Transforms', href: '#' },
117+
{ title: 'Indexing API', href: '#' },
118+
]),
119+
...renderGroup('Security', [{ title: 'API keys', href: '#' }]),
108120
]}
109121
/>
110122
<EuiCollapsibleNavItem
@@ -132,31 +144,33 @@ export const KibanaExample: Story = {
132144
{ title: 'Alerts', href: '#' },
133145
{ title: 'Cases', href: '#' },
134146
{ title: 'SLOs', href: '#' },
135-
{ renderItem: () => <KibanaNavTitle title="Signals" /> },
136-
{ title: 'Logs', href: '#' },
137-
{
138-
title: 'Tracing',
139-
href: '#',
140-
items: [
141-
{ title: 'Services', href: '#' },
142-
{ title: 'Traces', href: '#' },
143-
{ title: 'Dependencies', href: '#' },
144-
],
145-
},
146-
{ renderItem: () => <KibanaNavTitle title="Toolbox" /> },
147-
{ title: 'Visualize library', href: '#' },
148-
{ title: 'Dashboards', href: '#' },
149-
{
150-
title: 'AIOps',
151-
href: '#',
152-
items: [
153-
{ title: 'Anomaly detection', href: '#' },
154-
{ title: 'Spike analysis', href: '#' },
155-
{ title: 'Change point detection', href: '#' },
156-
{ title: 'Notifications', href: '#' },
157-
],
158-
},
159-
{ title: 'Add data', href: '#' },
147+
...renderGroup('Signals', [
148+
{ title: 'Logs', href: '#' },
149+
{
150+
title: 'Tracing',
151+
href: '#',
152+
items: [
153+
{ title: 'Services', href: '#' },
154+
{ title: 'Traces', href: '#' },
155+
{ title: 'Dependencies', href: '#' },
156+
],
157+
},
158+
]),
159+
...renderGroup('Toolbox', [
160+
{ title: 'Visualize library', href: '#' },
161+
{ title: 'Dashboards', href: '#' },
162+
{
163+
title: 'AIOps',
164+
href: '#',
165+
items: [
166+
{ title: 'Anomaly detection', href: '#' },
167+
{ title: 'Spike analysis', href: '#' },
168+
{ title: 'Change point detection', href: '#' },
169+
{ title: 'Notifications', href: '#' },
170+
],
171+
},
172+
{ title: 'Add data', href: '#' },
173+
]),
160174
]}
161175
/>
162176
<EuiCollapsibleNavItem
@@ -234,22 +248,24 @@ export const KibanaExample: Story = {
234248
{ title: 'Overview', href: '#' },
235249
{ title: 'Notifications', href: '#' },
236250
{ title: 'Memory usage', href: '#' },
237-
{ renderItem: () => <KibanaNavTitle title="Anomaly detection" /> },
238-
{ title: 'Jobs', href: '#' },
239-
{ title: 'Anomaly explorer', href: '#' },
240-
{ title: 'Single metric viewer', href: '#' },
241-
{ title: 'Settings', href: '#' },
242-
{
243-
renderItem: () => <KibanaNavTitle title="Data frame analytics" />,
244-
},
245-
{ title: 'Jobs', href: '#' },
246-
{ title: 'Results explorer', href: '#' },
247-
{ title: 'Analytics map', href: '#' },
248-
{ renderItem: () => <KibanaNavTitle title="Model management" /> },
249-
{ title: 'Trained models', href: '#' },
250-
{ renderItem: () => <KibanaNavTitle title="Data visualizer" /> },
251-
{ title: 'File', href: '#' },
252-
{ title: 'Data view', href: '#' },
251+
...renderGroup('Anomaly detection', [
252+
{ title: 'Jobs', href: '#' },
253+
{ title: 'Anomaly explorer', href: '#' },
254+
{ title: 'Single metric viewer', href: '#' },
255+
{ title: 'Settings', href: '#' },
256+
]),
257+
...renderGroup('Data frame analytics', [
258+
{ title: 'Jobs', href: '#' },
259+
{ title: 'Results explorer', href: '#' },
260+
{ title: 'Analytics map', href: '#' },
261+
]),
262+
...renderGroup('Model management', [
263+
{ title: 'Trained models', href: '#' },
264+
]),
265+
...renderGroup('Data visualizer', [
266+
{ title: 'File', href: '#' },
267+
{ title: 'Data view', href: '#' },
268+
]),
253269
]}
254270
/>
255271
</EuiFlyoutBody>

0 commit comments

Comments
 (0)