@sproutsocial/racine 13.7.1 → 14.0.0

package/__flow__/Table/index.js

@@ -1,84 +0,0 @@
-// @flow
-import * as React from 'react';
-import TableCell from "../TableCell";
-import TableHeaderCell from "../TableHeaderCell";
-import Container from "./styles";
-import type { TypeTableProps, TypeTableRow as TypeTableRow2 } from "./index.flow";
-
-/**
- * @deprecated Use TypeTableRow from root instead
- */
-export type TypeTableRow = TypeTableRow2;
-
-/**
- * @deprecated Use TypeTableProps from root instead
- */
-export type TypeProps = TypeTableProps;
-const renderTableRow = (row: TypeTableRow) => {
-  return <tbody key={row.id} data-qa-table-row="">
-      <tr>
-        {row.cells.map(td => {
-        return <TableCell {...td} key={td.id} />;
-      })}
-      </tr>
-    </tbody>;
-};
-
-/**
- * The table component assist in rendering tablular data.
- */
-export const Table = ({
-  head = [],
-  rows = [],
-  onSort,
-  sortId,
-  sortDirection,
-  rowRender,
-  children,
-  ...rest
-}: TypeTableProps) => {
-  if (children) {
-    return <Container {...rest} data-qa-table="">
-        {children}
-      </Container>;
-  }
-  return <Container {...rest} data-qa-table="">
-      {head.length > 0 && <thead data-qa-table-header="">
-          <tr>
-            {head.map(th => {
-          return <TableHeaderCell {...th} key={th.id} onSort={onSort} sortId={sortId} sortDirection={sortDirection} />;
-        })}
-          </tr>
-        </thead>}
-      {rows.map(row => {
-      return rowRender ? rowRender(row) : renderTableRow(row);
-    })}
-    </Container>;
-};
-type TypePassthroughProps = {
-  children: React.Node,
-  ...
-};
-export const TableHead = ({
-  children,
-  ...props
-}: TypePassthroughProps) => <thead {...props}>{children}</thead>;
-export const TableBody = ({
-  children,
-  ...props
-}: TypePassthroughProps) => <tbody {...props}>{children}</tbody>;
-export const TableRow = ({
-  children,
-  ...props
-}: TypePassthroughProps) => <tr {...props}>{children}</tr>;
-Table.TableHead = TableHead;
-Table.TableBody = TableBody;
-Table.TableRow = TableRow;
-Table.HeaderCell = TableHeaderCell;
-Table.Cell = TableCell;
-Table.TableHead.displayName = 'Table.TableHead';
-Table.TableBody.displayName = 'Table.TableBody';
-Table.TableRow.displayName = 'Table.TableRow';
-Table.HeaderCell.displayName = 'Table.HeaderCell';
-Table.Cell.displayName = 'Table.Cell';
-export default Table;

package/__flow__/Table/styles.js

@@ -1,21 +0,0 @@
-//@flow
-import styled, { type StyledComponent } from 'styled-components';
-import { COMMON } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-const Container: StyledComponent<{...}, TypeTheme, *> = styled.table`
-  width: 100%;
-  border-collapse: collapse;
-
-  thead {
-    vertical-align: bottom;
-  }
-
-  tr,
-  thead {
-    border-bottom: 1px solid
-      ${props => props.theme.colors.container.border.base};
-  }
-
-  ${COMMON}
-`;
-export default Container;

package/__flow__/TableCell/index.js

@@ -1,29 +0,0 @@
-// @flow
-import * as React from 'react';
-import Container from "./styles";
-import type { TypeTableCell as TypeTableCell2 } from "./index.flow";
-
-/**
- * @deprecated Use TypeTableCell from root instead
- */
-export type TypeTableCell = TypeTableCell2;
-
-/**
- * The table cell component is for rendering table cells and is meant to be used with the table component.
- */
-export default class TableCell extends React.Component<TypeTableCell> {
-  render() {
-    const {
-      id,
-      content,
-      colSpan,
-      width,
-      align,
-      children,
-      ...rest
-    } = this.props;
-    return <Container {...rest} alignment={align || 'left'} key={id} colSpan={colSpan} width={width} data-qa-table-cell="">
-        {children || content}
-      </Container>;
-  }
-}

package/__flow__/TableCell/styles.js

