acinguiux-preact-components 0.0.1

package/src/main/atoms/scroller.js

@@ -0,0 +1,224 @@
+import { useRef, useLayoutEffect, useEffect } from 'preact/hooks'
+import h from '../shared/h.js'
+import { ARROW_BACK, ARROW_NEXT } from '../shared/icons.js'
+import t from '../shared/t.js'
+import { Button } from './button.js'
+import { tw, LARGE, MEDIUM } from '../shared/twind.js'
+import getSizeClass from '../shared/get-size-class.js'
+
+// Sometimes navigating with a button does not cause the slider to scroll completely.
+const RIGHT_BLUR_MARGIN_TOLERANCE = 2
+const DEFAULT_COUNT = [3.25, 2.25, 1.25]
+
+export function Scroller ({ _count, _tall, _index = 0, children, ...props }) {
+  const ref = useRef(null)
+  const {
+    _autoplay = false,
+    _interval = 3500,
+    _infinite = false,
+    _hideControls = false,
+    ...restProps
+  } = props
+  const baseSlides = children ?? []
+  const isInfinite = _infinite && baseSlides.length > 1
+  const slides = _infinite && baseSlides.length > 1
+    ? [...baseSlides, ...baseSlides, ...baseSlides]
+    : baseSlides
+  const interval = Math.max(1000, Number(_interval) || 3500)
+  const visibleSlideCount = _count ?? DEFAULT_COUNT
+  const [colsLarge, colsMedium, colsSmall] = visibleSlideCount
+  const blurSides = !visibleSlideCount.every(Number.isInteger)
+  const sizeClass = getSizeClass(_tall)
+
+  // Scroll to selected slide.
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const container = ref.current
+      const startIndex = isInfinite ? baseSlides.length + _index : _index
+      const child = container.children[startIndex]
+      if (child) {
+        // Timeout fixes scroller in popup instances.
+        // We need to make sure the scroll is visible.
+        setTimeout(() => container.scrollTo({ left: child.offsetLeft }), 0)
+      }
+    }
+  }, [_index, isInfinite, baseSlides.length])
+
+  // Auto-scroll banners/slides and wrap seamlessly when infinite mode is enabled.
+  useEffect(() => {
+    if (!_autoplay || !ref.current || slides.length <= 1) {
+      return
+    }
+
+    const slider = ref.current
+    const timer = setInterval(() => {
+      const slideWidth = slider?.firstChild?.offsetWidth ?? 0
+      if (!slideWidth) {
+        return
+      }
+
+      const maxScrollLeft = Math.max(0, slider.scrollWidth - slider.clientWidth)
+      const nextLeft = slider.scrollLeft + slideWidth
+
+      if (isInfinite) {
+        const loopWidth = slider.children[baseSlides.length]?.offsetLeft ?? 0
+        const thirdSetStart = slider.children[baseSlides.length * 2]?.offsetLeft ?? maxScrollLeft
+        if (loopWidth > 0 && nextLeft >= thirdSetStart - RIGHT_BLUR_MARGIN_TOLERANCE) {
+          slider.scrollTo({ left: Math.max(0, nextLeft - loopWidth), behavior: 'auto' })
+        } else {
+          slider.scroll({ left: nextLeft, behavior: 'smooth' })
+        }
+        return
+      }
+
+      if (nextLeft >= maxScrollLeft - RIGHT_BLUR_MARGIN_TOLERANCE) {
+        slider.scrollTo({ left: 0, behavior: 'smooth' })
+      } else {
+        slider.scroll({ left: nextLeft, behavior: 'smooth' })
+      }
+    }, interval)
+
+    return () => clearInterval(timer)
+  }, [_autoplay, _infinite, interval, slides.length])
+
+  return h('div', {
+    ...restProps,
+    className: `flex flex-col ${sizeClass}`,
+    style: 'direction: ltr', // Do not mirror for RTL.
+    children: [
+      h('div', { className: 'relative grow' },
+        blurSides && h('div', { // Left blur
+          className: 'hidden absolute start-0 top-0 bottom-0 w-6 bg-bga rounded-tr-lg rounded-br-lg animate-fade',
+          style: 'background: linear-gradient(90deg, hsl(var(--color-bga)), transparent); pointer-events: none'
+        }),
+        h('div', {
+          ref,
+          className: 'w-full h-full overflow-x-scroll snap-x overflow-y-hidden grid grid-flow-col gap-5 outline-offset-1',
+          role: 'list',
+          onScroll (event) {
+            if (isInfinite) {
+              const slider = event.target
+              const loopWidth = slider.children[baseSlides.length]?.offsetLeft ?? 0
+              const maxScrollLeft = Math.max(0, slider.scrollWidth - slider.clientWidth)
+              const thirdSetStart = slider.children[baseSlides.length * 2]?.offsetLeft ?? maxScrollLeft
+
+              if (loopWidth > 0 && slider.scrollLeft <= RIGHT_BLUR_MARGIN_TOLERANCE) {
+                slider.scrollTo({ left: slider.scrollLeft + loopWidth, behavior: 'auto' })
+              } else if (loopWidth > 0 && slider.scrollLeft >= thirdSetStart - RIGHT_BLUR_MARGIN_TOLERANCE) {
+                slider.scrollTo({ left: Math.max(0, slider.scrollLeft - loopWidth), behavior: 'auto' })
+              }
+            }
+
+            if (!blurSides) {
+              return
+            }
+
+            const slider = event.target
+            if (slider.scrollLeft === 0) {
+              slider.parentElement.firstChild.classList.add(tw('hidden'))
+            } else if (slider.scrollLeft > slider.scrollWidth - slider.offsetWidth - RIGHT_BLUR_MARGIN_TOLERANCE) {
+              slider.parentElement.lastChild.classList.add(tw('hidden'))
+            } else {
+              slider.parentElement.firstChild.classList.remove(tw('hidden'))
+              slider.parentElement.lastChild.classList.remove(tw('hidden'))
+            }
+          },
+          _style: id => `
+            /* Firefox scrollbar cannot be styled, so hide it. */
+            @-moz-document url-prefix() ${id} {
+              scrollbar-width: none;
+            }
+
+            ${id} {
+              grid-auto-columns: ${getWidth(colsLarge)};
+              scrollbar-color: auto;
+            }
+
+            @media screen and (min-width: ${MEDIUM}px) and (max-width: ${LARGE - 1}px) {
+              ${id} { grid-auto-columns: ${getWidth(colsMedium)}; }
+            }
+
+            @media screen and (max-width: ${MEDIUM - 1}px) {
+              ${id} { grid-auto-columns: ${getWidth(colsSmall)}; }
+            }
+
+            ${id}::-webkit-scrollbar {
+              height: 24px;
+              background: transparent;
+            }
+
+            ${id}::-webkit-scrollbar-track {
+              background: transparent;
+              border-bottom: solid 4px hsla(var(--color-txa), 0.1);
+            }
+
+            ${id}::-webkit-scrollbar-thumb {
+              background: transparent;
+              border-bottom: solid 4px hsl(var(--color-bgb));
+            }
+
+            ${id} > div > * { height: 100%; }
+
+            /* Restore the RTL direction for slide content. */
+            [dir="rtl"] ${id} > div { direction: rtl; }
+          `,
+          children: slides.map(child =>
+            h('div', {
+              style: 'outline-offset: -1px',
+              role: 'listitem',
+              className: 'snap-start h-full',
+              children: child
+            })
+          )
+        }),
+        blurSides && h('div', { // Right blur
+          className: 'absolute end-0 top-0 bottom-0 w-6 bg-bga rounded-tl-lg rounded-bl-lg animate-fade',
+          style: 'background: linear-gradient(90deg, transparent, hsl(var(--color-bga))); pointer-events: none'
+        })
+      ),
+      !_hideControls && h('div', { className: 'gap-5 flex justify-end mt-5' },
+        h(Button, {
+          _model: { name: t('Previous slide'), icon: ARROW_BACK },
+          _textless: true,
+          tabindex: -1,
+          'aria-hidden': true,
+          onClick: () => scroll(ref, -1, isInfinite, baseSlides.length)
+        }),
+        h(Button, {
+          _model: { name: t('Next slide'), icon: ARROW_NEXT },
+          _textless: true,
+          tabindex: -1,
+          'aria-hidden': true,
+          onClick: () => scroll(ref, 1, isInfinite, baseSlides.length)
+        })
+      )
+    ]
+  })
+}
+
+function getWidth (visibleSlideCount) {
+  const gapCount = Math.ceil(visibleSlideCount) - 1
+  return `calc((100% - ${gapCount} * 20px) / ${visibleSlideCount})`
+}
+
+function scroll (ref, direction = 1, infinite = false, baseSlideCount = 0) {
+  const slider = ref?.current
+  const slideWidth = slider?.firstChild?.offsetWidth ?? 0
+  const pos = slider?.scrollLeft ?? 0
+  const nextPos = pos + direction * slideWidth
+
+  if (infinite && baseSlideCount > 1) {
+    const loopWidth = slider?.children?.[baseSlideCount]?.offsetLeft ?? 0
+    const thirdSetStart = slider?.children?.[baseSlideCount * 2]?.offsetLeft ?? 0
+    if (loopWidth > 0 && direction < 0 && nextPos <= RIGHT_BLUR_MARGIN_TOLERANCE) {
+      slider?.scrollTo({ left: pos + loopWidth, behavior: 'auto' })
+      return
+    }
+    if (loopWidth > 0 && thirdSetStart > 0 && direction > 0 && nextPos >= thirdSetStart - RIGHT_BLUR_MARGIN_TOLERANCE) {
+      slider?.scrollTo({ left: nextPos - loopWidth, behavior: 'auto' })
+      return
+    }
+  }
+
+  slider?.scroll({ left: nextPos, behavior: 'smooth' })
+}

