acinguiux-preact-components 0.0.1

package/src/main/molecules/promo-text.js

@@ -0,0 +1,27 @@
+import { Box } from '../atoms/box.js'
+import { Heading } from '../atoms/heading.js'
+import { RichText } from '../atoms/rich-text.js'
+import { Time } from '../atoms/time.js'
+import { Tags } from '../molecules/tags.js'
+import h from '../shared/h.js'
+import { Links } from './links.js'
+
+export function PromoText ({ _model, _level = 3, _size, _align, _variant, ...props }) {
+  const { title, text, date, links, tags } = _model
+
+  const hasLinks = links.length > 0
+  const hasText = text || title
+
+  return (hasText || hasLinks) && h(Box, {
+    ...props,
+    className: 'break-words',
+    _style: id => `${id} table { overflow-wrap: normal; word-break: normal }`,
+    children: [
+      h(Tags, { _model: { tags } }),
+      title && h(Heading, { _level, _size, _align }, title),
+      date && h(Time, { _time: date }),
+      h(RichText, text),
+      h(Links, { _variant, _model: { links } })
+    ]
+  })
+}

package/src/main/molecules/tags.js

@@ -0,0 +1,15 @@
+import { Link } from '../atoms/link.js'
+import h from '../shared/h.js'
+
+export function Tags ({ _model, ...props }) {
+  const { tags } = _model
+  if (tags.length === 0) {
+    return null
+  }
+
+  return h('div', { ...props, role: 'list', className: 'flex flex-wrap gap-2' }, tags.map(link =>
+    h('div', { className: 'flex items-center', role: 'listitem' },
+      h(Link, { _variant: 'tag', _model: link })
+    )
+  ))
+}

package/src/main/molecules/tree.js

@@ -0,0 +1,51 @@
+import { useMemo, useState } from 'preact/hooks'
+import { NavLink } from '../atoms/nav-link.js'
+import getId from '../shared/get-id.js'
+import h from '../shared/h.js'
+import t from '../shared/t.js'
+
+export function Tree ({ _model, _level = 0, ...props }) {
+  return h('div', { ...props, className: _level === 0 ? 'py-1' : '', role: 'list' }, _model.links.map((link, index) =>
+    h('div', { role: 'listitem' },
+      // Make the first link bold.
+      h(Node, { _bold: (index === 0) ? true : undefined, _level, _model: link })
+    )
+  ))
+}
+
+function Node ({ _model, _level, _bold }) {
+  const { children, name, value } = _model
+
+  const ids = useMemo(() => ({ button: getId(), container: getId() }), [])
+  const [isVisible, setIsVisible] = useState(false)
+
+  const containerProps = { className: 'animate-expand' }
+  const linkProps = { _model, _level, _bold, _selection: 'right' }
+  const treeProps = {}
+
+  if (children) {
+    // Prepend children with 'go to' link.
+    const links = children.slice()
+    links.unshift({ name: t('Go to: {0}', name), value })
+    treeProps._model = { links }
+    treeProps._level = _level + 1
+    treeProps.id = ids.container
+    treeProps['aria-labelledby'] = ids.button
+
+    // Link is now parent.
+    linkProps._level = _level
+    linkProps._expanded = isVisible
+    linkProps.id = ids.button
+    linkProps.role = 'button'
+    linkProps['aria-expanded'] = `${isVisible}`
+    linkProps['aria-controls'] = ids.container
+    linkProps.onClick = event => setIsVisible(!isVisible) || event.preventDefault()
+  }
+
+  return [
+    h(NavLink, linkProps),
+    children && isVisible && h('div', containerProps, [
+      h(Tree, treeProps)
+    ])
+  ]
+}

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

