acinguiux-preact-components 0.0.1

package/src/main/organisms/container/grid.js

@@ -0,0 +1,44 @@
+import h from '#acinguiux-preact/main/shared/h.js'
+
+const COLUMNS = 12
+
+function getTabletColspan (desktopColspan) {
+  // Preserve full width on table only if desktop width is 10 columns or more.
+  return desktopColspan < 10 ? 1 : 2
+}
+
+function getMobileColspan (colspan, mobileCols) {
+  if (!mobileCols) return 1
+  return 1
+}
+
+export function Grid ({ _tag, _wrap, _parentColspan = COLUMNS, _mobileCols, _list, _gap, children, ...props }) {
+  const wrappedChildren = []
+  for (const [ii, child] of children.entries()) {
+    const wrap = _wrap?.[ii] ?? {}
+    const colstart = Math.min(_parentColspan, wrap.colstart ?? 0)
+    const colspan = Math.min(_parentColspan, wrap.colspan ?? COLUMNS)
+
+    let colstartClass = colstart ? `lg:col-start-${colstart}` : ''
+    if (colstart === 1) {
+      colstartClass += ' md:col-start-1'
+    }
+
+    const mobileColSpan = getMobileColspan(colspan, _mobileCols)
+
+    wrappedChildren.push(h('div', {
+      className: `lg:col-span-${colspan ?? COLUMNS} md:col-span-${getTabletColspan(colspan)} sm:col-span-${mobileColSpan} ${colstartClass}`,
+      ..._list && { role: 'listitem' },
+      children: child
+    }))
+  }
+
+  const mobileGridCols = _mobileCols || 1
+  const gapClass = _gap ? (_mobileCols ? 'sm:gap-2 lg:gap-5' : 'gap-5') : ''
+  return h(_tag || 'div', {
+    ..._list && { role: 'list' },
+    ...props,
+    children: wrappedChildren,
+    className: `grid lg:grid-cols-${_parentColspan} md:grid-cols-${getTabletColspan(_parentColspan)} sm:grid-cols-${mobileGridCols} ${gapClass}`
+  })
+}

package/src/main/organisms/container/header.js

@@ -0,0 +1,13 @@
+import h from '#acinguiux-preact/main/shared/h.js'
+import { Grid } from './grid.js'
+
+export function Header (props) {
+  return h('div', {
+    ...props,
+    className: 'text-txa bg-bga',
+    children: h(Grid, {
+      ...props,
+      _tag: 'header'
+    })
+  })
+}

package/src/main/organisms/container/list.js

@@ -0,0 +1,7 @@
+import h from '#acinguiux-preact/main/shared/h.js'
+import { Grid } from './grid.js'
+
+// Add list markup.
+export function List (props) {
+  return h(Grid, { ...props, _color: undefined, _gap: true, _list: true })
+}

package/src/main/organisms/container/main.js

@@ -0,0 +1,6 @@
+import h from '#acinguiux-preact/main/shared/h.js'
+import { Grid } from './grid.js'
+
+export function Main (props) {
+  return h(Grid, { ...props, _tag: 'main', id: 'main' })
+}

package/src/main/organisms/container/raw.js

@@ -0,0 +1,7 @@
+import h from '#acinguiux-preact/main/shared/h.js'
+import { Grid } from './grid.js'
+
+// Raw grid without gap.
+export function Raw (props) {
+  return h(Grid, { ...props, _color: undefined })
+}

package/src/main/organisms/container/section.js