package/src/main/atoms/svg.js

@@ -0,0 +1,65 @@
+/* global DOMParser */
+import { useEffect, useState } from 'preact/hooks'
+import getSizeClass from '../shared/get-size-class.js'
+import h from '../shared/h.js'
+import { tw } from '../shared/twind.js'
+
+// Cache SVGs to prevent flickering.
+const cache = {}
+
+export function SVG ({ _model, _tall, ...props }) {
+  const src = _model.src || ''
+  const alt = _model.alt || ''
+  const cacheKey = src + alt
+  const sizeClass = getSizeClass(_tall)
+  const [validSvg, setSvg] = useState(cache[cacheKey]) // Use the initial cached value.
+
+  // The src might have changed. Use the current cached value.
+  setSvg(cache[cacheKey])
+
+  useEffect(() => {
+    // Fetch if not cached.
+    validSvg || (async function () {
+      const isLink = src.endsWith('.svg') || src.startsWith('data:')
+      const rawSvg = isLink ? await fetchSvg(src) : src
+      cache[cacheKey] = getSvg(rawSvg, sizeClass, alt)
+      setSvg(cache[cacheKey])
+    })()
+  }, [src, alt, sizeClass])
+
+  return validSvg
+    ? h('div', { ...props, className: `${sizeClass}`, dangerouslySetInnerHTML: { __html: validSvg } })
+    : null
+}
+
+function getSvg (svgContent, sizeClass, alt) {
+  const svgDoc = (new DOMParser()).parseFromString(svgContent, 'image/svg+xml')
+  const parserError = svgDoc.getElementsByTagName('parsererror')[0]
+
+  if (parserError) {
+    console.warn(`Invalid SVG: ${svgContent}\n${parserError.innerText}`)
+    return null
+  }
+
+  const svgEl = svgDoc.documentElement
+  svgEl.setAttribute('class', tw(`block ${sizeClass}`))
+
+  // Treat it like an image if alt is provided.
+  if (alt) {
+    svgEl.setAttribute('role', 'img')
+    svgEl.setAttribute('title', alt)
+  }
+
+  return svgEl.outerHTML
+}
+
+async function fetchSvg (url) {
+  try {
+    const res = await fetch(url)
+    return res.text()
+  } catch (error) {
+    console.warn('Unable to fetch SVG:', url)
+    console.warn(error)
+    return null
+  }
+}

