hr-design-system-handlebars 0.50.7 → 0.50.8

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.50.8 (Wed Jul 27 2022)
+
+#### 🐛 Bug Fix
+
+- re-style buttons [#287](https://github.com/mumprod/hr-design-system-handlebars/pull/287) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v0.50.7 (Tue Jul 26 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1162,14 +1162,18 @@ video {
 .border-r {
   border-right-width: 1px;
 }
-.border-toplineColor {
-  border-color: #006dc1;
-  border-color: var(--color-topline);
-}
 .border-white {
   --tw-border-opacity: 1;
   border-color: rgba(255, 255, 255, var(--tw-border-opacity));
 }
+.border-grey-scorpion {
+  --tw-border-opacity: 1;
+  border-color: rgba(96, 96, 96, var(--tw-border-opacity));
+}
+.border-toplineColor {
+  border-color: #006dc1;
+  border-color: var(--color-topline);
+}
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgba(229, 231, 235, var(--tw-border-opacity));
@@ -1302,9 +1306,17 @@ video {
 .p-5 {
   padding: 1.25rem;
 }
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 .py-3\.5 {
   padding-top: 0.875rem;
@@ -1346,9 +1358,9 @@ video {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 .py-1\.5 {
   padding-top: 0.375rem;
@@ -1362,9 +1374,9 @@ video {
   padding-left: 0px;
   padding-right: 0px;
 }
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
+.py-px {
+  padding-top: 1px;
+  padding-bottom: 1px;
 }
 .pt-px {
   padding-top: 1px;
@@ -1405,11 +1417,11 @@ video {
 .pr-4 {
   padding-right: 1rem;
 }
-.pb-7 {
-  padding-bottom: 1.75rem;
+.pb-10 {
+  padding-bottom: 2.5rem;
 }
-.pt-7 {
-  padding-top: 1.75rem;
+.pt-8 {
+  padding-top: 2rem;
 }
 .pt-6 {
   padding-top: 1.5rem;
@@ -1526,14 +1538,6 @@ video {
   --tw-text-opacity: 1;
   color: rgba(39, 107, 158, var(--tw-text-opacity));
 }
-.text-toplineColor {
-  color: #006dc1;
-  color: var(--color-topline);
-}
-.text-blue-700 {
-  --tw-text-opacity: 1;
-  color: rgba(29, 78, 216, var(--tw-text-opacity));
-}
 .text-white {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -1542,6 +1546,14 @@ video {
   --tw-text-opacity: 1;
   color: rgba(96, 96, 96, var(--tw-text-opacity));
 }
+.text-toplineColor {
+  color: #006dc1;
+  color: var(--color-topline);
+}
+.text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgba(29, 78, 216, var(--tw-text-opacity));
+}
 .text-blue-congress {
   --tw-text-opacity: 1;
   color: rgba(0, 82, 147, var(--tw-text-opacity));
@@ -2481,6 +2493,18 @@ video {
 .last-of-type\:hidden:last-of-type {
   display: none;
 }
+.hover\:border-toplineColor:hover {
+  border-color: #006dc1;
+  border-color: var(--color-topline);
+}
+.hover\:border-blue-congress:hover {
+  --tw-border-opacity: 1;
+  border-color: rgba(0, 82, 147, var(--tw-border-opacity));
+}
+.hover\:bg-white:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
 .hover\:bg-slate-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
@@ -2495,14 +2519,14 @@ video {
 .hover\:fill-orange-spicyCarrot:hover {
   fill: #d34600;
 }
-.hover\:text-white:hover {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
 .hover\:text-toplineColor:hover {
   color: #006dc1;
   color: var(--color-topline);
 }
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
 .hover\:underline:hover {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;

package/dist/views/components/button/button_pseudo.hbs

@@ -1,3 +1,5 @@
-{{#>components/base/link css="px-2 border text-toplineColor border-toplineColor font-heading hover:underline" }}
-    {{_linkTitle}}
+{{#>components/base/link }}
+    <span class="px-4 py-2.5 border {{inline-switch _color '["white","grey"]' '["text-white border-white","text-grey-scorpion border-grey-scorpion","text-toplineColor border-toplineColor"]'}} font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor">
+        {{_linkTitle}}
+    </span>
 {{/components/base/link}}

package/dist/views/components/teaser/tabbox/group_tabbox.hbs

@@ -1,6 +1,6 @@
 <section 
     x-show="tab === '{{this.groupTitle}}'"
-    class="pb-7 {{#if this.isFirstTeaser}}active{{/if}}"
+    class="pb-10"
 >
     {{~#if this.hasGroupTitle~}}
         <h3 class="sr-only">
@@ -19,7 +19,7 @@
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
     </div>
     {{~#if this.link~}}
-        <div class="flex justify-center pt-7">
+        <div class="flex justify-center pt-8">
             {{~> components/button/button_pseudo _linkTitle=(loca "group_tabbed_more" this.title) ~}}
         </div>
     {{~/if~}}

package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -1,4 +1,3 @@
-</div>
 <div 
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
   class="grid grid-cols-12 pt-6 md:pt-7 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md:rounded-br-3xl col-main gap-x-6 gap-y-6"
@@ -7,10 +6,10 @@
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">
       {{~#each this.tabbedGroup~}}
         <button  onclick="window.location.href='#tgp{{@index}}';"
-                 :class="tab === '{{this.title}}' ? 'text-white bg-blue-congress' : 'bg-white text-blue-congress'" 
+                 :class="tab === '{{this.title}}' ? 'text-white bg-blue-congress border-blue-congress' : 'bg-white text-blue-congress border-white hover:border-blue-congress'" 
                  x-effect="$el.removeAttribute('onclick')"
                  x-on:click.prevent="tab = '{{this.title}}'"  
-                 class="text-base font-heading py-1 px-2 m-1.5" 
+                 class="border text-base font-heading py-px px-2 m-1.5" 
                  type="button" 
                  role="tab"
         >
@@ -20,5 +19,4 @@
     </div>
     {{~> components/teaser/teaser_logic/teaser_logic ~}}
   </section>
-</div>
-<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
+</div>

package/dist/views/components/teaser/teaser_poster.hbs

@@ -8,7 +8,7 @@
         </div>
     </div>
     {{#>components/base/link css="absolute flex w-full h-full justify-center" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
-        <div class="self-end px-2 {{inline-switch teaserSize '["33","50"]' '["mb-8","mb-8 md:mb-16"]'}} text-white border border-white font-heading">{{this.link.readMoreText.readMoreLong}}</div>
+        <div class="self-end {{inline-switch teaserSize '["33","50"]' '["mb-8 px-2","mb-8 md:mb-16 px-4 py-2.5"]'}} text-white border border-white font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor">{{this.link.readMoreText.readMoreLong}}</div>
     {{/components/base/link}} 
     <span class="sr-only">{{this.link.readMoreText.readMoreLong}}: {{this.title}}</span> 
 </article>

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.50.7",
+    "version": "0.50.8",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

package/src/stories/views/components/button/button_pseudo.hbs

@@ -1,3 +1,5 @@
-{{#>components/base/link css="px-2 border text-toplineColor border-toplineColor font-heading hover:underline" }}
-    {{_linkTitle}}
+{{#>components/base/link }}
+    <span class="px-4 py-2.5 border {{inline-switch _color '["white","grey"]' '["text-white border-white","text-grey-scorpion border-grey-scorpion","text-toplineColor border-toplineColor"]'}} font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor">
+        {{_linkTitle}}
+    </span>
 {{/components/base/link}}

package/src/stories/views/components/teaser/tabbox/group_tabbox.hbs

@@ -1,6 +1,6 @@
 <section 
     x-show="tab === '{{this.groupTitle}}'"
-    class="pb-7 {{#if this.isFirstTeaser}}active{{/if}}"
+    class="pb-10"
 >
     {{~#if this.hasGroupTitle~}}
         <h3 class="sr-only">
@@ -19,7 +19,7 @@
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
     </div>
     {{~#if this.link~}}
-        <div class="flex justify-center pt-7">
+        <div class="flex justify-center pt-8">
             {{~> components/button/button_pseudo _linkTitle=(loca "group_tabbed_more" this.title) ~}}
         </div>
     {{~/if~}}

package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs

@@ -1,4 +1,3 @@
-</div>
 <div 
   x-data="{ tab: '{{this.tabbedGroup.[0].title}}' }"
   class="grid grid-cols-12 pt-6 md:pt-7 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md:rounded-br-3xl col-main gap-x-6 gap-y-6"
@@ -7,10 +6,10 @@
     <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">
       {{~#each this.tabbedGroup~}}
         <button  onclick="window.location.href='#tgp{{@index}}';"
-                 :class="tab === '{{this.title}}' ? 'text-white bg-blue-congress' : 'bg-white text-blue-congress'" 
+                 :class="tab === '{{this.title}}' ? 'text-white bg-blue-congress border-blue-congress' : 'bg-white text-blue-congress border-white hover:border-blue-congress'" 
                  x-effect="$el.removeAttribute('onclick')"
                  x-on:click.prevent="tab = '{{this.title}}'"  
-                 class="text-base font-heading py-1 px-2 m-1.5" 
+                 class="border text-base font-heading py-px px-2 m-1.5" 
                  type="button" 
                  role="tab"
         >
@@ -20,5 +19,4 @@
     </div>
     {{~> components/teaser/teaser_logic/teaser_logic ~}}
   </section>
-</div>
-<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
+</div>

package/src/stories/views/components/teaser/tabbox/teaser_tabbox.stories.mdx

@@ -15,10 +15,8 @@ import tabboxData from '../fixtures/teaser_tabbox.json'
         decorators={[
         (Story) => {
             return `<div class="grid my-5 grid-page">
-                    <div>
                         ${Story()}
-                    </div> 
-                </div>`
+                    </div>`
         },
     ]}
         />

package/src/stories/views/components/teaser/teaser_poster.hbs

@@ -8,7 +8,7 @@
         </div>
     </div>
     {{#>components/base/link css="absolute flex w-full h-full justify-center" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
-        <div class="self-end px-2 {{inline-switch teaserSize '["33","50"]' '["mb-8","mb-8 md:mb-16"]'}} text-white border border-white font-heading">{{this.link.readMoreText.readMoreLong}}</div>
+        <div class="self-end {{inline-switch teaserSize '["33","50"]' '["mb-8 px-2","mb-8 md:mb-16 px-4 py-2.5"]'}} text-white border border-white font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor">{{this.link.readMoreText.readMoreLong}}</div>
     {{/components/base/link}} 
     <span class="sr-only">{{this.link.readMoreText.readMoreLong}}: {{this.title}}</span> 
 </article>