Merge branch 'main' into jumbotron

Author: abe-m1

.storybook/main.js

@@ -1,38 +1,41 @@
 const path = require('path');
-const custom = require('./webpack.config.js')
+const custom = require('./webpack.config.js');
 
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   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.
 
     // allow for css modules -- overriding storybook default
     config.module.rules = config.module.rules.filter(
-      rule => rule.test.toString() !== '/\\.css$/'
+      (rule) => rule.test.toString() !== '/\\.css$/'
     );
     config.module.rules.push({
       test: /\.css$/,
-      use: ['style-loader', 'css-loader'],
+      use: ['style-loader', 'css-loader']
     });
 
     //allow for sass support
     config.module.rules.push({
       test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'sass-loader'],
-      include: path.resolve(__dirname, '../'),
+      use: [
+        'style-loader',
+        'css-loader',
+        'sass-loader',
+        {
+          loader: require.resolve('sass-resources-loader'),
+          options: {
+            resources: path.resolve(__dirname, '../src/global/_global.scss')
+          }
+        }
+      ],
+      include: path.resolve(__dirname, '../')
     });
 
-
     // Return the altered config
     return config;
-  },
-}
+  }
+};

package.json

@@ -75,6 +75,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.1",
     "@popperjs/core": "^2.5.4",
-    "@types/jest": "^26.0.18"
+    "@types/jest": "^26.0.18",
+    "sass-resources-loader": "^2.1.1"
   }
 }

src/components/Progress/Progress.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import './progress.css';
+import './progress.scss';
 
 interface ProgressProps {
   children?: string;

src/components/Progress/progress.css renamed to src/components/Progress/progress.scss

@@ -1,14 +1,13 @@
 .progress {
   width: 100%;
-  background-color: #efefef;
+  background-color: $lightGrey;
   border-radius: 4px;
   position: relative;
 }
 
 .progress-bar {
   /* display: block; */
   height: 100%;
-
   position: relative;
   overflow: hidden;
   /* line-height: 100%;
@@ -19,7 +18,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: $fontFamily;
 }
 
 .progress-bar:first-child {

src/global/_global.scss

@@ -0,0 +1,5 @@
+// Variables
+
+$fontFamily: Arial, Helvetica, sans-serif;
+
+$lightGrey: #efefef;