package/src/main/atoms/table.js

@@ -0,0 +1,32 @@
+import h from '../shared/h.js'
+
+export function Table ({ children, ...props }) {
+  return h('div', { ...props, className: 'overflow-x-auto' }, // Make it scrollable.
+    h('table', {
+      className: 'rounded-lg border-l border-t border-spacing-0 border-txa/20 border-separate w-full',
+      _style: id => `
+        ${id} tr { width: 100% }
+        ${id} tr:hover { background-color: hsla(var(--color-txa), 0.05) }
+        ${id} td, th {
+          text-align: left;
+          vertical-align: top;
+          padding: calc(8px);
+          border-right: 1px solid hsla(var(--color-txa), 0.2);
+          border-bottom: 1px solid hsla(var(--color-txa), 0.2);
+        }
+        ${id} th > *, td > * {
+          vertical-align: top;
+        }
+        ${id} th {
+          font-weight: bold;
+          background-color: hsla(var(--color-txa), 0.05);
+        }
+        ${id} tr:first-child > *:first-child { border-top-left-radius: 8px }
+        ${id} tr:first-child > *:last-child { border-top-right-radius: 8px }
+        ${id} tr:last-child > *:first-child { border-bottom-left-radius: 8px }
+        ${id} tr:last-child > *:last-child { border-bottom-right-radius: 8px }
+      `,
+      children
+    })
+  )
+}