@@ -0,0 +1,28 @@
+import { Asset } from '#acinguiux-preact/main/molecules/asset.js'
+import { PromoText } from '#acinguiux-preact/main/molecules/promo-text.js'
+import h from '#acinguiux-preact/main/shared/h.js'
+import { Grid } from './grid.js'
+
+export function Section (props) {
+  const { _model } = props
+
+  return h('div', {
+    ...props,
+    className: 'text-txa bg-bga grid grid-cols-1',
+    // The first section should not have a top padding. That's where the Breadcrumb sits.
+    _style: id => `
+      :first-child > ${id} > div {
+        padding-top: 0;
+      }
+    `,
+    children: [
+      _model?.image?.src && h('div', { className: 'row-start-1 col-start-1 col-span-12' },
+        h(Asset, { _model, _tall: true, role: 'presentation' })
+      ),
+      h('div', { className: 'relative max-w-page m-auto w-full row-start-1 col-start-1 px-3 py-12 space-y-5' },
+        h(PromoText, { _model, _level: 2, _align: 'center' }),
+        h(Grid, { ...props, _tag: 'section', _gap: true })
+      )
+    ]
+  })
+}

package/src/main/organisms/container.js

@@ -0,0 +1,29 @@
+import h from '../shared/h.js'
+import { ABTest } from './container/ab-test.js'
+import { Default } from './container/default.js'
+import { FilteredSection, SearchableSection } from './container/filtered-section.js'
+import { Footer } from './container/footer.js'
+import { Header } from './container/header.js'
+import { List } from './container/list.js'
+import { Main } from './container/main.js'
+import { Raw } from './container/raw.js'
+import { Section } from './container/section.js'
+
+export function Container ({ _variant, _wrap, ...props }) {
+  const variants = {
+    // Framework
+    header: Header,
+    footer: Footer,
+    main: Main,
+    section: Section,
+    filtered: FilteredSection,
+    searchable: SearchableSection,
+
+    // Content
+    raw: Raw,
+    list: List,
+    abtest: ABTest
+  }
+
+  return h(variants[_variant] || Default, { ...props, _wrap })
+}

package/src/main/organisms/content-owner.js

@@ -0,0 +1,15 @@
+import h from '../shared/h.js'
+import { isPublish } from '../shared/wcm-mode.js'
+
+export function ContentOwner ({ _model, ...props }) {
+  const { title } = _model
+
+  if (isPublish) {
+    return null
+  }
+
+  return h('div', { ...props, className: 'pal-system-solid bg-bga text-txa px-6 py-4 text-sm' },
+    h('span', { className: 'font-bold' }, 'Owner: '),
+    title
+  )
+}

package/src/main/organisms/date-entry.js

@@ -0,0 +1,56 @@
+import { Box } from '../atoms/box.js'
+import { Time } from '../atoms/time.js'
+import { PromoText } from '../molecules/promo-text.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function DateEntry ({ _model, _variant, ...props }) {
+  const { date, title } = _model
+  if (!date || !title) {
+    throw new ValidationError()
+  }
+
+  return h('div', { ...props, className: 'bg-bga text-txa border-txa/20 flex rounded-2xl' },
+    h(Box, {
+      className: 'relative grow-0 shrink-0 w-36 p-6',
+      children: h(Time, { _time: date }),
+      _style: id => {
+        const styles = []
+        // Vertical linke
+        styles.push(`
+          ${id}::before {
+            content: '';
+            box-sizing: border-box;
+            position: absolute;
+            width: 1px;
+            height: calc(100% + 20px); /* Extend by the gap size. */
+            border-right: 1px dashed hsl(var(--color-txa));
+            top: 0px;
+            right: 0px;
+        }`)
+
+        // Timeline dot.
+        _variant === 'timeline' && styles.push(`
+          ${id}::after {
+            content: '';
+            box-sizing: border-box;
+            position: absolute;
+            width: 17px;
+            height: 17px;
+            border: 3px solid hsl(var(--color-bga));
+            background-color: hsl(var(--color-txa));
+            box-shadow: 0 0 0 1px hsl(var(--color-txa));
+            border-radius: 100%;
+            top: 27px;
+            right: -8px;
+          }`)
+
+        return styles.join('')
+      }
+    }),
+    h('div', {
+      className: 'grow',
+      children: h(PromoText, { _model: { ..._model, date: null } })
+    })
+  )
+}

package/src/main/organisms/external-search.js

