@sproutsocial/racine 16.0.0 → 18.0.0

package/CHANGELOG.md

@@ -1,5 +1,82 @@
 # Change Log
 
+## 18.0.0
+
+### Major Changes
+
+- fb938ad3: The HTML structure for the menu and listbox groups has been rearranged to improve accessibility for grouping
+  - When a title is provided to the `<Menu.Group />` or `<Listbox.Group />` component, the title is now correctly nested within the menu group container with the appropriate `role` and `aria-labelledby` attributes
+  - `Menu` and `Listbox` title container is now a `li` instead of a `div` for improved accessibility
+  - Developers are now able to provide a custom `role` to the `Menu.Group` and `Listbox.Group` components as well as override the padding applied to the title container
+
+### Minor Changes
+
+- 5f60f73a: Adds the `invalidNumberLabel` prop to `Numeral`
+  - The label you provide will be added as visually hidden text to any instance of Numeral with an invalid value (i.e., where we render an em dash (`—`)).
+  - The prop is optional, but passing in a localized label is strongly recommended for accessibility purposes.
+    - Without this prop, screen readers will not read off anything for invalid values.
+    - With this prop, screen readers will read off the `invalidNumberLabel` for invalid values, providing clear feedback to screen reader users.
+  - Users should pass an `invalidNumberLabel` prop to all instances of Numeral; Numeral handles conditionally applying or omitting the label as needed.
+- 23f73d44: `Card` component enhancements
+  - Adds the ability to specify an external link on the CardLink component.
+  - Provides Flow types for the subcomponents.
+- 9e33f361: Fix `Link` accessibility issues
+  - Changes default state of underline prop from false to true
+  - Updates stories to accurately reflect accessible link usage
+
+### Patch Changes
+
+- ba5d2429: Accessibility bugfixes for the `ChartLegend` component
+  - Recreates provided "contrast", "compare", and "extended" palettes in React hook to utilize the Racine theme
+  - Deprecation warnings added to the "contrast", "compare", and "extended" palettes
+    - Due to low usage of these palettes, ChartLegend will rely solely on the dataviz rotation and custom colors moving forward
+  - Provides 3:1 contrast ratio
+  - Dark mode support
+
+## 17.0.0
+
+### Major Changes
+
+- 5234f32d: Accessibility updates to Card based on Perkins review.
+
+  **Breaking changes**
+
+  - Card using role='link' will no longer work without the `CardLink` subcomponent
+
+  **Enhancements**
+
+  - Cards with `role='link'` should now wrap link text in the `CardLink` subcomponent
+  - Improves screen reader accessibility by pairing Cards as links with the new `CardLink` subcomponent
+  - Adds `CardLink` subcomponent
+    - Link text wrapped in CardLink renders an anchor tag as a child of Card
+    - Preserves the behavior that allows the user to click the whole Card as the link
+    - Handles navigating to the href using default link behavior.
+    - Includes an `affordance` prop that makes composing a Card as a link easy and visually appealing
+
+### Minor Changes
+
+- 99b984a6: Add the following Partner Logos:
+  - android
+  - apple
+  - github
+  - github-alien
+  - salesforce-cloud
+- 6c2753bc: Adds Tableau symbol and lockup to the `PartnerLogo` component
+
+### Patch Changes
+
+- b31737fa: Fixed automation for `PartnerLogo` names and type, which updated `PartnerLogoNames` and `EnumLogoNames` so they now include all logos.
+
+  **Deprecation Warning**:
+
+  - `PartnerNames` is now deprecated in favor of `PartnerLogoNames`
+  - `TypePartnerNames` is now deprecated in favor of `EnumLogoNames`
+
+- fb536bed: Applies `box-sizing: content-box` property to Switch loading state in order to avoid conflicts with global CSS reset properties
+- adec46fc: Updates Toast to accept Partner Logo names for 'icon' prop
+  - Toast erroneously did not accept Partner Logo names for the 'icon' prop, even after the Icon component was updated to render PartnerLogos.
+  - The Flow and Typescript types have been updated to add all partner names to the valid values for the 'icon' prop.
+
 ## 16.0.0
 
 ### Major Changes

package/README.md

@@ -146,7 +146,7 @@ When writing code for Racine, please refer to the `code-guidelines.mdx` story in
 
 There are a few ways to get involved:
 
