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

package/dist/index.esm.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/index.js

@@ -1,5 +1,7 @@
-import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
-import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asantemedia-org/edwardsvacuum-design-system';
+'use strict';
+
+var React = require('react');
+var edwardsvacuumDesignSystem = require('@asantemedia-org/edwardsvacuum-design-system');
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -11,7 +13,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var styles$f = {"button":"Button-module__button___18Bed","button--primary":"Button-module__button--primary___VuF-P","button--disabled":"Button-module__button--disabled___IuOY8","button--secondary":"Button-module__button--secondary___lD5E3","button--outline":"Button-module__button--outline___wB6-g","button--text":"Button-module__button--text___iZIMo","button--small":"Button-module__button--small___ADJQe","button--medium":"Button-module__button--medium___ZuR4Z","button--large":"Button-module__button--large___-FaV5"};
+var styles$f = {"button":"Button-module__button___18Bed","button--primary":"Button-module__button--primary___VuF-P","button--disabled":"Button-module__button--disabled___IuOY8","button--secondary":"Button-module__button--secondary___lD5E3","button--outline":"Button-module__button--outline___wB6-g","button--text":"Button-module__button--text___iZIMo","button--extra-small":"Button-module__button--extra-small___R0QTM","button--small":"Button-module__button--small___ADJQe","button--medium":"Button-module__button--medium___ZuR4Z","button--large":"Button-module__button--large___-FaV5"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -93,16 +95,16 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
  */
 const Button = ({
   children,
-  variant = 'primary',
-  size = 'medium',
+  variant = "primary",
+  size = "medium",
   disabled = false,
   onClick,
-  type = 'button',
+  type = "button",
   className,
   ...props
 }) => {
   const buttonClasses = classNames(styles$f.button, styles$f[`button--${variant}`], styles$f[`button--${size}`], {
-    [styles$f['button--disabled']]: disabled
+    [styles$f["button--disabled"]]: disabled
   }, className);
   return /*#__PURE__*/React.createElement("button", _extends({
     type: type,
@@ -275,7 +277,7 @@ const Pagination = ({
   className,
   ariaLabel = "Pagination"
 }) => {
-  const pageNumbers = useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
+  const pageNumbers = React.useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
   const handlePageChange = page => {
     if (page >= 1 && page <= totalPages && page !== currentPage) {
       onPageChange(page);
@@ -347,15 +349,15 @@ const Image = ({
   srcSet,
   sizes
 }) => {
-  const [isLoading, setIsLoading] = useState(true);
-  const [hasError, setHasError] = useState(false);
-  const [currentSrc, setCurrentSrc] = useState(src);
-  const handleLoad = useCallback(() => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [hasError, setHasError] = React.useState(false);
+  const [currentSrc, setCurrentSrc] = React.useState(src);
+  const handleLoad = React.useCallback(() => {
     setIsLoading(false);
     setHasError(false);
     onLoad?.();
   }, [onLoad]);
-  const handleError = useCallback(() => {
+  const handleError = React.useCallback(() => {
     setIsLoading(false);
     setHasError(true);
 
@@ -482,7 +484,7 @@ const ProductCardHorizontal = ({
   }, price || " "), button && /*#__PURE__*/React.createElement(Button, {
     className: styles$d.productButton,
     onClick: button.onClick,
-    size: "small"
+    size: "extra-small"
   }, button.label))));
 };
 
@@ -534,7 +536,7 @@ const ProductCardDetails = ({
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styles$b.productDetails
-  }, /*#__PURE__*/React.createElement(ProductDetailsCard, {
+  }, /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.ProductDetailsCard, {
     className: `${className}`,
     title: title,
     imageUrl: imageUrl,
@@ -613,7 +615,7 @@ const AlgoliaDynamicSearchLeybold = props => {
     ProductCard: ProductCardAdapter,
     ProductDetailsCard: ProductCardDetailsAdapter
   };
-  return /*#__PURE__*/React.createElement(AlgoliaDynamicSearchRaw, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.AlgoliaDynamicSearchRaw, _extends({}, props, {
     innerComponents: innerComponents
   }));
 };
@@ -664,7 +666,7 @@ const QrFormButtonAdapter = ({
 const QrFormLeybold = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "qr-journey-form-wrapper"
-  }, /*#__PURE__*/React.createElement(QrForm, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.QrForm, _extends({}, props, {
     ButtonComponent: QrFormButtonAdapter
   })));
 };
@@ -710,9 +712,9 @@ const SearchModal = ({
   children,
   className = ''
 }) => {
-  const modalRef = useRef(null);
-  const previouslyFocusedElement = useRef(null);
-  useEffect(() => {
+  const modalRef = React.useRef(null);
+  const previouslyFocusedElement = React.useRef(null);
+  React.useEffect(() => {
     if (isOpen) {
       // Store the previously focused element
       previouslyFocusedElement.current = document.activeElement;
@@ -737,7 +739,7 @@ const SearchModal = ({
       document.body.style.overflow = '';
     };
   }, [isOpen]);
-  useEffect(() => {
+  React.useEffect(() => {
     const handleEscape = event => {
       if (event.key === 'Escape' && isOpen) {
         onClose();
@@ -748,7 +750,7 @@ const SearchModal = ({
   }, [isOpen, onClose]);
 
   // Focus trap implementation
-  useEffect(() => {
+  React.useEffect(() => {
     if (!isOpen || !modalRef.current) return;
     const modal = modalRef.current;
     const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -1165,10 +1167,10 @@ const FilterAccordion = ({
   onValueToggle,
   className
 }) => {
-  const [searchQuery, setSearchQuery] = useState("");
+  const [searchQuery, setSearchQuery] = React.useState("");
 
   // Filter facet values based on search query
-  const filteredValues = useMemo(() => {
+  const filteredValues = React.useMemo(() => {
     if (!searchQuery.trim()) {
       return facet.values;
     }
@@ -1291,7 +1293,7 @@ const AppliedFilters = ({
   className
 }) => {
   // Extract all refined (selected) filters
-  const appliedFilters = useMemo(() => {
+  const appliedFilters = React.useMemo(() => {
     const filters = [];
     facets.forEach(facet => {
       facet.values.forEach(value => {
@@ -1356,7 +1358,7 @@ const FiltersPanel = ({
   className
 }) => {
   // Track which accordions are expanded
-  const [expandedAccordions, setExpandedAccordions] = useState(() => {
+  const [expandedAccordions, setExpandedAccordions] = React.useState(() => {
     // Initialize with default expanded facets
     const expanded = new Set();
     facets.forEach(facet => {
@@ -1366,7 +1368,7 @@ const FiltersPanel = ({
     });
     return expanded;
   });
-  const handleAccordionToggle = useCallback(facetId => {
+  const handleAccordionToggle = React.useCallback(facetId => {
     setExpandedAccordions(prev => {
       const next = new Set(prev);
       if (next.has(facetId)) {
@@ -1377,13 +1379,13 @@ const FiltersPanel = ({
       return next;
     });
   }, []);
-  const handleValueToggle = useCallback((attribute, value) => {
+  const handleValueToggle = React.useCallback((attribute, value) => {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  const handleRemoveFilter = useCallback((attribute, value) => {
+  const handleRemoveFilter = React.useCallback((attribute, value) => {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  const handleClearAll = useCallback(() => {
+  const handleClearAll = React.useCallback(() => {
     // Remove all refined facets
     facets.forEach(facet => {
       facet.values.forEach(value => {
@@ -1771,8 +1773,15 @@ const SearchTriggerButton = ({
   }, label));
 };
 
-export { AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, ModalCloseButton, Pagination, PaginationButton, PaginationEllipsis, PaginationItem, ProductCardHorizontal, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };
-ence = FederatedSearchExperience;
+exports.AlgoliaDynamicSearch = AlgoliaDynamicSearchLeybold;
+exports.AlgoliaDynamicSearchLeybold = AlgoliaDynamicSearchLeybold;
+exports.AppliedFilterTag = AppliedFilterTag;
+exports.AppliedFilters = AppliedFilters;
+exports.Button = Button;
+exports.ContentCardHorizontal = ContentCardHorizontal;
+exports.FederatedInstantResultsLayout = FederatedInstantResultsLayout;
+exports.FederatedResultsView = FederatedResultsView;
+exports.FederatedSearchExperience = FederatedSearchExperience;
 exports.FilterAccordion = FilterAccordion;
 exports.FilterItem = FilterItem;
 exports.FilterSearch = FilterSearch;
@@ -1783,6 +1792,7 @@ exports.PaginationButton = PaginationButton;
 exports.PaginationEllipsis = PaginationEllipsis;
 exports.PaginationItem = PaginationItem;
 exports.ProductCardHorizontal = ProductCardHorizontal;
+exports.QrForm = QrFormLeybold;
 exports.QrFormLeybold = QrFormLeybold;
 exports.ResultsColumn = ResultsColumn;
 exports.ResultsCount = ResultsCount;