@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/EmptyState/index.test.js

@@ -1,124 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import 'jest-styled-components';
-import EmptyState from './';
-import Image from '../Image';
-import Button from '../Button';
-
-describe('EmptyState', () => {
-  it('should render', () => {
-    const {getByDataQaLabel} = render(
-      <EmptyState
-        media={
-          <Image
-            alt="No assets matching your search or filters"
-            src="https://cl.ly/c878e80ca537/telescope.svg"
-            m={0}
-          />
-        }
-        headline="No content found"
-      />
-    );
-    expect(getByDataQaLabel({emptystate: 'No content found'})).toBeTruthy();
-  });
-
-  it('should render a media', async () => {
-    const {getByDataQaLabel} = render(
-      <EmptyState
-        media={
-          <Image
-            alt="No assets matching your search or filters"
-            src="https://cl.ly/c878e80ca537/telescope.svg"
-            m={0}
-          />
-        }
-        headline="No assets matching your search or filters"
-      />
-    );
-    expect(
-      getByDataQaLabel({image: 'No assets matching your search or filters'})
-    ).toBeTruthy();
-    expect(
-      getByDataQaLabel({
-        'image-src': 'https://cl.ly/c878e80ca537/telescope.svg',
-      })
-    ).toBeTruthy();
-  });
-
-  it('should render a headline', async () => {
-    const {getByText} = render(
-      <EmptyState
-        media={
-          <Image
-            alt="No assets matching your search or filters"
-            src="https://cl.ly/c878e80ca537/telescope.svg"
-            m={0}
-          />
-        }
-        headline="No assets matching your search or filters"
-      />
-    );
-    expect(getByText('No assets matching your search or filters')).toBeTruthy();
-  });
-
-  it('should render a subtext', async () => {
-    const {getByText} = render(
-      <EmptyState
-        media={
-          <Image
-            alt="No assets matching your search or filters"
-            src="https://cl.ly/b04c6087458f/notes.svg"
-            m={0}
-          />
-        }
-        headline="No content found"
-        subtext="There is no content for the date range you’ve selected."
-        primaryAction={<Button>Compose a Post</Button>}
-      />
-    );
-    expect(
-      getByText('There is no content for the date range you’ve selected.')
-    ).toBeTruthy();
-  });
-
-  it('should render a primary button', async () => {
-    const {getByText} = render(
-      <EmptyState
-        media={
-          <Image
-            alt="No assets matching your search or filters"
-            src="https://cl.ly/57b28cb6caef/abacus.svg"
-            m={0}
-          />
-        }
-        headline="Uh oh! Something went wrong, please try again."
-        primaryAction={<Button>Reload Page</Button>}
-      />
-    );
-    const element = getByText('Reload Page');
-    expect(element).toBeTruthy();
-    expect(element).toHaveStyleRule('color', '#FFFFFF');
-  });
-
-  it('should render a secondary button', async () => {
-    const {getByText} = render(
-      <EmptyState
-        media={
-          <Image
-            alt="No assets matching your search or filters"
-            src="https://cl.ly/db498c7682df/download/analytics.svg"
-            m={0}
-          />
-        }
-        headline="Ready to create your first topic?"
-        subtext="Now that you have the basics down, it’s time to create a topic. Remember to look for the icon at any time you are feeling lost."
-        primaryAction={<Button>Create a Topic</Button>}
-        secondaryAction={<Button>I&apos;ll do this later</Button>}
-      />
-    );
-    const element = getByText("I'll do this later");
-    expect(element).toBeTruthy();
-    expect(element).toHaveStyleRule('color', '#515e5f');
-  });
-});

package/__flow__/Fieldset/index.stories.js

