@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.40

package/components/InputNumber/InputNumber.d.ts

@@ -0,0 +1,110 @@
+import { InputHTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { InputSize } from '../Input/Input.utils';
+export interface InputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size' | 'value'> {
+    /** Unique id for the input. */
+    id: string;
+    /** Label text displayed above the input. */
+    label: string;
+    /** Text used for assistive technologies when the value changes.
+     * @default 'Value changed to'
+     */
+    announcementText?: string;
+    /** Disables the input, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Decrease amount button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the decrease button.
+     * (default) 'Decrease'
+     *
+     * `tooltip`: Tooltip text for the decrease button.
+     */
+    decreaseAmountButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+        tooltip?: string;
+    };
+    /** Hides the input label, can be responsive.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Short descriptive text displayed beneath the label. */
+    hint?: string;
+    /** Increase amount button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the increase button.
+     * (default) 'Increase'
+     *
+     * `tooltip`: Tooltip text for the increase button.
+     */
+    increaseAmountButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+        tooltip?: string;
+    };
+    /** Marks the input as invalid, typically used for form validation.
+     * @default false
+     */
+    invalid?: boolean;
+    /** The maximum value for the input.
+     * @default 100
+     */
+    max?: number | string;
+    /** The minimum value for the input.
+     * @default 0
+     */
+    min?: number | string;
+    /** The interval between legal numbers of the input.
+     * @default 1
+     */
+    step?: number | string;
+    /** Text displayed as a prefix inside the input, maximum 8 characters. */
+    prefix?: string;
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Enables the readonly state of the input.
+     * @default false
+     */
+    readonly?: boolean;
+    /** Indicates that the input is required.
+     * @default false
+     */
+    required?: boolean;
+    /** Text displayed as a suffix inside the input, maximum 5 characters. */
+    suffix?: string;
+    /** Defines a system feedback message, shown when `invalid={true}`. */
+    systemFeedback?: string;
+    /** Size of the input.
+     * @default 'medium'
+     */
+    size?: InputSize;
+    /** Value of the input. */
+    value?: InputHTMLAttributes<HTMLInputElement>['value'];
+}
+/**
+ * The `<DSInputNumber />` component is a versatile input field that allows users to easily enter a value and decrease or increase it as needed.
+ * It comes in two sizes (medium & small) and supports various customizations including a prefix and suffix.
+ *
+ * Next to the input field, there are two buttons to increase or decrease the input value.
+ *
+ * Design in Figma: [Input Number](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=2141-6769&t=UBsmFURFENnuYSW1-11)
+ */
+export declare const DSInputNumber: import('react').ForwardRefExoticComponent<InputNumberProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/InputNumber/InputNumber.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/InputNumber/InputNumber.utils.d.ts

@@ -0,0 +1,13 @@
+import { InputNumberProps } from './InputNumber';
+type ValidationProps = Pick<InputNumberProps, 'id' | 'label' | 'prefix' | 'suffix' | 'hideLabel' | 'popoverContent'>;
+export declare const isValidValue: (value: string | number | readonly string[] | undefined | null) => boolean;
+/**
+ * Validates the given properties of the DSInputNumber component for common configuration errors.
+ * This function is intended to be used in development mode to provide developers with
+ * warnings about potential misuse of the component.
+ *
+ * @param validationProps - The subset of DSInputNumber properties to validate. This includes
+ *                          properties related to the prefix, suffix, icons and action button of the input.
+ */
+export declare const validateInputNumberProps: ({ id, label, prefix, suffix, hideLabel, popoverContent, }: ValidationProps) => void;
+export {};

package/components/InputNumber/InputNumber.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/InputPassword/InputPassword.d.ts

