@nysds/playground 0.1.0 → 0.2.0

package/presets/16-themes.json

@@ -1,7 +1,7 @@
 {
   "title": "Agency themes",
-  "description": "The same button, alert, and card under different agency themes. Themes come from the data-nys-theme attribute.",
+  "description": "The same button, alert, and card under different agency themes. A nys-theme-* class on any element themes everything inside it.",
   "html": "<nys-select id=\"theme-select\" label=\"Select an agency theme\" class=\"nys-margin-b-300\">\n  <option value=\"default\" label=\"Default (NY.gov)\" selected></option>\n  <option value=\"admin\" label=\"Administration\"></option>\n  <option value=\"health\" label=\"Health\"></option>\n  <option value=\"transportation\" label=\"Transportation\"></option>\n  <option value=\"environment\" label=\"Environment\"></option>\n</nys-select>\n\n<div id=\"theme-wrapper\">\n  <div class=\"nys-display-flex nys-flex-column nys-flex-gap-300\">\n    <nys-button label=\"Primary action\"></nys-button>\n    <nys-alert type=\"info\" heading=\"Themed alert\" text=\"This alert's color follows the selected theme.\"></nys-alert>\n    <nys-card heading=\"Themed card\" description=\"Card accents follow the theme color too.\"></nys-card>\n  </div>\n</div>\n",
   "css": "",
-  "js": "const themeSelect = document.getElementById('theme-select');\nconst themeWrapper = document.getElementById('theme-wrapper');\n\nthemeSelect.addEventListener('nys-change', (e) => {\n  themeWrapper.setAttribute('data-nys-theme', e.detail.value);\n});\n"
+  "js": "const themeSelect = document.getElementById('theme-select');\nconst themeWrapper = document.getElementById('theme-wrapper');\n\nthemeSelect.addEventListener('nys-change', (e) => {\n  // The wrapper carries one nys-theme-* class at a time. No class means the\n  // default NY.gov theme.\n  themeWrapper.className = e.detail.value === 'default' ? '' : `nys-theme-${e.detail.value}`;\n});\n"
 }

package/src/app.css

@@ -141,19 +141,18 @@ body {
   color: var(--pg-muted);
 }
 
