@city-of-helsinki/react-helsinki-headless-cms 3.0.0-rc.1 → 3.0.0

package/dist/cjs/src/common/utils/customRender.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { RenderOptions } from '@testing-library/react';
+import type { Config } from '../../core';
+export declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, "wrapper">, config?: Partial<Config>) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;

package/dist/cjs/src/common/utils/dates.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @param {dateTime} dateTime - the date to format to 'd.M.yyyy, HH:mm'.
+ * @return {string} - Formatted date.
+ */
+export declare const formatDateTime: (dateTime: Date) => string;
+/**
+ * @param {dateTime} dateTime -the date to format to 'd.M.yyyy'.
+ * @return {string} - Formatted date.
+ */
+export declare const formatDate: (dateTime: Date) => string;
+/**
+ * @param {dateTime} dateTime - date as string to format to 'd.M.yyyy'.
+ * @return {string} - Formatted date.
+ */
+export declare const formatDateFromString: (dateTime: string) => string;
+/**
+ * @param {dateTime} dateTime - date as string to format to 'd.M.yyyy, HH:mm'.
+ * @return {string} - Formatted date.
+ */
+export declare const formatDateTimeFromString: (dateTime: string) => string;

package/dist/cjs/src/common/utils/getIsValidHttpUrl.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {possibleUrl} possibleUrl - url for protocol validity check.
+ * @return {boolean} - Return true if valid http url.
+ */
+export default function getIsValidHttpUrl(possibleUrl: string): boolean;

package/dist/cjs/src/common/utils/hash.d.ts

@@ -0,0 +1 @@
+export default function hash(str: string, seed?: number): number;

package/dist/cjs/src/common/utils/makeLocaleStorageValue.d.ts

@@ -0,0 +1,6 @@
+type Options<T> = {
+    serializer?: (value: T) => string;
+    deserializer?: (value: string) => T;
+};
+export default function makeLocaleStorageValue<T>(key: string, options?: Partial<Options<T>>): () => [T | null, (value?: T) => void];
+export {};

package/dist/cjs/src/common/utils/testImage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Tests if an image at a given URL loads successfully,
+ * using AbortController for clean event listener management.
+ *
+ * @param {string} [url] - The URL of the image to test.
+ * @return {Promise<void>} - A promise that resolves if the image loads, and rejects otherwise.
+ */
+declare const testImage: (url?: string) => Promise<void>;
+export default testImage;

package/dist/cjs/src/common/venuesService/__generated__.d.ts