@@ -0,0 +1,106 @@
+import { useEffect, useRef } from 'preact/hooks'
+import { Box } from '../atoms/box.js'
+import { Heading } from '../atoms/heading.js'
+import { Icon } from '../atoms/icon.js'
+import { RichText } from '../atoms/rich-text.js'
+import { Asset } from '../molecules/asset.js'
+import { Links } from '../molecules/links.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+import { ARROW_DOWN } from '../shared/icons.js'
+import idFromString from '../shared/id-from-string.js'
+
+export function AccordionItem ({ _model, children, ...props }) {
+  const { title, links } = _model
+
+  if (!title) {
+    throw new ValidationError()
+  }
+
+  const ref = useRef(null)
+  const icon = links?.[0]?.icon
+  const microdata = getMicrodata(props._variant === 'faq')
+  const hashHandler = () => location.hash.substring(1) === idFromString(title) && ref.current?.setAttribute('open', '')
+
+  useEffect(() => {
+    hashHandler()
+    globalThis.addEventListener('hashchange', hashHandler)
+    return () => globalThis.removeEventListener('hashchange', hashHandler)
+  }, [title])
+
+  return h('details', {
+    ...props,
+    ...microdata.question,
+    ref,
+    className: 'bg-bga text-txa w-full rounded-2xl relative border-txa/20 border',
+    _style: id => `
+      ${id}::details-content { opacity: 0; transform: translateY(-8px); transition: all var(--anim-time) }
+      ${id}[open]::details-content { opacity: 1; transform: translateY(0) }
+      ${id}[open] summary div:last-child { transform: rotate(180deg) }
+    `,
+    children: [
+      h('summary', {
+        className: 'clickable w-full flex items-center gap-2 px-6 py-3 cursor-pointer rounded-2xl relative',
+        children: [
+          icon && h('div', { className: 'bg-bgb text-txb w-10 h-10 flex items-center justify-center rounded-full' },
+            h(Icon, icon)
+          ),
+          h('div', { className: 'grow' },
+            h(Heading, { _level: '3', _size: '4', ...microdata.name }, title)
+          ),
+          h('div', { className: 'shrink transition-all' },
+            h(Icon, { _size: 'sm' }, ARROW_DOWN)
+          )
+        ]
+      }),
+      h('div', { ...microdata.answer },
+        h('div', { ...microdata.text },
+          h(Content, { _model, children })
+        )
+      )
+    ]
+  })
+}
+
+// PromoText cannot be reused due to legacy children support.
+function Content ({ _model, children }) {
+  const { text, links, asset, image, video } = _model
+  const hasContent = text || asset.src || links.length > 0
+  if (hasContent) {
+    const filteredModel = { links: links.filter(l => l.name).map(l => ({ ...l, icon: null })) }
+    return h(Box,
+      asset.src && h('div', { className: 'rounded-lg overflow-hidden' },
+        h(Asset, { _model: { image, video } })
+      ),
+      h(RichText, text),
+      links && h(Links, { _variant: 'full', _model: filteredModel })
+    )
+  }
+
+  // Legacy children support.
+  return children
+}
+
+function getMicrodata (isFaq) {
+  const microdata = {}
+
+  if (isFaq) {
+    microdata.question = {
+      itemscope: '',
+      itemtype: 'https://schema.org/Question'
+    }
+    microdata.name = {
+      itemprop: 'name'
+    }
+    microdata.answer = {
+      itemscope: '',
+      itemtype: 'https://schema.org/Answer',
+      itemprop: 'acceptedAnswer'
+    }
+    microdata.text = {
+      itemprop: 'text'
+    }
+  }
+
+  return microdata
+}

package/src/main/organisms/author.js

@@ -0,0 +1,29 @@
+import { Img } from '../atoms/img.js'
+import { Link } from '../atoms/link.js'
+import { RichText } from '../atoms/rich-text.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function Author ({ _model, ...props }) {
+  const { image, links, text } = _model
+  if (links.length === 0) {
+    throw new ValidationError()
+  }
+
+  return h('div', { ...props, className: 'bg-bga text-txa rounded-2xl flex flex-row p-6 gap-3' },
+    image.src && h('div', { className: 'shrink-0 w-12 h-12 rounded-full overflow-hidden' },
+      h(Img, { _model: image, _tall: true })
+    ),
+    h('div', { className: 'grow space-y-2' },
+      h('div', { className: 'font-custom font-bold text-lg' },
+        ...links.flatMap(link => [
+          link.value
+            ? h(Link, { _model: link })
+            : link.name,
+          ', '
+        ]).slice(0, -1)
+      ),
+      h(RichText, text)
+    )
+  )
+}

