@sproutsocial/racine 12.20.0 → 12.21.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## 12.21.0
+
+### Minor Changes
+
+- ae9f649c: This change includes infrastructure changes to :
+
+  - Storybook and dependency version bumps
+  - Removal of deprecated Storybook `add-on knobs` in favor of supported `add-on controls`
+  - Added system prop types to Stack and TableCell
+  - We are now exporting `TypeProps` for Banner, Box, CharacterCounter, Drawer, FormField, Indicator, Input, KeyboardKey, Link, Select, Stack, TableHeaderCell, Text, TextArea, and TokenInput
+
+- ae9f649c: This change adds a molecule spot illustration to the SpotIllustration component
+
+### Patch Changes
+
+- ae9f649c: Updated a number of depencies to ensure Racine tech is on the latest versions
+- ae9f649c: An accessibility bug on the `Menu` has been fixed that caused the `Menu.Item` index to become out of sync when items are removed.
+
+  The `Menu` component currently supports adding and removing menu items dynamically, but an index needed for accessibility was only being updated when items are added but not when they are removed.
+
 ## 12.20.0
 
 ### Minor Changes

package/README.md

@@ -19,21 +19,21 @@
   <a href="https://github.com/sproutsocial/racine/blob/main/LICENSE"><img src="https://flat.badgen.net/badge/license/MIT/blue" alt=""></a>
 </p>
 
---- 
+---
 
 ## Installation
 
-To work on Racine, you will need to set up your environment to use Artifactory. 
+To work on Racine, you will need to set up your environment to use Artifactory.
 