@@ -0,0 +1,73 @@
+import { useState } from 'preact/hooks'
+import { Box } from '../atoms/box.js'
+import { Button } from '../atoms/button.js'
+import { Heading } from '../atoms/heading.js'
+import { Input } from '../atoms/input.js'
+import { RichText } from '../atoms/rich-text.js'
+import { Asset } from '../molecules/asset.js'
+import disableTransparency from '../shared/disable-transparency.js'
+import h from '../shared/h.js'
+import { NAVIGATION_SEARCH } from '../shared/icons.js'
+import t from '../shared/t.js'
+import { ValidationError } from '../routing/error-handler.js'
+
+export function ExternalSearch ({ _model, _color, ...props }) {
+  const { image, links, title, text } = _model
+  if (!text || !title || links.length === 0) {
+    throw new ValidationError()
+  }
+
+  const [value, setValue] = useState('')
+  const firstLink = links[0]
+  const hasAsset = image.src
+
+  const inputProps = {
+    type: 'search',
+    placeholder: firstLink.name,
+    title: t('Enter your search term'),
+    onInput: event => setValue(event.target.value),
+    value
+  }
+
+  const buttonProps = {
+    _textless: true,
+    _model: {
+      name: t('Submit'),
+      icon: NAVIGATION_SEARCH
+    },
+    type: 'submit',
+    onClick: event => {
+      event.preventDefault()
+      const url = firstLink.value + encodeURIComponent(value)
+      globalThis.location.href = url
+    }
+  }
+
+  const form = h('form', {
+    action: firstLink.value,
+    className: `lg:rounded-xl bg-bga text-txa ${disableTransparency(_color)}`,
+    children: h(Box,
+      h(Heading, { _level: 3 }, title),
+      h(RichText, text),
+      h('div', { className: 'flex space-x-5' },
+        h('div', { className: 'grow' },
+          h(Input, inputProps)
+        ),
+        h('div', { className: 'shrink' },
+          h(Button, buttonProps)
+        )
+      )
+    )
+  })
+
+  if (!hasAsset) {
+    return h('div', { ...props, className: 'rounded-2xl overflow-hidden w-full' }, form)
+  }
+
+  return h('div', { ...props, className: 'relative overflow-hidden rounded-2xl' },
+    h(Asset, { _model, role: 'presentation' }),
+    h('div', { className: 'lg:absolute lg:top-6 lg:start-0 lg:end-0 lg:grid lg:grid-cols-12 gap-x-5' },
+      h('div', { className: 'lg:col-start-2 lg:col-span-10' }, form)
+    )
+  )
+}

package/src/main/organisms/filtered-item.js