package/src/main/organisms/breadcrumb.js

@@ -0,0 +1,69 @@
+import h from '../shared/h.js'
+import { Icon } from '../atoms/icon.js'
+import { Link } from '../atoms/link.js'
+import { ARROW_BACK, ARROW_NEXT } from '../shared/icons.js'
+
+export function Breadcrumb ({ _model, ...props }) {
+  return h('div', {
+    ...props,
+    className: 'text-sm w-full px-6 py-2 min-h-9 m-auto max-w-page',
+    children: _model.links.length > 1 && h(LinkTrail, { _model })
+  })
+}
+
+function LinkTrail ({ _model }) {
+  const { links } = _model
+
+  // Get a list of <LI> elements.
+  const lis = []
+  for (let ii = 0; ii < links.length; ++ii) {
+    const { [ii]: link } = links
+    const isLast = ii === links.length - 1
+    const isSecondLast = ii === links.length - 2
+
+    const liProps = {
+      className: isSecondLast ? undefined : 'sm:hidden md:hidden',
+      itemscope: '',
+      itemtype: 'https://schema.org/ListItem',
+      itemprop: 'itemListElement'
+    }
+
+    const linkProps = {
+      'aria-current': isLast ? 'page' : null,
+      itemprop: 'item',
+      _variant: 'simple',
+      _model: link
+    }
+
+    // <
+    isSecondLast && lis.push(
+      h('li', { className: 'lg:hidden', 'aria-hidden': true },
+        h(Icon, { _size: 'xs', _rtlFlip: true }, ARROW_BACK)
+      )
+    )
+
+    // Item
+    lis.push(h('li', liProps,
+      h(Link, linkProps,
+        h('span', { itemprop: 'name' }, link.name)
+      ),
+      h('meta', { itemprop: 'position', content: ii + 1 })
+    ))
+
+    // >
+    isLast || lis.push(
+      h('li', { className: 'sm:hidden md:hidden', 'aria-hidden': true },
+        h(Icon, { _size: 'xs', _rtlFlip: true }, ARROW_NEXT)
+      )
+    )
+  }
+
+  return h('nav',
+    h('ol', {
+      className: 'flex items-center p-0 gap-2',
+      itemscope: '',
+      itemtype: 'https://schema.org/BreadcrumbList',
+      children: lis
+    })
+  )
+}

package/src/main/organisms/call-to-action.js

@@ -0,0 +1,24 @@
+import { Button } from '../atoms/button.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+const MAX_LINKS = 3
+const COL_COUNT = 6
+const COL_SPAN = 2
+
+export function CallToAction ({ _model, _variant, ...props }) {
+  const links = _model.links.slice(0, MAX_LINKS)
+  if (links.length === 0) {
+    throw new ValidationError()
+  }
+
+  const isStacked = _variant === 'stacked'
+  const colstart = isStacked ? 'auto' : (COL_COUNT + 1) - COL_SPAN * links.length
+  const className = `p-6 bg-bga text-txa rounded-2xl flex flex-col gap-5 ${isStacked ? '' : 'lg:grid lg:grid-cols-12'}`
+
+  return h('div', { ...props, className }, links.map((link, ii) =>
+    h('div', { className: `w-full col-span-4 col-start-${ii === 0 ? colstart : 'auto'}` },
+      h(Button, { _model: link, _wide: true })
+    ))
+  )
+}

package/src/main/organisms/carousel.js

