@asantemedia-org/leybold-design-system 1.0.4 → 1.0.6

package/dist/index.scss

@@ -72,6 +72,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 +443,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 +451,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;
@@ -576,7 +581,6 @@
 }
 @media (min-width: 961px) {
   .cmpAlgoliaDynamicSearchWidget__container {
-    width: 80vw;
     max-width: 1280px;
   }
 }
@@ -716,13 +720,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;
 }
@@ -878,12 +906,15 @@
 .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;
+  padding: 1.5rem 1rem 0 1rem;
   box-sizing: content-box;
 }
 .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 +922,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: "";
@@ -947,10 +977,11 @@
   height: calc(2.3em + 20px);
   padding: 0 10px;
   margin: 0;
-  border: 1px solid #c5c7c4;
+  border: 0px;
+  border-bottom: 1px solid #c5c7c4;
   border-right: none;
   border-radius: 0;
-  background: #ffffff;
+  background: transparent;
   box-sizing: border-box;
   cursor: pointer;
   -webkit-user-select: none;
@@ -987,7 +1018,7 @@
   height: calc(2.3em + 20px);
   padding: 10px 18px;
   margin: 0;
-  border: 1px solid #c5c7c4;
+  border-bottom: 1px solid #c5c7c4;
   border-radius: 0;
   font-size: 18px;
   font-family: inherit;
@@ -1077,6 +1108,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 +1121,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;
@@ -1227,7 +1268,7 @@
   margin-bottom: 50px;
   border: 1px solid #e2001a;
   border-radius: 50%;
-  color: #546672;
+  color: rgba(84, 102, 114, 0.5);
   font-weight: 700;
 }
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li .bullet-point::after {
@@ -1258,7 +1299,7 @@
 .qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li h3 {
   flex: 2;
   margin: 0 10px;
-  color: #546672;
+  color: rgba(84, 102, 114, 0.5);
   font-size: 1.25rem;
   font-weight: 400;
   line-height: 30px;

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;

package/dist/src/index.d.ts

@@ -4,6 +4,8 @@ export { Pagination, PaginationItem, PaginationButton, PaginationEllipsis, } fro
 export type { PaginationProps, PaginationItemProps, PaginationButtonProps, PaginationEllipsisProps, } from "./components/Pagination";
 export { AlgoliaDynamicSearchLeybold } from "./experience/algolia-dynamic-search";
 export { QrFormLeybold } from "./experience/qr-form-journey";
+export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch } from "./experience/algolia-dynamic-search";
+export { QrFormLeybold as QrForm } from "./experience/qr-form-journey";
 export { FederatedSearchExperience } from "./experience/federated-search";
 export type { FederatedSearchProps } from "./types/search";
 export { SearchTriggerButton } from "./components/SearchTriggerButton";