@navinc/base-react-components/dist/standard-card.js

Nav's Pattern Library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { styled } from 'styled-components';
import { Button } from './button.js';
import { Icon } from './icon.js';
import { Banner } from './banner.js';
import { Copy } from './copy.js';
import { LoadingDots } from './loading-dots.js';
import { Header } from './header.js';
import { CDNAsset } from './cdn-asset.js';
import { isKeyOf } from '@navinc/utils';
const StyledLoadingDots = styled(LoadingDots).withConfig({ displayName: "brc-sc-StyledLoadingDots", componentId: "brc-sc-vdnc17" }) ``;
export const StyledBackButton = styled(Button).attrs({
    variation: 'noOutline',
}) `
  margin-right: auto;
  padding: 8px;
  color: ${({ theme }) => theme.neutral400};
`;
export const StyledCDNAsset = styled(CDNAsset).withConfig({ displayName: "brc-sc-StyledCDNAsset", componentId: "brc-sc-vnbmdw" }) `
  margin-top: 16px;
  height: 180px;
  width: 180px;
`;
const Content = styled.div.withConfig({ displayName: "brc-sc-Content", componentId: "brc-sc-15b1752" }) `
  align-items: center;
  display: flex;
  flex-direction: column;
  ${({ hasImage }) => !hasImage &&
    `
    height: 400px;
    justify-content: center;
  `}

  & > ${StyledLoadingDots} {
    color: ${({ theme }) => theme.navPrimary};
  }
`;
export const StandardCardLoadingContent = (_a) => {
    var { imageFilename, directory, title } = _a, props = __rest(_a, ["imageFilename", "directory", "title"]);
    const defaultDirectory = 'illustrations';
    return (_jsxs(_Fragment, { children: [!!title && _jsx(Header, { children: title }), _jsxs(Content, Object.assign({ hasImage: !!imageFilename }, props, { children: [_jsx(StyledLoadingDots, {}), imageFilename && (_jsx(StyledCDNAsset, { directory: directory || defaultDirectory, filename: imageFilename, "data-testid": "card:loading-image" }))] }))] }));
};
StandardCardLoadingContent.displayName = 'LoadingContent';
export const StandardCardBackButton = styled((_a) => {
    var { onClick, href } = _a, props = __rest(_a, ["onClick", "href"]);
    return !(onClick || href) ? null : (_jsx(StyledBackButton, Object.assign({ onClick: onClick, href: href }, props, { children: _jsx(Icon, { name: "actions/arrow-back" }) })));
}).withConfig({ displayName: "brc-sc-StandardCardBackButton", componentId: "brc-sc-z6dpxn" }) ``;
StandardCardBackButton.displayName = 'BackButton';
const StyledHeader = styled.div.withConfig({ displayName: "brc-sc-StyledHeader", componentId: "brc-sc-kln7i1" }) `
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 16px;

  & > *:not(:first-child) {
    margin-top: 4px;
  }

  &::before {
    content: '';
    width: 100%;
    height: 4px;
    position: absolute;
    bottom: 0;
    background: ${({ theme }) => theme.navNeutral200};
    border-radius: 100px;
  }
`;
const Label = styled(Copy).attrs(() => ({ size: 'sm' })).withConfig({ displayName: "brc-sc-Label", componentId: "brc-sc-1j57tzq" }) `
  color: ${({ theme }) => theme.neutral400};
`;
const Title = styled(Header).withConfig({ displayName: "brc-sc-Title", componentId: "brc-sc-5sfn4v" }) ``;
const StyledFooter = styled.div.withConfig({ displayName: "brc-sc-StyledFooter", componentId: "brc-sc-wazkye" }) `
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 32px;
  padding-top: 16px;
  background: ${({ theme }) => theme.navNeutralLight};

  &::before {
    content: '';
    width: 100%;
    height: 4px;
    position: absolute;
    top: 0;
    background: ${({ theme }) => theme.navNeutral200};
    border-radius: 100px;
  }

  /* For button spacing when there are multiple buttons */
  /* stylelint-disable plugin/no-unsupported-browser-features -- Chrome 86 does not support "css-no-sel-list" */
  & > *:not(${StandardCardBackButton}) {
    margin: 0 8px;
  }
  & > *:first-child:not(${StandardCardBackButton}) {
    margin-left: 0;
  }
  & > *:last-child:not(${StandardCardBackButton}) {
    margin-right: 0;
  }
  /* stylelint-enable plugin/no-unsupported-browser-features */
`;
const StyledFooterV2 = styled.div.withConfig({ displayName: "brc-sc-StyledFooterV2", componentId: "brc-sc-alol8k" }) `
  display: flex;
  width: fit-content;
  gap: 16px;
  margin: auto;
  padding-top: 16px;
  padding-bottom: 8px;
  background: ${({ theme }) => theme.navNeutralLight};
  flex-wrap: wrap-reverse;
  justify-content: center;
`;
export const StandardCardHeader = styled((_a) => {
    var { children, label, title } = _a, remainingProps = __rest(_a, ["children", "label", "title"]);
    return (_jsxs(StyledHeader, Object.assign({}, remainingProps, { children: [label && _jsx(Label, { children: label }), title && _jsx(Title, { children: title }), children] })));
}).withConfig({ displayName: "brc-sc-StandardCardHeader", componentId: "brc-sc-151lwei" }) ``;
StandardCardHeader.displayName = 'Header';
const highlightVariation = {
    default: null,
    positive: 'navStatusPositive',
    neutral: 'navSecondary600',
    negative: 'navStatusNegative',
};
const getHighlightColor = (highlightColor, theme) => {
    return isKeyOf(highlightColor, highlightVariation) && isKeyOf(highlightVariation[highlightColor], theme)
        ? theme[highlightVariation[highlightColor]]
        : highlightColor;
};
export const StandardCardHighlightedHeader = styled.div.withConfig({ displayName: "brc-sc-StandardCardHighlightedHeader", componentId: "brc-sc-mt5nig" }) `
  margin: -24px -24px 12px;
  padding: 8px 24px;
  ${({ highlightColor, theme }) => highlightColor && `background: ${getHighlightColor(highlightColor, theme)}`}
`;
StandardCardHighlightedHeader.displayName = 'HighlightedHeader';
export const StandardCardFooter = styled((_a) => {
    var { actionText = 'Next', actionForm, actionButtonType, actionDataTestId, onAction, actionHref, isActionDisabled, isLoading, onBack, backText = 'Go back', backHref, actionTarget, v2Footer, children, buttonProps } = _a, remainingProps = __rest(_a, ["actionText", "actionForm", "actionButtonType", "actionDataTestId", "onAction", "actionHref", "isActionDisabled", "isLoading", "onBack", "backText", "backHref", "actionTarget", "v2Footer", "children", "buttonProps"]);
    const FooterVersion = v2Footer ? StyledFooterV2 : StyledFooter;
    return (_jsxs(FooterVersion, Object.assign({}, remainingProps, { children: [(!!onBack || !!backHref) &&
                (v2Footer ? (_jsx(Button, Object.assign({ "data-testid": "card:back", type: "button", onClick: onBack, href: backHref, size: "cardButton", variation: "noOutline" }, buttonProps, { children: backText }))) : (_jsx(StandardCardBackButton, { "data-testid": "card:back", type: "button", onClick: onBack, href: backHref }))), children, (!!onAction || !!actionHref || !!actionForm) && (_jsx(Button, Object.assign({ "data-testid": actionDataTestId || 'card:next', onClick: onAction, form: actionForm, href: actionHref, isLoading: isLoading, disabled: isLoading || isActionDisabled, size: !v2Footer ? 'cardButton' : undefined, variation: !v2Footer ? 'noOutline' : undefined, target: actionTarget }, (actionButtonType && { type: actionButtonType }), buttonProps, { children: actionText })))] })));
}).withConfig({ displayName: "brc-sc-StandardCardFooter", componentId: "brc-sc-uig1aa" }) ``;
StandardCardFooter.displayName = 'Footer';
const focusedCSS = `
  text-align: center;
    width: 100%;


  & ${StandardCardHeader} {
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
  text-align: center;
}

  & ${Title} {
  max-width: 400px;
}
`;
export const StandardCardFocusedContent = styled.div.withConfig({ displayName: "brc-sc-StandardCardFocusedContent", componentId: "brc-sc-1sq9lyc" }) `
  align-items: center;
  display: flex;
  flex-direction: column;

  & > * {
    max-width: 400px;
  }
`;
export const StandardCardTermsFooter = styled.section.withConfig({ displayName: "brc-sc-StandardCardTermsFooter", componentId: "brc-sc-1ldo57k" }) `
  padding: 16px 32px;
  margin: 24px -24px -24px;
  background-color: ${({ theme }) => theme.navNeutralLight};
`;
const Card = styled.div.withConfig({ displayName: "brc-sc-Card", componentId: "brc-sc-33m4y1" }) `
  position: relative;
  padding: 24px;
  border-radius: 8px;
  background-color: ${({ theme }) => theme.navNeutralLight};
  overflow: hidden;
  border: solid 1px ${({ theme }) => theme.navNeutral100};
  ${({ highlightColor, theme }) => highlightColor && `border: solid 2px ${getHighlightColor(highlightColor, theme)};`}

  & ${Banner} {
    margin: 0 0 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  ${({ isFocused }) => isFocused && focusedCSS}
`;
Card.displayName = 'StandardCard';
/**
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 const StandardCard = Card;
StandardCard.Header = StandardCardHeader;
StandardCard.HighlightedHeader = StandardCardHighlightedHeader;
StandardCard.Footer = StandardCardFooter;
StandardCard.BackButton = StandardCardBackButton;
StandardCard.FocusedContent = StandardCardFocusedContent;
StandardCard.LoadingContent = StandardCardLoadingContent;
StandardCard.TermsFooter = StandardCardTermsFooter;
//# sourceMappingURL=standard-card.js.map