@consumidor-positivo/aurora 1.1.0 → 1.2.0

package/astro/Button/index.astro

@@ -0,0 +1,85 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../dist/components/Button/styles.css'
+
+type AuroraButtonProps = {
+  as?: 'button' | 'a'
+  color?: 'default'
+  disabled?: boolean
+  /** Stretches the button to fill the container width. */
+  expand?: 'x'
+  htmlType?: 'button' | 'submit' | 'reset'
+  size?: 'large' | 'medium'
+  /**
+   * Visual type. Avoid `'link'`: use the `LinkButton` component instead
+   * (it matches the Figma "Link Button" set, with sizes and icon slots).
+   */
+  type?: 'primary' | 'outlined' | 'ghost' | 'link'
+  /** Inverted colors for colored backgrounds (Figma: Negative). */
+  negative?: boolean
+  /** Renders as a plain text button (class `btn-text`). */
+  btnText?: boolean
+  /** Icon-only round button (Figma: Style=Icon). */
+  round?: boolean
+  /** Border width modifier (`au-btn--border-*`). */
+  borderWidth?: string
+}
+
+type AnchorProps = Pick<
+  HTMLAttributes<'a'>,
+  'href' | 'target' | 'rel' | 'download'
+>
+
+export type Props = Omit<HTMLAttributes<'button'>, 'type' | 'disabled'> &
+  AnchorProps &
+  AuroraButtonProps
+
+const {
+  as = 'button',
+  href,
+  target,
+  color = 'default',
+  disabled = false,
+  expand,
+  htmlType = 'button',
+  size = 'medium',
+  type = 'primary',
+  negative = false,
+  btnText = false,
+  round = false,
+  borderWidth = 'medium',
+  class: className,
+  // Astro passes `class:list` on a component through as a raw prop; without
+  // picking it up here it would land in `...rest` and overwrite the classes
+  // this component builds.
+  'class:list': classList,
+  ...rest
+} = Astro.props
+
+const isAnchor = as === 'a'
+const Tag = isAnchor ? 'a' : 'button'
+---
+
+<Tag
+  class:list={[
+    'au-btn',
+    `au-btn--type-${type}`,
+    `au-btn--size-${size}`,
+    `au-btn--color-${color}`,
+    `au-btn--border-${borderWidth}`,
+    expand && `au-btn--expand-${expand}`,
+    negative && 'au-btn--negative',
+    disabled && 'au-btn--disabled',
+    round && `au-btn--round-${size}`,
+    btnText && 'btn-text',
+    className,
+    classList,
+  ]}
+  href={isAnchor ? href : undefined}
+  target={isAnchor ? target : undefined}
+  type={isAnchor ? undefined : htmlType}
+  disabled={!isAnchor && disabled ? true : undefined}
+  aria-disabled={isAnchor && disabled ? 'true' : undefined}
+  {...rest}>
+  <slot />
+</Tag>

package/astro/Drawer/index.astro

@@ -0,0 +1,95 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import IconX from '../icons/default/IconX.astro'
+import '../../dist/components/Drawer/styles.css'
+
+export type Props = HTMLAttributes<'div'> & {
+  /**
+   * Ties the drawer to whatever opens it: any element carrying
+   * `data-au-drawer-toggle="<id>"` toggles this drawer, from anywhere on the
+   * page. The React version takes `isOpen` and `handleOpen` instead.
+   */
+  id: string
+  /**
+   * Edge the drawer slides in from. 'right' is the classic side sheet;
+   * 'bottom' renders the Bottom Sheet surface (Figma: Modal v2, Surface=BottomSheet).
+   */
+  position?: 'right' | 'bottom'
+  /** Renders the drawer already open. */
+  isOpen?: boolean
+}
+
+const {
+  id,
+  position = 'right',
+  isOpen = false,
+  class: className,
+  ...rest
+} = Astro.props
+---
+
+<div
+  id={id}
+  class:list={[
+    'au-drawer',
+    isOpen && 'au-drawer--is-open',
+    position === 'bottom' && 'au-drawer--position-bottom',
+    className,
+  ]}
+  role="dialog"
+  aria-modal="true"
+  data-element="au-drawer"
+  {...rest}>
+  <div class="au-drawer__container">
+    <div class="au-drawer__header">
+      <slot name="header" />
+      <button class="au-drawer__header-close" aria-label="Fechar">
+        <IconX aria-hidden="true" />
+      </button>
+    </div>
+    <div class="au-drawer__content">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<script>
+  import { elementController } from '@consumidor-positivo/aurora/astro/runtime'
+
+  const OPEN_CLASS = 'au-drawer--is-open'
+
+  elementController('au-drawer', ({ root, query, on, emit }) => {
+    const toggleSelector = `[data-au-drawer-toggle="${root.id}"]`
+
+    function setOpen(isOpen: boolean) {
+      if (root.classList.contains(OPEN_CLASS) === isOpen) return
+
+      root.classList.toggle(OPEN_CLASS, isOpen)
+      document
+        .querySelectorAll(toggleSelector)
+        .forEach((trigger) => trigger.setAttribute('aria-expanded', String(isOpen)))
+      emit(isOpen ? 'au:draweropen' : 'au:drawerclose', { id: root.id })
+    }
+
+    on('click', (event) => {
+      const target = event.target as Element | null
+      // The backdrop is the root itself; the panel swallows its own clicks.
+      if (target === root || target?.closest('.au-drawer__header-close')) {
+        setOpen(false)
+      }
+    })
+
+    query('.au-drawer__header-close')?.setAttribute('aria-controls', root.id)
+
+    on('global:click', (event) => {
+      const trigger = (event.target as Element | null)?.closest(toggleSelector)
+      if (!trigger) return
+      setOpen(!root.classList.contains(OPEN_CLASS))
+    })
+
+    on('global:keydown', (event) => {
+      if (event.key !== 'Escape') return
+      setOpen(false)
+    })
+  })
+</script>

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>