@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Table/index.stories.js

@@ -1,293 +0,0 @@
-// @flow
-import React from 'react';
-import Table from './';
-import TableRowAccordion from '../TableRowAccordion';
-import {SORT_DIRECTIONS} from '../TableHeaderCell';
-
-export default {
-  title: 'Components/Table/Table',
-};
-
-export const defaultStory = () => (
-  <Table
-    head={[
-      {content: 'Food Item', id: '1'},
-      {content: 'Calories', id: '2', isSortable: true},
-      {content: 'Total Fat: (69% DV*)', id: '3'},
-      {content: 'Total Carbs: (21% DV*)', id: '4'},
-      {content: 'Protein', id: '5'},
-    ]}
-    rows={[
-      {
-        cells: [
-          {content: '🍔 Bacon Smokehouse Burger', id: '1'},
-          {content: '840', id: '2'},
-          {content: '45g', id: '3'},
-          {content: '62g', id: '4'},
-          {content: '46g', id: '5'},
-        ],
-        id: '1',
-      },
-      {
-        cells: [
-          {content: '🍔 Big Mac', id: '1'},
-          {content: '540', id: '2'},
-          {content: '28g', id: '3'},
-          {content: '46g', id: '4'},
-          {content: '25g', id: '5'},
-        ],
-        id: '2',
-      },
-    ]}
-    onSort={(e) => alert('Sort!')}
-    sortDirection={SORT_DIRECTIONS.ASC}
-    sortId="2"
-  />
-);
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const columnSpan = () => (
-  <Table
-    head={[
-      {
-        colSpan: 2,
-        content: 'Header',
-        id: '1',
-      },
-    ]}
-    rows={[
-      {
-        cells: [
-          {content: 'Column 1', id: '1'},
-          {content: 'Column 2', id: '2'},
-        ],
-        id: '1',
-      },
-      {
-        cells: [
-          {
-            colSpan: 2,
-            content: 'This is a footer for the table.',
-            id: '1',
-          },
-        ],
-        id: '2',
-      },
-    ]}
-  />
-);
-
-columnSpan.story = {
-  name: 'Column span',
-};
-
-export const columnWidth = () => (
-  <Table
-    head={[
-      {
-        content: 'Food Item',
-        id: '1',
-        width: 200,
-      },
-      {
-        align: 'center',
-        content: 'Calories',
-        id: '2',
-        isSortable: true,
-        width: 100,
-      },
-      {
-        content: 'Description',
-        id: '3',
-      },
-      {
-        align: 'right',
-        content: 'Protein',
-        id: '4',
-        width: 100,
-      },
-    ]}
-    rows={[
-      {
-        cells: [
-          {
-            content: '🍔 Bacon Smokehouse Burger',
-            id: '1',
-            width: 200,
-          },
-          {
-            align: 'center',
-            content: '840',
-            id: '2',
-            width: 100,
-          },
-          {
-            content:
-              'A burger made with unexpected flavor combinations, including crispy Applewood smoked bacon, smoky bacon-onion sauce, real white cheddar, mild sweet mustard sauce and in-house fried onion strings.',
-            id: '3',
-          },
-          {
-            align: 'right',
-            content: '46g',
-            id: '4',
-          },
-        ],
-        id: '1',
-      },
-      {
-        cells: [
-          {
-            content: '🍔 Big Mac',
-            id: '1',
-            width: 200,
-          },
-          {
-            align: 'center',
-            content: '540',
-            id: '2',
-            width: 100,
-          },
-          {
-            content:
-              'Mouthwatering perfection starts with two 100% pure beef patties and Big Mac® sauce sandwiched between a sesame seed bun.',
-            id: '3',
-          },
-          {
-            align: 'right',
-            content: '25g',
-            id: '4',
-          },
-        ],
-        id: '2',
-      },
-    ]}
-  />
-);
-
-columnWidth.story = {
-  name: 'Column width',
-};
-
-export const customRowRendering = () => (
-  <Table
-    head={[
-      {
-        id: '1',
-        content: 'Food Item',
-      },
-      {
-        id: '2',
-        content: 'Calories',
-        isSortable: true,
-      },
-      {
-        id: '3',
-        content: 'Total Fat: (69% DV*)',
-      },
-      {
-        id: '4',
-        content: 'Total Carbs: (21% DV*)',
-      },
-      {
-        id: '5',
-        content: 'Protein',
-      },
-    ]}
-    rows={[
-      {
-        id: 'baconsmokehouse',
-        cells: [
-          {id: '1', content: '🍔 Bacon Smokehouse Burger'},
-          {id: '2', content: '840'},
-          {id: '3', content: '45g'},
-          {id: '4', content: '62g'},
-          {id: '5', content: '46g'},
-        ],
-      },
-      {
-        id: 'Big-Mac',
-        cells: [
-          {id: '1', content: '🍔 Big Mac'},
-          {id: '2', content: '540'},
-          {id: '3', content: '28g'},
-          {id: '4', content: '46g'},
-          {id: '5', content: '25g'},
-        ],
-      },
-    ]}
-    rowRender={(row) => {
-      return (
-        <TableRowAccordion
-          key={row.id}
-          id={row.id}
-          cells={row.cells}
-          isExpanded={row.id === 'baconsmokehouse'}
-          onToggle={(id) => alert(`Toggled ID #${id}`)}
-          detail={
-            row.id === 'baconsmokehouse' ? (
-              <img
-                width="100%"
-                src="https://www.mcdonalds.com/content/dam/usa/nutrition/items/hero/desktop/t-mcdonalds-baconsmokehouse.jpg"
-                alt="doge"
-              />
-            ) : (
-              <img
-                width="100%"
-                src="https://www.mcdonalds.com/content/dam/usa/nutrition/items/hero/desktop/t-mcdonalds-Big-Mac.jpg"
-                alt="doge"
-              />
-            )
-          }
-        />
-      );
-    }}
-  />
-);
-
-customRowRendering.story = {
-  name: 'Custom row rendering',
-};
-
-export const staticTable = () => {
-  const columns = ['Name', 'Squad', 'Favorite Color'];
-  const rows = [
-    {
-      name: 'Mike R',
-      squad: 'People and Community',
-      favoriteColor: 'Green',
-    },
-    {
-      name: 'Travis W',
-      squad: 'Listening',
-      favoriteColor: 'Blue',
-    },
-  ];
-
-  return (
-    <Table>
-      <Table.TableHead>
-        <Table.TableRow>
-          {columns.map((c) => (
-            <Table.HeaderCell id={c.toLowerCase()}>{c} </Table.HeaderCell>
-          ))}
-        </Table.TableRow>
-      </Table.TableHead>
-      <Table.TableBody>
-        {rows.map((r, i) => (
-          <Table.TableRow>
-            <Table.Cell id={`row-${i}-name`}>{r.name} </Table.Cell>
-            <Table.Cell id={`row-${i}-squad`}>{r.squad} </Table.Cell>
-            <Table.Cell id={`row-${i}-color`}>{r.favoriteColor} </Table.Cell>
-          </Table.TableRow>
-        ))}
-      </Table.TableBody>
-    </Table>
-  );
-};
-
-staticTable.story = {
-  name: 'Static Table',
-};

