@nok-integration/storefront-react 0.21.1 → 0.22.1

package/dist/styles.css

@@ -32,6 +32,7 @@
   --color-text-disabled: #9ea2a4;
   --color-text-strong: #f9fafa;
   --color-surface-default: #f9fafa;
+  --color-surface-base: #ffffff;
   --color-surface-soft: #f0f2f2;
   --color-surface-subtle: #dddedf;
   --color-surface-max: #080e12;
@@ -78,6 +79,7 @@
   --color-text-strong: #0c161c;
   --color-text-disabled: #6b7378;
   --color-surface-default: #080e12;
+  --color-surface-base: #080e12;
   --color-surface-soft: #171e23;
   --color-surface-subtle: #2a3238;
   --color-surface-max: #f9fafa;
@@ -91,6 +93,7 @@
   --color-text-strong: #f9fafa;
   --color-text-disabled: #9ea2a4;
   --color-surface-default: #f9fafa;
+  --color-surface-base: #ffffff;
   --color-surface-soft: #f0f2f2;
   --color-surface-subtle: #dddedf;
   --color-surface-max: #080e12;
@@ -2400,7 +2403,7 @@
   text-decoration: line-through;
   white-space: nowrap;
 }
-._box_1cf1a_1 {
+._box_w9fja_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
@@ -2408,23 +2411,23 @@
   border-radius: var(--radius-8);
   background: var(--color-surface-soft);
 }
-._row_1cf1a_10 {
+._row_w9fja_10 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
-._icon_1cf1a_16 {
+._icon_w9fja_16 {
   display: block;
   flex-shrink: 0;
-  color: var(--color-text-default);
+  color: var(--color-surface-max);
 }
-._label_1cf1a_22 {
+._label_w9fja_22 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._divider_1cf1a_29 {
+._divider_w9fja_29 {
   height: 1px;
   background: var(--color-border-default);
 }
@@ -2574,6 +2577,80 @@
 ._dotActive_1vbj7_100 {
   background: #ffffff;
 }
+._row_l4edh_1 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4) var(--space-6);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+._badge_l4edh_11 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  padding: var(--space-4) var(--space-6);
+  border-radius: var(--radius-2);
+  background: var(--color-surface-soft);
+  color: var(--color-text-default);
+  font-size: var(--type-trimmed-xs-size);
+  line-height: var(--type-trimmed-xs-line);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.12px;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+._gallery_1m6o7_1 {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-16);
+}
+._thumbs_1m6o7_7 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  flex: 0 0 72px;
+}
+._thumb_1m6o7_7 {
+  position: relative;
+  width: 72px;
+  height: 90px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-4);
+  background: var(--color-surface-soft);
+  overflow: hidden;
+  cursor: pointer;
+}
+._thumb_1m6o7_7[aria-pressed=true]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 2px solid var(--color-surface-max);
+  border-radius: inherit;
+}
+._main_1m6o7_34 {
+  position: relative;
+  flex: 0 0 440px;
+  width: 440px;
+  height: 550px;
+  border-radius: var(--radius-4);
+  background: var(--color-surface-soft);
+  overflow: hidden;
+}
+._image_1m6o7_44 {
+  object-fit: cover;
+  object-position: top center;
+}
+._badges_1m6o7_49 {
+  position: absolute;
+  top: var(--space-16);
+  left: var(--space-16);
+}
+._badges_1m6o7_49 li {
+  background: var(--color-surface-default);
+}
 ._scrim_r4azu_8 {
   position: fixed;
   inset: 0;
@@ -3089,30 +3166,6 @@
   position: absolute;
   inset: -10px -4px;
 }
-._row_l4edh_1 {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-4) var(--space-6);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-._badge_l4edh_11 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 20px;
-  padding: var(--space-4) var(--space-6);
-  border-radius: var(--radius-2);
-  background: var(--color-surface-soft);
-  color: var(--color-text-default);
-  font-size: var(--type-trimmed-xs-size);
-  line-height: var(--type-trimmed-xs-line);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: 0.12px;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
 ._banner_1xvw4_2 {
   display: flex;
   align-items: center;
@@ -3144,33 +3197,33 @@
   font-weight: var(--font-weight-bold);
   font-variant-numeric: tabular-nums;
 }