@@ -1,36 +1,72 @@
 import { InputHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { InputSize } from '../Input/Input.utils';
-
 export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
-    /** Unique id for the input */
+    /** Unique id for the input. */
     id: string;
-    /** Label text displayed above the input */
+    /** Label text displayed above the input. */
     label: string;
-    /** The value of autocomplete to use for the input */
-    autocomplete?: 'new-password' | 'current-password' | 'off';
-    /** Disables the input, preventing user interaction */
+    /** The value of autoComplete to use for the input.
+     * @default 'new-password'
+     */
+    autoComplete?: 'new-password' | 'current-password' | 'off';
+    /** Disables the input, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the input label, can be responsive
+    /** Hides the input label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Short descriptive text displayed beneath the label */
+    /** Short descriptive text displayed beneath the label. */
     hint?: string;
-    /** Marks the input as invalid, typically used for form validation */
+    /** Marks the input as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Enables the readonly state of the input */
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Enables the readonly state of the input.
+     * @default false
+     */
     readonly?: boolean;
-    /** Indicates that the input is required */
+    /** Indicates that the input is required.
+     * @default false
+     */
     required?: boolean;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Size of the input */
+    /** Size of the input.
+     * @default 'medium'
+     */
     size?: InputSize;
-    /** The show password button text label (for assistive technologies) */
-    showPasswordText?: string;
-    /** The hide password button text label (for assistive technologies) */
-    hidePasswordText?: string;
+    /** Toggle password visibility button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `hidePasswordText`: The hide password button text label (for assistive technologies).
+     * (default) 'Hide password'
+     *
+     * `showPasswordText`: The show password button text label (for assistive technologies).
+     * (default) 'Show password'
+     */
+    togglePasswordVisibilityButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        hidePasswordText?: string;
+        showPasswordText?: string;
+    };
 }
 /**
  * The `<DSInputPassword />` component is an input field that allows users to enter and edit passwords.
@@ -38,5 +74,7 @@ export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputEl
  * a hint and a system feedback message.
  *
  * The user can toggle the visibility of the password by clicking on the action button.
+ *
+ * Design in Figma: [Input Password](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=2141-6655&t=UBsmFURFENnuYSW1-11)
  */
-export declare const DSInputPassword: ({ id, label, autocomplete, className, disabled, hidePasswordText, hint, hideLabel, invalid, readonly, required, showPasswordText, size, systemFeedback, ...rest }: InputPasswordProps) => JSX.Element;
+export declare const DSInputPassword: import('react').ForwardRefExoticComponent<InputPasswordProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/InputPassword/InputPassword.utils.d.ts

@@ -1,6 +1,5 @@
 import { InputPasswordProps } from './InputPassword';
-
-type ValidationProps = Pick<InputPasswordProps, 'id' | 'label'>;
+type ValidationProps = Pick<InputPasswordProps, 'id' | 'label' | 'hideLabel' | 'popoverContent'>;
 /**
  * Validates the given properties of the DSInputPassword component for common configuration errors.
  * This function is intended to be used in development mode to provide developers with
@@ -9,5 +8,5 @@ type ValidationProps = Pick<InputPasswordProps, 'id' | 'label'>;
  * @param validationProps - The subset of DSInputPassword properties to validate. This includes
  *                          id and label.
  */
-export declare const validateInputPasswordProps: ({ id, label }: ValidationProps) => void;
+export declare const validateInputPasswordProps: ({ id, label, hideLabel, popoverContent, }: ValidationProps) => void;
 export {};

package/components/InputSearch/InputSearch.d.ts