package/__flow__/Table/index.test.js

@@ -1,91 +0,0 @@
-// @flow
-import React from 'react';
-import {render, fireEvent} from '../utils/react-testing-library';
-import Table from './';
-
-describe('The Table Component', () => {
-  it('renders table headers', () => {
-    const {getAllByDataQaLabel} = render(
-      <Table
-        head={[
-          {
-            id: 'food_item',
-            content: 'Food Item',
-          },
-          {
-            id: 'calories',
-            content: 'Calories',
-          },
-        ]}
-      />
-    );
-    expect(getAllByDataQaLabel({'table-header-cell': ''})).toBeTruthy();
-    expect(getAllByDataQaLabel({'table-header-cell': ''}).length).toEqual(2);
-  });
-
-  it('renders table rows and cells', () => {
-    const {getAllByDataQaLabel} = render(
-      <Table
-        rows={[
-          {
-            id: '1',
-            cells: [
-              {
-                id: '1',
-                content: 'Bacon Smokehouse Burger',
-              },
-              {
-                id: '2',
-                content: '62g',
-              },
-            ],
-          },
-        ]}
-      />
-    );
-    const allRows = getAllByDataQaLabel({'table-row': ''});
-    const allCells = getAllByDataQaLabel({'table-cell': ''});
-    expect(allRows).toBeTruthy();
-    expect(allRows.length).toEqual(1);
-    expect(allCells).toBeTruthy();
-    expect(allCells.length).toEqual(2);
-  });
-
-  it('allows for table headers to be sortable', () => {
-    const callback = jest.fn();
-    const {getAllByDataQaLabel} = render(
-      <Table
-        head={[
-          {
-            id: 'food_item',
-            content: 'Food Item',
-            isSortable: true,
-          },
-          {
-            id: 'calories',
-            content: 'Calories',
-          },
-        ]}
-        onSort={callback}
-        sortId={undefined}
-        sortDirection="ASC"
-      />
-    );
-    fireEvent.click(getAllByDataQaLabel({'table-header-cell': ''})[0]);
-    expect(callback).toBeCalledWith('food_item');
-  });
-
-  it('renders the children if present', () => {
-    const {getByText} = render(
-      <Table>
-        <tbody>
-          <tr>
-            <td>Child</td>
-          </tr>
-        </tbody>
-      </Table>
-    );
-
-    expect(getByText('Child')).toBeInTheDocument();
-  });
-});