package/src/main/atoms/textarea.js

@@ -0,0 +1,10 @@
+import h from '../shared/h.js'
+
+export function Textarea (props) {
+  return h('textarea', {
+    ...props,
+    style: 'resize: vertical',
+    // Force input colour to brand1.
+    className: 'pal-brand1 block rounded-lg bg-bga text-txa border-txa/20 w-full p-4 border h-36'
+  })
+}

package/src/main/atoms/time.js

@@ -0,0 +1,12 @@
+import h from '../shared/h.js'
+import formatTime from '../shared/format-time.js'
+
+export function Time ({ _time, ...props }) {
+  const date = new Date(_time || Date.now())
+  return h('time', {
+    ...props,
+    className: 'block text-txa/80',
+    datetime: date.toISOString(),
+    children: formatTime(date)
+  })
+}

package/src/main/atoms/video.js

@@ -0,0 +1,100 @@
+import { useRef, useState } from 'preact/hooks'
+import bubbleEvent from '../shared/bubble-event.js'
+import getId from '../shared/get-id.js'
+import getSizeClass from '../shared/get-size-class.js'
+import h from '../shared/h.js'
+import { MEDIA_PAUSE, MEDIA_PLAY } from '../shared/icons.js'
+import t from '../shared/t.js'
+import { Button } from './button.js'
+
+export function Video ({ _model, _tall, _fit, ...props }) {
+  const { src } = _model
+
+  if (!src) {
+    return null
+  }
+
+  const url = new URL(src, globalThis.origin)
+  const Handler = globalThis.origin === url.origin ? HTMLVideo : EmbedVideo
+  return h(Handler, { _model, _tall, _fit, ...props })
+}
+
+function EmbedVideo ({ _model, _tall, ...props }) {
+  const { src, caption, autoplay } = _model
+  const url = new URL(src)
+  const sizeClass = getSizeClass(_tall)
+  const [id] = useState(() => getId())
+
+  // Support for YouTube background videos.
+  const ytVideoId = src.replace(/https:\/\/(?:www\.)?(?:youtube\.com|youtube-nocookie\.com)\/embed\/([a-z0-9-_]{11})/i, '$1')
+
+  // Enable JS API to allow postMessage control of the video for YouTube videos.
+  url.searchParams.set('enablejsapi', 1)
+  if (ytVideoId && autoplay) {
+    url.searchParams.set('autoplay', 1)
+    url.searchParams.set('playsinline', 1)
+    url.searchParams.set('loop', 1)
+    url.searchParams.set('mute', 1)
+    url.searchParams.set('controls', 0)
+    url.searchParams.set('playlist', ytVideoId)
+  }
+
+  // Iframe needs a default aspect ratio.
+  return h('iframe', {
+    ...props,
+    id,
+    className: `block aspect-video ${sizeClass}`,
+    onLoad: bubbleEvent,
+    loading: 'lazy',
+    src: url.href,
+    title: caption,
+    allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
+    allowFullScreen: true
+  })
+}
+
+// iOS is very particular about the videos:
+// https://webkit.org/blog/6784/new-video-policies-for-ios/
+function HTMLVideo ({ _model, _tall, _fit = 'cover', ...props }) {
+  const { src, caption, autoplay } = _model
+
+  const msgPause = t('Pause playback')
+  const msgPlay = t('Resume playback')
+  const sizeClass = getSizeClass(_tall)
+  const fitClass = `object-${_fit}`
+  const [state, setState] = useState({ icon: MEDIA_PAUSE, text: msgPause })
+  const ref = useRef(null)
+
+  return h('div', { ...props, className: `relative ${sizeClass}` },
+    h('video', {
+      ref,
+      autoplay,
+      className: `block ${sizeClass} ${fitClass}`,
+      controls: !autoplay,
+      title: caption,
+      loop: autoplay,
+      muted: autoplay, // https://stackoverflow.com/questions/61510160/why-muted-attribute-on-video-tag-is-ignored-in-react
+      playsinline: autoplay,
+      onTimeUpdate: bubbleEvent,
+      children: h('source', { src })
+    }),
+    autoplay && h('div', { className: 'absolute top-4 end-4' },
+      h(Button, {
+        _variant: 'plain',
+        _textless: true,
+        _size: 'sm',
+        _color: 'transparent',
+        _model: { name: state.text, icon: state.icon },
+        onClick: () => {
+          if (ref.current.paused) {
+            ref.current.play()
+            setState({ icon: MEDIA_PAUSE, text: msgPause })
+          } else {
+            ref.current.pause()
+            setState({ icon: MEDIA_PLAY, text: msgPlay })
+          }
+        }
+      })
+    )
+  )
+}