@@ -1,15 +0,0 @@
-//@flow
-import styled, { type StyledComponent } from 'styled-components';
-import { COMMON } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-const Container: StyledComponent<{
-  alignment: string
-}, TypeTheme, *> = styled.td`
-  ${props => props.theme.typography[200]}
-  font-weight: ${props => props.theme.fontWeights.normal};
-  padding: ${props => props.theme.space[300]};
-  text-align: ${props => props.alignment};
-
-  ${COMMON}
-`;
-export default Container;

package/__flow__/TableHeaderCell/constants.js

@@ -1,6 +0,0 @@
-// @flow
-
-export const SORT_DIRECTIONS = {
-  ASC: 'ASC',
-  DESC: 'DESC'
-};

package/__flow__/TableHeaderCell/index.js

@@ -1,77 +0,0 @@
-// @flow
-import * as React from 'react';
-import Icon from "../Icon";
-import Container, { SortIcon } from "./styles";
-import { SORT_DIRECTIONS } from "./constants";
-import type { TypeEnumSortDirections as TypeEnumSortDirections2, TypeTableHeaderCell as TypeTableHeaderCell2, TypeTableHeaderCellProps } from "./index.flow";
-export * from "./constants";
-
-/**
- * @deprecated Use TypeEnumSortDirections from root instead
- */
-export type TypeEnumSortDirections = TypeEnumSortDirections2;
-
-/**
- * @deprecated Use TypeTableHeaderCell from root instead
- */
-export type TypeTableHeaderCell = TypeTableHeaderCell2;
-
-/**
- * @deprecated Use TypeTableHeaderCellProps from root instead
- */
-export type TypeProps = TypeTableHeaderCellProps;
-
-/**
- * The table header cell component is for rendering table header cells and is meant to be used with the table component.
- */
-export default class TableHeaderCell extends React.Component<TypeTableHeaderCellProps> {
-  getSortIcon = (isSorted: boolean) => {
-    const {
-      sortDirection
-    } = this.props;
-    let iconName = 'chevron-up-down-filled';
-    if (isSorted && sortDirection === SORT_DIRECTIONS.ASC) {
-      iconName = 'chevron-up-filled';
-    } else if (isSorted && sortDirection === SORT_DIRECTIONS.DESC) {
-      iconName = 'chevron-down-filled';
-    }
-    return <SortIcon>
-        <Icon size="mini" name={iconName} />
-      </SortIcon>;
-  };
-  handleClick = (e: SyntheticEvent<HTMLButtonElement>) => {
-    const {
-      onClick,
-      onSort,
-      isSortable,
-      id
-    } = this.props;
-    if (onClick) {
-      onClick(e);
-      return;
-    }
-    if (!isSortable || !onSort) return;
-    onSort(id);
-  };
-  render() {
-    const {
-      id,
-      content,
-      colSpan,
-      width,
-      align,
-      isSortable,
-      shouldTruncate,
-      onSort,
-      sortId,
-      sortDirection,
-      children,
-      onClick,
-      ...rest
-    } = this.props;
-    return <Container {...rest} key={id} alignment={align || 'left'} sortable={isSortable} colSpan={colSpan} width={width} onClick={this.handleClick} data-tableheadercell-sortable={isSortable} data-qa-table-header-cell="" data-qa-table-header-cell-sortdirection={sortDirection}>
-        {children || content}
-        {isSortable && !children && this.getSortIcon(id === sortId)}
-      </Container>;
-  }
-}

package/__flow__/TableHeaderCell/styles.js

@@ -1,25 +0,0 @@
-//@flow
-import styled, { css, type StyledComponent } from 'styled-components';
-import { COMMON } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-const Container: StyledComponent<any, TypeTheme, *> = styled.th`
-  ${props => props.theme.typography[100]}
-  font-weight: ${props => props.theme.fontWeights.semibold};
-  padding: ${props => props.theme.space[300]};
-  text-align: ${props => props.alignment};
-
-  ${props => props.sortable && css`
-      position: relative;
-      cursor: pointer;
-    `}
-
-  ${COMMON}
-`;
-export const SortIcon: StyledComponent<{...}, TypeTheme, *> = styled.span`
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 0;
-  padding: 0 ${props => props.theme.space[200]};
-`;
-export default Container;

package/__flow__/TableRowAccordion/index.js

