@asante-org/leybold-design-system 1.3.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/README.md +163 -163
  2. package/dist/app/layout.d.ts +9 -0
  3. package/dist/app/page.d.ts +2 -0
  4. package/dist/assets/.gitkeep +2 -2
  5. package/dist/assets/desktop-layout-alt.svg +27 -27
  6. package/dist/assets/desktop-layout.svg +29 -29
  7. package/dist/assets/globe.svg +7 -7
  8. package/dist/assets/leybold-footer-logo.svg +19 -19
  9. package/dist/assets/leybold-white.svg +18 -18
  10. package/dist/assets/list-product-overlay-tip-active.svg +3 -3
  11. package/dist/assets/list-product-overlay-tip.svg +3 -3
  12. package/dist/assets/logo-example.svg +9 -9
  13. package/dist/assets/logo.svg +19 -19
  14. package/dist/assets/phone-layout.svg +14 -14
  15. package/dist/assets/red-tip.svg +10 -10
  16. package/dist/assets/tablet-layout.svg +28 -28
  17. package/dist/index.css +88 -0
  18. package/dist/index.d.ts +3 -0
  19. package/dist/index.esm.css +88 -0
  20. package/dist/index.esm.js +1147 -1359
  21. package/dist/index.esm.js.map +1 -1
  22. package/dist/index.esm.scss +35 -238
  23. package/dist/index.js +1148 -1361
  24. package/dist/index.js.map +1 -1
  25. package/dist/index.scss +35 -238
  26. package/dist/src/components/Button/Button.d.ts +2 -2
  27. package/dist/src/components/ContentCardHorizontal/ContentCardHorizontal.d.ts +2 -2
  28. package/dist/src/experience/algolia-dynamic-search/AlgoliaDynamicSearch.stories.d.ts +0 -2
  29. package/dist/src/index.d.ts +1 -2
  30. package/dist/src/stories/foundation/Typography/TypographyComponents.d.ts +0 -1
  31. package/dist/src/types/cards.d.ts +2 -28
  32. package/dist/stories/components/Algolia-dynamic-search/algolia-dynamic-search.d.ts +4 -0
  33. package/dist/stories/components/Algolia-dynamic-search/algolia-dynamic-search.stories.d.ts +7 -0
  34. package/dist/stories/components/Button/Button.d.ts +35 -0
  35. package/dist/stories/components/Button/Button.stories.d.ts +15 -0
  36. package/dist/stories/components/Button/index.d.ts +2 -0
  37. package/dist/stories/components/QRFormJourney/Qr-form/Qr-form.d.ts +2 -0
  38. package/dist/stories/components/QRFormJourney/Qr-form/Qr-form.stories.d.ts +7 -0
  39. package/dist/tsconfig.tsbuildinfo +1 -1
  40. package/dist/utils/styles/index.d.ts +1 -0
  41. package/package.json +115 -115
  42. package/dist/.next/types/app/layout.d.ts +0 -9
  43. package/dist/.next/types/app/page.d.ts +0 -9
  44. package/dist/src/components/ContentCardBase/ContentCardBase.d.ts +0 -3
  45. package/dist/src/components/ContentCardBase/index.d.ts +0 -2
  46. package/dist/src/components/ContentCardVertical/ContentCardVertical.d.ts +0 -3
  47. package/dist/src/components/ContentCardVertical/ContentCardVertical.stories.d.ts +0 -9
package/dist/index.scss CHANGED
@@ -515,8 +515,6 @@
515
515
  padding: 0.25rem 0.375rem;
516
516
  font-size: 0.625rem;
517
517
  line-height: 1.2;
518
- min-width: 80px;
519
- min-height: 30px;
520
518
  }
