@scrippsproduct/networks-ui-library 2.0.7 → 2.0.8
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes
|
|
1
|
+
@keyframes _fade_4mm9x_1{0%{opacity:0}to{opacity:1}}@keyframes _dim-fade_4mm9x_1{0%{scale:1;opacity:1}to{scale:.98;opacity:.2}}@keyframes _fade-in_4mm9x_1{0%{opacity:0}to{opacity:1}}@keyframes _fade-out_4mm9x_1{0%{opacity:1}to{opacity:0}}@keyframes _page-fade-in_4mm9x_1{0%{opacity:0}to{opacity:1}}@keyframes _backdrop-reveal_4mm9x_1{0%{opacity:0}to{opacity:1}}@keyframes _slide-up_4mm9x_1{0%{transform:translate3d(0,10rem,0);opacity:.1}50%{opacity:.2}to{transform:translateZ(0);opacity:1}}@keyframes _slidein_4mm9x_1{0%{transform:translate3d(-20rem,0,0);opacity:.1}50%{opacity:.2}to{transform:translateZ(0);opacity:1}}@keyframes _slideout_4mm9x_1{0%{transform:translate3d(20rem,0,0);opacity:1}50%{opacity:.5}to{transform:translateZ(0);opacity:1}}@keyframes _promo-slide-in-left_4mm9x_1{0%{transform:translate(-10em);opacity:0}to{transform:none;opacity:1}}@keyframes _promo-slide-in-right_4mm9x_1{0%{transform:translate(10em);opacity:0}to{transform:none;opacity:1}}@keyframes _list-item-slide-in_4mm9x_1{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes _scale_4mm9x_1{0%{transform:scale(.1);opacity:.7}25%{transform:scale(1);opacity:1}50%{transform:scale(.1);opacity:.7}75%{transform:scale(1);opacity:1}to{transform:scale(.1);opacity:.7}}@keyframes _reveal_4mm9x_1{0%{transform-origin:center;transform:scale3d(.4,.4,1);opacity:0}to{transform:scaleZ(1);opacity:1}}@keyframes _reveal-overlay_4mm9x_1{0%{transform-origin:left top;transform:scaleY(0);opacity:.3}to{transform-origin:left top;transform:scale(1);opacity:1}}@keyframes _hide_4mm9x_1{0%{transform-origin:center;transform:scaleZ(1);border-radius:0%;opacity:1}to{transform:scale3d(0,0,1);border-radius:50%;opacity:0}}@keyframes _hide-overlay_4mm9x_1{0%{transform-origin:left top;transform:scale(1);opacity:1}to{transform-origin:left top;transform:scaleY(0);opacity:.3}}@keyframes _rotate-full_4mm9x_1{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes _ui-spinner-rotate-left_4mm9x_1{0%{transform:rotate(0);opacity:.4}25%{transform:rotate(180deg);opacity:.8}50%{transform:rotate(180deg)}75%{transform:rotate(360deg);opacity:0}to{transform:rotate(360deg)}}@keyframes _ui-spinner-rotate-right_4mm9x_1{0%{transform:rotate(0)}25%{transform:rotate(0);opacity:0}50%{transform:rotate(180deg);opacity:.4}75%{transform:rotate(180deg);opacity:.8}to{transform:rotate(360deg);opacity:.4}}@keyframes _clip-path-open_4mm9x_1{0%{clip-path:var(--clip-path-start)}to{clip-path:var(--clip-path-end)}}@keyframes _clip-path-close_4mm9x_1{0%{clip-path:var(--clip-path-end)}to{clip-path:var(--clip-path-start)}}._date-navigation__list_4mm9x_257{--pointer-position: 0;position:relative;display:flex;justify-content:flex-start;margin:0 auto;padding:.5rem 1rem 1.5rem;list-style:none;background:transparent}date-navigation{position:relative;display:block;padding-block-start:1rem}date-navigation[data-state=retracting] ._date-navigation__list_4mm9x_257{animation-name:_slidein_4mm9x_1;animation-duration:.325s;animation-timing-function:cubic-bezier(.18,.1,.09,1.04);animation-fill-mode:forwards;animation-direction:normal}date-navigation[data-state=advancing] ._date-navigation__list_4mm9x_257{animation-name:_slideout_4mm9x_1;animation-duration:.325s;animation-timing-function:cubic-bezier(.18,.1,.09,1.04);animation-fill-mode:forwards;animation-direction:normal}@media screen and (max-width:60rem){date-navigation{padding-block-start:0}}date-navigation-list{overflow:hidden;display:block}date-navigation-controls{display:contents}._date-navigation__control_4mm9x_302{cursor:pointer;position:absolute;z-index:1;top:50%;transform:translateY(-50%);translate:0 1rem;scale:1.5;overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:1;inline-size:4rem;padding:0;border:1px solid transparent;border-radius:50%;color:#000;text-indent:10ch;background:#fff;transition:opacity .5s ease-in-out}._date-navigation__control_4mm9x_302>i>svg{display:block;max-inline-size:100%;block-size:auto;stroke:currentcolor}._date-navigation__control--previous_4mm9x_331{inset-inline-start:-2rem;padding-inline-end:5px}._date-navigation__control--next_4mm9x_336{inset-inline-end:-2rem;padding-inline-start:5px}._date-navigation__control_4mm9x_302[disabled]{cursor:not-allowed;opacity:.4}._date-navigation__item_4mm9x_347{--flex-basis: 14.2857%;flex-basis:var(--flex-basis);border-right:1px solid rgba(255,255,255,.4);text-align:center}._date-navigation__item_4mm9x_347:last-child{border-width:0}@media screen and (max-width:37.5rem){._date-navigation__item_4mm9x_347{--flex-basis: 25%}}._date-navigation__day_4mm9x_362{cursor:pointer;border:none;background:transparent}._date-navigation__month-day-break_4mm9x_368{display:none}._date-navigation__weekday_4mm9x_372,._date-navigation__date_4mm9x_373{font-size:1.2rem;text-transform:uppercase;transition:transform .225s ease-out}._date-navigation__weekday_4mm9x_372{font-size:2rem}@media screen and (max-width:80rem){._date-navigation__control--previous_4mm9x_331{inset-inline-start:-1.4rem}._date-navigation__control--next_4mm9x_336{inset-inline-end:-1.2rem}}@media screen and (max-width:71.5rem){._date-navigation__weekday_4mm9x_372{font-size:1.4rem}._date-navigation__date_4mm9x_373{font-size:1rem}}@media screen and (max-width:60rem){._date-navigation__control_4mm9x_302{translate:0 .6rem}._date-navigation__item_4mm9x_347{padding-inline:.35rem}}@media screen and (max-width:46.875rem){._date-navigation__control_4mm9x_302{translate:0 -1rem;scale:.7}._date-navigation__control--previous_4mm9x_331{inset-inline-start:-1.6rem}._date-navigation__control--next_4mm9x_336{inset-inline-end:-1.5rem}}@media screen and (max-width:31.25rem){._date-navigation__weekday_4mm9x_372{font-size:1rem}._date-navigation__date_4mm9x_373{font-size:.8rem;white-space:nowrap}}@media screen and (max-width:25rem){._date-navigation__month-day-break_4mm9x_368{display:inline}}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { jsxs as _, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
2
|
+
import { useState as m, useReducer as M, useRef as g, useCallback as S, useEffect as k } from "react";
|
|
3
3
|
import { f as s } from "../../format-YhWt2D8M.mjs";
|
|
4
4
|
import { classes as o } from "../../utils/helpers.js";
|
|
5
5
|
import { u as W } from "../../useScheduleContext-D7FdzNxe.mjs";
|
|
6
|
-
import { C as
|
|
7
|
-
import { C as
|
|
6
|
+
import { C as w } from "../../chevron-left-D0UjbrKw.mjs";
|
|
7
|
+
import { C as A } from "../../chevron-right-0ZF3LruR.mjs";
|
|
8
8
|
import '../../assets/DateNavigation.css';const n = {
|
|
9
|
-
"date-navigation__list": "_date-
|
|
10
|
-
"date-navigation__control": "_date-
|
|
11
|
-
"date-navigation__control--previous": "_date-navigation__control--
|
|
12
|
-
"date-navigation__control--next": "_date-navigation__control--
|
|
13
|
-
"date-navigation__item": "_date-
|
|
14
|
-
"date-navigation__day": "_date-
|
|
15
|
-
"date-navigation__month-day-break": "_date-navigation__month-day-
|
|
16
|
-
"date-navigation__weekday": "_date-
|
|
17
|
-
"date-navigation__date": "_date-
|
|
9
|
+
"date-navigation__list": "_date-navigation__list_4mm9x_257",
|
|
10
|
+
"date-navigation__control": "_date-navigation__control_4mm9x_302",
|
|
11
|
+
"date-navigation__control--previous": "_date-navigation__control--previous_4mm9x_331",
|
|
12
|
+
"date-navigation__control--next": "_date-navigation__control--next_4mm9x_336",
|
|
13
|
+
"date-navigation__item": "_date-navigation__item_4mm9x_347",
|
|
14
|
+
"date-navigation__day": "_date-navigation__day_4mm9x_362",
|
|
15
|
+
"date-navigation__month-day-break": "_date-navigation__month-day-break_4mm9x_368",
|
|
16
|
+
"date-navigation__weekday": "_date-navigation__weekday_4mm9x_372",
|
|
17
|
+
"date-navigation__date": "_date-navigation__date_4mm9x_373"
|
|
18
18
|
};
|
|
19
|
-
function
|
|
19
|
+
function L(a, i) {
|
|
20
20
|
switch (i.type) {
|
|
21
21
|
case "NAVIGATE_TO_WEEK":
|
|
22
22
|
return i.targetWeekIndex > i.currentWeekIndex ? "advancing" : i.targetWeekIndex < i.currentWeekIndex ? "retracting" : a;
|
|
@@ -27,10 +27,10 @@ function A(a, i) {
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
function V() {
|
|
30
|
-
const { weeks: a, setCurrentDate: i } = W(), [r,
|
|
31
|
-
h({ type: "NAVIGATE_TO_WEEK", currentWeekIndex: r, targetWeekIndex: t }),
|
|
30
|
+
const { weeks: a, setCurrentDate: i } = W(), [r, p] = m(0), [b, C] = m(a[0]), [l, y] = m(a[0][0]), [N, h] = M(L, "idle"), d = g(null), D = g(0), f = g(s(new Date(l.fullDateStr), "yyyy-MM-dd")), x = (t) => {
|
|
31
|
+
h({ type: "NAVIGATE_TO_WEEK", currentWeekIndex: r, targetWeekIndex: t }), p(t);
|
|
32
32
|
}, E = (t) => {
|
|
33
|
-
s(t.date, "yyyy-MM-dd") !==
|
|
33
|
+
s(t.date, "yyyy-MM-dd") !== f.current && (f.current = s(t.date, "yyyy-MM-dd"), y(t), i(t.date));
|
|
34
34
|
}, c = S(() => {
|
|
35
35
|
if (d.current === null) return;
|
|
36
36
|
const t = d.current;
|
|
@@ -38,9 +38,9 @@ function V() {
|
|
|
38
38
|
t.addEventListener("animationend", c, { once: !0 });
|
|
39
39
|
}), h({ type: "ANIMATION_COMPLETE" });
|
|
40
40
|
}, []);
|
|
41
|
-
return
|
|
41
|
+
return k(() => {
|
|
42
42
|
d.current !== null && (d.current.removeEventListener("animationend", c), d.current.addEventListener("animationend", c, { once: !0 }));
|
|
43
|
-
}, [c]),
|
|
43
|
+
}, [c]), k(() => {
|
|
44
44
|
C(a[r]);
|
|
45
45
|
const t = r ? 0 : 1, I = s(l.date, "yyyy-MM-dd"), u = a[t].findIndex(
|
|
46
46
|
(v) => s(v.date, "yyyy-MM-dd") === I
|
|
@@ -63,10 +63,10 @@ function V() {
|
|
|
63
63
|
disabled: r === 0 ? !0 : void 0,
|
|
64
64
|
type: "button",
|
|
65
65
|
onClick: () => {
|
|
66
|
-
|
|
66
|
+
x(0);
|
|
67
67
|
},
|
|
68
68
|
children: [
|
|
69
|
-
/* @__PURE__ */ e("i", { "aria-hidden": "true", children: /* @__PURE__ */ e(
|
|
69
|
+
/* @__PURE__ */ e("i", { "aria-hidden": "true", children: /* @__PURE__ */ e(w, { height: 48, width: 48 }) }),
|
|
70
70
|
/* @__PURE__ */ e("span", { className: "sr-only", children: "Current Week" })
|
|
71
71
|
]
|
|
72
72
|
}
|
|
@@ -83,10 +83,10 @@ function V() {
|
|
|
83
83
|
disabled: r === 1 ? !0 : void 0,
|
|
84
84
|
type: "button",
|
|
85
85
|
onClick: () => {
|
|
86
|
-
|
|
86
|
+
x(1);
|
|
87
87
|
},
|
|
88
88
|
children: [
|
|
89
|
-
/* @__PURE__ */ e("i", { "aria-hidden": "true", children: /* @__PURE__ */ e(
|
|
89
|
+
/* @__PURE__ */ e("i", { "aria-hidden": "true", children: /* @__PURE__ */ e(A, { height: 48, width: 48 }) }),
|
|
90
90
|
/* @__PURE__ */ e("span", { className: "sr-only", children: "Next Week" })
|
|
91
91
|
]
|
|
92
92
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsx as a, jsxs as w, Fragment as R } from "react/jsx-runtime";
|
|
2
2
|
import { useState as x, useMemo as I, useEffect as b } from "react";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
3
|
+
import { p as m } from "../../index-5kXULIVv.mjs";
|
|
4
|
+
import { classes as _ } from "../../utils/helpers.js";
|
|
5
|
+
import { PromotionsRowBlock as B } from "../PromotionsRowBlock/PromotionsRowBlock.js";
|
|
6
|
+
import { ImageCard as G } from "../ImageCard/ImageCard.js";
|
|
7
|
+
import { Carousel as A } from "../Carousel/Carousel.js";
|
|
7
8
|
import { CtaBlock as S } from "../CtaBlock/CtaBlock.js";
|
|
8
|
-
import '../../assets/PromotionsRowModule.css';const
|
|
9
|
+
import '../../assets/PromotionsRowModule.css';const M = {
|
|
9
10
|
paginationType: "dots",
|
|
10
11
|
showControls: !0,
|
|
11
12
|
controlButtonsOffset: -4,
|
|
@@ -25,21 +26,21 @@ import '../../assets/PromotionsRowModule.css';const A = {
|
|
|
25
26
|
cellsPosition: "flex-start",
|
|
26
27
|
wrapAround: !1
|
|
27
28
|
};
|
|
28
|
-
function
|
|
29
|
+
function O({
|
|
29
30
|
title: u = "",
|
|
30
|
-
promos:
|
|
31
|
+
promos: r = [],
|
|
31
32
|
shouldClampContent: y = !0,
|
|
32
33
|
handleClicks: d = null
|
|
33
34
|
}) {
|
|
34
35
|
const [f, P] = x([]), C = () => {
|
|
35
|
-
}, c = I(() => y ?
|
|
36
|
+
}, c = I(() => y ? r.map((n) => n.content ? {
|
|
36
37
|
...n,
|
|
37
|
-
content: /* @__PURE__ */ a("div", { className: "promotions-row__clamped-content", children: n.content })
|
|
38
|
-
} : n) :
|
|
38
|
+
content: /* @__PURE__ */ a("div", { className: "promotions-row__clamped-content", children: typeof n.content == "string" ? m(n.content) : n.content })
|
|
39
|
+
} : n) : r, [r, y]);
|
|
39
40
|
return b(() => {
|
|
40
41
|
const t = (n) => {
|
|
41
42
|
const o = n.map((e) => {
|
|
42
|
-
var l, i,
|
|
43
|
+
var l, i, s;
|
|
43
44
|
return {
|
|
44
45
|
title: "",
|
|
45
46
|
layout: "ImageCard",
|
|
@@ -58,7 +59,7 @@ function D({
|
|
|
58
59
|
{
|
|
59
60
|
content: (l = e.overlayContent) == null ? void 0 : l.content,
|
|
60
61
|
cta: (i = e.overlayContent) == null ? void 0 : i.cta,
|
|
61
|
-
title: (
|
|
62
|
+
title: (s = e.overlayContent) == null ? void 0 : s.title
|
|
62
63
|
}
|
|
63
64
|
) : "",
|
|
64
65
|
cta: e.cta
|
|
@@ -68,22 +69,22 @@ function D({
|
|
|
68
69
|
P(o);
|
|
69
70
|
};
|
|
70
71
|
c.length > 4 && t(c);
|
|
71
|
-
}, [c, d]),
|
|
72
|
+
}, [c, d]), r.length > 4 && f.length ? /* @__PURE__ */ w(R, { children: [
|
|
72
73
|
/* @__PURE__ */ a("h1", { className: ["h3", "promotions-row__header"].join(" "), children: u }),
|
|
73
74
|
/* @__PURE__ */ a(
|
|
74
|
-
|
|
75
|
+
A,
|
|
75
76
|
{
|
|
76
77
|
cells: f,
|
|
77
78
|
id: `promotions-row-${Date.now()}`,
|
|
78
|
-
options:
|
|
79
|
+
options: M
|
|
79
80
|
}
|
|
80
81
|
)
|
|
81
82
|
] }) : /* @__PURE__ */ w("section", { className: "promotions-row", children: [
|
|
82
|
-
/* @__PURE__ */ a("h2", { className:
|
|
83
|
-
/* @__PURE__ */ a(
|
|
84
|
-
var n, o, e, l, i,
|
|
83
|
+
/* @__PURE__ */ a("h2", { className: _(["h2", "promotions-row__header"]), children: u }),
|
|
84
|
+
/* @__PURE__ */ a(B, { gap: "2rem", children: c.map((t) => {
|
|
85
|
+
var n, o, e, l, i, s, g, h, v;
|
|
85
86
|
return /* @__PURE__ */ a(
|
|
86
|
-
|
|
87
|
+
G,
|
|
87
88
|
{
|
|
88
89
|
classname: t == null ? void 0 : t.classname,
|
|
89
90
|
content: t.content,
|
|
@@ -97,7 +98,7 @@ function D({
|
|
|
97
98
|
btnGradientStartColor: (e = t.overlayContent) == null ? void 0 : e.btnGradientStartColor,
|
|
98
99
|
content: (l = t.overlayContent) == null ? void 0 : l.content,
|
|
99
100
|
cta: (i = t.overlayContent) == null ? void 0 : i.cta,
|
|
100
|
-
ctaButtonStyle: (
|
|
101
|
+
ctaButtonStyle: (s = t.overlayContent) == null ? void 0 : s.ctaButtonStyle,
|
|
101
102
|
title: (g = t.overlayContent) == null ? void 0 : g.title,
|
|
102
103
|
titleImageUrl: (h = t.overlayContent) == null ? void 0 : h.titleImageUrl,
|
|
103
104
|
type: (v = t.overlayContent) == null ? void 0 : v.type
|
|
@@ -112,6 +113,6 @@ function D({
|
|
|
112
113
|
] });
|
|
113
114
|
}
|
|
114
115
|
export {
|
|
115
|
-
|
|
116
|
-
|
|
116
|
+
O as PromotionsRowModule,
|
|
117
|
+
O as default
|
|
117
118
|
};
|
package/package.json
CHANGED