@sproutsocial/racine 20.15.0 → 20.17.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## 20.17.0
+
+### Minor Changes
+
+- 57799e9: Add profile groups spot illustration
+
+## 20.16.0
+
+### Minor Changes
+
+- fc4f89c: Updated theme to include new 50 level magenta and teal literal colors
+
+### Patch Changes
+
+- Updated dependencies [fc4f89c]
+  - @sproutsocial/seeds-color@2.1.0
+
 ## 20.15.0
 
 ### Minor Changes

package/README.md

@@ -1,39 +1,14 @@
-<p align="center">
-  <img width="200px" src="/docs/assets/molecule.png">
-</p>
-
-<h1 align="center">Racine</h1>
-
-<p align="center">React components for Sprout Social's user interfaces</p>
-
-<p align="center"><a href="https://sproutsocial.com/seeds/components"><b>📖 View the documentation for Racine in Sprout's design system, Seeds ▸</b></a></p>
-
-<p align="center"><a href="/CHANGELOG.md"><b>🆕 Learn about what's changing in the CHANGELOG.md file ▸</b></a></p>
+# Racine
 
-<p align="center"><a href="https://github.com/sproutsocial/racine/projects/2"><b>🚧 Check out the project board to see what's in-flight and upcoming ▸</b></a></p>
-
-<p align="center">
+<p align="left">
   <a href="https://github.com/storybooks/storybook"><img src="/docs/assets/storybook.svg" alt=""></a>
   <a href="https://racine.netlify.com"><img src="https://api.netlify.com/api/v1/badges/29cdfd47-e0ce-4af0-bda9-b6d3f7ad38e5/deploy-status" alt=""></a>
   <a href="https://github.com/styled-components/styled-components"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e" alt=""></a>
-  <a href="https://github.com/sproutsocial/racine/blob/main/LICENSE"><img src="https://flat.badgen.net/badge/license/MIT/blue" alt=""></a>
+  <a href="https://github.com/sproutsocial/seeds/blob/main/seeds-react/racine/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.
-
-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
@@ -71,74 +46,28 @@ const App = (props) => (
 );
 ```
 
-## Documentation
-
-### [Racine is documented in Sprout's design system, Seeds ▸](https://sproutsocial.com/seeds/components)
-
-Racine uses [Storybook](https://storybook.js.org) as a local development environment, and for running tests against components. Every component has a `.stories.js` file where developers can write "stories" to test components in isolation. Running `yarn start` will open the Racine Storybook in your browser so that you can see changes live as you make them. [You can read more about writing stories on the Storybook website](https://storybook.js.org/docs/basics/writing-stories/).
-
 ## Local development
 
-Racine uses [Storybook](https://storybook.js.org) for local development. Here's how to get started:
+Racine uses [Storybook](https://storybook.js.org) for local development. Please refer to the root README for more information on [getting started](https://github.com/sproutsocial/seeds?tab=readme-ov-file#seeds) before continuing.
 
-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.
+### Testing Racine changes in another project
 
-```shell
-export JFROG_AUTH="_auth string goes here"
-export JFROG_EMAIL="email string goes here"
-```
+Spin up a draft PR immediately for two reasons:
 
-4. Install dependencies: `yarn`
-5. Run the dev app: `yarn start`
+1. We'll cache your build making all subsequent builds super fast
+2. Add the "📦 create test versions" label to your PR to generate a beta version of the package to use for testing in other projects.
 
-<details>
-<summary>💡 If you need to test local Racine changes in another project, click here to learn how.</summary>
+_Note: the snapshot will post as a comment on the PR once it has been generated._  
 
-<br />
-
-Test any local package in another project by utilizing [yarn link](https://yarnpkg.com/lang/en/docs/cli/link/). Below is an example workflow to link Racine to `web-app-core`.
-
-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
-```
-
-**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
-```
-
-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="pencil-outline" />;
-```
-
-4. **When you are done, be sure to unlink Racine so you are using the app's version of the package**
+## Documentation
 