@@ -0,0 +1,254 @@
+import * as Apollo from '@apollo/client';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends {
+    [key: string]: unknown;
+}> = {
+    [K in keyof T]: T[K];
+};
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]?: Maybe<T[SubKey]>;
+};
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
+    [SubKey in K]: Maybe<T[SubKey]>;
+};
+export type MakeEmpty<T extends {
+    [key: string]: unknown;
+}, K extends keyof T> = {
+    [_ in K]?: never;
+};
+export type Incremental<T> = T | {
+    [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never;
+};
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+    ID: {
+        input: string;
+        output: string;
+    };
+    String: {
+        input: string;
+        output: string;
+    };
+    Boolean: {
+        input: boolean;
+        output: boolean;
+    };
+    Int: {
+        input: number;
+        output: number;
+    };
+    Float: {
+        input: number;
+        output: number;
+    };
+    _Any: {
+        input: any;
+        output: any;
+    };
+    federation__FieldSet: {
+        input: any;
+        output: any;
+    };
+    link__Import: {
+        input: any;
+        output: any;
+    };
+};
+export type AccessibilitySentences = {
+    __typename?: 'AccessibilitySentences';
+    groupName?: Maybe<Scalars['String']['output']>;
+    sentences?: Maybe<Array<Maybe<Scalars['String']['output']>>>;
+};
+export type Ontology = {
+    __typename?: 'Ontology';
+    id?: Maybe<Scalars['Int']['output']>;
+    label?: Maybe<Scalars['String']['output']>;
+};
+export type OpeningHour = {
+    __typename?: 'OpeningHour';
+    date: Scalars['String']['output'];
+    times: Array<Time>;
+};
+export type Point = {
+    __typename?: 'Point';
+    coordinates: Array<Scalars['Float']['output']>;
+    type?: Maybe<Scalars['String']['output']>;
+};
+export type Query = {
+    __typename?: 'Query';
+    _service: _Service;
+    venue: Venue;
+    venuesByIds: Array<Venue>;
+};
+export type QueryVenueArgs = {
+    id: Scalars['ID']['input'];
+};
+export type QueryVenuesByIdsArgs = {
+    ids?: InputMaybe<Array<Scalars['ID']['input']>>;
+};
+export declare enum ResourceState {
+    Closed = "closed",
+    EnterOnly = "enter_only",
+    ExitOnly = "exit_only",
+    Open = "open",
+    OpenAndReservable = "open_and_reservable",
+    SelfService = "self_service",
+    Undefined = "undefined",
+    WeatherPermitting = "weather_permitting",
+    WithKey = "with_key",
+    WithKeyAndReservation = "with_key_and_reservation",
+    WithReservation = "with_reservation"
+}
+export type Time = {
+    __typename?: 'Time';
+    description: Scalars['String']['output'];
+    endTime: Scalars['String']['output'];
+    endTimeOnNextDay: Scalars['Boolean']['output'];
+    fullDay: Scalars['Boolean']['output'];
+    name: Scalars['String']['output'];
+    periods: Array<Scalars['Int']['output']>;
+    resourceState: ResourceState;
+    startTime: Scalars['String']['output'];
+};
+export type Venue = {
+    __typename?: 'Venue';
+    accessibilitySentences: Array<Maybe<AccessibilitySentences>>;
+    addressLocality?: Maybe<Scalars['String']['output']>;
+    addressPostalFull?: Maybe<Scalars['String']['output']>;
+    connections: Array<Maybe<VenueConnection>>;
+    dataSource?: Maybe<Scalars['String']['output']>;
+    department?: Maybe<VenueDepartment>;
+    departmentId?: Maybe<Scalars['ID']['output']>;
+    description?: Maybe<Scalars['String']['output']>;
+    displayedServiceOwner?: Maybe<Scalars['String']['output']>;
+    displayedServiceOwnerType?: Maybe<Scalars['String']['output']>;
+    email?: Maybe<Scalars['String']['output']>;
+    id: Scalars['String']['output'];
+    image?: Maybe<Scalars['String']['output']>;
+    infoUrl?: Maybe<Scalars['String']['output']>;
+    isOpen?: Maybe<Scalars['Boolean']['output']>;
+    name?: Maybe<Scalars['String']['output']>;
+    ontologyTree: Array<Maybe<Ontology>>;
+    ontologyWords: Array<Maybe<Ontology>>;
+    openingHours?: Maybe<Array<OpeningHour>>;
+    organization?: Maybe<VenueDepartment>;
+    organizationId?: Maybe<Scalars['ID']['output']>;
+    position?: Maybe<Point>;
+    postalCode?: Maybe<Scalars['String']['output']>;
+    providerType?: Maybe<Scalars['String']['output']>;
+    shortDescription?: Maybe<Scalars['String']['output']>;
+    streetAddress?: Maybe<Scalars['String']['output']>;
+    telephone?: Maybe<Scalars['String']['output']>;
+};
+export type VenueConnection = {
+    __typename?: 'VenueConnection';
+    name?: Maybe<Scalars['String']['output']>;
+    phone?: Maybe<Scalars['String']['output']>;
+    sectionType?: Maybe<Scalars['String']['output']>;
+    url?: Maybe<Scalars['String']['output']>;
+};
+export type VenueDepartment = {
+    __typename?: 'VenueDepartment';
+    abbreviation?: Maybe<Scalars['String']['output']>;
+    addressCity?: Maybe<Scalars['String']['output']>;
+    addressPostalFull?: Maybe<Scalars['String']['output']>;
+    addressZip?: Maybe<Scalars['String']['output']>;
+    businessId?: Maybe<Scalars['String']['output']>;
+    email?: Maybe<Scalars['String']['output']>;
+    hierarchyLevel?: Maybe<Scalars['Int']['output']>;
+    id: Scalars['ID']['output'];
+    municipalityCode?: Maybe<Scalars['Int']['output']>;
+    name?: Maybe<Scalars['String']['output']>;
+    oid?: Maybe<Scalars['ID']['output']>;
+    organizationId?: Maybe<Scalars['ID']['output']>;
+    organizationType?: Maybe<Scalars['String']['output']>;
+    parentId?: Maybe<Scalars['ID']['output']>;
+    phone?: Maybe<Scalars['String']['output']>;
+    streetAddress?: Maybe<Scalars['String']['output']>;
+    www?: Maybe<Scalars['String']['output']>;
+};
+export type _Service = {
+    __typename?: '_Service';
+    sdl?: Maybe<Scalars['String']['output']>;
+};
+export declare enum Link__Purpose {
+    /** `EXECUTION` features provide metadata necessary for operation execution. */
+    Execution = "EXECUTION",
+    /** `SECURITY` features provide metadata necessary to securely resolve fields. */
+    Security = "SECURITY"
+}
+export type ListVenueFragment = {
+    __typename?: 'Venue';
+    description?: string | null;
+    id: string;
+    image?: string | null;
+    name?: string | null;
+    streetAddress?: string | null;
+    addressLocality?: string | null;
+    providerType?: string | null;
+    displayedServiceOwnerType?: string | null;
+    ontologyWords: Array<{
+        __typename?: 'Ontology';
+        id?: number | null;
+        label?: string | null;
+    } | null>;
+};
+export type VenuesByIdsQueryVariables = Exact<{
+    ids: Array<Scalars['ID']['input']> | Scalars['ID']['input'];
+}>;
+export type VenuesByIdsQuery = {
+    __typename?: 'Query';
+    venuesByIds: Array<{
+        __typename?: 'Venue';
+        description?: string | null;
+        id: string;
+        image?: string | null;
+        name?: string | null;
+        streetAddress?: string | null;
+        addressLocality?: string | null;
+        providerType?: string | null;
+        displayedServiceOwnerType?: string | null;
+        ontologyWords: Array<{
+            __typename?: 'Ontology';
+            id?: number | null;
+            label?: string | null;
+        } | null>;
+    }>;
+};
+export declare const ListVenueFragmentDoc: Apollo.DocumentNode;
+export declare const VenuesByIdsDocument: Apollo.DocumentNode;
+/**
+ * __useVenuesByIdsQuery__
+ *
+ * To run a query within a React component, call `useVenuesByIdsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useVenuesByIdsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useVenuesByIdsQuery({
+ *   variables: {
+ *      ids: // value for 'ids'
+ *   },
+ * });
+ */
+export declare function useVenuesByIdsQuery(baseOptions: Apollo.QueryHookOptions<VenuesByIdsQuery, VenuesByIdsQueryVariables> & ({
+    variables: VenuesByIdsQueryVariables;
+    skip?: boolean;
+} | {
+    skip: boolean;
+})): Apollo.InteropQueryResult<VenuesByIdsQuery, Exact<{
+    ids: Array<Scalars["ID"]["input"]> | Scalars["ID"]["input"];
+}>>;
+export declare function useVenuesByIdsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<VenuesByIdsQuery, VenuesByIdsQueryVariables>): Apollo.LazyQueryResultTuple<VenuesByIdsQuery, Exact<{
+    ids: Array<Scalars["ID"]["input"]> | Scalars["ID"]["input"];
+}>>;
+export declare function useVenuesByIdsSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions<VenuesByIdsQuery, VenuesByIdsQueryVariables>): Apollo.UseSuspenseQueryResult<VenuesByIdsQuery | undefined, Exact<{
+    ids: Array<Scalars["ID"]["input"]> | Scalars["ID"]["input"];
+}>>;
+export type VenuesByIdsQueryHookResult = ReturnType<typeof useVenuesByIdsQuery>;
+export type VenuesByIdsLazyQueryHookResult = ReturnType<typeof useVenuesByIdsLazyQuery>;
+export type VenuesByIdsSuspenseQueryHookResult = ReturnType<typeof useVenuesByIdsSuspenseQuery>;
+export type VenuesByIdsQueryResult = Apollo.QueryResult<VenuesByIdsQuery, VenuesByIdsQueryVariables>;

