@nok-integration/storefront-react 0.13.0 → 0.14.0

package/dist/standalone/styles.css

@@ -47,6 +47,11 @@
   --color-state-text-success: #147e4a;
   --color-state-surface-success-soft: #def1e9;
   --color-state-surface-critical-default: #d12424;
+  /* semantic/state/text/critical + .../surface/critical/soft. Same hex as the surface
+     token above, and a separate token in DAZN's library: one paints a solid critical
+     surface, the other writes critical text on a pale one. Keep them apart. */
+  --color-state-text-critical: #d12424;
+  --color-state-surface-critical-soft: #f5e5e5;
   --color-state-text-warning: #ff9600;
   --color-state-surface-warning-soft: #fcf1e1;
 
@@ -1162,6 +1167,196 @@
 ._summaryCard_1eqkm_275 > :last-child {
   padding: 0 var(--space-16);
 }
+/*
+ * Figma `mobile/order/status-badge` — 24px tall, 2px radius, 12px bold uppercase.
+ * Squarer and tighter than the catalogue `Badge`, which is a pill; they are separate
+ * components in the design system and stay separate here.
+ */
+._badge_ghd02_6 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  height: 24px;
+  min-width: 20px;
+  padding: var(--space-4) var(--space-6);
+  border-radius: var(--radius-2);
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 1;
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+._progress_ghd02_22 {
+  background: var(--color-state-surface-warning-soft);
+  color: var(--color-state-text-warning);
+}
+
+._delivered_ghd02_27 {
+  background: var(--color-state-surface-success-soft);
+  color: var(--color-state-text-success);
+}
+
+._cancelled_ghd02_32 {
+  background: var(--color-state-surface-critical-soft);
+  color: var(--color-state-text-critical);
+}
+/* Figma `mobile/order/list` (4024:58594). */
+._page_y686q_2 {
+  list-style: none;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  padding: var(--space-16) var(--space-16) var(--space-24);
+}
+
+._empty_y686q_11 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* The design centres the empty state in the whole screen below the header, not at the
+     top of an otherwise blank page. */
+  min-height: 60dvh;
+}
+
+/* `mobile/button`, the design's own dark CTA. Not the shared `Button` primary, whose
+   shape is the cart's; this one is content-width with a 48px floor. */
+._cta_y686q_22 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-8);
+  min-height: 48px;
+  padding: var(--space-12);
+  border: 0;
+  border-radius: var(--radius-8);
+  background: var(--color-surface-max);
+  color: var(--color-text-strong);
+  font-family: inherit;
+  font-size: var(--type-trimmed-md-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  cursor: pointer;
+}
+
+._cta_y686q_22:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+._card_y686q_45 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-24);
+  width: 100%;
+  padding: var(--space-16);
+  border: 0;
+  border-radius: var(--radius-12);
+  background: var(--color-surface-soft);
+  color: inherit;
+  font-family: inherit;
+  text-align: left;
+  overflow: hidden;
+}
+
+._tappable_y686q_60 {
+  cursor: pointer;
+}
+
+._tappable_y686q_60:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+._head_y686q_69 {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-8);
+  width: 100%;
+}
+
+._heading_y686q_77 {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--space-8);
+  min-width: 0;
+  color: var(--color-text-default);
+}
+
+._title_y686q_86 {
+  font-size: var(--type-heading-md-size);
+  font-weight: var(--font-weight-bold);
+  /* The frame's own 1.32, not the token's 1.25 — that value was set from a different
+     screen and moving it would reflow every heading in the package. */
+  line-height: 1.32;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._date_y686q_97 {
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 1;
+}
+
+._bottom_y686q_102 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-8);
+  width: 100%;
+}
+
+._strip_y686q_110 {
+  display: flex;
+  gap: var(--space-6);
+}
+
+._tile_y686q_115 {
+  position: relative;
+  flex: 0 0 56px;
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-6);
+  overflow: hidden;
+  background: var(--color-surface-subtle);
+}
+
+._image_y686q_125 {
+  object-fit: cover;
+}
+
+._placeholder_y686q_129 {
+  /* No picture resolved for any line. A flat tile keeps the row's rhythm rather than
+     collapsing the strip and shifting the chevron. */
+  background: var(--color-surface-subtle);
+}
+
+/* The "+N" tile: the last thumbnail, dimmed, with the count over it. */
+._more_y686q_136 {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.54);
+  color: #f9fafa;
+  font-size: var(--type-trimmed-md-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+}
+
+._chevron_y686q_149 {
+  display: inline-flex;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  color: var(--color-text-default);
+}
 /* 8 where Figma declares 12, for the reason set out on `.titlePrice` below: the gap sits
    against a text layer whose CSS line box carries leading that Figma's does not. */
 ._tile_1u9l8_3 {
@@ -3293,3 +3488,157 @@
   font-variant-numeric: tabular-nums;
   pointer-events: none;
 }