@@ -1,38 +1,73 @@
 import { InputHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { InputSize } from '../Input/Input.utils';
-
 export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
-    /** Unique id for the input */
+    /** Unique id for the input. */
     id: string;
-    /** Label text displayed above the input */
+    /** Label text displayed above the input. */
     label: string;
-    /** Accessibility label for the clear button */
+    /** Accessibility label for the clear button.
+     * @default 'Clear search field'
+     */
     clearButtonLabel?: string;
-    /** Disables the input, preventing user interaction */
+    /** Disables the input, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the input label, can be responsive
+    /** Hides the input label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Short descriptive text displayed beneath the label */
+    /** Short descriptive text displayed beneath the label. */
     hint?: string;
-    /** Marks the input as invalid, typically used for form validation */
+    /** Marks the input as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Enables the readonly state of the input */
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Enables the readonly state of the input.
+     * @default false
+     */
     readonly?: boolean;
-    /** Indicates that the input is required */
+    /** Indicates that the input is required.
+     * @default false
+     */
     required?: boolean;
-    /** Accessibility label for the submit button */
-    submitButtonLabel?: string;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Submit button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the submit button.
+     *  (default) 'Search'
+     *
+     * `onClick`: Callback function called when the submit button is clicked.
+     */
+    submitButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    };
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Size of the input */
+    /** Size of the input.
+     * @default 'medium'
+     */
     size?: InputSize;
-    /** Value of the input */
+    /** Value of the input. */
     value?: string;
-    /** Callback function triggered when the submit button is clicked */
-    submitButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**
  * The `<DSInputSearch />` component can be used as a dedicated search field input.
@@ -41,5 +76,7 @@ export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElem
  *
  * A search button is always available on the right to submit the search request.
  * Additionally when the input is filled, a button to clear the input value becomes visible.
+ *
+ * Design in Figma: [Input Search](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=2141-6712&t=UBsmFURFENnuYSW1-11)
  */
-export declare const DSInputSearch: ({ id, label, className, clearButtonLabel, disabled, hint, hideLabel, invalid, readonly, required, size, submitButtonLabel, systemFeedback, value, submitButtonOnClick, onChange, ...rest }: InputSearchProps) => JSX.Element;
+export declare const DSInputSearch: import('react').ForwardRefExoticComponent<InputSearchProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/InputSearch/InputSearch.utils.d.ts

@@ -1,6 +1,5 @@
 import { InputSearchProps } from './InputSearch';
-
-type ValidationProps = Pick<InputSearchProps, 'id' | 'label'>;
+type ValidationProps = Pick<InputSearchProps, 'id' | 'label' | 'hideLabel' | 'popoverContent'>;
 /**
  * Validates the given properties of the DSInputSearch component for common configuration errors.
  * This function is intended to be used in development mode to provide developers with
@@ -9,7 +8,7 @@ type ValidationProps = Pick<InputSearchProps, 'id' | 'label'>;
  * @param validationProps - The subset of DSInputSearch properties to validate. This includes
  *                          id and label.
  */
-export declare const validateInputSearchProps: ({ id, label }: ValidationProps) => void;
+export declare const validateInputSearchProps: ({ id, label, hideLabel, popoverContent, }: ValidationProps) => void;
 /**
  * Determines whether the specified HTMLElement is within a form element.
  *

package/components/Link/Link.d.ts

@@ -1,50 +1,18 @@
-import { BreakpointCustomizable, IconName, LinkTarget, SelectedAriaAttributes, Theme } from '../../types';
-import { IconProps } from '../Icon/Icon';
-import { LinkAriaAttribute, LinkIconPosition, LinkReferrerPolicy, LinkRel, LinkSize, LinkVariant } from './Link.utils';
-
-export interface CommonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    /** ARIA attributes to enhance accessibility
-     *  `{'aria-label'? string;`
-     *  `'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';`
-     *  `'aria-labelledby'?: string;}`
-     */
-    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
-    /** Identifier for analytics tracking */
-    dataTrackingid?: string;
-    /** Specifies that the target will be downloaded and opens native browser download dialog */
-    download?: string;
-    /** Defines the URL to link to */
-    href?: string;
-    /** Name of the icon to display */
-    iconName?: IconName;
-    /** The position of the icon */
-    iconPosition?: LinkIconPosition;
-    /** URL or path for a custom icon */
-    iconSource?: IconProps['source'];
-    /** Defines the referrer information send with the link */
-    referrerPolicy?: LinkReferrerPolicy;
-    /** Defines the rel attribute */
-    rel?: LinkRel;
-    /** The target of the link */
-    target?: LinkTarget;
-    /** Defines the theme */
-    theme?: Theme;
-}
+import { CommonLinkProps } from '../LinkButton/LinkButton';
+import { LinkVariant } from './Link.utils';
 export interface LinkProps extends CommonLinkProps {
-    /** Content within the link */
+    /** Content within the link. */
     children: React.ReactNode;
-    /** Hides the link label, can be responsive
-     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+    /** Sets an underline. */
+    active?: boolean;
+    /** Visual style variant of the Link.
+     * @default 'neutral'
      */
-    hideLabel?: BreakpointCustomizable<boolean>;
-    /** Aligns `variant='ghost'` with text */
-    isFlush?: boolean;
-    /** Size of the link */
-    size?: LinkSize;
-    /** Visual style variant of the link */
     variant?: LinkVariant;
 }
 /**
- * Use the Link component when you want the users to navigate to another internal or external page.
+ * Use Link when you want the users to navigate to another internal or external page.
+ *
+ * Design in Figma: [Link](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-7210&t=UBsmFURFENnuYSW1-11)
  * */
