@consumidor-positivo/aurora 1.1.0 → 1.3.0

package/README.md

@@ -6,18 +6,23 @@
 
 O Projeto Aurora é uma abordagem estruturada e abrangente para o Design System dos projetos Consumidor Positivo e Acordo Certo, criado com o objetivo de padronizar e otimizar a experiência do usuário em ambas as plataformas. Este sistema de design consiste em uma biblioteca de componentes reutilizáveis, diretrizes de estilo, padrões de interação e documentação detalhada para garantir consistência e eficiência no desenvolvimento e design de interfaces.
 
+Cada componente visual é publicado em **dois formatos**: **React**, para as aplicações (área logada, formulários com estado), e **Astro**, para as páginas públicas estáticas, que assim não carregam React. Os dois usam a mesma marcação e o mesmo CSS. Veja [Dois formatos: React e Astro](#dois-formatos-react-e-astro).
+
 <p align="center">
   <a href="#tech-stack">Tech Stack</a> •
-  <a href="#sites">Sites</a>
+  <a href="#sites">Sites</a> •
+  <a href="#dois-formatos-react-e-astro">React e Astro</a> •
+  <a href="#desenvolvimento">Desenvolvimento</a>
 </p>
 
 ### Tech Stack
 
 - <img width="20" height="20" src="https://github.com/AcordoCertoBR/mono-debtor-hub-ui/assets/397832/2edb6c43-89a3-4c08-b126-96771d488e9b" /> [Reactjs](https://reactjs.org/) ( JS lib )
+- <img width="20" height="20" src="https://astro.build/favicon.svg" /> [Astro](https://astro.build/) ( versão estática dos componentes )
 - <img width="20" height="20" src="https://github.com/AcordoCertoBR/mono-debtor-hub-ui/assets/397832/116d0ad2-55a8-4bd6-a8b8-4fbdb3aab82b" /> [Typescript](https://www.typescriptlang.org/) ( Types )
 - <img width="20" height="20" src="https://github.com/AcordoCertoBR/mono-debtor-hub-ui/assets/397832/862d66f3-703d-42f1-8e70-3e6ab5c6d318" /> [Vitejs](https://reactjs.org/) ( Tooling )
 - <img width="20" height="20" src="https://github.com/AcordoCertoBR/mono-debtor-hub-ui/assets/397832/4a977365-7a05-4131-8b11-6589acbf0831" /> [Sass](<https://emotion.sh/docs/introduction](https://sass-lang.com/)>) ( CSS )
-- <img width="20" height="20" src="https://github.com/AcordoCertoBR/mono-debtor-hub-ui/assets/397832/96405885-c5c0-4e26-a645-0e84b7d12ef3" /> [Storybook](https://storybook.js.org/) ( UI )
+- <img width="20" height="20" src="https://github.com/AcordoCertoBR/mono-debtor-hub-ui/assets/397832/96405885-c5c0-4e26-a645-0e84b7d12ef3" /> [Storybook](https://storybook.js.org/) ( UI dos componentes React; os Astro têm um playground próprio )
 
 ### Sites
 
@@ -58,9 +63,60 @@ import { Carousel } from '@consumidor-positivo/aurora'
 
 > **Nota:** Se você tentar usar o Carousel sem instalar o `react-snap-carousel`, receberá um erro de dependência em tempo de execução.
 
+## Dois formatos: React e Astro
+
+O caminho do import decide qual versão você usa.
+
+**React**, import nomeado do pacote:
+
+```tsx
+import { Button, Text } from '@consumidor-positivo/aurora'
+
+<Button type="primary">Simular agora</Button>
+```
+
+**Astro**, import default pelo caminho completo do arquivo, com a extensão `.astro`:
+
+```astro
+---
+import '@consumidor-positivo/aurora/global.css'
+import Button from '@consumidor-positivo/aurora/astro/Button/index.astro'
+import Text from '@consumidor-positivo/aurora/astro/Text/index.astro'
+---
+
+<Button type="primary">Simular agora</Button>
+```
+
+A versão Astro renderiza em build time, sem ilha e sem React no bundle, e tem as mesmas props visuais da React. Como o Astro não tem prop de função, os callbacks viram atributos e eventos: `data-au-modal-toggle` e `data-au-drawer-toggle` abrem Modal e Drawer, e os componentes emitem eventos `au:*` (`au:tabchange`, `au:modalopen`...). Uma página feita só com componentes Astro importa o reset uma vez, pelo `global.css`.
+
+Todo componente visual tem as duas versões. Ficam só em React os utilitários (`Transition`, `IsMobile`, `misc/*`) e o `Prototype/Carousel`. A referência completa está em [docs/astro.md](docs/astro.md) e na página "Componentes Astro" do Storybook.
+
+## Desenvolvimento
+
+```bash
+npm install
+npm run prebuild          # gera tokens e ícones (obrigatório antes de rodar qualquer coisa)
+npm run storybook         # componentes React, porta 6006
+npm run playground:astro  # componentes Astro, porta 4321
+npm run check:astro       # type check dos .astro
+```
+
+### Playground Astro
+
+O Storybook não renderiza `.astro`. Para ver os componentes Astro no navegador, o repo tem um playground em `playground/`: um site Astro mínimo, com uma página por componente, que renderiza os arquivos de `lib/` direto.
+
+```bash
+npm run playground:astro         # http://localhost:4321
+npm run playground:astro:build   # build estático das mesmas páginas
+```
+
+O menu lateral lista as páginas e, na página aberta, os exemplos dela. O botão "Mobile" mostra a mesma página num frame de 375px, para ver o comportamento mobile (drawer, select em tela cheia, calendário) sem redimensionar a janela.
+
+Para adicionar um exemplo, crie um arquivo em `playground/src/pages/components/`, importe o componente por `@components/<Nome>/index.astro` e envolva cada caso em `Example`. A página nova entra no menu sozinha. O CI faz o build do playground, então cada exemplo também é um teste de compilação.
+
 ## Testes
 
-Este projeto usa Vitest para testes unitáriåos e @testing-library/react para testes de componentes React.
+Este projeto usa Vitest para testes unitários e @testing-library/react para testes de componentes React.
 
 execute os testes com:
 

package/astro/AdBox/index.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../dist/components/AdBox/styles.css'
+
+const AD_LABEL = 'Publicidade'
+
+/**
+ * Same props as React (`className` is the plain `class`). The ad content is
+ * the default slot; every HTML attribute is forwarded to the `<aside>`.
+ */
+export type Props = HTMLAttributes<'aside'> & {
+  type?: 'content' | 'heading'
+}
+
+const { type = 'content', class: className, ...rest } = Astro.props
+---
+
+<aside
+  class:list={['au-ad-box', `au-ad-box--type-${type}`, className]}
+  aria-label={AD_LABEL}
+  {...rest}>
+  <div class="au-ad-box__heading">
+    <span class="au-ad-box__label">{AD_LABEL}</span>
+  </div>
+  <div class="au-ad-box__box">
+    <div class="au-ad-box__container"><slot /></div>
+  </div>
+</aside>

package/astro/Alert/index.astro

@@ -0,0 +1,257 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import {
+  COLOR_BRAND_CYAN_50,
+  COLOR_ERROR_50,
+  COLOR_INFO_50,
+  COLOR_NEUTRAL_60,
+  COLOR_NEUTRAL_70,
+  COLOR_SUCCESS_50,
+  COLOR_WARNING_50,
+} from '@consumidor-positivo/aurora/astro/tokens'
+import Text from '../Text/index.astro'
+import IconAlertCircle from '../icons/default/IconAlertCircle.astro'
+import IconAlertOctagon from '../icons/default/IconAlertOctagon.astro'
+import IconAlertTriangle from '../icons/default/IconAlertTriangle.astro'
+import IconCheck from '../icons/default/IconCheck.astro'
+import IconClock from '../icons/default/IconClock.astro'
+import IconInfo from '../icons/default/IconInfo.astro'
+import IconX from '../icons/default/IconX.astro'
+import '../../dist/components/Alert/styles.css'
+
+type AlertStatus =
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'timer'
+  | 'progress'
+  | 'neutral'
+
+/**
+ * Differences from React:
+ * - `title.content` and `text` are strings; for markup, use the `title` and
+ *   `text` slots instead. `customIcon` is the `icon` slot.
+ * - No callbacks. The controller emits, from the root, `au:alertaction` (the
+ *   action button was clicked), `au:countdownend` (the timer reached zero) and
+ *   `au:alertclose` (the close button was clicked, right before the alert is
+ *   removed from the page).
+ * - With `status="timer"`, the countdown settings and the action button (which
+ *   only appears once the countdown ends) travel in a `<template>` that the
+ *   controller reads and removes.
+ */
+export type Props = Omit<HTMLAttributes<'div'>, 'title'> & {
+  showIcon?: boolean
+  /**
+   * Visual state (Figma: Alerts, States). 'timer' covers the Figma
+   * Running/Resend pair: Running while the countdown runs, Resend when it
+   * ends and the action button appears.
+   */
+  status?: AlertStatus
+  type?: 1 | 2
+  orientation?: 'horizontal' | 'vertical'
+  title?: { content?: string; weight?: 'bold' | 'normal' }
+  text?: string
+  /** Label of the action button. With `status="timer"` it shows when the countdown ends. */
+  actionButton?: { content?: string }
+  closeButton?: boolean
+  /** Seconds of the 'timer' countdown. */
+  countdown?: number
+}
+
+const {
+  showIcon = true,
+  status = 'info',
+  type = 1,
+  orientation = 'horizontal',
+  title,
+  text,
+  actionButton,
+  closeButton = false,
+  countdown = 59,
+  class: className,
+  ...rest
+} = Astro.props
+
+const isTimer = status === 'timer'
+const hasTitleSlot = Astro.slots.has('title')
+const hasTextSlot = Astro.slots.has('text')
+// Same conditions as React: the wrapper shows for any `title` object, the <h4>
+// only with content, and the <p> always goes with the wrapper.
+const hasTitle = !!title?.content || hasTitleSlot
+const hasText = !!text || hasTextSlot
+const hasCustomIcon = Astro.slots.has('icon')
+---
+
+<div
+  class:list={['au-alert', `au-alert--${status}--type-${type}`, className]}
+  data-element="au-alert"
+  {...rest}>
+  <div class="au-alert__content">
+    {
+      showIcon && (
+        <span aria-hidden="true">
+          {hasCustomIcon ? (
+            <slot name="icon" />
+          ) : status === 'success' ? (
+            <IconCheck rawColor={COLOR_SUCCESS_50} />
+          ) : status === 'error' ? (
+            <IconAlertOctagon rawColor={COLOR_ERROR_50} />
+          ) : status === 'warning' ? (
+            <IconAlertTriangle rawColor={COLOR_WARNING_50} />
+          ) : status === 'progress' ? (
+            <IconInfo rawColor={COLOR_BRAND_CYAN_50} />
+          ) : status === 'neutral' ? (
+            <IconAlertCircle rawColor={COLOR_NEUTRAL_60} />
+          ) : isTimer ? (
+            <div class="au-alert__timer">
+              <IconClock rawColor={COLOR_WARNING_50} />
+              <Text
+                class="au-alert__countdown"
+                variant="body-small"
+                weight="bold"
+                role="status"
+                aria-live="polite"
+                aria-atomic="true">
+                {`${countdown}s`}
+              </Text>
+            </div>
+          ) : (
+            <IconInfo rawColor={COLOR_INFO_50} />
+          )}
+        </span>
+      )
+    }
+    <div class={`au-alert__container--${orientation}`}>
+      {
+        (!!title || hasTitleSlot || hasText) && (
+          <div>
+            {hasTitle && (
+              <h4
+                class:list={[
+                  'au-alert__title',
+                  `au-alert__title--${title?.weight}`,
+                  hasText && 'au-alert__title--with-text',
+                ]}>
+                {hasTitleSlot ? <slot name="title" /> : title?.content}
+              </h4>
+            )}
+            <p class="au-alert__support-text">
+              {hasTextSlot ? <slot name="text" /> : text}
+            </p>
+          </div>
+        )
+      }
+
+      <slot />
+
+      {
+        isTimer ? (
+          <template data-au-alert-timer data-countdown={String(countdown)}>
+            {actionButton && (
+              <button class="au-alert__action-btn" type="button">
+                {actionButton.content}
+              </button>
+            )}
+          </template>
+        ) : (
+          actionButton && (
+            <button class="au-alert__action-btn" type="button">
+              {actionButton.content}
+            </button>
+          )
+        )
+      }
+    </div>
+  </div>
+
+  {
+    closeButton && (
+      <button class="au-alert__close-btn" type="button" aria-label="Fechar">
+        <IconX rawColor={COLOR_NEUTRAL_70} />
+      </button>
+    )
+  }
+</div>
+
+<script>
+  import { elementController } from '@consumidor-positivo/aurora/astro/runtime'
+
+  const TICK_MS = 1000
+
+  elementController('au-alert', ({ root, on, emit }) => {
+    const template = root.querySelector<HTMLTemplateElement>(
+      ':scope > .au-alert__content > [class^="au-alert__container--"] > template[data-au-alert-timer]',
+    )
+    const container = template?.parentElement ?? null
+    const countdown = Number(template?.dataset.countdown ?? 0)
+    // Detached while the countdown runs, like React, which does not render
+    // the button until it ends.
+    const actionButton =
+      (template?.content.firstElementChild as HTMLButtonElement | null) ?? null
+    const counter = root.querySelector<HTMLElement>(
+      ':scope > .au-alert__content > span > .au-alert__timer > .au-alert__countdown',
+    )
+    const timerBox = counter?.parentElement ?? null
+    template?.remove()
+
+    let timeLeft = countdown
+    let timer: ReturnType<typeof setInterval> | undefined
+
+    function setFinished(isFinished: boolean) {
+      if (counter && timerBox) {
+        if (isFinished) counter.remove()
+        else if (!counter.isConnected) timerBox.appendChild(counter)
+      }
+      if (actionButton && container) {
+        if (!isFinished) actionButton.remove()
+        else if (!actionButton.isConnected) container.appendChild(actionButton)
+      }
+    }
+
+    function startCountdown() {
+      clearInterval(timer)
+      if (counter) counter.textContent = `${timeLeft}s`
+      // React never counts down from zero (or less): it stays on "0s" with
+      // no action button.
+      if (timeLeft <= 0) return
+
+      timer = setInterval(() => {
+        timeLeft -= 1
+        if (timeLeft > 0) {
+          if (counter) counter.textContent = `${timeLeft}s`
+          return
+        }
+
+        clearInterval(timer)
+        setFinished(true)
+        emit('au:countdownend')
+      }, TICK_MS)
+    }
+
+    on('click', (event) => {
+      const target = event.target as Element | null
+      // A nested Alert in the default slot handles its own buttons.
+      if (target?.closest('.au-alert') !== root) return
+
+      if (target.closest('.au-alert__action-btn')) {
+        event.preventDefault()
+        if (template) {
+          timeLeft = countdown
+          setFinished(false)
+          startCountdown()
+        }
+        emit('au:alertaction')
+        return
+      }
+
+      if (target.closest('.au-alert__close-btn')) {
+        clearInterval(timer)
+        emit('au:alertclose')
+        root.remove()
+      }
+    })
+
+    if (template) startCountdown()
+  })
+</script>

package/astro/BadgeInfo/index.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import IconInfo from '../icons/default/IconInfo.astro'
+import {
+  COLOR_BRAND_CYAN_50,
+  COLOR_ERROR_50,
+  COLOR_INFO_50,
+  COLOR_NEUTRAL_70,
+  COLOR_SUCCESS_50,
+  COLOR_WARNING_50,
+} from '@consumidor-positivo/aurora/astro/tokens'
+import '../../dist/components/BadgeInfo/styles.css'
+
+// The same tokens React passes as `rawColor`.
+const STATUS_COLOR = {
+  success: COLOR_SUCCESS_50,
+  error: COLOR_ERROR_50,
+  warning: COLOR_WARNING_50,
+  info: COLOR_INFO_50,
+  progress: COLOR_BRAND_CYAN_50,
+  neutral: COLOR_NEUTRAL_70,
+}
+
+/**
+ * The React `customIcon` prop is the `icon` slot here: when filled, it replaces
+ * the default `IconInfo`. React `children` is the default slot, rendered after
+ * the content. Every HTML attribute is forwarded to the root `div`.
+ */
+export type Props = Omit<HTMLAttributes<'div'>, 'color'> & {
+  status: 'info' | 'success' | 'error' | 'warning' | 'progress' | 'neutral'
+  color?: 'primary' | 'secondary'
+  text: string
+}
+
+const { status, color = 'primary', text, class: className, ...rest } = Astro.props
+---
+
+<div
+  class:list={[
+    'au-badgeInfo',
+    `au-badgeInfo--${status}`,
+    `au-badgeInfo--color-${color}`,
+    className,
+  ]}
+  {...rest}>
+  <div class="au-badgeInfo__content">
+    <div class="au-badgeInfo__content-icon" aria-hidden="true">
+      <slot name="icon">
+        <IconInfo rawColor={STATUS_COLOR[status]} />
+      </slot>
+    </div>
+    <p class="au-badgeInfo__content-support-text">{text}</p>
+  </div>
+  <slot />
+</div>

package/astro/BadgeState/index.astro

@@ -0,0 +1,79 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import IconAlertOctagon from '../icons/default/IconAlertOctagon.astro'
+import IconAlertTriangle from '../icons/default/IconAlertTriangle.astro'
+import IconCheck from '../icons/default/IconCheck.astro'
+import IconInfo from '../icons/default/IconInfo.astro'
+import IconMoreHorizontal from '../icons/default/IconMoreHorizontal.astro'
+import {
+  COLOR_BRAND_CYAN_50,
+  COLOR_ERROR_50,
+  COLOR_INFO_50,
+  COLOR_NEUTRAL_60,
+  COLOR_SUCCESS_50,
+  COLOR_WARNING_50,
+} from '@consumidor-positivo/aurora/astro/tokens'
+import '../../dist/components/BadgeState/styles.css'
+
+// The same tokens React passes as `rawColor`.
+const STATUS_MAP = {
+  success: { label: 'Sucesso', icon: IconCheck, color: COLOR_SUCCESS_50 },
+  error: { label: 'Erro', icon: IconAlertOctagon, color: COLOR_ERROR_50 },
+  warning: { label: 'Atenção', icon: IconAlertTriangle, color: COLOR_WARNING_50 },
+  info: { label: 'Informação', icon: IconInfo, color: COLOR_INFO_50 },
+  support: { label: 'Mais informações', icon: IconMoreHorizontal, color: COLOR_BRAND_CYAN_50 },
+  neutral: { label: 'Neutro', icon: IconMoreHorizontal, color: COLOR_NEUTRAL_60 },
+}
+
+/**
+ * Same props as React, minus `icon` (declared but never rendered there). React
+ * `children` is the default slot, rendered after the content. Every HTML
+ * attribute is forwarded to the root `div`.
+ */
+export type Props = HTMLAttributes<'div'> & {
+  status: 'info' | 'success' | 'error' | 'warning' | 'support' | 'neutral'
+  /** Round border, for a number badge. */
+  isNumberBadge?: boolean
+  variant?: 'regular' | 'strong'
+  text?: string
+  /** Renders only the status icon, labelled for assistive tech. */
+  iconOnly?: boolean
+}
+
+const {
+  status,
+  isNumberBadge = false,
+  variant = 'regular',
+  text,
+  iconOnly = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { label, icon: StatusIcon, color } = STATUS_MAP[status]
+---
+
+<div
+  class:list={[
+    'au-badgeState',
+    `au-badgeState--${status}`,
+    isNumberBadge && 'au-badgeState--border-circle',
+    iconOnly && 'au-badgeState--icon-only',
+    `au-badgeState--variant-${variant}`,
+    className,
+  ]}
+  aria-label={iconOnly ? label : undefined}
+  {...rest}>
+  <div class="au-badgeState__content">
+    {
+      iconOnly ? (
+        <span aria-hidden="true">
+          <StatusIcon rawColor={color} />
+        </span>
+      ) : (
+        <p class="au-badgeState__content-support-text">{text}</p>
+      )
+    }
+  </div>
+  <slot />
+</div>

package/astro/Button/index.astro

@@ -0,0 +1,93 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import IconLoader from '../icons/default/IconLoader.astro'
+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'
+  /**
+   * Shows the spinner in place of the content and disables the button.
+   * As in React, with `as="a"` it only adds the class: the link keeps its
+   * content and stays clickable.
+   */
+  loading?: boolean
+  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',
+  loading = false,
+  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',
+    loading && 'au-btn--loading',
+    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 || loading) ? true : undefined}
+  {...rest}>
+  {!isAnchor && loading ? <IconLoader /> : <slot>Button component</slot>}
+</Tag>

package/astro/Card/Container/index.astro

@@ -0,0 +1,44 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../../dist/components/Card/styles.css'
+
+/**
+ * Same props as React. `gap` and `width` are inline `style`, written like
+ * React writes them (an unset one comes out as `undefinedpx`, which the
+ * browser drops), so a `style` passed here is ignored. Every HTML attribute is forwarded.
+ */
+export type Props = Omit<HTMLAttributes<'div'>, 'style'> & {
+  direction?: 'column' | 'row'
+  alignItems?: 'center' | 'start'
+  justifyContent?: 'center' | 'space-between'
+  /** Gap in px. */
+  gap?: number
+  /** Width in px. */
+  width?: number
+}
+
+const {
+  direction,
+  alignItems,
+  justifyContent,
+  gap,
+  width,
+  class: className,
+  ...rest
+} = Astro.props
+
+const style = `gap:${gap}px;width:${width}px`
+---
+
+<div
+  class:list={[
+    'au-card__container',
+    direction && `au-card__container--direction-${direction}`,
+    alignItems && `au-card__container--align-items-${alignItems}`,
+    justifyContent && `au-card__container--justify-content-${justifyContent}`,
+    className,
+  ]}
+  {...rest}
+  style={style}>
+  <slot />
+</div>

package/astro/Card/Emphasis/index.astro

@@ -0,0 +1,39 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Text from '../../Text/index.astro'
+import '../../../dist/components/Card/styles.css'
+
+export type CardEmphasisItem = { title: string; description?: string }
+
+/**
+ * Same props as React. `height` / `maxHeight` are inline `style`, written
+ * like React writes them (an unset one comes out as `undefinedpx`, which the
+ * browser drops), so a `style` passed here is ignored. Every HTML attribute is forwarded.
+ */
+export type Props = Omit<HTMLAttributes<'div'>, 'style'> & {
+  content: CardEmphasisItem[]
+  /** Height in px. */
+  height?: number
+  /** Max height in px. */
+  maxHeight?: number
+}
+
+const { content, height, maxHeight, class: className, ...rest } = Astro.props
+
+const style = `height:${height}px;max-height:${maxHeight}px`
+---
+
+<div class:list={['au-card__emphasis', className]} {...rest} style={style}>
+  {
+    content?.map((item) => (
+      <div class="au-card__emphasis-container">
+        <Text variant="body-small" color="secondary">
+          {item.title}
+        </Text>
+        <Text variant="body-small" weight="semibold">
+          {item.description}
+        </Text>
+      </div>
+    ))
+  }
+</div>