@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/ui/SegmentedButton.tsx

@@ -0,0 +1,49 @@
+// A segmented button (m3.material.io/components/segmented-buttons, .segmented-button in ../styles/ui.css): a few
+// choices side by side in one frame (`segments`), each a button with its label and evt. an icon, the chosen ones with
+// aria-pressed="true" and a check before the label (in the icon's place when it has one; the theme shows it or not).
+// Single-select (one chosen) or multi-select (`multiple`: any of them, data-multiple); the group has its name (`label`,
+// read by screen readers). Which one is chosen, and what that does, is the script of the block that shows it (by a
+// segment's `value`, data-value), or, in the editor, the segment's own attributes (onClick), which go on its button.
+// Other attributes (data-…) go on the group, and `className` after its own class. An
+// Astro component gives its elements the same classes with segmentedButtonClass and segmentedButtonSegmentClass.
+import { Glyph, Svg, type IconRef } from '@morphemecms/cms/src/icon';
+
+export type Segment = { label: string; icon?: IconRef; value?: string; selected?: boolean; disabled?: boolean } & Record<string, unknown>;
+
+/** A segmented button's class, and its segments'. */
+export const segmentedButtonClass = 'segmented-button';
+export const segmentedButtonSegmentClass = 'segmented-button-segment';
+
+export default function SegmentedButton({
+  label,
+  segments,
+  multiple,
+  className,
+  ...rest
+}: { label: string; segments: Segment[]; multiple?: boolean; className?: string } & Record<string, unknown>) {
+  return (
+    <div
+      role="group"
+      aria-label={label}
+      className={[segmentedButtonClass, className].filter(Boolean).join(' ')}
+      data-multiple={multiple || undefined}
+      {...rest}
+    >
+      {segments.map(({ label: name, icon, value, selected, disabled, ...own }) => (
+        <button
+          key={value ?? name}
+          type="button"
+          className={segmentedButtonSegmentClass}
+          aria-pressed={Boolean(selected)}
+          disabled={disabled}
+          data-value={value}
+          {...own}
+        >
+          <Svg name="check" size={18} className="segmented-button-check" />
+          {icon && <Glyph icon={icon} size={18} className="segmented-button-icon" />}
+          <span className="segmented-button-label">{name}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/theme/ui/SideSheet.tsx

@@ -0,0 +1,54 @@
+// A side sheet (m3.material.io/components/side-sheets, .side-sheet in ../styles/ui.css): more about what is on the
+// screen, at its side. Its container, with the header (the headline, `headline` with its id `headlineId`, and the
+// close button, `closeLabel`, and what it does in the editor, `onClose`; none without it), what it shows (`children`, scrolling when it is long) and evt. its
+// actions at the bottom (`actions`: buttons). Its kind (`kind`): 'standard', beside what it is about on the page, an
+// <aside> named by its headline, its place the page's; or 'modal', over the page in a <dialog> with sideSheetClass over
+// the scrim, which sideSheet() in sideSheet.ts opens, closes and lets slide in from the side (the <dialog> gets
+// aria-labelledby with `headlineId`). How it looks is the theme's (--side-sheet-*). In the editor only drawn, as high as
+// its place.
+import type { ReactNode } from 'react';
+import IconButton from '@theme/ui/IconButton';
+
+export type SideSheetKind = 'standard' | 'modal';
+
+/** The class of the <dialog> a modal side sheet is in, and a side sheet's container's classes. */
+export const sideSheetClass = 'side-sheet';
+export const sideSheetContainerClass = (kind: SideSheetKind = 'standard') => `side-sheet-container side-sheet-${kind}`;
+
+export default function SideSheet({
+  kind = 'standard',
+  headline,
+  headlineId,
+  closeLabel,
+  onClose,
+  actions,
+  className,
+  children,
+}: {
+  kind?: SideSheetKind;
+  headline: ReactNode;
+  headlineId?: string;
+  closeLabel?: string;
+  onClose?: () => void;
+  actions?: ReactNode;
+  className?: string;
+  children: ReactNode;
+}) {
+  const Container = kind === 'standard' ? 'aside' : 'div';
+  return (
+    <Container
+      className={[sideSheetContainerClass(kind), className].filter(Boolean).join(' ')}
+      aria-labelledby={kind === 'standard' ? headlineId : undefined}
+      data-side-sheet-container=""
+    >
+      <div className="side-sheet-header">
+        <h2 id={headlineId} className="side-sheet-headline">
+          {headline}
+        </h2>
+        {closeLabel && <IconButton icon="x" label={closeLabel} data-side-sheet-close="" onClick={onClose} />}
+      </div>
+      <div className="side-sheet-content">{children}</div>
+      {actions && <div className="side-sheet-actions">{actions}</div>}
+    </Container>
+  );
+}

package/theme/ui/Slider.tsx

@@ -0,0 +1,155 @@
+// A slider (m3.material.io/components/sliders, .slider in ../styles/ui.css): a value chosen between `min` and `max`
+// (`value`; the standard slider, its active track from the start), in steps of `step` with a stop at each (`stops`),
+// from the middle (`centered`: the active track from the middle to the handle, for a value below and above a middle
+// one), or a range (`range`, its start and end, with two handles that cannot pass each other; `handleLabels` says what
+// each is to a screen reader). Its size (`size`: xsmall, the default, small, medium, large or xlarge, as M3 Expressive
+// names them: how thick the track is) and its direction (`orientation`: horizontal, the default, or vertical, from
+// the bottom up) are Material's names; how they look is the theme's. A standard slider of size medium or larger can
+// have an icon in its track (`icon`, the theme's icon by its name: in the active track at its start, after the
+// handle while there is no room for it there). Its name (`label`) stands over it (`hideLabel`: only screen readers say
+// it), and a label with the value over a handle while it is moved or has the focus (`valueLabel`; 'always': all the
+// time). The handles are native range inputs, so the keyboard moves them (the arrow keys, Home, End, Page Up and Page
+// Down) and screen readers say the value; the active track, the stops and the value labels follow them on the site
+// with slider.script.ts and in the editor here (both with updateSlider in sliderUpdate.ts). `onChange` (the editor): the value is the editor's, and a
+// handle moved gives its new value (and which handle, 0 or 1); else the value is the one it starts with. `disabled`: it
+// cannot be moved; `name` is the input's (a range's: one for each); `className` goes after its own classes. An Astro component
+// gives an element the same classes with sliderClass.
+import type { ChangeEvent, CSSProperties, FormEvent } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import { sliderPlace, stopState, updateSlider } from './sliderUpdate';
+
+/** A slider's sizes, as M3 Expressive names them. */
+export type SliderSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type SliderOrientation = 'horizontal' | 'vertical';
+
+/** A slider's classes: a range, `slider-range`; centered, `slider-centered`; its size but the default; vertical. */
+export const sliderClass = (range = false, size: SliderSize = 'xsmall', centered = false, orientation: SliderOrientation = 'horizontal') =>
+  [
+    'slider',
+    range && 'slider-range',
+    centered && !range && 'slider-centered',
+    size !== 'xsmall' && `slider-${size}`,
+    orientation === 'vertical' && 'slider-vertical',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+export default function Slider({
+  label,
+  hideLabel,
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  range,
+  centered,
+  handleLabels,
+  stops,
+  size = 'xsmall',
+  orientation = 'horizontal',
+  icon,
+  valueLabel,
+  disabled,
+  name,
+  onChange,
+  className,
+}: {
+  label: string;
+  hideLabel?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: number;
+  range?: [number, number];
+  centered?: boolean;
+  handleLabels?: [string, string];
+  stops?: boolean;
+  size?: SliderSize;
+  orientation?: SliderOrientation;
+  icon?: string;
+  valueLabel?: boolean | 'always';
+  disabled?: boolean;
+  name?: string | [string, string];
+  onChange?: (value: number, handle: number) => void;
+  className?: string;
+}) {
+  const middle = centered && !range;
+  const values = range ?? [value ?? (middle ? (min + max) / 2 : min)];
+  const { start, end } = sliderPlace(values, min, max, middle);
+  const count = Math.round((max - min) / step);
+  // A stop at each step, when there are not so many that they run together.
+  const stopValues = stops && count > 0 && count <= 50 ? Array.from({ length: count + 1 }, (_, i) => min + i * step) : [];
+  // The icon only in a standard slider's track, and only where the track is thick enough to hold it.
+  const inset = icon && !range && !middle && ['medium', 'large', 'xlarge'].includes(size) ? icon : undefined;
+  const vertical = orientation === 'vertical';
+  const place = { '--slider-start': start, '--slider-end': end } as CSSProperties;
+  return (
+    <div
+      className={[sliderClass(Boolean(range), size, middle, orientation), className].filter(Boolean).join(' ')}
+      style={place}
+      role={range ? 'group' : undefined}
+      aria-label={range ? label : undefined}
+      data-slider=""
+      data-start-on-top={range && start > 0.5 ? '' : undefined}
+      data-below-center={middle && values[0] < (min + max) / 2 ? '' : undefined}
+      onInput={(e: FormEvent<HTMLDivElement>) => updateSlider(e.currentTarget, e.target)}
+    >
+      {!hideLabel && (
+        <span className="slider-label" aria-hidden="true">
+          {label}
+        </span>
+      )}
+      <div className="slider-control">
+        <span className="slider-track" aria-hidden="true">
+          {(range || middle) && <span className="slider-inactive-track slider-inactive-track-start" />}
+          <span className="slider-active-track">
+            {inset && <Svg name={inset} size={24} className="slider-icon" />}
+            {inset && <Svg name={inset} size={24} className="slider-icon slider-icon-inactive" />}
+          </span>
+          <span className="slider-inactive-track slider-inactive-track-end" />
+          {stopValues.map((v) => {
+            const { active, under } = stopState(v, values, min, max, middle);
+            return (
+              <span
+                key={v}
+                className="slider-stop"
+                style={{ '--slider-stop': (v - min) / (max - min) } as CSSProperties}
+                data-slider-stop={v}
+                data-active={active ? '' : undefined}
+                data-under={under ? '' : undefined}
+              />
+            );
+          })}
+        </span>
+        {values.map((v, i) => [
+          <input
+            key={`input-${i}`}
+            type="range"
+            className="slider-input"
+            min={min}
+            max={max}
+            step={step}
+            {...(onChange
+              ? { value: v, onChange: (e: ChangeEvent<HTMLInputElement>) => onChange(Number(e.target.value), i) }
+              : { defaultValue: v })}
+            disabled={disabled}
+            name={Array.isArray(name) ? name[i] : name}
+            aria-label={range ? (handleLabels?.[i] ?? label) : label}
+            aria-orientation={vertical ? 'vertical' : undefined}
+            data-slider-input=""
+          />,
+          valueLabel && (
+            <output
+              key={`value-${i}`}
+              className={valueLabel === 'always' ? 'slider-value slider-value-always' : 'slider-value'}
+              aria-hidden="true"
+              data-slider-value=""
+            >
+              {v}
+            </output>
+          ),
+        ])}
+      </div>
+    </div>
+  );
+}

package/theme/ui/Snackbar.tsx

@@ -0,0 +1,67 @@
+// A snackbar (m3.material.io/components/snackbar, .snackbar in ../styles/ui.css): a short message at the bottom of the
+// screen, what the site says with one (a new version of a page: layouts/PageLayout.astro). Its supporting text (`text`,
+// on one line or two), evt. links in it, each with an arrow (`links`), evt. an action, a text button (`action`, with
+// its `label` and `href` or other attributes on it), under the text when it is long (`longerAction`), and evt. a
+// button that closes it (`closeLabel`, its name). Read by screen readers as a status (`error`: an alert). On the site
+// it is drawn in a <template data-snackbar> (with `data-ms` for how long it stays), and ui/snackbar.script.ts shows it
+// at the bottom with the editor's snackbar() (@morphemecms/cms/lib/snackbar.ts: where messages stand, how long, and how
+// they are swiped away, the same as the editor's messages); in the editor only drawn. How it looks is the theme's
+// (--snackbar-*). An Astro component gives an element the same classes with snackbarClass.
+import { Fragment } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import { Link } from '@morphemecms/cms/src/standard/view';
+import Button from '@theme/ui/Button';
+import IconButton from '@theme/ui/IconButton';
+
+export type SnackbarLink = { text: string; href: string };
+export type SnackbarAction = { label: string; href?: string } & Record<string, unknown>;
+
+/** A snackbar's classes: with its action under the text, or beside it. */
+export const snackbarClass = (longerAction?: boolean) => ['snackbar', longerAction && 'snackbar-longer-action'].filter(Boolean).join(' ');
+
+export default function Snackbar({
+  text,
+  links = [],
+  action,
+  longerAction,
+  closeLabel,
+  error,
+  className,
+  ...rest
+}: {
+  text: string;
+  links?: SnackbarLink[];
+  action?: SnackbarAction;
+  longerAction?: boolean;
+  closeLabel?: string;
+  error?: boolean;
+  className?: string;
+} & Record<string, unknown>) {
+  const { label, ...actionRest } = action ?? { label: '' };
+  return (
+    <div role={error ? 'alert' : 'status'} className={[snackbarClass(longerAction), className].filter(Boolean).join(' ')} {...rest}>
+      <p className="snackbar-supporting-text">
+        {text}
+        {links.map((link) => (
+          <Fragment key={link.href + link.text}>
+            {' '}
+            <Link href={link.href} className="snackbar-link">
+              {link.text}
+              <Svg name="arrow-right" size={14} />
+            </Link>
+          </Fragment>
+        ))}
+      </p>
+      {(action || closeLabel) && (
+        <div className="snackbar-actions">
+          {action && (
+            <Button kind="text" size="small" className="snackbar-action" {...actionRest}>
+              {label}
+            </Button>
+          )}
+          {closeLabel && <IconButton icon="x" label={closeLabel} className="snackbar-close" data-snackbar-close="" />}
+        </div>
+      )}
+    </div>
+  );
+}

package/theme/ui/SplitButton.tsx

@@ -0,0 +1,67 @@
+// A split button (m3.material.io/components/split-button, .split-button in ../styles/ui.css): the main action (the
+// theme's Button: `label`, evt. `icon`, with `href` a link) and joined to it a button with an arrow (its name
+// `menuLabel`, read by screen readers) that opens a menu with the other ways to do it, the theme's Menu with its
+// MenuItems (`children`). Its kind (`kind`: filled, the default, tonal, elevated or outlined) and its size (`size`:
+// xsmall, small, medium, the default, large or xlarge) are the Button's, and so is its look, with the corners between
+// the two small (larger with the size); the arrow's button is as wide as the button is high, and fully round while its
+// menu is open (aria-expanded). `open` draws it open (the editor). On the site ui/splitButton.script.ts opens and closes the
+// menu. Other attributes (data-…) go on the main action, and `className` on the whole.
+import { useId, type ReactNode } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import type { ButtonKind } from '@morphemecms/cms/src/standard/view';
+import Button, { buttonClass, type ButtonSize } from '@theme/ui/Button';
+import { Menu } from '@theme/ui/Menu';
+
+export type SplitButtonKind = Exclude<ButtonKind, 'text'>;
+export const splitButtonKinds: SplitButtonKind[] = ['filled', 'tonal', 'elevated', 'outlined'];
+
+/** A split button's class (the whole: its main action and its arrow have the Button's classes). */
+export const splitButtonClass = 'split-button';
+
+export default function SplitButton({
+  kind = 'filled',
+  size,
+  icon,
+  label,
+  href,
+  menuLabel,
+  open,
+  disabled,
+  className,
+  children,
+  ...rest
+}: {
+  kind?: SplitButtonKind;
+  size?: ButtonSize;
+  icon?: string;
+  label: string;
+  href?: string;
+  menuLabel: string;
+  open?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  const menu = useId();
+  return (
+    <div className={[splitButtonClass, className].filter(Boolean).join(' ')} data-split-button="">
+      <Button kind={kind} size={size} icon={icon} href={href} disabled={disabled} className="split-button-leading" {...rest}>
+        {label}
+      </Button>
+      <button
+        type="button"
+        className={`${buttonClass(kind, size)} split-button-trailing`}
+        aria-label={menuLabel}
+        aria-expanded={Boolean(open)}
+        aria-controls={menu}
+        disabled={disabled}
+        data-split-button-toggle=""
+      >
+        <Svg name="caret-down" size={20} className="split-button-arrow" />
+      </button>
+      <Menu id={menu} className="split-button-menu" aria-label={menuLabel} hidden={!open} data-split-button-menu="">
+        {children}
+      </Menu>
+    </div>
+  );
+}

package/theme/ui/Switch.tsx

@@ -0,0 +1,60 @@
+// A switch (m3.material.io/components/switch, .switch in ../styles/ui.css): its name (`label`) and a line under the
+// name (`supporting`), and after them the track with its handle, all of it one <label>, so a click anywhere switches
+// it; the switch is a native <input type="checkbox" role="switch">, so Space switches it and screen readers say
+// "on"/"off". `icons`: the theme's icons in the handle, 'both' (a check when it is on, a cross when it is off) or
+// 'selected' (only the check); none without it. `checked`: on from the start, or, with `onChange` (the editor), whether
+// it is on now; `disabled`: it cannot be changed. `states`: what it is on and off ("Til", "Fra"), shown before the
+// track (.switch-state; the theme's addition to M3's switch). `hideLabel`: only screen readers say its name (a switch at
+// the end of a row that names it). Other attributes (`name`, `value`, data-…) go on the <input>, and `className` on the
+// label. An Astro component gives an element the same classes with switchClass.
+import type { ReactNode } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+
+export type SwitchIcons = 'both' | 'selected';
+
+/** A switch's classes: with icons in its handle, `switch-icons`. */
+export const switchClass = (icons?: SwitchIcons) => (icons ? 'switch switch-icons' : 'switch');
+
+export default function Switch({
+  label,
+  hideLabel,
+  supporting,
+  checked,
+  states,
+  icons,
+  className,
+  ...rest
+}: {
+  label: string;
+  hideLabel?: boolean;
+  supporting?: ReactNode;
+  checked?: boolean;
+  states?: [string, string];
+  icons?: SwitchIcons;
+  className?: string;
+} & Record<string, unknown>) {
+  // Changed by the editor (onChange): on as it says; else on from the start, then by the visitor.
+  const on = rest.onChange ? { checked: Boolean(checked) } : { defaultChecked: checked };
+  return (
+    <label className={[switchClass(icons), className].filter(Boolean).join(' ')}>
+      {!hideLabel && (
+        <span className="switch-text">
+          <span className="switch-label">{label}</span>
+          {supporting && <span className="switch-supporting">{supporting}</span>}
+        </span>
+      )}
+      {states && (
+        <span className="switch-state" aria-hidden="true">
+          {states[checked ? 0 : 1]}
+        </span>
+      )}
+      <span className="switch-track">
+        <input type="checkbox" role="switch" className="switch-input" aria-label={hideLabel ? label : undefined} {...on} {...rest} />
+        <span className="switch-handle">
+          {icons && <Svg name="check" size={16} className="switch-icon switch-icon-on" />}
+          {icons === 'both' && <Svg name="x" size={16} className="switch-icon switch-icon-off" />}
+        </span>
+      </span>
+    </label>
+  );
+}

package/theme/ui/Tabs.tsx

@@ -0,0 +1,114 @@
+// Tabs (m3.material.io/components/tabs, .tabs and .tab in ../styles/ui.css): a row of tabs (Tabs), the open one
+// `selected`. Their kind (`kind`) is Material's: `primary` (the main views under the top app bar: each tab's icon over
+// its label, or beside it with `inline`, and the indicator under the label) or `secondary` (views within a part of the
+// page: the label, evt. with its icon beside it, and the indicator under the whole tab), each with the divider under the
+// row; without a kind only the label, the open one's in its own colour (components/MobileNav.astro, the bar of
+// "Mobilmenu"). The row is scrollable (the default: swiped sideways when the tabs do not fit) or fixed (`scrollable`
+// false: the tabs share the width). A tab (Tab) has its label (`children`), evt. its icon (`icon`, its name in the
+// theme's icons, or in the editor an icon already made: the tabs of a screen) and a badge (`badge`: true for a dot, else the number it shows; the theme's Badge). With `href` it is a
+// link to a page (Link: on the site; in the editor only drawn; the open one aria-current); without it, it is a tab of a
+// tab list (`label` on Tabs, its name: a role="tablist"), a <button role="tab"> that shows its panel (`controls`, the
+// panel's id; the open one aria-selected), which tabs.script.ts does on the site. How it looks is the theme's. An Astro
+// component gives its elements the classes with tabsClass, tabsClasses and tabClass.
+import type { ReactNode } from 'react';
+import { Glyph, type IconRef } from '@morphemecms/cms/src/icon';
+import { Link } from '@morphemecms/cms/src/standard/view';
+import Badge from '@theme/ui/Badge';
+
+export type TabsKind = 'primary' | 'secondary';
+
+/** The kinds, in Material's order. */
+export const tabsKinds: TabsKind[] = ['primary', 'secondary'];
+
+/** The row's class, and a tab's. */
+export const tabsClass = 'tabs';
+export const tabClass = 'tab';
+
+/** The row's classes with its kind, fixed or scrollable, and with the primary tabs' icons beside their labels
+ * (`inline`). */
+export const tabsClasses = (kind?: TabsKind, scrollable = true, inline = false) =>
+  [tabsClass, kind && `tabs-${kind}`, !scrollable && 'tabs-fixed', inline && 'tabs-inline'].filter(Boolean).join(' ');
+
+export function Tabs({
+  kind,
+  scrollable = true,
+  inline,
+  label,
+  className,
+  children,
+  ...rest
+}: {
+  kind?: TabsKind;
+  scrollable?: boolean;
+  inline?: boolean;
+  label?: string;
+  className?: string;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  return (
+    <ul
+      className={[tabsClasses(kind, scrollable, inline), className].filter(Boolean).join(' ')}
+      role={label ? 'tablist' : undefined}
+      aria-label={label}
+      {...rest}
+    >
+      {children}
+    </ul>
+  );
+}
+
+/** A tab: a link to a page (`href`) or a tab of a tab list (`controls`), `selected` when it is the open one, with its
+ * label, evt. its icon and a badge. */
+export function Tab({
+  href,
+  controls,
+  selected,
+  icon,
+  badge,
+  children,
+  ...rest
+}: {
+  href?: string;
+  controls?: string;
+  selected?: boolean;
+  icon?: IconRef;
+  badge?: true | number;
+  children: ReactNode;
+} & Record<string, unknown>) {
+  const mark = badge !== undefined && <Badge count={badge === true ? undefined : badge} className="tab-badge" />;
+  const content = (
+    <span className="tab-content">
+      {icon && (
+        <span className="tab-icon">
+          <Glyph icon={icon} size={24} />
+          {mark}
+        </span>
+      )}
+      <span className="tab-label">
+        {children}
+        {!icon && mark}
+      </span>
+    </span>
+  );
+  return href === undefined ? (
+    <li role="presentation">
+      <button
+        type="button"
+        role="tab"
+        className={tabClass}
+        aria-selected={!!selected}
+        aria-controls={controls}
+        tabIndex={selected ? 0 : -1}
+        {...rest}
+      >
+        {content}
+      </button>
+    </li>
+  ) : (
+    <li>
+      <Link href={href} className={tabClass} aria-current={selected ? 'page' : undefined} {...rest}>
+        {content}
+      </Link>
+    </li>
+  );
+}