acinguiux-preact-components 0.0.1

package/src/wcs/components/comparison-chart/comparison-chart.js

@@ -0,0 +1,111 @@
+const { h, register, matter, preactHooks } = globalThis.ami
+const { Box, Table, Link, Asset } = matter
+const { useState, useEffect, useMemo } = preactHooks
+
+function ComparisonChart ({ src, highlight }) {
+  const [products, setProducts] = useState()
+
+  if (!src) {
+    console.error('Missing data source.')
+    return null
+  }
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetch(src)
+      setProducts(await res.json())
+    })().catch(console.error)
+  }, [src])
+
+  if (!Array.isArray(products) || products.length === 0) {
+    return null
+  }
+
+  const rows = useMemo(() => Object.keys(products[0]), [products])
+  const columnCount = useMemo(() => products.length + 1, [products])
+  const highlightIndex = useMemo(() => Number.parseInt(highlight, 10) + 1, [highlight])
+
+  return h(Box, { className: 'rounded-2xl bg-bga text-txa h-full p-6' },
+    h(Table, {
+      // Override styles to achieve custom look and feel of the table whilst retaining the basic table structure.
+      _style: id => `
+        ${id} tr > th, ${id} tr > td {
+          vertical-align: middle;
+        }
+        ${id} tr > th[scope=col], ${id} tr > td {
+          text-align: center
+        }
+        ${id} tr > th[scope=row], ${id} tr > td {
+          width: calc(100% / ${columnCount});
+        }
+        ${id} tr:nth-child(2) > * {
+          background-color: hsl(var(--color-txa));
+          color: hsl(var(--color-bga));
+          border-right: 1px solid hsla(var(--color-bga), 0.2);
+        }
+        ${id} tr:nth-child(3) > * {
+          background-color: hsl(var(--color-bgb));
+          color: hsl(var(--color-txb));
+          border-right: 1px solid hsla(var(--color-txb), 0.2);
+        }
+        ${id} tr:nth-child(n + 4) > td {
+          font-size: calc(20px * var(--font-scale));
+          font-weight: 700;
+        }
+        ${id} tr > td:nth-child(${highlightIndex}) {
+          border-right: 4px solid hsl(var(--color-txa));
+          border-left: 4px solid hsl(var(--color-txa));
+        }
+        ${id} tr:first-child > td:nth-child(${highlightIndex}) {
+          border-top: 4px solid hsl(var(--color-txa));
+        }
+        ${id} tr:last-child > td:nth-child(${highlightIndex}) {
+          border-bottom: 4px solid hsl(var(--color-txa));
+        }
+      `,
+      children: [
+        h(ImageRow, { products }),
+        h(Row, { products, index: 2, colScope: true }), // Name
+        h(Row, { products, index: 3 }), // Type
+        rows.slice(4).map((_name, ii) => h(Row, { products, index: ii + 4 }))
+      ]
+    })
+  )
+}
+
+function ImageRow ({ products }) {
+  return h('tr',
+    h('td', ''),
+    products.map(p => {
+      const link = p['Product Link']
+      return h('td',
+        h(link ? Link : 'div', { className: 'block', _model: { value: link } },
+          h(Asset, {
+            _tall: true,
+            _fit: 'contain',
+            _model: {
+              image: { src: p['Product Image'], alt: p['Product Name'] }
+            }
+          })
+        )
+      )
+    })
+  )
+}
+
+function Row ({ products, index, colScope = false }) {
+  const rows = Object.keys(products[0])
+  const name = rows[index]
+
+  return colScope
+    ? h('tr',
+      h('th', { scope: 'row' }, name),
+      products.map(p => h('th', { scope: 'col' }, p[name]))
+    )
+    : h('tr',
+      h('th', { scope: 'row' }, name),
+      products.map(p => h('td', p[name]))
+    )
+}
+
+register(ComparisonChart, 'comparison-chart')

package/src/wcs/components/consent-banner/consent-banner.js

