@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Fieldset/index.js

@@ -1,16 +1,9 @@
 // @flow
 import * as React from 'react';
-import Box from '../Box';
-import Text from '../Text';
-import {ChildContainer} from './styles';
-
-type TypeProps = {
-  /** Label text to display above the fieldset */
-  label: React.Node,
-  helperText?: React.Node,
-  layout?: 'vertical' | 'horizontal',
-  children: React.Node,
-};
+import Box from "../Box";
+import Text from "../Text";
+import { ChildContainer } from "./styles";
+import type { TypeFieldsetProps } from "./index.flow";
 
 /**
  * Fieldset Component
@@ -21,53 +14,29 @@ const Fieldset = ({
   helperText,
   children,
   ...rest
-}: TypeProps) => (
-  // $FlowIssue - upgrade v0.112.0
-  <Box as="fieldset" border="none" p={0} data-qa-fieldset="" {...rest}>
-    {typeof label === 'string' ? (
-      <Fieldset.Legend>{label}</Fieldset.Legend>
-    ) : (
-      label
-    )}
-    {typeof helperText === 'string' ? (
-      <Fieldset.HelperText>{helperText}</Fieldset.HelperText>
-    ) : (
-      helperText
-    )}
-    <Box
-      display="flex"
-      flexDirection={layout === 'vertical' ? 'column' : 'row'}
-    >
-      {React.Children.map(children, (child) => (
-        <ChildContainer layout={layout}>{child}</ChildContainer>
-      ))}
+}: TypeFieldsetProps) =>
+// $FlowIssue - upgrade v0.112.0
+<Box as="fieldset" border="none" p={0} data-qa-fieldset="" {...rest}>
+    {typeof label === 'string' ? <Fieldset.Legend>{label}</Fieldset.Legend> : label}
+    {typeof helperText === 'string' ? <Fieldset.HelperText>{helperText}</Fieldset.HelperText> : helperText}
+    <Box display="flex" flexDirection={layout === 'vertical' ? 'column' : 'row'}>
+      {React.Children.map(children, child => <ChildContainer layout={layout}>{child}</ChildContainer>)}
     </Box>
-  </Box>
-);
-
-const FieldsetLegend = ({children, ...rest}) => (
-  <Text
-    as="legend"
-    fontSize={300}
-    fontWeight="semibold"
-    color="text.body"
-    mb={300}
-    {...rest}
-  >
+  </Box>;
+const FieldsetLegend = ({
+  children,
+  ...rest
+}) => <Text as="legend" fontSize={300} fontWeight="semibold" color="text.body" mb={300} {...rest}>
     {children}
-  </Text>
-);
-
-const FieldsetHelperText = ({children, ...rest}) => (
-  <Text as="p" fontSize={200} mb={300} {...rest}>
+  </Text>;
+const FieldsetHelperText = ({
+  children,
+  ...rest
+}) => <Text as="p" fontSize={200} mb={300} {...rest}>
     {children}
-  </Text>
-);
-
+  </Text>;
 Fieldset.Legend = FieldsetLegend;
 Fieldset.HelperText = FieldsetHelperText;
-
 Fieldset.Legend.displayName = 'Fieldset.Legend';
 Fieldset.HelperText.displayName = 'Fieldset.HelperText';
-
-export default Fieldset;
+export default Fieldset;

package/__flow__/Fieldset/styles.js

@@ -1,13 +1,9 @@
 //@flow
-import styled, {css} from 'styled-components';
-import Box from '../Box';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css } from 'styled-components';
+import Box from "../Box";
+import type { TypeTheme } from "../types/theme.flow";
 export const ChildContainer = styled<typeof Box, TypeTheme, any>(Box)`
-  ${(props) =>
-    props.layout === 'vertical' &&
-    css`
+  ${props => props.layout === 'vertical' && css`
       margin-top: ${props.theme.space[300]};
 
       &:first-child {
@@ -15,13 +11,11 @@ export const ChildContainer = styled<typeof Box, TypeTheme, any>(Box)`
       }
     `}
 
-  ${(props) =>
-    props.layout === 'horizontal' &&
-    css`
+  ${props => props.layout === 'horizontal' && css`
       margin-left: ${props.theme.space[300]};
 
       &:first-child {
         margin-left: 0;
       }
     `}
-`;
+`;

package/__flow__/FormField/index.flow.js

@@ -0,0 +1,28 @@
+'no babel-plugin-flow-react-proptypes';
+
+// @flow
+import * as React from 'react';
+import Box from "../Box";
+export type TypeFormFieldProps = {
+  ...React.ElementConfig<typeof Box>,
+  /** A function that receives props that need to be spread onto the child element */
+  children: (options: {
+    id: string,
+    isInvalid: boolean,
+    ariaDescribedby: string,
+  }) => React.Element<any>,
+  /** Text describing any error with the field's content */
+  error?: React.Node,
+  /** Text acting as a description blurb below the main label **/
+  helperText?: React.Node,
+  /** ID of the form element (will be auto-generated if not provided) */
+  id?: string,
+  /** Whether the current contents of the field are invalid */
+  isInvalid?: boolean,
+  /** Label text to display above the form field */
+  label: React.Node,
+  qa?: Object,
+  /** Whether the label text should be visually hidden */
+  isLabelHidden?: boolean,
+  ...
+};