package/src/main/export-main.js

@@ -0,0 +1,12 @@
+export { componentModels } from './routing/component.js'
+export { ValidationError } from './routing/error-handler.js'
+export { dataset } from './routing/router.js'
+export { getUserId } from './shared/analytics.js'
+export { default as customElement } from './shared/custom-element.js'
+export { default as h } from './shared/h.js'
+export { default as register } from './shared/register.js'
+export { renderComponent, renderPage } from './shared/renderer.js'
+export { getConsent, setConsent, waitForConsent } from './shared/simple-consent-api.js'
+export { i18n, default as t } from './shared/t.js'
+export { injectStyles, LARGE, MEDIUM, tw } from './shared/twind.js'
+export { default as deepSelector } from './shared/deep-selector.js'

package/src/main/export-matter.js

@@ -0,0 +1,86 @@
+// Atoms
+export { Audio } from './atoms/audio.js'
+export { Box } from './atoms/box.js'
+export { Button } from './atoms/button.js'
+export { Card } from './atoms/card.js'
+export { Form } from './atoms/form.js'
+export { Heading } from './atoms/heading.js'
+export { Icon } from './atoms/icon.js'
+export { Input } from './atoms/input.js'
+export { Img } from './atoms/img.js'
+export { Link } from './atoms/link.js'
+export { List } from './atoms/list.js'
+export { LinkText } from './atoms/link-text.js'
+export { Logo } from './atoms/logo.js'
+export { Menu } from './atoms/menu.js'
+export { Message } from './atoms/message.js'
+export { NavLink } from './atoms/nav-link.js'
+export { Popup } from './atoms/popup.js'
+export { RichText } from './atoms/rich-text.js'
+export { Scroller } from './atoms/scroller.js'
+export { SVG } from './atoms/svg.js'
+export { Table } from './atoms/table.js'
+export { Time } from './atoms/time.js'
+export { Video } from './atoms/video.js'
+
+// Molecules
+export { Asset } from './molecules/asset.js'
+export { Glossary } from './molecules/glossary.js'
+export { Links } from './molecules/links.js'
+export { PromoText } from './molecules/promo-text.js'
+export { Tags } from './molecules/tags.js'
+export { Tree } from './molecules/tree.js'
+
+// Organisms
+export { AccordionItem } from './organisms/accordion-item.js'
+export { Author } from './organisms/author.js'
+export { Breadcrumb } from './organisms/breadcrumb.js'
+export { CallToAction } from './organisms/call-to-action.js'
+export { Carousel } from './organisms/carousel.js'
+export { CartItem } from './organisms/cart-item.js'
+export { Cart } from './organisms/cart.js'
+export { ContactForm } from './organisms/contact-form.js'
+export { Container } from './organisms/container.js'
+export { ContentOwner } from './organisms/content-owner.js'
+export { DateEntry } from './organisms/date-entry.js'
+export { ExternalSearch } from './organisms/external-search.js'
+export { FilteredItem } from './organisms/filtered-item.js'
+export { FooterItem } from './organisms/footer-item.js'
+export { ImageGallery } from './organisms/image-gallery.js'
+export { LastModified } from './organisms/last-modified.js'
+export { LegalFooter } from './organisms/legal-footer.js'
+export { ListItem } from './organisms/list-item.js'
+export { Metadata } from './organisms/metadata.js'
+export { Navigation } from './organisms/navigation.js'
+export { Notification } from './organisms/notification.js'
+export { OrderTracker } from './organisms/order-tracker.js'
+export { Page } from './organisms/page.js'
+export { PageHeader } from './organisms/page-header.js'
+export { PageHeaderBanner } from './organisms/page-header-banner.js'
+export { PageTags } from './organisms/page-tags.js'
+export { PressRelease } from './organisms/press-release.js'
+export { PromoBanner } from './organisms/promo-banner.js'
+export { PromoBottom } from './organisms/promo-bottom.js'
+export { PromoButton } from './organisms/promo-button.js'
+export { PromoCard } from './organisms/promo-card.js'
+export { PromoCardCover } from './organisms/promo-card-cover.js'
+export { PromoProductCard } from './organisms/promo-product-card.js'
+export { PromoProductFull } from './organisms/promo-product-full.js'
+export { ProductAdmin } from './organisms/product-admin.js'
+export { PromoFull } from './organisms/promo-full.js'
+export { PromoLure } from './organisms/promo-lure.js'
+export { PromoSimple } from './organisms/promo-simple.js'
+export { PromoImage } from './organisms/promo-image.js'
+export { Quote } from './organisms/quote.js'
+export { SearchForm } from './organisms/search-form.js'
+export { SearchResult } from './organisms/search-result.js'
+export { SearchNav } from './organisms/search-nav.js'
+export { Slider } from './organisms/slider.js'
+export { StandaloneAsset } from './organisms/standalone-asset.js'
+export { Tabs } from './organisms/tabs.js'
+export { Topbar } from './organisms/topbar.js'
+export { WebComponent } from './organisms/web-component.js'
+
+// Routing
+export { Component } from './routing/component.js'
+export { Router } from './routing/router.js'

