@redseed/redseed-ui-vue3 8.61.0 → 8.63.0

package/src/components/MessageBox/MessageBox.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch, watchEffect, useSlots, Comment, Fragment } from 'vue'
 import Icon from '../Icon/Icon.vue'
 import { XMarkIcon } from '@heroicons/vue/24/outline'
 
@@ -19,14 +19,102 @@ const props = defineProps({
     variant: {
         type: String,
         default: 'default',
-        validator: (value) => ['default', 'info', 'success', 'warning', 'error'].includes(value)
-    }
+        validator: (value) => ['default', 'info', 'success', 'warning', 'error', 'ai'].includes(value)
+    },
+    /**
+     * Renders a quiet dismiss action in the actions row, wired to the same close
+     * path as the corner button. Owned by the component rather than left to the
+     * `actions` slot, so dismissal cannot drift in wording or come unwired.
+     */
+    dismissLabel: {
+        type: String,
+        default: '',
+    },
 })
 
 const emit = defineEmits(['close'])
 
+/**
+ * Enforced at render, not just by the prop validator. Validators only warn and are
+ * stripped from production builds, so an unrecognised value used to reach the
+ * class attribute and the computeds below — and every fallback pointed the wrong
+ * way at once: no background (no matching CSS rule), an *information* glyph on
+ * what might be an error, and no live region at all, so a screen reader user was
+ * never told the operation failed.
+ */
+const VARIANTS = ['default', 'info', 'success', 'warning', 'error', 'ai']
+
+const slots = useSlots()
+
 const isClosed = ref(props.closed)
 
+const isKnownVariant = computed(() => VARIANTS.includes(props.variant))
+
+const safeVariant = computed(() => isKnownVariant.value ? props.variant : 'default')
+
+/**
+ * Dev-only, matching LinkSlot, ButtonSlot, Pill and InlineEditableText — this
+ * package ships raw `.vue` source, so an ungated warn reaches real users'
+ * consoles. Silence would leave a consumer with an unstyled box, a decoration that
+ * never appears, or an unnamed control, and no way to know why.
+ */
+watchEffect(() => {
+    if (process.env.NODE_ENV === 'production') return
+
+    if (!isKnownVariant.value) {
+        console.warn(`[RSUI] MessageBox: variant "${props.variant}" is not supported (${VARIANTS.join(', ')}). Falling back to "default".`)
+    }
+
+    if (props.dismissLabel !== '' && props.dismissLabel.trim() === '') {
+        console.warn('[RSUI] MessageBox: `dismissLabel` is only whitespace, so no dismiss control has been rendered — a button with no accessible name is worse than no button.')
+    }
+})
+
+/**
+ * `closed` is a two-way switch, not a starting position. Without this the ref was
+ * seeded once at setup and never looked at the prop again, so a consumer could
+ * neither close the box by setting it nor re-show a dismissed one by clearing it
+ * — and a flash message re-shown on the next visit would silently never appear,
+ * because Vue patches the same instance rather than remounting it.
+ */
+watch(() => props.closed, (value) => {
+    isClosed.value = value
+})
+
+/**
+ * A Fragment is a wrapper, so its own presence answers nothing — only what is
+ * inside it does. Hence the recursion: a `v-for` compiles to a Fragment and
+ * leaves a comment placeholder for each hidden item, so counting children
+ * reported content for a list whose every action was filtered out (the usual
+ * shape for permission-gated actions), and a nested `<template>` puts another
+ * Fragment inside that one.
+ *
+ * `Array.isArray` rather than recursing straight into `children`, which is a raw
+ * string on a Fragment built by hand as `h(Fragment, null, 'text')`. Vue's own
+ * `ensureValidVNode` assumes the array and throws on that shape, so answering
+ * "renders" here only hands it a slot it cannot render; treating it as empty
+ * drops the row instead, which is the quieter of the two failures. Compiled
+ * templates always produce the array.
+ */
+function rendersNode(node) {
+    if (node.type === Comment) return false
+    if (node.type === Fragment) return Array.isArray(node.children) && node.children.some(rendersNode)
+
+    return true
+}
+
+/**
+ * Whether a slot renders anything at all. Slot *presence* is not the same
+ * question: a slot holding only a falsy `v-if` is still a truthy slot function
+ * that renders a comment placeholder, which would put an empty padded row under
+ * the message.
+ */
+function rendersContent(slot) {
+    const nodes = slot?.()
+
+    return Boolean(nodes) && nodes.some(rendersNode)
+}
+
 /**
  * Announce the box as a live region so flash / MOTD content reaches assistive
  * tech (WCAG 4.1.3 Status Messages). `alert` is assertive — reserved for errors
@@ -34,13 +122,34 @@ const isClosed = ref(props.closed)
  * `default` variant is a plain container, not a status message, so it gets no
  * live role (avoids announcing arbitrary static content). Both roles carry an
  * implicit aria-live, so no separate attribute is needed.
+ *
+ * `ai` gets no live role either, and deliberately: an AI insight is content the
+ * reader chooses to read, not a status change. Announcing one on mount would
+ * interrupt for something nobody asked about.
  */
 const liveRole = computed(() => {
-    if (props.variant === 'error') return 'alert'
-    if (['info', 'success', 'warning'].includes(props.variant)) return 'status'
+    if (safeVariant.value === 'error') return 'alert'
+    if (['info', 'success', 'warning'].includes(safeVariant.value)) return 'status'
     return undefined
 })
 