@@ -0,0 +1,163 @@
+import { useState } from 'preact/hooks'
+import { Button } from '../atoms/button.js'
+import { Card } from '../atoms/card.js'
+import { Heading } from '../atoms/heading.js'
+import { Popup } from '../atoms/popup.js'
+import { RichText } from '../atoms/rich-text.js'
+import { Time } from '../atoms/time.js'
+import { Asset } from '../molecules/asset.js'
+import { Links } from '../molecules/links.js'
+import { PromoText } from '../molecules/promo-text.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+import { NAVIGATION_CLOSE } from '../shared/icons.js'
+import t from '../shared/t.js'
+import { Fragment } from 'preact'
+
+export function FilteredItem ({ _model, _variant, ...props }) {
+  if (!_model.title) {
+    throw new ValidationError()
+  }
+
+  const Component = { tags: WithTags, popup: WithPopup, links: WithLinks }[_variant] || Default
+  return Component({ _model, ...props })
+}
+
+function Default ({ _model, ...props }) {
+  return h('div', { ...props, className: 'h-full' },
+    h(CardWrapper, { _model },
+      h(BasicContent, { _model: { ..._model, links: [], tags: [] } },
+        h(Labels, { _model })
+      )
+    )
+  )
+}
+
+function WithTags ({ _model, ...props }) {
+  const tags = _model.tags.map(tag => ({ name: tag.value }))
+  return h('div', { ...props, className: 'h-full' },
+    h(CardWrapper, { _model },
+      h(BasicContent, { _model: { ..._model, links: [], tags } })
+    )
+  )
+}
+
+function WithLinks ({ _model, ...props }) {
+  return h('div', { ...props, className: 'h-full' },
+    h(StaticCard, { _model },
+      h(BasicContent, { _model: { ..._model, tags: [] } },
+        h(Labels, { _model })
+      )
+    )
+  )
+}
+
+function WithPopup ({ _model, ...props }) {
+  const [showPopup, setShowPopup] = useState(false)
+
+  return h('div', { ...props, className: 'h-full' },
+    h(Card, {
+      _model: { value: '#' },
+      role: 'button',
+      onClick (event) {
+        setShowPopup(true)
+        event.preventDefault()
+      },
+      children: h(BasicContent, { _model: { ..._model, text: null, links: [], tags: [] } },
+        h(Labels, { _model })
+      )
+    }),
+    h(Popup, {
+      _color: props._color,
+      _layout: 'toast',
+      _show: showPopup,
+      onKeyDown (event) {
+        if (event.key === 'Escape') {
+          setShowPopup(false)
+          event.preventDefault()
+        }
+      },
+      children: h('div', { className: 'grid gap-5 grid-cols-2 sm:grid-cols-1' },
+        _model.asset?.src && h('div', { className: 'space-y-5 sm:hidden' },
+          h('div', { className: 'rounded-xl overflow-hidden' },
+            h(Asset, { _model })
+          ),
+          h('div',
+            h(Labels, { _model })
+          )
+        ),
+        h('div', { className: 'space-y-5' },
+          h('div', { className: 'flex gap-2' },
+            h('div', { className: 'grow' },
+              h(Heading, { _level: 3 }, _model.title),
+              _model.date && h(Time, { _time: _model.date })
+            ),
+            h('div', { className: 'shrink-0' },
+              h(Button, {
+                _variant: 'plain',
+                _textless: true,
+                _size: 'xs',
+                _model: {
+                  icon: NAVIGATION_CLOSE,
+                  name: t('Close')
+                },
+                onClick: () => setShowPopup(false)
+              })
+            )
+          ),
+          _model.asset?.src && h('div', { className: 'rounded-xl overflow-hidden lg:hidden md:hidden' },
+            h(Asset, { _model })
+          ),
+          h(RichText, _model.text),
+          h(Links, { _model })
+        )
+      )
+    })
+  )
+}
+
+function BasicContent ({ _model, children }) {
+  return h('div', { className: 'flex flex-col h-full' },
+    Boolean(_model.asset.src) && h(Asset, { _model }),
+    h(PromoText, { _model }),
+    children
+  )
+}
+
+function Labels ({ _model }) {
+  const { tags } = _model
+  if (!tags || tags.length === 0) {
+    return null
+  }
+
+  const labels = {}
+  for (const tag of tags) {
+    labels[tag.name] ||= []
+    labels[tag.name].push(tag.value)
+  }
+
+  const labelEntries = Object.entries(labels)
+
+  return h(Fragment,
+    h('div', { className: 'grow' }), // Pushes labels to the bottom.
+    h('div', { className: 'px-6 pb-6' },
+      h('hr', { className: 'mb-2 w-6 h-1 bg-bgb' }),
+      h('div', { className: 'space-y-1' }, labelEntries.map(([name, values]) =>
+        h('dl', { className: 'col-span-1 text-sm flex gap-2' },
+          h('dt', { className: 'font-bold basis-24 grow-0 shrink-0' }, `${name}`),
+          h('dd', values.join(', '))
+        )
+      ))
+    )
+  )
+}
+
+function StaticCard ({ _color, ...props }) {
+  return h('div', { ...props, _color, className: 'bg-bga text-txa h-full rounded-2xl overflow-hidden flex flex-col' })
+}
+
+function CardWrapper ({ _model, children }) {
+  const linkModel = { name: _model.title, value: _model.links[0]?.value }
+  const hasLink = Boolean(_model.links[0]?.value)
+  return h(hasLink ? Card : StaticCard, { _model: linkModel, children })
+}