@@ -0,0 +1,178 @@
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import h from '../shared/h.js'
+
+export function Carousel ({
+  _model = {},
+  children,
+  autoplay: propAutoplay,
+  interval: propInterval,
+  dots: propDots,
+  ariaLabel: propAriaLabel,
+  ...props
+}) {
+  const autoplay = propAutoplay ?? _model.autoplay ?? false
+  const interval = Math.max(1000, Number(propInterval ?? _model.interval ?? 5000) || 5000)
+  const dots = propDots ?? _model.dots ?? true
+  const ariaLabel = propAriaLabel ?? _model.ariaLabel ?? 'Carousel'
+
+  const items = useMemo(() => {
+    if (Array.isArray(children)) {
+      return children.filter(Boolean)
+    }
+
+    return children ? [children] : []
+  }, [children])
+
+  const [index, setIndex] = useState(0)
+  const [isDragging, setIsDragging] = useState(false)
+  const timerRef = useRef(null)
+  const trackRef = useRef(null)
+  const dragStartX = useRef(0)
+  const dragOffsetX = useRef(0)
+  const dragActive = useRef(false)
+  const rafRef = useRef(null)
+
+  useEffect(() => {
+    if (items.length === 0) {
+      return
+    }
+
+    if (index > items.length - 1) {
+      setIndex(0)
+    }
+  }, [index, items.length])
+
+  useEffect(() => {
+    if (!autoplay || items.length < 2) {
+      return
+    }
+
+    timerRef.current = setInterval(() => {
+      setIndex(current => (current + 1) % items.length)
+    }, interval)
+
+    return () => {
+      clearInterval(timerRef.current)
+    }
+  }, [autoplay, interval, items.length])
+
+  if (items.length === 0) {
+    return null
+  }
+
+  const snapToIndex = targetIndex => setIndex(Math.max(0, Math.min(targetIndex, items.length - 1)))
+
+  const handlePointerDown = event => {
+    if ((event.button && event.button !== 0) || event.target.closest('a, button')) {
+      return
+    }
+
+    dragActive.current = true
+    dragStartX.current = event.clientX
+    dragOffsetX.current = 0
+    setIsDragging(true)
+    event.currentTarget.setPointerCapture?.(event.pointerId)
+    if (trackRef.current) {
+      trackRef.current.style.transition = 'none'
+    }
+  }
+
+  const handlePointerMove = event => {
+    if (!dragActive.current || !trackRef.current) {
+      return
+    }
+
+    dragOffsetX.current = event.clientX - dragStartX.current
+
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current)
+    }
+
+    rafRef.current = requestAnimationFrame(() => {
+      if (trackRef.current) {
+        trackRef.current.style.transform = `translateX(calc(-${index * 100}% + ${dragOffsetX.current}px))`
+      }
+    })
+  }
+
+  const handlePointerUp = event => {
+    if (!dragActive.current) {
+      return
+    }
+
+    dragActive.current = false
+    setIsDragging(false)
+    event.currentTarget.releasePointerCapture?.(event.pointerId)
+
+    const threshold = 60
+    if (Math.abs(dragOffsetX.current) > threshold) {
+      if (dragOffsetX.current < 0) {
+        setIndex(current => (current + 1) % items.length)
+      } else {
+        setIndex(current => (current - 1 + items.length) % items.length)
+      }
+    } else {
+      snapToIndex(index)
+    }
+
+    dragOffsetX.current = 0
+    if (trackRef.current) {
+      trackRef.current.style.transition = 'transform 600ms ease'
+    }
+
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current)
+      rafRef.current = null
+    }
+  }
+
+  const progressPercent = items.length > 0 ? ((index + 1) / items.length) * 100 : 0
+
+  return h('div', {
+    ...props,
+    role: 'region',
+    'aria-roledescription': 'carousel',
+    'aria-label': ariaLabel,
+    className: 'w-full relative',
+    children: [
+      h('div', {
+        className: 'relative overflow-hidden',
+        children: [
+          h('div', {
+            className: 'flex w-full cursor-grab active:cursor-grabbing select-none',
+            ref: trackRef,
+            style: {
+              transform: `translateX(-${index * 100}%)`,
+              transition: isDragging ? 'none' : 'transform 600ms ease',
+              touchAction: 'pan-y',
+              willChange: 'transform'
+            },
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onPointerCancel: handlePointerUp,
+            onPointerLeave: handlePointerUp,
+            children: items.map((item, itemIndex) => h('div', {
+              className: 'min-w-full',
+              'aria-hidden': index !== itemIndex,
+              children: item
+            }))
+          }),
+          null
+        ]
+      }),
+      dots && items.length > 1 && h('div', {
+        className: 'flex justify-center gap-2 sm:gap-3 mt-4',
+        children: items.map((_item, itemIndex) => h('button', {
+          type: 'button',
+          'aria-label': `Go to slide ${itemIndex + 1}`,
+          className: `h-5 w-5 sm:h-5 sm:w-5 flex items-center justify-center rounded-full ${index === itemIndex ? 'bg-bga' : 'bg-bgb/30 hover:bg-bgb'}`,
+          onClick: () => setIndex(itemIndex),
+          children: h('span', {
+            className: `block h-1 w-1 sm:h-3 sm:w-3 rounded-full ${index === itemIndex ? 'bg-txa' : 'bg-txa/50'}`
+          })
+        }))
+      })
+    ]
+  })
+}

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