+/**
+ * The icon is the consumer's, not ours — matching Pill, MetricCard, ListItem and
+ * SectionHeader, which all take one through a slot. RSUI only hardcodes a glyph
+ * where it is chrome belonging to the control itself (Disclosure's chevron,
+ * Pagination's arrows); the marker beside a message is content, and which glyph
+ * says "this came from the model" or "this is a billing notice" is the caller's
+ * call, not a mapping this component can guess from a variant name.
+ *
+ * Colour, shape and the attention pulse all ride on the `Icon` the consumer
+ * passes — `<Icon ai circle background pulse>` — so none of it needs a prop here.
+ */
+function hasIcon() {
+    return rendersContent(slots.icon)
+}
+
+const hasDismiss = computed(() => props.dismissLabel.trim() !== '')
+
 function close() {
     isClosed.value = true
     emit('close')
@@ -50,41 +159,70 @@ function close() {
 <div v-if="!isClosed"
     :class="[
         'rsui-message-box',
-        `rsui-message-box--${variant}`
+        `rsui-message-box--${safeVariant}`,
+        { 'rsui-message-box--with-icon': hasIcon() },
     ]"
     :role="liveRole"
 >
-    <div v-if="$slots.title" class="rsui-message-box__head">
-        <div class="rsui-message-box__title">
-            <slot name="title"></slot>
-        </div>
-        <div v-if="closeable" class="rsui-message-box__close">
-            <button type="button"
-                class="rsui-message-box__close-icon"
-                :aria-label="closeLabel"
-                @click="close"
-            >
-                <Icon disabled>
-                    <XMarkIcon aria-hidden="true"></XMarkIcon>
-                </Icon>
-            </button>
-        </div>
+    <!--
+        A sibling of the whole text column rather than of the body, so it sits
+        beside the title and the text below it indents past it instead of wrapping
+        under it.
+
+        `aria-hidden` because the glyph restates the message rather than adding to
+        it, matching Pill and MetricCard — the variant's meaning reaches assistive
+        tech through the live region, not through a decorative icon.
+    -->
+    <div v-if="hasIcon()" class="rsui-message-box__icon" aria-hidden="true">
+        <slot name="icon"></slot>
     </div>
-    <div class="rsui-message-box__content">
-        <div class="rsui-message-box__body">
-            <slot></slot>
+
+    <div class="rsui-message-box__main">
+        <div v-if="$slots.title" class="rsui-message-box__head">
+            <div class="rsui-message-box__title">
+                <slot name="title"></slot>
+            </div>
         </div>
-        <div v-if="closeable && !$slots.title" class="rsui-message-box__close">
-            <button type="button"
-                class="rsui-message-box__close-icon"
-                :aria-label="closeLabel"
+
+        <div class="rsui-message-box__content">
+            <div class="rsui-message-box__body">
+                <slot></slot>
+            </div>
+        </div>
+
+        <!--
+            Actions stay neutral rather than taking the variant colour. Coloured
+            text on a coloured tint is a contrast problem, and the action is a way
+            out of the message rather than a restatement of its severity.
+        -->
+        <div v-if="hasDismiss || rendersContent($slots.actions)" class="rsui-message-box__actions">
+            <button v-if="hasDismiss"
+                type="button"
+                class="rsui-message-box__dismiss"
                 @click="close"
             >
-                <Icon disabled>
-                    <XMarkIcon aria-hidden="true"></XMarkIcon>
-                </Icon>
+                {{ dismissLabel }}
             </button>
+
+            <slot name="actions" :close="close"></slot>
         </div>
     </div>
+
+    <!--
+        Top level rather than inside the head or the body, so it stays in the
+        corner whether or not there is a title — the two duplicated buttons this
+        replaces each sat in a `justify-between` row to reach the same place.
+    -->
+    <div v-if="closeable" class="rsui-message-box__close">
+        <button type="button"
+            class="rsui-message-box__close-icon"
+            :aria-label="closeLabel"
+            @click="close"
+        >
+            <Icon secondary>
+                <XMarkIcon aria-hidden="true"></XMarkIcon>
+            </Icon>
+        </button>
+    </div>
 </div>
 </template>

package/src/components/Section/SectionFooter.vue

@@ -1,25 +1,215 @@
 <script setup>
-defineProps({
+import { computed, watchEffect, useSlots, Comment, Fragment } from 'vue'
+
+const props = defineProps({
     showContent: {
         type: Boolean,
         default: true,
     },
+    /**
+     * Label for the trailing "view all" link. Setting it, together with
+     * `viewAllHref`, is what puts the link in the footer.
+     *
+     * A prop rather than a slot: it is the link's accessible name, and a prop
+     * cannot be present-but-empty the way a slot can. Slot presence read through
+     * `useSlots()` is also not reactive, so a link gated on it would never appear
+     * for a consumer rendering it conditionally.
+     */
+    viewAllLabel: {
+        type: String,
+        default: '',
+    },
+    /**
+     * Where the view-all link goes. Required alongside the label — an anchor
+     * without an href is not a link, and is skipped by keyboard navigation.
+     */
+    viewAllHref: {
+        type: String,
+        default: '',
+    },
+})
+
+/**
+ * Coerced, not dereferenced. `default: ''` only applies to `undefined` — Vue
+ * skips type checking entirely for a `null` on a non-required prop, so `null`
+ * arrives with no warning at all and `.trim()` on it throws out of setup, taking
+ * the whole parent subtree down with it. An absent URL serialises to `null`, not
+ * `undefined`, so that is the likely wiring rather than the exotic one. The type
+ * validator cannot be relied on either; it is stripped from production builds.
+ */
+const viewAllLabelText = computed(() => String(props.viewAllLabel ?? '').trim())
+
+const rawViewAllHref = computed(() => String(props.viewAllHref ?? '').trim())
+
+/**
+ * Schemes an anchor may safely carry. `javascript:` and `data:` in an href are
+ * script execution, and this is a declared prop on a design-system component
+ * rather than an attribute passthrough — a consuming app can reasonably expect
+ * the anchor it did not write to be safe. Anything else is refused loudly, since
+ * a link that quietly stops working is the failure this component exists to
+ * avoid.
+ */
+const SAFE_HREF_SCHEME = /^(https?:|mailto:|tel:)/i
+
+/**
+ * `//evil.com` is protocol-relative: it starts with a slash but navigates to
+ * another host entirely, so a leading-slash test alone would wave it through.
+ */
+const PROTOCOL_RELATIVE = /^\/\//
+
+/**
+ * Anything with a scheme has one before the first slash. No colon in that span
+ * means a relative path — `courses/1`, `./x`, `../x`, `#anchor`, `?q=1` — which
+ * cannot leave the site and so needs no allow-list of its own. This is what the
+ * warning text has always told consumers to use; the previous check only accepted
+ * paths beginning with `/`, and refused the rest while telling them they were
+ * fine.
+ */
+function isRelativeHref(href) {
+    const beforeFirstSlash = href.split('/')[0]
+
+    return !beforeFirstSlash.includes(':')
+}
+
+const isViewAllHrefSafe = computed(() => {
+    const href = rawViewAllHref.value
+
+    if (href === '') return true
+    if (PROTOCOL_RELATIVE.test(href)) return false
+    if (SAFE_HREF_SCHEME.test(href)) return true
+
+    return isRelativeHref(href)
+})
+
+const hasViewAllLabel = computed(() => viewAllLabelText.value !== '')
+
+const hasViewAllHref = computed(() => rawViewAllHref.value !== '' && isViewAllHrefSafe.value)
+
+const showViewAll = computed(() => hasViewAllLabel.value && hasViewAllHref.value)
+
+const slots = useSlots()
+
+/**
+ * Whether a slot renders anything at all. Slot *presence* is not the same
+ * question: `<template #default><Button v-if="canManage" /></template>` leaves a
+ * truthy slot function that renders a comment placeholder, which would still
+ * claim a `flex-1` region and shove the centred link into one half of the footer.
+ */
+function rendersContent(slot) {
+    const nodes = slot?.()
+
+    if (!nodes) return false
+
+    // Comment vnodes are what a falsy `v-if` leaves behind. Fragments wrap lists
+    // and `<template v-if>` blocks, so a truthy wrapper around a falsy child is a
+    // Fragment whose only child is a Comment — counting its length would call that
+    // content and render an empty region claiming `flex-1`.
+    return nodes.some(rendersNode)
+}
+
+function rendersNode(node) {
+    if (node.type === Comment) return false
+    if (node.type === Fragment) return Array.isArray(node.children) && node.children.some(rendersNode)
+
+    return true
+}
+
+/**
+ * Whether the view-all has the footer to itself, which is the case that wants
+ * centring. With anything alongside it, a greedy region would split the row with
+ * `content-start` and squeeze the buttons towards the middle rather than the
+ * right edge, so it stays content-sized and sits at the end instead.
+ */
+/*
+ * Plain functions, not computeds. `useSlots()` returns a non-reactive object, so
+ * a computed wrapping it caches its first answer forever — a consumer putting a
+ * `v-if` on the slot itself would never see the region appear or disappear. Called
+ * from the template instead, so they are re-evaluated on every render, which is
+ * what makes them track.
+ */
+function hasDefaultContent() {
+    return rendersContent(slots.default)
+}
+
+function hasStartContent() {
+    return props.showContent && rendersContent(slots.content)
+}
+
+function isViewAllAlone() {
+    return !hasDefaultContent() && !hasStartContent()
+}
+
+/**
+ * Half a link is not a link, so say so rather than rendering nothing. A label
+ * with no href would be an anchor the keyboard skips; an href with no label
+ * would be one a screen reader announces as its own URL.
+ *
+ * Deferred by a tick, and cancelled if the effect re-runs. The two values often
+ * arrive separately — a literal label beside an href that is empty until a fetch
+ * resolves — and warning about a state that corrects itself a tick later trains
+ * everyone to ignore the channel, which costs more than it catches.
+ *
+ * Dev-only, matching LinkSlot, ButtonSlot, Pill and InlineEditableText. This
+ * package ships raw `.vue` source, so an ungated warn reaches real users'
+ * consoles.
+ */
+watchEffect((onCleanup) => {
+    if (process.env.NODE_ENV === 'production') return
+    if (showViewAll.value) return
+
+    const isUnsafeHref = rawViewAllHref.value !== '' && !isViewAllHrefSafe.value
+    const isHalfConfigured = hasViewAllLabel.value !== hasViewAllHref.value
+
+    if (!isUnsafeHref && !isHalfConfigured) return
+
+    const message = isUnsafeHref
+        ? `[RSUI] SectionFooter: refused an unsafe \`viewAllHref\` ("${rawViewAllHref.value}"). Use an http(s), mailto, tel, or relative URL.`
+        : `[RSUI] SectionFooter: the view-all link needs both \`viewAllLabel\` and \`viewAllHref\`; \`${hasViewAllLabel.value ? 'viewAllHref' : 'viewAllLabel'}\` is missing, so no link has been rendered.`
+
+    const timer = setTimeout(() => console.warn(message), 0)
+
+    onCleanup(() => clearTimeout(timer))
 })
 </script>
 <template>
 <div class="rsui-section-footer">
     <div class="rsui-section-footer__content-start"
-        v-if="showContent && $slots.content"
+        v-if="hasStartContent()"
     >
         <slot name="content"></slot>
     </div>
-    <div :class="[
-        'rsui-section-footer__content-end',
-        {
-            'rsui-section-footer__content-end--full': !showContent || !$slots.content,
-        }
-    ]">
+    <div v-if="hasDefaultContent()"
+        :class="[
+            'rsui-section-footer__content-end',
+            {
+                'rsui-section-footer__content-end--full': !hasStartContent(),
+            }
+        ]"
+    >
         <slot></slot>
     </div>
+
+    <!--
+        Its own centred region rather than tucked into `content-end`, which is
+        right-aligned for action buttons. A view-all is not a form action sitting
+        at the end of a row — it is the way out of the section, and it usually has
+        the footer to itself.
+    -->
+    <div v-if="showViewAll"
+        :class="[
+            'rsui-section-footer__view-all-region',
+            {
+                'rsui-section-footer__view-all-region--full': isViewAllAlone(),
+            }
+        ]"
+    >
+        <a class="rsui-section-footer__view-all"
+            :href="rawViewAllHref"
+            data-ph-capture-attribute-component="SectionFooterViewAll"
+            data-ph-capture-attribute-label="View all"
+        >
+            {{ viewAllLabelText }}
+        </a>
+    </div>
 </div>
 </template>

package/src/components/Section/SectionHeader.vue

@@ -140,7 +140,10 @@ const titleTag = computed(() => props.headingLevel ? `h${props.headingLevel}` :
                 <slot name="more-actions"
                     :handleMoreActionsClick="handleMoreActionsClick"
                 >
-                    <ButtonTertiary @click="handleMoreActionsClick">
+                    <!-- sm, not the md default: this is the header's own overflow control, so it
+                         follows the same action sizing the header documents and the stories use.
+                         Left md it stood 42px against a 36px title and 38px sibling actions. -->
+                    <ButtonTertiary sm @click="handleMoreActionsClick">
                         <slot name="more-actions-label">
                             <Icon>
                                 <EllipsisVerticalIcon />