ActivationCard

Activation cards are used in groups to communicate a user’s stage in a series of steps toward an overall action.

Props

Name	Type	Default
`message` Required	`string`	-
	Text to render inside the activation card to convey detailed information to the user. The message text has a fixed size.
`status` Required	`"notStarted" \| "pending" \| "needsAttention" \| "complete"`	-
	Select the activation card status: -`notStarted`: A task that has not be started -`pending`: A task that is pending action -`needsAttention`: A task that requires the user's attention -`complete`: A task that has been completed
`statusMessage` Required	`string`	-
	A message to indicate the current status of the activation card.
`title` Required	`string`	-
	Heading to render inside the activation card above the message to convey the activation card topic to the user.
`dismissButton`	`{\| accessibilityLabel: string, onDismiss: () => void, \|}`	-
	Callback fired when the dismiss button is clicked (pressed and released) with a mouse or keyboard. Supply a short, descriptive label for screen-readers to provide sufficient context about the dismiss button action. IconButtons do not render text for screen readers to read requiring an accessibility label. Accessibility: `accessibilityLabel` populates aria-label.
`link`	`{\| accessibilityLabel: string , href: string, label: string, onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLAnchorElement \| SyntheticMouseEvent<HTMLButtonElement> \| SyntheticKeyboardEvent<HTMLButtonElement> }, {\| disableOnNavigation: () => void \|}) => void \|}`	-
	Link-role button to render inside the activation card as a call-to-action to the user. label: Text to render inside the button to convey the function and purpose of the button. The button text has a fixed size. accessibilityLabel: Supply a short, descriptive label for screen-readers to replace button texts that do not provide sufficient context about the button component behavior. Texts like `Click Here,` `Follow,` or `Read More` can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text to replace the button text. onClick: Callback fired when the button component is clicked (pressed and released) with a mouse or keyboard. See custom navigation variant for examples.

Usage guidelines

When to Use

Use in groups to describe the user's stage in a sequential path toward an overall action.

When Not to Use

As a single element communicating updates to the state or status of the surface. Use Callout instead.

Not started and Pending Cards

Not started

Claim your website

Grow distribution and track Pins linked to your website

Claim your website now

Pending

Claim your website

We will notify you via email as soon as your site has been successfully claimed.

Learn more

<Box display="flex" marginStart={-1} marginEnd={-1}>
  <Box paddingX={1} column={6}>
    <ActivationCard
      status="notStarted"
      statusMessage="Not started"
      title="Claim your website"
      message="Grow distribution and track Pins linked to your website"
      link={{
        href: "https://pinterest.com",
        label:"Claim your website now",
        accessibilityLabel: ""
      }}
      dismissButton={{
        accessibilityLabel: 'Dismiss card',
        onDismiss: ()=>{},
      }}
    />
  </Box>
  <Box paddingX={1} column={6}>
    <ActivationCard
      status="pending"
      statusMessage="Pending"
      title="Claim your website"
      message="We will notify you via email as soon as your site has been successfully claimed."
      link={{
        href: "https://pinterest.com",
        label:"Learn more",
        accessibilityLabel: "Learn more: website claim status"
      }}
      dismissButton={{
        accessibilityLabel: 'Dismiss card',
        onDismiss: ()=>{},
      }}
    />
  </Box>
</Box>

<Box display="flex" marginStart={-1} marginEnd={-1}>
  <Box paddingX={1} column={6}>
    <ActivationCard
      status="notStarted"
      statusMessage="Not started"
      title="Claim your website"
      message="Grow distribution and track Pins linked to your website"
      link={{
        href: "https://pinterest.com",
        label:"Claim your website now",
        accessibilityLabel: ""
      }}
      dismissButton={{
        accessibilityLabel: 'Dismiss card',
        onDismiss: ()=>{},
      }}
    />
  </Box>
  <Box paddingX={1} column={6}>
    <ActivationCard
      status="pending"
      statusMessage="Pending"
      title="Claim your website"
      message="We will notify you via email as soon as your site has been successfully claimed."
      link={{
        href: "https://pinterest.com",
        label:"Learn more",
        accessibilityLabel: "Learn more: website claim status"
      }}
      dismissButton={{
        accessibilityLabel: 'Dismiss card',
        onDismiss: ()=>{},
      }}
    />
  </Box>
</Box>

Needs attention and Complete Cards

Needs attention

Tag is unhealthy

Oops! Your tag must be healthy to continue.

Learn more

Nice work

Tag is installed and healthy