-export declare const DSLink: ({ children, aria, className, dataTrackingid, download, hideLabel, href, iconName, iconPosition, iconSource, isFlush, referrerPolicy, rel, size, target, theme, variant, ...rest }: LinkProps) => JSX.Element;
+export declare const DSLink: import('react').ForwardRefExoticComponent<LinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/components/Link/Link.utils.d.ts

@@ -1,8 +1,2 @@
-export declare const LINK_SIZE: readonly ["medium", "small"];
-export type LinkSize = typeof LINK_SIZE[number];
-export declare const LINK_VARIANT: readonly ["filled", "highlight", "outline", "ghost"];
-export type LinkVariant = typeof LINK_VARIANT[number];
-export type LinkIconPosition = 'left' | 'right';
-export type LinkRel = 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
-export type LinkReferrerPolicy = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
-export type LinkAriaAttribute = 'aria-label' | 'aria-current' | 'aria-labelledby';
+export declare const LINK_VARIANT: readonly ["neutral", "highlight"];
+export type LinkVariant = (typeof LINK_VARIANT)[number];

package/components/LinkButton/LinkButton.d.ts

@@ -0,0 +1,71 @@
+import { BreakpointCustomizable, IconName, LinkTarget, SelectedAriaAttributes, Theme } from '../../types';
+import { IconProps } from '../Icon/Icon';
+import { LinkButtonAriaAttribute, LinkButtonIconPosition, LinkButtonReferrerPolicy, LinkButtonRel, LinkButtonSize, LinkButtonVariant } from './LinkButton.utils';
+export interface CommonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** ARIA attributes to enhance accessibility.
+     *  `{'aria-label'? string;`
+     *  `'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';`
+     *  `'aria-labelledby'?: string;}`
+     */
+    aria?: SelectedAriaAttributes<LinkButtonAriaAttribute>;
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
+    /** Specifies that the target will be downloaded and opens native browser download dialog. */
+    download?: string;
+    /** Defines the URL to link to. */
+    href?: string;
+    /** Name of the icon to display. */
+    iconName?: IconName;
+    /** The position of the icon.
+     * @default 'left'
+     */
+    iconPosition?: LinkButtonIconPosition;
+    /** URL or path for a custom icon. */
+    iconSource?: IconProps['source'];
+    /** Defines the referrer information send with the link. */
+    referrerPolicy?: LinkButtonReferrerPolicy;
+    /** Defines the rel attribute. */
+    rel?: LinkButtonRel;
+    /** The target of the link.
+     * @default '_self'
+     */
+    target?: LinkTarget;
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+    /** Tooltip content. */
+    tooltip?: string;
+}
+export interface LinkButtonProps extends CommonLinkProps {
+    /** Content within the link. */
+    children: React.ReactNode;
+    /** Hides the link label, can be responsive.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Aligns `variant='ghost'` with text.
+     * @default false
+     */
+    isFlush?: boolean;
+    /** Size of the link.
+     * @default 'medium'
+     */
+    size?: LinkButtonSize;
+    /** Stretches the link over the parent's width.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    stretched?: BreakpointCustomizable<boolean>;
+    /** Visual style variant of the link.
+     * @default 'filled'
+     */
+    variant?: LinkButtonVariant;
+}
+/**
+ * Use the Link component when you want the users to navigate to another internal or external page.
+ *
+ * Design in Figma: [Link Button](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=162-126)
+ * */
+export declare const DSLinkButton: import('react').ForwardRefExoticComponent<LinkButtonProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/components/LinkButton/LinkButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/LinkButton/LinkButton.utils.d.ts