package/__flow__/FormField/index.js

@@ -1,40 +1,20 @@
 'no babel-plugin-flow-react-proptypes';
+
 // @flow
 import * as React from 'react';
-import {useState} from 'react';
-
-// Components
-import Box from '../Box';
-import Label from '../Label';
-import Text from '../Text';
-import {VisuallyHidden} from '../VisuallyHidden';
-import {useTextContent} from '../utils/hooks';
-
-export type TypeProps = {
-  ...React.ElementConfig<typeof Box>,
-  /** A function that receives props that need to be spread onto the child element */
-  children: (options: {
-    id: string,
-    isInvalid: boolean,
-    ariaDescribedby: string,
-  }) => React.Element<any>,
-  /** Text describing any error with the field's content */
-  error?: React.Node,
-  /** Text acting as a description blurb below the main label **/
-  helperText?: React.Node,
-  /** ID of the form element (will be auto-generated if not provided) */
-  id?: string,
-  /** Whether the current contents of the field are invalid */
-  isInvalid?: boolean,
-  /** Label text to display above the form field */
-  label: React.Node,
-  qa?: Object,
-  /** Whether the label text should be visually hidden */
-  isLabelHidden?: boolean,
-};
+import { useState } from 'react';
+import { useTextContent } from "../utils/hooks";
+import Box from "../Box";
+import Label from "../Label";
+import Text from "../Text";
+import { VisuallyHidden } from "../VisuallyHidden";
+import type { TypeFormFieldProps } from "./index.flow";
 
+/**
+ * @deprecated Use TypeFormFieldProps from root instead
+ */
+export type TypeProps = TypeFormFieldProps;
 let idCounter = 0;
