feat: use css custom variables and gilroy fonts in stories

Also added some prettier ignores.

.prettierignore

@@ -3,6 +3,7 @@ www/
 loader/
 react/
 storybook-static/
+public/
 
 react-ts/*
 !react-ts/tsconfig.json
@@ -11,3 +12,5 @@ react-ts/*
 *.log
 *.lock
 node_modules
+*.md
+components.d.ts

.storybook/main.js

@@ -1,5 +1,38 @@
+
 module.exports = {
   stories: ['../src/**/*.stories.js'],
   addons: ['@storybook/addon-docs'],
+
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    config.module.rules.map((rule) => {
+      if (rule.oneOf) {
+        rule.oneOf = rule.oneOf.slice().map((subRule) => {
+          if (subRule.test instanceof RegExp && subRule.test.test('.scss')) {
+            return {
+              ...subRule,
+              use: [
+                ...subRule.use,
+                {
+                  loader: require.resolve('sass-resources-loader'),
+                  options: {
+                    resources: [
+                      path.resolve(__dirname, '../src/styles/index.scss')
+                    ]
+                  }
+                }
+              ],
+            }
+          }
+          return subRule;
+        });
+      }
+      return rule;
+    });
+    return config;
+  },
 }
 

.storybook/manager.js

@@ -3,7 +3,6 @@ import { addons } from '@storybook/addons'
 const theme = {
   brandTitle: 'Genero Design System',
   brandUrl: '/',
-  // Logo will show up after updating to 5.1.x
   brandImage: 'https://genero.fi/app/themes/genero/dist/images/logo_2cdda69a.svg',
 }
 

.storybook/preview-head.html

@@ -5,24 +5,36 @@
   font-family: Gilroy;
   font-style: normal;
   font-weight: 400;
-  src: url(https://genero.fi/app/themes/genero/dist/fonts/gilroy/webfonts/33FDC1_1_0_e9647863.eot);
+  src: url(/fonts/gilroy/33FDC1_1_0.eot);
   src:
-    url(https://genero.fi/app/themes/genero/dist/fonts/gilroy/webfonts/33FDC1_1_0_e9647863.eot?#iefix&v=1.0) format("embedded-opentype"),
-    url(https://genero.fi/app/themes/genero/dist/fonts/gilroy/webfonts/33FDC1_1_0_e7842f46.woff2) format("woff2"),
-    url(https://genero.fi/app/themes/genero/dist/fonts/gilroy/webfonts/33FDC1_1_0_10e08058.woff) format("woff"),
-    url(https://genero.fi/app/themes/genero/dist/fonts/gilroy/webfonts/33FDC1_1_0_d290a386.ttf) format("truetype");
+    url(/fonts/gilroy/33FDC1_2_0.eot?#iefix&v=1.0) format("embedded-opentype"),
+    url(/fonts/gilroy/33FDC1_2_0.woff2) format("woff2"),
+    url(/fonts/gilroy/33FDC1_2_0.woff) format("woff"),
+    url(/fonts/gilroy/33FDC1_2_0.ttf) format("truetype");
 }
 
 @font-face {
   font-family: Gilroy;
   font-style: normal;
-  font-weight: 900;
-  src: url(https://genero.fi/app/themes/genero/dist/fonts/gilroy/webfonts/33FDC1_7_0_8dc96945.eot);
+  font-weight: 600;
+  src: url(/fonts/gilroy/33FDC1_9_0.eot);
   src:
-    url(https://genero.fi/app/themes/genero/dist/fonts/gilroy/webfonts/33FDC1_7_0_8dc96945.eot?#iefix&v=1.0) format("embedded-opentype"),
-    url(https://genero.fi/app/themes/genero/dist/fonts/gilroy/webfonts/33FDC1_7_0_b67b72cc.woff2) format("woff2"),
-    url(https://genero.fi/app/themes/genero/dist/fonts/gilroy/webfonts/33FDC1_7_0_2ec551e5.woff) format("woff"),
-    url(https://genero.fi/app/themes/genero/dist/fonts/gilroy/webfonts/33FDC1_7_0_db404f04.ttf) format("truetype");
+    url(/fonts/gilroy/33FDC1_9_0.eot?#iefix&v=1.0) format("embedded-opentype"),
+    url(/fonts/gilroy/33FDC1_9_0.woff2) format("woff2"),
+    url(/fonts/gilroy/33FDC1_9_0.woff) format("woff"),
+    url(/fonts/gilroy/33FDC1_9_0.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: Gilroy;
+  font-style: normal;
+  font-weight: 800;
+  src: url(/fonts/gilroy/33FDC1_7_0.eot);
+  src:
+    url(/fonts/gilroy/33FDC1_7_0.eot?#iefix&v=1.0) format("embedded-opentype"),
+    url(/fonts/gilroy/33FDC1_7_0.woff2) format("woff2"),
+    url(/fonts/gilroy/33FDC1_7_0.woff) format("woff"),
+    url(/fonts/gilroy/33FDC1_7_0.ttf) format("truetype");
 }
 
 </style>

.storybook/preview.js

@@ -1,5 +1,8 @@
 /* global window */
 
+// NOTE: Use plain css for now. Switch to using Sass once someone get's it to load in storybook preview iframe.
+import '../src/styles/index.css'
+
 import { defineCustomElements } from "../dist/esm/loader.mjs"
 
 defineCustomElements()

README.md

@@ -114,6 +114,8 @@ Please add here, when you solve something you got stuck at.
 
 - In HTML, attributes need to use dash-case. In JSX you use camelCase.
 - When you add new components, it's best to restart build watcher because it usually breaks here.
+- Use `/public` folder for static assets in stories.
+- Use `/.storybook/preview-head.html` to inject code stories.
 
 ### Storybook roadmap