@@ -0,0 +1,156 @@
+import { useState, useEffect } from 'preact/hooks'
+import { Img } from '../atoms/img.js'
+import { Link } from '../atoms/link.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function CartItem ({ _model, ...props }) {
+  const {
+    title,
+    image,
+    price,
+    oldPrice,
+    currency = '\u20b9',
+    quantity: initialQty = 1,
+    maxQuantity,
+    unitLabel,
+    offerLabel,
+    savings,
+    links
+  } = _model
+
+  if (!title) {
+    throw new ValidationError()
+  }
+
+  const productLink = links?.[0]?.value
+  const [quantity, setQuantity] = useState(Math.max(1, Number.parseInt(initialQty, 10) || 1))
+  const maxQty = Number.parseInt(maxQuantity, 10)
+
+  useEffect(() => {
+    if (initialQty != null) setQuantity(Math.max(1, Number.parseInt(initialQty, 10) || 1))
+  }, [initialQty])
+
+  const subtotal = (Number(price) || 0) * quantity
+  const computedSavings = savings ?? (oldPrice ? ((Number(oldPrice) - Number(price)) * quantity) : 0)
+
+  const onDecrease = () => setQuantity(current => Math.max(1, current - 1))
+  const onIncrease = () => {
+    setQuantity(current => {
+      if (Number.isFinite(maxQty) && current >= maxQty) return current
+      return current + 1
+    })
+  }
+
+  return h('li', {
+    ...props,
+    className: 'bg-bga text-txa border border-txa/10 rounded-lg sm:p-2 lg:p-4 w-full'
+  },
+  h('div', { className: 'grid grid-cols-12 gap-x-2 lg:gap-x-4 items-center' },
+
+    // Product image
+    h('div', { className: 'col-span-2 sm:col-span-3 lg:col-span-2' },
+      image?.src
+        ? h(Img, {
+          _model: image,
+          _fit: 'contain',
+          className: 'w-full rounded-md bg-bgb/5',
+          style: 'aspect-ratio: 1 / 1;'
+        })
+        : h('div', { className: 'w-full rounded-md bg-txa/5', style: 'aspect-ratio: 1 / 1;' })
+    ),
+
+    // Product info (name, price, offer, unit)
+    h('div', { className: 'col-span-5 sm:col-span-4 lg:col-span-5 flex flex-col justify-center sm:py-1 lg:py-3' },
+      h('div', { className: 'space-y-0.5 lg:space-y-1' },
+        productLink
+          ? h(Link, {
+            _model: { value: productLink, name: title },
+            className: 'block font-semibold sm:text-xs lg:text-sm leading-tight'
+          }, title)
+          : h('span', { className: 'block font-semibold sm:text-xs lg:text-sm leading-tight' }, title),
+
+        h('div', { className: 'flex items-center gap-1 lg:gap-2' },
+          h('span', { className: 'sm:text-xs lg:text-sm font-bold' }, formatPrice(price, currency)),
+          oldPrice && h('span', { className: 'sm:text-[10px] lg:text-xs line-through opacity-60' }, formatPrice(oldPrice, currency))
+        ),
+
+        unitLabel && h('span', { className: 'text-[10px] lg:text-xs text-txa/60' }, unitLabel),
+
+        offerLabel && h('div', { className: 'inline-flex items-center gap-1 mt-0.5' },
+          h('svg', { width: 12, height: 12, viewBox: '0 0 16 16', fill: 'none', className: 'shrink-0' },
+            h('path', {
+              'fill-rule': 'evenodd',
+              'clip-rule': 'evenodd',
+              d: 'M13.998 7.316H14c.367 0 .666.297.667.665a6.621 6.621 0 0 1-1.94 4.72 6.624 6.624 0 0 1-4.708 1.966H8a6.621 6.621 0 0 1-4.7-1.94A6.623 6.623 0 0 1 1.333 8.02a6.62 6.62 0 0 1 1.94-4.72A6.623 6.623 0 0 1 7.98 1.333c.53.008 1.07.062 1.587.186a.667.667 0 0 1-.313 1.296 5.878 5.878 0 0 0-1.27-.148 5.298 5.298 0 0 0-3.767 1.572 5.298 5.298 0 0 0-1.551 3.776 5.299 5.299 0 0 0 1.572 3.767A5.3 5.3 0 0 0 8 13.333h.015a5.297 5.297 0 0 0 3.767-1.572 5.3 5.3 0 0 0 1.551-3.776c0-.368.297-.668.665-.669Zm-8.47.213c.261-.261.683-.261.943 0l1.496 1.496 4.198-4.798a.667.667 0 0 1 1.003.879L8.5 10.439a.668.668 0 0 1-.48.228H8a.666.666 0 0 1-.471-.196l-2-2a.666.666 0 0 1 0-.942Z',
+              fill: 'currentColor'
+            })
+          ),
+          h('span', { className: 'text-[10px] lg:text-xs font-semibold text-bgb' }, offerLabel)
+        )
+      )
+    ),
+
+    // Quantity controls
+    h('div', { className: 'col-span-3 sm:col-span-3 lg:col-span-3 flex flex-col items-center justify-center gap-1 lg:gap-2' },
+      h('div', {
+        className: 'inline-flex items-center rounded-md border border-bgb overflow-hidden',
+        role: 'group',
+        'aria-label': 'Quantity selector'
+      },
+      h('button', {
+        type: 'button',
+        className: 'clickable bg-bgb text-txb sm:w-6 sm:h-6 lg:w-8 lg:h-8 text-sm lg:text-lg leading-none font-bold',
+        onClick: onDecrease,
+        'aria-label': 'Decrease quantity'
+      }, '\u2212'),
+      h('span', { className: 'px-2 lg:px-3 min-w-6 lg:min-w-8 text-center text-xs lg:text-sm font-semibold' }, quantity),
+      h('button', {
+        type: 'button',
+        className: 'clickable bg-bgb text-txb sm:w-6 sm:h-6 lg:w-8 lg:h-8 text-sm lg:text-lg leading-none font-bold',
+        onClick: onIncrease,
+        'aria-label': 'Increase quantity'
+      }, '+')
+      ),
+
+      // Delete button
+      h('button', {
+        type: 'button',
+        className: 'clickable text-[10px] lg:text-xs text-txa/50 hover:text-txa transition',
+        'aria-label': 'Remove item'
+      },
+      h('span', { className: 'inline-flex items-center gap-0.5' },
+        h('svg', { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none', className: 'shrink-0' },
+          h('path', {
+            d: 'M19 7l-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16',
+            stroke: 'currentColor',
+            'stroke-width': '1.5',
+            'stroke-linecap': 'round',
+            'stroke-linejoin': 'round'
+          })
+        ),
+        'Remove'
+      )
+      )
+    ),
+
+    // Subtotal
+    h('div', { className: 'col-span-2 flex flex-col items-end justify-center' },
+      h('span', { className: 'sm:text-xs lg:text-sm font-bold' }, formatPrice(subtotal, currency)),
+      computedSavings > 0 && h('span', { className: 'text-[10px] lg:text-xs text-bgb font-semibold' }, `Saved: ${formatPrice(computedSavings, currency)}`)
+    )
+  )
+  )
+}
+
+function formatPrice (value, currency) {
+  if (typeof value === 'number') {
+    return `${currency}${value % 1 === 0 ? value : value.toFixed(1)}`
+  }
+
+  if (typeof value === 'string' && value.length > 0) {
+    return value
+  }
+
+  return `${currency}0`
+}