package/__flow__/TableCell/index.stories.js

@@ -1,33 +0,0 @@
-// @flow
-import React from 'react';
-import TableCell, {type TypeTableCell} from './';
-export default {
-  title: 'Components/Table/TableCell',
-  component: TableCell,
-  args: {
-    content: '🍔 Bacon Smokehouse Burger',
-    id: 'bacon_smokehouse',
-  },
-};
-
-export const defaultStory = (args: TypeTableCell) => (
-  <TableCell color="text.body" {...args} />
-);
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const additionalProps = (args: TypeTableCell) => (
-  <TableCell color="text.body" {...args} />
-);
-
-additionalProps.args = {
-  width: 300,
-  colSpan: 2,
-  align: 'center',
-};
-
-additionalProps.story = {
-  name: 'Additional props',
-};

package/__flow__/TableCell/index.test.js

@@ -1,20 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import TableCell from './';
-
-describe('TableCell', () => {
-  it('should render properly', () => {
-    const {getByDataQaLabel, getByText} = render(
-      <TableCell id="stuff" content="more stuff here" />
-    );
-    expect(getByDataQaLabel({'table-cell': ''})).toBeTruthy();
-    expect(getByText('more stuff here')).toBeInTheDocument();
-  });
-
-  it('renders the children if present', () => {
-    const {getByText} = render(<TableCell id="test">Child</TableCell>);
-
-    expect(getByText('Child')).toBeInTheDocument();
-  });
-});

package/__flow__/TableHeaderCell/index.stories.js

@@ -1,54 +0,0 @@
-// @flow
-import React from 'react';
-import TableHeaderCell, {type TypeProps} from './';
-
-export default {
-  title: 'Components/Table/TableHeaderCell',
-  component: TableHeaderCell,
-  argTypes: {
-    isSortable: {control: 'boolean'},
-  },
-  args: {
-    content: 'Food Item',
-    id: '1',
-    isSortable: undefined,
-    align: undefined,
-    width: undefined,
-  },
-};
-
-export const defaultStory = (args: TypeProps) => (
-  <TableHeaderCell color="text.headline" {...args} />
-);
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const sortable = (args: TypeProps) => (
-  <TableHeaderCell color="text.headline" {...args} />
-);
-
-sortable.args = {
-  isSortable: true,
-};
-
-sortable.story = {
-  name: 'Sortable',
-};
-
-export const additionalProps = (args: TypeProps) => (
-  <TableHeaderCell color="text.headline" {...args} />
-);
-
-additionalProps.args = {
-  isSortable: true,
-  content: 'Calories',
-  id: '2',
-  align: 'center',
-  width: 100,
-};
-
-additionalProps.story = {
-  name: 'Additional props',
-};