@@ -1,135 +0,0 @@
-// @flow
-import React from 'react';
-import Box from '../Box';
-import Text from '../Text';
-import Fieldset from './';
-import Radio from '../Radio';
-import Input from '../Input';
-import FormField from '../FormField';
-
-export default {
-  title: 'Components/Form Elements/Fieldset',
-  component: Fieldset,
-};
-
-export const radioGroup = () => (
-  <Box width="443px">
-    <Fieldset label="Select a location">
-      <Radio
-        id="location-chicago"
-        name="location"
-        label="Chicago"
-        checked={true}
-      />
-      <Radio
-        id="location-seattle"
-        name="location"
-        label="Seattle"
-        checked={false}
-      />
-      <Radio
-        id="location-dublin"
-        name="location"
-        label="Dublin"
-        checked={false}
-      />
-    </Fieldset>
-  </Box>
-);
-
-radioGroup.story = {
-  name: 'Radio group',
-};
-
-export const inputs = () => (
-  <Box width="443px">
-    <Fieldset
-      label={
-        <Text fontSize={400} color="text.headline">
-          Your Name
-        </Text>
-      }
-    >
-      <FormField label="First Name">
-        {(props) => <Input {...props} name="first-name" />}
-      </FormField>
-      <FormField label="Last Name">
-        {(props) => <Input {...props} name="last-name" />}
-      </FormField>
-    </Fieldset>
-  </Box>
-);
-
-inputs.story = {
-  name: 'Inputs',
-};
-
-export const horizontalRadios = () => (
-  <Box width="443px">
-    <Fieldset label="Select a location" layout="horizontal">
-      <Radio
-        id="location-chicago"
-        name="location"
-        label="Chicago"
-        checked={true}
-      />
-      <Radio
-        id="location-seattle"
-        name="location"
-        label="Seattle"
-        checked={false}
-      />
-      <Radio
-        id="location-dublin"
-        name="location"
-        label="Dublin"
-        checked={false}
-      />
-    </Fieldset>
-  </Box>
-);
-
-horizontalRadios.story = {
-  name: 'Horizontal Radios',
-};
-
-export const horizontalInputs = () => (
-  <Box width="443px">
-    <Fieldset label="Your Name" layout="horizontal">
-      <FormField label="First Name">
-        {(props) => <Input {...props} name="first-name" />}
-      </FormField>
-      <FormField label="Last Name">
-        {(props) => <Input {...props} name="last-name" />}
-      </FormField>
-    </Fieldset>
-  </Box>
-);
-
-export const customFieldset = () => (
-  <Box width="443px">
-    <Fieldset
-      label={
-        <Fieldset.Legend fontSize={500} color="green.400">
-          What's your sign?
-        </Fieldset.Legend>
-      }
-      helperText={
-        <Fieldset.HelperText fontSize={400} color="blue.700">
-          Mucho Mucho Amor
-        </Fieldset.HelperText>
-      }
-    >
-      <FormField label="Name">
-        {(props) => <Input {...props} name="name" />}
-      </FormField>
-      <FormField label="Zodiac">
-        {(props) => <Input {...props} name="zodiac" />}
-      </FormField>
-    </Fieldset>
-  </Box>
-);
-
-horizontalInputs.story = {
-  name: 'Horizontal Inputs',
-};

package/__flow__/Fieldset/index.test.js

@@ -1,34 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import Fieldset from './index';
-import Radio from '../Radio';
-
-test('Fieldset builds component when supplied props', () => {
-  const {getByText, getByLabelText} = render(
-    <Fieldset label="the label" helperText="helper text">
-      <Radio id="the content" name="the content" label="the content" />
-    </Fieldset>
-  );
-
-  expect(getByText('the label')).toBeInTheDocument();
-  expect(getByText('helper text')).toBeInTheDocument();
-  expect(getByLabelText('the content')).toBeInTheDocument();
-});
-
-test('Fieldset supports custom label and helper text', () => {
-  const {getByText, getByLabelText} = render(
-    <Fieldset
-      label={<Fieldset.Legend fontSize={500}>the label</Fieldset.Legend>}
-      helperText={
-        <Fieldset.HelperText mb={400}>helper text</Fieldset.HelperText>
-      }
-    >
-      <Radio id="the content" name="the content" label="the content" />
-    </Fieldset>
-  );
-
-  expect(getByText('the label')).toBeInTheDocument();
-  expect(getByText('helper text')).toBeInTheDocument();
-  expect(getByLabelText('the content')).toBeInTheDocument();
-});

package/__flow__/FormField/index.stories.js

