Storybook upgrade (#992)

* Upgrading minor and patch versions

* Upgrading major css-loader, sass-loader, stylelint

* Upgrade storybook to version 8

* Remove deprecated addons package, unnecessary unused story

* Remove deprecated CSS lint rules.

Should probably use Prettier in this project instead.

.storybook/main.js

@@ -1,53 +1,49 @@
 const path = require('path');
 
 module.exports = {
-    stories: ['../**/*.story.jsx'],
-    addons: [
-        '@storybook/addon-links'
-    ],
-    staticDirs: ['../src/media'],
+  stories: ['../**/*.story.jsx'],
 
-    webpackFinal: config => {
-        const fileLoaderRule = config.module.rules.find(
-            (rule) => rule.test && rule.test.test(".svg")
-        );
-        fileLoaderRule.exclude = /\.svg$/;
-        config.module.rules.push(
-            {
-				include: path.resolve(__dirname, '../'),
-				test: /\.(s*)css$/i,
-                sideEffects: true,
-				use: [
-					'style-loader',
-					'css-loader',
-                    'sass-loader'
-				],
-			},
-            {
-                test: /\.(png|jpg|gif|woff|ttf)$/,
-				use: [
-					'file-loader',
-				],
-			},
-			{
-				test: /\.svg$/,
-				use: ['@svgr/webpack'],
-			},
-        );
-        return config;
-    },
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-webpack5-compiler-babel',
+  ],
 
-    resolve: {
-		extensions: ['.jsx', '.js'],
-	},
+  staticDirs: ['../src/media'],
 
-    features: {
-        postcss: false,
-    },
+  webpackFinal: (config) => {
+    const fileLoaderRule = config.module.rules.find(
+      (rule) => rule.test && rule.test.test('.svg')
+    );
+    fileLoaderRule.exclude = /\.svg$/;
+    config.module.rules.push(
+      {
+        include: path.resolve(__dirname, '../'),
+        test: /\.(s*)css$/i,
+        sideEffects: true,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(png|jpg|gif|woff|ttf)$/,
+        use: ['file-loader'],
+      },
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      }
+    );
+    return config;
+  },
 
-    framework: {
-        name: '@storybook/react-webpack5',
-        options: {}
-    },
-};
+  resolve: {
+    extensions: ['.jsx', '.js'],
+  },
+
+  features: {
+    postcss: false,
+  },
 
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+};

.stylelintrc

@@ -6,27 +6,11 @@
     "color-no-hex": true,
     "comment-no-empty": true,
     "declaration-block-no-duplicate-properties": true,
-    "declaration-block-semicolon-newline-after": "always-multi-line",
-    "declaration-colon-space-after": "always",
-    "declaration-colon-space-before": "never",
     "declaration-empty-line-before": "never",
     "length-zero-no-unit": true,
-    "no-extra-semicolons": true,
-    "max-empty-lines": 1,
     "no-descending-specificity": null,
-    "number-leading-zero": "never",
-    "number-no-trailing-zeros": true,
-    "property-case": "lower",
     "rule-empty-line-before": "always-multi-line",
-    "selector-combinator-space-after": "always",
-    "selector-combinator-space-before": "always",
-    "selector-list-comma-newline-after": "never-multi-line",
-    "selector-list-comma-space-after": "always",
-    "selector-list-comma-space-before": "never",
-    "selector-pseudo-class-case": "lower",
-    "selector-pseudo-element-case": "lower",
     "selector-type-case": "lower",
     "selector-type-no-unknown": [true, {"ignore":  ["default-namespace"]}],
-    "value-list-comma-newline-after": "never-multi-line"
   }
 }