-
 const FormField = ({
   children,
   error,
@@ -46,52 +26,28 @@ const FormField = ({
   qa,
   isLabelHidden = false,
   ...rest
-}: TypeProps) => {
+}: TypeFormFieldProps) => {
   const [id] = useState(identifier || `FormField-${idCounter++}`);
   const errorId = `Error-${id}`;
   const containerText = useTextContent('');
   const errorContainerText = useTextContent('');
-
-  return (
-    <Box
-      {...rest}
-      {...qa}
-      mb={mb}
-      data-qa-formfield={
-        (qa && qa['data-qa-formfield']) || id || containerText.current
-      }
-      data-qa-formfield-isinvalid={isInvalid === true}
-    >
-      {isLabelHidden ? (
-        <VisuallyHidden data-testid="visually-hidden">
+  return <Box {...rest} {...qa} mb={mb} data-qa-formfield={qa && qa['data-qa-formfield'] || id || containerText.current} data-qa-formfield-isinvalid={isInvalid === true}>
+      {isLabelHidden ? <VisuallyHidden data-testid="visually-hidden">
           <Label htmlFor={id}>{label}</Label>
-        </VisuallyHidden>
-      ) : (
-        <Label mb={helperText ? 100 : 300} htmlFor={id}>
+        </VisuallyHidden> : <Label mb={helperText ? 100 : 300} htmlFor={id}>
           {label}
-        </Label>
-      )}
-      {helperText && (
-        <Text as="p" fontSize={200} mb={300} color="text.subtext">
+        </Label>}
+      {helperText && <Text as="p" fontSize={200} mb={300} color="text.subtext">
           {helperText}
-        </Text>
-      )}
-      {children({id, isInvalid, ariaDescribedby: errorId})}
-      {isInvalid && error && (
-        <Text
-          as="div"
-          fontSize={200}
-          color="text.error"
-          mt={300}
-          id={errorId}
-          data-qa-formfield-error={
-            (qa && qa['data-qa-formfield-error']) || errorContainerText.current
-          }
-        >
+        </Text>}
+      {children({
+      id,
+      isInvalid,
+      ariaDescribedby: errorId
+    })}
+      {isInvalid && error && <Text as="div" fontSize={200} color="text.error" mt={300} id={errorId} data-qa-formfield-error={qa && qa['data-qa-formfield-error'] || errorContainerText.current}>
           {error}
-        </Text>
-      )}
-    </Box>
-  );
+        </Text>}
+    </Box>;
 };
-export default FormField;
+export default FormField;

package/__flow__/Icon/deprecatedIcons.js

@@ -1,5 +1,6 @@
+// @flow
 // In February of 2020, the Design Systems team renamed and consolidated some icons in an effort to introduce consistency in the naming of our icons. This object maps old, deprecated icon names to the "correct" name of the icon {"deprecated key": "correct icon name value"}
-export default {
+export default Object.freeze({
   backtotop: 'back-to-top',
   'circle-check-filled': 'circle-check',
   'circle-check-no-fill': 'circle-check',
@@ -35,5 +36,5 @@ export default {
   'tumblr-nofill': 'tumblr',
   'twitter-business-mention': 'search',
   'verified-nofill': 'verified',
-  'window-maximize-solid': 'window-maximize',
-};
+  'window-maximize-solid': 'window-maximize'
+});

package/__flow__/Icon/index.flow.js

@@ -0,0 +1,34 @@
+// @flow
+import { type EnumIconNames } from "../EnumIconNames";
+import deprecatedIcons from "./deprecatedIcons";
+export type TypeIconName = EnumIconNames | $Keys<typeof deprecatedIcons>;
+export type TypeIconProps = {
+  /** Name of the icon in the svg sprite */
+  name: TypeIconName,
+  size?: 'mini' // 12x12
+  // TODO: deprecate default  in favor of small in future release
+  | 'default' // 16x16
+  | 'small' // 16x16
+  | 'medium' // 24x24
+  | 'large' // 32x32
+  | 'jumbo',
+  // 64x64
+  /** Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list. */
+  fixedWidth?: boolean,
+  /** Label used to describe the icon if not used with an accompanying visual label */
+  ariaLabel?: string,
+  ...
+};
+export type TypeToggleProps = {
+  /** Name of the icon to be shown in the active state */
+  activeName: EnumIconNames,
+  /** Name of the icon to be shown in the inactive state */
+  inactiveName: EnumIconNames,
+  /** Whether the active icon should be shown or not */
+  isActive: boolean,
+  /** The size of the icon. `small` is the default */
+  size?: 'mini' | 'default' | 'small' | 'medium' | 'large' | 'jumbo',
+  fixedWidth?: boolean,
+  ariaLabel?: string,
+  ...
+};

package/__flow__/Icon/index.js

@@ -1,91 +1,49 @@
 // @flow
 import * as React from 'react';
-import styled, {css} from 'styled-components';
-import type {EnumIconNames} from '../EnumIconNames';
-import iconViewBoxes from '../IconViewBoxes';
-import Container from './styles';
-import Box from '../Box';
-import deprecatedIcons from './deprecatedIcons';
-
-export type TypeProps = {
-  /** Name of the icon in the svg sprite */
-  name: EnumIconNames | $Keys<typeof deprecatedIcons>,
-  size?:
-    | 'mini' // 12x12
-    // TODO: deprecate default  in favor of small in future release
-    | 'default' // 16x16
-    | 'small' // 16x16
-    | 'medium' // 24x24
-    | 'large' // 32x32
-    | 'jumbo', // 64x64
-  /** Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list. */
-  fixedWidth?: boolean,
-  /** Label used to describe the icon if not used with an accompanying visual label */
-  ariaLabel?: string,
-};
+import styled, { css } from 'styled-components';
+import Box from "../Box";
+import iconViewBoxes from "../IconViewBoxes";
+import Container from "./styles";
+import deprecatedIcons from "./deprecatedIcons";
+import type { TypeIconProps, TypeToggleProps } from "./index.flow";
 
+/**
+ * @deprecated Use TypeIconProps from root instead
+ */
+export type TypeProps = TypeIconProps;
 const Icon = ({
   name,
   size = 'default',
   fixedWidth = false,
   ariaLabel,
   ...rest
-}: TypeProps) => {
+}: TypeIconProps) => {
+  // $FlowIssue
   const iconName = deprecatedIcons[name] || name;
   const iconViewBox = iconViewBoxes[iconName];
-
   return (
-    <Container
-      iconSize={size}
-      fixedWidth={!!fixedWidth}
-      key={name}
-      aria-label={ariaLabel}
-      data-qa-icon={name}
-      // $FlowIssue - upgrade v0.112.0
-      {...rest}
-    >
+    // $FlowIssue - upgrade v0.112.0
+    <Container iconSize={size} fixedWidth={!!fixedWidth} key={name} aria-label={ariaLabel} data-qa-icon={name} {...rest}>
       <svg className="Icon-svg" viewBox={iconViewBox} focusable={false}>
-        <use
-          xmlnsXlink="http://www.w3.org/1999/xlink"
-          xlinkHref={`#ssiconsvg-${iconName}`}
-        />
+        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref={`#ssiconsvg-${iconName}`} />
       </svg>
     </Container>
   );
 };
-
 const ToggleableIcon = styled(Icon)`
-  transition: all ${(p) => p.theme.duration.fast} linear;
+  transition: all ${p => p.theme.duration.fast} linear;
 
-  ${(p) =>
-    p.active &&
-    css`
+  ${p => p.active && css`
       opacity: 1;
       transform: scale(1);
     `}
 
-  ${(p) =>
-    !p.active &&
-    css`
+  ${p => !p.active && css`
       position: absolute;
       opacity: 0;
       transform: scale(0);
     `}
 `;
-
-type TypeToggleProps = {
-  /** Name of the icon to be shown in the active state */
-  activeName: EnumIconNames,
-  /** Name of the icon to be shown in the inactive state */
-  inactiveName: EnumIconNames,
-  /** Whether the active icon should be shown or not */
-  isActive: boolean,
-  /** The size of the icon. `small` is the default */
-  size?: 'mini' | 'default' | 'small' | 'medium' | 'large' | 'jumbo',
-  fixedWidth?: boolean,
-  ariaLabel?: string,
-};
-
 const IconToggle = ({
   activeName,
   inactiveName,
@@ -98,28 +56,11 @@ const IconToggle = ({
   return (
     // $FlowIssue - upgrade v0.112.0
     <Box as="span" position="relative" display="inline-flex" {...rest}>
-      <ToggleableIcon
-        active={isActive}
-        name={activeName}
-        size={size}
-        fixedWidth={fixedWidth}
-        ariaLabel={ariaLabel}
-        aria-hidden={!isActive}
-      />
-      <ToggleableIcon
-        active={!isActive}
-        name={inactiveName}
-        size={size}
-        fixedWidth={fixedWidth}
-        ariaLabel={ariaLabel}
-        aria-hidden={isActive}
-      />
+      <ToggleableIcon active={isActive} name={activeName} size={size} fixedWidth={fixedWidth} ariaLabel={ariaLabel} aria-hidden={!isActive} />
+      <ToggleableIcon active={!isActive} name={inactiveName} size={size} fixedWidth={fixedWidth} ariaLabel={ariaLabel} aria-hidden={isActive} />
     </Box>
   );
 };
-
 Icon.Toggle = IconToggle;
-
 Icon.Toggle.displayName = 'Icon.Toggle';
-
-export default Icon;
+export default Icon;

package/__flow__/Icon/styles.js

@@ -1,10 +1,8 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-import {verticalAlign} from 'styled-system';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css, type StyledComponent } from 'styled-components';
+import { verticalAlign } from 'styled-system';
+import { COMMON } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
 const sizes = {
   mini: '12px',
   /** TODO: deprecate default  in favor of small in future release */
@@ -12,9 +10,8 @@ const sizes = {
   small: '16px',
   medium: '24px',
   large: '32px',
-  jumbo: '64px',
+  jumbo: '64px'
 };
-
 const stylesForSize = (iconSize, fixedWidth) => css`
   line-height: ${iconSize};
 
@@ -24,26 +21,23 @@ const stylesForSize = (iconSize, fixedWidth) => css`
     fill: currentColor;
   }
 
-  ${fixedWidth &&
-  `
+  ${fixedWidth && `
     &,
     & .Icon-svg {
       width: ${iconSize}
     }
   `}
 `;
-
 const Container: StyledComponent<{...}, TypeTheme, *> = styled.span.attrs({
-  className: 'Icon',
+  className: 'Icon'
 })`
   display: inline-block;
   color: inherit;
   vertical-align: middle;
 
-  ${(props) => stylesForSize(sizes[props.iconSize], props.fixedWidth)}
+  ${props => stylesForSize(sizes[props.iconSize], props.fixedWidth)}
 
   ${COMMON}
   ${verticalAlign}
 `;
-
-export default Container;
+export default Container;