-Follow the instructions to do so [on the wiki](https://sprout.atlassian.net/wiki/spaces/INFRA/pages/3380249272/Getting+started+with+Artifactory+for+NPM+Yarn.).  
+Follow the instructions to do so [on the wiki](https://sprout.atlassian.net/wiki/spaces/INFRA/pages/3380249272/Getting+started+with+Artifactory+for+NPM+Yarn.).
 
 Then, copy the `_auth` and `email` settings in your `$HOME/.npmrc` into environmental variables in your shell's rc file (e.g. `$HOME/.zshrc` or `$HOME/.bashrc`), then re-`source` your rc file.
+
 ```shell
 export JFROG_AUTH="_auth string goes here"
 export JFROG_EMAIL="email string goes here"
 ```
 
-
 Install Racine using npm or yarn:
 
 ```sh
@@ -62,13 +62,13 @@ styled-components
 Then, wrap your app's React root in Racine's `ThemeProvider` component:
 
 ```js
-import { ThemeProvider } from '@sproutsocial/racine'
+import {ThemeProvider} from '@sproutsocial/racine';
 
-const App = props => (
+const App = (props) => (
   <ThemeProvider>
     <div>your app here</div>
   </ThemeProvider>
-)
+);
 ```
 
 ## Documentation
@@ -84,10 +84,12 @@ Racine uses [Storybook](https://storybook.js.org) for local development. Here's
 1. Clone this repo: `git clone https://github.com/sproutsocial/racine`
 2. Follow these instructions to configure Artifactory for dependencies: https://sprout.atlassian.net/wiki/spaces/INFRA/pages/3380249272/Getting+started+with+Artifactory+for+NPM+Yarn
 3. Copy the `_auth` and `email` settings in your `$HOME/.npmrc` into environmental variables in your shell's rc file (e.g. `$HOME/.zshrc` or `$HOME/.bashrc`), then re-`source` your rc file.
+
 ```shell
 export JFROG_AUTH="_auth string goes here"
 export JFROG_EMAIL="email string goes here"
 ```
+
 4. Install dependencies: `yarn`
 5. Run the dev app: `yarn start`
 
@@ -100,43 +102,43 @@ Test any local package in another project by utilizing [yarn link](https://yarnp
 
 1. Navigate to your local copy of Racine in a terminal window
 
-  ```shell
-  $ cd ~/YourCodeFolder/racine
-  $ yarn link # only needs to be run once
-  $ yarn start
-  ```
+```shell
+$ cd ~/YourCodeFolder/racine
+$ yarn link # only needs to be run once
+$ yarn start
+```
 
-  **Note**: This build task packages _all_ Racine components into the bundle, not just the specific components you are adding or modifying. After `yarn link` succeeds and Racine is globally linked, you shouldn't have to run link again.
+**Note**: This build task packages _all_ Racine components into the bundle, not just the specific components you are adding or modifying. After `yarn link` succeeds and Racine is globally linked, you shouldn't have to run link again.
 
 2. Navigate to the folder you wish to use Racine components in your terminal (such as `web-app-core`) and complete the link
 
-  ```shell
-  $ cd ~/YourCodeFolder/web-app-core
-  $ yarn link "@sproutsocial/racine"
-  $ yarn start
-  ```
+```shell
+$ cd ~/YourCodeFolder/web-app-core
+$ yarn link "@sproutsocial/racine"
+$ yarn start
+```
 
 3. You can now use any components from your local instance of Racine in your project. See below for an example usage
 
-  ```jsx
-  /* ~/YourCodeFolder/web-app-core/YourFile.js */
-  import {Icon} from '@sproutsocial/racine';
-  // ...
-  <Icon name='compose' />
-  ```
+```jsx
+/* ~/YourCodeFolder/web-app-core/YourFile.js */
+import {Icon} from '@sproutsocial/racine';
+// ...
+<Icon name="compose" />;
+```
 
 4. **When you are done, be sure to unlink Racine so you are using the app's version of the package**
 
-  ```
-  $ yarn unlink "@sproutsocial/racine"
-  $ yarn
-  ```
+```
+$ yarn unlink "@sproutsocial/racine"
+$ yarn
+```
 
 </details>
 
-## Contributing 
+## Contributing
 
-The Design Systems team works on a regular two-week sprint cadence to iterate against Racine's roadmap and assist in any ad-hoc issues that may come up. That said, contributions to Racine are welcomed from any member of the wider Sprout org. Whether you're adding a new component or simply fixing a bug, every improvement to the library is future leverage for our peers, our product, and our customers. 
+The Design Systems team works on a regular two-week sprint cadence to iterate against Racine's roadmap and assist in any ad-hoc issues that may come up. That said, contributions to Racine are welcomed from any member of the wider Sprout org. Whether you're adding a new component or simply fixing a bug, every improvement to the library is future leverage for our peers, our product, and our customers.
 
 ### **🔍 Step 1: Find a way to contribute**
 
@@ -150,22 +152,22 @@ There are a few ways to get involved:
 
 Racine's file structure is set up like this:
 
-- `codemods` - For major updates to Racine that have breaking changes, codemods are included for automatically handling component API updates. 
+- `codemods` - For major updates to Racine that have breaking changes, codemods are included for automatically handling component API updates.
 - `src`
   - `ComponentName` - Every component in Racine has a folder within the `src` directory.
     - `index.js` - This file should export the component as its default export.
     - `index.stories.js` - Storybook stories can be written here.
     - `index.test.js` - All component tests live inside this file.
     - `styles.js` - Any style-specific components live here.
-  - `utils` - This directory includes a set of common utilities and helpers that we use throughout Racine. 
+  - `utils` - This directory includes a set of common utilities and helpers that we use throughout Racine.
 
-And you can interact with Racine via the command line with these commands: 
+And you can interact with Racine via the command line with these commands:
 
-- `yarn new` - This command will prompt you for the name of your component, and then generate all of the boilerplate you need to create the component. 
+- `yarn new` - This command will prompt you for the name of your component, and then generate all of the boilerplate you need to create the component.
 - `yarn start` - This will watch the Racine package for changes, and also run Storybook locally so that you can see your changes as you go.
 - `yarn change` - This command will generate a changeset file that is used to document changes to the Racine package. If you are making a PR to Racine that should result in a version bump to the package, you will need to run this command to add a changeset. You can [learn more about this command](#-step-3-make-your-changes) in step 3.
-- `yarn build` - Generate production builds for the Racine package. 
-- `yarn test` - Run Racine's test suite.  **Note:** `yarn start` must be run before `yarn test` to build generated files and directories
+- `yarn build` - Generate production builds for the Racine package.
+- `yarn test` - Run Racine's test suite. **Note:** `yarn start` must be run before `yarn test` to build generated files and directories
 - `yarn clean` - Delete all generated files and directories.
 - `yarn release` - This will trigger the release process for creating a new version of the Racine package on npm. **Only Racine administrators can perform the release process.**
 
@@ -175,9 +177,9 @@ If you're not a member of the Design Systems team, you'll want to start by creat
 
 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.
 
-*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.*
+_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._
 
-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. 
+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.**
 
@@ -187,7 +189,7 @@ When running this command, you will be asked to select whether your change is a
 
 - **patch** changes are for bug fixes, and they bump the last digit in the version number (`x.x.0`)
 - **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.
+- **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.
 
@@ -197,18 +199,18 @@ The changeset CLI will also ask you to input a message detailing your changes. T
 
 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:
 
-- 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. 
+- 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.
 
-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!
 
 ### **☁️ Step 5: Publish your changes to npm**
 
 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 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 #eng-ui-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. Reach out to the Design Systems team for help getting started.

package/__flow__/Avatar/index.js

@@ -1,59 +1,59 @@
 // @flow
-import * as React from "react";
-import { useState, useCallback, useMemo, memo } from "react";
-import styled, { css, type StyledComponent } from "styled-components";
-import classnames from "classnames";
+import * as React from 'react';
+import {useState, useCallback, useMemo, memo} from 'react';
+import styled, {css, type StyledComponent} from 'styled-components';
+import classnames from 'classnames';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-import Box from "../Box";
-import Image from "../Image";
-import Text from "../Text";
+import Box from '../Box';
+import Image from '../Image';
+import Text from '../Text';
 
 export type TypeProps = {
   /** Circles are used for social profile avatars, leaf is for internal Sprout user avatars */
-  appearance?: "circle" | "leaf",
+  appearance?: 'circle' | 'leaf',
   /** The name of the user that the avatar represents */
   name: string,
   /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
   src?: string,
-  type?: "neutral" | "purple" | "green" | "blue" | "yellow" | "red" | "orange",
-  variant?: "dark" | "light",
+  type?: 'neutral' | 'purple' | 'green' | 'blue' | 'yellow' | 'red' | 'orange',
+  variant?: 'dark' | 'light',
   bg?: string,
   color?: string,
   size?: string,
 };
 
-const AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`
+const AvatarText = styled(({fontSize, ...rest}) => <Text {...rest} />)`
   font-size: ${(props) => props.fontSize}px;
   color: ${(props) => props.color}px;
 `;
 const Container: StyledComponent<any, TypeTheme, *> = styled(Box)`
-  ${({ theme, type, variant, bg }) => css`
-    color: ${theme.colors[type][variant === "dark" ? "200" : "900"]};
+  ${({theme, type, variant, bg}) => css`
+    color: ${theme.colors[type][variant === 'dark' ? '200' : '900']};
     background: ${bg
       ? bg
-      : theme.colors[type][variant === "dark" ? "900" : "200"]};
+      : theme.colors[type][variant === 'dark' ? '900' : '200']};
   `}
 `;
 
-const getInitials = (name: string, fallback: string = "?"): string => {
-  if (!name || typeof name !== "string") return fallback;
+const getInitials = (name: string, fallback: string = '?'): string => {
+  if (!name || typeof name !== 'string') return fallback;
   return name
-    .replace(/\s+/, " ")
-    .split(" ") // Repeated spaces results in empty strings
+    .replace(/\s+/, ' ')
+    .split(' ') // Repeated spaces results in empty strings
     .slice(0, 2)
     .map((v) => v && v[0].toUpperCase()) // Watch out for empty strings
-    .join("");
+    .join('');
 };
 
 export const Avatar = ({
-  appearance = "circle",
+  appearance = 'circle',
   name,
   src,
-  variant = "light",
-  type = "neutral",
-  size = "40px",
+  variant = 'light',
+  type = 'neutral',
+  size = '40px',
   bg,
   color,
   ...rest
@@ -66,14 +66,14 @@ export const Avatar = ({
   }, [setImageFailedLoading]);
 
   // Font size for initials is half the size of the avatar, rounded down.
-  const fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
+  const fontSize = Math.floor(Number(size.replace('px', '')) * 0.4);
 
   return (
     <Container
       className={classnames(variant)}
       size={size}
       overflow="hidden"
-      borderRadius={appearance === "leaf" ? "40% 0 40% 0" : "50%"}
+      borderRadius={appearance === 'leaf' ? '40% 0 40% 0' : '50%'}
       position="relative"
       display="flex"
       flexShrink={0}

package/__flow__/Avatar/index.stories.js

@@ -1,15 +1,15 @@
 // @flow
-import React from "react";
-import Avatar from "./index";
+import React from 'react';
+import Avatar from './index';
 
 export default {
-  title: "Avatar",
+  title: 'Components/Avatar',
 };
 
 export const defaultStory = () => <Avatar name="Joe Smith" />;
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const customColors = () => (
@@ -17,7 +17,7 @@ export const customColors = () => (
 );
 
 customColors.story = {
-  name: "Override colors",
+  name: 'Override colors',
 };
 
 export const withVariants = () => (
@@ -38,7 +38,7 @@ export const withVariants = () => (
 );
 
 withVariants.story = {
-  name: "With color types",
+  name: 'With color types',
 };
 
 export const withImage = () => (
@@ -46,7 +46,7 @@ export const withImage = () => (
 );
 
 withImage.story = {
-  name: "With image",
+  name: 'With image',
 };
 
 export const Leaf = () => (
@@ -58,5 +58,5 @@ export const Leaf = () => (
 );
 
 Leaf.story = {
-  name: "Leaf appearance",
+  name: 'Leaf appearance',
 };

package/__flow__/Avatar/index.test.js

@@ -1,23 +1,23 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import Avatar from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import Avatar from './';
 
-describe("Avatar", () => {
-  it("should render properly", async () => {
-    const { container, runA11yCheck } = render(<Avatar />);
+describe('Avatar', () => {
+  it('should render properly', async () => {
+    const {container, runA11yCheck} = render(<Avatar />);
     expect(container).toBeTruthy();
     await runA11yCheck();
   });
 
-  it("should use the correct initials", () => {
-    const { container } = render(<Avatar name="Test User" />);
-    expect(container.textContent).toEqual("TU");
+  it('should use the correct initials', () => {
+    const {container} = render(<Avatar name="Test User" />);
+    expect(container.textContent).toEqual('TU');
   });
 
-  it("should set the correct font size", () => {
-    const { getByText } = render(<Avatar name="Test User" />);
-    expect(getByText("TU")).toHaveStyleRule("font-size", "16px");
+  it('should set the correct font size', () => {
+    const {getByText} = render(<Avatar name="Test User" />);
+    expect(getByText('TU')).toHaveStyleRule('font-size', '16px');
   });
 });

package/__flow__/Badge/constants.js

@@ -1,38 +1,38 @@
 //@flow
 
 const defaultPurple = {
-  color: "colors.text.body",
-  background: "colors.container.background.decorative.purple",
+  color: 'colors.text.body',
+  background: 'colors.container.background.decorative.purple',
 };
 
 const suggestion = {
-  color: "colors.text.body",
-  background: "colors.container.background.decorative.blue",
+  color: 'colors.text.body',
+  background: 'colors.container.background.decorative.blue',
 };
 
 const passive = {
-  color: "colors.text.body",
-  background: "colors.container.background.decorative.neutral",
+  color: 'colors.text.body',
+  background: 'colors.container.background.decorative.neutral',
 };
 
 const primary = {
-  color: "colors.text.body",
-  background: "colors.container.background.decorative.blue",
+  color: 'colors.text.body',
+  background: 'colors.container.background.decorative.blue',
 };
 
 const secondary = {
-  color: "colors.text.body",
-  background: "colors.container.background.decorative.yellow",
+  color: 'colors.text.body',
+  background: 'colors.container.background.decorative.yellow',
 };
 
 const common = {
-  color: "colors.text.inverse",
-  background: "colors.aqua.600",
+  color: 'colors.text.inverse',
+  background: 'colors.aqua.600',
 };
 
 const approval = {
-  color: "colors.text.body",
-  background: "colors.container.background.decorative.orange",
+  color: 'colors.text.body',
+  background: 'colors.container.background.decorative.orange',
 };
 
 //Deprecated former "types"

package/__flow__/Badge/index.js

@@ -1,23 +1,23 @@
 // @flow
-import * as React from "react";
-import Icon from "../Icon";
-import Container from "./styles";
-import Box from "../Box";
+import * as React from 'react';
+import Icon from '../Icon';
+import Container from './styles';
+import Box from '../Box';
 
 type TypeProps = {
   children?: React.Node,
   /** DEPRECATED: Use children instead of text */
   text?: React.Node,
   /** Size default is deprecated in favor of small and large */
-  size?: "small" | "large" | "default",
+  size?: 'small' | 'large' | 'default',
   badgeColor?:
-    | "green"
-    | "blue"
-    | "purple"
-    | "yellow"
-    | "orange"
-    | "red"
-    | "neutral",
+    | 'green'
+    | 'blue'
+    | 'purple'
+    | 'yellow'
+    | 'orange'
+    | 'red'
+    | 'neutral',
   iconName?: string,
   /** DEPRECATED: Possibly only used for testing. Refrain from using at all if possible. (optional) */
   tip?: React.Node,
@@ -31,8 +31,8 @@ const Badge = ({
   iconName,
   type,
   tip,
-  size = "small",
-  badgeColor = "blue",
+  size = 'small',
+  badgeColor = 'blue',
   ...rest
 }: TypeProps) => {
   if (children && text) {
@@ -45,12 +45,12 @@ const Badge = ({
     <Container
       {...rest}
       // size previously included default, which currently maps to small.  Once consumers have updated this can be simplified.
-      size={size === "default" ? "large" : size}
+      size={size === 'default' ? 'large' : size}
       badgeColor={badgeColor}
       data-tip={tip}
-      data-qa-badge={text || ""}
+      data-qa-badge={text || ''}
       data-qa-badge-type={type}
-      data-qa-badge-tip={tip || ""}
+      data-qa-badge-tip={tip || ''}
       type={type && type}
     >
       <Box display="flex" alignItems="center" JustifyContent="center">
@@ -58,7 +58,7 @@ const Badge = ({
           <Icon
             mr={200}
             name={iconName}
-            size={size === "small" ? "mini" : "default"}
+            size={size === 'small' ? 'mini' : 'default'}
           />
         ) : null}
         {children || text}

package/__flow__/Badge/index.stories.js

@@ -1,13 +1,13 @@
 // @flow
-import React from "react";
-import Badge from "./index";
-import Box from "../Box";
-import Numeral from "../Numeral";
-import Text from "../Text";
-import Stack from "../Stack";
+import React from 'react';
+import Badge from './index';
+import Box from '../Box';
+import Numeral from '../Numeral';
+import Text from '../Text';
+import Stack from '../Stack';
 
 export default {
-  title: "Badge",
+  title: 'Components/Badge',
 };
 
 export const permutations = () => (
@@ -45,5 +45,5 @@ export const permutations = () => (
 );
 
 permutations.story = {
-  name: "Permutations",
+  name: 'Permutations',
 };