✨ Chat: ny small-variant, justert design, forbedret UU

[HalvorHaugan]

Endringer:

• Ny small-variant som har mindre font på selve meldingsteksten samt mindre padding i boblene
• Gjort avatar valgfritt
• Forbedret UU
  • Gjort om navn+timestamp til <h3> slik at det er enklere å hoppe mellom meldinger
  • Lagt til aria-hidden på avatar for å unngå at eventuelle initialer blir lest opp uten kontekst. (La også merke til at det ble lest opp som ord, og ikke bokstav for bokstav.) Er litt usikker på dette siden name er valgfritt, så må iallfall skrive i dokumentasjonen at man ikke må basere seg på kun avatar (og andre visuelle hint) for å kommunisere avsender. Kunne ev. gjort name obligatorisk, men det er jo breaking change. Et annet alternativ er å bare sette aria-hidden på avatar hvis name er satt.
• Justert CSS ihht. Figma

Spørsmål/avklaringer:

• Er det ok å fjerne klassenavn på nesta elementer, eller er det "breaking change"? Burde de legges til i deprecations.ts?
• Hva synes dere om måten jeg anbefaler hvilke farger man bør bruke? Fant ikke noe måte å gjøre det med TS/jsdoc... Forslag?

TODO:

• Justere (tekst)størrelsen på avatar for å få plass til tre bokstaver (venter på Linda)
• Oppdatere dokumentasjonen med anbefalte farger og at avatar har aria-hidden
• Run yarn changeset for version and changelog generation

[changeset-bot]

🦋 Changeset detected

Latest commit: e00c530

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@navikt/ds-css	Minor
@navikt/ds-react	Minor
@navikt/aksel-stylelint	Minor
@navikt/aksel	Minor
@navikt/ds-tokens	Minor
@navikt/ds-tailwind	Minor
@navikt/aksel-icons	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Endringer til review: 8

81b9b3429 | 45 komponenter | 270 stories

[KenAJoh]

Tenker måten å oppmuntre til riktig fargebruk funker fint 👌 Kan også legge til flere eksempler i JSdoc, f.eks

/**
 * A component for communicating dialogs between two parties.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
 * @see 🏷️ {@link ChatProps}
 *
 * @example
 * ```jsx
 * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
 *   <Chat.Bubble>Hello!</Chat.Bubble>
 *   <Chat.Bubble>How can I help you?</Chat.Bubble>
 * </Chat>
 * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
 *   <Chat.Bubble>Hi there!</Chat.Bubble>
 * </Chat>
 * ```
 * @example
 * ```jsx
 * // With recommended colors
 * <Chat 
 *  avatar="A" 
 *  name="Alice" 
 *  timestamp="01.01.21 14:00" 
 *  backgroundColor="var(--a-surface-info-subtle)" 
 *  avatarBgColor="var(--a-surface-info-subtle)"
 * >
 *   <Chat.Bubble>Hello!</Chat.Bubble>
 *   <Chat.Bubble>How can I help you?</Chat.Bubble>
 * </Chat>
 * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
 *   <Chat.Bubble>Hi there!</Chat.Bubble>
 * </Chat>
 * ```
 */

[KenAJoh]

En tanke: Siden vi nå anbefaler 3 spesifikke varianter med subtle, info og default (neutral), bør dette heller være en prop på selve chat-komponenten?

/**
	default "subtle"
*/
variant?: "subtle" | "info" | "neutral"

backgroundColor og avatarBgColors kan fortsette å level/fungere, men tages med @deprecated med jsdoc

[HalvorHaugan]

En tanke: Siden vi nå anbefaler 3 spesifikke varianter med subtle, info og default (neutral), bør dette heller være en prop på selve chat-komponenten?

/**
	default "subtle"
*/
variant?: "subtle" | "info" | "neutral"

backgroundColor og avatarBgColors kan fortsette å level/fungere, men tages med @deprecated med jsdoc

Var inne på tanken selv. Er for så vidt enig, men burde kanskje avklares med design?

[KenAJoh]

LGTM