<Box display="flex" marginStart={-1} marginEnd={-1}>
  <Box paddingX={1} column={6}>
    <ActivationCard
      status="needsAttention"
      statusMessage="Needs attention"
      title="Tag is unhealthy"
      message="Oops! Your tag must be healthy to continue."
      link={{
        accessibilityLabel: "Learn more about tag health",
        href: "https://pinterest.com",
        label: "Learn more"
      }}
      dismissButton={{
        accessibilityLabel: 'Dismiss card',
        onDismiss: ()=>{},
      }}
    />
  </Box>
  <Box paddingX={1} column={6}>
    <ActivationCard
      status="complete"
      statusMessage="Completed"
      title="Nice work"
      message="Tag is installed and healthy"
    />
  </Box>
</Box>

<Box display="flex" marginStart={-1} marginEnd={-1}>
  <Box paddingX={1} column={6}>
    <ActivationCard
      status="needsAttention"
      statusMessage="Needs attention"
      title="Tag is unhealthy"
      message="Oops! Your tag must be healthy to continue."
      link={{
        accessibilityLabel: "Learn more about tag health",
        href: "https://pinterest.com",
        label: "Learn more"
      }}
      dismissButton={{
        accessibilityLabel: 'Dismiss card',
        onDismiss: ()=>{},
      }}
    />
  </Box>
  <Box paddingX={1} column={6}>
    <ActivationCard
      status="complete"
      statusMessage="Completed"
      title="Nice work"
      message="Tag is installed and healthy"
    />
  </Box>
</Box>

Variants

This example illustrates two custom navigation implementations to externally control the link navigation behavior of ActivationCard: setting a default logic with OnLinkNavigationProvider and a custom component logic with the onClick prop.

If onNavigation prop is passed to OnLinkNavigationProvider, it's passed down to all children links and sets a custom default link navigation behavior. onLinkNavigation is a higher-order function: it takes named arguments (href and target) and returns an event handler function. In the component's onClick event handler, the onClick prop gets called first, followed by the function passed down by the OnLinkNavigationProvider.

ActivationCard's onClick prop is an event handler function. This callback takes 2 named parameters: 'event', the 'onClick' event, and disableOnNavigation, a callback function that disables any default custom navigation logic set by OnLinkNavigationProvider. disableOnNavigation is only accessible in OnLinkNavigationProvider's children components with link behavior.

