@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/Tooltip/styles.js

@@ -1,12 +1,11 @@
 //@flow
-import styled from "styled-components";
-import Box from "../Box";
+import styled from 'styled-components';
+import Box from '../Box';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-// eslint-disable-next-line prettier/prettier
 export const TooltipContent = styled<typeof Box, TypeTheme, any>(Box)`
   font-family: ${(props) => props.theme.fontFamily};
   ${(props) => props.theme.typography[200]}
-  text-align: ${(props) => (props.appearance === "box" ? "left" : "center")};
+  text-align: ${(props) => (props.appearance === 'box' ? 'left' : 'center')};
 `;

package/__flow__/VisuallyHidden/index.js

@@ -1,8 +1,8 @@
 //@flow
-import { visuallyHidden } from "../utils/mixins";
-import styled, { type StyledComponent } from "styled-components";
+import {visuallyHidden} from '../utils/mixins';
+import styled, {type StyledComponent} from 'styled-components';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 export const VisuallyHidden: StyledComponent<any, TypeTheme, *> = styled.span`
   ${visuallyHidden}

package/__flow__/building-stories.stories.mdx

@@ -0,0 +1,121 @@
+import {Meta, Canvas, Source} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+
+<Meta title="Welcome/Building stories" />
+
+# 📝 Let's write some stories!
+
+## Creating a new story
+
+To create a new story add a `{your-story-name.js|mdx}` file. We prefer to keep our stories colocated to their respective component(s). If the story you're adding doesn't compliment a particular component, you can add it to the `root`.
+
+## Setting up your file
+
+Import the components you'll need to build your stories.
+
+<Source
+  language="jsx"
+  dark
+  format={true}
+  code={dedent`
+    import React from "react";
+    import { Banner } from "./Banner";
+    import { TypeProps } from "./Banner";
+  `}
+/>
+
+Then create a default export. According to Storybook's docs the default export:
+
+> The default export metadata controls how Storybook lists your stories and provides information used by addons.
+
+<Source
+  language="jsx"
+  dark
+  format={true}
+  code={dedent`
+    import React from "react";
+    import { Banner } from "./Banner";
+    import { TypeProps } from "./Banner";
+    
+    export default {
+      title: "Components/Banner",
+      component: Banner,
+    }
+  `}
+/>
+
+Using [slashes in your title](https://storybook.js.org/docs/react/configure/sidebar-and-urls) determines how your story/doc will be organized in the navigation.
+
+```
+Root / Folder / Story
+```
+
+### Args
+
+“Args” are Storybook’s mechanism for defining a set of arguments that determine how a component should render within a story.
+
+Our approach is to define a global set of args as the default and override as necessary at the story level.
+
+First, we tell Storybook which args we'll be using by setting the `argTypes` and their associated controls. Then we set the default global values of those args in the `arg` object.
+
+<Source
+  language="jsx"
+  dark
+  format={false}
+  code={dedent`
+    import React from "react";
+    import { Banner } from "./Banner";
+    import { TypeProps } from "./Banner";
+    
+    export default {
+      title: "Components/Banner",
+      component: Banner,
+      argTypes: {
+        type: {
+          options: ["success", "info", "error", "warning", "opportunity", "danger"],
+          control: { type: "select" },
+        },
+      },
+      args: {
+        type: "success",
+      },
+    }
+  `}
+/>
+
+## Your first story
+
+With everything properly set up, we can now write our first story!
+
+<Source
+  language="jsx"
+  dark
+  format={false}
+  code={dedent`
+    import React from "react";
+    import { Banner } from "./Banner";
+    import { TypeProps } from "./Banner";
+    
+    export default {
+      title: "Components/Banner",
+      component: Banner,
+      argTypes: {
+        type: {
+          options: ["success", "info", "error", "warning", "opportunity", "danger"],
+          control: { type: "select" },
+        },
+      },
+      args: {
+        type: "success",
+      },
+    }
+    
+    export const BannerPermutations = (args: TypeProps) => (
+      <Banner {...args} />
+    );
+    
+    BannerPermutations.story = {
+      name: "Permutations",
+    };
+  `}
+/>

package/__flow__/dataviz/dataviz.stories.js

@@ -1,13 +1,13 @@
 // @flow
-import React from "react";
-import { DataVizRotation } from ".";
+import React from 'react';
+import {DataVizRotation} from '.';
 
 export default {
-  title: "Dataviz color rotation",
+  title: 'Theming/Dataviz color rotation',
 };
 
 export const JSdataviz = () => <DataVizRotation />;
 
 JSdataviz.story = {
-  name: "JS dataviz rotation",
+  name: 'JS dataviz rotation',
 };

package/__flow__/dataviz/index.js

@@ -1,7 +1,7 @@
 // @flow
-import React from "react";
-import Box from "../Box";
-import { withTheme } from "styled-components";
+import React from 'react';
+import Box from '../Box';
+import {withTheme} from 'styled-components';
 
 export const DataVizRotation = withTheme((p) => {
   return p.theme.colors.DATAVIZ_COLORS_LIST.map((color, i) => {

package/__flow__/index.js

@@ -1,77 +1,77 @@
 // @flow
-export type { EnumIconNames } from "./EnumIconNames";
-export type { TypeTheme, TypeSproutTheme } from "./types/theme.flow";
-export * from "./systemProps";
-export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
-export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
-export { useInteractiveColor } from "./utils/useInteractiveColor";
-export { default as theme } from "./themes/light/theme";
-export { default as darkTheme } from "./themes/dark/theme";
+export type {EnumIconNames} from './EnumIconNames';
+export type {TypeTheme, TypeSproutTheme} from './types/theme.flow';
+export * from './systemProps';
+export {visuallyHidden, focusRing, disabled} from './utils/mixins';
+export {useSelect, useMultiselect, useTextContent} from './utils/hooks';
+export {useInteractiveColor} from './utils/useInteractiveColor';
+export {default as theme} from './themes/light/theme';
+export {default as darkTheme} from './themes/dark/theme';
 export {
   sproutLightTheme,
   sproutDarkTheme,
-} from "./themes/extendedThemes/sproutTheme";
-export { default as Icon } from "./Icon";
+} from './themes/extendedThemes/sproutTheme';
+export {default as Icon} from './Icon';
 // DEPRECATED: Alert has been renamed to Banner
-export { default as Alert } from "./Banner";
-export { default as Banner } from "./Banner";
-export { default as Badge } from "./Badge";
-export { default as Indicator } from "./Indicator";
-export { default as Card } from "./Card";
-export { default as CharacterCounter } from "./CharacterCounter";
-export { default as Checkbox } from "./Checkbox";
-export { default as Radio } from "./Radio";
-export { default as Textarea } from "./Textarea";
-export { default as ToggleHint } from "./ToggleHint";
-export { default as Loader } from "./Loader";
-export { default as Text } from "./Text";
-export { default as Image } from "./Image";
-export { default as KeyboardKey } from "./KeyboardKey";
-export { default as ChartLegend } from "./ChartLegend";
-export { default as Table } from "./Table";
-export type { TypeTableRow } from "./Table";
-export { default as TableCell } from "./TableCell";
-export type { TypeTableCell } from "./TableCell";
-export { default as TableHeaderCell } from "./TableHeaderCell";
-export { default as TableRowAccordion } from "./TableRowAccordion";
-export { default as Box } from "./Box";
-export { default as Label } from "./Label";
-export { default as Input } from "./Input";
-export { default as Select } from "./Select";
-export { default as Button } from "./Button";
-export { default as Link } from "./Link";
-export { default as Switch } from "./Switch";
-export { default as Token } from "./Token";
-export { default as TokenInput } from "./TokenInput";
-export type { TypeTokenSpec } from "./TokenInput";
-export { default as Tabs } from "./Tabs";
-export { default as Modal } from "./Modal";
-export { default as Popout } from "./Popout";
-export type { EnumPlacements } from "./Popout";
-export { default as ThemeProvider } from "./ThemeProvider";
-export { default as Tooltip } from "./Tooltip";
-export { default as Drawer } from "./Drawer";
-export { default as LoaderButton } from "./LoaderButton";
-export { default as Numeral } from "./Numeral";
-export { default as Collapsible } from "./Collapsible";
-export { default as SegmentedControl } from "./SegmentedControl";
-export { default as EmptyState } from "./EmptyState";
-export { default as FormField } from "./FormField";
-export { default as Fieldset } from "./Fieldset";
-export { default as Message } from "./Message";
-export { default as Stack } from "./Stack";
-export { default as Avatar } from "./Avatar";
-export { default as Breadcrumb } from "./Breadcrumb";
-export { default as Skeleton } from "./Skeleton";
-export { default as ToastContainer, toast } from "./Toast";
-export type { TypeToastOptions } from "./Toast";
-export { default as Menu, MenuButton } from "./Menu";
-export { MenuButtonContext } from "./Menu/hooks";
-export { MenuItemContainer } from "./Menu/styles";
-export { default as Listbox, ListboxButton } from "./Listbox";
-export { default as OverflowList } from "./OverflowList";
-export { SingleDatePicker, DateRangePicker } from "./DatePicker";
-export { VisuallyHidden } from "./VisuallyHidden";
-export { default as PartnerLogo } from "./PartnerLogo";
-export type { TypePartnerNames } from "./PartnerLogo/TypePartnerNames";
-export { default as SpotIllustration } from "./SpotIllustration";
+export {default as Alert} from './Banner';
+export {default as Banner} from './Banner';
+export {default as Badge} from './Badge';
+export {default as Indicator} from './Indicator';
+export {default as Card} from './Card';
+export {default as CharacterCounter} from './CharacterCounter';
+export {default as Checkbox} from './Checkbox';
+export {default as Radio} from './Radio';
+export {default as Textarea} from './Textarea';
+export {default as ToggleHint} from './ToggleHint';
+export {default as Loader} from './Loader';
+export {default as Text} from './Text';
+export {default as Image} from './Image';
+export {default as KeyboardKey} from './KeyboardKey';
+export {default as ChartLegend} from './ChartLegend';
+export {default as Table} from './Table';
+export type {TypeTableRow} from './Table';
+export {default as TableCell} from './TableCell';
+export type {TypeTableCell} from './TableCell';
+export {default as TableHeaderCell} from './TableHeaderCell';
+export {default as TableRowAccordion} from './TableRowAccordion';
+export {default as Box} from './Box';
+export {default as Label} from './Label';
+export {default as Input} from './Input';
+export {default as Select} from './Select';
+export {default as Button} from './Button';
+export {default as Link} from './Link';
+export {default as Switch} from './Switch';
+export {default as Token} from './Token';
+export {default as TokenInput} from './TokenInput';
+export type {TypeTokenSpec} from './TokenInput';
+export {default as Tabs} from './Tabs';
+export {default as Modal} from './Modal';
+export {default as Popout} from './Popout';
+export type {EnumPlacements} from './Popout';
+export {default as ThemeProvider} from './ThemeProvider';
+export {default as Tooltip} from './Tooltip';
+export {default as Drawer} from './Drawer';
+export {default as LoaderButton} from './LoaderButton';
+export {default as Numeral} from './Numeral';
+export {default as Collapsible} from './Collapsible';
+export {default as SegmentedControl} from './SegmentedControl';
+export {default as EmptyState} from './EmptyState';
+export {default as FormField} from './FormField';
+export {default as Fieldset} from './Fieldset';
+export {default as Message} from './Message';
+export {default as Stack} from './Stack';
+export {default as Avatar} from './Avatar';
+export {default as Breadcrumb} from './Breadcrumb';
+export {default as Skeleton} from './Skeleton';
+export {default as ToastContainer, toast} from './Toast';
+export type {TypeToastOptions} from './Toast';
+export {default as Menu, MenuButton} from './Menu';
+export {MenuButtonContext} from './Menu/hooks';
+export {MenuItemContainer} from './Menu/styles';
+export {default as Listbox, ListboxButton} from './Listbox';
+export {default as OverflowList} from './OverflowList';
+export {SingleDatePicker, DateRangePicker} from './DatePicker';
+export {VisuallyHidden} from './VisuallyHidden';
+export {default as PartnerLogo} from './PartnerLogo';
+export type {TypePartnerNames} from './PartnerLogo/TypePartnerNames';
+export {default as SpotIllustration} from './SpotIllustration';

package/__flow__/overview.stories.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import Text from './Text';
+import SpotIllustration from './SpotIllustration';
+import Stack from './Stack';
+import Button from './Button';
+
+export default {
+  title: 'Welcome/Overview',
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+let banner;
+
+const getBanner = () => {
+  if (!banner) {
+    banner = window.top.document.getElementsByClassName('simplebar-content')[1];
+  }
+  return banner;
+};
+
+const setBannerStyle = (display) => {
+  const banner = getBanner();
+  if (!banner) return;
+  banner.setAttribute('style', `display: ${display}`);
+};
+
+//const showTopBanner = () => setBannerStyle("initial");
+const hideTopBanner = () => setBannerStyle('none');
+
+export const Overview = () => {
+  hideTopBanner();
+
+  return (
+    <Stack align="center">
+      <SpotIllustration name="molecule" customFill="green" />
+      <Text as="h1" fontSize={900} fontWeight="bold" color="text.headline">
+        seeds-web
+      </Text>
+      <Text.Byline as="h4" mb={400}>
+        (Formerly Racine)
+      </Text.Byline>
+      <Text.BodyCopy as="p" mb={400}>
+        Empowering the teams that build with Seeds on the web.
+      </Text.BodyCopy>
+      <Button
+        appearance="secondary"
+        href="https://github.com/sproutsocial/racine"
+        external
+      >
+        View on Github
+      </Button>
+    </Stack>
+  );
+};
+
+Overview.story = {
+  name: 'Overview',
+};

package/__flow__/setupTests.js

@@ -1,8 +1,8 @@
-import "mutationobserver-shim";
-import "@testing-library/jest-dom/extend-expect";
-import "jest-axe/extend-expect";
-import "babel-polyfill";
-import "jest-styled-components";
+import 'mutationobserver-shim';
+import '@testing-library/jest-dom/extend-expect';
+import 'jest-axe/extend-expect';
+import 'babel-polyfill';
+import 'jest-styled-components';
 
 // this is just a little hack to silence a warning that we'll get until react
 // fixes this: https://github.com/facebook/react/pull/14853

package/__flow__/systemProps/background.js

@@ -1,18 +1,18 @@
 // @flow strict-local
 
-import { background } from "styled-system";
+import {background} from 'styled-system';
 import type {
   BackgroundImageProperty,
   BackgroundPositionProperty,
   BackgroundProperty,
   BackgroundRepeatProperty,
   BackgroundSizeProperty,
-} from "csstype";
+} from 'csstype';
 
 import type {
   StyledSystemStyleFn,
   TypeResponsiveBaseSystemProp,
-} from "./types.flow.js";
+} from './types.flow.js';
 
 // https://styled-system.com/table#background
 

package/__flow__/systemProps/border.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 
-import { border } from "styled-system";
+import {border} from 'styled-system';
 import type {
   BorderBottomColorProperty,
   BorderBottomLeftRadiusProperty,
@@ -27,12 +27,12 @@ import type {
   BorderTopStyleProperty,
   BorderTopWidthProperty,
   BorderWidthProperty,
-} from "csstype";
+} from 'csstype';
 
 import type {
   StyledSystemStyleFn,
   TypeResponsiveBaseSystemProp,
-} from "./types.flow.js";
+} from './types.flow.js';
 
 // https://styled-system.com/table#border
 

package/__flow__/systemProps/color.js

@@ -1,16 +1,16 @@
 // @flow strict-local
 
-import { color } from "styled-system";
+import {color} from 'styled-system';
 import type {
   BackgroundColorProperty,
   ColorProperty,
   OpacityProperty,
-} from "csstype";
+} from 'csstype';
 
 import type {
   StyledSystemStyleFn,
   TypeResponsiveBaseSystemProp,
-} from "./types.flow.js";
+} from './types.flow.js';
 
 // https://styled-system.com/table#color
 

package/__flow__/systemProps/custom.js

@@ -1,12 +1,12 @@
 // @flow strict-local
 
-import { compose, system } from "styled-system";
-import type { CursorProperty, WhiteSpaceProperty } from "csstype";
+import {compose, system} from 'styled-system';
+import type {CursorProperty, WhiteSpaceProperty} from 'csstype';
 
 import type {
   StyledSystemStyleFn,
   TypeResponsiveBaseSystemProp,
-} from "./types.flow.js";
+} from './types.flow.js';
 
 // https://styled-system.com/custom-props
 

package/__flow__/systemProps/flexbox.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 
-import { flexbox } from "styled-system";
+import {flexbox} from 'styled-system';
 import type {
   AlignItemsProperty,
   AlignContentProperty,
@@ -13,12 +13,12 @@ import type {
   JustifySelfProperty,
   AlignSelfProperty,
   Globals,
-} from "csstype";
+} from 'csstype';
 
 import type {
   StyledSystemStyleFn,
   TypeResponsiveBaseSystemProp,
-} from "./types.flow.js";
+} from './types.flow.js';
 
 // https://styled-system.com/table#flexbox
 

package/__flow__/systemProps/grid.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 
-import { grid } from "styled-system";
+import {grid} from 'styled-system';
 import type {
   GridAreaProperty,
   GridAutoColumnsProperty,
@@ -14,12 +14,12 @@ import type {
   GridTemplateAreasProperty,
   GridTemplateColumnsProperty,
   GridTemplateRowsProperty,
-} from "csstype";
+} from 'csstype';
 
 import type {
   StyledSystemStyleFn,
   TypeResponsiveBaseSystemProp,
-} from "./types.flow.js";
+} from './types.flow.js';
 
 // https://styled-system.com/table#grid-layout
 

package/__flow__/systemProps/index.js

@@ -1,17 +1,17 @@
 // @flow strict-local
 
-export * from "./types.flow.js";
+export * from './types.flow.js';
 
-export * from "./background";
-export * from "./border";
-export * from "./color";
-export * from "./custom";
-export * from "./flexbox";
-export * from "./grid";
-export * from "./layout";
-export * from "./position";
-export * from "./shadow";
-export * from "./space";
-export * from "./systemProps";
-export * from "./typography";
-export * from "./variant";
+export * from './background';
+export * from './border';
+export * from './color';
+export * from './custom';
+export * from './flexbox';
+export * from './grid';
+export * from './layout';
+export * from './position';
+export * from './shadow';
+export * from './space';
+export * from './systemProps';
+export * from './typography';
+export * from './variant';

package/__flow__/systemProps/layout.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 
-import { layout } from "styled-system";
+import {layout} from 'styled-system';
 import type {
   DisplayProperty,
   HeightProperty,
@@ -13,12 +13,12 @@ import type {
   OverflowYProperty,
   VerticalAlignProperty,
   WidthProperty,
-} from "csstype";
+} from 'csstype';
 
 import type {
   StyledSystemStyleFn,
   TypeResponsiveBaseSystemProp,
-} from "./types.flow.js";
+} from './types.flow.js';
 
 // https://styled-system.com/table#layout
 

package/__flow__/systemProps/position.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 
-import { position } from "styled-system";
+import {position} from 'styled-system';
 import type {
   BottomProperty,
   LeftProperty,
@@ -8,12 +8,12 @@ import type {
   RightProperty,
   TopProperty,
   ZIndexProperty,
-} from "csstype";
+} from 'csstype';
 
 import type {
   StyledSystemStyleFn,
   TypeResponsiveBaseSystemProp,
-} from "./types.flow.js";
+} from './types.flow.js';
 
 // https://styled-system.com/table#position
 

package/__flow__/systemProps/shadow.js

@@ -1,12 +1,12 @@
 // @flow strict-local
 
-import { shadow } from "styled-system";
-import type { BoxShadowProperty, TextShadowProperty } from "csstype";
+import {shadow} from 'styled-system';
+import type {BoxShadowProperty, TextShadowProperty} from 'csstype';
 
 import type {
   StyledSystemStyleFn,
   TypeResponsiveBaseSystemProp,
-} from "./types.flow.js";
+} from './types.flow.js';
 
 // https://styled-system.com/table#shadow