@consumidor-positivo/aurora 1.2.0 → 1.3.0

package/astro/Modal/index.astro

@@ -0,0 +1,213 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import SubHeader from '../SubHeader/index.astro'
+import IconX from '../icons/default/IconX.astro'
+import '../../dist/components/Modal/styles.css'
+
+type ModalLayout = 'default' | 'centralized'
+type ModalLayoutMobile = 'default' | 'centralized' | 'full-screen'
+
+/**
+ * Differences from React:
+ * - No `isOpen`/`onClose`. Any element carrying
+ *   `data-au-modal-toggle="<id>"` toggles this modal, from anywhere on the
+ *   page. `closeButton` stands for React's `onClose`: it renders the close
+ *   button (and the SubHeader back button), which close the modal, and lets
+ *   `closeOnBackdropClick` work. The root emits `au:modalopen` /
+ *   `au:modalclose` with `{ id }`.
+ * - Like React, which renders nothing while closed, the controller takes the
+ *   closed modal out of the page and puts it back when it opens.
+ * - `headerContent` and `content` are the `header` slot and the default slot.
+ * - `ariaLabel` is the native `aria-label`.
+ * - `handleHelpInfo` becomes `helpButton`: the SubHeader help button carries
+ *   `data-au-sub-header="help"` for the page's own `<script>`.
+ * - React picks the mobile SubHeader with `isMobile()` (max-width 767px) each
+ *   time it renders. With `layoutMobile="full-screen"`, the SubHeader rides in
+ *   a `<template>` and the controller makes the same choice on every open.
+ * - `portal` moves the modal to `document.body` when the controller runs, the
+ *   counterpart of a React `createPortal(<Modal />, document.body)`.
+ * - Besides the toggles, a `CustomEvent('au:modalcontrol', { detail: { id,
+ *   open? } })` dispatched on `document` opens (`open: true`), closes
+ *   (`open: false`) or toggles (no `open`) the modal with that `id`, for
+ *   components that drive a modal from their own controller.
+ */
+export type Props = HTMLAttributes<'div'> & {
+  id: string
+  /** Renders the modal already open. */
+  open?: boolean
+  /**
+   * Calls the close (React `onClose`) when the backdrop (area outside the
+   * container) is clicked. Needs `closeButton`, as React needs `onClose`.
+   */
+  closeOnBackdropClick?: boolean
+  /**
+   * Renders the close button (and the SubHeader back button). React renders
+   * them only when `onClose` is passed.
+   */
+  closeButton?: boolean
+  layoutMobile?: ModalLayoutMobile
+  layoutDesktop?: ModalLayout
+  mobileModalTitle?: string
+  /** Renders the help button in the mobile full-screen SubHeader. */
+  helpButton?: boolean
+  /** Moves the modal to `document.body` once the controller runs. */
+  portal?: boolean
+}
+
+const {
+  id,
+  open = false,
+  closeOnBackdropClick = false,
+  closeButton = true,
+  layoutMobile = 'default',
+  layoutDesktop = 'default',
+  mobileModalTitle = 'Título',
+  helpButton = false,
+  portal = false,
+  'aria-label': ariaLabel,
+  class: className,
+  ...rest
+} = Astro.props
+
+const isFullScreenMobile = layoutMobile === 'full-screen'
+---
+
+<div
+  id={id}
+  class:list={[
+    'au-modal',
+    open && 'au-modal--is-open',
+    isFullScreenMobile && 'au-modal--mobile-full-screen',
+    layoutMobile === 'centralized' && 'au-modal--mobile-centralized',
+    layoutDesktop === 'centralized' && 'au-modal--desktop-centralized',
+    className,
+  ]}
+  role="dialog"
+  aria-modal="true"
+  aria-label={ariaLabel ?? mobileModalTitle}
+  data-element="au-modal"
+  data-au-modal-close-on-backdrop={closeButton && closeOnBackdropClick ? 'true' : undefined}
+  data-au-modal-portal={portal ? '' : undefined}
+  {...rest}>
+  <div class="au-modal__container">
+    <div class="au-modal__header">
+      {
+        closeButton && (
+          <button class="au-modal__header-close" aria-label="Fechar">
+            <IconX class="au-modal__header-close-icon" />
+          </button>
+        )
+      }
+      <slot name="header" />
+      {
+        isFullScreenMobile && (
+          <template data-au-modal-mobile-header>
+            {closeButton && (
+              <SubHeader title={mobileModalTitle} showHelp={helpButton} />
+            )}
+          </template>
+        )
+      }
+    </div>
+    <div class="au-modal__content">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<script>
+  import { elementController } from '@consumidor-positivo/aurora/astro/runtime'
+
+  const OPEN_CLASS = 'au-modal--is-open'
+  // Same rule as `isMobile()` (lib/core/utils/isMobile.ts).
+  const MOBILE_QUERY = 'screen and (max-width:767px)'
+
+  elementController('au-modal', ({ root, on, emit }) => {
+    const toggleSelector = `[data-au-modal-toggle="${root.id}"]`
+    const closesOnBackdrop = root.dataset.auModalCloseOnBackdrop === 'true'
+    root.removeAttribute('data-au-modal-close-on-backdrop')
+
+    const header = root.querySelector<HTMLElement>(
+      ':scope > .au-modal__container > .au-modal__header',
+    )
+    const template = header?.querySelector<HTMLTemplateElement>(
+      ':scope > template[data-au-modal-mobile-header]',
+    )
+    // Full-screen mobile: React renders either the close button + header
+    // content or the SubHeader, never both.
+    const desktopNodes = header
+      ? Array.from(header.childNodes).filter((node) => node !== template)
+      : []
+    const mobileNodes = template ? Array.from(template.content.childNodes) : []
+    template?.remove()
+
+    function pickHeader() {
+      if (!header || !template) return
+      const isMobile = window.matchMedia(MOBILE_QUERY).matches
+      const [show, hide] = isMobile
+        ? [mobileNodes, desktopNodes]
+        : [desktopNodes, mobileNodes]
+      hide.forEach((node) => node.parentNode === header && header.removeChild(node))
+      show.forEach((node) => header.appendChild(node))
+    }
+
+    // React renders nothing while closed: the closed modal leaves the page
+    // and this marker keeps its place.
+    const placeholder = document.createComment('au-modal')
+    const isOpen = () => root.classList.contains(OPEN_CLASS)
+
+    function setOpen(open: boolean, silent = false) {
+      document
+        .querySelectorAll(toggleSelector)
+        .forEach((trigger) => trigger.setAttribute('aria-expanded', String(open)))
+
+      if (open) {
+        pickHeader()
+        root.classList.add(OPEN_CLASS)
+        if (placeholder.parentNode) placeholder.replaceWith(root)
+        if (!silent) emit('au:modalopen', { id: root.id })
+        return
+      }
+
+      root.classList.remove(OPEN_CLASS)
+      // Emitted while still in the page, so the event reaches `document`.
+      if (!silent) emit('au:modalclose', { id: root.id })
+      if (root.parentNode) root.replaceWith(placeholder)
+    }
+
+    document.querySelectorAll(toggleSelector).forEach((trigger) => {
+      trigger.setAttribute('aria-controls', root.id)
+    })
+    // Controller setting only; React's root carries no such attribute.
+    if (root.hasAttribute('data-au-modal-portal')) {
+      root.removeAttribute('data-au-modal-portal')
+      document.body.appendChild(root)
+    }
+    setOpen(isOpen(), true)
+
+    on('click', (event) => {
+      const target = event.target as Element | null
+      // The backdrop is the root itself; the container swallows its own clicks.
+      if (target === root) {
+        if (closesOnBackdrop) setOpen(false)
+        return
+      }
+      const close = target?.closest(
+        '.au-modal__header-close, .au-sub-header [data-au-sub-header="return"]',
+      )
+      if (close && header?.contains(close)) setOpen(false)
+    })
+
+    on('global:click', (event) => {
+      const trigger = (event.target as Element | null)?.closest(toggleSelector)
+      if (!trigger) return
+      setOpen(!isOpen())
+    })
+
+    on('global:au:modalcontrol', (event) => {
+      const detail = (event as CustomEvent<{ id?: string; open?: boolean }>).detail
+      if (!detail || detail.id !== root.id) return
+      setOpen(detail.open ?? !isOpen())
+    })
+  })
+</script>