package/src/main/organisms/footer-item.js

@@ -0,0 +1,17 @@
+import { Box } from '../atoms/box.js'
+import { Heading } from '../atoms/heading.js'
+import { Links } from '../molecules/links.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function FooterItem ({ _model, ...props }) {
+  const { title, links } = _model
+  if (!title || links.length === 0) {
+    throw new ValidationError()
+  }
+
+  return h(Box, { ...props, className: 'text-sm' },
+    h(Heading, { _level: 2, _size: 3 }, title),
+    h(Links, { _model, _variant: 'simple' })
+  )
+}

package/src/main/organisms/image-gallery.js

@@ -0,0 +1,164 @@
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Button } from '../atoms/button.js'
+import { Popup } from '../atoms/popup.js'
+import { Scroller } from '../atoms/scroller.js'
+import { Asset } from '../molecules/asset.js'
+import h from '../shared/h.js'
+import { NAVIGATION_CLOSE } from '../shared/icons.js'
+import t from '../shared/t.js'
+
+// -----------------------------------------------------------------------------
+// Main component
+// -----------------------------------------------------------------------------
+
+export function ImageGallery ({ _model, _color, children, ...props }) {
+  const [state, setState] = useState({
+    index: null,
+    showList: false,
+    title: _model.title,
+    color: _color
+  })
+
+  return h('div', { ...props, className: undefined },
+    h(GalleryOverview, { state, setState, children }),
+    h(GalleryList, { state, setState, children }),
+    h(GalleryDetails, { state, setState, children })
+  )
+}
+
+// -----------------------------------------------------------------------------
+// Helpers
+// -----------------------------------------------------------------------------
+
+function GalleryPopup ({ show, title, children, onHide, popupRef }) {
+  return h(Popup, {
+    ref: popupRef,
+    _layout: 'full',
+    'aria-label': title,
+    _show: show,
+    onKeyDown (event) {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        onHide()
+      }
+    },
+    children: h('div', { className: 'flex flex-col gap-5 h-full' },
+      h('div', {
+        className: 'flex justify-end',
+        children: h(Button, {
+          onClick: onHide,
+          _textless: true,
+          _model: {
+            name: t('Close'), icon: NAVIGATION_CLOSE
+          }
+        })
+      }),
+      h('div', { className: 'grow' }, children)
+    )
+  })
+}
+
+function ThumbnailContainer ({ onClick, className, children }) {
+  return h('div', {
+    className: `cursor-pointer clickable transition rounded-2xl overflow-hidden relative animate-fade ${className ?? ''}`,
+    _style: id => `${id}:hover { transform: scale(1.02); }`,
+    role: 'button',
+    tabindex: 0,
+    onClick,
+    onKeyDown (event) {
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        onClick()
+      }
+    },
+    children
+  })
+}
+
+// -----------------------------------------------------------------------------
+// Views
+// -----------------------------------------------------------------------------
+
+function GalleryOverview ({ state, setState, children }) {
+  const maxSlides = 5
+  const lastSlide = maxSlides - 1
+  const tiles = { sm: 1, md: 2, lg: 4 }
+
+  // Discard all children that have no image source.
+  const validChildren = children?.filter(child => child?.props?._model?.image?.src)
+
+  return validChildren.length > 0 && h('div', { role: 'list', className: 'grid gap-5 grid-cols-4 grid-rows-2' },
+    ...validChildren.slice(0, maxSlides).map((child, index) => {
+      const hasMore = index === lastSlide && validChildren.length > maxSlides
+      const span = index === 0 ? tiles.md : tiles.sm
+      const smallSpan = index === 0 ? tiles.lg : tiles.sm
+
+      const onClick = hasMore
+        ? () => setState({ ...state, showList: true, index: null })
+        : () => setState({ ...state, index })
+
+      return h('div', {
+        'data-index': index,
+        role: 'listitem',
+        className: `lg:row-span-${span} lg:col-span-${span} md:row-span-${span} md:col-span-${span} sm:col-span-${smallSpan} cursor-pointer aspect-square`,
+        children: h(ThumbnailContainer, { onClick, className: 'aspect-square' },
+          h(Asset, { ...child.props, _tall: true }),
+          hasMore && h('div', {
+            className: 'absolute top-0 start-0 end-0 bottom-0 flex items-center justify-center pal-transparent text-txa',
+            children: h('div', { className: 'font-custom text-3xl' }, `+${validChildren.length - maxSlides}`)
+          })
+        )
+      })
+    })
+  )
+}
+
+function GalleryList ({ state, setState, children }) {
+  const ref = useRef(null)
+
+  // Bring back the focus when detail view closes.
+  useEffect(() => {
+    state.index === null && ref.current?.base?.focus?.()
+  }, [state.index])
+
+  return h(GalleryPopup, {
+    popupRef: ref,
+    show: state.showList,
+    title: state.title,
+    onHide: () => setState({ ...state, showList: false }),
+    children: h('div', {
+      className: 'lg:columns-4 md:columns-3 sm:columns-2 gap-x-5 space-y-5',
+      children: children.map((child, index) => [
+        h(ThumbnailContainer, {
+          role: 'listitem',
+          onClick: () => setState({ ...state, index }),
+          children: h(Asset, { ...child.props })
+        }),
+        h('div', { className: 'hidden' }) // Hack for last item hover flicker.
+      ])
+    })
+  })
+}
+
+function GalleryDetails ({ state, setState, children }) {
+  return h(GalleryPopup, {
+    show: state.index !== null,
+    title: state.title,
+    onHide: () => setState({ ...state, index: null }),
+    children: h('div', { className: 'h-full' },
+      h(Scroller, { _tall: true, _count: [1, 1, 1], _index: state.index }, children.map((child, index) =>
+        h('figure', { className: 'flex flex-col gap-5 outline-none', tabindex: 0 },
+          h('picture', { className: 'grow relative h-full' },
+            h('span', { className: 'absolute start-0 end-0 top-0 bottom-0' },
+              h(Asset, { _model: child.props._model, _tall: true, _fit: 'contain' })
+            )
+          ),
+          h('figcaption', { className: 'shrink flex gap-x-5' },
+            h('span', { className: 'font-bold whitespace-nowrap' }, `${index + 1} / ${children.length}`),
+            h('span', { className: '' }, child.props._model.image?.caption)
+          )
+        )
+      ))
+    )
+  })
+}