@@ -1,45 +0,0 @@
-// @flow
-import * as React from 'react';
-import Icon from "../Icon";
-import TableCell from "../TableCell";
-import Container, { Detail, Trigger } from "./styles";
-import type { TypeTableRowAccordionProps } from "./index.flow";
-
-/**
- * The table row accordion component allows for rendering a row of tabular data along with a addtional content to be rendered inside of an accordion drawer. This component is meant to be used with the table components rowRender mentod.
- */
-export default class TableRowAccordion extends React.Component<TypeTableRowAccordionProps> {
-  handleToggle = (e: Event) => {
-    const {
-      onToggle,
-      id
-    } = this.props;
-    e.stopPropagation();
-    if (onToggle) {
-      onToggle(id);
-    }
-  };
-  render() {
-    const {
-      id,
-      cells,
-      detail,
-      onToggle,
-      isExpanded,
-      ...rest
-    } = this.props;
-    return <Container {...rest} data-qa-table-row-accordion={isExpanded} key={id}>
-        <tr data-tablerowaccordion-summary onClick={this.handleToggle}>
-          {cells.map(td => {
-          return <TableCell {...td} key={td.id} />;
-        })}
-          <TableCell id="tableRowAccordion_trigger" content={<Trigger data-tablerowaccordion-trigger onClick={this.handleToggle} role="button">
-                <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} />
-              </Trigger>} />
-        </tr>
-        <Detail isExpanded={isExpanded} data-tablerowaccordion-detail>
-          <TableCell id="tableRowAccordion_detail" colSpan={100} content={detail} />
-        </Detail>
-      </Container>;
-  }
-}

package/__flow__/TableRowAccordion/styles.js

@@ -1,25 +0,0 @@
-//@flow
-import styled, { css, type StyledComponent } from 'styled-components';
-import { COMMON } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-const Container: StyledComponent<{...}, TypeTheme, *> = styled.tbody`
-  border-bottom: 1px solid
-    ${props => props.theme.colors.container.border.base};
-
-  ${COMMON}
-`;
-
-// eslint-disable-next-line flowtype/generic-spacing
-export const Detail: StyledComponent<{
-  isExpanded: boolean
-}, TypeTheme, *> = styled.tr`
-  display: none;
-
-  ${props => props.isExpanded && css`
-      display: table-row;
-    `}
-`;
-export const Trigger: StyledComponent<{...}, TypeTheme, *> = styled.div`
-  cursor: pointer;
-`;
-export default Container;

package/__flow__/Tabs/index.js

