From aeffe49ad3d9f39df7146ebe11b0c14acdce338b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Wed, 27 May 2020 10:53:59 +0200
Subject: [PATCH] Add Stories for Header variants (#1027)

* Add Stories for Header variants

* Set service type
---
 .../core/src/layout/Header/Header.stories.tsx | 94 +++++++++++++++++++
 packages/core/src/layout/Header/Header.tsx    |  2 +-
 .../core/src/layout/Page/PageThemeProvider.ts | 15 +++
 .../ComponentPage/ComponentPage.tsx           |  4 +-
 .../components/PluginHeader/PluginHeader.tsx  |  2 +-
 5 files changed, 113 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/src/layout/Header/Header.stories.tsx

diff --git a/packages/core/src/layout/Header/Header.stories.tsx b/packages/core/src/layout/Header/Header.stories.tsx
new file mode 100644
index 0000000000..e1198d7b65
--- /dev/null
+++ b/packages/core/src/layout/Header/Header.stories.tsx
@@ -0,0 +1,94 @@
+/*
+ * 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 Header from '.';
+import HeaderLabel from '../HeaderLabel';
+import Page, { pageTheme } from '../Page';
+
+export default {
+  title: 'Header',
+  component: Header,
+};
+
+const labels = (
+  <>
+    <HeaderLabel label="Owner" value="players" />
+    <HeaderLabel label="Lifecycle" value="Production" />
+    <HeaderLabel label="Tier" value="Level 1" />
+  </>
+);
+
+export const Home = () => (
+  <Page theme={pageTheme.home}>
+    <Header title="Start/Home Page" type="home">
+      {labels}
+    </Header>
+  </Page>
+);
+
+export const HomeWithSubtitle = () => (
+  <Header title="Start/Home Page" subtitle="This is a subtitle">
+    {labels}
+  </Header>
+);
+
+export const Tool = () => (
+  <Page theme={pageTheme.tool}>
+    <Header title="Stand-alone tool" type="tool">
+      {labels}
+    </Header>
+  </Page>
+);
+
+export const Service = () => (
+  <Page theme={pageTheme.service}>
+    <Header title="Service component page" type="service">
+      {labels}
+    </Header>
+  </Page>
+);
+
+export const Website = () => (
+  <Page theme={pageTheme.website}>
+    <Header title="Website component page" type="website">
+      {labels}
+    </Header>
+  </Page>
+);
+
+export const Library = () => (
+  <Page theme={pageTheme.library}>
+    <Header title="Library component page" type="library">
+      {labels}
+    </Header>
+  </Page>
+);
+
+export const App = () => (
+  <Page theme={pageTheme.app}>
+    <Header title="App component page" type="app">
+      {labels}
+    </Header>
+  </Page>
+);
+
+export const Other = () => (
+  <Page theme={pageTheme.library}>
+    <Header title="Other/generic component page" type="other">
+      {labels}
+    </Header>
+  </Page>
+);
diff --git a/packages/core/src/layout/Header/Header.tsx b/packages/core/src/layout/Header/Header.tsx
index 9fc4807733..47fcc324a7 100644
--- a/packages/core/src/layout/Header/Header.tsx
+++ b/packages/core/src/layout/Header/Header.tsx
@@ -148,7 +148,7 @@ const SubtitleFragment: FC<SubtitleFragmentProps> = ({ classes, subtitle }) => {
   }
 
   return (
-    <Typography className={classes.subtitle} variant="subtitle1">
+    <Typography className={classes.subtitle} variant="subtitle2">
       {subtitle}
     </Typography>
   );
diff --git a/packages/core/src/layout/Page/PageThemeProvider.ts b/packages/core/src/layout/Page/PageThemeProvider.ts
index a767033029..9c31fcb4ac 100644
--- a/packages/core/src/layout/Page/PageThemeProvider.ts
+++ b/packages/core/src/layout/Page/PageThemeProvider.ts
@@ -89,4 +89,19 @@ export const pageTheme: Record<string, PageTheme> = {
   tool: {
     gradient: gradients.purpleBlue,
   },
+  service: {
+    gradient: gradients.green,
+  },
+  website: {
+    gradient: gradients.purple,
+  },
+  library: {
+    gradient: gradients.sunset,
+  },
+  other: {
+    gradient: gradients.brown,
+  },
+  app: {
+    gradient: gradients.redOrange,
+  },
 };
diff --git a/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx b/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx
index 0cf7017173..a1e33597a2 100644
--- a/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx
+++ b/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx
@@ -83,8 +83,8 @@ const ComponentPage: FC<ComponentPageProps> = ({
   };
 
   return (
-    <Page theme={pageTheme.home}>
-      <Header title={catalogRequest?.value?.name || 'Catalog'}>
+    <Page theme={pageTheme.service}>
+      <Header title={catalogRequest?.value?.name || 'Catalog'} type="service">
         <ComponentContextMenu onUnregisterComponent={showRemovalDialog} />
       </Header>
       {confirmationDialogOpen && catalogRequest.value && (
diff --git a/plugins/circleci/src/components/PluginHeader/PluginHeader.tsx b/plugins/circleci/src/components/PluginHeader/PluginHeader.tsx
index 4bab4b5921..9f94cff480 100644
--- a/plugins/circleci/src/components/PluginHeader/PluginHeader.tsx
+++ b/plugins/circleci/src/components/PluginHeader/PluginHeader.tsx
@@ -22,7 +22,7 @@ import SettingsIcon from '@material-ui/icons/Settings';
 import { useSettings } from '../../state';
 
 export type Props = { title?: string };
-export const PluginHeader: FC<Props> = ({ title = 'Circle CI' }) => {
+export const PluginHeader: FC<Props> = ({ title = 'CircleCI' }) => {
   const [, { showSettings }] = useSettings();
   const location = useLocation();
   const notRoot = !location.pathname.match(/\/circleci\/?$/);