diff --git a/packages/core/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core/src/layout/Sidebar/Sidebar.stories.tsx
index 0710be4566..908fbba75c 100644
--- a/packages/core/src/layout/Sidebar/Sidebar.stories.tsx
+++ b/packages/core/src/layout/Sidebar/Sidebar.stories.tsx
@@ -26,8 +26,6 @@ import {
import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
import { MemoryRouter } from 'react-router-dom';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { Settings as SidebarSettings } from '@backstage/plugin-user-settings';
export default {
title: 'Sidebar',
@@ -56,18 +54,3 @@ export const SampleSidebar = () => (
);
-
-export const WithUserSettingsPlugin = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-);
diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
index c83bb221be..2c58144acc 100644
--- a/packages/storybook/.storybook/main.js
+++ b/packages/storybook/.storybook/main.js
@@ -5,6 +5,7 @@ module.exports = {
stories: [
'../../core/src/layout/**/*.stories.tsx',
'../../core/src/components/**/*.stories.tsx',
+ '../../../plugins/**/src/**/*.stories.tsx',
],
addons: [
'@storybook/addon-actions',
diff --git a/plugins/user-settings/src/components/SidebarWithSettings.stories.tsx b/plugins/user-settings/src/components/SidebarWithSettings.stories.tsx
new file mode 100644
index 0000000000..c3053e6851
--- /dev/null
+++ b/plugins/user-settings/src/components/SidebarWithSettings.stories.tsx
@@ -0,0 +1,81 @@
+/*
+ * 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: 'Settings',
+ component: Settings,
+ decorators: [
+ (storyFn: () => JSX.Element) => (
+ {storyFn()}
+ ),
+ ],
+};
+
+export const SidebarItem = () => (
+
+
+
+
+
+);
+
+const createConfig = () =>
+ ConfigReader.fromConfigs([
+ {
+ context: '',
+ data: {
+ auth: {
+ providers: {
+ // google: { development: {} },
+ },
+ },
+ },
+ },
+ ]);
+
+const config = createConfig();
+
+const apis = ApiRegistry.from([
+ [configApiRef, config],
+ [featureFlagsApiRef, new FeatureFlags()],
+ [appThemeApiRef, AppThemeSelector.createWithStorage([])],
+]);
+
+export const TheSettingsPage = () => (
+
+);