@@ -0,0 +1,248 @@
+import { NAVIGATION_CLOSE } from '#acinguiux-preact/main/shared/icons.js'
+import { isPublish } from '#acinguiux-preact/main/shared/wcm-mode.js'
+import CCPA_ICON from './icons/ccpa.svg'
+import INFO_ICON from './icons/info.svg'
+import { getProviderData, notifyProvider } from './provider-onetrust.js'
+
+const { h, preactHooks, matter, register, setConsent, getConsent } = globalThis.ami
+const { Box, Link, Heading, Button, Logo, Popup, Input, Table, RichText, SVG, Icon } = matter
+const { useState, useLayoutEffect } = preactHooks
+
+function ConsentBanner ({ src, 'link-text': linkText, 'ccpa-icon': ccpaIcon, 'disable-list': disableList }) {
+  if (!src || !linkText) {
+    return null
+  }
+
+  const consent = getConsent()
+  const [state, setState] = useState({ popup: !consent && isPublish ? 'banner' : null, data: null })
+
+  // Load consent data - only if needed.
+  useLayoutEffect(() => {
+    if (state.popup && !state.data) {
+      getProviderData(src, disableList)
+        .then(data => setState(prevState => ({ ...prevState, data })))
+        .catch(console.error)
+    }
+  }, [state.popup])
+
+  return [
+    // Modify cookie preferences link.
+    h(Box,
+      h(Link, {
+        onClick: () => {
+          setState({ ...state, popup: 'settings' })
+        },
+        _model: { name: linkText, value: '#' },
+        _variant: 'simple',
+        className: 'text-sm',
+        children: h('span', { className: 'flex items-center gap-1' },
+          ccpaIcon && h('span',
+            h(SVG, { _model: { src: CCPA_ICON } })
+          ),
+          h('span', linkText)
+        )
+      })
+    ),
+    state.data && [
+      // Banner.
+      h(Popup, { _modal: false, _show: state.popup === 'banner', _layout: 'toast', 'aria-label': state.data.title },
+        h(Banner, {
+          data: state.data,
+          async onAccept () {
+            await setConsentAndNotifyProvider({ functional: true, statistics: true, preferences: true, marketing: true })
+            setState({ ...state, popup: null })
+          },
+          async onReject () {
+            await setConsentAndNotifyProvider({})
+            setState({ ...state, popup: null })
+          },
+          onSettings () {
+            setState({ ...state, popup: 'settings' })
+          }
+
+        })
+      ),
+      // Settings
+      h(Popup, { _modal: true, _show: state.popup === 'settings', 'aria-label': state.data.title },
+        h(Settings, {
+          data: state.data,
+          onClose () {
+            setState({ ...state, popup: consent ? null : 'banner' })
+          },
+          async onReject () {
+            await setConsentAndNotifyProvider({})
+            setState({ ...state, popup: null })
+          },
+          onCookies () {
+            setState({ ...state, popup: 'cookies' })
+          },
+          async onSave (userConsent) {
+            await setConsentAndNotifyProvider(userConsent)
+            setState({ ...state, popup: null })
+          }
+        })
+      ),
+      // Cookies
+      h(Popup, { _modal: true, _show: state.popup === 'cookies', 'aria-label': state.data.title },
+        h(Cookies, {
+          data: state.data,
+          onSettings () {
+            setState({ ...state, popup: 'settings' })
+          }
+        })
+      )
+    ]
+  ]
+}
+
+function Banner ({ data, onAccept, onReject, onSettings }) {
+  return [
+    h(Logo),
+    data.banner.title && h(Heading, { _level: 3 }, data.banner.title),
+    h(RichText, data.banner.text),
+    h('div', { className: 'flex justify-end lg:space-x-5 md:space-x-5 sm:flex-col sm:space-y-5' },
+      // Manage cookies.
+      h('div', { classList: 'flex justify-center items-center' },
+        h(Link, {
+          _variant: 'underline',
+          _model: { name: data.banner.buttonSettings, value: '#' },
+          onClick: event => {
+            event.preventDefault()
+            onSettings()
+          }
+        })
+      ),
+      h('div', { className: 'flex gap-5 justify-end lg:flex-row-reverse md:flex-row-reverse sm:flex-col ' },
+        // Accept optional cookies.
+        h(Button, {
+          _model: { name: data.banner.buttonAccept },
+          className: 'sm:w-full',
+          onClick: event => {
+            event.preventDefault()
+            onAccept()
+          }
+        }),
+        // Reject optional cookies.
+        data.banner.buttonReject && h(Button, {
+          _model: { name: data.banner.buttonReject },
+          className: 'sm:w-full',
+          onClick: event => {
+            event.preventDefault()
+            onReject()
+          }
+        })
+      )
+    )
+  ]
+}
+
+function Settings ({ data, onSave, onReject, onCookies, onClose }) {
+  const consent = getConsent() ?? {}
+  return [
+    h(LogoHeading, { closeLabel: data.settings.buttonClose, onClose }),
+    navigator.globalPrivacyControl && h('div', { className: 'flex items-center gap-2' },
+      h('span', { className: 'grow-0 shrink-0' },
+        h(Icon, INFO_ICON)
+      ),
+      h('p', data.settings.gcpText)
+    ),
+    data.settings.title && h(Heading, { _level: 3 }, data.settings.title),
+    h(RichText, data.settings.text),
+    h(Heading, { _level: 3 }, data.settings.categories),
+    h('div', { className: 'space-y-4', 'data-form': '' },
+      Object.values(data.groups).map(g => h('div',
+        h('label', { className: 'space-x-2 inline-flex items-center font-bold cursor-pointer' },
+          h(Input, { type: 'checkbox', name: g.name, checked: consent[g.name] ?? g.alwaysActive, value: true, disabled: g.alwaysActive }),
+          h('span', g.title)
+        ),
+        h('p', g.text)
+      )),
+      h('div', { className: 'flex justify-end lg:space-x-5 md:space-x-5 sm:flex-col sm:space-y-5' },
+        // Cookie list.
+        data.cookies.length > 0 && h('div', { classList: 'flex justify-center items-center' },
+          h(Link, {
+            _variant: 'underline',
+            _model: { name: data.list.title, value: '#' },
+            onClick: event => {
+              event.preventDefault()
+              onCookies()
+            }
+          })
+        ),
+        // Save preferences.
+        h(Button, {
+          _model: { name: data.settings.buttonConfirm },
+          className: 'sm:w-full',
+          onClick: event => {
+            event.preventDefault()
+            const inputs = [...event.currentTarget.closest('[data-form]').querySelectorAll('input')]
+            const userConsent = inputs.reduce((obj, input) => {
+              obj[input.name] = input.checked
+              return obj
+            }, {})
+            onSave(userConsent)
+          }
+        }),
+        // Reject optional cookies.
+        data.banner.buttonReject && h(Button, {
+          _model: { name: data.settings.buttonReject },
+          className: 'sm:w-full',
+          onClick: event => {
+            event.preventDefault()
+            onReject()
+          }
+        })
+      )
+    )
+  ]
+}
+
+function Cookies ({ data, onSettings }) {
+  return data.cookies.length > 0 && [
+    h(LogoHeading, { closeLabel: data.banner.buttonSettings, onClose: onSettings }),
+    h(Heading, { _level: 3 }, data.list.title),
+    h(RichText, data.list.text),
+    h(Table,
+      // Headers
+      h('tr', Object.keys(data.cookies[0]).map(k => h('th', k))),
+      data.groups.map(g => [
+        // Group section
+        h('tr',
+          h('td', { className: 'font-bold', colspan: Object.keys(data.cookies[0]).length }, g.title)
+        ),
+        g.cookies.map(c => h('tr',
+          Object.values(c).map(v => h('td', v))
+        ))
+      ])
+    )
+  ]
+}
+
+function LogoHeading ({ closeLabel, onClose }) {
+  return h('div', { className: 'flex gap-2' },
+    h('div', { className: 'grow' },
+      h(Logo)
+    ),
+    onClose && h('div', { className: 'shrink' },
+      h(Button, {
+        _variant: 'plain',
+        _textless: true,
+        _size: 'sm',
+        _model: { name: closeLabel, icon: NAVIGATION_CLOSE },
+        onClick: onClose
+      })
+    )
+  )
+}
+
+async function setConsentAndNotifyProvider (consent) {
+  const hasConsentedBefore = getConsent() !== null
+  setConsent(consent)
+  await notifyProvider(consent)
+
+  if (hasConsentedBefore) {
+    location.reload()
+  }
+}
+
+register(ConsentBanner, 'consent-banner')