+/*
+ * Figma `Settings` (636:51006): the card is anchored under the 96px header, inset 16px on
+ * each side, and sized by its content — not a bottom sheet, despite the frame's name.
+ */
+._overlay_lm5qk_5 {
+  position: fixed;
+  inset: 0;
+  z-index: 900;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  /* Clears the header the design draws this beneath. `env()` on top so a notch does not
+     put the card under the status bar in the embed. */
+  padding: calc(96px + env(safe-area-inset-top, 0px)) var(--space-16) var(--space-16);
+}
+
+._scrim_lm5qk_17 {
+  position: absolute;
+  inset: 0;
+  background: rgba(8, 14, 18, 0.5);
+}
+
+._sheet_lm5qk_23 {
+  position: relative;
+  width: 100%;
+  max-width: 343px;
+  max-height: calc(100dvh - 128px);
+  overflow-y: auto;
+  background: var(--color-surface-default);
+  border: 1px solid var(--color-border-transparent-soft);
+  border-radius: var(--radius-12);
+  display: flex;
+  flex-direction: column;
+  animation: _menu-in_lm5qk_1 160ms ease;
+}
+
+@keyframes _menu-in_lm5qk_1 {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._sheet_lm5qk_23 {
+    animation: none;
+  }
+}
+
+/* `.sheet-header`: 48px, its own bottom rule, and the close control alone on the right.
+   The left and centre slots the component defines are empty in this instance. */
+._header_lm5qk_56 {
+  display: flex;
+  justify-content: flex-end;
+  border-bottom: 1px solid var(--color-border-transparent-soft);
+}
+
+._close_lm5qk_62 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  padding: var(--space-12);
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+._close_lm5qk_62:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-4);
+}
+
+._list_lm5qk_81 {
+  list-style: none;
+  margin: 0;
+  padding: var(--space-6) 0;
+  display: flex;
+  flex-direction: column;
+}
+
+._row_lm5qk_89 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  width: 100%;
+  padding: var(--space-12) var(--space-16);
+  border: 0;
+  border-bottom: 1px solid var(--color-border-transparent-soft);
+  background: none;
+  color: inherit;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+/*
+ * An inert row still looks exactly as designed. It is not greyed out, because it is not
+ * unavailable to this fan for a reason they could act on — the destination does not exist
+ * yet on either side, which is our problem and not something to dress up as their
+ * permission. `aria-disabled` carries the truth to a screen reader.
+ */
+._row_lm5qk_89[disabled] {
+  cursor: default;
+}
+
+._row_lm5qk_89:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+._icon_lm5qk_119 {
+  display: inline-flex;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  color: var(--color-text-default);
+}
+
+._text_lm5qk_127 {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+._title_lm5qk_135 {
+  font-size: var(--type-paragraph-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  color: var(--color-text-default);
+}
+
+._subtitle_lm5qk_142 {
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 1.52;
+  color: var(--color-text-subtle);
+}
+
+._chevron_lm5qk_148 {
+  display: inline-flex;
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-subtle);
+}

package/dist/styles.css

@@ -47,6 +47,11 @@
   --color-state-text-success: #147e4a;
   --color-state-surface-success-soft: #def1e9;
   --color-state-surface-critical-default: #d12424;
+  /* semantic/state/text/critical + .../surface/critical/soft. Same hex as the surface
+     token above, and a separate token in DAZN's library: one paints a solid critical
+     surface, the other writes critical text on a pale one. Keep them apart. */
+  --color-state-text-critical: #d12424;
+  --color-state-surface-critical-soft: #f5e5e5;
   --color-state-text-warning: #ff9600;
   --color-state-surface-warning-soft: #fcf1e1;
 
@@ -1162,6 +1167,196 @@
 ._summaryCard_1eqkm_275 > :last-child {
   padding: 0 var(--space-16);
 }
+/*
+ * Figma `mobile/order/status-badge` — 24px tall, 2px radius, 12px bold uppercase.
+ * Squarer and tighter than the catalogue `Badge`, which is a pill; they are separate
+ * components in the design system and stay separate here.
+ */
+._badge_ghd02_6 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  height: 24px;
+  min-width: 20px;
+  padding: var(--space-4) var(--space-6);
+  border-radius: var(--radius-2);
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 1;
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+._progress_ghd02_22 {
+  background: var(--color-state-surface-warning-soft);
+  color: var(--color-state-text-warning);
+}
+
+._delivered_ghd02_27 {
+  background: var(--color-state-surface-success-soft);
+  color: var(--color-state-text-success);
+}
+
+._cancelled_ghd02_32 {
+  background: var(--color-state-surface-critical-soft);
+  color: var(--color-state-text-critical);
+}
+/* Figma `mobile/order/list` (4024:58594). */
+._page_y686q_2 {
+  list-style: none;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  padding: var(--space-16) var(--space-16) var(--space-24);
+}
+
+._empty_y686q_11 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* The design centres the empty state in the whole screen below the header, not at the
+     top of an otherwise blank page. */
+  min-height: 60dvh;
+}
+
+/* `mobile/button`, the design's own dark CTA. Not the shared `Button` primary, whose
+   shape is the cart's; this one is content-width with a 48px floor. */
+._cta_y686q_22 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-8);
+  min-height: 48px;
+  padding: var(--space-12);
+  border: 0;
+  border-radius: var(--radius-8);
+  background: var(--color-surface-max);
+  color: var(--color-text-strong);
+  font-family: inherit;
+  font-size: var(--type-trimmed-md-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  cursor: pointer;
+}
+
+._cta_y686q_22:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+._card_y686q_45 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-24);
+  width: 100%;
+  padding: var(--space-16);
+  border: 0;
+  border-radius: var(--radius-12);
+  background: var(--color-surface-soft);
+  color: inherit;
+  font-family: inherit;
+  text-align: left;
+  overflow: hidden;
+}
+
+._tappable_y686q_60 {
+  cursor: pointer;
+}
+
+._tappable_y686q_60:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+._head_y686q_69 {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-8);
+  width: 100%;
+}
+
+._heading_y686q_77 {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--space-8);
+  min-width: 0;
+  color: var(--color-text-default);
+}
+
+._title_y686q_86 {
+  font-size: var(--type-heading-md-size);
+  font-weight: var(--font-weight-bold);
+  /* The frame's own 1.32, not the token's 1.25 — that value was set from a different
+     screen and moving it would reflow every heading in the package. */
+  line-height: 1.32;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._date_y686q_97 {
+  font-size: var(--type-trimmed-sm-size);
+  line-height: 1;
+}
+
+._bottom_y686q_102 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-8);
+  width: 100%;
+}
+
+._strip_y686q_110 {
+  display: flex;
+  gap: var(--space-6);
+}
+
+._tile_y686q_115 {
+  position: relative;
+  flex: 0 0 56px;
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-6);
+  overflow: hidden;
+  background: var(--color-surface-subtle);
+}
+
+._image_y686q_125 {
+  object-fit: cover;
+}
+
+._placeholder_y686q_129 {
+  /* No picture resolved for any line. A flat tile keeps the row's rhythm rather than
+     collapsing the strip and shifting the chevron. */
+  background: var(--color-surface-subtle);
+}
+
+/* The "+N" tile: the last thumbnail, dimmed, with the count over it. */
+._more_y686q_136 {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.54);
+  color: #f9fafa;
+  font-size: var(--type-trimmed-md-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+}
+
+._chevron_y686q_149 {
+  display: inline-flex;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  color: var(--color-text-default);
+}
 /* 8 where Figma declares 12, for the reason set out on `.titlePrice` below: the gap sits
    against a text layer whose CSS line box carries leading that Figma's does not. */
 ._tile_1u9l8_3 {
@@ -3293,3 +3488,157 @@
   font-variant-numeric: tabular-nums;
   pointer-events: none;
 }
