@asantemedia-org/leybold-design-system 1.0.5 → 1.0.7

package/dist/index.scss

@@ -36,18 +36,26 @@
   border-color: #000000;
 }
 .Button-module__button--secondary___lD5E3 {
-  color: white;
-  background-color: #546672;
-  border-color: #546672;
+  color: #e2001a;
+  background-color: white;
+  border-color: #e2001a;
 }
 .Button-module__button--secondary___lD5E3:hover:not(.Button-module__button--disabled___IuOY8) {
-  background-color: rgb(62.3636363636, 75.7272727273, 84.6363636364);
-  border-color: rgb(62.3636363636, 75.7272727273, 84.6363636364);
+  background-color: #4a4e54;
+  border-color: #4a4e54;
+  color: white;
 }
 .Button-module__button--secondary___lD5E3:active:not(.Button-module__button--disabled___IuOY8) {
   background-color: rgb(51.5454545455, 62.5909090909, 69.9545454545);
   border-color: rgb(51.5454545455, 62.5909090909, 69.9545454545);
 }
+.Button-module__button--secondary___lD5E3:focus-visible:not(.Button-module__button--disabled___IuOY8) {
+  background-color: #4a4e54;
+  border-color: #4a4e54;
+  color: white;
+  outline: 1px solid #000000;
+  outline-offset: 2px;
+}
 .Button-module__button--outline___wB6-g {
   color: #e2001a;
   background-color: transparent;
@@ -72,6 +80,11 @@
 .Button-module__button--text___iZIMo:active:not(.Button-module__button--disabled___IuOY8) {
   background-color: rgba(226, 0, 26, 0.2);
 }
+.Button-module__button--extra-small___R0QTM {
+  padding: 0.5rem 0.675rem;
+  font-size: 0.5rem;
+  line-height: 0.5;
+}
 .Button-module__button--small___ADJQe {
   padding: 1rem 1.35rem;
   font-size: 12px;
@@ -438,7 +451,6 @@
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   grid-template-rows: auto;
-  gap: 10px;
 }
 @media (min-width: 992px) {
   .ProductCardDetails-module__productDetails___-sx2l .cmp-card--type-product_details {
@@ -447,6 +459,7 @@
 }
 .ProductCardDetails-module__productDetails___-sx2l .cmp-card--type-product_details__product-info {
   position: relative;
+  max-width: 480px;
 }
 .ProductCardDetails-module__productDetails___-sx2l .cmp-card--type-product_details__header {
   margin-bottom: 1rem;
@@ -496,6 +509,16 @@
 .ProductCardDetails-module__productDetails___-sx2l .folding-specification-list {
   margin-left: 0;
   padding-left: 0;
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-template-rows: auto;
+  gap: 10px;
+}
+@media (min-width: 992px) {
+  .ProductCardDetails-module__productDetails___-sx2l .folding-specification-list {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-areas: "list-item-1 list-item-2";
+  }
 }
 .ProductCardDetails-module__productDetails___-sx2l .folding-specification-list li {
   list-style: none;
@@ -505,6 +528,9 @@
 .ProductCardDetails-module__productDetails___-sx2l .folding-specification-list li strong {
   color: #383e42;
 }
+.ProductCardDetails-module__productDetails___-sx2l .folding-specification-list li > *:first-child {
+  line-height: 2;
+}
 .ProductCardDetails-module__productDetails___-sx2l .folding-specification-holder {
   margin-bottom: 1rem;
 }
@@ -576,7 +602,6 @@
 }
 @media (min-width: 961px) {
   .cmpAlgoliaDynamicSearchWidget__container {
-    width: 80vw;
     max-width: 1280px;
   }
 }
@@ -716,13 +741,37 @@
   font-size: 21px;
   font-weight: 700;
   line-height: 1.6em;
-  color: #4a4e54;
+  color: #e2001a;
   margin: 1rem 0 0 0;
 }
 .qr-journey-form-wrapper .qr-form-page {
   display: none;
   position: relative;
 }
+@media (min-width: 768px) {
+  .qr-journey-form-wrapper .qr-form-page-section[data-page="3"] .qr-form-fields {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-areas: "select select" "email tel" "city zip";
+    gap: 1rem;
+  }
+  .qr-journey-form-wrapper .qr-form-page-section[data-page="3"] .qr-form-fields .qr-form-filed-wrapper.select {
+    grid-area: select;
+  }
+  .qr-journey-form-wrapper .qr-form-page-section[data-page="3"] .qr-form-fields .qr-form-filed-wrapper.email {
+    grid-area: email;
+  }
+  .qr-journey-form-wrapper .qr-form-page-section[data-page="3"] .qr-form-fields .qr-form-filed-wrapper.tel {
+    grid-area: tel;
+  }
+  .qr-journey-form-wrapper .qr-form-page-section[data-page="3"] .qr-form-fields .qr-form-filed-wrappertext:first-child {
+    grid-area: city;
+  }
+  .qr-journey-form-wrapper .qr-form-page-section[data-page="3"] .qr-form-fields .qr-form-filed-wrappertext:last-child {
+    grid-area: zip;
+  }
+}
 .qr-journey-form-wrapper .qr-form-page.active {
   display: block;
 }
@@ -812,10 +861,10 @@
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper.checkbox label input, .qr-journey-form-wrapper .qr-form-filed-wrapper.info label input {
   position: absolute;
-  top: 0;
+  top: 5px;
   left: 0;
-  width: 1.5em;
-  height: 1.5em;
+  width: 1.25rem;
+  height: 1.25rem;
   margin: 0;
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper.checkbox .formfield-error, .qr-journey-form-wrapper .qr-form-filed-wrapper.info .formfield-error {
@@ -833,7 +882,7 @@
   height: 2.3em;
   line-height: 2em;
   border: none;
-  border-bottom: 1px solid #c5c7c4;
+  border-bottom: 1px solid #4a4e54;
   border-radius: 0;
   background-color: transparent;
 }
@@ -864,6 +913,11 @@
 .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=tel]:focus-visible {
   padding: 9px 18px;
 }
+.qr-journey-form-wrapper .qr-form-filed-wrapper label input[type=checkbox],
+.qr-journey-form-wrapper .qr-form-filed-wrapper label select[type=checkbox],
+.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea[type=checkbox] {
+  color: #99a1ab;
+}
 .qr-journey-form-wrapper .qr-form-filed-wrapper label input:active, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus, .qr-journey-form-wrapper .qr-form-filed-wrapper label input:focus-visible,
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select:active,
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select:focus,
@@ -875,15 +929,34 @@
   border-bottom: 3px solid #6ea67b;
   outline: none;
 }
+.qr-journey-form-wrapper .qr-form-filed-wrapper label input::-moz-placeholder {
+  color: #383e42;
+}
+.qr-journey-form-wrapper .qr-form-filed-wrapper label input::placeholder {
+  color: #383e42;
+}
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select,
 .qr-journey-form-wrapper .qr-form-filed-wrapper label textarea {
-  line-height: 1em;
-  padding: 10px 18px;
+  line-height: 1;
+  padding: 1.5rem 1rem 0.5rem 1rem;
   box-sizing: content-box;
 }
+.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea {
+  display: table-cell;
+  vertical-align: middle;
+}
+.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea::-moz-placeholder {
+  color: #99a1ab;
+}
+.qr-journey-form-wrapper .qr-form-filed-wrapper label textarea::placeholder {
+  color: #99a1ab;
+}
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select {
   padding: 10px 18px;
   position: relative;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select + .select-custom-arrow {
   position: absolute;
@@ -891,7 +964,6 @@
   right: 2px;
   height: calc(100% - 1em - 6px);
   width: 17px;
-  background-color: #ffffff;
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select + .select-custom-arrow::after, .qr-journey-form-wrapper .qr-form-filed-wrapper label select + .select-custom-arrow::before {
   content: "";
@@ -914,6 +986,9 @@
   top: -11px;
   border-bottom-color: #383e42;
 }
+.qr-journey-form-wrapper .qr-form-filed-wrapper label select option {
+  color: #383e42;
+}
 .qr-journey-form-wrapper .qr-form-filed-wrapper label > .label {
   display: none;
   position: relative;
@@ -923,13 +998,13 @@
   line-height: 0;
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper.error label input {
-  border: 1px solid #e2001a;
-  border-bottom: 3px solid #e2001a;
+  border: 1px solid #732d5d;
+  border-bottom: 3px solid #732d5d;
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper.error .formfield-error {
   position: relative;
   top: -10px;
-  color: #e2001a;
+  color: #732d5d;
   font-size: 12px;
   line-height: 18px;
 }
@@ -947,10 +1022,11 @@
   height: calc(2.3em + 20px);
   padding: 0 10px;
   margin: 0;
-  border: 1px solid #c5c7c4;
+  border: 0px;
+  border-bottom: 1px solid #4a4e54;
   border-right: none;
   border-radius: 0;
-  background: #ffffff;
+  background: transparent;
   box-sizing: border-box;
   cursor: pointer;
   -webkit-user-select: none;
@@ -987,7 +1063,7 @@
   height: calc(2.3em + 20px);
   padding: 10px 18px;
   margin: 0;
-  border: 1px solid #c5c7c4;
+  border-bottom: 1px solid #4a4e54;
   border-radius: 0;
   font-size: 18px;
   font-family: inherit;
@@ -1053,8 +1129,8 @@
   padding-left: 2rem;
   margin: 0;
   color: #4a4e54;
-  font-weight: 400;
-  font-size: 1rem;
+  font-weight: 700;
+  font-size: 0.85rem;
 }
 .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields {
   display: flex;
@@ -1077,6 +1153,7 @@
   }
 }
 .qr-journey-form-wrapper .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper label .label {
+  display: block;
   height: 1em;
   opacity: 1;
   font-weight: 700;
@@ -1089,10 +1166,19 @@
   font-weight: 400;
   background-color: transparent;
 }
+.qr-journey-form-wrapper .qr-form-page-section[data-page="1"] .qr-form-navigation > div {
+  display: none;
+}
 .qr-journey-form-wrapper .qr-form-navigation {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
+  margin: 1rem auto 0 0;
+}
+@media (min-width: 768px) {
+  .qr-journey-form-wrapper .qr-form-navigation {
+    width: 65%;
+  }
 }
 .qr-journey-form-wrapper .qr-form-navigation input[type=submit] {
   padding: 18px;
@@ -1211,7 +1297,7 @@
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop.first-page {
   padding: 2rem 0 0 0;
-  border-top: 1px solid #c5c7c4;
+  border-top: 1px solid #4a4e54;
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li {
   display: flex;
@@ -1227,7 +1313,7 @@
   margin-bottom: 50px;
   border: 1px solid #e2001a;
   border-radius: 50%;
-  color: #546672;
+  color: #4a4e54;
   font-weight: 700;
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li .bullet-point::after {
@@ -1239,18 +1325,19 @@
   width: 1.25px;
   height: 25px;
   margin: auto;
-  background-color: #546672;
+  background-color: #4a4e54;
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li .bullet-point span {
   position: absolute;
   inset: 0;
-  top: 2px;
+  top: 0.5px;
   width: 1em;
   height: 1em;
   margin: auto;
   text-align: center;
+  font-size: 14px;
   line-height: 1em;
-  font-weight: 400;
+  font-weight: 700;
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li:last-child .bullet-point::after {
   display: none;
@@ -1258,16 +1345,27 @@
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li h3 {
   flex: 2;
   margin: 0 10px;
-  color: #546672;
+  color: #4a4e54;
   font-size: 1.25rem;
   font-weight: 400;
   line-height: 30px;
   text-align: left;
 }
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked {
+  opacity: 0.5;
+}
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked .bullet-point {
-  background-color: #e2001a;
+  background-color: #4a4e54;
+  border: 1px solid transparent;
   color: #ffffff;
 }
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page {
+  opacity: 1;
+}
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page .bullet-point {
+  background-color: #e2001a;
+  border: 1px solid #e2001a;
+}
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked.current-page h3 {
   color: #e2001a;
   font-weight: 700;

package/dist/src/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export interface ButtonProps {
     /**
      * Button content
@@ -7,11 +7,11 @@ export interface ButtonProps {
     /**
      * Button variant
      */
-    variant?: 'primary' | 'secondary' | 'outline' | 'text';
+    variant?: "primary" | "secondary" | "outline" | "text";
     /**
      * Button size
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: "extra-small" | "small" | "medium" | "large";
     /**
      * Is button disabled?
      */
@@ -23,7 +23,7 @@ export interface ButtonProps {
     /**
      * Button type
      */
-    type?: 'button' | 'submit' | 'reset';
+    type?: "button" | "submit" | "reset";
     /**
      * Additional CSS classes
      */

package/dist/src/components/Button/Button.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from './Button';
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;
@@ -7,6 +7,7 @@ export declare const Primary: Story;
 export declare const Secondary: Story;
 export declare const Outline: Story;
 export declare const Text: Story;
+export declare const ExtraSmall: Story;
 export declare const Small: Story;
 export declare const Medium: Story;
 export declare const Large: Story;