package/src/main/export-preact-hooks.js

@@ -0,0 +1 @@
+export * from 'preact/hooks'

package/src/main/export-preact.js

@@ -0,0 +1 @@
+export * from 'preact'

package/src/main/index.js

@@ -0,0 +1,13 @@
+/* global ACINGUIUX_PREACT_VERSION */
+import * as main from './export-main.js'
+import * as matter from './export-matter.js'
+import * as preact from './export-preact.js'
+import * as preactHooks from './export-preact-hooks.js'
+
+export * from './export-main.js'
+export * as matter from './export-matter.js'
+export * as preact from './export-preact.js'
+export * as preactHooks from './export-preact-hooks.js'
+
+globalThis.ami = { ...main, matter, preact, preactHooks, version: ACINGUIUX_PREACT_VERSION }
+main.renderPage()

package/src/main/molecules/asset.js

@@ -0,0 +1,23 @@
+import { Img } from '../atoms/img.js'
+import { SVG } from '../atoms/svg.js'
+import { Video } from '../atoms/video.js'
+import { Audio } from '../atoms/audio.js'
+import h from '../shared/h.js'
+
+const AUDIO_EXTENSIONS = ['.mp3', '.m4a', '.ogg', '.wav', '.aac', '.flac']
+
+export function Asset ({ _model, _tall, _fit, ...props }) {
+  const { image, video } = _model
+
+  if (AUDIO_EXTENSIONS.some(ext => video.src?.toLowerCase().endsWith(ext))) {
+    return h(Audio, { _model: video, ...props })
+  }
+
+  if (video.src) {
+    return h(Video, { ...props, _model: video, _tall, _fit })
+  }
+
+  return image.src?.toLowerCase().endsWith('.svg')
+    ? h(SVG, { ...props, _model: image, _tall })
+    : h(Img, { ...props, _model: image, _tall, _fit })
+}