package/src/wcs/components/consent-banner/icons/ccpa.svg

@@ -0,0 +1,6 @@
+<svg style="overflow: visible" width="48" height="24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="m13.586 20.286h9.3143l4.2572-16.571h-13.571c-4.3857 0-7.9428 3.7143-7.9428 8.2857 0 4.5715 3.5571 8.2857 7.9428 8.2857z" style="fill-rule:evenodd;fill:#fff;stroke-width:1.4284"/>
+  <path d="m34.414 2h-20.829c-5.3429 0-9.5857 4.4286-9.5857 10 0 5.5715 4.2428 10 9.5857 10h20.829c5.3428 0 9.5857-4.4285 9.5857-10 0-5.5714-4.3857-10-9.5857-10zm-28.771 10c0-4.5714 3.5571-8.2857 7.9428-8.2857h13.571l-4.2428 16.571h-9.3286c-4.3857 0-7.9428-3.7142-7.9428-8.2857z" style="fill-rule:evenodd;fill:#06f;stroke-width:1.4284"/>
+  <path d="m37.157 7.7143c0.27137 0.28572 0.27137 0.85717 0 1.1429l-2.8715 3.1428 3.0143 3.1428c0.27147 0.28569 0.27147 0.85716 0 1.1428-0.27147 0.28578-0.82853 0.28578-1.1 0l-3.0143-3.1428-3.0142 3.1428c-0.27147 0.28578-0.82863 0.28578-1.1 0-0.27147-0.28569-0.27147-0.85716 0-1.1428l2.8714-3.1428-3.0143-3.1428c-0.27137-0.2857-0.27137-0.85715 0-1.1429 0.27147-0.28571 0.82863-0.28571 1.1 0l3.0143 3.1429 3.0143-3.1429c0.27137-0.28571 0.82853-0.28571 1.1 0z" style="fill:#fff;stroke-width:1.4284"/>
+  <path d="m20.843 7.8459c0.27147 0.28572 0.41431 0.85716 0.14285 1.1429l-5.7571 7c-0.14285 0.14284-0.2714 0.28568-0.41425 0.28568-0.27145 0.14285-0.68575 0.14285-0.95715-0.14284l-3.0143-3.1428c-0.2714-0.28569-0.2714-0.85716 0-1.1428 0.27145-0.28569 0.8286-0.28569 1.1 0l2.4715 2.4285 5.2-6.4285c0.2714-0.2857 0.82855-0.2857 1.2285 0z" style="fill:#06f;stroke-width:1.4284"/>
+</svg>

