Merge pull request #852 from tblivet/feat/storybook_themes

Update Storybook theme and add v9 preview
PrestaShop · Aug 27, 2024 · 52399ce · 52399ce
2 parents 961e3c8 + 5a02471
commit 52399ce
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 8 deletions.
diff --git a/storybook/.storybook/main.ts b/storybook/.storybook/main.ts
@@ -71,9 +71,11 @@ const config: StorybookConfig = {
   managerHead: (head) => `
         ${head}
         <link rel="stylesheet" type="text/css" href="/ibm-plex-sans.css" />
+        <link rel="stylesheet" type="text/css" href="/theme.css" />
     `,
   previewBody: (body) => `
         <link rel="stylesheet" type="text/css" href="styles.css" />
+        <link rel="stylesheet" type="text/css" href="/theme.css" />
         ${body}
     `,
   staticDirs: [

diff --git a/storybook/.storybook/preview.ts b/storybook/.storybook/preview.ts
@@ -26,6 +26,7 @@
 import { Preview, twig } from "@sensiolabs/storybook-symfony-webpack5";
 
 const cssEntrypoints = {
+  "9.0.0": ["/9.0.0/default/theme.css"],
   "1.7.8.0": ["/1.7.8.0/default/theme.css"],
   "1.7.3.0": ["/1.7.3.0/default/theme.css"],
 };
@@ -44,6 +45,7 @@ const preview: Preview = {
       toolbar: {
         icon: "paintbrush",
         default: defaultBoTheme,
+        dynamicTitle: true,
         items: availableBoThemes.map((prestashopVersion) => ({
           value: prestashopVersion,
           title: `PrestaShop ${prestashopVersion}`,

diff --git a/storybook/.storybook/theme.ts b/storybook/.storybook/theme.ts
@@ -27,14 +27,43 @@ import { create } from "@storybook/theming/create";
 import logo from "../public/logo.png";
 
 export default create({
+  // Base
   base: "light",
 
-  colorPrimary: "#000000",
-  colorSecondary: "#000000",
-  appBg: "#FFF",
-  appBorderRadius: 0,
-  fontBase: '"IBM Plex Sans", "Open Sans", Helvetica, Verdana, sans-serif',
-
+  // Branding
   brandTitle: "Update assistant UI",
   brandImage: logo,
+  brandUrl: "https://github.com/PrestaShop/autoupgrade",
+  brandTarget: "_blank",
+
+  // Color
+  colorPrimary: "#1d1d1b",
+  colorSecondary: "#1d1d1b",
+
+  // UI
+  appBg: "#ffffff",
+  appContentBg: "#ffffff",
+  appPreviewBg: "#ffffff",
+  appBorderColor: "#dddddd",
+  appBorderRadius: 0,
+
+  // Typography
+  fontBase: "IBM Plex Sans, Open Sans, Helvetica, Verdana, sans-serif",
+
+  // Text
+  textColor: "#1d1d1b",
+  textInverseColor: "#ffffff",
+  textMutedColor: "#5e5e5e",
+
+  // Toolbar
+  barBg: "#ffffff",
+  barTextColor: "#1d1d1b",
+  barHoverColor: "#3f3f3d",
+  barSelectedColor: "#1d1d1b",
+
+  // Input
+  inputBg: "#ffffff",
+  inputBorder: "#dddddd",
+  inputBorderRadius: 0,
+  inputTextColor: "#1d1d1b",
 });
diff --git a/storybook/package-lock.json b/storybook/package-lock.json
diff --git a/storybook/public/logo.png b/storybook/public/logo.png
diff --git a/storybook/public/theme.css b/storybook/public/theme.css
@@ -0,0 +1,38 @@
+/************************************************** 
+  Update assistant theme
+**************************************************/
+
+/***** Storybook *****/
+
+#root {
+  /* Logo size */
+  .css-1rb1jn6 {
+    max-width: 100%;
+    max-height: 80px;
+  }
+
+  /* Search bar */
+  .css-wxp9lh {
+    height: 36px;
+    box-shadow: none;
+    border-radius: 0;
+    border: 1px solid #dddddd;
+  }
+  .css-1gaziuq {
+    top: 0;
+    height: 100%;
+  }
+}
+
+/***** Preview layout *****/
+#storybook-root {
+  #main {
+    padding: 0;
+  }
+
+  #content {
+    &.bootstrap {
+      padding: 0;
+    }
+  }
+}