-/* On a phone the wordmark and "Playground" no longer fit beside the settings
-   button on one line, so stack them and drop the divider. */
-@media (max-width: 640px) {
-  .home {
-    padding-inline: 16px;
-  }
+/* Below about 800px the wordmark and "Playground" no longer fit beside the
+   settings button on one line, so stack them, drop the divider, and let the
+   wordmark scale down with the window. Its natural width at 48px tall is
+   437px. */
+@media (max-width: 800px) {
   .home__title {
     flex-direction: column;
     align-items: flex-start;
     gap: 4px;
   }
   .home__logo {
-    width: min(100%, 320px);
+    width: min(100%, 437px);
     height: auto;
   }
   .home__title-text {
@@ -163,6 +162,12 @@ body {
   }
 }
 
+@media (max-width: 640px) {
+  .home {
+    padding-inline: 16px;
+  }
+}
+
 .home__lede {
   margin: 16px 0 24px;
   max-width: 60ch;
@@ -682,20 +687,6 @@ nys-toggle[hidden] {
   min-height: 0;
 }
 
-.split__divider {
-  flex: 0 0 var(--pg-divider-width);
-  cursor: col-resize;
-  background: var(--pg-border);
-  background-clip: content-box;
-  border-inline: 4px solid var(--pg-surface);
-  touch-action: none;
-}
-
-.split__divider:focus-visible {
-  outline: 2px solid var(--nys-color-focus, #004dd1);
-  outline-offset: 1px;
-}
-
 /* Presentation mode ---------------------------------------------------- */
 
 .app--present .toolbar,
@@ -714,9 +705,8 @@ nys-toggle[hidden] {
 }
 
 /*
- * Three real columns rather than an absolutely centred mark. Both sides are
- * `1fr`, so the mark is exactly centred and the sides shrink into their
- * ellipses before anything can overlap it.
+ * Two columns: the title side shrinks into its ellipsis, and the controls
+ * take the room they need.
  */
 .caption {
   /* Sits above the editor drawer (z-index 5) so tooltips that pop upward
@@ -724,7 +714,7 @@ nys-toggle[hidden] {
   position: relative;
   z-index: 10;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 12px;
   padding: 8px 16px;
@@ -751,45 +741,31 @@ nys-toggle[hidden] {
   min-width: 0;
 }
 
-.caption__center {
-  display: flex;
-  align-items: center;
-}
-
+/*
+ * Spaced by visible edges, not by box. A ghost circle button shows only its
+ * 24px glyph inside a 40px box, so ghost boxes sit 4px apart and the
+ * outlined arrows carry a wider margin: every visible edge then sits 20px
+ * from the next, and hovered ghost circles still clear each other. Margins
+ * rather than `gap`, because the zero-width tooltips between the buttons
+ * would each take a gap of their own.
+ */
 .caption__right {
   display: flex;
   align-items: center;
   justify-self: end;
-  gap: 8px;
-}
-
-.caption__actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
 }
 
-/* The mark matches the previous and next circle buttons, so the three read as
-   one row of equal shapes. */
-.caption__home {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  color: var(--nys-color-text-reverse);
-  border-radius: 50%;
+.caption__right > nys-button {
+  margin-inline: 2px;
 }
 
-.caption__home:focus-visible {
-  outline: 2px solid var(--nys-color-text-reverse);
-  outline-offset: 2px;
+#prev-button,
+#next-button {
+  margin-inline: 10px;
 }
 
-.caption__mark {
-  width: 100%;
-  height: 100%;
+#next-button {
+  margin-inline-end: 0;
 }
 
 .caption__notes[hidden] {
@@ -800,16 +776,25 @@ nys-toggle[hidden] {
   min-width: 0;
 }
 
+/* A flex row, so the title or picker gives way and the counter keeps its
+   place at the end. */
 .caption__title {
+  display: flex;
+  align-items: center;
+  min-width: 0;
   margin: 0;
-  overflow: hidden;
   font-size: 1.0625rem;
   font-weight: 600;
   line-height: 1.3;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.caption__title > .present-only {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .caption__group {
   color: var(--nys-color-text-reverse-weak);
   font-weight: 400;
@@ -818,13 +803,20 @@ nys-toggle[hidden] {
 /* The slide title doubles as the slide picker while editing. */
 .caption__picker {
   display: inline-flex;
+  flex: 0 1 auto;
   align-items: center;
   gap: 2px;
-  max-width: 100%;
+  min-width: 0;
 }
 
+/* A select sizes to its longest option; `field-sizing` sizes it to the
+   chosen one instead where the browser supports it, so the chevron hugs
+   the title. Either way it can shrink and clip. */
 .caption__select {
+  min-width: 0;
   max-width: 100%;
+  field-sizing: content;
+  text-overflow: ellipsis;
   padding: 2px 2px 2px 4px;
   border: none;
   border-radius: 4px;
@@ -875,8 +867,9 @@ nys-toggle[hidden] {
   display: none;
 }
 
+/* The counter rides with the title, set off by a bullet. */
 .caption__count {
-  margin: 0;
+  margin: 0 0 0 8px;
   font-variant-numeric: tabular-nums;
   font-size: 0.9375rem;
   font-weight: 400;
@@ -884,64 +877,23 @@ nys-toggle[hidden] {
   white-space: nowrap;
 }
 
-/* The counter rides with the title on narrow screens instead. */
-.caption__count--inline {
-  display: none;
-  margin-inline-start: 8px;
+.caption__count:not(:empty)::before {
+  content: "\2022  ";
 }
 
 /*
- * Narrow screens: two rows. The arrows keep the outer columns and span both
- * rows, the title and counter take row one, and the icons take row two. The
- * mark has nowhere to go, so it steps aside.
+ * Narrow screens: two rows. The title, counter, and slide settings take row
+ * one, and the action buttons spread across row two.
  */
 @media (max-width: 720px) {
   .caption {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    grid-template-rows: auto auto;
-    gap: 4px 8px;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 6px;
   }
 
-  .caption__left,
   .caption__right {
-    display: contents;
-  }
-
-  .caption__center {
-    display: none;
-  }
-
-  #prev-button {
-    grid-column: 1;
-    grid-row: 1 / 3;
-    align-self: center;
-  }
-
-  .caption__headline {
-    grid-column: 2;
-    grid-row: 1;
-  }
-
-  .caption__actions {
-    grid-column: 2;
-    grid-row: 2;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  #next-button {
-    grid-column: 3;
-    grid-row: 1 / 3;
-    align-self: center;
-  }
-
-  /* The counter reads better beside the title than alone on the icon row. */
-  .caption__right > .caption__count {
-    display: none;
-  }
-
-  .caption__count--inline {
-    display: inline;
+    justify-self: stretch;
+    justify-content: space-between;
   }
 }
 
@@ -1019,6 +971,99 @@ nys-toggle[hidden] {
   align-self: flex-start;
 }
 
+/* Read by screen readers, invisible to everyone else. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* The slide list in Deck settings ------------------------------------ */
+
+/* The modal body clips at its edges, and a focus ring reaches 4px past a
+   button, so the list keeps that much room on each side. */
+.slide-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0 4px;
+  list-style: none;
+}
+
+.slide-row {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.slide-row--dragging {
+  opacity: 0.4;
+}
+
+/* A line above or below the row the drag would land beside. */
+.slide-row--drop-before::before,
+.slide-row--drop-after::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  height: 2px;
+  background: var(--nys-color-theme, #154973);
+}
+
+.slide-row--drop-before::before {
+  top: -3px;
+}
+
+.slide-row--drop-after::after {
+  bottom: -3px;
+}
+
+/* The button inside sets the pointer cursor itself. Once a drag starts, the
+   browser draws the drag cursor and no CSS reaches it. */
+.slide-row__handle {
+  flex: 0 0 auto;
+  touch-action: none;
+}
+
+.slide-row__position {
+  flex: 0 0 1.5em;
+  font-variant-numeric: tabular-nums;
+  color: var(--pg-muted);
+  text-align: end;
+}
+
+.slide-row__title {
+  flex: 1 1 200px;
+  min-width: 0;
+}
+
+.slide-row__group {
+  flex: 0 1 200px;
+  min-width: 0;
+}
+
+.slide-row__actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  margin-inline-start: auto;
+}
+
+.slide-row--removed .slide-row__title,
+.slide-row--removed .slide-row__group {
+  text-decoration: line-through;
+}
+
 /* The base CSS field is the same CodeMirror editor as the CSS pane, boxed
    like a design system text area so it sits with the other fields. */
 .settings__code .settings__legend {
@@ -1046,6 +1091,9 @@ nys-toggle[hidden] {
 
 /* Toast ---------------------------------------------------------------- */
 
+/* The toast host is a live region that stays in the page. Empty, it has no
+   size, so it needs no hiding: `display: none` would take the region out of
+   the accessibility tree between toasts. */
 .toast {
   position: fixed;
   inset-block-end: 24px;
@@ -1054,10 +1102,6 @@ nys-toggle[hidden] {
   max-width: 320px;
 }
 
-.toast[hidden] {
-  display: none;
-}
-
 /* Narrow screens ------------------------------------------------------- */
 
 @media (max-width: 720px) {

package/src/deck-model.ts

@@ -35,6 +35,26 @@ export interface StoredDeck {
 /** The markup a brand new slide starts from. */
 export const BLANK_SLIDE_HTML = '<nys-button label="Excelsior"></nys-button>\n';
 
+/**
+ * Whether a slide holds anything worth a warning before it is deleted: code
+ * in any editor beyond the starter button, or a setting someone changed from
+ * what a new slide gets.
+ */
+export function hasContent(slide: Slide): boolean {
+  const html = slide.html.trim();
+  return (
+    (html !== '' && html !== BLANK_SLIDE_HTML.trim()) ||
+    slide.css.trim() !== '' ||
+    slide.js.trim() !== '' ||
+    !/^Slide \d+$/.test(slide.title.trim()) ||
+    slide.group.trim() !== '' ||
+    slide.description.trim() !== '' ||
+    slide.notes.trim() !== '' ||
+    slide.version !== 'latest' ||
+    (slide.editors?.length ?? 0) > 0
+  );
+}
+
 /** Turns a title into a slug that is safe in a URL and a filename. */
 export function slugify(title: string): string {
   const slug = title
@@ -278,6 +298,33 @@ export function staleStarters(
   });
 }
 
+/** One row of the slide list in Deck settings. */
+export interface SlideEdit {
+  id: string;
+  title: string;
+  group: string;
+  /** Marked for removal; the slide goes when the edits are applied. */
+  removed?: boolean;
+}
+
+/**
+ * Applies the slide list's edits: the rows' order, titles, and groups, with
+ * removed rows dropped. Code and every other field come from the slide as it
+ * is. A blank title keeps the old one, and the result is never empty.
+ */
+export function arrangeSlides(slides: readonly Slide[], edits: readonly SlideEdit[]): Slide[] {
+  const byId = new Map(slides.map((slide) => [slide.id, slide]));
+  const result: Slide[] = [];
+  for (const edit of edits) {
+    const slide = byId.get(edit.id);
+    if (!slide || edit.removed) {
+      continue;
+    }
+    result.push({...slide, title: edit.title.trim() || slide.title, group: edit.group.trim()});
+  }
+  return result.length > 0 ? result : slides.map((slide) => ({...slide}));
+}
+
 /** Formats an ISO timestamp as "today", "3 days ago", and so on. */
 export function relativeTime(iso: string, now = new Date()): string {
   const then = new Date(iso).getTime();

package/src/decks.test.ts

@@ -9,7 +9,9 @@ import assert from 'node:assert/strict';
 import test from 'node:test';
 
 import {
+  arrangeSlides,
   copyOfDeck,
+  hasContent,
   makeDeck,
   makeSlide,
   missingStarters,
@@ -286,3 +288,56 @@ test('staleStarters finds untouched copies seeded under a retired key', () => {
   );
   assert.deepEqual(staleStarters([untouched], retired, []), []);
 });
+
+test('arrangeSlides reorders, renames, regroups, and drops removed slides', () => {
+  const slides = [
+    makeSlide({id: 'a', title: 'A', html: 'a'}),
+    makeSlide({id: 'b', title: 'B', html: 'b', group: 'One'}),
+    makeSlide({id: 'c', title: 'C', html: 'c'}),
+  ];
+  const result = arrangeSlides(slides, [
+    {id: 'c', title: 'C renamed', group: ' Two '},
+    {id: 'b', title: 'B', group: 'One', removed: true},
+    {id: 'a', title: '   ', group: ''},
+  ]);
+  assert.deepEqual(
+    result.map((slide) => [slide.id, slide.title, slide.group, slide.html]),
+    [
+      ['c', 'C renamed', 'Two', 'c'],
+      ['a', 'A', '', 'a'],
+    ],
+  );
+});
+
+test('arrangeSlides ignores unknown rows and never returns an empty deck', () => {
+  const slides = [makeSlide({id: 'a', title: 'A', html: 'a'})];
+  assert.deepEqual(
+    arrangeSlides(slides, [{id: 'ghost', title: 'Ghost', group: ''}]).map((s) => s.id),
+    ['a'],
+  );
+  assert.deepEqual(
+    arrangeSlides(slides, [{id: 'a', title: 'A', group: '', removed: true}]).map((s) => s.id),
+    ['a'],
+  );
+});
+
+test('hasContent is false for a slide as Add slide or New deck made it', () => {
+  assert.equal(hasContent(makeSlide({id: 'slide-3', title: 'Slide 3'})), false);
+  assert.equal(
+    hasContent(makeSlide({id: 'slide-1', title: 'Slide 1', html: '<nys-button label="Excelsior"></nys-button>\n'})),
+    false,
+  );
+});
+
+test('hasContent is true once anything was typed or set', () => {
+  const blank = {id: 'slide-3', title: 'Slide 3'};
+  assert.equal(hasContent(makeSlide({...blank, html: '<p>Hi</p>'})), true);
+  assert.equal(hasContent(makeSlide({...blank, css: 'p{}'})), true);
+  assert.equal(hasContent(makeSlide({...blank, js: 'x()'})), true);
+  assert.equal(hasContent(makeSlide({...blank, title: 'Button'})), true);
+  assert.equal(hasContent(makeSlide({...blank, group: 'One'})), true);
+  assert.equal(hasContent(makeSlide({...blank, description: 'd'})), true);
+  assert.equal(hasContent(makeSlide({...blank, notes: 'n'})), true);
+  assert.equal(hasContent(makeSlide({...blank, version: '1.21.0'})), true);
+  assert.equal(hasContent(makeSlide({...blank, editors: ['html']})), true);
+});