@@ -0,0 +1,24 @@
+import { LinkButtonProps } from './LinkButton';
+export declare const LINK_BUTTON_SIZE: readonly ["medium", "small"];
+export type LinkButtonSize = (typeof LINK_BUTTON_SIZE)[number];
+export declare const LINK_BUTTON_VARIANT: readonly ["filled", "highlight", "outline", "ghost", "navigation"];
+export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANT)[number];
+export type LinkButtonIconPosition = 'left' | 'right';
+export type LinkButtonRel = 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
+export type LinkButtonReferrerPolicy = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+export type LinkButtonAriaAttribute = 'aria-label' | 'aria-current' | 'aria-labelledby';
+type ValidationProps = Pick<LinkButtonProps, 'hideLabel' | 'iconName' | 'iconSource' | 'isFlush' | 'size' | 'stretched' | 'theme' | 'variant'>;
+/**
+ * Performs runtime validation on a subset of `DSLinkButton` props to detect
+ * misconfigurations during development.
+ *
+ * This function provides warnings or throws errors when invalid combinations of props occur.
+ *
+ * Intended for development use only; should not be used in production environments.
+ *
+ * @param validationProps - An object containing the props to validate
+ *                          from the `DSLinkButton` component. These are validated to ensure
+ *                          they are used in supported combinations.
+ */
+export declare const validateLinkButtonProps: ({ hideLabel, iconName, iconSource, isFlush, size, stretched, theme, variant, }: ValidationProps) => void;
+export {};

package/components/LinkButton/LinkButton.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/LinkCard/LinkCard.d.ts