package/dist/cjs/src/common/venuesService/makeQueryWithVenuesApolloClientFromConfig.d.ts

@@ -0,0 +1,7 @@
+import type * as Apollo from '@apollo/client';
+type Modify<T, R> = Omit<T, keyof R> & R;
+type UseQuery<Q, V extends Apollo.OperationVariables> = (baseOptions?: Modify<Apollo.QueryHookOptions<Q, V>, {
+    client?: Apollo.ApolloClient<Apollo.NormalizedCacheObject> | 'disabled';
+}>) => Apollo.QueryResult<Q, V>;
+export default function makeQueryWithVenuesApolloClientFromConfig<Q, V extends Apollo.OperationVariables>(useQuery: UseQuery<Q, V>): (baseOptions?: Apollo.QueryHookOptions<Q, V>) => Apollo.QueryResult<Q, V>;
+export {};

package/dist/cjs/src/common/venuesService/types.d.ts

@@ -0,0 +1,2 @@
+import type { VenuesByIdsQuery } from './__generated__';
+export type VenueType = VenuesByIdsQuery['venuesByIds'][number];

package/dist/cjs/src/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const CMS_GRAPHQL_ENDPOINT: string;
+export declare const EVENTS_PROXY_ENDPOINT: string;
+export declare const LINKED_EVENTS_ENDPOINT: string;
+export declare const DEFAULT_LOCALE = "fi";
+export declare const RANDOM_CONTENT = "\nLorem Ipsum is simply dummy text of the printing and typesetting industry.\nLorem Ipsum has been the industrys standard dummy text ever since the\n1500s, when an unknown printer took a galley of type and scrambled it to\nmake a type specimen book. It has survived not only five centuries, but\nalso the leap into electronic typesetting, remaining essentially\nunchanged. It was popularised in the 1960s with the release of Letraset\nsheets containing Lorem Ipsum passages, and more recently with desktop\npublishing software like Aldus PageMaker including versions of Lorem\nIpsum.";

package/dist/cjs/src/core/archiveSearchPage/ArchivePageMeta.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type BasicMetaProps = {
+    /**
+     * Archive page meta title tag contents.
+     */
+    title?: string;
+    /**
+     * Archive page meta description tag contents.
+     */
+    description?: string;
+};
+declare function BasicMeta({ title, description }: BasicMetaProps): React.JSX.Element | null;
+export default BasicMeta;

package/dist/cjs/src/core/archiveSearchPage/ArchiveSearchPage.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type ArchiveSearchPageProps = {
+    /**
+     * Navigation component for the archive search page.
+     */
+    navigation: React.ReactNode;
+    /**
+     *Content component for the archive search page.
+     */
+    content: React.ReactNode;
+    /**
+     * Footer component for the archive search page.
+     */
+    footer: React.ReactNode;
+};
+export declare function ArchivePage({ navigation, content, footer, }: ArchiveSearchPageProps): React.JSX.Element;

package/dist/cjs/src/core/archiveSearchPage/ArchiveSearchPage.stories.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { SearchPageContent as ArchiveSearchPageContent } from '../archiveSearchPageContent/ArchiveSearchPageContent';
+import { Navigation } from '../navigation/Navigation';
+import { ArchivePage as ArchiveSearchPage } from './ArchiveSearchPage';
+import { Card } from '../card/Card';
+declare const _default: {
+    title: string;
+    component: typeof ArchiveSearchPage;
+    subcomponents: {
+        ArchiveSearchPageContent: typeof ArchiveSearchPageContent;
+        Navigation: typeof Navigation;
+        Card: typeof Card;
+    };
+    argTypes: {
+        navigation: {
+            control: false;
+        };
+        content: {
+            control: false;
+        };
+        footer: {
+            control: false;
+        };
+    };
+};
+export default _default;
+export declare const ArchiveSearchPageWithArticles: {
+    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./ArchiveSearchPage").ArchiveSearchPageProps>;
+    args: {
+        navigation: React.JSX.Element;
+        content: React.JSX.Element;
+        footer: React.JSX.Element;
+    };
+};
+export declare const ArchiveSearchPageWithPages: {
+    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./ArchiveSearchPage").ArchiveSearchPageProps>;
+    args: {
+        navigation: React.JSX.Element;
+        content: React.JSX.Element;
+        footer: React.JSX.Element;
+    };
+};
+export declare const ArchiveSearchPageWithPageSubPages: {
+    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./ArchiveSearchPage").ArchiveSearchPageProps>;
+    args: {
+        navigation: React.JSX.Element;
+        content: React.JSX.Element;
+        footer: React.JSX.Element;
+    };
+};

package/dist/cjs/src/core/archiveSearchPageContent/ArchiveSearchPageContent.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Card } from '../card/Card';
+import { LargeCard } from '../card/LargeCard';
+import type { Config } from '../configProvider/configContext';
+import type { CollectionItemType } from '../collection/types';
+import type { ArticleType, PageType, SearchTag } from '../../common/headlessService/types';
+import type { BreadcrumbUnionType } from '../pageContent/types';
+export declare function SearchForm({ archiveSearch, handleSearch, handleChange, searchText, }: {
+    archiveSearch: Config['copy']['archiveSearch'];
+    handleSearch: (e: React.FormEvent) => void;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    searchText: string;
+}): React.JSX.Element;
+export declare function SearchTags({ tags, currentTags, hasClearSearch, handleTagClick, handleClearSearch, clearAllText, }: {
+    tags: SearchTag[];
+    currentTags: SearchTag[];
+    hasClearSearch: boolean;
+    handleTagClick: (tag: SearchTag) => () => void;
+    handleClearSearch: () => void;
+    clearAllText: string;
+}): React.JSX.Element;
+export interface SearchPageContentProps {
+    /**
+     * Page object from wordpress headless cms.
+     */
+    page?: PageType | ArticleType;
+    /**
+     * Breadcrumbs object from wordpress headless cms.
+     */
+    breadcrumbs?: BreadcrumbUnionType | ((page?: PageType | ArticleType) => BreadcrumbUnionType);
+    /**
+     * Custom content react components to be dispayed on the page.
+     */
+    customContent?: string | JSX.Element;
+    /**
+     * Archive collection items..
+     */
+    items?: CollectionItemType[];
+    /**
+     *  Boolean indicating whether the page is loading.
+     */
+    isLoading?: boolean;
+    /**
+     *  Boolean indicating whether the collection has more items.
+     */
+    hasMore?: boolean;
+    /**
+     *  Boolean indicating whether no results found for the collection items.
+     */
+    noResults?: boolean;
+    /**
+     * Additional classname for the SearchPageContent.
+     */
+    className?: string;
+    /**
+     * All tags collection for the page content.
+     */
+    tags?: SearchTag[];
+    /**
+     * Applied search  tags collection for the page content.
+     */
+    currentTags?: SearchTag[];
+    /**
+     *  Boolean indicating whether the tag should update on change.
+     */
+    withQuery?: boolean;
+    /**
+     * If true then current search text is updated on change.
+     */
+    currentText?: string;
+    /**
+     *  Boolean indicating whether the first search item should be rendered as a large card.
+     */
+    largeFirstItem?: boolean;
+    /**
+     * Search button click handler.
+     */
+    onSearch?: (freeSearch: string, tags: SearchTag[]) => void;
+    /**
+     * Load more button click handler.
+     */
+    onLoadMore?: () => void;
+    /**
+     * Custom renderer for the large card.
+     */
+    createLargeCard?: (item: CollectionItemType, index?: number) => React.ReactElement<typeof LargeCard>;
+    createCard?: (item: CollectionItemType, index?: number) => React.ReactElement<typeof Card>;
+}
+export declare const defaultLargeCard: (item: CollectionItemType, index?: number) => React.JSX.Element;
+export declare const defaultCreateCard: (item: CollectionItemType, index?: number) => React.JSX.Element;
+export declare function ArchiveCollection({ items, createLargeCard, createCard, largeFirstItem, }: Partial<SearchPageContentProps>): React.JSX.Element | null;
+export declare function SearchPageContent(props: SearchPageContentProps): React.JSX.Element;

package/dist/cjs/src/core/button/LoadingButton.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonProps } from 'hds-react';
+import React from 'react';
+type LoadingButtonProps = Omit<ButtonProps, 'iconStart' | 'variant'> & {
+    isLoading: boolean;
+    loadingText?: React.ReactNode & string;
+};
+export declare function LoadingButton({ children, isLoading, loadingText, ...rest }: LoadingButtonProps): React.JSX.Element;
+export {};

package/dist/cjs/src/core/card/Card.d.ts

@@ -0,0 +1,102 @@
+import React from 'react';
+export type CardDirection = 'fixed-horisontal' | 'fixed-vertical' | 'responsive' | 'responsive-reverse';
+export type CardAlignment = 'left' | 'right' | 'center-left' | 'center-right' | 'delimited-left' | 'delimited-right';
+export type CardProps = {
+    /**
+     * Card id.
+     */
+    id?: string;
+    /**
+     * Card container aria-label.
+     */
+    ariaLabel?: string;
+    /**
+     * Additional classname for the card.
+     */
+    className?: string;
+    /**
+     * Card image url.
+     */
+    imageUrl?: string | null;
+    /**
+     * Card image label.
+     */
+    imageLabel?: string;
+    /**
+     * Card title.
+     */
+    title?: string;
+    /**
+     *  Boolean indicating whether the styling applied for the title with icon layout.
+     */
+    withTitleIcon?: boolean;
+    /**
+     * Card title icon.
+     */
+    titleIcon?: React.ReactNode | string;
+    /**
+     * Card subtitle.
+     */
+    subTitle?: string;
+    /**
+     * Card main text contents.
+     */
+    text?: string;
+    /**
+     * Card custom content (component) below the main text.
+     */
+    customContent?: React.ReactNode | string;
+    /**
+     *  Boolean indicating whether the link arrow icon is shown.
+     */
+    hasLink?: boolean;
+    /**
+     * If true, show link arrow icon label.
+     */
+    linkArrowLabel?: string;
+    /**
+     * Card link url.
+     */
+    url?: string;
+    /**
+     *  Boolean indicating whether the border styles should be applied to the Card.
+     */
+    withBorder?: boolean;
+    /**
+     *   Boolean indicating whether the shadow styles should be applied to the Card.
+     */
+    withShadow?: boolean;
+    /**
+     *  Boolean which defines the Card content direction.
+     */
+    direction?: CardDirection;
+    /**
+     *  Defines the Card text and custon content alignement inside the Card.
+     */
+    alignment?: CardAlignment;
+    /**
+     *  Boolean indicating whether the text content is clamped in the Card.
+     */
+    clampText?: boolean;
+    /**
+     *  Boolean indicating whether the Card link opens in new tab.
+     */
+    openLinkInNewTab?: boolean;
+    /**
+     * Custom css properties for the Card container
+     */
+    style?: React.CSSProperties;
+    /**
+     * Backgroud color of the Card
+     */
+    backgroundColor?: string;
+    /**
+     * Defines the width ratio for the text and image element in the card. Primary is wider.
+     */
+    primaryContent?: 'image' | 'text';
+    /**
+     * Boolean indicating whether flex attribute should be added to the container of the link.
+     */
+    flex?: boolean;
+};
+export declare function Card(props: CardProps): React.JSX.Element;