@@ -1,147 +0,0 @@
-// @flow strict-local
-import * as React from 'react';
-import Container, { TabItem, TabButton } from "./styles";
-import type { TypeTabButtonsProps, TypeTabsProps as TypeTabsProps2 } from "./index.flow";
-
-/**
- * @deprecated Use TypeTabsProps from root instead
- */
-export type TypeTabsProps = TypeTabsProps2;
-type TypeTabButtonRef = {
-  current: null | React.ElementRef<'button'>,
-  ...
-};
-type TypeTabButtonContext = $Shape<{
-  onActivate: (string) => void,
-  onTabMount: (id: string, ref: TypeTabButtonRef) => void,
-  onTabUpdate: (previousId: string, nextId: string) => void,
-  onTabUnmount: (id: string) => void,
-  selectedId: string,
-  fullWidth?: boolean,
-  ...
-}>;
-const TabButtonContext = React.createContext<TypeTabButtonContext>({});
-class TabItemButton extends React.Component<TypeTabButtonsProps, {}> {
-  static contextType = TabButtonContext;
-  context: TypeTabButtonContext;
-  buttonRef: TypeTabButtonRef = React.createRef<React.ElementRef<'button'>>();
-  componentDidMount() {
-    this.context.onTabMount(this.props.id, this.buttonRef);
-  }
-  componentDidUpdate(prevProps: TypeTabButtonsProps) {
-    if (prevProps.id !== this.props.id) {
-      this.context.onTabUpdate(prevProps.id, this.props.id);
-    }
-  }
-  componentWillUnmount() {
-    this.context.onTabUnmount(this.props.id);
-  }
-  render() {
-    const {
-      children,
-      id,
-      ...rest
-    } = this.props;
-    const {
-      selectedId,
-      onActivate,
-      fullWidth
-    } = this.context;
-    const isSelected = selectedId === id;
-    return <TabItem key={id} fullWidth={fullWidth} isSelected={isSelected}>
-        {/* $FlowIssue - upgrade v0.112.0 */}
-        <TabButton innerRef={this.buttonRef} id={id} onClick={() => onActivate(id)} isSelected={isSelected} tabIndex={isSelected ? 0 : -1} fullWidth={fullWidth} data-qa-tab-button={id} data-qa-tab-button-state={isSelected} {...rest}>
-          {children}
-        </TabButton>
-      </TabItem>;
-  }
-}
-
-/**
- * Render a group of buttons in a tab-heading style
- */
-export default class Tabs extends React.Component<TypeTabsProps, {}> {
-  static Button = TabItemButton;
-  buttonRefs: {
-    [string]: ?TypeTabButtonRef
-  } = {};
-  tabList: string[] = [];
-  getSelectedId = () => this.props.selectedId;
-  onActivate = (id: string) => this.props.onSelect(id);
-  onTabMount = (id: string, ref: TypeTabButtonRef) => {
-    if (!this.tabList.includes(id)) {
-      this.tabList.push(id);
-      this.buttonRefs[id] = ref;
-    }
-  };
-  onTabUpdate = (previousId: string, newId: string) => {
-    if (this.tabList.includes(previousId)) {
-      this.tabList = this.tabList.map(id => id === previousId ? newId : id);
-      this.buttonRefs[newId] = this.buttonRefs[previousId];
-      this.buttonRefs[previousId] = undefined;
-    }
-  };
-  onTabUnmount = (id: string) => {
-    if (this.tabList.includes(id)) {
-      this.tabList = this.tabList.filter(currentId => currentId !== id);
-      this.buttonRefs[id] = undefined;
-    }
-  };
-  selectNextTab = (id: string) => {
-    const buttonRef = this.buttonRefs[id];
-    this.props.onSelect(id);
-    buttonRef && buttonRef.current && buttonRef.current.focus && buttonRef.current.focus();
-  };
-  keyHandler = ({
-    keyCode
-  }: SyntheticKeyboardEvent<HTMLUListElement>) => {
-    switch (keyCode) {
-      // left arrow
-      case 37:
-        this.tabList.forEach((id, index) => {
-          if (id === this.getSelectedId()) {
-            const count = this.tabList.length;
-            const nextIndex = index - 1 >= 0 ? index - 1 : count - 1;
-            const nextId = this.tabList[nextIndex];
-            this.selectNextTab(nextId);
-          }
-        });
-        break;
-      // right arrow
-      case 39:
-        this.tabList.forEach((id, index) => {
-          if (id === this.getSelectedId()) {
-            const count = this.tabList.length;
-            const nextIndex = index + 1 < count ? index + 1 : 0;
-            const nextId = this.tabList[nextIndex];
-            this.selectNextTab(nextId);
-          }
-        });
-        break;
-      default:
-        break;
-    }
-  };
-  render() {
-    const {
-      children,
-      qa,
-      ...rest
-    } = this.props;
-    return (
-      // $FlowIssue - upgrade v0.112.0
-      <Container data-qa-tabs="" onKeyUp={this.keyHandler} {...qa} {...rest}>
-        <TabButtonContext.Provider value={{
-          selectedId: this.getSelectedId(),
-          fullWidth: this.props.fullWidth,
-          onActivate: this.onActivate,
-          onTabMount: this.onTabMount,
-          onTabUpdate: this.onTabUpdate,
-          onTabUnmount: this.onTabUnmount
-        }}>
-          {children}
-        </TabButtonContext.Provider>
-      </Container>
-    );
-  }
-}

package/__flow__/Tabs/styles.js

@@ -1,58 +0,0 @@
-//@flow
-import styled, { css, type StyledComponent } from 'styled-components';
-import { COMMON } from "../utils/system-props";
-import Button from "../Button";
-import type { TypeTheme } from "../types/theme.flow";
-const Container: StyledComponent<any, TypeTheme, *> = styled.ul`
-  display: ${props => props.fullWidth ? 'flex' : 'inline-flex'};
-  justify-content: space-between;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  border-bottom: ${props => props.theme.borders[500]}
-    ${props => props.theme.colors.container.border.base};
-
-  ${COMMON}
-`;
-export const TabItem: StyledComponent<any, TypeTheme, *> = styled.li`
-  margin-bottom: -1px;
-  ${props => props.fullWidth && css`
-      flex-grow: 1;
-    `};
-
-  &:not(:last-child) {
-    ${props => !props.fullWidth && css`
-        margin-right: ${props => props.theme.space[350]};
-      `};
-  }
-
-  ${props => props.isSelected && css`
-      box-shadow: ${props => `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.base}`};
-    `};
-
-  &:hover {
-    ${props => props.isSelected && css`
-        box-shadow: ${props => `inset 0 -3px 0 0 ${props.theme.colors.button.primary.background.hover}`};
-      `};
-  }
-`;
-export const TabButton: StyledComponent<{...}, TypeTheme, *> = styled(Button)`
-  padding: ${props => `${props.theme.space[350]} 0`};
-  color: ${props => props.theme.colors.text.headline};
-  width: 100%;
-
-  ${props => props.isSelected && css`
-      color: ${props => props.theme.colors.link.base};
-    `};
-
-  &:hover {
-    ${props => props.isSelected && css`
-        color: ${props => props.theme.colors.link.hover};
-      `};
-  }
-
-  &:active {
-    transform: none;
-  }
-`;
-export default Container;