+/*
+ * Figma `Settings` (636:51006): the card is anchored under the 96px header, inset 16px on
+ * each side, and sized by its content — not a bottom sheet, despite the frame's name.
+ */
+._overlay_lm5qk_5 {
+  position: fixed;
+  inset: 0;
+  z-index: 900;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  /* Clears the header the design draws this beneath. `env()` on top so a notch does not
+     put the card under the status bar in the embed. */
+  padding: calc(96px + env(safe-area-inset-top, 0px)) var(--space-16) var(--space-16);
+}
+
+._scrim_lm5qk_17 {
+  position: absolute;
+  inset: 0;
+  background: rgba(8, 14, 18, 0.5);
+}
+
+._sheet_lm5qk_23 {
+  position: relative;
+  width: 100%;
+  max-width: 343px;
+  max-height: calc(100dvh - 128px);
+  overflow-y: auto;
+  background: var(--color-surface-default);
+  border: 1px solid var(--color-border-transparent-soft);
+  border-radius: var(--radius-12);
+  display: flex;
+  flex-direction: column;
+  animation: _menu-in_lm5qk_1 160ms ease;
+}
+
+@keyframes _menu-in_lm5qk_1 {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._sheet_lm5qk_23 {
+    animation: none;
+  }
+}
+
+/* `.sheet-header`: 48px, its own bottom rule, and the close control alone on the right.
+   The left and centre slots the component defines are empty in this instance. */
+._header_lm5qk_56 {
+  display: flex;
+  justify-content: flex-end;
+  border-bottom: 1px solid var(--color-border-transparent-soft);
+}
+
+._close_lm5qk_62 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  padding: var(--space-12);
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+._close_lm5qk_62:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-4);
+}
+
+._list_lm5qk_81 {
+  list-style: none;
+  margin: 0;
+  padding: var(--space-6) 0;
+  display: flex;
+  flex-direction: column;
+}
+
+._row_lm5qk_89 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  width: 100%;
+  padding: var(--space-12) var(--space-16);
+  border: 0;
+  border-bottom: 1px solid var(--color-border-transparent-soft);
+  background: none;
+  color: inherit;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+/*
+ * An inert row still looks exactly as designed. It is not greyed out, because it is not
+ * unavailable to this fan for a reason they could act on — the destination does not exist
+ * yet on either side, which is our problem and not something to dress up as their
+ * permission. `aria-disabled` carries the truth to a screen reader.
+ */
+._row_lm5qk_89[disabled] {
+  cursor: default;
+}
+
+._row_lm5qk_89:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+._icon_lm5qk_119 {
+  display: inline-flex;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  color: var(--color-text-default);
+}
+
+._text_lm5qk_127 {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+._title_lm5qk_135 {
+  font-size: var(--type-paragraph-size);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  color: var(--color-text-default);
+}
+
+._subtitle_lm5qk_142 {
+  font-size: var(--type-trimmed-xs-size);
+  line-height: 1.52;
+  color: var(--color-text-subtle);
+}
+
+._chevron_lm5qk_148 {
+  display: inline-flex;
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-subtle);
+}