In this example, ActivationCard has a parent OnLinkNavigationProvider setting a default custom navigation logic. We can compare three navigation behaviors: (a) the default ActivationCard behavior (by disabling the OnLinkNavigationProvider's inherited logic), (b) the default custom behavior set by OnLinkNavigationProvider and (c) a custom behavior set on ActivationCard.

onClick is used to disable the default custom logic set in OnLinkNavigationProvider and implement custom behavior at the component level. disableOnNavigation and customOnNavigation are both called first during the 'onClick' event.

If onNavigation is a custom hook function, it can contain complex logic, including React hooks, to perform side effects.

In this example, both onNavigation and customOnNavigation functions execute the following actions:

Disable the default link behavior
Show an alert message
Open a different URL in a new window

Both onNavigationClick, inside onNavigation, and onClick have event access to preventDefault(). It could also be used to stopPropagation().

Navigation controller:

Default navigation (disabled custom navigation set on OnLinkNavigationProvider)

Custom navigation set on OnLinkNavigationProvider

Custom navigation set on Link

Not started

Claim your website

Grow distribution and track Pins linked to your website

Claim your website now

function OnNavigation() {
  const [onNavigationMode, setOnNavigationMode] = React.useState('provider_disabled');

  const onNavigation = ({ href,target }) => {
    const onNavigationClick = ({ event }) => {
      event.preventDefault();
      // eslint-disable-next-line no-alert
      alert('CUSTOM NAVIGATION set on <OnLinkNavigationProvider onNavigation/>. Disabled link: '+href+'. Opening business.pinterest.com instead.');
      window.open('https://business.pinterest.com', target === 'blank' ? '_blank' : '_self');
    }
    return onNavigationClick;
  }

  const customOnNavigation = () => {
    // eslint-disable-next-line no-alert
    alert('CUSTOM NAVIGATION set on <ActivationCard link/>. Disabled link: https://pinterest.com. Opening help.pinterest.com instead.');
    window.open('https://help.pinterest.com', '_blank');
  }

  const onClickHandler = ({ event, disableOnNavigation }) => {
    if (onNavigationMode === 'provider_disabled') {
      disableOnNavigation()
    } else if (onNavigationMode === 'link_custom') {
      event.preventDefault();
      disableOnNavigation();
      customOnNavigation();
    }
  }

  const linkProps = {
    href:"https://pinterest.com",
    accessibilityLabel: "Learn more: claiming your website",
    onClick: onClickHandler,
    target:"blank",
  }

  return (
    <OnLinkNavigationProvider onNavigation={onNavigation}>
      <Flex direction="column" gap={2}>
        <Flex direction="column" gap={2}>
          <Text>Navigation controller:</Text>
            <RadioButton
              checked={onNavigationMode === 'provider_disabled'}
              id="provider_disabled"
              label="Default navigation (disabled custom navigation set on OnLinkNavigationProvider)"
              name="navigation"
              onChange={() => setOnNavigationMode('provider_disabled')}
              value="provider_disabled"
            />
            <RadioButton
              checked={onNavigationMode === 'provider_custom'}
              id="provider_custom"
              label="Custom navigation set on OnLinkNavigationProvider"
              name="navigation"
              onChange={() => setOnNavigationMode('provider_custom')}
              value="provider_custom"
            />
            <RadioButton
              checked={onNavigationMode === 'link_custom'}
              id="link_custom"
              label="Custom navigation set on Link"
              name="navigation"
              onChange={() => setOnNavigationMode('link_custom')}
              value="link_custom"
            />
          <Divider/>
        </Flex>
        <ActivationCard
            status="notStarted"
            statusMessage="Not started"
            title="Claim your website"
            message="Grow distribution and track Pins linked to your website"
            link={{
              ...linkProps,
              label: 'Claim your website now'
            }}
            dismissButton={{
              accessibilityLabel: 'Dismiss card',
              onDismiss: ()=>{},
            }}
          />
      </Flex>
    </OnLinkNavigationProvider>
  );
}

function OnNavigation() {
  const [onNavigationMode, setOnNavigationMode] = React.useState('provider_disabled');
  const onNavigation = ({ href,target }) => {
    const onNavigationClick = ({ event }) => {
      event.preventDefault();
      // eslint-disable-next-line no-alert
      alert('CUSTOM NAVIGATION set on <OnLinkNavigationProvider onNavigation/>. Disabled link: '+href+'. Opening business.pinterest.com instead.');
      window.open('https://business.pinterest.com', target === 'blank' ? '_blank' : '_self');
    }
    return onNavigationClick;
  }
  const customOnNavigation = () => {
    // eslint-disable-next-line no-alert
    alert('CUSTOM NAVIGATION set on <ActivationCard link/>. Disabled link: https://pinterest.com. Opening help.pinterest.com instead.');
    window.open('https://help.pinterest.com', '_blank');
  }
  const onClickHandler = ({ event, disableOnNavigation }) => {
    if (onNavigationMode === 'provider_disabled') {
      disableOnNavigation()
    } else if (onNavigationMode === 'link_custom') {
      event.preventDefault();
      disableOnNavigation();
      customOnNavigation();
    }
  }
  const linkProps = {
    href:"https://pinterest.com",
    accessibilityLabel: "Learn more: claiming your website",
    onClick: onClickHandler,
    target:"blank",
  }
  return (
    <OnLinkNavigationProvider onNavigation={onNavigation}>
      <Flex direction="column" gap={2}>
        <Flex direction="column" gap={2}>
          <Text>Navigation controller:</Text>
            <RadioButton
              checked={onNavigationMode === 'provider_disabled'}
              id="provider_disabled"
              label="Default navigation (disabled custom navigation set on OnLinkNavigationProvider)"
              name="navigation"
              onChange={() => setOnNavigationMode('provider_disabled')}
              value="provider_disabled"
            />
            <RadioButton
              checked={onNavigationMode === 'provider_custom'}
              id="provider_custom"
              label="Custom navigation set on OnLinkNavigationProvider"
              name="navigation"
              onChange={() => setOnNavigationMode('provider_custom')}
              value="provider_custom"
            />
            <RadioButton
              checked={onNavigationMode === 'link_custom'}
              id="link_custom"
              label="Custom navigation set on Link"
              name="navigation"
              onChange={() => setOnNavigationMode('link_custom')}
              value="link_custom"
            />
          <Divider/>
        </Flex>
        <ActivationCard
            status="notStarted"
            statusMessage="Not started"
            title="Claim your website"
            message="Grow distribution and track Pins linked to your website"
            link={{
              ...linkProps,
              label: 'Claim your website now'
            }}
            dismissButton={{
              accessibilityLabel: 'Dismiss card',
              onDismiss: ()=>{},
            }}
          />
      </Flex>
    </OnLinkNavigationProvider>
  );
}

OnLinkNavigationProvider
OnLinkNavigationProvider allows external link navigation control across all children components with link behavior.
See custom navigation variant for examples.

Edit page on GitHub

ActivationCard

Props

Usage guidelines

Not started and Pending Cards

Claim your website

Claim your website

Needs attention and Complete Cards

Tag is unhealthy

Nice work

Variants

Custom navigation

Claim your website

Related