@@ -1,116 +0,0 @@
-// @flow
-import React from 'react';
-
-import Box from '../Box';
-import Textarea from '../Textarea';
-import Input from '../Input';
-import Select from '../Select';
-import FormField, {type TypeProps} from './';
-
-export default {
-  title: 'Components/Form Elements/FormField',
-  component: FormField,
-  args: {
-    value: '',
-    mb: 100,
-    isInvalid: true,
-  },
-};
-
-type TypeFormField = {
-  ...TypeProps,
-  value: string,
-};
-
-export const defaultStory = (args: TypeFormField) => (
-  <Box width="443px" margin="0 auto">
-    <FormField label="Title" helperText="This is a line of helper text">
-      {(props) => (
-        <Input
-          {...props}
-          name="title"
-          placeholder="Enter a title"
-          value={args.value}
-        />
-      )}
-    </FormField>
-    <FormField
-      id="descriptionIdThatIWantedToPassIn"
-      label="Description"
-      mb={args.mb}
-    >
-      {(props) => (
-        <Textarea
-          {...props}
-          name="description"
-          placeholder="Enter a description"
-          value={args.value}
-        />
-      )}
-    </FormField>
-    <FormField label="Reason">
-      {(props) => (
-        <Select {...props} name="reason">
-          <option value="">Select a reason</option>
-          <option value="something">Something goes here</option>
-        </Select>
-      )}
-    </FormField>
-  </Box>
-);
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const error = (args: TypeFormField) => (
-  <Box width="443px" margin="0 auto">
-    <FormField
-      label="Title"
-      helperText="This is a line of helper text"
-      error="There is an error associated with this input"
-      isInvalid={args.isInvalid}
-    >
-      {(props) => (
-        <Input
-          {...props}
-          name="title"
-          placeholder="Enter a title"
-          value={args.value}
-        />
-      )}
-    </FormField>
-    <FormField
-      id="descriptionIdThatIWantedToPassIn"
-      label="Description"
-      isInvalid={args.isInvalid}
-      error="There is an error associated with this textarea"
-      mb={args.mb}
-    >
-      {(props) => (
-        <Textarea
-          {...props}
-          name="description"
-          placeholder="Enter a description"
-          value={args.value}
-        />
-      )}
-    </FormField>
-    <FormField
-      label="Reason"
-      error="There is an error associated with this select"
-      isInvalid={args.isInvalid}
-    >
-      {(props) => (
-        <Select {...props} name="reason">
-          <option value="">Select a reason</option>
-          <option value="something">Something goes here</option>
-        </Select>
-      )}
-    </FormField>
-  </Box>
-);
-
-error.story = {
-  name: 'Error',
-};

package/__flow__/FormField/index.test.js

@@ -1,71 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import Input from '../Input';
-import FormField from './';
-
-describe('FormField', () => {
-  const label = 'Label';
-  const inputVal = 'value';
-  it('passes the autogenerated id down', () => {
-    const {getByLabelText} = render(
-      <FormField
-        label={label}
-        error="There is an error associated with this input"
-        isInvalid={true}
-      >
-        {(props) => (
-          <Input
-            {...props}
-            placeholder="Enter a title"
-            name="title"
-            value={inputVal}
-          />
-        )}
-      </FormField>
-    );
-    expect(getByLabelText(label)).toHaveValue(inputVal);
-  });
-  it('passes the id passed in down to the input field', () => {
-    const manualId = 'manualId';
-    const {getByLabelText} = render(
-      <FormField
-        id={manualId}
-        label={label}
-        error="There is an error associated with this input"
-        isInvalid={true}
-      >
-        {(props) => (
-          <Input {...props} placeholder="Enter a title" name="title" value="" />
-        )}
-      </FormField>
-    );
-    expect(getByLabelText(label)).toHaveAttribute('id', 'manualId');
-  });
-  it('is accessible', async () => {
-    const {runA11yCheck} = render(
-      <FormField
-        label="Title"
-        error="There is an error associated with this input"
-        isInvalid={true}
-      >
-        {(props) => (
-          <Input {...props} placeholder="Enter a title" name="title" value="" />
-        )}
-      </FormField>
-    );
-    await runA11yCheck();
-  });
-
-  it('should visually hide label', () => {
-    const manualId = 'manualId';
-    const {getByTestId} = render(
-      <FormField id={manualId} label={label} isLabelHidden={true}>
-        {(props) => (
-          <Input {...props} placeholder="Enter a title" name="title" value="" />
-        )}
-      </FormField>
-    );
-    expect(getByTestId('visually-hidden')).toBeTruthy();
-  });
-});

package/__flow__/Icon/index.stories.js

