hr-design-system-handlebars 0.36.2 → 0.37.0

package/.storybook/main.js

@@ -11,7 +11,14 @@ module.exports = {
     addons: [
         '@storybook/addon-links',
         '@storybook/addon-essentials',
-        '@storybook/addon-postcss',
+        {
+            name: '@storybook/addon-postcss',
+            options: {
+                postcssLoaderOptions: {
+                    implementation: require('postcss'),
+                },
+            },
+        },
         '@whitespace/storybook-addon-html',
         '@storybook/addon-a11y',
         'storybook-conditional-toolbar-selector',
@@ -26,6 +33,7 @@ module.exports = {
         config.resolve.alias = {
             ...config.resolve.alias,
             components: path.resolve(__dirname, '../src/stories/views/components'),
+            tailwind$: path.resolve(__dirname, '../src/assets/tailwind.css'),
             hrQueryNew$: path.resolve(
                 __dirname,
                 '../src/stories/views/components/generic/hrQueryNew.js'
@@ -39,12 +47,13 @@ module.exports = {
                 '../build/webpack/feature-loader/initializer/loader.js'
             ),
         }
+
         config.module.rules.push(
             {
                 test: /\.handlebars|hbs$/,
                 loader: 'handlebars-loader',
                 include: path.resolve(__dirname, '../'),
-                query: {
+                options: {
                     helperDirs: [path.resolve(__dirname, '../build/helpers')],
                     partialDirs: [path.resolve(__dirname, '../src/stories/views')],
                 },

package/.storybook/preview.js

@@ -1,9 +1,10 @@
-import '../src/assets/tailwind.css'
+import '!style-loader!css-loader!postcss-loader!tailwind'
+import 'tailwind'
 
 import hrDesignsystemDark from './HRDesignsystemDark'
 import hrDesignsystemLight from './HRDesignsystemLight'
 import { withThemeDecorator } from './withThemeDecorator'
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 
 import Initializer from '../build/webpack/feature-loader/initializer/initializer'
 import loadFeature from '../build/webpack/feature-loader/initializer/loader'
@@ -24,7 +25,7 @@ if (process.env.NODE_ENV !== 'production') {
 export const parameters = {
     viewport: {
         viewports: INITIAL_VIEWPORTS,
-      },
+    },
     backgrounds: {
         default: 'white',
         values: [
@@ -43,7 +44,7 @@ export const parameters = {
             cellAmount: 8,
             offsetX: 0, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
             offsetY: 0, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
-          }
+        },
     },
     // Storybook a11y addon configuration
     a11y: {

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.37.0 (Wed Mar 09 2022)
+
+#### 🚀 Enhancement
+
+- Build/tailwind [#184](https://github.com/mumprod/hr-design-system-handlebars/pull/184) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.36.2 (Wed Mar 09 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -316,7 +316,7 @@
 
 /*! purgecss end ignore */
 
-/*! tailwindcss v3.0.13 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -1283,7 +1283,9 @@ Ensure the default browser behavior of the `hidden` attribute.
         max-width: 1024px;
     }
 }
-[x-cloak] { display: none !important; }
+[x-cloak] {
+        display: none !important;
+    }
 .btn {
     display: inline-block;
     cursor: pointer;
@@ -2236,14 +2238,14 @@ Ensure the default browser behavior of the `hidden` attribute.
 
 .hide-scroll-bar {
     -ms-overflow-style: none;
-        scrollbar-width: none;
-        scroll-behavior: smooth;
-  }
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+}
 .hide-scroll-bar::-webkit-scrollbar {
     display: none;
-  }
+}
 
-.arrow-left-background{
+.arrow-left-background {
     background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgb(255, 255, 255)));
     background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
     -webkit-transition: -webkit-transform 150ms ease-in-out 0s;
@@ -2251,7 +2253,7 @@ Ensure the default browser behavior of the `hidden` attribute.
     transition: transform 150ms ease-in-out 0s;
     transition: transform 150ms ease-in-out 0s, -webkit-transform 150ms ease-in-out 0s;
 }
-.arrow-right-background{
+.arrow-right-background {
     background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgb(255, 255, 255)));
     background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
     -webkit-transition: -webkit-transform 150ms ease-in-out 0s;
@@ -2806,4 +2808,4 @@ Ensure the default browser behavior of the `hidden` attribute.
     .tablet\:first\:border-l:first-child {
         border-left-width: 1px;
     }
-}
+}

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.36.2",
+    "version": "0.37.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",
@@ -33,14 +33,14 @@
     "devDependencies": {
         "@babel/cli": "^7.13.16",
         "@babel/core": "^7.12.10",
-        "@storybook/addon-a11y": "^6.4.9",
-        "@storybook/addon-actions": "^6.4.9",
-        "@storybook/addon-essentials": "^6.4.9",
-        "@storybook/addon-links": "^6.4.9",
+        "@storybook/addon-a11y": "^6.4.19",
+        "@storybook/addon-actions": "^6.4.19",
+        "@storybook/addon-essentials": "^6.4.19",
+        "@storybook/addon-links": "^6.4.19",
         "@storybook/addon-postcss": "^2.0.0",
-        "@storybook/addons": "^6.4.9",
-        "@storybook/html": "^6.4.9",
-        "@storybook/theming": "^6.4.9",
+        "@storybook/addons": "^6.4.19",
+        "@storybook/html": "^6.4.19",
+        "@storybook/theming": "^6.4.19",
         "@whitespace/storybook-addon-html": "^5.0.0",
         "auto": "^10.26.0",
         "autoprefixer": "^10.4.2",
@@ -66,7 +66,7 @@
         "prettier": "^2.2.1",
         "rimraf": "^3.0.2",
         "storybook-conditional-toolbar-selector": "^1.0.3",
-        "tailwindcss": "^3.0.13",
+        "tailwindcss": "^3.0.23",
         "tailwindcss-important": "^1.0.0"
     },
     "dependencies": {

package/src/assets/tailwind.css

@@ -363,39 +363,43 @@
     }
 
     .-currentBrand {
-        @apply lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-white lg:before:border-b-8 lg:before:border-blue-congress lg:before:mt-6
+        @apply lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-white lg:before:border-b-8 lg:before:border-blue-congress lg:before:mt-6;
     }
     .-currentService {
-        @apply before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12 
+        @apply before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12;
     }
     .-currentSection {
-        @apply  before:w-0 before:h-0 before:mr-2 before:-ml-4 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0  lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-8 
+        @apply before:w-0 before:h-0 before:mr-2 before:-ml-4 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0  lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-8;
     }
     .-warnung {
         @apply text-red-600 !important;
-        @apply fill-black
+        @apply fill-black;
     }
 
-    .-video-podcast, .-weather, .-traffic {
-        @apply fill-white
+    .-video-podcast,
+    .-weather,
+    .-traffic {
+        @apply fill-white;
     }
-    .link-focus-inset{
-        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-grey-scorpion/50
+    .link-focus-inset {
+        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-grey-scorpion/50;
     }
-    .link-focus{
-        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-grey-scorpion/50
+    .link-focus {
+        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-grey-scorpion/50;
     }
-    .link-focus-inset-white{
-        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-white/50
+    .link-focus-inset-white {
+        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-white/50;
     }
-    .link-focus-white{
-        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-white/50
+    .link-focus-white {
+        @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-white/50;
     }
 }
 
 @layer components {
-    [x-cloak] { display: none !important; }
-   
+    [x-cloak] {
+        display: none !important;
+    }
+
     .btn {
         @apply inline-block font-sans font-bold leading-none cursor-pointer rounded-3xl;
     }
@@ -426,25 +430,25 @@
 }
 
 @layer utilities {
-    .placeholder-text-xs::placeholder{
-      @apply text-xs
+    .placeholder-text-xs::placeholder {
+        @apply text-xs;
     }
 }
 
 .hide-scroll-bar {
     -ms-overflow-style: none;
-        scrollbar-width: none;
-        scroll-behavior: smooth;
-  }
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+}
 .hide-scroll-bar::-webkit-scrollbar {
     display: none;
-  }
+}
 
-.arrow-left-background{
+.arrow-left-background {
     background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
     transition: transform 150ms ease-in-out 0s;
 }
-.arrow-right-background{
+.arrow-right-background {
     background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
     transition: transform 150ms ease-in-out 0s;
-}
+}