@@ -0,0 +1,96 @@
+import { AnchorHTMLAttributes, JSX } from 'react';
+import { LinkButtonProps } from '../LinkButton/LinkButton';
+import { CardHeading } from './LinkCard.utils';
+type DecorativeLinkButtonProps = Pick<LinkButtonProps, 'iconPosition' | 'iconName' | 'size' | 'hideLabel'> & {
+    label?: string;
+    variant?: Extract<LinkButtonProps['variant'], 'filled' | 'ghost'>;
+};
+type CardClassNames = {
+    brandFlag?: string;
+    contentWrapper?: string;
+    descriptionWrapper?: string;
+    decorativeLink?: string;
+    flagsWrapper?: string;
+    footerWrapper?: string;
+    headerWrapper?: string;
+    heading?: string;
+    imageWrapper?: string;
+    metaDataWrapper?: string;
+};
+export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement | HTMLDivElement> {
+    /**
+     * The `heading` prop can either be a simple `string` or an object with specific properties.
+     * When provided as a string, it represents the default medium h3 heading directly.
+     * When provided as an object, it allows for more detailed configuration, including:
+     * - `headingText: string` The text content for the heading.
+     * - `headingSize?: 'x-large' | 'x-large-uppercase' | 'large' | 'large-uppercase' | 'medium' | 'medium-uppercase' | 'small' | 'small-uppercase'` Defines the size of the heading, using predefined size types, defaults to `'medium'`
+     * - `headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'` Specifies the HTML tag to be used for the heading, such as 'h1', 'h2', etc., defaults to `'h3'`
+     *
+     * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} heading
+     */
+    heading: CardHeading;
+    /** Orange brand flag text displayed on the image. */
+    brandFlag?: string;
+    /**
+     * ClassNames for various parts of the LinkCard can be provided via the `cardClassNames` prop.
+     * - `brandFlag?: string` className for the brand flag element.
+     * - `contentWrapper?: string` className for the content wrapper element.
+     * - `descriptionWrapper?: string` className for the description wrapper element.
+     * - `decorativeLink?: string` className for the decorative link button element.
+     * - `flagsWrapper?: string` className for the flags wrapper element.
+     * - `footerWrapper?: string` className for the footer wrapper element.
+     * - `headerWrapper?: string` className for the header wrapper element.
+     * - `heading?: string` className for the heading element.
+     * - `imageWrapper?: string` className for the image wrapper element.
+     * - `metaDataWrapper?: string` className for the meta data wrapper element.
+     */
+    cardClassNames?: CardClassNames;
+    /**
+     * Props for the decorative link button optionally displayed at the bottom of the card.
+     *
+     * - `label?: string` The text label for the decorative link button.
+     * - `variant?: 'filled' | 'ghost'` The variant style for the decorative link button, defaults to `'filled'`.
+     * - `iconPosition?: 'left' | 'right'` The position of the icon in the decorative link button.
+     * - `iconName?: IconName` The name of the icon to be used in the decorative link button.
+     * - `size?: 'small' | 'medium'` The size of the decorative link button.
+     * - `hideLabel?: boolean` Whether to hide the label of the decorative link button.
+     */
+    decorativeLinkButtonProps?: DecorativeLinkButtonProps;
+    /** Short descriptive text displayed beneath the headline. */
+    description?: React.ReactNode;
+    /**
+     * ARIA label for the list of flags for screen readers. Needed if flags are provided.
+     */
+    flagListAriaLabel?: string;
+    /**
+     * Array of DSFlag components to be displayed on the card.
+     */
+    flags?: string[];
+    /** Defines the URL to link to. */
+    href?: string;
+    /** Image element to be displayed within the card. */
+    img?: React.ReactNode;
+    /** Link component to be used for the navigation. */
+    linkComponent?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement> & {
+        onClick?: () => void;
+        to?: string;
+    }>;
+    /** Meta data content displayed beneath the description. */
+    metaData?: React.ReactNode;
+    /**
+     * Sets the orientation of the card.
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+}
+/**
+ * A simple, accessible Card component that can be used as a link to navigate to other pages.
+ * The entire card is clickable and follows accessibility best practices.
+ *
+ * Design in Figma: [Link Card](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=26075-11591&p=f&t=WDN78eWtKR9F8yYp-11)
+ */
+export declare const DSLinkCard: {
+    ({ heading, brandFlag, className, cardClassNames, decorativeLinkButtonProps, description, flagListAriaLabel, flags, href, img, linkComponent, metaData, orientation, ...rest }: LinkCardProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/components/LinkCard/LinkCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/LinkCard/LinkCard.utils.d.ts

@@ -0,0 +1,10 @@
+import { HeadingSize, HeadingTag } from '../Heading/Heading.utils';
+import { LinkCardProps } from './LinkCard';
+export type CardHeading = string | {
+    headingText: string;
+    headingSize?: HeadingSize;
+    headingTag?: HeadingTag;
+};
+type ValidationProps = Pick<LinkCardProps, 'href' | 'linkComponent' | 'flags' | 'flagListAriaLabel' | 'heading' | 'img' | 'brandFlag'>;
+export declare const validateLinkCardProps: ({ href, linkComponent, flags, flagListAriaLabel, heading, img, brandFlag, }: ValidationProps) => void;
+export {};