package/__flow__/Text/index.js

@@ -1,71 +0,0 @@
-//@flow
-import * as React from 'react';
-import styled from 'styled-components';
-import type { TypeTheme } from "../types/theme.flow";
-import Container from "./styles";
-import type { TypeTextProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeTextProps from root instead
- */
-export type TypeProps = TypeTextProps;
-const Headline = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
-  color: ${props => props.theme.colors.text.headline};
-  font-weight: ${props => props.theme.fontWeights.bold};
-  ${props => props.theme.typography[400]}
-`;
-const SubHeadline = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
-  color: ${props => props.theme.colors.text.headline};
-  font-weight: ${props => props.theme.fontWeights.bold};
-  ${props => props.theme.typography[300]}
-`;
-const SmallSubHeadline = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
-  color: ${props => props.theme.colors.text.headline};
-  font-weight: ${props => props.theme.fontWeights.bold};
-  ${props => props.theme.typography[200]}
-`;
-const Byline = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
-  color: ${props => props.theme.colors.text.subtext};
-  ${props => props.theme.typography[200]}
-`;
-const SmallByline = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
-  color: ${props => props.theme.colors.text.subtext};
-  ${props => props.theme.typography[100]}
-`;
-const BodyCopy = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
-  color: ${props => props.theme.colors.text.body};
-  ${props => props.theme.typography[300]}
-`;
-const SmallBodyCopy = styled<typeof Container, TypeTheme, TypeTextProps>(Container)`
-  color: ${props => props.theme.colors.text.body};
-  ${props => props.theme.typography[200]}
-`;
-const Text = ({
-  fontSize,
-  children,
-  qa,
-  ...rest
-}: TypeTextProps): React.Node => {
-  const qaText = typeof children === 'string' ? children : undefined;
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Container typeScale={fontSize} data-qa-text={qaText} {...qa} {...rest}>
-      {children}
-    </Container>
-  );
-};
-Text.Headline = Headline;
-Text.SubHeadline = SubHeadline;
-Text.SmallSubHeadline = SmallSubHeadline;
-Text.Byline = Byline;
-Text.SmallByline = SmallByline;
-Text.BodyCopy = BodyCopy;
-Text.SmallBodyCopy = SmallBodyCopy;
-Text.Headline.displayName = 'Text.Headline';
-Text.SubHeadline.displayName = 'Text.SubHeadline';
-Text.SmallSubHeadline.displayName = 'Text.SmallSubHeadline';
-Text.Byline.displayName = 'Text.Byline';
-Text.SmallByline.displayName = 'Text.SmallByline';
-Text.BodyCopy.displayName = 'Text.BodyCopy';
-Text.SmallBodyCopy.displayName = 'Text.SmallBodyCopy';
-export default Text;

package/__flow__/Text/styles.js

@@ -1,28 +0,0 @@
-//@flow
-import styled, { css, type StyledComponent } from 'styled-components';
-import { COMMON, LAYOUT, TYPOGRAPHY } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-const Container: StyledComponent<any, TypeTheme, *> = styled.span`
-  margin: 0;
-  padding-left: 0;
-  padding-right: 0;
-  font-family: ${props => props.theme.fontFamily};
-  font-style: ${props => props.isItalicized && 'italic'};
-
-  ${props => props.truncated && css`
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    `}
-
-  ${props => props.breakWord && css`
-      word-break: break-word;
-      hyphens: auto;
-    `}
-
-  ${COMMON}
-  ${LAYOUT}
-  ${TYPOGRAPHY}
-`;
-export default Container;