package/src/main/organisms/last-modified.js

@@ -0,0 +1,20 @@
+import { PromoText } from '../molecules/promo-text.js'
+import h from '../shared/h.js'
+
+export function LastModified ({ _model, ...props }) {
+  const { title } = _model
+  const locale = document.documentElement.lang || navigator.language
+  const dateModified = document.head.querySelector('meta[itemprop="dateModified"]')?.getAttribute('content')
+
+  if (dateModified) {
+    const formattedDate = new Date(dateModified).toLocaleDateString(locale, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    })
+
+    return h(PromoText, { _model: { text: title ? `${title} ${formattedDate}` : formattedDate }, ...props })
+  } else {
+    return null
+  }
+}

package/src/main/organisms/legal-footer.js

@@ -0,0 +1,16 @@
+import { Link } from '../atoms/link.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function LegalFooter ({ _model, ...props }) {
+  const { links } = _model
+  if (links.length === 0) {
+    throw new ValidationError()
+  }
+
+  return h('div', { ...props, className: 'p-6 text-sm flex flex-wrap gap-5', role: 'list' }, links.map(link =>
+    h('div', { role: 'listitem', className: 'flex items-center' },
+      h(Link, { _variant: 'simple', _model: link, className: 'text-sm' })
+    )
+  ))
+}