-```
-$ yarn unlink "@sproutsocial/racine"
-$ yarn
-```
+[Racine is documented on the Seeds reference site](https://sproutsocial.com/seeds/components)
 
-</details>
+Racine uses [Storybook](https://storybook.js.org) as a local development environment, and for running tests against components. Every component has a `.stories.js` file where developers can write "stories" to test components in isolation. Running `yarn dev:storybook` will open the Racine Storybook in your browser so that you can see changes live as you make them. [You can read more about writing stories on the Storybook website](https://storybook.js.org/docs/basics/writing-stories/).
 
 ## 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.
+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.
 
 When writing code for Racine, please refer to the `code-guidelines.mdx` story in Storybook.
 
@@ -147,7 +76,6 @@ When writing code for Racine, please refer to the `code-guidelines.mdx` story in
 There are a few ways to get involved:
 
 - 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.
 
 ### **🗺 Step 2: Find your way around**
@@ -175,15 +103,15 @@ And you can interact with Racine via the command line with these commands:
 
 ### **✅ Step 3: Make your changes**
 
-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.
+Cut a feature branch off `racine-dev` and start coding! As updates are merged into `racine-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._
+_Need to make an urgent update? Branch off `main` instead of `racine-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.**
+**Run `yarn change` at the root of the Seeds repo to generate a changeset that will be used to derive the next version number for Racine from your changes.**
 
 We use semantic versioning for the Racine package, which allows users to understand the scope of a package's changes based on the version number, which is in the format `major.minor.patch`.
 
@@ -199,24 +127,21 @@ The changeset CLI will also ask you to input a message detailing your changes. T
 
 ### **🗣 Step 4: Create a pull request**
 
-Once you're ready to submit your changes for review, open a PR against the `dev` branch. A few things will happen:
+Once you're ready to submit your changes for review, open a PR against the `racine-dev` branch (it's not the default branch, so you'll have to go find it). A few things will happen:
 
-- 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.
+- The Design Systems team 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! 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.
+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, you're welcome to merge your PR. It may sometimes take a little while to get an approval from the DS team since a merge queues your contribution into the next release and the DS team needs to make sure they have the bandwidth to validate any contribution before it releases.
 
 ### **☁️ Step 5: Changes get published to Artifactory**
 
 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 #design-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/seeds/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. 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.
-
-testing release
+Racine components are documented in [Seeds](https://sproutsocial.com/seeds/components), Sprout's design system. You can open a PR to the [reference site app](https://github.com/sproutsocial/seeds/tree/main/apps/reference-site) 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__/Avatar/Avatar.flow.js

@@ -1,15 +1,15 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeAvatarProps = {
   /** 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',
+  type?: "neutral" | "purple" | "green" | "blue" | "yellow" | "red" | "orange",
   /** @deprecated Avatar now uses the theme by default and using `variant` is no longer needed */
-  variant?: 'dark' | 'light',
+  variant?: "dark" | "light",
   bg?: string,
   color?: string,
   size?: string,

package/__flow__/Avatar/constants.flow.js

@@ -1,11 +1,11 @@
 // @flow
 export const AvatarColorOptions = Object.freeze({
-  auto: 'auto',
-  neutral: 'neutral',
-  purple: 'purple',
-  green: 'green',
-  blue: 'blue',
-  yellow: 'yellow',
-  red: 'red',
-  orange: 'orange'
+  auto: "auto",
+  neutral: "neutral",
+  purple: "purple",
+  green: "green",
+  blue: "blue",
+  yellow: "yellow",
+  red: "red",
+  orange: "orange"
 });

package/__flow__/Badge/Badge.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeIconName } from "../Icon/index.flow";
 import { badgeColors } from "./constants.flow";
 export type TypeBadgeColor = $Keys<typeof badgeColors>;
@@ -8,7 +8,7 @@ export type TypeBadgeProps = {
   /** 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?: TypeBadgeColor,
   iconName?: TypeIconName,
   /** DEPRECATED: Possibly only used for testing. Refrain from using at all if possible. (optional) */

package/__flow__/Badge/constants.flow.js

@@ -14,15 +14,15 @@ declare export var legacyBadgeColors: {|
   suggestion: TypeLegacyBadgeColor,
 |};
 export const badgeColors = Object.freeze({
-  green: 'green',
-  blue: 'blue',
-  purple: 'purple',
-  yellow: 'yellow',
-  orange: 'orange',
-  red: 'red',
-  neutral: 'neutral',
-  magenta: 'magenta',
-  pink: 'pink',
-  aqua: 'aqua',
-  teal: 'teal'
+  green: "green",
+  blue: "blue",
+  purple: "purple",
+  yellow: "yellow",
+  orange: "orange",
+  red: "red",
+  neutral: "neutral",
+  magenta: "magenta",
+  pink: "pink",
+  aqua: "aqua",
+  teal: "teal"
 });

package/__flow__/Banner/Banner.flow.js

@@ -1,7 +1,7 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeIconProps } from "../Icon/index.flow";
-export type EnumBannerType = 'success' | 'info' | 'error' | 'warning' | 'opportunity';
+export type EnumBannerType = "success" | "info" | "error" | "warning" | "opportunity";
 export type TypeBannerProps = {
   text: React.Node,
   /** Type of banner. */

package/__flow__/Box/Box.flow.js

@@ -1,6 +1,6 @@
 // @flow
-import * as React from 'react';
-import type { StyledComponent } from 'styled-components';
+import * as React from "react";
+import type { StyledComponent } from "styled-components";
 import type { TypeStyledComponentsCommonProps } from "../types/styled-components.flow";
 import type { TypeSystemCommonProps, TypeSystemBorderProps, TypeSystemLayoutProps, TypeSystemPositionProps, TypeSystemFlexboxProps, TypeSystemGridProps } from "../types/system-props.flow";
 import type { TypeTheme } from "../types/theme.flow";

package/__flow__/Breadcrumb/Breadcrumb.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeLinkProps } from "../Link/index.flow";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 export type TypeBreadcrumbProps = {

package/__flow__/Button/Button.flow.js

@@ -1,6 +1,6 @@
 // @flow
-import * as React from 'react';
-import { type StyledComponent } from 'styled-components';
+import * as React from "react";
+import { type StyledComponent } from "styled-components";
 import type { TypeTheme } from "../types/theme.flow";
 import type { TypeSystemCommonProps, TypeSystemLayoutProps, TypeSystemFlexboxProps, TypeSystemGridProps } from "../types/system-props.flow";
 export type TypeButtonProps = {
@@ -10,9 +10,9 @@ export type TypeButtonProps = {
   ...TypeSystemGridProps,
   /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */
   external?: boolean,
-  size?: 'large' | 'default',
+  size?: "large" | "default",
   /** What the button looks like. "default" is deprecated in favor of "unstyled" */
-  appearance?: 'primary' | 'secondary' | 'pill' | 'destructive' | 'unstyled' | 'placeholder',
+  appearance?: "primary" | "secondary" | "pill" | "destructive" | "unstyled" | "placeholder",
   /** Set the button to display in its active state */
   active?: boolean,
   /** Disables user action and applies a disabled style on the button */
@@ -21,7 +21,7 @@ export type TypeButtonProps = {
   /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element  */
   href?: string,
   /** Used to get a reference to the underlying button */
-  innerRef?: React.Ref<'button'>,
+  innerRef?: React.Ref<"button">,
   /** Action to perform when the button is clicked */
   onClick?: (e: SyntheticEvent<HTMLButtonElement>) => any,
   title?: string,

package/__flow__/Card/Card.flow.js

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

package/__flow__/Card/CardTypes.flow.js

@@ -1,6 +1,6 @@
 // @flow
 
-import * as React from 'react';
+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, TypeTypographySystemProps } from "../systemProps/index.flow";
@@ -16,13 +16,13 @@ export type TypeSharedCardSystemProps = TypePropsWithChildren<{|
   key?: React.Key,
 |}>;
 export type TypeCardStyleProps = {|
-  elevation?: 'low' | 'medium' | 'high',
+  elevation?: "low" | "medium" | "high",
   disabled?: boolean,
   compositionalComponents?: boolean,
   selected?: boolean,
 |};
 export type TypeCardStyleTransientProps = {|
-  $elevation?: 'low' | 'medium' | 'high',
+  $elevation?: "low" | "medium" | "high",
   $disabled?: boolean,
   $compositionalComponents?: boolean,
   $selected?: boolean,
@@ -40,7 +40,7 @@ export type TypeCardStyles = {|
 |};
 declare type TypeOnClick = (event: SyntheticMouseEvent<HTMLElement> | SyntheticMouseEvent<HTMLElement>) => void;
 export type TypeCardConditions = {|
-  role: 'link' | 'button' | 'checkbox' | 'presentation',
+  role: "link" | "button" | "checkbox" | "presentation",
   href?: string,
   onClick?: TypeOnClick,
   selected?: boolean,
@@ -56,12 +56,12 @@ export type TypeCardProps = {
 };
 export type TypeCardArea = {
   ...TypeSharedCardSystemProps,
-  $divider?: 'top' | 'bottom',
+  $divider?: "top" | "bottom",
   ...
 };
 export type TypeStyledSelectedIcon = {
   ...TypeIconProps,
-  $selected: $PropertyType<TypeCardStyleTransientProps, '$selected'>,
+  $selected: $PropertyType<TypeCardStyleTransientProps, "$selected">,
   ...
 };
 export type TypeCardLink = {

package/__flow__/CharacterCounter/CharacterCounter.flow.js

@@ -1,11 +1,11 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeCharacterCounterProps = {
   /** Current value of relative input/textarea */
   currentValue: number,
   /** Max amount of characters for input/textarea */
   maxValue: number,
-  size?: 'default' | 'mini',
+  size?: "default" | "mini",
   ...
 };
 declare var CharacterCounter: React.ComponentType<TypeCharacterCounterProps>;

package/__flow__/ChartLegend/ChartLegend.flow.js

@@ -1,6 +1,6 @@
 // @flow
-import * as React from 'react';
-export type TypeChartLegendTheme = 'compare' | 'contrast' | 'extended';
+import * as React from "react";
+export type TypeChartLegendTheme = "compare" | "contrast" | "extended";
 export type TypeChartLegendProps = {
   /** Inline or stacked y plots */
   stacked?: boolean,

package/__flow__/Checkbox/Checkbox.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeCheckboxProps = {
   /** ID of the form element, should match the "for" value of the associated label */
   id: string,
@@ -14,7 +14,7 @@ export type TypeCheckboxProps = {
   indeterminate?: boolean,
   disabled?: boolean,
   onChange: (event: SyntheticEvent<HTMLInputElement>) => void,
-  appearance?: 'pill' | 'default',
+  appearance?: "pill" | "default",
   qa?: Object,
   tabIndex?: string | number,
   inputProps?: Object,

package/__flow__/Collapsible/Collapsible.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 export type TypeCollapsibleProps = {
   isOpen: boolean,

package/__flow__/DatePicker/DateRangePicker/DateRangePicker.flow.js

@@ -1,7 +1,7 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import { type TypeCommonDatePickerProps } from "../common.flow";
-export type EnumFocusedInput = null | 'startDate' | 'endDate';
+export type EnumFocusedInput = null | "startDate" | "endDate";
 export type TypeDateRangePickerProps = {
   startDate: ?moment$Moment,
   endDate: ?moment$Moment,

package/__flow__/DatePicker/DateRangePicker/StatefulDateRangePicker.flow.js

@@ -1,11 +1,11 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeDateRangePickerProps } from "./DateRangePicker.flow";
 export type TypeStatefulDateRangePickerProps = {
   ...TypeDateRangePickerProps,
-  onDatesChange?: $PropertyType<TypeDateRangePickerProps, 'onDatesChange'>,
-  focusedInput?: $PropertyType<TypeDateRangePickerProps, 'focusedInput'>,
-  onFocusChange?: $PropertyType<TypeDateRangePickerProps, 'onFocusChange'>,
+  onDatesChange?: $PropertyType<TypeDateRangePickerProps, "onDatesChange">,
+  focusedInput?: $PropertyType<TypeDateRangePickerProps, "focusedInput">,
+  onFocusChange?: $PropertyType<TypeDateRangePickerProps, "onFocusChange">,
   ...
 };
 declare export var StatefulDateRangePicker: React.StatelessFunctionalComponent<TypeStatefulDateRangePickerProps>;

package/__flow__/DatePicker/SingleDatePicker/SingleDatePicker.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import { type TypeCommonDatePickerProps } from "../common.flow";
 export type TypeSingleDatePickerProps = {
   date: ?moment$Moment,

package/__flow__/DatePicker/SingleDatePicker/StatefulSingleDatePicker.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeSingleDatePickerProps } from "./SingleDatePicker.flow";
 export type TypeStatefulSingleDatePickerProps = {
   ...TypeSingleDatePickerProps,

package/__flow__/DatePicker/common.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import { type Node } from 'react';
+import { type Node } from "react";
 export type TypeCommonDatePickerProps = {|
   daySize?: number,
   isOutsideRange?: (date: moment$Moment) => boolean,

package/__flow__/Drawer/Drawer.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 export type TypeDrawerContext = $Shape<{
   /** Callback for close button */
@@ -26,7 +26,7 @@ export type TypeDrawerProps = {
   /** Label for the close button. Usually this should be "Close" */
   closeButtonLabel: string,
   /** Whether the drawer slides in from the left or right side of the screen */
-  direction?: 'left' | 'right',
+  direction?: "left" | "right",
   /** In some cases, you may not want the user to be able to click outside of the drawer to close it. You can disable that with this prop. */
   disableCloseOnClickOutside?: boolean,
   id: string,

package/__flow__/EmptyState/EmptyState.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 export type TypeEmptyStateProps = {
   /** An image in (preferably in SVG format) */
   media?: React.Node,

package/__flow__/EnumIllustrationNames.flow.js

@@ -1,2 +1,2 @@
 // @flow
-export type EnumIllustrationNames = "abacus" | "analytics-offering" | "asset-cards" | "astronaut" | "binoculars" | "brand-keyword" | "browser-doc" | "business" | "calendar-event" | "calendar-reporting" | "cat-error" | "cat-no-access" | "cat" | "checkbox-alert" | "coffee-cup" | "competitors" | "compose-window" | "compose" | "computer-error" | "connect" | "contact" | "conversation" | "custom-branding" | "custom-post-variables" | "customer-service" | "dashboard" | "exclamation-mark" | "face-happy" | "find-bookmark" | "flask" | "general-topic" | "global-features" | "global-trend" | "grow-large" | "grow" | "hands-raised" | "headset" | "heartbeat-connection" | "instagram-links" | "invoice" | "jewel" | "keyword-tracking" | "lightbulb-alt" | "lightbulb" | "like-conversation" | "link-broken" | "link-messages" | "link-sections" | "link-upload" | "listening-pendo" | "listening-sentiment" | "listening-topic-templates" | "listening-tour" | "listening" | "loading" | "mailbox-empty" | "mailbox-full" | "megaphone" | "message" | "molecule" | "network-data" | "no-messages-found" | "no-notifications" | "note" | "notification" | "notifications-onboarding" | "notifications" | "organize-message" | "outbox-queue" | "outbox-reviews" | "pdf" | "planning" | "podium" | "pointer" | "publish-assets" | "publish-links" | "publishing-notifications" | "publishing" | "puzzle-piece" | "question-mark" | "reporting-folder" | "reporting" | "review-location" | "review" | "robot-assembly" | "robot-error" | "robot-happy" | "rocket" | "schedule-date" | "schedule-messages" | "search-keywords" | "search-success" | "search-trends" | "search" | "security" | "sentiment" | "shopping-bag" | "spark-line" | "sprout-mobile-app" | "stamp" | "storefront" | "success" | "tag-message" | "tag" | "team-roles" | "team" | "telescope" | "tha-mel" | "thumbs-up" | "toggle-switch" | "toolset-strength" | "tracking-time" | "twitter-messages" | "twitter-profiles" | "under-construction" | "unsubscribe" | "upward-trend" | "user-task" | "user-team" | "variable-table" | "view-connections" | "vip-list" | "warning" | "wifi" | "workflow-steps";
+export type EnumIllustrationNames = "abacus" | "analytics-offering" | "asset-cards" | "astronaut" | "binoculars" | "brand-keyword" | "browser-doc" | "business" | "calendar-event" | "calendar-reporting" | "cat-error" | "cat-no-access" | "cat" | "checkbox-alert" | "coffee-cup" | "competitors" | "compose-window" | "compose" | "computer-error" | "connect" | "contact" | "conversation" | "custom-branding" | "custom-post-variables" | "customer-service" | "dashboard" | "exclamation-mark" | "face-happy" | "find-bookmark" | "flask" | "general-topic" | "global-features" | "global-trend" | "grow-large" | "grow" | "hands-raised" | "headset" | "heartbeat-connection" | "instagram-links" | "invoice" | "jewel" | "keyword-tracking" | "lightbulb-alt" | "lightbulb" | "like-conversation" | "link-broken" | "link-messages" | "link-sections" | "link-upload" | "listening-pendo" | "listening-sentiment" | "listening-topic-templates" | "listening-tour" | "listening" | "loading" | "mailbox-empty" | "mailbox-full" | "megaphone" | "message" | "molecule" | "network-data" | "no-messages-found" | "no-notifications" | "note" | "notification" | "notifications-onboarding" | "notifications" | "organize-message" | "outbox-queue" | "outbox-reviews" | "pdf" | "planning" | "podium" | "pointer" | "profile-groups" | "publish-assets" | "publish-links" | "publishing-notifications" | "publishing" | "puzzle-piece" | "question-mark" | "reporting-folder" | "reporting" | "review-location" | "review" | "robot-assembly" | "robot-error" | "robot-happy" | "rocket" | "schedule-date" | "schedule-messages" | "search-keywords" | "search-success" | "search-trends" | "search" | "security" | "sentiment" | "shopping-bag" | "spark-line" | "sprout-mobile-app" | "stamp" | "storefront" | "success" | "tag-message" | "tag" | "team-roles" | "team" | "telescope" | "tha-mel" | "thumbs-up" | "toggle-switch" | "toolset-strength" | "tracking-time" | "twitter-messages" | "twitter-profiles" | "under-construction" | "unsubscribe" | "upward-trend" | "user-task" | "user-team" | "variable-table" | "view-connections" | "vip-list" | "warning" | "wifi" | "workflow-steps";

package/__flow__/Fieldset/Fieldset.flow.js

@@ -1,11 +1,11 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 export type TypeFieldsetProps = {
   /** Label text to display above the fieldset */
   label: React.Node,
   helperText?: React.Node,
-  layout?: 'vertical' | 'horizontal',
+  layout?: "vertical" | "horizontal",
   children: React.Node,
   ...
 };

package/__flow__/FormField/FormField.flow.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from 'react';
+import * as React from "react";
 import type { TypeBoxProps } from "../Box/index.flow";
 export type TypeFormFieldProps = {
   ...TypeBoxProps,