@consumidor-positivo/aurora 1.1.0 → 1.3.0

package/astro/Footer/index.astro

@@ -0,0 +1,329 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Text from '../Text/index.astro'
+import IconFacebook from '../icons/default/IconFacebook.astro'
+import IconInstagram from '../icons/default/IconInstagram.astro'
+import IconLinkedin from '../icons/default/IconLinkedin.astro'
+import IconTiktok from '../icons/default/IconTiktok.astro'
+import IconYoutube from '../icons/default/IconYoutube.astro'
+import '../../dist/components/Footer/styles.css'
+
+export type Link = {
+  title: string
+  url?: string
+}
+
+export type CategoryLink = {
+  categoryTitle: string
+  links: Link[]
+}
+
+export type SocialLink = {
+  instagram?: string
+  facebook?: string
+  youtube?: string
+  linkedin?: string
+  tiktok?: string
+}
+
+export type AppStores = {
+  appstore?: string
+  googleplay?: string
+}
+
+export type Certificate = keyof typeof CERTIFICATES
+
+export type Props = HTMLAttributes<'footer'> & {
+  categoryLinks?: CategoryLink[]
+  socialLinks: SocialLink
+  stores?: AppStores
+  cnpj?: string
+  address?: string
+  companyOverview?: string
+  certificates: Certificate[]
+  /** Raw HTML, like the React `copyrights` when it carries markup. */
+  copyrights: string
+}
+
+// Mirrors `lib/components/Footer/data.tsx`, which cannot be imported here: it
+// is JSX and is not part of the published package. Keep both in sync.
+const CERTIFICATES = {
+  fintech2022: {
+    logo: 'https://assets.acordocerto.com.br/f/114280/47x62/6ffd0990ed/fintech-2022.png',
+    name: 'Melhores Fintechs 2022',
+  },
+  fintech2023: {
+    logo: 'https://assets.acordocerto.com.br/f/114280/84x73/b48cc08aa5/fintech-2023.png',
+    name: 'Melhores Fintechs 2023',
+  },
+  pcidss: {
+    logo: 'https://assets.acordocerto.com.br/f/114280/85x36/8be091fa1c/pci-dss.png',
+    name: 'PCI DSS Compliant',
+  },
+  quintessa: {
+    logo: 'https://assets.acordocerto.com.br/f/114280/122x40/16f41476c0/quintessa.png',
+    name: 'Quintessa',
+  },
+  ra1000: {
+    logo: 'https://assets.acordocerto.com.br/f/114280/100x58/ad8bed26c8/ra1000.png',
+    name: 'RA 1000',
+  },
+  reclameaqui: {
+    logo: 'https://assets.acordocerto.com.br/f/114280/60x60/b85fcf03dd/reclame-aqui.png',
+    name: 'Ótimo Reclame Aqui',
+  },
+  scaleup: {
+    logo: 'https://assets.acordocerto.com.br/f/114280/104x50/07c8b89dbe/scale-up.png',
+    name: 'Scale Up',
+  },
+  sslblindado: {
+    logo: 'https://assets.acordocerto.com.br/f/114280/75x54/60734a2cc4/ssl-blindado.png',
+    name: 'SSL Blindado',
+  },
+}
+
+const STORES = {
+  googleplay: {
+    name: 'Google Play',
+    icon: 'https://assets.acordocerto.com.br/f/114280/117x36/e0e7eda65d/google-play.png',
+  },
+  appstore: {
+    name: 'App Store',
+    icon: 'https://assets.acordocerto.com.br/f/114280/117x36/38b0d1ecc9/app-store.png',
+  },
+}
+
+const SOCIALS = {
+  instagram: { name: 'Instagram', Component: IconInstagram },
+  facebook: { name: 'Facebook', Component: IconFacebook },
+  youtube: { name: 'Youtube', Component: IconYoutube },
+  linkedin: { name: 'Linkedin', Component: IconLinkedin },
+  tiktok: { name: 'TikTok', Component: IconTiktok },
+}
+
+const {
+  categoryLinks,
+  socialLinks,
+  stores = {},
+  cnpj,
+  address,
+  companyOverview,
+  certificates,
+  copyrights,
+  class: className,
+  ...rest
+} = Astro.props
+
+const usedCertificates = certificates.map(
+  (certificate) => CERTIFICATES[certificate],
+)
+
+const usedSocials = (Object.keys(socialLinks) as Array<keyof SocialLink>).map(
+  (social) => ({ ...SOCIALS[social], url: socialLinks[social] }),
+)
+
+const usedStores = (Object.keys(stores) as Array<keyof AppStores>).map(
+  (store) => ({ ...STORES[store], url: stores[store] }),
+)
+
+// The React version decides this with `isMobile()` at render time. Static
+// output cannot, so the class always ships and the rule is scoped to the
+// mobile breakpoint in the stylesheet.
+const showCertificatesBorder = usedCertificates.length > 3
+---
+
+{
+  categoryLinks ? (
+    <footer class:list={['au-footer-full', className]} {...rest}>
+      <div class="au-footer-full__container">
+        <div class="au-footer-full__logo">
+          <slot name="logo" />
+        </div>
+        <div class="au-footer-full__links">
+          {categoryLinks.map(({ categoryTitle, links }) => (
+            <div class="au-footer-full__links-category">
+              <Text as="h2" variant="heading-micro" weight="bold">
+                {categoryTitle}
+              </Text>
+              {links.map(({ title, url }) =>
+                url ? (
+                  <a
+                    class="au-footer-full__links au-footer-full__links--is-clickable"
+                    href={url}
+                    target="_blank"
+                    rel="noopener noreferrer">
+                    <Text as="span" variant="body-medium" weight="regular" color="secondary">
+                      {title}
+                    </Text>
+                  </a>
+                ) : (
+                  <span class="au-footer-full__links">
+                    <Text as="span" variant="body-medium" weight="regular" color="secondary">
+                      {title}
+                    </Text>
+                  </span>
+                ),
+              )}
+            </div>
+          ))}
+          <div class="au-footer-full__company-info">
+            <Text as="h2" variant="heading-micro" weight="bold">
+              Siga a gente
+            </Text>
+            <div class="au-footer-full__links-socials">
+              {usedSocials.map(({ Component: SocialIcon, url, name }) => (
+                <a
+                  class:list={[
+                    'au-footer-full__links',
+                    url && 'au-footer-full__links--is-clickable',
+                  ]}
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={`Siga-nos no ${name}`}>
+                  <span aria-hidden="true">
+                    <SocialIcon />
+                  </span>
+                </a>
+              ))}
+            </div>
+            {cnpj && (
+              <Text as="div" variant="body-medium" weight="regular" color="secondary">
+                <Text as="strong" weight="bold" color="secondary">
+                  CNPJ:
+                </Text>
+                {` ${cnpj}`}
+              </Text>
+            )}
+            {address && (
+              <Text as="div" variant="body-medium" weight="regular" color="secondary">
+                <Text
+                  as="strong"
+                  variant="body-medium"
+                  weight="bold"
+                  color="secondary"
+                  class="au-footer-full__address-label">
+                  Localização (sem atendimento ao público):
+                </Text>
+                {address}
+              </Text>
+            )}
+          </div>
+        </div>
+
+        {usedStores.length > 0 && (
+          <div class="au-footer-full__stores-slot au-footer-full__stores-slot--mobile">
+            <div class="au-footer-full__stores">
+              <Text
+                class="au-footer-full__stores-title"
+                as="h2"
+                variant="heading-micro"
+                weight="bold">
+                Baixe nosso app
+              </Text>
+              {usedStores.map(({ icon, url, name }) =>
+                url ? (
+                  <a
+                    href={url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="au-footer-full__stores-logo au-footer-full__stores-logo--is-clickable">
+                    <img src={icon} alt={name} loading="lazy" draggable="false" />
+                  </a>
+                ) : (
+                  <img
+                    class="au-footer-full__stores-logo"
+                    src={icon}
+                    alt={name}
+                    loading="lazy"
+                    draggable="false"
+                  />
+                ),
+              )}
+            </div>
+          </div>
+        )}
+
+        {companyOverview && (
+          <div class="au-footer-full__company-overview">
+            <Text color="secondary">{companyOverview}</Text>
+          </div>
+        )}
+
+        <div class="au-footer-full__bottom">
+          <div
+            class:list={[
+              'au-footer-full__bottom-certificates',
+              showCertificatesBorder &&
+                'au-footer-full__bottom-certificates--with-border',
+            ]}>
+            {usedCertificates.map(({ logo, name }) => (
+              <img src={logo} alt={name} loading="lazy" draggable="false" />
+            ))}
+          </div>
+          <div class="au-footer-full__bottom-side">
+            {usedStores.length > 0 && (
+              <div class="au-footer-full__stores-slot au-footer-full__stores-slot--desktop">
+                <div class="au-footer-full__stores">
+                  <Text
+                    class="au-footer-full__stores-title"
+                    as="h2"
+                    variant="heading-micro"
+                    weight="bold">
+                    Baixe nosso app
+                  </Text>
+                  {usedStores.map(({ icon, url, name }) =>
+                    url ? (
+                      <a
+                        href={url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="au-footer-full__stores-logo au-footer-full__stores-logo--is-clickable">
+                        <img src={icon} alt={name} loading="lazy" draggable="false" />
+                      </a>
+                    ) : (
+                      <img
+                        class="au-footer-full__stores-logo"
+                        src={icon}
+                        alt={name}
+                        loading="lazy"
+                        draggable="false"
+                      />
+                    ),
+                  )}
+                </div>
+              </div>
+            )}
+            <Text
+              as="div"
+              variant="body-medium"
+              weight="regular"
+              color="secondary"
+              class="au-footer-full__copyrights"
+              html={copyrights}
+            />
+          </div>
+        </div>
+      </div>
+    </footer>
+  ) : (
+    <footer class:list={['au-footer', className]} {...rest}>
+      <div class="au-footer__container">
+        <div class="au-footer__content">
+          <div class="au-footer__content-logos">
+            <slot name="logo" />
+            <div class="au-footer__content-divider" />
+            <div class="au-footer__content-certificates">
+              {usedCertificates.map(({ logo, name }) => (
+                <img src={logo} alt={name} loading="lazy" draggable="false" />
+              ))}
+            </div>
+          </div>
+          <div class="au-footer__content-copyrights">
+            <Text as="p" variant="body-medium" weight="regular" color="secondary" html={copyrights} />
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/astro/Header/Actions/index.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+export type Props = HTMLAttributes<'div'> & {
+  divider?: boolean
+}
+
+const { divider = false, class: className, ...rest } = Astro.props
+---
+
+<div
+  class:list={[
+    'au-header__actions',
+    divider && 'au-header__actions--divider',
+    className,
+  ]}
+  {...rest}>
+  <slot />
+</div>

package/astro/Header/Badges/index.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+export type Props = HTMLAttributes<'div'> & {
+  limitBadgeWidth?: boolean
+}
+
+const { limitBadgeWidth = true, class: className, ...rest } = Astro.props
+---
+
+<div
+  class:list={[
+    'au-header__badges',
+    limitBadgeWidth && 'au-header__badges--limited-width',
+    className,
+  ]}
+  {...rest}>
+  <slot />
+</div>

package/astro/Header/Button/index.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+/**
+ * The React version takes an `onClick`. Astro has no callback props: pass an
+ * `id` or a `data-*` attribute and wire the listener from the page's own
+ * `<script>`.
+ */
+export type Props = Omit<HTMLAttributes<'button'>, 'type'>
+
+const { class: className, ...rest } = Astro.props
+---
+
+<button type="button" class:list={['au-header__button', className]} {...rest}>
+  <slot />
+</button>

package/astro/Header/Hamburger/index.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import IconMenu from '../../icons/default/IconMenu.astro'
+
+/**
+ * The React version takes an `onClick`. Astro has no callback props: pass an
+ * `id` or a `data-*` attribute and wire the listener from the page's own
+ * `<script>`.
+ */
+export type Props = Omit<HTMLAttributes<'button'>, 'type'> & {
+  isOpen?: boolean
+  /** Id of the element the button controls, for `aria-controls`. */
+  controls?: string
+}
+
+const { isOpen = false, controls, class: className, ...rest } = Astro.props
+
+---
+
+<button
+  type="button"
+  class:list={['au-header__hamburger', className]}
+  aria-label="Abrir menu de navegação"
+  aria-expanded={isOpen ? 'true' : 'false'}
+  aria-controls={controls}
+  {...rest}>
+  <IconMenu aria-hidden="true" />
+</button>

package/astro/Header/Logo/index.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+export type Props = HTMLAttributes<'div'>
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={['au-header__logo', className]} {...rest}>
+  {
+    Astro.slots.has('mobile') && (
+      <div class="au-header__logo--mobile">
+        <slot name="mobile" />
+      </div>
+    )
+  }
+  {
+    Astro.slots.has('desktop') && (
+      <div class="au-header__logo--desktop">
+        <slot name="desktop" />
+      </div>
+    )
+  }
+  <slot />
+</div>

package/astro/Header/Navbar/index.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import NavbarLink from '../NavbarLink/index.astro'
+import type { NavbarItem } from '../NavbarLink/index.astro'
+
+/**
+ * The React version takes a `renderItem` render prop. Astro has no render
+ * props: pass `data` and the navbar renders `Header.NavbarLink` itself, or
+ * leave `data` out and put your own items in the default slot.
+ */
+export type Props = HTMLAttributes<'nav'> & {
+  data?: NavbarItem[]
+}
+
+const { data, class: className, ...rest } = Astro.props
+---
+
+<nav
+  role="navigation"
+  class:list={['au-header__navbar', className]}
+  {...rest}>
+  {data?.map((item) => <NavbarLink {...item} />)}
+  <slot />
+</nav>

package/astro/Header/NavbarLink/index.astro

@@ -0,0 +1,137 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Text from '../../Text/index.astro'
+import IconChevronDown from '../../icons/default/IconChevronDown.astro'
+
+export type NavbarItem = {
+  name: string
+  href?: string
+  active?: boolean
+  dropdown?: NavbarItem[]
+}
+
+/**
+ * The React version takes an `onClick` per item. Astro has no callback props:
+ * items are plain links, so give them an `href` (or wire the click from the
+ * page's own `<script>`).
+ */
+export type Props = HTMLAttributes<'div'> & NavbarItem & {
+  /** Overrides the generated id that ties the trigger to its dropdown. */
+  dropdownId?: string
+}
+
+const {
+  name,
+  href,
+  active = false,
+  dropdown,
+  dropdownId,
+  class: className,
+  ...rest
+} = Astro.props
+
+const isDropdown = !!dropdown?.length
+const slug = name
+  .toLowerCase()
+  .normalize('NFD')
+  .replace(/[̀-ͯ]/g, '')
+  .replace(/[^a-z0-9]+/g, '-')
+  .replace(/^-|-$/g, '')
+const panelId = dropdownId ?? `au-header-dropdown-${slug}`
+
+---
+
+<div
+  class:list={[
+    'au-header__navbar-item',
+    isDropdown && 'au-header__navbar-item--is-dropdown',
+    active && 'au-header__navbar-item--is-active',
+    className,
+  ]}
+  data-element={isDropdown ? 'au-header-navbar-item' : undefined}
+  {...rest}>
+  {
+    isDropdown ? (
+      <button
+        type="button"
+        aria-expanded="false"
+        aria-haspopup="true"
+        aria-controls={panelId}
+        title={name}
+        class:list={[
+          'au-header__navbar-link',
+          'au-header__navbar-link--is-dropdown',
+          active && 'au-header__navbar-link--is-active',
+        ]}>
+        <Text as="span" variant="heading-micro" weight="light">
+          {name}
+        </Text>
+        <IconChevronDown aria-hidden="true" />
+      </button>
+    ) : (
+      <Text
+        as="a"
+        variant="heading-micro"
+        weight="light"
+        href={href}
+        title={name}
+        class:list={[
+          'au-header__navbar-link',
+          active && 'au-header__navbar-link--is-active',
+        ]}>
+        {name}
+      </Text>
+    )
+  }
+
+  {
+    isDropdown && (
+      <div id={panelId} class="au-header__dropdown" aria-hidden="true">
+        {dropdown?.map((item) => (
+          <Text
+            as="a"
+            variant="heading-micro"
+            weight="light"
+            href={item.href}
+            title={item.name}
+            tabindex="-1"
+            class:list={[
+              'au-header__dropdown-link',
+              item.active && 'au-header__dropdown-link--is-active',
+            ]}>
+            {item.name}
+          </Text>
+        ))}
+      </div>
+    )
+  }
+</div>
+
+<script>
+  import { elementController } from '@consumidor-positivo/aurora/astro/runtime'
+
+  const OPEN_CLASS = 'au-header__navbar-item--is-open'
+
+  elementController('au-header-navbar-item', ({ root, query, queryAll, on }) => {
+    const trigger = query<HTMLButtonElement>('.au-header__navbar-link')
+    const dropdown = query<HTMLElement>('.au-header__dropdown')
+    const links = queryAll<HTMLAnchorElement>('.au-header__dropdown-link')
+
+    function toggle(isOpen: boolean) {
+      root.classList.toggle(OPEN_CLASS, isOpen)
+      trigger?.setAttribute('aria-expanded', String(isOpen))
+      dropdown?.setAttribute('aria-hidden', String(!isOpen))
+      links.forEach((link) => {
+        link.tabIndex = isOpen ? 0 : -1
+      })
+    }
+
+    on('mouseenter', () => toggle(true))
+    on('mouseleave', () => toggle(false))
+    on('focusin', () => toggle(true))
+    on('focusout', (event) => {
+      if (root.contains(event.relatedTarget as Node)) return
+      toggle(false)
+    })
+  })
+</script>

package/astro/Header/Navigation/index.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+export type Props = HTMLAttributes<'div'>
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={['au-header__navigation', className]} {...rest}>
+  <slot />
+</div>

package/astro/Header/Profile/index.astro

@@ -0,0 +1,81 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import IconBell from '../../icons/default/IconBell.astro'
+import IconChevronDown from '../../icons/default/IconChevronDown.astro'
+import IconMenu from '../../icons/default/IconMenu.astro'
+
+export type NotificationsConfig = {
+  visible?: boolean
+  count?: number
+  hasUnread?: boolean
+}
+
+/**
+ * The React version takes `onClickMenu` and `notifications.onClick`. Astro has
+ * no callback props: the buttons carry `data-au-header-profile` values so the
+ * page's own `<script>` can wire them.
+ */
+export type Props = HTMLAttributes<'div'> & {
+  fullName: string
+  notifications?: NotificationsConfig
+}
+
+const {
+  fullName,
+  notifications = {},
+  class: className,
+  ...rest
+} = Astro.props
+
+const { visible = true, hasUnread = false, count } = notifications
+const shouldShowBadge = (count && count > 0) || hasUnread
+
+const initialLetters = fullName
+  ?.split(' ')
+  .map((part) => part[0])
+  .slice(0, 2)
+  .join('')
+
+---
+
+<div class:list={['au-header__profile', className]} {...rest}>
+  {
+    visible && (
+      <button
+        type="button"
+        class="au-header__profile-notifications"
+        data-au-header-profile="notifications"
+        aria-label={
+          shouldShowBadge
+            ? `Notificações, ${count && count > 0 ? count : 'novas'}`
+            : 'Notificações'
+        }>
+        <IconBell aria-hidden="true" />
+        {shouldShowBadge && (
+          <span class="au-header__profile-notifications-badge" aria-hidden="true">
+            {count && count > 0 ? count : null}
+          </span>
+        )}
+      </button>
+    )
+  }
+
+  <button
+    type="button"
+    class="au-header__profile-menu-mobile"
+    data-au-header-profile="menu"
+    aria-label="Abrir menu de perfil">
+    <IconMenu aria-hidden="true" />
+  </button>
+
+  <button
+    type="button"
+    class="au-header__profile-menu"
+    data-au-header-profile="menu"
+    aria-label={`Menu de ${fullName}`}>
+    <span class="au-header__profile-letters" aria-hidden="true">
+      {initialLetters}
+    </span>
+    <IconChevronDown aria-hidden="true" />
+  </button>
+</div>