package/src/wcs/components/consent-banner/icons/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#404040"><path fill-rule="evenodd" d="M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0m2 0c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10M11.5 9a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5zm0 8a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5z" clip-rule="evenodd"/></svg>

package/src/wcs/components/consent-banner/provider-onetrust.js

@@ -0,0 +1,131 @@
+const { getUserId } = globalThis.ami
+
+const instance = {
+  consentApi: null,
+  requestInformation: null,
+  consentGroups: {
+    C0001: { name: 'functional', id: null },
+    C0002: { name: 'statistics', id: null },
+    C0004: { name: 'preferences', id: null },
+    C0005: { name: 'marketing', id: null }
+  }
+}
+
+export async function getProviderData (src, disableList) {
+  let res = await fetch(src)
+  const otConfig = await res.json()
+
+  const ruleset = otConfig.RuleSet[0]
+  const rulesetId = ruleset.Id
+  const pageLocale = document.documentElement.lang.toLowerCase()
+  const pageLanguage = pageLocale.substring(0, pageLocale.lastIndexOf('-'))
+  const availableLocales = ruleset.LanguageSwitcherPlaceholder
+  const language = availableLocales[pageLocale] ?? availableLocales[pageLanguage] ?? availableLocales.default
+  const configSrc = src.replace(/^(.*)\/([a-z0-9-]+)\.json$/, `$1/${rulesetId}/${language}.json`)
+
+  res = await fetch(configSrc)
+  const otData = await res.json()
+
+  instance.consentApi = otData.CommonData.ConsentIntegration.ConsentApi
+  instance.requestInformation = otData.CommonData.ConsentIntegration.RequestInformation
+
+  const domainData = otData.DomainData
+  const groups = []
+
+  for (const group of domainData.Groups) {
+    if (!group.ShowInPopup) {
+      continue
+    }
+
+    const name = instance.consentGroups[group.OptanonGroupId]?.name
+    if (!name) {
+      console.warn(`Unsupported group: [${group.OptanonGroupId}] ${group.GroupName}.`)
+      continue
+    }
+
+    instance.consentGroups[group.OptanonGroupId].id = group.PurposeId
+
+    groups.push({
+      name,
+      title: group.GroupName,
+      text: group.GroupDescription,
+      alwaysActive: group.Status === 'always active',
+      cookies: [
+        // First party cookies.
+        ...group.FirstPartyCookies.map(c => ({
+          [domainData.CategoriesText]: c.Host,
+          [domainData.CookiesText]: c.Name,
+          [domainData.CookiesUsedText]: domainData.CookieFirstPartyText,
+          [domainData.CookiesDescText]: c.description
+        })),
+        // Third party cookies.
+        ...group.Hosts.reduce((acc, host) => {
+          acc.push(...host.Cookies.map(c => ({
+            [domainData.CategoriesText]: c.Host,
+            [domainData.CookiesText]: c.Name,
+            [domainData.CookiesUsedText]: domainData.CookieThirdPartyText,
+            [domainData.CookiesDescText]: c.description
+          })))
+          return acc
+        }, [])
+      ]
+    })
+  }
+
+  const cookies = disableList ? [] : groups.reduce((acc, group) => [...acc, ...group.cookies], [])
+
+  return {
+    banner: {
+      title: domainData.BannerTitle,
+      text: domainData.AlertNoticeText,
+      buttonAccept: domainData.AlertAllowCookiesText,
+      buttonReject: domainData.BannerShowRejectAllButton ? domainData.BannerRejectAllButtonText : null,
+      buttonSettings: domainData.AlertMoreInfoText
+    },
+    settings: {
+      title: domainData.MainText,
+      categories: domainData.PreferenceCenterManagePreferencesText,
+      text: domainData.MainInfoText,
+      buttonConfirm: domainData.PreferenceCenterConfirmText,
+      buttonReject: domainData.BannerRejectAllButtonText,
+      buttonClose: domainData.AlertCloseText,
+      buttonCookies: domainData.CookieListTitle,
+      gcpText: domainData.PCOptOutSignalText
+    },
+    list: {
+      title: domainData.CookieListTitle,
+      text: domainData.CookieListDescription
+    },
+    groups,
+    cookies
+  }
+}
+
+export async function notifyProvider (consent = {}) {
+  if (!instance.requestInformation) {
+    return null
+  }
+
+  const [userId] = getUserId()
+  const payload = {
+    customPayload: { Interaction: 1, AddDefaultInteraction: true },
+    dsDataElements: { UserAgent: navigator.userAgent },
+    identifier: userId,
+    identifierType: 'User ID',
+    isAnonymous: true,
+    purposes: Object.values(instance.consentGroups).map(g => {
+      let choice = 'OPT_OUT'
+      if (g.name === 'functional') {
+        choice = 'NO_CHOICE'
+      } else if (consent[g.name]) {
+        choice = 'CONFIRMED'
+      }
+
+      return { Id: g.id, TransactionType: choice }
+    }),
+    requestInformation: instance.requestInformation,
+    test: false
+  }
+
+  return fetch(instance.consentApi, { method: 'POST', body: JSON.stringify(payload) })
+}