@@ -1,175 +0,0 @@
-// @flow
-import React, {useState} from 'react';
-import Icon, {type TypeProps} from './';
-import Button from '../Button';
-import Box from '../Box';
-import deprecatedNames from './deprecatedIcons';
-
-export default {
-  title: 'Components/Icon',
-};
-
-export const mini12X12 = (args: TypeProps) => <Icon {...args} />;
-
-mini12X12.args = {
-  color: 'icon.base',
-  name: 'dashboard',
-  size: 'mini',
-};
-
-mini12X12.story = {
-  name: 'Mini (12 x 12)',
-};
-
-export const default16X16 = (args: TypeProps) => <Icon {...args} />;
-
-default16X16.args = {
-  color: 'icon.base',
-  name: 'dashboard',
-};
-
-default16X16.story = {
-  name: 'Default (16 x 16)',
-};
-
-export const medium24X24 = (args: TypeProps) => <Icon {...args} />;
-
-medium24X24.args = {
-  color: 'icon.base',
-  name: 'dashboard',
-  size: 'medium',
-};
-
-medium24X24.story = {
-  name: 'Medium (24 x 24)',
-};
-
-export const large32X32 = (args: TypeProps) => <Icon {...args} />;
-
-large32X32.args = {
-  color: 'icon.base',
-  name: 'dashboard',
-  size: 'large',
-};
-
-large32X32.story = {
-  name: 'Large (32 x 32)',
-};
-
-export const jumbo64X64 = (args: TypeProps) => <Icon {...args} />;
-
-jumbo64X64.args = {
-  color: 'icon.base',
-  name: 'dashboard',
-  size: 'jumbo',
-};
-
-jumbo64X64.story = {
-  name: 'Jumbo (64 x 64)',
-};
-
-export const defaultFixedWidth = (args: TypeProps) => <Icon {...args} />;
-
-defaultFixedWidth.args = {
-  color: 'icon.success',
-  name: 'dashboard',
-  fixedWidth: true,
-};
-
-defaultFixedWidth.story = {
-  name: 'Fixed Width (16 x 16)',
-};
-
-// testing for color usage via the theme
-export const sentimentIcons = () => (
-  <Box p={24}>
-    <Icon
-      name="flat-positive-sentiment"
-      size="large"
-      color="icon.positive_sentiment"
-      mr={400}
-    />
-    <Icon
-      name="flat-negative-sentiment"
-      size="large"
-      color="icon.negative_sentiment"
-      mr={400}
-    />
-    <Icon
-      name="flat-neutral-sentiment"
-      size="large"
-      color="icon.neutral_sentiment"
-      mr={400}
-    />
-    <Icon
-      name="flat-neutral-sentiment-outline"
-      size="large"
-      color="icon.base"
-    />
-  </Box>
-);
-
-sentimentIcons.story = {
-  name: 'Sentiment usage',
-};
-
-export const Toggle = () => {
-  const [state, setState] = useState([false, false, false, false]);
-  const toggle = (index) => {
-    const newState = state;
-    newState[index] = !state[index];
-    setState([...newState]);
-  };
-
-  return (
-    <Box display="flex" alignItems="center">
-      <Button appearance="pill" onClick={() => toggle(0)} mr={300}>
-        <Icon.Toggle
-          activeName="like"
-          inactiveName="like-outline"
-          isActive={state[0]}
-          fixedWidth
-        />
-      </Button>
-
-      <Button appearance="pill" onClick={() => toggle(1)} mr={300}>
-        <Icon.Toggle
-          activeName="reply"
-          inactiveName="reply-outline"
-          isActive={state[1]}
-          fixedWidth
-        />
-      </Button>
-
-      <Button appearance="pill" onClick={() => toggle(2)} mr={300}>
-        <Icon.Toggle
-          activeName="heart"
-          inactiveName="heart-outline"
-          isActive={state[2]}
-          fixedWidth
-        />
-      </Button>
-
-      <Button appearance="pill" onClick={() => toggle(3)}>
-        <Icon.Toggle
-          activeName="tag"
-          inactiveName="tag-outline"
-          isActive={state[3]}
-          fixedWidth
-        />
-      </Button>
-    </Box>
-  );
-};
-
-export const deprecatedIconNames = () => (
-  <Box p={24} bg="neutral.200">
-    {Object.keys(deprecatedNames).map((name) => (
-      <Icon name={name} size="large" />
-    ))}
-  </Box>
-);
-
-deprecatedIconNames.story = {
-  name: 'Deprecated names',
-};

package/__flow__/Icon/index.test.js

@@ -1,25 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import Icon from './';
-
-describe('Icon', () => {
-  it('should render properly', () => {
-    const {getByDataQaLabel} = render(<Icon name="reply" />);
-    expect(getByDataQaLabel({icon: 'reply'})).toBeTruthy();
-  });
-
-  it('should render an svg', () => {
-    const {container} = render(<Icon name="reply" />);
-    const svg = container.querySelector('.Icon-svg');
-    expect(svg).toBeTruthy();
-  });
-
-  it('should receive proper xlinkHref from name prop', () => {
-    const {container} = render(<Icon name="reply" />);
-    const use = container.querySelector('use');
-    expect(use.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe(
-      '#ssiconsvg-reply'
-    );
-  });
-});