-._page_1hv16_1 {
+._page_1479k_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
-._content_1hv16_14 {
+._content_1479k_14 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
   padding: 0 var(--space-16);
 }
-._intro_1hv16_21 {
+._intro_1479k_21 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }
-._productInfo_1hv16_28 {
+._productInfo_1479k_28 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
-._titlePrice_1hv16_34 {
+._titlePrice_1479k_34 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }
-._title_1hv16_34 {
+._title_1479k_34 {
   margin: 0;
   font-size: var(--type-heading-lg-size);
   line-height: 1.1;
@@ -3181,18 +3234,72 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-._availability_1hv16_55 {
+._availability_1479k_55 {
   margin: 0;
   font-size: var(--type-trimmed-md-size);
   line-height: var(--type-trimmed-md-line);
   font-weight: var(--font-weight-bold);
 }
-._low_1hv16_62 {
+._low_1479k_62 {
   color: var(--color-state-text-warning);
 }
-._oos_1hv16_66 {
+._oos_1479k_66 {
   color: var(--color-state-surface-critical-default);
 }
+._breadcrumb_1479k_70,
+._help_1479k_71,
+._desktopGallery_1479k_72 {
+  display: none;
+}
+@media (min-width: 1200px) {
+  ._wide_1479k_77 {
+    display: grid;
+    grid-template-columns: 528px 464px;
+    grid-template-rows: auto auto auto auto 1fr;
+    grid-template-areas: "crumbs crumbs" "gallery details" "gallery cta" "gallery help" "gallery .";
+    column-gap: 96px;
+    row-gap: 0;
+    justify-content: center;
+    align-content: start;
+    padding: 54px 0 64px;
+    background: var(--color-surface-base);
+  }
+  ._wide_1479k_77 ._breadcrumb_1479k_70 {
+    display: block;
+    grid-area: crumbs;
+    margin-bottom: 29px;
+  }
+  ._wide_1479k_77 ._phoneGallery_1479k_101 {
+    display: none;
+  }
+  ._wide_1479k_77 ._desktopGallery_1479k_72 {
+    display: block;
+    grid-area: gallery;
+  }
+  ._wide_1479k_77 ._content_1479k_14 {
+    grid-area: details;
+    padding: 0;
+  }
+  ._wide_1479k_77 ._introBadges_1479k_115 {
+    display: none;
+  }
+  ._wide_1479k_77 ._sizes_1479k_119 {
+    --color-surface-default: var(--color-surface-base);
+  }
+  ._wide_1479k_77 ._cta_1479k_123 {
+    grid-area: cta;
+    position: static;
+    padding: var(--space-16) 0 var(--space-24);
+    border-radius: 0;
+    filter: none;
+    background: transparent;
+    z-index: auto;
+  }
+  ._wide_1479k_77 ._help_1479k_71 {
+    display: block;
+    grid-area: help;
+  }
+}
 ._hero_1tiqx_10 {
   --hero-height: clamp(480px, calc(100svh - var(--hero-top, 0px)), 812px);
   position: relative;
@@ -3506,7 +3613,7 @@
   column-gap: var(--space-12);
   row-gap: var(--space-12);
 }
-._hero_1j0m8_1 {
+._hero_dctyt_1 {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -3515,11 +3622,11 @@
   overflow: hidden;
   background: var(--color-surface-default);
 }
-._image_1j0m8_11 {
+._image_dctyt_11 {
   position: absolute;
   inset: 0;
 }
-._image_1j0m8_11::after {
+._image_dctyt_11::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3531,27 +3638,27 @@
       rgba(8, 14, 18, 0) 382px);
   pointer-events: none;
 }
-._image_1j0m8_11 img {
+._image_dctyt_11 img {
   object-fit: cover;
   object-position: top center;
 }
-._foot_1j0m8_34 {
+._foot_dctyt_34 {
   position: relative;
   display: flex;
   flex-direction: column;
 }
-._text_1j0m8_40 {
+._text_dctyt_40 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-16);
   padding: 0 var(--space-16) var(--space-8);
 }
-._text_1j0m8_40 ._logo_1j0m8_48 {
+._text_dctyt_40 ._logo_dctyt_48 {
   width: 48px;
   height: 48px;
 }
-._copy_1j0m8_53 {
+._copy_dctyt_53 {
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -3559,14 +3666,14 @@
   text-align: center;
   overflow-wrap: break-word;
 }
-._headline_1j0m8_62 {
+._headline_dctyt_62 {
   margin: 0;
   font-size: 36px;
   line-height: 1.1;
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._body_1j0m8_70 {
+._body_dctyt_70 {
   margin: 0;
   font-size: var(--type-paragraph-size);
   line-height: var(--type-paragraph-line);
@@ -3574,9 +3681,122 @@
   color: var(--color-text-default);
   white-space: pre-line;
 }
-._cta_1j0m8_79 {
+._cta_dctyt_79 {
   padding: var(--space-16) var(--space-16) var(--space-24);
 }
+._video_dctyt_83 {
+  object-fit: cover;
+}
+._desktopOnly_dctyt_87 {
+  display: none;
+}
+@media (min-width: 1200px) {
+  ._hero_dctyt_1 {
+    justify-content: center;
+    min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)));
+  }
+  ._phoneOnly_dctyt_97 {
+    display: none;
+  }
+  ._desktopOnly_dctyt_87 {
+    display: block;
+  }
+  ._image_dctyt_11::after {
+    background:
+      linear-gradient(
+        to right,
+        rgba(8, 14, 18, 0.9) 0,
+        rgba(8, 14, 18, 0) 53.33%);
+  }
+  ._image_dctyt_11 img,
+  ._video_dctyt_83 {
+    object-position: center;
+  }
+  ._foot_dctyt_34 {
+    gap: var(--space-16);
+    width: 100%;
+    max-width: 624px;
+    padding-left: 64px;
+  }
+  ._text_dctyt_40 {
+    align-items: flex-start;
+    padding: 0;
+  }
+  ._text_dctyt_40 ._logo_dctyt_48 {
+    display: none;
+  }
+  ._copy_dctyt_53 {
+    gap: var(--space-16);
+    text-align: left;
+  }
+  ._headline_dctyt_62 {
+    font-size: 64px;
+    line-height: 0.9375;
+    letter-spacing: -0.64px;
+  }
+  ._body_dctyt_70 {
+    max-width: 520px;
+    font-size: 20px;
+    line-height: 1.4;
+    white-space: normal;
+  }
+  ._cta_dctyt_79 {
+    padding: var(--space-8) 0 0;
+  }
+  ._cta_dctyt_79 > * {
+    width: auto;
+    min-width: 173px;
+  }
+}
+._crumbs_wl5mz_1 {
+  display: flex;
+  align-items: center;
+  height: 21px;
+  gap: var(--space-8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--color-text-default);
+  white-space: nowrap;
+}
+._home_wl5mz_13 {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: 16px;
+  line-height: normal;
+  opacity: 0.6;
+  cursor: pointer;
+}
+._separator_wl5mz_25 {
+  font-size: 14px;
+  line-height: 1.5;
+  opacity: 0.6;
+}
+._current_wl5mz_31 {
+  font-size: 16px;
+  line-height: normal;
+}
+._help_wl5mz_36 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  width: 100%;
+  padding: var(--space-8) 0;
+  border: 0;
+  background: none;
+  color: var(--color-text-default);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+._helpLabel_wl5mz_50 {
+  font-size: 14px;
+  line-height: 1.5;
+  text-decoration: underline;
+}
 ._showcase_9ibf6_14 {
   --chrome-bleed: 0px;
   background: #080e12;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.21.1",
+  "version": "0.22.1",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "type": "module",