521
519
  .Button-module__button--extra-small___R0QTM.Button-module__button--carousel-arrow-left___Wx-Jo, .Button-module__button--extra-small___R0QTM.Button-module__button--carousel-arrow-right___3ZtgT {
522
520
  padding: 0.25rem;
@@ -529,8 +527,6 @@
529
527
  .Button-module__button--small___ADJQe {
530
528
  padding: 0.25rem 0.5rem;
531
529
  font-size: 0.75rem;
532
- min-width: 120px;
533
- min-height: 41px;
534
530
  }
535
531
  .Button-module__button--small___ADJQe.Button-module__button--carousel-arrow-left___Wx-Jo, .Button-module__button--small___ADJQe.Button-module__button--carousel-arrow-right___3ZtgT {
536
532
  padding: 0.25rem;
@@ -541,8 +537,6 @@
541
537
  .Button-module__button--medium___ZuR4Z {
542
538
  padding: 0.5rem 1rem;
543
539
  font-size: 0.875rem;
544
- min-width: 215px;
545
- min-height: 56px;
546
540
  }
547
541
  .Button-module__button--medium___ZuR4Z.Button-module__button--carousel-arrow-left___Wx-Jo, .Button-module__button--medium___ZuR4Z.Button-module__button--carousel-arrow-right___3ZtgT {
548
542
  padding: 0.5rem;
@@ -553,8 +547,6 @@
553
547
  .Button-module__button--large___-FaV5 {
554
548
  padding: 1rem 1.5rem;
555
549
  font-size: 1rem;
556
- min-width: 310px;
557
- min-height: 73px;
558
550
  }
559
551
  .Button-module__button--large___-FaV5.Button-module__button--carousel-arrow-left___Wx-Jo, .Button-module__button--large___-FaV5.Button-module__button--carousel-arrow-right___3ZtgT {
560
552
  padding: 1rem;
@@ -1427,8 +1419,8 @@
1427
1419
  flex-direction: column;
1428
1420
  gap: 0.5rem;
1429
1421
  padding: 0.5rem !important;
1430
- background-color: white;
1431
- box-shadow: 2.7px 2.7px 5px 0 rgba(0, 0, 0, 0.1);
1422
+ background-color: transparent;
1423
+ box-shadow: none;
1432
1424
  }
1433
1425
  @media (max-width: 768px) {
1434
1426
  .ProductCardHorizontal-module__productWrapper___gs8fn {
@@ -1438,7 +1430,7 @@
1438
1430
  padding: 0 6px 0 0;
1439
1431
  }
1440
1432
  }
1441
- .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2, .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withPlaceholder___x8IUh {
1433
+ .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 {
1442
1434
  display: grid;
1443
1435
  grid-template-columns: 75px repeat(2, minmax(80px, 1fr));
1444
1436
  grid-template-rows: repeat(3, auto);
@@ -1446,19 +1438,19 @@
1446
1438
  row-gap: 0.125rem;
1447
1439
  }
1448
1440
  @media (max-width: 768px) {
1449
- .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2, .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withPlaceholder___x8IUh {
1441
+ .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 {
1450
1442
  display: flex;
1451
1443
  flex-direction: row;
1452
1444
  align-items: center;
1453
1445
  }
1454
1446
  }
1455
- .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 .ProductCardHorizontal-module__productTitle___xBuu7, .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withPlaceholder___x8IUh .ProductCardHorizontal-module__productTitle___xBuu7 {
1447
+ .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 .ProductCardHorizontal-module__productTitle___xBuu7 {
1456
1448
  font-size: 16px;
1457
1449
  }
1458
- .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 .ProductCardHorizontal-module__productDescription___CA35O, .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withPlaceholder___x8IUh .ProductCardHorizontal-module__productDescription___CA35O {
1450
+ .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 .ProductCardHorizontal-module__productDescription___CA35O {
1459
1451
  font-size: 16px;
1460
1452
  }
1461
- .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 .ProductCardHorizontal-module__productPrice___lf32A, .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withPlaceholder___x8IUh .ProductCardHorizontal-module__productPrice___lf32A {
1453
+ .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 .ProductCardHorizontal-module__productPrice___lf32A {
1462
1454
  font-size: 16px;
1463
1455
  }
1464
1456
 
@@ -1479,14 +1471,6 @@
1479
1471
  }
1480
1472
  }
1481
1473
 
1482
- .ProductCardHorizontal-module__placeholderImage___kT1sp {
1483
- width: 100%;
1484
- height: 100%;
1485
- background-color: var(--leybold-white-aluminium);
1486
- padding: 0 5px;
1487
- border-radius: 0 !important;
1488
- }
1489
-
1490
1474
  .ProductCardHorizontal-module__productContent___Np2cY {
1491
1475
  flex: 1;
1492
1476
  min-width: 0;
@@ -1495,7 +1479,7 @@
1495
1479
  .ProductCardHorizontal-module__productTitle___xBuu7,
1496
1480
  h3.ProductCardHorizontal-module__productTitle___xBuu7 {
1497
1481
  margin: 0 0 0.25rem 0;
1498
- font-size: var(--body-mobile-size);
1482
+ font-size: 16px;
1499
1483
  font-weight: 600;
1500
1484
  color: #111827;
1501
1485
  line-height: 1.4;
@@ -1503,8 +1487,8 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
1503
1487
 
1504
1488
  .ProductCardHorizontal-module__productId___3oOQV {
1505
1489
  margin: 0 0 0.25rem 0;
1506
- font-size: 14px;
1507
- color: var(--leybold-slate-Grey);
1490
+ font-size: 9px;
1491
+ color: #6b7280;
1508
1492
  }
1509
1493
 
1510
1494
  .ProductCardHorizontal-module__productDescription___CA35O {
@@ -1520,7 +1504,7 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
1520
1504
 
1521
1505
  .ProductCardHorizontal-module__productPrice___lf32A {
1522
1506
  margin: 0;
1523
- font-size: var(--body-mobile-size);
1507
+ font-size: clamp(14px, 1.25vw, 1.5rem);
1524
1508
  font-weight: 700;
1525
1509
  color: #111827;
1526
1510
  }
@@ -1945,179 +1929,6 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
1945
1929
  --text-xxl-line-height: 1;
1946
1930
  }
1947
1931
 
1948
- .ContentCardVertical-module__contentCard___EoYej {
1949
- display: flex;
1950
- flex-direction: column;
1951
- text-decoration: none;
1952
- color: inherit;
1953
- background-color: white;
1954
- padding: 16px;
1955
- width: 100%;
1956
- gap: 0.5rem;
1957
- /* Gen List Card Shadow */
1958
- box-shadow: 1px 0 6.7px 2px rgba(0, 0, 0, 0.08);
1959
- transition: box-shadow 0.2s ease-in-out;
1960
- }
1961
- .ContentCardVertical-module__contentCard___EoYej:hover {
1962
- box-shadow: 3px 6px 8px -5px rgba(0, 0, 0, 0.3);
1963
- }
1964
- .ContentCardVertical-module__contentCard___EoYej:focus-visible {
1965
- outline: 2px solid #000000;
1966
- outline-offset: 2px;
1967
- }
1968
- .ContentCardVertical-module__contentCard___EoYej:focus:not(:focus-visible) {
1969
- border: 1px solid #000000;
1970
- }
1971
- .ContentCardVertical-module__contentCard___EoYej .content-card-image-wrapper {
1972
- aspect-ratio: 16/9;
1973
- overflow: hidden;
1974
- background-color: #dae0e3;
1975
- }
1976
- .ContentCardVertical-module__contentCard___EoYej .content-card-image {
1977
- width: 100%;
1978
- height: 100%;
1979
- -o-object-fit: cover;
1980
- object-fit: cover;
1981
- display: block;
1982
- }
1983
- .ContentCardVertical-module__contentCard___EoYej button {
1984
- width: 100%;
1985
- min-width: 0;
1986
- min-height: 44px;
1987
- margin-top: auto;
1988
- }
1989
- .ContentCardVertical-module__contentCard___EoYej .career-button {
1990
- justify-content: flex-start;
1991
- }
1992
-
1993
- .ContentCardVertical-module__contentCard--instant-view___dsIUf,
1994
- .ContentCardVertical-module__contentCard--results-view___6mSHQ {
1995
- gap: 0.5rem;
1996
- }
1997
-
1998
- .ContentCardVertical-module__contentMeta___l2GtO {
1999
- display: flex;
2000
- flex-direction: column;
2001
- align-items: flex-start;
2002
- gap: 0.25rem;
2003
- margin: 0;
2004
- }
2005
-
2006
- .ContentCardVertical-module__contentCategory___78vrj,
2007
- .ContentCardVertical-module__contentMetaText___Rl-ln {
2008
- margin: 0;
2009
- font-size: var(--body-desktop-size);
2010
- line-height: var(--body-desktop-line-height);
2011
- color: #4a4e54;
2012
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
2013
- }
2014
-
2015
- .ContentCardVertical-module__contentCategory___78vrj {
2016
- font-weight: 300;
2017
- }
2018
-
2019
- .ContentCardVertical-module__contentTitle___rEiHm {
2020
- margin: 0;
2021
- font-size: var(--h3-mobile-size);
2022
- font-weight: 900;
2023
- line-height: var(--h3-mobile-line-height);
2024
- color: #4a4e54;
2025
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
2026
- }
2027
-
2028
- .ContentCardVertical-module__contentExcerpt___5Gb2G {
2029
- margin: 0;
2030
- font-size: var(--body-desktop-size);
2031
- font-weight: 400;
2032
- line-height: var(--body-desktop-line-height);
2033
- color: #4a4e54;
2034
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
2035
- }
2036
-
2037
- @media (max-width: 768px) {
2038
- .ContentCardVertical-module__contentCard___EoYej {
2039
- max-width: 100%;
2040
- padding: 1rem;
2041
- }
2042
- .ContentCardVertical-module__contentCategory___78vrj,
2043
- .ContentCardVertical-module__contentMetaText___Rl-ln,
2044
- .ContentCardVertical-module__contentExcerpt___5Gb2G {
2045
- font-size: 1rem;
2046
- }
2047
- .ContentCardVertical-module__contentTitle___rEiHm {
2048
- font-size: var(--h3-mobile-size);
2049
- }
2050
- }
2051
- :root {
2052
- --leybold-red: #e2001a;
2053
- --leybold-black: #000000;
2054
- --leybold-white: #ffffff;
2055
- --leybold-blue-grey: #546672;
2056
- --leybold-white-aluminium: #dae0e3;
2057
- --leybold-window-gray: #99a1ab;
2058
- --leybold-light-grey: #c5c7c4;
2059
- --leybold-very-light-grey: #f5f5f5;
2060
- --leybold-slate-gray: #4a4e54;
2061
- --leybold-anthracite-gray: #383e42;
2062
- --leybold-orange: #d18e56;
2063
- --leybold-yellow: #edd163;
2064
- --leybold-green: #6ea67b;
2065
- --leybold-purple: #732d5d;
2066
- --leybold-purple-gray: #945e67;
2067
- --leybold-blue: #2b4679;
2068
- --leybold-light-blue: #3f6a98;
2069
- --leybold-blue-green: #39788e;
2070
- --leybold-green-gray: #6d8f9f;
2071
- --color-primary: #e2001a;
2072
- --color-secondary: #546672;
2073
- --color-success: #6ea67b;
2074
- --color-danger: #e2001a;
2075
- --color-warning: #d18e56;
2076
- --color-info: #3f6a98;
2077
- --text-primary: #000000;
2078
- --text-secondary: #4a4e54;
2079
- --text-muted: #99a1ab;
2080
- --text-inverse: #ffffff;
2081
- --bg-primary: #ffffff;
2082
- --bg-secondary: #dae0e3;
2083
- --bg-dark: #383e42;
2084
- --border-color: #c5c7c4;
2085
- --border-color-dark: #4a4e54;
2086
- --font-family-base: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
2087
- --h1-mobile-size: 32px;
2088
- --h1-mobile-line-height: 1.2;
2089
- --h2-mobile-size: 24px;
2090
- --h2-mobile-line-height: 1.2;
2091
- --h3-mobile-size: 18px;
2092
- --h3-mobile-line-height: 1.6;
2093
- --h4-mobile-size: 16px;
2094
- --h4-mobile-line-height: 1.55;
2095
- --h5-mobile-size: 14px;
2096
- --h5-mobile-line-height: 1.5;
2097
- --body-mobile-size: 14px;
2098
- --body-mobile-line-height: 1.5;
2099
- --h1-desktop-size: 55px;
2100
- --h1-desktop-line-height: 1.15;
2101
- --h1-desktop-letter-spacing: -0.02em;
2102
- --h2-desktop-size: 40px;
2103
- --h2-desktop-line-height: 1.2;
2104
- --h2-desktop-letter-spacing: -0.01em;
2105
- --h3-desktop-size: 32px;
2106
- --h3-desktop-line-height: 1.2;
2107
- --h4-desktop-size: 24px;
2108
- --h4-desktop-line-height: 1.2;
2109
- --h5-desktop-size: 18px;
2110
- --h5-desktop-line-height: 1.6;
2111
- --body-desktop-size: 18px;
2112
- --body-desktop-line-height: 1.6;
2113
- --text-lg-size: 27px;
2114
- --text-lg-line-height: 1.4;
2115
- --text-xl-size: 36px;
2116
- --text-xl-line-height: 1.4;
2117
- --text-xxl-size: 64px;
2118
- --text-xxl-line-height: 1;
2119
- }
2120
-
2121
1932
  @keyframes loading {
2122
1933
  0% {
2123
1934
  transform: skewX(-10deg) translateX(-100%);
@@ -2143,24 +1954,6 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
2143
1954
  opacity: 0;
2144
1955
  z-index: -1;
2145
1956
  }
2146
- .cmpAlgoliaDynamicSearchWidget.hasStyleSilverGradientBackground {
2147
- background: #c5c7c4;
2148
- }
2149
- .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground {
2150
- background: #383e42;
2151
- }
2152
- .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text {
2153
- color: white;
2154
- }
2155
- .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h1,
2156
- .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h2,
2157
- .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h3,
2158
- .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h4,
2159
- .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h5,
2160
- .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h6,
2161
- .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text p {
2162
- color: white;
2163
- }
2164
1957
 
2165
1958
  .cmpAlgoliaDynamicSearchWidget__container {
2166
1959
  margin-left: auto;
@@ -2197,10 +1990,7 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
2197
1990
  .cmpAlgoliaDynamicSearchWidget__header h6,
2198
1991
  .cmpAlgoliaDynamicSearchWidget__header p {
2199
1992
  margin: 0;
2200
- color: var(--leybold-anthracite-gray);
2201
- }
2202
- .cmpAlgoliaDynamicSearchWidget__header p {
2203
- line-height: 160%;
1993
+ color: #546672;
2204
1994
  }
2205
1995
 
2206
1996
  .cmpAlgoliaDynamicSearchWidget__header__text {
@@ -2210,46 +2000,53 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
2210
2000
  }
2211
2001
  @media screen and (min-width: 768px) {
2212
2002
  .cmpAlgoliaDynamicSearchWidget__header__text {
2213
- max-width: 66.66%;
2003
+ max-width: 75%;
2214
2004
  }
2215
2005
  }
2216
2006
 
2217
2007
  .cmpAlgoliaDynamicSearchWidget__cards {
2218
2008
  display: grid;
2219
2009
  gap: 1rem;
2220
- grid-template-columns: minmax(0, 1fr);
2221
- }
2222
- .cmpAlgoliaDynamicSearchWidget__cards > * {
2223
- min-width: 0;
2224
- width: 100%;
2010
+ grid-template-columns: 1fr;
2225
2011
  }
2226
2012
  @media (min-width: 768px) {
2227
2013
  .cmpAlgoliaDynamicSearchWidget__cards {
2228
- grid-template-columns: repeat(2, minmax(0, 1fr));
2014
+ grid-template-columns: repeat(2, 1fr);
2229
2015
  }
2230
2016
  }
2231
2017
  @media (min-width: 961px) {
2232
2018
  .cmpAlgoliaDynamicSearchWidget__cards {
2233
- grid-template-columns: repeat(3, minmax(0, 1fr));
2019
+ grid-template-columns: repeat(3, 1fr);
2234
2020
  }
2235
2021
  }
2236
2022
 
2237
2023
  .cmpAlgoliaDynamicSearchWidget.isQueryContent .cmpAlgoliaDynamicSearchWidget__cards {
2238
- grid-template-columns: repeat(1, minmax(0, 1fr));
2239
- }
2240
- @media (min-width: 768px) {
2241
- .cmpAlgoliaDynamicSearchWidget.isQueryContent .cmpAlgoliaDynamicSearchWidget__cards {
2242
- grid-template-columns: repeat(2, minmax(0, 1fr));
2243
- }
2024
+ grid-template-columns: repeat(2, 1fr);
2244
2025
  }
2245
2026
  @media (min-width: 961px) {
2246
2027
  .cmpAlgoliaDynamicSearchWidget.isQueryContent .cmpAlgoliaDynamicSearchWidget__cards {
2247
- grid-template-columns: repeat(3, minmax(0, 1fr));
2028
+ grid-template-columns: repeat(4, 1fr);
2248
2029
  }
2249
2030
  }
2250
2031
 
2251
2032
  .cmpAlgoliaDynamicSearchWidget.hasStyleSilverGradientBackground {
2252
- background: #c5c7c4;
2033
+ background: #3f6a98;
2034
+ }
2035
+
2036
+ .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground {
2037
+ background: #546672;
2038
+ }
2039
+ .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text {
2040
+ color: white;
2041
+ }
2042
+ .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h1,
2043
+ .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h2,
2044
+ .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h3,
2045
+ .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h4,
2046
+ .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h5,
2047
+ .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h6,
2048
+ .cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text p {
2049
+ color: white;
2253
2050
  }
2254
2051
 
2255
2052
  .cmpAlgoliaDynamicSearchWidget__placeholder {
@@ -64,11 +64,11 @@ export interface ButtonProps {
64
64
  * Force a specific state for documentation purposes
65
65
  * @internal
66
66
  */
67
- "data-force-state"?: "hover" | "focus";
67
+ 'data-force-state'?: 'hover' | 'focus';
68
68
  /**
69
69
  * Data attribute for page target
70
70
  */
71
- "data-page_target"?: string | number;
71
+ 'data-page_target'?: string | number;
72
72
  /**
73
73
  * Tab index for focus order
74
74
  */
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
- import { ContentCardProps } from "../../types/cards";
3
- export declare const ContentCardHorizontal: React.FC<ContentCardProps>;
2
+ import { ContentCardHorizontalProps } from "../../types/cards";
3
+ export declare const ContentCardHorizontal: React.FC<ContentCardHorizontalProps>;
@@ -5,5 +5,3 @@ export default meta;
5
5
  type Story = StoryObj<typeof AlgoliaDynamicSearchLeybold>;
6
6
  export declare const Products: Story;
7
7
  export declare const ProductDetails: Story;
8
- export declare const Content: Story;
9
- export declare const Careers: Story;
@@ -19,11 +19,10 @@ export { ResultsCount } from "./components/ResultsCount";
19
19
  export { SeeAllLinkButton } from "./components/SeeAllLinkButton";
20
20
  export { ProductCardHorizontal } from "./components/ProductCardHorizontal";
21
21
  export { ProductCardVertical } from "./components/ProductCardVertical";
22
- export { ContentCardBase } from "./components/ContentCardBase";
23
22
  export { ContentCardHorizontal } from "./components/ContentCardHorizontal";
24
23
  export { FederatedResultsView, ResultsList } from "./components/ResultsView";
25
24
  export { FiltersPanel, FilterAccordion, FilterItem, FilterSearch, AppliedFilters, AppliedFilterTag, } from "./components/Filters";
26
- export type { ProductResult, ContentResult, SearchView, SearchTab, SearchTriggerButtonProps, SearchModalProps, SearchBarProps, FederatedInstantResultsLayoutProps, ResultsColumnProps, ProductCardHorizontalProps, ContentCardBaseProps, ContentCardHorizontalProps, FederatedResultsViewProps, ResultsListProps, Facet, FacetValue, } from "./types/search";
25
+ export type { ProductResult, ContentResult, SearchView, SearchTab, SearchTriggerButtonProps, SearchModalProps, SearchBarProps, FederatedInstantResultsLayoutProps, ResultsColumnProps, ProductCardHorizontalProps, ContentCardHorizontalProps, FederatedResultsViewProps, ResultsListProps, Facet, FacetValue, } from "./types/search";
27
26
  export type { FiltersPanelProps, FilterAccordionProps, FilterItemProps, FilterSearchProps, AppliedFiltersProps, AppliedFilterTagProps, } from "./components/Filters";
28
27
  export type { ResultsCountProps } from "./components/ResultsCount";
29
28
  export type { SeeAllLinkButtonProps } from "./components/SeeAllLinkButton";
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export declare const TYPOGRAPHY_MOBILE: ({
3
2
  label: string;
4
3
  cssVar: string;
@@ -5,48 +5,24 @@ export interface ProductCardHorizontalProps {
5
5
  title: string;
6
6
  url: string;
7
7
  imageUrl?: string;
8
- showProductImage?: boolean;
9
8
  productId?: string;
10
9
  price?: string;
11
10
  description?: string;
12
11
  className?: string;
13
12
  utm?: any;
14
13
  button?: ButtonProps;
15
- style?: React.CSSProperties;
16
- code?: string;
17
- showProductPrice?: boolean;
18
14
  }
19
- export interface ContentCardProps {
15
+ export interface ContentCardHorizontalProps {
20
16
  id: string;
21
17
  title: string;
22
18
  url: string;
23
- imageUrl?: string;
24
19
  category?: string;
25
20
  meta?: string;
26
21
  excerpt?: string;
27
22
  className?: string;
28
23
  button?: ButtonProps;
29
- variant?: "content-view" | "career-view";
30
- style?: React.CSSProperties;
31
- }
32
- export interface ContentCardBaseProps {
33
- id?: string;
34
- variant?: "content-view" | "career-view";
35
- title: string;
36
- url: string;
37
- imageUrl?: string;
38
- category?: string;
39
- meta?: string;
40
- excerpt?: string;
41
- className?: string;
42
- style?: React.CSSProperties;
43
- ariaLabel?: string;
44
- contentMetaClassName?: string;
45
- contentCategoryClassName?: string;
46
- contentMetaTextClassName?: string;
47
- contentTitleClassName?: string;
48
- contentExcerptClassName?: string;
49
24
  utm?: any;
25
+ variant?: "instant-view" | "results-view";
50
26
  }
51
27
  export type ProductCardHorizontalPartsProps = ProductCardHorizontalProps;
52
28
  export interface ProductCardDetailsProps {
@@ -56,7 +32,6 @@ export interface ProductCardDetailsProps {
56
32
  price?: string;
57
33
  code?: string;
58
34
  imageUrl?: string;
59
- showProductImage?: boolean;
60
35
  className?: string;
61
36
  button?: ButtonProps;
62
37
  utm?: any;
@@ -75,5 +50,4 @@ export interface ProductCardDetailsProps {
75
50
  url: string;
76
51
  }>;
77
52
  hidespares?: string;
78
- showProductPrice?: boolean;
79
53
  }
@@ -0,0 +1,4 @@
1
+ import "@asantemedia-org/edwardsvacuum-design-system/dist/index.scss";
2
+ import "./algolia-dynamic-search.scss";
3
+ declare const AlgoliaDynamicSearchLeybold: (props: any) => JSX.Element;
4
+ export default AlgoliaDynamicSearchLeybold;
@@ -0,0 +1,7 @@
1
+ import type { Meta, StoryObj } from "@storybook/react";
2
+ import AlgoliaDynamicSearchLeybold from "./algolia-dynamic-search";
3
+ declare const meta: Meta<typeof AlgoliaDynamicSearchLeybold>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof AlgoliaDynamicSearchLeybold>;
6
+ export declare const Products: Story;
7
+ export declare const ProductDetails: Story;
@@ -0,0 +1,35 @@
1
+ import React from 'react';
2
+ export interface ButtonProps {
3
+ /**
4
+ * Button content
5
+ */
6
+ children: React.ReactNode;
7
+ /**
8
+ * Button variant
9
+ */
10
+ variant?: 'primary' | 'secondary' | 'outline' | 'text';
11
+ /**
12
+ * Button size
13
+ */
14
+ size?: 'small' | 'medium' | 'large';
15
+ /**
16
+ * Is button disabled?
17
+ */
18
+ disabled?: boolean;
19
+ /**
20
+ * Optional click handler
21
+ */
22
+ onClick?: () => void;
23
+ /**
24
+ * Button type
25
+ */
26
+ type?: 'button' | 'submit' | 'reset';
27
+ /**
28
+ * Additional CSS classes
29
+ */
30
+ className?: string;
31
+ }
32
+ /**
33
+ * Primary UI component for user interaction
34
+ */
35
+ export declare const Button: React.FC<ButtonProps>;
@@ -0,0 +1,15 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { Button } from './Button';
3
+ declare const meta: Meta<typeof Button>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof Button>;
6
+ export declare const Primary: Story;
7
+ export declare const Secondary: Story;
8
+ export declare const Outline: Story;
9
+ export declare const Text: Story;
10
+ export declare const Small: Story;
11
+ export declare const Medium: Story;
12
+ export declare const Large: Story;
13
+ export declare const Disabled: Story;
14
+ export declare const AllVariants: Story;
15
+ export declare const AllSizes: Story;
@@ -0,0 +1,2 @@
1
+ export { Button } from './Button';
2
+ export type { ButtonProps } from './Button';
@@ -0,0 +1,2 @@
1
+ import "./qr-form.scss";
2
+ export declare const QrFormLeybold: (props: any) => JSX.Element;
@@ -0,0 +1,7 @@
1
+ import type { Meta, StoryObj } from "@storybook/react";
2
+ import { QrFormLeybold } from "./Qr-form";
3
+ declare const meta: Meta<typeof QrFormLeybold>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof QrFormLeybold>;
6
+ export declare const Default: Story;
7
+ export declare const AEM: Story;