package/__flow__/TableHeaderCell/index.test.js

@@ -1,28 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import TableHeaderCell from './';
-
-describe('TableHeaderCell', () => {
-  it('should render properly', () => {
-    const {getByDataQaLabel, getByText} = render(
-      <table>
-        <TableHeaderCell id="test" content="more stuff here" />
-      </table>
-    );
-    expect(getByDataQaLabel({'table-header-cell': ''})).toBeTruthy();
-    expect(getByText('more stuff here')).toBeInTheDocument();
-  });
-
-  it('renders the children if present', () => {
-    const {getByText} = render(
-      <table>
-        <TableHeaderCell id="test" content="content">
-          Child
-        </TableHeaderCell>
-      </table>
-    );
-
-    expect(getByText('Child')).toBeInTheDocument();
-  });
-});

package/__flow__/TableRowAccordion/index.stories.js

@@ -1,129 +0,0 @@
-// @flow
-import React from 'react';
-import TableRowAccordion from './';
-
-export default {
-  title: 'Components/Table/TableRowAccordion',
-};
-
-export const collapsed = () => (
-  <TableRowAccordion
-    id="1"
-    cells={[
-      {
-        id: '1',
-        content: '🍔 Bacon Smokehouse Burger',
-      },
-      {
-        id: '2',
-        content: '840',
-      },
-      {
-        id: '3',
-        content: '45g',
-      },
-      {
-        id: '4',
-        content: '62g',
-      },
-      {
-        id: '5',
-        content: '46g',
-      },
-    ]}
-    isExpanded={false}
-    onToggle={() => {}}
-    detail={
-      <img
-        src="//i.kym-cdn.com/entries/icons/mobile/000/013/564/doge.jpg"
-        alt="doge"
-      />
-    }
-  />
-);
-
-collapsed.story = {
-  name: 'Collapsed',
-};
-
-export const expanded = () => (
-  <TableRowAccordion
-    id="1"
-    cells={[
-      {
-        id: '1',
-        content: '🍔 Bacon Smokehouse Burger',
-      },
-      {
-        id: '2',
-        content: '840',
-      },
-      {
-        id: '3',
-        content: '45g',
-      },
-      {
-        id: '4',
-        content: '62g',
-      },
-      {
-        id: '5',
-        content: '46g',
-      },
-    ]}
-    isExpanded={true}
-    onToggle={() => {}}
-    detail={
-      <img
-        src="//i.kym-cdn.com/entries/icons/mobile/000/013/564/doge.jpg"
-        alt="doge"
-      />
-    }
-  />
-);
-
-expanded.story = {
-  name: 'Expanded',
-};
-
-export const withToggleFunction = () => (
-  <TableRowAccordion
-    id="1"
-    cells={[
-      {
-        id: '1',
-        content: '🍔 Bacon Smokehouse Burger',
-      },
-      {
-        id: '2',
-        content: '840',
-      },
-      {
-        id: '3',
-        content: '45g',
-      },
-      {
-        id: '4',
-        content: '62g',
-      },
-      {
-        id: '5',
-        content: '46g',
-      },
-    ]}
-    isExpanded={false}
-    onToggle={(id) => {
-      alert(`clicked with id ${id}`);
-    }}
-    detail={
-      <img
-        src="//i.kym-cdn.com/entries/icons/mobile/000/013/564/doge.jpg"
-        alt="doge"
-      />
-    }
-  />
-);
-
-withToggleFunction.story = {
-  name: 'With toggle function',
-};