@usefidel/design-system 0.16.0 → 0.17.0

package/dist/index.css

@@ -1915,6 +1915,103 @@
   filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.13));
 }
 
+/* src/components/Callout/callout.css */
+.fds-callout {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  border: 1px solid var(--fds-callout-border);
+  border-radius: var(--radius-lg, 12px);
+  background: var(--fds-callout-bg);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  color: var(--color-text, #171717);
+}
+.fds-callout__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: flex-start;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md, 8px);
+  background: var(--color-bg, #ffffff);
+  color: var(--fds-callout-icon);
+}
+.fds-callout__icon > svg {
+  width: 16px;
+  height: 16px;
+}
+.fds-callout__body {
+  flex: 1;
+  min-width: 0;
+}
+.fds-callout__title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  margin: 0;
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  font-weight: var(--font-weight-semibold, 600);
+}
+.fds-callout__aside {
+  display: inline-flex;
+}
+.fds-callout__text {
+  margin-top: 2px;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--color-text-secondary, #525252);
+}
+.fds-callout__action {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+}
+@media (max-width: 480px) {
+  .fds-callout {
+    flex-wrap: wrap;
+  }
+  .fds-callout__action {
+    flex-basis: 100%;
+    padding-left: 46px;
+  }
+}
+.fds-callout--neutral {
+  --fds-callout-bg: var(--color-surface-subtle, #fafafa);
+  --fds-callout-border: var(--color-border, #e5e5e5);
+  --fds-callout-icon: var(--color-text-secondary, #525252);
+}
+.fds-callout--accent {
+  --fds-callout-bg: var(--color-accent-subtle, #fff7ed);
+  --fds-callout-border: var(--color-accent-muted, #fdba74);
+  --fds-callout-icon: var(--color-accent, #ea580c);
+}
+.fds-callout--info {
+  --fds-callout-bg: var(--color-info-surface, #eff6ff);
+  --fds-callout-border: var(--color-info, #93c5fd);
+  --fds-callout-icon: var(--color-info-strong, #2563eb);
+}
+.fds-callout--success {
+  --fds-callout-bg: var(--color-success-bg, #f0fdf4);
+  --fds-callout-border: var(--color-success, #86efac);
+  --fds-callout-icon: var(--color-success-text, #15803d);
+}
+.fds-callout--warning {
+  --fds-callout-bg: var(--color-warning-bg, #fffbeb);
+  --fds-callout-border: var(--color-warning-border, #fcd34d);
+  --fds-callout-icon: var(--color-warning-text, #92400e);
+}
+.fds-callout--danger {
+  --fds-callout-bg: var(--color-error-bg, #fef2f2);
+  --fds-callout-border: var(--color-error-border, #fecaca);
+  --fds-callout-icon: var(--color-destructive, #eb2d2d);
+}
+
 /* src/components/Skeleton/skeleton.css */
 .fds-skeleton {
   display: block;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link'
 /** High-contrast near-black, for a page's main create action ("New comparison"). */
@@ -26,6 +26,25 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare function Button({ variant, size, leftIcon, rightIcon, type, className, children, ...rest }: ButtonProps): react.JSX.Element;
 
+interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Where the link goes. */
+    href: string;
+    /** Visual style. @default 'primary' */
+    variant?: ButtonVariant;
+    /** Size step. @default 'medium' */
+    size?: ButtonSize;
+    /** Optional leading icon (rendered in a 20px slot). */
+    leftIcon?: ReactNode;
+    /** Optional trailing icon (rendered in a 20px slot). */
+    rightIcon?: ReactNode;
+}
+/**
+ * A link that looks like a Button. Use it when the action navigates (to a
+ * page or another site) rather than doing something on this page, so the
+ * browser keeps link behaviour: open in a new tab, copy link, status bar URL.
+ */
+declare function ButtonLink({ variant, size, leftIcon, rightIcon, className, children, ...rest }: ButtonLinkProps): react.JSX.Element;
+
 interface MismatchProperty {
     /** Property label, e.g. "color", "font-size". */
     label: string;
@@ -536,6 +555,28 @@ declare function StackedCardsIllustration({ className }: {
     className?: string;
 }): react.JSX.Element;
 
+/** Colour role. `accent` is the brand tint, for a prompt to act (an upgrade, a next step). */
+type CalloutTone = Tone | 'accent';
+interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Colour role. @default 'neutral' */
+    tone?: CalloutTone;
+    /** Leading icon, drawn at 16px in a 32px tile. */
+    icon?: ReactNode;
+    /** One-line heading. */
+    title: ReactNode;
+    /** Shown after the title, e.g. a Badge. */
+    titleAside?: ReactNode;
+    /** Supporting text under the title. */
+    children?: ReactNode;
+    /** Trailing action(s), e.g. a ButtonLink. Moves under the text on phones. */
+    action?: ReactNode;
+}
+/**
+ * Fidel design-system Callout: a tinted row that tells the reader something
+ * about the page they are on and, optionally, what to do about it.
+ */
+declare function Callout({ tone, icon, title, titleAside, children, action, className, ...rest }: CalloutProps): react.JSX.Element;
+
 type SkeletonShape = 'rect' | 'text' | 'circle';
 interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /** rect: a block. text: line(s) at text height. circle: an avatar or icon. @default 'rect' */
@@ -562,4 +603,4 @@ interface SkeletonGroupProps extends HTMLAttributes<HTMLDivElement> {
 /** Wraps a skeleton layout and announces it once as loading (role="status"). */
 declare function SkeletonGroup({ label, className, children, ...rest }: SkeletonGroupProps): react.JSX.Element;
 
-export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, TabNav, type TabNavProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
+export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, TabNav, type TabNavProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link'
 /** High-contrast near-black, for a page's main create action ("New comparison"). */
@@ -26,6 +26,25 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare function Button({ variant, size, leftIcon, rightIcon, type, className, children, ...rest }: ButtonProps): react.JSX.Element;
 
+interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Where the link goes. */
+    href: string;
+    /** Visual style. @default 'primary' */
+    variant?: ButtonVariant;
+    /** Size step. @default 'medium' */
+    size?: ButtonSize;
+    /** Optional leading icon (rendered in a 20px slot). */
+    leftIcon?: ReactNode;
+    /** Optional trailing icon (rendered in a 20px slot). */
+    rightIcon?: ReactNode;
+}
+/**
+ * A link that looks like a Button. Use it when the action navigates (to a
+ * page or another site) rather than doing something on this page, so the
+ * browser keeps link behaviour: open in a new tab, copy link, status bar URL.
+ */
+declare function ButtonLink({ variant, size, leftIcon, rightIcon, className, children, ...rest }: ButtonLinkProps): react.JSX.Element;
+
 interface MismatchProperty {
     /** Property label, e.g. "color", "font-size". */
     label: string;
@@ -536,6 +555,28 @@ declare function StackedCardsIllustration({ className }: {
     className?: string;
 }): react.JSX.Element;
 
+/** Colour role. `accent` is the brand tint, for a prompt to act (an upgrade, a next step). */
+type CalloutTone = Tone | 'accent';
+interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Colour role. @default 'neutral' */
+    tone?: CalloutTone;
+    /** Leading icon, drawn at 16px in a 32px tile. */
+    icon?: ReactNode;
+    /** One-line heading. */
+    title: ReactNode;
+    /** Shown after the title, e.g. a Badge. */
+    titleAside?: ReactNode;
+    /** Supporting text under the title. */
+    children?: ReactNode;
+    /** Trailing action(s), e.g. a ButtonLink. Moves under the text on phones. */
+    action?: ReactNode;
+}
+/**
+ * Fidel design-system Callout: a tinted row that tells the reader something
+ * about the page they are on and, optionally, what to do about it.
+ */
+declare function Callout({ tone, icon, title, titleAside, children, action, className, ...rest }: CalloutProps): react.JSX.Element;
+
 type SkeletonShape = 'rect' | 'text' | 'circle';
 interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /** rect: a block. text: line(s) at text height. circle: an avatar or icon. @default 'rect' */
@@ -562,4 +603,4 @@ interface SkeletonGroupProps extends HTMLAttributes<HTMLDivElement> {
 /** Wraps a skeleton layout and announces it once as loading (role="status"). */
 declare function SkeletonGroup({ label, className, children, ...rest }: SkeletonGroupProps): react.JSX.Element;
 
-export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, TabNav, type TabNavProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
+export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, TabNav, type TabNavProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };