@navinc/base-react-components/dist/standard-card.d.ts

Nav's Pattern Library

import { Button } from './button.js';
import { ReactEventHandler, ReactNode } from 'react';
import { InferComponentProps } from './types.js';
export declare const StyledBackButton: typeof Button;
export declare const StyledCDNAsset: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<{
    directory: string;
    filename: string;
} & import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement>, never>, never>> & string;
type ContentProps = {
    hasImage?: boolean;
};
declare const Content: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentProps>> & string;
type StandardCardLoadingContentProps = InferComponentProps<typeof Content> & {
    imageFilename?: string;
    directory?: string;
    title?: string;
};
export declare const StandardCardLoadingContent: {
    ({ imageFilename, directory, title, ...props }: StandardCardLoadingContentProps): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
export declare const StandardCardBackButton: typeof Button;
declare const StyledHeader: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
declare const StyledFooter: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
type StandardCardHeaderProps = InferComponentProps<typeof StyledHeader> & {
    label?: string;
    title?: string;
    children?: ReactNode;
};
export declare const StandardCardHeader: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string> & {
    label?: string;
    title?: string;
    children?: ReactNode;
}, never>> & string & Omit<({ children, label, title, ...remainingProps }: StandardCardHeaderProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
type StandardCardHighlightedHeaderProps = {
    highlightColor?: string;
};
export declare const StandardCardHighlightedHeader: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StandardCardHighlightedHeaderProps>> & string;
type ButtonProps = InferComponentProps<typeof Button>;
type StandardCardFooterProps = InferComponentProps<typeof StyledFooter> & {
    children?: ReactNode;
    actionText?: ReactNode;
    actionForm?: string;
    actionDataTestId?: string;
    actionHref?: string;
    actionButtonType?: ButtonProps['type'];
    onAction?: ReactEventHandler;
    isActionDisabled?: boolean;
    isLoading?: boolean;
    onBack?: ReactEventHandler;
    backText?: string;
    backHref?: string;
    actionTarget?: string;
    v2Footer?: boolean;
    buttonProps?: ButtonProps;
};
export declare const StandardCardFooter: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string> & {
    children?: ReactNode;
    actionText?: ReactNode;
    actionForm?: string;
    actionDataTestId?: string;
    actionHref?: string;
    actionButtonType?: ButtonProps["type"];
    onAction?: ReactEventHandler;
    isActionDisabled?: boolean;
    isLoading?: boolean;
    onBack?: ReactEventHandler;
    backText?: string;
    backHref?: string;
    actionTarget?: string;
    v2Footer?: boolean;
    buttonProps?: ButtonProps;
}, StandardCardFooterProps>> & string & Omit<({ actionText, actionForm, actionButtonType, actionDataTestId, onAction, actionHref, isActionDisabled, isLoading, onBack, backText, backHref, actionTarget, v2Footer, children, buttonProps, ...remainingProps }: StandardCardFooterProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
export declare const StandardCardFocusedContent: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
export declare const StandardCardTermsFooter: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
type StandardCardProps = {
    isFocused?: boolean;
    highlightColor?: string;
};
declare const Card: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StandardCardProps>> & string;
type StandardCardType = typeof Card & {
    Header: typeof StandardCardHeader;
    HighlightedHeader: typeof StandardCardHighlightedHeader;
    Footer: typeof StandardCardFooter;
    BackButton: typeof StandardCardBackButton;
    FocusedContent: typeof StandardCardFocusedContent;
    LoadingContent: typeof StandardCardLoadingContent;
    TermsFooter: typeof StandardCardTermsFooter;
};
/**
The above are just suggested layouts and examples of how the card can be used. Customize at your own discretion.

You'll want to use `<AnimateHeight>` Whenever the content of the card may change and cause the height of
the card to change. Ei: Error messages, collapsable content, etc.

---

**Card: Persistent**

```js
import Card from '../../base-componets'

...

<StandardCard>

  <AnimateHeight> // Optional
    <Banner title='Yo dawg' copy='You done messed up this time' type='error' /> // Optional
    <StandardCard.Header label='Card label' title='Card Title' />
      Body content goes here!
  </AnimateHeight>
  <StandardCard.Footer
    actionLabel='Next'
    onAction={() => {}}
    actionHref='/place'
    onBack={() => {}}
    backHref='/the-past'
  >
    <Button>Optional Additional Button</Button>
  </StandardCard.Footer>
</StandardCard>
```

**Card: Focused**

```js
<StandardCard isFocused>
  <Banner title='Yo dawg' copy='You done messed up this time' type='error' />
  <StandardCard.Header title='Hello' />
  <StandardCard.FocusedContent>
    <img src='some-dope-illustration' />
    Body content goes here!
  </StandardCard.FocusedContent>
  <StandardCard.Footer {...} />
</StandardCard>
```

**Card: Conditional**

```js
<StandardCard>
  <StandardCard.Header title='This card is conditional yo!' />
  <DivThatKeepsIllustrationToLeftOfContent>
    <img src='some-dope-illustration' />
    Body content goes here!
  </DivThatKeepsIllustrationToLeftOfContent>
  <StandardCard.Footer {...} />
</StandardCard>
```

**Card: with Card.LoadingContent**

```js
<StandardCard>
  <StandardCard.Header title='Your content is loading yo!' />
  {isLoading
    ? <StandardCard.LoadingContent imageFilename='cats.svg' />
    : <YourContent />
  }
  <StandardCard.Footer {...} />
</StandardCard>
```
 *
 * @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
 */
export declare const StandardCard: StandardCardType;
export {};