Merge pull request #2795 from spotify/eide/storybook-categories

storybook: Group components in the sidebar
2020-10-08 15:30:11 +02:00
parent 88bd2452ac 5ea40dce6b
commit ba0e6fa4ea
27 changed files with 27 additions and 27 deletions
@@ -24,7 +24,7 @@ const Location = () => {
 };

 export default {
-  title: 'Button',
+  title: 'Inputs/Button',
  component: Button,
  decorators: [
    (storyFn: FunctionComponentFactory<{}>) => (
@@ -19,7 +19,7 @@ import { CodeSnippet } from './CodeSnippet';
 import { InfoCard } from '../../layout/InfoCard';

 export default {
-  title: 'CodeSnippet',
+  title: 'Data Display/CodeSnippet',
  component: CodeSnippet,
 };

@@ -18,7 +18,7 @@ import React from 'react';
 import { CopyTextButton } from '.';

 export default {
-  title: 'CopyTextButton',
+  title: 'Inputs/CopyTextButton',
  component: CopyTextButton,
 };

@@ -28,7 +28,7 @@ import {
 } from '@backstage/core-api';

 export default {
-  title: 'DismissableBanner',
+  title: 'Feedback/DismissableBanner',
  component: DismissableBanner,
 };

@@ -20,7 +20,7 @@ import { Button } from '@material-ui/core';
 import { MissingAnnotationEmptyState } from './MissingAnnotationEmptyState';

 export default {
-  title: 'EmptyState',
+  title: 'Feedback/EmptyState',
  component: EmptyState,
 };

@@ -21,7 +21,7 @@ const containerStyle = { width: 800, height: 400, margin: 20 };
 const opacityArray = [0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];

 export default {
-  title: 'HorizontalScrollGrid',
+  title: 'Layout/HorizontalScrollGrid',
  component: HorizontalScrollGrid,
 };

@@ -17,7 +17,7 @@ import React from 'react';
 import { Lifecycle } from './Lifecycle';

 export default {
-  title: 'Lifecycle',
+  title: 'Feedback/Lifecycle',
  component: Lifecycle,
 };

@@ -29,7 +29,7 @@ const Location = () => {
 };

 export default {
-  title: 'Link',
+  title: 'Navigation/Link',
  component: Link,
  decorators: [
    (storyFn: FunctionComponentFactory<{}>) => (
@@ -18,7 +18,7 @@ import React from 'react';
 import { Progress } from '.';

 export default {
-  title: 'Progress',
+  title: 'Feedback/Progress',
  component: Progress,
 };

@@ -20,7 +20,7 @@ import { Gauge } from './Gauge';
 const containerStyle = { width: 300 };

 export default {
-  title: 'Gauge',
+  title: 'Feedback/Gauge',
  component: Gauge,
 };

@@ -21,7 +21,7 @@ import { Grid } from '@material-ui/core';
 const linkInfo = { title: 'Go to XYZ Location', link: '#' };

 export default {
-  title: 'Progress Card',
+  title: 'Data Display/Progress Card',
  component: GaugeCard,
 };

@@ -20,7 +20,7 @@ import { LinearGauge } from './LinearGauge';
 const containerStyle = { width: 300 };

 export default {
-  title: 'LinearGauge',
+  title: 'Feedback/LinearGauge',
  component: LinearGauge,
 };

@@ -19,7 +19,7 @@ import { TextField } from '@material-ui/core';
 import { SimpleStepper, SimpleStepperStep } from '.';

 export default {
-  title: 'SimpleStepper',
+  title: 'Navigation/SimpleStepper',
  component: SimpleStepper,
 };

@@ -27,7 +27,7 @@ import { Table } from '../Table';
 import { InfoCard } from '../../layout/InfoCard';

 export default {
-  title: 'Status',
+  title: 'Feedback/Status',
  component: StatusOK,
 };

@@ -37,7 +37,7 @@ const metadata = {
 };

 export default {
-  title: 'Structured Metadata Table',
+  title: 'Data Display/Structured Metadata Table',
  component: StructuredMetadataTable,
 };

@@ -19,7 +19,7 @@ import { Table, SubvalueCell, TableColumn } from './';
 import { TableFilter } from './Table';

 export default {
-  title: 'Table',
+  title: 'Data Display/Table',
  component: Table,
 };

@@ -19,7 +19,7 @@ import { Tabs } from './Tabs';
 import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';

 export default {
-  title: 'Tabs',
+  title: 'Navigation/Tabs',
  component: Tabs,
 };

@@ -20,7 +20,7 @@ import { TrendLine } from './TrendLine';
 import { InfoCard } from '../../layout/InfoCard';

 export default {
-  title: 'TrendLine',
+  title: 'Data Display/TrendLine',
  component: TrendLine,
 };

@@ -19,7 +19,7 @@ import { WarningPanel } from './WarningPanel';
 import { Link, Button } from '@material-ui/core';

 export default {
-  title: 'Warning Panel',
+  title: 'Feedback/Warning Panel',
  component: WarningPanel,
 };

@@ -18,7 +18,7 @@ import React from 'react';
 import { Chip } from '@material-ui/core';

 export default {
-  title: 'Chip',
+  title: 'Data Display/Chip',
  component: Chip,
 };

@@ -19,7 +19,7 @@ import { HeaderLabel } from '../HeaderLabel';
 import { Page, pageTheme } from '../Page';

 export default {
-  title: 'Header',
+  title: 'Layout/Header',
  component: Header,
 };

@@ -20,7 +20,7 @@ import { Grid, Typography } from '@material-ui/core';
 const linkInfo = { title: 'Go to XYZ Location', link: '#' };

 export default {
-  title: 'Information Card',
+  title: 'Layout/Information Card',
  component: InfoCard,
 };

@@ -18,7 +18,7 @@ import { ItemCard } from '.';
 import { Grid } from '@material-ui/core';

 export default {
-  title: 'Item Card',
+  title: 'Layout/Item Card',
  component: ItemCard,
 };

@@ -36,7 +36,7 @@ import {
 import { Box, Typography, Link, Chip, Grid } from '@material-ui/core';

 export default {
-  title: 'Example Plugin',
+  title: 'Layout/Example Plugin',
  component: Page,
 };

@@ -28,7 +28,7 @@ import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
 import { MemoryRouter } from 'react-router-dom';

 export default {
-  title: 'Sidebar',
+  title: 'Layout/Sidebar',
  component: Sidebar,
  decorators: [
    (storyFn: () => JSX.Element) => (
@@ -20,7 +20,7 @@ import { Grid } from '@material-ui/core';
 const cardContentStyle = { height: 200, width: 500 };

 export default {
-  title: 'Tabbed Card',
+  title: 'Layout/Tabbed Card',
  component: TabbedCard,
  decorators: [
    (storyFn: () => JSX.Element) => (
@@ -33,7 +33,7 @@ import { Settings } from './Settings';
 import { SettingsPage } from './SettingsPage';

 export default {
-  title: 'Settings',
+  title: 'Plugins/user-settings/Settings',
  component: Settings,
  decorators: [
    (storyFn: () => JSX.Element) => (