package/src/main/molecules/glossary.js

@@ -0,0 +1,44 @@
+import { Link } from '../atoms/link.js'
+import { RichText } from '../atoms/rich-text.js'
+import { Table } from '../atoms/table.js'
+import { Asset } from '../molecules/asset.js'
+import formatTime from '../shared/format-time.js'
+import h from '../shared/h.js'
+
+export function Glossary ({ _model, ...props }) {
+  const { title, text, tags, links, image, video, asset, date } = _model
+
+  const list = []
+  title && list.push({ name: 'title', value: title })
+  text && list.push({ name: 'text', value: h(RichText, text) })
+  date && list.push({ name: 'date', value: formatTime(date) })
+  tags.length > 0 && list.push({ name: 'tags', value: tags.map(t => t.name).join(', ') })
+
+  list.push(...links.map((l, ii) => ({
+    name: `link\u00A0${ii + 1}`,
+    value: h(Link, { _model: { ...l, name: `${l.name} (${l.value})` } })
+  })))
+
+  const hasAsset = asset?.src
+  return h('div', { ...props, className: 'grid gap-5 grid-cols-12 px-6 py-4 text-sm bg-bga text-txa w-full' },
+    list.length === 0 && h('div', { className: 'col-span-12' }, 'No data'),
+    list.length > 0 && [
+      h('div', { className: hasAsset ? 'col-span-10' : 'col-span-12' },
+        h(Table,
+          h('tbody', list.map(item =>
+            h('tr', [
+              h('th', item.name),
+              h('td', item.value)
+            ])
+          ))
+        )
+      ),
+      hasAsset && h('figure', { className: 'col-span-2 space-y-1' },
+        h('div', { className: 'rounded-lg overflow-hidden' },
+          h(Asset, { _model: { image, video } })
+        ),
+        asset.caption && h('figcaption', asset.caption)
+      )
+    ]
+  )
+}

package/src/main/molecules/links.js

@@ -0,0 +1,23 @@
+import { Button } from '../atoms/button.js'
+import { Link } from '../atoms/link.js'
+import h from '../shared/h.js'
+
+export function Links ({ _model, _variant, ...props }) {
+  const { links } = _model
+
+  if (links.length === 0) {
+    return null
+  }
+
+  // Render as button if one link is present.
+  if (links.length === 1 && !_variant) {
+    return h(Button, { _model: links[0] })
+  }
+
+  // Render as list of links if more than one link.
+  return h('div', { ...props, role: 'list', className: 'space-y-2' }, links.map(link =>
+    h('div', { role: 'listitem' },
+      h(Link, { _model: link, _variant: _variant ?? 'full' })
+    )
+  ))
+}