[storybook] Re-order components (#2847)

packages/core/src/components/CheckboxTree/CheckboxTree.stories.tsx

@@ -60,7 +60,7 @@ const CHECKBOX_TREE_ITEMS = [
 ];
 
 export default {
-  title: 'CheckboxTree',
+  title: 'Inputs/CheckboxTree',
   component: CheckboxTree,
 };
 

packages/core/src/components/Select/Select.stories.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { Select } from '.';
 
 export default {
-  title: 'Select',
+  title: 'Inputs/Select',
   component: Select,
 };
 

packages/core/src/layout/ItemCard/ItemCard.stories.tsx

@@ -24,7 +24,7 @@ export default {
 
 export const Default = () => (
   <Grid container spacing={4}>
-    <Grid item xs={6} sm={4} md={2}>
+    <Grid item xs={3}>
       <ItemCard
         title="Item Card"
         description="This is the description of an Item Card"
@@ -33,7 +33,7 @@ export const Default = () => (
         onClick={() => {}}
       />
     </Grid>
-    <Grid item xs={6} sm={4} md={2}>
+    <Grid item xs={3}>
       <ItemCard
         title="Item Card"
         description="This is the description of an Item Card"
@@ -47,7 +47,7 @@ export const Default = () => (
 
 export const Tags = () => (
   <Grid container spacing={4}>
-    <Grid item xs={6} sm={4} md={2}>
+    <Grid item xs={3}>
       <ItemCard
         title="Item Card"
         description="This is a Item Card"
@@ -55,7 +55,7 @@ export const Tags = () => (
         label="Button"
       />
     </Grid>
-    <Grid item xs={6} sm={4} md={2}>
+    <Grid item xs={3}>
       <ItemCard
         title="Item Card"
         description="This is a Item Card"

packages/core/src/layout/Page/Page.stories.tsx

@@ -36,7 +36,7 @@ import {
 import { Box, Typography, Link, Chip, Grid } from '@material-ui/core';
 
 export default {
-  title: 'Layout/Example Plugin',
+  title: 'Plugins/Examples',
   component: Page,
 };
 

packages/storybook/.storybook/preview.js

@@ -28,18 +28,7 @@ addParameters({
 export const parameters = {
   options: {
     storySort: {
-      order: [
-        'Example Plugin',
-        'Header',
-        'Sidebar',
-        'Tabs',
-        'Information Card',
-        'Tabbed Card',
-        'Table',
-        'Status',
-        'Trendline',
-        'Progress Card',
-      ],
+      order: ['Plugins', 'Layout', 'Navigation'],
     },
   },
 };

plugins/user-settings/src/components/SidebarWithSettings.stories.tsx

@@ -1,79 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import {
-  ApiProvider,
-  ApiRegistry,
-  appThemeApiRef,
-  AppThemeSelector,
-  configApiRef,
-  ConfigReader,
-  FeatureFlags,
-  featureFlagsApiRef,
-  Sidebar,
-  SidebarDivider,
-  SidebarSpace,
-} from '@backstage/core';
-import { MemoryRouter } from 'react-router';
-import { Settings } from './Settings';
-import { SettingsPage } from './SettingsPage';
-
-export default {
-  title: 'Plugins/user-settings/Settings',
-  component: Settings,
-  decorators: [
-    (storyFn: () => JSX.Element) => (
-      <MemoryRouter initialEntries={['/']}>{storyFn()}</MemoryRouter>
-    ),
-  ],
-};
-
-export const SidebarItem = () => (
-  <Sidebar>
-    <SidebarSpace />
-    <SidebarDivider />
-    <Settings />
-  </Sidebar>
-);
-
-const createConfig = () =>
-  ConfigReader.fromConfigs([
-    {
-      context: '',
-      data: {
-        auth: {
-          providers: {},
-        },
-      },
-    },
-  ]);
-
-const config = createConfig();
-
-const apis = ApiRegistry.from([
-  [configApiRef, config],
-  [featureFlagsApiRef, new FeatureFlags()],
-  [appThemeApiRef, AppThemeSelector.createWithStorage([])],
-]);
-
-export const TheSettingsPage = () => (
-  <div style={{ border: '1px solid #ddd' }}>
-    <ApiProvider apis={apis}>
-      <SettingsPage />
-    </ApiProvider>
-  </div>
-);