package/src/wcs/components/decision-tree/arrow-back.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <polygon fill="#595959" points="15.543 4.294 7.699 12.922 15.51 20.743 14.095 22.156 4.937 12.987 14.063 2.949"/>
+</svg>

package/src/wcs/components/decision-tree/badges.js

@@ -0,0 +1,37 @@
+export const google = text => `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200" version="1.1" viewBox="0 0 180 53.333" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path transform="matrix(1.3333 0 0 -1.3333 173.33 53.333)" d="m0 0h-125c-2.75 0-5 2.25-5 5v30c0 2.75 2.25 5 5 5h125c2.75 0 5-2.25 5-5v-30c0-2.75-2.25-5-5-5"/>
+    <path transform="matrix(1.3333 0 0 -1.3333 173.33 .000266)" d="m0 0h-125c-2.75 0-5-2.25-5-5v-30c0-2.75 2.25-5 5-5h125c2.75 0 5 2.25 5 5v30c0 2.75-2.25 5-5 5m0-0.8c2.316 0 4.2-1.884 4.2-4.2v-30c0-2.316-1.884-4.2-4.2-4.2h-125c-2.316 0-4.2 1.884-4.2 4.2v30c0 2.316 1.884 4.2 4.2 4.2z" fill="#a6a6a6"/>
+    <path transform="matrix(1.3333 0 0 -1.3333 -13.333 66.667)" d="m116.94 20h1.866v12.501h-1.866zm16.807 7.998-2.139-5.42h-0.064l-2.22 5.42h-2.01l3.329-7.575-1.897-4.214h1.945l5.131 11.789zm-10.582-6.578c-0.612 0-1.464 0.305-1.464 1.062 0 0.964 1.061 1.334 1.978 1.334 0.82 0 1.207-0.177 1.705-0.418-0.145-1.158-1.142-1.978-2.219-1.978m0.225 6.851c-1.351 0-2.751-0.595-3.329-1.914l1.656-0.691c0.354 0.691 1.013 0.917 1.705 0.917 0.965 0 1.946-0.579 1.962-1.609v-0.128c-0.338 0.193-1.061 0.482-1.946 0.482-1.785 0-3.603-0.981-3.603-2.814 0-1.673 1.464-2.751 3.104-2.751 1.255 0 1.947 0.563 2.381 1.223h0.064v-0.965h1.801v4.793c0 2.219-1.656 3.457-3.795 3.457m-11.532-1.795h-2.654v4.285h2.654c1.395 0 2.187-1.155 2.187-2.142 0-0.969-0.792-2.143-2.187-2.143m-0.048 6.025h-4.471v-12.501h1.865v4.736h2.606c2.068 0 4.101 1.498 4.101 3.883s-2.033 3.882-4.101 3.882m-24.381-11.083c-1.289 0-2.368 1.079-2.368 2.561 0 1.498 1.079 2.594 2.368 2.594 1.273 0 2.271-1.096 2.271-2.594 0-1.482-0.998-2.561-2.271-2.561m2.143 5.88h-0.065c-0.419 0.499-1.224 0.95-2.239 0.95-2.127 0-4.076-1.868-4.076-4.269 0-2.384 1.949-4.237 4.076-4.237 1.015 0 1.82 0.451 2.239 0.967h0.065v-0.613c0-1.627-0.87-2.497-2.272-2.497-1.144 0-1.853 0.822-2.143 1.515l-1.627-0.677c0.467-1.128 1.708-2.513 3.77-2.513 2.191 0 4.044 1.289 4.044 4.43v7.637h-1.772zm3.061-7.298h1.869v12.502h-1.869zm4.623 4.124c-0.048 1.643 1.273 2.481 2.223 2.481 0.742 0 1.37-0.37 1.579-0.902zm5.8 1.418c-0.354 0.95-1.434 2.706-3.641 2.706-2.191 0-4.011-1.723-4.011-4.253 0-2.384 1.804-4.253 4.22-4.253 1.95 0 3.078 1.192 3.545 1.885l-1.45 0.967c-0.483-0.709-1.144-1.176-2.095-1.176-0.95 0-1.627 0.435-2.062 1.288l5.687 2.353zm-45.308 1.401v-1.804h4.317c-0.129-1.015-0.467-1.756-0.982-2.271-0.629-0.629-1.612-1.322-3.335-1.322-2.659 0-4.737 2.143-4.737 4.801 0 2.659 2.078 4.801 4.737 4.801 1.434 0 2.481-0.564 3.254-1.289l1.273 1.273c-1.08 1.031-2.513 1.821-4.527 1.821-3.641 0-6.702-2.965-6.702-6.606s3.061-6.605 6.702-6.605c1.965 0 3.447 0.645 4.607 1.853 1.193 1.192 1.563 2.867 1.563 4.221 0 0.419-0.032 0.805-0.097 1.127zm11.079-5.525c-1.289 0-2.401 1.063-2.401 2.577 0 1.531 1.112 2.578 2.401 2.578 1.288 0 2.4-1.047 2.4-2.578 0-1.514-1.112-2.577-2.4-2.577m0 6.83c-2.353 0-4.27-1.788-4.27-4.253 0-2.449 1.917-4.253 4.27-4.253 2.352 0 4.269 1.804 4.269 4.253 0 2.465-1.917 4.253-4.269 4.253m9.313-6.83c-1.289 0-2.401 1.063-2.401 2.577 0 1.531 1.112 2.578 2.401 2.578s2.4-1.047 2.4-2.578c0-1.514-1.111-2.577-2.4-2.577m0 6.83c-2.352 0-4.269-1.788-4.269-4.253 0-2.449 1.917-4.253 4.269-4.253s4.269 1.804 4.269 4.253c0 2.465-1.917 4.253-4.269 4.253" fill="#fff"/>
+    <path transform="matrix(1.3333 0 0 -1.3333 27.623 25.899)" d="m0 0-10.647-11.3c1e-3 -2e-3 1e-3 -5e-3 2e-3 -7e-3 0.327-1.227 1.447-2.13 2.777-2.13 0.532 0 1.031 0.144 1.459 0.396l0.034 0.02 11.984 6.915z" fill="#ea4335"/>
+    <path transform="matrix(1.3333 0 0 -1.3333 41.984 23.333)" d="m0 0-0.01 7e-3 -5.174 2.999-5.829-5.187 5.85-5.848 5.146 2.969c0.902 0.488 1.515 1.439 1.515 2.535 0 1.09-0.604 2.036-1.498 2.525" fill="#fbbc04"/>
+    <path transform="matrix(1.3333 0 0 -1.3333 13.427 12.37)" d="m0 0c-0.064-0.236-0.098-0.484-0.098-0.74v-19.968c0-0.256 0.034-0.504 0.099-0.739l11.012 11.011z" fill="#4285f4"/>
+    <path transform="matrix(1.3333 0 0 -1.3333 27.728 26.668)" d="m0 0 5.51 5.509-11.97 6.94c-0.435 0.261-0.943 0.411-1.486 0.411-1.33 0-2.452-0.905-2.779-2.133 0-1e-3 -1e-3 -2e-3 -1e-3 -3e-3z" fill="#34a853"/>
+  </g>
+  <text x="54.212109" y="17.529634" fill="#f9f9f9" font-family="Arial" font-size="11px" font-weight="bold" letter-spacing=".2px" xml:space="preserve"><tspan x="54.212109" y="17.529634" font-family="Arial" font-size="11px" font-weight="bold" letter-spacing=".2px">${text.toUpperCase()}</tspan></text>
+</svg>
+`
+
+export const apple = text => `<?xml version="1.0" encoding="UTF-8"?>
+<svg id="livetype" width="200" version="1.1" viewBox="0 0 119.66 40" xmlns="http://www.w3.org/2000/svg">
+  <path d="m110.13 0h-100.6c-0.3667 0-0.729 0-1.0947 2e-3 -0.30615 2e-3 -0.60986 0.00781-0.91895 0.0127a13.215 13.215 0 0 0-2.0039 0.17671 6.6651 6.6651 0 0 0-1.9009 0.627 6.4378 6.4378 0 0 0-1.6186 1.1787 6.2584 6.2584 0 0 0-1.1782 1.6211 6.6012 6.6012 0 0 0-0.625 1.9033 12.993 12.993 0 0 0-0.1792 2.002c-0.00928 0.3066-0.01026 0.61422-0.01515 0.92086v23.114c0.00489 0.3105 0.00587 0.6113 0.01515 0.9219a12.992 12.992 0 0 0 0.1792 2.0019 6.5876 6.5876 0 0 0 0.625 1.9043 6.2078 6.2078 0 0 0 1.1782 1.6143 6.2744 6.2744 0 0 0 1.6186 1.1787 6.7008 6.7008 0 0 0 1.9009 0.6308 13.455 13.455 0 0 0 2.0039 0.1768c0.30909 0.0068 0.6128 0.0107 0.91895 0.0107 0.36572 2e-3 0.72805 2e-3 1.0947 2e-3h100.6c0.3594 0 0.7246 0 1.084-2e-3 0.3047 0 0.6172-0.0039 0.9219-0.0107a13.279 13.279 0 0 0 2-0.1768 6.8043 6.8043 0 0 0 1.9082-0.6308 6.2774 6.2774 0 0 0 1.6172-1.1787 6.3948 6.3948 0 0 0 1.1816-1.6143 6.6041 6.6041 0 0 0 0.6191-1.9043 13.506 13.506 0 0 0 0.1856-2.0019c4e-3 -0.3106 4e-3 -0.6114 4e-3 -0.9219 8e-3 -0.3633 8e-3 -0.7246 8e-3 -1.0938v-20.929c0-0.36621 0-0.72949-8e-3 -1.0918 0-0.30664 0-0.61426-4e-3 -0.9209a13.507 13.507 0 0 0-0.1856-2.002 6.6177 6.6177 0 0 0-0.6191-1.9033 6.4662 6.4662 0 0 0-2.7988-2.7998 6.7675 6.7675 0 0 0-1.9082-0.627 13.044 13.044 0 0 0-2-0.17676c-0.3047-0.00488-0.6172-0.01074-0.9219-0.01269-0.3594-2e-3 -0.7246-2e-3 -1.084-2e-3z" fill="#a6a6a6"/>
+  <path d="m8.4448 39.125c-0.30468 0-0.602-0.0039-0.90429-0.0107a12.687 12.687 0 0 1-1.8691-0.1631 5.8838 5.8838 0 0 1-1.6567-0.5479 5.4057 5.4057 0 0 1-1.397-1.0166 5.3208 5.3208 0 0 1-1.0205-1.3965 5.7219 5.7219 0 0 1-0.543-1.6572 12.414 12.414 0 0 1-0.1665-1.875c-0.00634-0.2109-0.01464-0.9131-0.01464-0.9131v-23.101s0.00884-0.69141 0.01469-0.89454a12.37 12.37 0 0 1 0.16553-1.8721 5.7555 5.7555 0 0 1 0.54346-1.6621 5.3735 5.3735 0 0 1 1.0151-1.398 5.5654 5.5654 0 0 1 1.4023-1.0225 5.8231 5.8231 0 0 1 1.6533-0.54394 12.586 12.586 0 0 1 1.8755-0.16406l0.90232-0.01221h102.77l0.9131 0.0127a12.385 12.385 0 0 1 1.8584 0.16259 5.9383 5.9383 0 0 1 1.6709 0.54785 5.5937 5.5937 0 0 1 2.415 2.4199 5.7627 5.7627 0 0 1 0.5352 1.6489 12.995 12.995 0 0 1 0.1738 1.8872c3e-3 0.2832 3e-3 0.5874 3e-3 0.89014 8e-3 0.375 8e-3 0.73193 8e-3 1.0918v20.929c0 0.3633 0 0.7178-8e-3 1.0752 0 0.3252 0 0.6231-4e-3 0.9297a12.731 12.731 0 0 1-0.1709 1.8535 5.739 5.739 0 0 1-0.54 1.67 5.4803 5.4803 0 0 1-1.0156 1.3857 5.4129 5.4129 0 0 1-1.3994 1.0225 5.8617 5.8617 0 0 1-1.668 0.5498 12.542 12.542 0 0 1-1.8692 0.1631c-0.2929 0.0068-0.5996 0.0107-0.8974 0.0107l-1.084 2e-3z"/>
+  <g data-name="&lt;Group&gt;">
+    <g fill="#fff" data-name="&lt;Group&gt;">
+      <path id="_Path_" d="m24.769 20.301a4.9488 4.9488 0 0 1 2.3566-4.1521 5.0657 5.0657 0 0 0-3.9912-2.1577c-1.6792-0.17626-3.3072 1.0048-4.1629 1.0048-0.87227 0-2.1898-0.98733-3.6085-0.95814a5.3153 5.3153 0 0 0-4.4729 2.7279c-1.934 3.3484-0.49141 8.2695 1.3612 10.976 0.9269 1.3254 2.0102 2.8058 3.4276 2.7533 1.3871-0.05753 1.9051-0.88448 3.5794-0.88448 1.6588 0 2.1448 0.88448 3.591 0.8511 1.4884-0.02416 2.4261-1.3312 3.3205-2.6691a10.962 10.962 0 0 0 1.5184-3.0925 4.782 4.782 0 0 1-2.9192-4.3992z" data-name="&lt;Path&gt;"/>
+      <path d="m22.037 12.211a4.8725 4.8725 0 0 0 1.1145-3.4906 4.9575 4.9575 0 0 0-3.2076 1.6596 4.6363 4.6363 0 0 0-1.1437 3.3614 4.099 4.099 0 0 0 3.2368-1.5304z" data-name="&lt;Path&gt;"/>
+    </g>
+  </g>
+  <g fill="#fff">
+    <path d="m42.302 27.14h-4.7334l-1.1367 3.3564h-2.0049l4.4834-12.418h2.083l4.4834 12.418h-2.0391zm-4.2432-1.5488h3.752l-1.8496-5.4473h-0.05176z"/>
+    <path d="m55.16 25.97c0 2.8135-1.5059 4.6211-3.7783 4.6211a3.0693 3.0693 0 0 1-2.8486-1.584h-0.043v4.4844h-1.8584v-12.049h1.7989v1.5059h0.03418a3.2116 3.2116 0 0 1 2.8828-1.6006c2.2978 1e-5 3.8125 1.8164 3.8125 4.6221zm-1.9102 0c0-1.833-0.94727-3.0381-2.3926-3.0381-1.4199 0-2.375 1.2305-2.375 3.0381 0 1.8242 0.95508 3.0459 2.375 3.0459 1.4453 0 2.3926-1.1963 2.3926-3.0459z"/>
+    <path d="m65.125 25.97c0 2.8135-1.5059 4.6211-3.7783 4.6211a3.0693 3.0693 0 0 1-2.8486-1.584h-0.043v4.4844h-1.8584v-12.049h1.7988v1.5059h0.03418a3.2116 3.2116 0 0 1 2.8828-1.6006c2.2979 0 3.8125 1.8164 3.8125 4.6221zm-1.9102 0c0-1.833-0.94727-3.0381-2.3926-3.0381-1.4199 0-2.375 1.2305-2.375 3.0381 0 1.8242 0.95508 3.0459 2.375 3.0459 1.4453 0 2.3926-1.1963 2.3926-3.0459z"/>
+    <path d="m71.71 27.036c0.1377 1.2314 1.334 2.04 2.9688 2.04 1.5664 0 2.6934-0.80859 2.6934-1.919 0-0.96387-0.67969-1.541-2.2891-1.9365l-1.6094-0.3877c-2.2803-0.55078-3.3389-1.6172-3.3389-3.3477 0-2.1426 1.8672-3.6143 4.5186-3.6143 2.624 0 4.4228 1.4717 4.4834 3.6143h-1.876c-0.1123-1.2393-1.1367-1.9873-2.6338-1.9873s-2.5215 0.75684-2.5215 1.8584c0 0.87793 0.6543 1.3945 2.2549 1.79l1.3682 0.33594c2.5478 0.60254 3.6064 1.626 3.6064 3.4424 0 2.3232-1.8506 3.7783-4.794 3.7783-2.7539 0-4.6133-1.4209-4.7334-3.667z"/>
+    <path d="m83.346 19.3v2.1426h1.7217v1.4717h-1.7217v4.9912c0 0.77539 0.34473 1.1367 1.1016 1.1367a5.8075 5.8075 0 0 0 0.61133-0.043v1.4629a5.1035 5.1035 0 0 1-1.0322 0.08594c-1.833 0-2.5478-0.68848-2.5478-2.4443v-5.1894h-1.3164v-1.4717h1.3164v-2.1426z"/>
+    <path d="m86.065 25.97c0-2.8486 1.6777-4.6387 4.294-4.6387 2.625 0 4.2949 1.79 4.2949 4.6387 0 2.8564-1.6611 4.6387-4.2949 4.6387-2.6329 0-4.294-1.7822-4.294-4.6387zm6.6953 0c0-1.9541-0.89551-3.1074-2.4014-3.1074s-2.4004 1.1621-2.4004 3.1074c0 1.9619 0.89453 3.1064 2.4004 3.1064s2.4013-1.1445 2.4013-3.1064z"/>
+    <path d="m96.186 21.442h1.7725v1.541h0.043a2.1594 2.1594 0 0 1 2.1777-1.6357 2.8662 2.8662 0 0 1 0.63672 0.06934v1.7383a2.5979 2.5979 0 0 0-0.835-0.1123 1.8726 1.8726 0 0 0-1.9365 2.083v5.3701h-1.8584z"/>
+    <path d="m109.38 27.837c-0.25 1.6436-1.8506 2.7715-3.8984 2.7715-2.6338 0-4.2686-1.7646-4.2686-4.5957 0-2.8398 1.6436-4.6816 4.1904-4.6816 2.5049 0 4.0801 1.7207 4.0801 4.4658v0.63672h-6.3945v0.1123a2.358 2.358 0 0 0 2.4356 2.5644 2.0483 2.0483 0 0 0 2.0908-1.2734zm-6.2822-2.7022h4.5264a2.1773 2.1773 0 0 0-2.2207-2.2978 2.292 2.292 0 0 0-2.3057 2.2979z"/>
+  </g>
+  <text x="33.771507" y="14.804743" fill="#ffffff" font-family="Arial" font-size="8.5px" letter-spacing=".5px" xml:space="preserve"><tspan x="33.771507" y="14.804743">${text}</tspan></text>
+</svg>`