-- Join #eng-ui-systems on Slack to participate in discussions about Racine's development.
+- Join #design-systems on Slack to participate in discussions about Racine's development.
 - Check out [the issues tab of this repository](https://github.com/sproutsocial/racine/issues). Issues contain community-collected bugs and features that need attention. If you're looking for an easy way to jump in, we have [a label which shows issues that are good for first-time contributors](https://github.com/sproutsocial/racine/issues?q=is%3Aopen+is%3Aissue+label%3A%22♥%EF%B8%8F+good+first+issue%22).
 - The Design Systems team [uses Jira to track our backlog, in-flight changes, and future changes](https://sprout.atlassian.net/jira/software/c/projects/DS/boards/601/backlog). It's a great way to get a broad look at what's happening in Racine, and tracks the squad's work from sprint to sprint, and release to release.
 
@@ -175,12 +175,12 @@ And you can interact with Racine via the command line with these commands:
 
 ### **✅ Step 3: Make your changes**
 
-If you're not a member of the Design Systems team, you'll want to start by creating a [fork of the Racine repo](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) using the "Fork" button in the top-right of the repo homescreen on GitHub. Before you start writing code, make sure your fork is up-to-date with the latest changes from the main `sproutsocial/racine` repo, and then create a new feature branch based off your local `dev`.
-
-If you are a member of the Design Systems team you'll have write access to `sproutsocial/racine`, which means you can branch directly off `dev` and start working. Either way, once you've got your new feature branch feel free to start coding! As updates are merged into `dev` on `sproutsocial/racine` by other developers over time you'll want to pull those updates into your feature branch, ideally via rebase, to avoid any conflicts when you open a pull request.
+Cut a feature branch off `dev` and start coding! As updates are merged into `dev` by other developers over time you'll want to pull those updates into your branch, ideally via rebase, to avoid any conflicts when you open a pull request.
 
 _Need to make an urgent update? Branch off `main` instead of dev, and open your PR later against `main`. We consider this a hotfix and only support it for critical time-sensitive updates, so check with the Design Systems team prior to making this kind of contribution._
 
+We use a [visual regression testing](https://racine.netlify.app/?path=/story/welcome-visual-regression-testing--page) suite to capture any unintended changes during development.  After running `yarn build` you can run the suite locally with `yarn backstop-test`, which will open a report in your browser to show you what passed and what failed.  If any fails are actually intentional visual changes you can run `yarn backstop-approve` to approve those changes as new reference images and include them in your PR.
+
 As you develop you'll want to track the scope of the changes you make. Racine supports this with a tool called [changesets](https://github.com/atlassian/changesets) to automatically pick new version numbers and update the changelog whenever we publish a new version of the package.
 
 **Run `yarn change` to generate a changeset that will be used to derive the next version number for Racine from your changes.**
@@ -193,26 +193,28 @@ When running this command, you will be asked to select whether your change is a
 - **minor** changes are for new features or improvements, and they bump the middle digit in the version number (`x.0.x`)
 - **major** changes are _breaking changes_, and they bump the first digit (`0.x.x`). These types of changes are rare and should be coordinated in advance with the Design Systems team.
 
-The changeset CLI will also ask you to input a message detailing your changes. The completion of the command will generate a new changeset markdown file. You are more than welcome to edit this file after it has been generated, so don't get hung up on trying to write the perfect text from the command line. Aim to make the text of the changeset file(s) as descriptive and informative as possible, as they will be used to build a changelog file when the new version is released.
+The changeset CLI will also ask you to input a message detailing your changes. The completion of the command will generate a new changeset markdown file. You are more than welcome to edit this file after it has been generated, so don't get hung up on trying to write the perfect text from the command line. Aim to make the text of the changeset file(s) as descriptive and informative as possible, as they will be used to build a changelog file when the new version is released.  Check out our documentation for the [Seeds Release Process](https://sprout.atlassian.net/wiki/spaces/SEEDS/pages/3522756609/DS+Seeds+Release+Process#Changesets) for examples of what makes a good or bad changeset.
 
 **You can add as many changesets to a PR as you would like.** If your PR makes several distinct changes to Racine, you should create a changeset detailing each one individually.
 
 ### **🗣 Step 4: Create a pull request**
 
-Once you're ready to submit your changes for review, open a PR against the `dev` branch in `sproutsocial/racine`. A few things will happen:
+Once you're ready to submit your changes for review, open a PR against the `dev` branch. A few things will happen:
 
-- The Racine maintainers will be tagged to review your code. Feel free to tag any specific individuals who you think should take a look.
-- Racine's test suite will be ran on CI, and the status will be reported on the PR. You can run `yarn test` to run these tests locally. If there are any issues, they will need to be resolved before the PR can be merged.
-- If you're a member of the Design Systems team: Netlify will create a preview deploy of Racine's Storybook so that you can see your changes and share them with others. Due to limited Netlify seats only a limited group of developers can generate builds.
+- The Racine maintainers will be tagged to review your code. Feel free to additionally tag any specific individuals who you think should take a look.
+- Visual regression testing will run against your PR, and the results can be found in the "Report" artifact on the summary page for the associated Github Action run. `html_report/index.html` in `Report.zip` will show you what passed and what failed.
+- Racine's test suite will run via CI, and the status will be reported on the PR. You can run `yarn test` to run these tests locally. If there are any issues, they will need to be resolved before the PR can be merged.
+- Netlify will create a preview deploy of Racine's Storybook and include a link to it in a comment on the PR so you can see your changes and share them with others.
+- A Racine package snapshot including your changes will be published to Artifactory and included in a comment on the PR so you can install it locally or in a web app PR/snapshot in order to test your changes.
 
-You may be asked to make changes to match Racine's contribution guidelines, so expect to keep attention on your PR for a little bit. Once your tests are passing and you have at least one approving Design Systems review, a member of the Design Systems team will merge your changes for inclusion in a future release of Racine!
+You may be asked to make changes to match Racine's contribution guidelines, so expect to keep attention on your PR for a little bit. Once your tests are passing and you have at least one approving Design Systems review, a member of the Design Systems team will merge your changes for inclusion in a future release of Racine!  Please **do NOT** merge your own PR unless expressly told to, since commits to `dev` end up in the next release, and the Design Systems team needs to make sure they have the bandwidth to validate any contribution before it releases.
 
-### **☁️ Step 5: Publish your changes to npm**
+### **☁️ Step 5: Changes get published to Artifactory**
 
-As PRs get merged into Racine, changsets will keep a running PR open called `Version Packages`. This PR will detail all of the changes that have been made to the package since the last publish. **Anyone can release a new version of Racine by merging this PR.**
+When the Design Systems team prepares the next Racine release, changsets will generate a PR called `Version Packages`. This PR will detail all of the changes that have been made to the package since the last publish. Merging this PR will release a new version of Racine.
 
-When the PR is merged, [GitHub will kick off a publish of the new version](https://github.com/sproutsocial/racine/actions?query=workflow%3ARelease). There will be a notification in #eng-ui-systems in Slack when the new version is available.
+When the PR is merged, [GitHub will kick off a publish of the new version](https://github.com/sproutsocial/racine/actions?query=workflow%3ARelease). There will be a notification in #design-systems in Slack when the new version is available.
 
 ### **✍ Step 6: Document your changes**
 
-Racine components are documented in [Seeds](https://sproutsocial.com/seeds/components), Sprout's design system. You can open a PR to the [Seeds repository](https://github.com/sproutsocial/seeds) to add or edit component documentation. Reach out to the Design Systems team for help getting started.
+Racine components are documented in [Seeds](https://sproutsocial.com/seeds/components), Sprout's design system. You can open a PR to the [Seeds repository](https://github.com/sproutsocial/seeds) to add or edit component documentation.  It's a good idea to have documentation changes ready to go at the same time your Racine contributions are deployed, so start early!  Reach out to the Design Systems team if you need help getting started.

package/__flow__/Card/Card.flow.js

@@ -1,5 +1,9 @@
 // @flow
 import * as React from 'react';
-import type { TypeCardProps } from "./CardTypes.flow";
+import type { TypeCardProps, TypeCardLink, TypeCardArea } from "./CardTypes.flow";
 declare var Card: React.StatelessFunctionalComponent<TypeCardProps>;
+declare export var CardLink: React.StatelessFunctionalComponent<TypeCardLink>;
+declare export var CardHeader: React.StatelessFunctionalComponent<TypeCardArea>;
+declare export var CardContent: React.StatelessFunctionalComponent<TypeCardArea>;
+declare export var CardFooter: React.StatelessFunctionalComponent<TypeCardArea>;
 declare export default typeof Card;

package/__flow__/Card/CardTypes.flow.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import type { TypeIconProps } from "../Icon/index.flow";
 import type { TypeStyledComponentsCommonProps, TypePropsWithChildren } from "../types/index.flow";
-import type { TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps } from "../systemProps/index.flow";
+import type { TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps } from "../systemProps/index.flow";
 export type TypeSharedCardSystemProps = TypePropsWithChildren<{|
   ...TypeStyledComponentsCommonProps,
   ...TypeBorderSystemProps,
@@ -63,4 +63,11 @@ export type TypeStyledSelectedIcon = {
   ...TypeIconProps,
   $selected: $PropertyType<TypeCardStyleTransientProps, '$selected'>,
   ...
+};
+export type TypeCardLink = {
+  ...TypeColorSystemProps,
+  ...TypeTypographySystemProps,
+  affordance?: boolean,
+  external?: boolean,
+  ...
 };

package/__flow__/EnumLogoNames.flow.js

@@ -1,2 +1,2 @@
 // @flow
-export type EnumLogoNames = "adobe-experience-manager-dark" | "adobe-experience-manager" | "apple-app-store-dark" | "apple-app-store" | "bigcommerce-dark" | "bigcommerce-lockup-dark" | "bigcommerce-lockup" | "bigcommerce" | "bitly-dark" | "bitly" | "bynder-dark" | "bynder" | "canva-dark" | "canva" | "dropbox-dark" | "dropbox-lockup-dark" | "dropbox-lockup" | "dropbox-wordmark-dark" | "dropbox-wordmark" | "dropbox" | "facebook-audience-network-dark" | "facebook-audience-network" | "facebook-dark" | "facebook-groups-dark" | "facebook-groups" | "facebook-shops-dark" | "facebook-shops" | "facebook" | "feedly-dark" | "feedly" | "glassdoor-dark" | "glassdoor" | "google-analytics-dark" | "google-analytics" | "google-business-messages-dark" | "google-business-messages" | "google-drive-dark" | "google-drive" | "google-my-business-dark" | "google-my-business" | "google-play-store-dark" | "google-play-store" | "hubspot-dark" | "hubspot" | "instagram-dark" | "instagram" | "linkedin-audience-network-dark" | "linkedin-audience-network" | "linkedin-dark" | "linkedin" | "marketo-dark" | "marketo" | "messenger-dark" | "messenger" | "microsoft-dynamics-dark" | "microsoft-dynamics" | "pinterest-dark" | "pinterest" | "reddit-dark" | "reddit" | "salesforce-dark" | "salesforce" | "shopify-dark" | "shopify" | "slack-dark" | "slack" | "sproutsocial-dark" | "sproutsocial-lockup-dark" | "sproutsocial-lockup" | "sproutsocial-wordmark-dark" | "sproutsocial-wordmark" | "sproutsocial" | "tiktok-dark" | "tiktok" | "tripadvisor-dark" | "tripadvisor" | "tumblr-dark" | "tumblr" | "twitter-audience-network-dark" | "twitter-audience-network" | "twitter-dark" | "twitter" | "whatsapp-dark" | "whatsapp" | "woocommerce-dark" | "woocommerce" | "yelp-dark" | "yelp" | "youtube-dark" | "youtube" | "zendesk-dark" | "zendesk-lockup-dark" | "zendesk-lockup" | "zendesk-wordmark-dark" | "zendesk-wordmark" | "zendesk";
+export type EnumLogoNames = "adobe-experience-manager" | "android" | "apple-app-store" | "apple" | "bigcommerce" | "bitly" | "bynder" | "canva" | "dropbox" | "facebook-audience-network" | "facebook" | "facebook-groups" | "facebook-shops" | "feedly" | "github" | "glassdoor" | "google-analytics" | "google-business-messages" | "google-drive" | "google-my-business" | "google-play-store" | "hubspot" | "instagram" | "linkedin-audience-network" | "linkedin" | "marketo" | "messenger" | "microsoft-dynamics" | "pinterest" | "reddit-alien" | "reddit" | "salesforce-cloud" | "salesforce" | "shopify" | "slack" | "sproutsocial" | "tableau" | "tiktok" | "tripadvisor" | "tumblr" | "twitter-audience-network" | "twitter" | "whatsapp" | "woocommerce" | "yelp" | "youtube" | "zendesk";

package/__flow__/Icon/Icon.flow.js

@@ -2,10 +2,10 @@
 import * as React from 'react';
 import type { StyledComponent } from 'styled-components';
 import type { EnumIconNames } from "../EnumIconNames.flow";
+import type { EnumLogoNames } from "../EnumLogoNames.flow";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 import type { TypeTheme } from "../types/theme.flow";
 import deprecatedIcons from "./deprecatedIcons.flow";
-import type { TypePartnerNames } from "../PartnerLogo/TypePartnerNames.flow";
 export type TypeIconSize = 'mini' // 12x12
 // TODO: deprecate default  in favor of small in future release
 | 'default' // 16x16
@@ -14,7 +14,7 @@ export type TypeIconSize = 'mini' // 12x12
 | 'large' // 32x32
 | 'jumbo'; // 64x64
 
-export type TypeIconName = EnumIconNames | $Keys<typeof deprecatedIcons> | TypePartnerNames;
+export type TypeIconName = EnumIconNames | $Keys<typeof deprecatedIcons> | EnumLogoNames;
 export type TypeIconProps = {
   /** Name of the icon in the svg sprite */
   name: TypeIconName,

package/__flow__/LogoViewBoxes.js

@@ -1,8 +1,12 @@
 module.exports = {
   "adobe-experience-manager-dark": "0 0 16 17",
   "adobe-experience-manager": "0 0 16 17",
+  "android-dark": "0 0 18 18",
+  "android": "0 0 18 18",
   "apple-app-store-dark": "0 0 140 140",
   "apple-app-store": "0 0 140 140",
+  "apple-dark": "0 0 18 18",
+  "apple": "0 0 18 18",
   "bigcommerce-dark": "0 0 140 140",
   "bigcommerce-lockup-dark": "0 0 291 66",
   "bigcommerce-lockup": "0 0 291 66",
@@ -29,6 +33,8 @@ module.exports = {
   "facebook": "0 0 141 139",
   "feedly-dark": "0 0 141 123",
   "feedly": "0 0 141 123",
+  "github-dark": "0 0 18 18",
+  "github": "0 0 18 18",
   "glassdoor-dark": "0 0 140 196",
   "glassdoor": "0 0 140 196",
   "google-analytics-dark": "0 0 140 160",
@@ -57,8 +63,12 @@ module.exports = {
   "microsoft-dynamics": "0 0 140 227",
   "pinterest-dark": "0 0 140 141",
   "pinterest": "0 0 140 141",
+  "reddit-alien-dark": "0 0 18 18",
+  "reddit-alien": "0 0 18 18",
   "reddit-dark": "0 0 140 140",
   "reddit": "0 0 140 140",
+  "salesforce-cloud-dark": "0 0 20 18",
+  "salesforce-cloud": "0 0 20 18",
   "salesforce-dark": "0 0 140 99",
   "salesforce": "0 0 140 99",
   "shopify-dark": "0 0 140 159",
@@ -71,6 +81,10 @@ module.exports = {
   "sproutsocial-wordmark-dark": "0 0 320 52",
   "sproutsocial-wordmark": "0 0 320 52",
   "sproutsocial": "0 0 140 174",
+  "tableau-dark": "0 0 18 18",
+  "tableau-lockup-dark": "0 0 291 56",
+  "tableau-lockup": "0 0 291 56",
+  "tableau": "0 0 18 18",
   "tiktok-dark": "0 0 140 159",
   "tiktok": "0 0 140 159",
   "tripadvisor-dark": "0 0 140 140",

package/__flow__/Numeral/Numeral.flow.js

@@ -12,6 +12,8 @@ export type TypeNumeralProps = {
   currency?: string,
   /** A boolean determining whether or not the number should be abbreviated, or a number representing the abbreviation threshold  */
   abbreviate?: boolean | number,
+  /** Text to be read off by screen readers for invalid values (i.e., any value rendered as '—' (em dash)) */
+  invalidNumberLabel?: string,
   /** Override the default decimal precision (2 for decimals/currency, 1 for percentages), or "none" allowing unrestricted precision. */
   precision?: number | 'none',
   qa?: Object,

package/__flow__/PartnerLogo/PartnerLogo.flow.js

@@ -1,9 +1,14 @@
 // @flow
 import * as React from 'react';
-import type { TypePartnerNames } from "./TypePartnerNames.flow";
+import type { EnumLogoNames } from "../EnumLogoNames.flow";
+
+/**
+ * @deprecated Use EnumLogoNames instead
+ */
+export type TypePartnerNames = EnumLogoNames;
 export type TypePartnerLogoProps = {
   /** The name of the partner whose logo you want to render. */
-  partnerName: TypePartnerNames,
+  partnerName: EnumLogoNames,
   /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
   backgroundType?: 'dark' | 'light',
   logoType?: 'symbol' | 'wordmark' | 'lockup',

package/__flow__/PartnerLogo/index.flow.js

@@ -1,3 +1,2 @@
 // @flow
-export * from "./PartnerLogo.flow";
-export * from "./TypePartnerNames.flow";
+export * from "./PartnerLogo.flow";

package/__flow__/Toast/Toast.flow.js

@@ -1,13 +1,13 @@
 // @flow
 import * as React from 'react';
 import type { TypeColor } from "../types/theme.flow";
-import type { EnumIconNames } from "../EnumIconNames.flow";
+import type { TypeIconName } from "../Icon/Icon.flow";
 export type TypeToastTheme = 'info' | 'success' | 'warning' | 'error';
 export type TypeToastProps = {|
   theme?: TypeToastTheme,
   content: React.Node,
   color?: TypeColor,
-  icon?: EnumIconNames,
+  icon?: TypeIconName,
 |};
 export type TypeToastOptions = {|
   ...TypeToastProps,

package/__flow__/index.flow.js

@@ -105,8 +105,7 @@ export type { EnumDensities, TypeMessageProps } from "./Message/index.flow";
 export type { TypeModalProps, TypeModalContentProps, TypeModalFooterProps, TypeModalHeaderProps } from "./Modal/index.flow";
 export type { TypeNumeralProps } from "./Numeral/index.flow";
 export type { TypeOverflowListProps, TypeVirtualizedListProps } from "./OverflowList/index.flow";
-export type { TypePartnerLogoProps } from "./PartnerLogo/index.flow";
-export type { TypePartnerNames } from "./PartnerLogo/TypePartnerNames.flow";
+export type { TypePartnerLogoProps, TypePartnerNames } from "./PartnerLogo/index.flow";
 export type { EnumPlacements, TypePopoutProps } from "./Popout/index.flow";
 export type { TypeRadioProps } from "./Radio/index.flow";
 export type { TypeSegmentedControlProps, TypeSegmentedControlItemProps } from "./SegmentedControl/index.flow";

package/commonjs/Card/Card.js

@@ -51,13 +51,17 @@ var Card = function Card(_ref) {
     hasSubComponent = _useState2[0],
     setHasSubComponent = _useState2[1];
   var containerRef = (0, _react.useRef)(null);
+  var linkRef = (0, _react.useRef)(null);
+  var isRoleLink = role === 'link';
   var checkedConditions = role === 'checkbox' ? selected : undefined;
+  var cardContext = {
+    setHasSubComponent: setHasSubComponent,
+    href: href,
+    linkRef: linkRef
+  };
   var handleClickConditions = function handleClickConditions(e) {
-    return role === 'link' ? (0, _utils.navigateTo)({
-      e: e,
-      href: href,
-      ref: containerRef
-    }) : onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    var _linkRef$current;
+    return isRoleLink ? (_linkRef$current = linkRef.current) === null || _linkRef$current === void 0 ? void 0 : _linkRef$current.click() : onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
   var handleKeyDown = function handleKeyDown(e) {
     return (0, _utils.onKeyDown)({
@@ -69,8 +73,8 @@ var Card = function Card(_ref) {
     });
   };
   return /*#__PURE__*/_react.default.createElement(_styles.StyledCard, _extends({
-    tabIndex: 0,
-    role: role,
+    tabIndex: isRoleLink ? -1 : 0,
+    role: isRoleLink ? undefined : role,
     onClick: handleClickConditions,
     onKeyDown: handleKeyDown,
     $elevation: elevation,
@@ -79,11 +83,12 @@ var Card = function Card(_ref) {
     "aria-checked": checkedConditions,
     $disabled: disabled,
     "aria-disabled": disabled && disabled,
-    $compositionalComponents: hasSubComponent
+    $compositionalComponents: hasSubComponent,
+    $isRoleLink: isRoleLink
   }, rest), /*#__PURE__*/_react.default.createElement(_subComponents.SelectedIcon, {
     $selected: selected
   }), /*#__PURE__*/_react.default.createElement(_utils.SubComponentContext.Provider, {
-    value: setHasSubComponent
+    value: cardContext
   }, children));
 };
 var _default = Card;

package/commonjs/Card/index.js

@@ -7,7 +7,8 @@ var _exportNames = {
   Card: true,
   CardHeader: true,
   CardContent: true,
-  CardFooter: true
+  CardFooter: true,
+  CardLink: true
 };
 Object.defineProperty(exports, "Card", {
   enumerable: true,
@@ -33,6 +34,12 @@ Object.defineProperty(exports, "CardHeader", {
     return _subComponents.CardHeader;
   }
 });
+Object.defineProperty(exports, "CardLink", {
+  enumerable: true,
+  get: function get() {
+    return _subComponents.CardLink;
+  }
+});
 exports.default = void 0;
 var _Card = _interopRequireDefault(require("./Card"));
 var _subComponents = require("./subComponents");

package/commonjs/Card/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSelectedIcon = exports.StyledCardHeader = exports.StyledCardFooter = exports.StyledCardContent = exports.StyledCard = exports.SelectedIconWrapper = void 0;
+exports.StyledSelectedIcon = exports.StyledCardLink = exports.StyledCardHeader = exports.StyledCardFooter = exports.StyledCardContent = exports.StyledCardAffordance = exports.StyledCard = exports.SelectedIconWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _mixins = require("../utils/mixins");
@@ -69,10 +69,23 @@ var StyledSelectedIcon = (0, _styledComponents.default)(_Icon.default).withConfi
   return $selected && "\n    opacity: 1;\n  ";
 });
 exports.StyledSelectedIcon = StyledSelectedIcon;
+var StyledCardLink = _styledComponents.default.a.withConfig({
+  displayName: "styles__StyledCardLink",
+  componentId: "sc-9tyqu4-5"
+})(["font-family:", ";font-weight:", ";color:", ";", ";", " ", ""], function (p) {
+  return p.theme.fontFamily;
+}, function (p) {
+  return p.theme.fontWeights.bold;
+}, function (p) {
+  return p.theme.colors.text.headline;
+}, function (p) {
+  return p.theme.typography[400];
+}, _styledSystem.color, _styledSystem.typography);
+exports.StyledCardLink = StyledCardLink;
 var StyledCard = _styledComponents.default.div.withConfig({
   displayName: "styles__StyledCard",
-  componentId: "sc-9tyqu4-5"
-})(["position:relative;display:flex;flex-direction:column;box-sizing:border-box;margin:0;background:", ";border:", " solid ", ";padding:", ";border-radius:", ";transition:box-shadow ", ",border ", ";&[role='link'],&[role='button'],&[role='checkbox']{cursor:pointer;}&:hover{box-shadow:", ";}&:focus{", "}", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref11) {
+  componentId: "sc-9tyqu4-6"
+})(["position:relative;display:flex;flex-direction:column;box-sizing:border-box;margin:0;background:", ";border:", " solid ", ";padding:", ";border-radius:", ";transition:box-shadow ", ",border ", ";&[role='button'],&[role='checkbox']{cursor:pointer;}", " &:hover{box-shadow:", ";}&:focus-within{", " ", ":focus{border:none;box-shadow:none;outline:none;}}&:focus{", "}", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref11) {
   var theme = _ref11.theme;
   return theme.colors.container.background.base;
 }, function (_ref12) {
@@ -95,16 +108,31 @@ var StyledCard = _styledComponents.default.div.withConfig({
   var theme = _ref17.theme;
   return theme.duration.medium;
 }, function (_ref18) {
-  var theme = _ref18.theme,
-    _ref18$$elevation = _ref18.$elevation,
-    $elevation = _ref18$$elevation === void 0 ? 'low' : _ref18$$elevation;
+  var $isRoleLink = _ref18.$isRoleLink;
+  return $isRoleLink && "\n\t\tcursor: pointer;\n\t";
+}, function (_ref19) {
+  var theme = _ref19.theme,
+    _ref19$$elevation = _ref19.$elevation,
+    $elevation = _ref19$$elevation === void 0 ? 'low' : _ref19$$elevation;
   return theme.shadows[$elevation];
-}, _mixins.focusRing, function (_ref19) {
-  var $disabled = _ref19.$disabled;
-  return $disabled && "\n    ".concat(_mixins.disabled, "\n  ");
 }, function (_ref20) {
-  var $selected = _ref20.$selected,
-    theme = _ref20.theme;
+  var $isRoleLink = _ref20.$isRoleLink;
+  return $isRoleLink ? _mixins.focusRing : null;
+}, StyledCardLink, _mixins.focusRing, function (_ref21) {
+  var $disabled = _ref21.$disabled;
+  return $disabled && "\n    ".concat(_mixins.disabled, "\n  ");
+}, function (_ref22) {
+  var $selected = _ref22.$selected,
+    theme = _ref22.theme;
   return $selected && "\n    border: ".concat(theme.borderWidths[500], " solid ").concat(theme.colors.container.border.selected, ";  \n  ");
 }, _styledSystem.border, _styledSystem.color, _styledSystem.flexbox, _styledSystem.grid, _styledSystem.layout, _styledSystem.position, _styledSystem.space);
-exports.StyledCard = StyledCard;
+exports.StyledCard = StyledCard;
+var StyledCardAffordance = (0, _styledComponents.default)(_Icon.default).withConfig({
+  displayName: "styles__StyledCardAffordance",
+  componentId: "sc-9tyqu4-7"
+})(["", ":hover &{transform:translateX(", ");}transition:", ";"], StyledCard, function (p) {
+  return p.theme.space[200];
+}, function (p) {
+  return p.theme.duration.medium;
+});
+exports.StyledCardAffordance = StyledCardAffordance;

package/commonjs/Card/subComponents.js

@@ -1,16 +1,21 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectedIcon = exports.CardHeader = exports.CardFooter = exports.CardContent = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.SelectedIcon = exports.CardLink = exports.CardHeader = exports.CardFooter = exports.CardContent = exports.CardAffordance = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _utils = require("./utils");
 var _styles = require("./styles");
 var _excluded = ["children"],
   _excluded2 = ["children"],
-  _excluded3 = ["children"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  _excluded3 = ["children"],
+  _excluded4 = ["affordance", "children", "external", "color"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var CardContent = function CardContent(_ref) {
@@ -45,4 +50,40 @@ var SelectedIcon = function SelectedIcon(_ref4) {
     $selected: $selected
   }));
 };
-exports.SelectedIcon = SelectedIcon;
+exports.SelectedIcon = SelectedIcon;
+var CardAffordance = function CardAffordance(_ref5) {
+  var rest = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCardAffordance, _extends({}, rest, {
+    size: "mini",
+    name: "arrow-right"
+    // TODO: probably need to make this available to the top level for external links https://sprout.atlassian.net/browse/DS-2223
+    ,
+    "aria-hidden": true
+  }));
+};
+exports.CardAffordance = CardAffordance;
+var CardLink = function CardLink(_ref6) {
+  var affordance = _ref6.affordance,
+    children = _ref6.children,
+    _ref6$external = _ref6.external,
+    external = _ref6$external === void 0 ? false : _ref6$external,
+    color = _ref6.color,
+    rest = _objectWithoutProperties(_ref6, _excluded4);
+  var _useContext = (0, _react.useContext)(_utils.SubComponentContext),
+    href = _useContext.href,
+    linkRef = _useContext.linkRef;
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledCardLink, _extends({}, rest, {
+    target: external ? '_blank' : undefined,
+    rel: external ? 'noreferrer' : undefined,
+    href: href,
+    ref: linkRef
+    // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ,
+    color: color
+  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, affordance ? /*#__PURE__*/_react.default.createElement(CardAffordance, {
+    ml: 300
+  }) : null));
+};
+exports.CardLink = CardLink;

package/commonjs/Card/utils.js

@@ -7,13 +7,17 @@ exports.onKeyDown = exports.navigateTo = exports.SubComponentContext = void 0;
 exports.useChildContext = useChildContext;
 var _react = require("react");
 var _utils = require("../utils");
-var SubComponentContext = /*#__PURE__*/(0, _react.createContext)(
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function () {});
+var SubComponentContext = /*#__PURE__*/(0, _react.createContext)({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setHasSubComponent: function setHasSubComponent() {},
+  href: '',
+  linkRef: null
+});
 exports.SubComponentContext = SubComponentContext;
 function useChildContext() {
-  var setHasSubComponent = (0, _react.useContext)(SubComponentContext);
-  setHasSubComponent(true);
+  var _useContext = (0, _react.useContext)(SubComponentContext),
+    setHasSubComponent = _useContext.setHasSubComponent;
+  setHasSubComponent && setHasSubComponent(true);
 }
 var navigateTo = function navigateTo(_ref) {
   var _ref$current, _window$open;