package/astro/NotificationsBar/Link/index.astro

@@ -0,0 +1,70 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Text from '../../Text/index.astro'
+import '../../../dist/components/NotificationsBar/styles.css'
+
+export type NotificationsBarLinkItem = {
+  title: string
+  createdAt?: string
+  isUnread?: boolean
+  /** Renders the "Excluir" button (React renders it when `onDelete` is passed). */
+  deletable?: boolean
+}
+
+/**
+ * `NotificationsBar.Link` in React. No `onClick`/`onDelete`: the item button
+ * carries `data-au-notifications-bar="link"` and the delete button
+ * `data-au-notifications-bar="delete"`, so the page's own `<script>` can wire
+ * them. `Icon` is the `icon` slot.
+ */
+export type Props = Omit<HTMLAttributes<'div'>, 'title'> & NotificationsBarLinkItem
+
+const {
+  title,
+  createdAt,
+  isUnread = false,
+  deletable = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const timestampId = `au-notifications-bar-${crypto.randomUUID().slice(0, 8)}`
+---
+
+<div class:list={['au-notifications-bar__item', className]} {...rest}>
+  <button
+    type="button"
+    class="au-notifications-bar__link"
+    data-au-notifications-bar="link"
+    aria-describedby={createdAt ? timestampId : undefined}>
+    {
+      Astro.slots.has('icon') && (
+        <span aria-hidden="true">
+          <slot name="icon" />
+        </span>
+      )
+    }
+    <Text as="span" variant="body-medium" weight="regular">
+      {isUnread && <span class="au-sr-only">não lida — </span>}
+      {title}
+    </Text>
+  </button>
+  <div class="au-notifications-bar__actions">
+    <Text as="span" id={timestampId} variant="body-small">
+      {createdAt}
+    </Text>
+    {
+      deletable && (
+        <button
+          type="button"
+          class="au-notifications-bar__delete-btn"
+          data-au-notifications-bar="delete"
+          aria-label={`Excluir: ${title}`}>
+          <Text as="span" variant="body-small" weight="semibold">
+            Excluir
+          </Text>
+        </button>
+      )
+    }
+  </div>
+</div>

package/astro/NotificationsBar/List/index.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Text from '../../Text/index.astro'
+import NotificationsBarLink from '../Link/index.astro'
+import type { NotificationsBarLinkItem } from '../Link/index.astro'
+import '../../../dist/components/NotificationsBar/styles.css'
+
+/**
+ * `NotificationsBar.List` in React. `dataSource` + `renderItem` become `data`:
+ * the list renders a `NotificationsBar/Link` per item. For custom items (an
+ * icon, other markup), put `NotificationsBar/Link`s in the default slot,
+ * rendered after `data`.
+ */
+export type Props = Omit<HTMLAttributes<'div'>, 'title'> & {
+  title: string
+  data?: NotificationsBarLinkItem[]
+}
+
+const {
+  title,
+  data = [],
+  class: className,
+  // Astro hands a component its own `slot="recents|olds"` as a prop; spread
+  // into `...rest` it would render as a stray `slot` attribute.
+  slot: _slot,
+  ...rest
+} = Astro.props
+---
+
+<div class:list={['au-notifications-bar__section', className]} {...rest}>
+  <Text as="h3" variant="body-medium" weight="bold">
+    {title}
+  </Text>
+  <div class="au-notifications-bar__list">
+    {data.map((item) => <NotificationsBarLink {...item} />)}
+    <slot />
+  </div>
+</div>

package/astro/NotificationsBar/index.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../dist/components/NotificationsBar/styles.css'
+
+/**
+ * `NotificationsBar.Root` in React. `renderRecents` and `renderOlds` become
+ * the `recents` and `olds` slots, rendered in that order (the stylesheet
+ * highlights the first section as the unread one). The default slot comes
+ * last, for anything else.
+ */
+export type Props = HTMLAttributes<'div'>
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div
+  class:list={['au-notifications-bar', className]}
+  role="region"
+  aria-label="Notificações"
+  {...rest}>
+  <slot name="recents" />
+  <slot name="olds" />
+  <slot />
+</div>

package/astro/PartnerBanner/index.astro

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Text from '../Text/index.astro'
+import '../../dist/components/PartnerBanner/styles.css'
+
+/**
+ * The React `icon` prop is the `icon` slot (and still adds
+ * `au-partner-banner--with-icon`); `ariaLabel` is the plain `aria-label`
+ * attribute and `className` the plain `class`. No `onButtonClick`: the button
+ * carries `data-au-partner-banner="button"` for the page's own `<script>`.
+ * Every HTML attribute is forwarded to the `<aside>`.
+ */
+export type Props = HTMLAttributes<'aside'> & {
+  text: string
+  btnText: string
+}
+
+const { text, btnText, class: className, ...rest } = Astro.props
+
+const hasIcon = Astro.slots.has('icon')
+---
+
+<aside
+  class:list={[
+    'au-partner-banner',
+    hasIcon && 'au-partner-banner--with-icon',
+    className,
+  ]}
+  {...rest}>
+  {
+    hasIcon && (
+      <div class="au-partner-banner__icon" aria-hidden="true">
+        <slot name="icon" />
+      </div>
+    )
+  }
+  <div class="au-partner-banner__content">
+    <Text
+      as="p"
+      variant="body-small"
+      color="secondary"
+      class="au-partner-banner__text">
+      {text}
+    </Text>
+    <button
+      type="button"
+      class="au-partner-banner__button"
+      data-au-partner-banner="button">
+      <Text as="span" variant="body-small" weight="semibold">{btnText}</Text>
+    </button>
+  </div>
+</aside>

package/astro/ProfileNav/index.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Text from '../Text/index.astro'
+import '../../dist/components/ProfileNav/styles.css'
+
+/** Same props as React; every HTML attribute is forwarded to the root `div`. */
+export type Props = HTMLAttributes<'div'> & {
+  /** Shown in the greeting ("Olá, {name}"). */
+  name: string
+  /** Source of the two initials in the badge. */
+  fullName: string
+}
+
+const { name, fullName, class: className, ...rest } = Astro.props
+
+// Same rule as `lib/core/utils/getInitialLetters.ts`, inlined: a `.astro`
+// ships as source and `lib/core` is not published, so importing it would break
+// in the consumer.
+const initialLetters = fullName
+  ?.split(' ')
+  .map((part) => part[0])
+  .slice(0, 2)
+  .join('')
+---
+
+<div class:list={['au-profile-nav', className]} {...rest}>
+  <div class="au-profile-nav__badget">
+    <Text variant="heading-small" weight="medium">{initialLetters}</Text>
+  </div>
+  <div class="div">
+    <Text as="h3" variant="heading-micro" weight="bold">Olá, {name}</Text>
+    <Text color="secondary">Tudo bem?</Text>
+  </div>
+</div>

package/astro/ProgressBar/index.astro

@@ -0,0 +1,70 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Text from '../Text/index.astro'
+import '../../dist/components/ProgressBar/styles.css'
+
+/** Same props as React; every HTML attribute is forwarded to the root `div`. */
+export type Props = HTMLAttributes<'div'> & {
+  /** Shows a continuous bar with a percentage instead of step segments. */
+  percentageMode?: boolean
+  stepName: string
+  currentStep: number
+  totalSteps: number
+}
+
+const {
+  percentageMode = false,
+  stepName,
+  currentStep,
+  totalSteps,
+  class: className,
+  ...rest
+} = Astro.props
+
+const safeCurrentStep = Math.max(1, Math.min(currentStep, totalSteps))
+const percentageWidth = (safeCurrentStep / totalSteps) * 100
+const roundedPercentage = Math.round(percentageWidth)
+
+const progressText = percentageMode
+  ? `${roundedPercentage}%`
+  : `${safeCurrentStep} de ${totalSteps}`
+---
+
+<div
+  class:list={['au-progress-bar', className]}
+  role="progressbar"
+  aria-valuenow={percentageMode ? roundedPercentage : safeCurrentStep}
+  aria-valuemin={percentageMode ? 0 : 1}
+  aria-valuemax={percentageMode ? 100 : totalSteps}
+  aria-label={stepName}
+  {...rest}>
+  {
+    percentageMode ? (
+      <div class="au-progress-bar__bar">
+        <div
+          style={`width: ${percentageWidth}%`}
+          class="au-progress-bar__bar-filled"
+        />
+      </div>
+    ) : (
+      <div class="au-progress-bar__steps">
+        {Array.from({ length: totalSteps }).map((_, index) => (
+          <div class="au-progress-bar__step-container">
+            <div
+              class:list={[
+                'au-progress-bar__step-filled',
+                index < safeCurrentStep &&
+                  'au-progress-bar__step-filled--is-active',
+              ]}
+            />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  <div class="au-progress-bar__text">
+    <Text as="span" variant="body-medium">{stepName}</Text>
+    <Text as="span" variant="body-medium">{progressText}</Text>
+  </div>
+</div>

package/astro/Skeleton/index.astro

@@ -0,0 +1,50 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../dist/components/Skeleton/styles.css'
+
+/**
+ * Same props as React; every HTML attribute is forwarded to the `div`. The
+ * size is an inline `style`, so a `style` passed here is ignored.
+ */
+export type Props = Omit<HTMLAttributes<'div'>, 'color' | 'style'> & {
+  active?: boolean
+  shape?: 'default' | 'square' | 'circle'
+  color?: 'primary' | 'secondary'
+  /** Fills the container width when no `width` is given. */
+  block?: boolean
+  /** Width in px. Defaults to 80px (or 100% with `block`). */
+  width?: number
+  /** Height in px. Defaults to 28px. */
+  height?: number
+}
+
+const {
+  active = true,
+  shape = 'default',
+  color = 'primary',
+  block = false,
+  width,
+  height,
+  class: className,
+  ...rest
+} = Astro.props
+
+const style = {
+  height: height ? `${height}px` : '28px',
+  width: width ? `${width}px` : block ? '100%' : '80px',
+}
+---
+
+<div
+  class:list={[
+    'au-skeleton',
+    active && 'au-skeleton--active',
+    shape === 'square' && 'au-skeleton--shape-square',
+    shape === 'circle' && 'au-skeleton--shape-circle',
+    color === 'secondary' && 'au-skeleton--color-secondary',
+    className,
+  ]}
+  aria-hidden="true"
+  {...rest}
+  style={style}>
+</div>