@scrippsproduct/networks-ui-library 2.0.6 → 2.0.7
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.
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { JSX } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Renders the live category palette for the documentation guide.
|
|
4
|
+
*
|
|
5
|
+
* The swatches are generated from `CATEGORY_COLORS` itself, so this table can
|
|
6
|
+
* never drift from the colours the pages actually use — add a category to the
|
|
7
|
+
* map and it appears here automatically.
|
|
8
|
+
*
|
|
9
|
+
* Categories that deliberately share a colour (a sub-category such as
|
|
10
|
+
* `Slide Layouts` reusing its parent's accent) are grouped into one row.
|
|
11
|
+
*/
|
|
12
|
+
export declare const CategoryPalette: () => JSX.Element;
|
|
13
|
+
export default CategoryPalette;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { JSX, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Callouts for the documentation pages.
|
|
4
|
+
*
|
|
5
|
+
* Hue is reserved for story categories (see `DocsHero`), so every callout
|
|
6
|
+
* shares the same neutral container and signals its severity through the
|
|
7
|
+
* icon and label alone. A callout can therefore never be mistaken for a
|
|
8
|
+
* category accent, however many categories the library grows.
|
|
9
|
+
*
|
|
10
|
+
* Label colours sit at 32-44% lightness so they clear WCAG AA against the
|
|
11
|
+
* callout's wash.
|
|
12
|
+
*/
|
|
13
|
+
export type CalloutTone = 'note' | 'tip' | 'warning' | 'danger';
|
|
14
|
+
export interface DocsCalloutProps {
|
|
15
|
+
/** Severity. Drives the icon, the label colour, and the default label. */
|
|
16
|
+
tone?: CalloutTone;
|
|
17
|
+
/** Overrides the tone's default label, e.g. "Accessibility", "Security". */
|
|
18
|
+
label?: string;
|
|
19
|
+
/** Callout body. Markdown is fine — prose, lists and code all work. */
|
|
20
|
+
children: ReactNode;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* An inline aside within a documentation page.
|
|
24
|
+
*
|
|
25
|
+
* ```mdx
|
|
26
|
+
* <DocsCallout tone="warning" label="Accessibility">
|
|
27
|
+
* Give every icon-only control an accessible name.
|
|
28
|
+
* </DocsCallout>
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
export declare const DocsCallout: ({ tone, label, children }: DocsCalloutProps) => JSX.Element;
|
|
32
|
+
export default DocsCallout;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { JSX, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Colour coding for the documentation pages.
|
|
4
|
+
*
|
|
5
|
+
* Every MDX page opens with a `<DocsHero />` whose accent colour is derived
|
|
6
|
+
* from its Storybook category, so a reader can tell at a glance which part of
|
|
7
|
+
* the library they are looking at. Hues are stored as `[h, s, l]` triples so
|
|
8
|
+
* the solid accent and its translucent wash stay in step.
|
|
9
|
+
*
|
|
10
|
+
* Lightness values are kept in the 27-54% range so white badge text clears
|
|
11
|
+
* WCAG AA contrast on every colour.
|
|
12
|
+
*
|
|
13
|
+
* To add a category, add its title (exactly as it appears in the story
|
|
14
|
+
* `title` before the first `/`) and a hue triple. Sub-categories that should
|
|
15
|
+
* share a parent's colour — such as `Slide Layouts` — reuse its triple.
|
|
16
|
+
*/
|
|
17
|
+
type Hsl = readonly [hue: number, saturation: number, lightness: number];
|
|
18
|
+
export declare const CATEGORY_COLORS: Readonly<Record<string, Hsl>>;
|
|
19
|
+
/** Resolves a category name to its solid accent colour. */
|
|
20
|
+
export declare const getCategoryColor: (category: string) => string;
|
|
21
|
+
export interface DocsHeroProps {
|
|
22
|
+
/** Storybook category — drives the accent colour and the badge text. */
|
|
23
|
+
category: string;
|
|
24
|
+
/** Component or page name, rendered as the page's `<h1>`. */
|
|
25
|
+
title: string;
|
|
26
|
+
/** Short summary. Accepts JSX so inline `<code>` and links can be used. */
|
|
27
|
+
description?: ReactNode;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* The banner at the top of every documentation page: a category badge, the
|
|
31
|
+
* page title, and a one-line summary, all tinted by category.
|
|
32
|
+
*/
|
|
33
|
+
export declare const DocsHero: ({ category, title, description }: DocsHeroProps) => JSX.Element;
|
|
34
|
+
export default DocsHero;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes
|
|
1
|
+
@keyframes _fade_kjro4_1{0%{opacity:0}to{opacity:1}}@keyframes _dim-fade_kjro4_1{0%{scale:1;opacity:1}to{scale:.98;opacity:.2}}@keyframes _fade-in_kjro4_1{0%{opacity:0}to{opacity:1}}@keyframes _fade-out_kjro4_1{0%{opacity:1}to{opacity:0}}@keyframes _page-fade-in_kjro4_1{0%{opacity:0}to{opacity:1}}@keyframes _backdrop-reveal_kjro4_1{0%{opacity:0}to{opacity:1}}@keyframes _slide-up_kjro4_1{0%{transform:translate3d(0,10rem,0);opacity:.1}50%{opacity:.2}to{transform:translateZ(0);opacity:1}}@keyframes _slidein_kjro4_1{0%{transform:translate3d(-20rem,0,0);opacity:.1}50%{opacity:.2}to{transform:translateZ(0);opacity:1}}@keyframes _slideout_kjro4_1{0%{transform:translate3d(20rem,0,0);opacity:1}50%{opacity:.5}to{transform:translateZ(0);opacity:1}}@keyframes _promo-slide-in-left_kjro4_1{0%{transform:translate(-10em);opacity:0}to{transform:none;opacity:1}}@keyframes _promo-slide-in-right_kjro4_1{0%{transform:translate(10em);opacity:0}to{transform:none;opacity:1}}@keyframes _list-item-slide-in_kjro4_1{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes _scale_kjro4_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_kjro4_1{0%{transform-origin:center;transform:scale3d(.4,.4,1);opacity:0}to{transform:scaleZ(1);opacity:1}}@keyframes _reveal-overlay_kjro4_1{0%{transform-origin:left top;transform:scaleY(0);opacity:.3}to{transform-origin:left top;transform:scale(1);opacity:1}}@keyframes _hide_kjro4_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_kjro4_1{0%{transform-origin:left top;transform:scale(1);opacity:1}to{transform-origin:left top;transform:scaleY(0);opacity:.3}}@keyframes _rotate-full_kjro4_1{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes _ui-spinner-rotate-left_kjro4_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_kjro4_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_kjro4_1{0%{clip-path:var(--clip-path-start)}to{clip-path:var(--clip-path-end)}}@keyframes _clip-path-close_kjro4_1{0%{clip-path:var(--clip-path-end)}to{clip-path:var(--clip-path-start)}}._date-navigation__list_kjro4_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_kjro4_257{animation-name:_slidein_kjro4_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_kjro4_257{animation-name:_slideout_kjro4_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_kjro4_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_kjro4_302>i>svg{display:block;max-inline-size:100%;block-size:auto;stroke:currentcolor}._date-navigation__control--previous_kjro4_331{inset-inline-start:-2rem;padding-inline-end:5px}._date-navigation__control--next_kjro4_336{inset-inline-end:-2rem;padding-inline-start:5px}._date-navigation__control_kjro4_302[disabled]{cursor:not-allowed;opacity:.4}._date-navigation__item_kjro4_347{--flex-basis: 14.285714%;flex-basis:var(--flex-basis);border-right:1px solid rgba(255,255,255,.4);text-align:center}._date-navigation__item_kjro4_347:last-child{border-width:0}@media screen and (max-width:37.5rem){._date-navigation__item_kjro4_347{--flex-basis: 25%}}._date-navigation__day_kjro4_362{cursor:pointer;border:none;background:transparent}._date-navigation__month-day-break_kjro4_368{display:none}._date-navigation__weekday_kjro4_372,._date-navigation__date_kjro4_373{font-size:1.2rem;text-transform:uppercase;transition:transform .225s ease-out}._date-navigation__weekday_kjro4_372{font-size:2rem}@media screen and (max-width:80rem){._date-navigation__control--previous_kjro4_331{inset-inline-start:-1.4rem}._date-navigation__control--next_kjro4_336{inset-inline-end:-1.2rem}}@media screen and (max-width:71.5rem){._date-navigation__weekday_kjro4_372{font-size:1.4rem}._date-navigation__date_kjro4_373{font-size:1rem}}@media screen and (max-width:60rem){._date-navigation__control_kjro4_302{translate:0 .6rem}._date-navigation__item_kjro4_347{padding-inline:.35rem}}@media screen and (max-width:46.875rem){._date-navigation__control_kjro4_302{translate:0 -1rem;scale:.7}._date-navigation__control--previous_kjro4_331{inset-inline-start:-1.6rem}._date-navigation__control--next_kjro4_336{inset-inline-end:-1.5rem}}@media screen and (max-width:31.25rem){._date-navigation__weekday_kjro4_372{font-size:1rem}._date-navigation__date_kjro4_373{font-size:.8rem;white-space:nowrap}}@media screen and (max-width:25rem){._date-navigation__month-day-break_kjro4_368{display:inline}}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { jsxs as _, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { useState as g, useReducer as M, useRef as m, useCallback as S, useEffect as p } from "react";
|
|
3
|
-
import { f as
|
|
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 j } from "../../chevron-left-D0UjbrKw.mjs";
|
|
7
|
+
import { C as w } 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_kjro4_257",
|
|
10
|
+
"date-navigation__control": "_date-navigation__control_kjro4_302",
|
|
11
|
+
"date-navigation__control--previous": "_date-navigation__control--previous_kjro4_331",
|
|
12
|
+
"date-navigation__control--next": "_date-navigation__control--next_kjro4_336",
|
|
13
|
+
"date-navigation__item": "_date-navigation__item_kjro4_347",
|
|
14
|
+
"date-navigation__day": "_date-navigation__day_kjro4_362",
|
|
15
|
+
"date-navigation__month-day-break": "_date-navigation__month-day-break_kjro4_368",
|
|
16
|
+
"date-navigation__weekday": "_date-navigation__weekday_kjro4_372",
|
|
17
|
+
"date-navigation__date": "_date-navigation__date_kjro4_373"
|
|
18
18
|
};
|
|
19
|
-
function
|
|
19
|
+
function A(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 L(a, i) {
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
function V() {
|
|
30
|
-
const { weeks: a, setCurrentDate: i } = W(), [r, x] = g(0), [b, C] = g(a[0]), [
|
|
30
|
+
const { weeks: a, setCurrentDate: i } = W(), [r, x] = g(0), [b, C] = g(a[0]), [l, y] = g(a[0][0]), [N, h] = M(A, "idle"), d = m(null), D = m(0), k = m(s(new Date(l.fullDateStr), "yyyy-MM-dd")), f = (t) => {
|
|
31
31
|
h({ type: "NAVIGATE_TO_WEEK", currentWeekIndex: r, targetWeekIndex: t }), x(t);
|
|
32
32
|
}, E = (t) => {
|
|
33
|
-
|
|
33
|
+
s(t.date, "yyyy-MM-dd") !== k.current && (k.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;
|
|
@@ -42,14 +42,14 @@ function V() {
|
|
|
42
42
|
d.current !== null && (d.current.removeEventListener("animationend", c), d.current.addEventListener("animationend", c, { once: !0 }));
|
|
43
43
|
}, [c]), p(() => {
|
|
44
44
|
C(a[r]);
|
|
45
|
-
const t = r ? 0 : 1, I = l
|
|
46
|
-
(v) =>
|
|
45
|
+
const t = r ? 0 : 1, I = s(l.date, "yyyy-MM-dd"), u = a[t].findIndex(
|
|
46
|
+
(v) => s(v.date, "yyyy-MM-dd") === I
|
|
47
47
|
);
|
|
48
48
|
if (u !== -1 && a[r][u]) {
|
|
49
49
|
const v = a[r][u];
|
|
50
50
|
D.current = u, y(v), i(v.date);
|
|
51
51
|
}
|
|
52
|
-
}, [r, a, i,
|
|
52
|
+
}, [r, a, i, l]), /* @__PURE__ */ _("date-navigation", { "data-state": N, children: [
|
|
53
53
|
/* @__PURE__ */ _("date-navigation-controls", { children: [
|
|
54
54
|
/* @__PURE__ */ _(
|
|
55
55
|
"button",
|
|
@@ -63,10 +63,10 @@ function V() {
|
|
|
63
63
|
disabled: r === 0 ? !0 : void 0,
|
|
64
64
|
type: "button",
|
|
65
65
|
onClick: () => {
|
|
66
|
-
|
|
66
|
+
f(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(j, { 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
|
+
f(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(w, { height: 48, width: 48 }) }),
|
|
90
90
|
/* @__PURE__ */ e("span", { className: "sr-only", children: "Next Week" })
|
|
91
91
|
]
|
|
92
92
|
}
|
|
@@ -108,7 +108,7 @@ function V() {
|
|
|
108
108
|
"button",
|
|
109
109
|
{
|
|
110
110
|
"aria-controls": `${t.fullDateStr}`,
|
|
111
|
-
"aria-selected":
|
|
111
|
+
"aria-selected": l.fullDateStr === t.fullDateStr,
|
|
112
112
|
className: o([n["date-navigation__day"], "date-navigation__day"]),
|
|
113
113
|
role: "tab",
|
|
114
114
|
type: "button",
|
package/package.json
CHANGED