@sproutsocial/racine 7.1.0-beta-maurice.0 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 7.1.0
+
+### Minor Changes
+
+- 0113a82: Update table components to render explicit children
+
+## 7.0.2
+
+### Patch Changes
+
+- 482968e: Pass inputProps to Checkbox
+
 ## 7.0.1
 
 ### Patch Changes

package/README.md

@@ -104,7 +104,7 @@ Test any local package in another project by utilizing [yarn link](https://yarnp
 
 Contributions to Racine are welcomed and encouraged from every member of the team. Whether you're adding a new component or simply fixing a bug, every improvement to the library is future leverage for our peers, our product, and our customers. 
 
-### **🔍 Step 1: Find a way to contribute**
+### 🔍 Step 1: Find a way to contribute
 
 There are a few ways to get involved:
 
@@ -113,7 +113,7 @@ There are a few ways to get involved:
 - [Racine uses a GitHub project board to track our backlog, in-flight changes, and future changes](https://github.com/sproutsocial/racine/projects/2). It's a great way to get a broad look at what's happening in Racine. 
 - Come to the bi-weekly Racine Component Review meeting, where engineers gather to discuss new components and changes to existing ones. 
 
-### **🗺 Step 2: Find your way around**
+### 🗺 Step 2: Find your way around
 
 Racine's file structure is set up like this:
 
@@ -136,11 +136,11 @@ And you can interact with Racine via the command line with these commands:
 - `yarn clean` - Delete all generated files and directories.
 - `yarn release` - This will trigger the release process for creating a new version of the Racine package on npm. **Only Racine administrators can perform the release process.**
 
-### **✅ Step 3: Make your changes**
+### ✅ Step 3: Make your changes
 
 Racine uses a tool called [changesets](https://github.com/atlassian/changesets) to automatically pick new version numbers and update the changelog whenever we publish a new version of the package. 
 
-**Run `yarn change` to generate a changeset that will be used to derive the next version number for Racine from your changes.**
+**If you are submitting a PR to Racine that should result in a version bump to the package, you should run `yarn change` to generate a changeset.**
 
 We use semantic versioning for the Racine package, which allows users to understand the scope of a package's changes based on the version number, which is in the format `major.minor.patch`.
 
@@ -150,41 +150,12 @@ When running this command, you will be asked to select whether your change is a
 - **minor** changes are for new features or improvements, and they bump the middle digit in the version number (`x.0.x`)
 - **major** changes are *breaking changes*, and they bump the first digit (`0.x.x`). These types of changes are rare and should be coordinated in advance with the Design Systems team.
 
-The changeset CLI will also ask you to input a message detailing your changes. The completion of the command will generate a new changeset markdown file. You are more than welcome to edit this file after it has been generated, so don't get hung up on trying to write the perfect text from the command line. Aim to make the text of the changeset file(s) as descriptive and informative as possible, as they will be used to build a changelog file when the new version is released.
+The changeset CLI will also ask you to input a message detailing your changes. Try to be as descriptive and informative as possible with these messages, as they will be used to build a changelog file when a new version is released. You may also use Markdown formatting within changesets. 
 
-**You can add as many changesets to a PR as you would like.** If your PR makes several distinct changes to Racine, you should create a changeset detailing each one individually.
+**You can add as many changesets to a PR as you would like.** If your PR makes several distinct changes to Racine, you should create a changeset detailing each one individually. 
 
-### **β Step 4: Create a beta version *(optional)***
 
-When making changes to Racine it often not possible to be certain that your changes are correct until you've tested them in `web-app-core`, or viewed them within the documentation on seeds.sproutsocial.com. To work with your changes before you release an _official_ new version, you can instead release a _beta_ version.
-
-#### **Releasing a beta**
-
-To release a beta version, commit your current changes and then run `yarn beta:release`. This command will create a new beta version with a semantic bump level based on your changeset(s), and include a differentiating identifier from your git user email name. For example, if [Bill Foehring](bfoehring@sproutsocial.com) was making a minor change to versions `6.55.3`, the command would: 
-1. create version `6.56.0-beta-bfoehring.0`,
-1. add a corresponding tag in git,
-1. and publish the new beta version to the npm registry.
-
-Once a beta release is published you can include it as a dependency from `web-app-core` or `seeds`.
-
-The differentiating identifier is necessary to enable if two or more developers to concurrently create their own beta versions from the current version of Racine. Without the identifiers, the name of the beta versions could collide.
-
-#### **Checking beta status**
-
-Run `yarn beta:status` to see the info Racine has about your current beta version.
-
-As you continue to make changes, rerunning `yarn beta:release` will release a new version of your beta. From the example above, it would create `6.56.0-beta-bfoehring.1` as the next beta release. Running it again would create `6.56.0-beta-bfoehring.2` and so on...
-
-#### **Deprecating a beta**
-
-When you are satisfied that all of your changes are correct, you can end your beta by running `yarn beta:deprecate`. This will:
-- delete any beta metadata,
-- restore the original version within `package.json`,
-- deprecate any beta releases on the registry for this version.
-
-Doing so will prime the changeset mechanism to complete the standard release process. (Note: The version of the final release is set at the last moment to ensure it actually is properly set the next valid semantic version as other versions of Racine may have been released during the time you are working on yours.)
-
-### **🗣 Step 5: Create a pull request**
+### 🗣 Step 4: Create a pull request
 
 Once you're ready to submit your changes for review, open a PR to this repository. A few things will happen:
 
@@ -194,12 +165,12 @@ Once you're ready to submit your changes for review, open a PR to this repositor
 
 Once your tests are passing and you have at least one approving review, feel free to merge your changes into Racine!
 
-### **☁️ Step 6: Publish your changes to npm**
+### ☁️ Step 5: Publish your changes to npm
 
 As PRs get merged into Racine, changsets will keep a running PR open called `Version Packages`. This PR will detail all of the changes that have been made to the package since the last publish. **Anyone can release a new version of Racine by merging this PR.**
 
 When the PR is merged, [GitHub will kick off a publish of the new version](https://github.com/sproutsocial/racine/actions?query=workflow%3ARelease). There will be a notification in #eng-design-systems in Slack when the new version is available. 
 
-### **✍ Step 7: Document your changes**
+### ✍ Step 6: Document your changes
 
 Racine components are documented in [Seeds](https://sproutsocial.com/seeds/components), Sprout's design system. You can open a PR to the [Seeds repository](https://github.com/sproutsocial/seeds) to add or edit component documentation. Reach out to the Design Systems team for help getting started. 

package/__flow__/Box/styles.js

@@ -32,15 +32,15 @@ export type TypeContainerProps = $ReadOnly<{|
 
 type TypeBoxContainer = StyledComponent<TypeContainerProps, TypeTheme, *>;
 const Container: TypeBoxContainer = styled.div`
-    box-sizing: border-box;
-    font-family: ${({ theme }) => theme.fontFamily};
+  box-sizing: border-box;
+  font-family: ${({ theme }) => theme.fontFamily};
 
-    ${COMMON}
-    ${BORDER}
+  ${COMMON}
+  ${BORDER}
     ${LAYOUT}
     ${POSITION}
     ${FLEXBOX}
     ${GRID}
-  `;
+`;
 
 export default Container;

package/__flow__/ChartLegend/styles.js

@@ -25,13 +25,13 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   ${(props) =>
     props.inline &&
     css`
-    display: flex;
-    justify-content: center;
+      display: flex;
+      justify-content: center;
 
-    ${Label} + ${Label} {
-      margin-left: ${(props) => props.theme.space[450]};
-    }
-  `}
+      ${Label} + ${Label} {
+        margin-left: ${(props) => props.theme.space[450]};
+      }
+    `}
 
   ${COMMON}
   ${LAYOUT}

package/__flow__/Checkbox/index.js

@@ -25,6 +25,7 @@ export type TypeProps = {
   appearance?: "pill" | "default",
   qa?: Object,
   tabIndex?: string | number,
+  inputProps?: Object,
   ...
 };
 
@@ -66,6 +67,7 @@ export default class Checkbox extends React.Component<TypeProps> {
       appearance = "default",
       qa = {},
       tabIndex,
+      inputProps = {},
       ...rest
     } = this.props;
     const isPill = appearance === "pill";
@@ -98,6 +100,7 @@ export default class Checkbox extends React.Component<TypeProps> {
             data-qa-checkbox-isdisabled={disabled === true}
             tabIndex={tabIndex}
             {...qa}
+            {...inputProps}
           />
           {label && <LabelText disabled={disabled}>{label}</LabelText>}
         </CheckboxContainer>
@@ -125,6 +128,7 @@ export default class Checkbox extends React.Component<TypeProps> {
             data-qa-checkbox-isdisabled={disabled === true}
             tabIndex={tabIndex}
             {...qa}
+            {...inputProps}
           />
           <CheckboxBox>
             <CheckIcon
@@ -134,7 +138,6 @@ export default class Checkbox extends React.Component<TypeProps> {
             />
           </CheckboxBox>
         </InputWrapper>
-        {label && !isPill && <LabelText disabled={disabled}>{label}</LabelText>}
       </Container>
     );
   }

package/__flow__/Checkbox/index.stories.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { boolean } from "@storybook/addon-knobs";
+import { action } from "@storybook/addon-actions";
 
 import Checkbox from "./";
 
@@ -97,3 +98,18 @@ export const LabelledDisabled = () => (
 LabelledDisabled.story = {
   name: "Labelled/Disabled",
 };
+
+export const InputPropsOnMouseOver = () => (
+  <Checkbox
+    checked={boolean("checked", true)}
+    label="Check Me"
+    inputProps={{
+      onMouseOver: action("checkbox-mouseOver"),
+      onClick: action("checkbox-click"),
+    }}
+  />
+);
+
+InputPropsOnMouseOver.story = {
+  name: "InputProps/OnMouseOver",
+};

package/__flow__/Checkbox/index.test.js

@@ -47,4 +47,37 @@ describe("Checkbox", () => {
     );
     expect(getByDataQaLabel({ "checkbox-isdisabled": true })).toBeTruthy();
   });
+
+  it("should display label when label not undefined and appearance is default", () => {
+    const { getByLabelText } = render(
+      <Checkbox checked label="Checkbox Label" id="checkboxid" />
+    );
+    expect(getByLabelText("Checkbox Label")).toBeInTheDocument();
+  });
+
+  it("should not display label when label not undefined and appearance is pill", () => {
+    const { queryByLabelText } = render(
+      <Checkbox
+        checked
+        label="Checkbox Label"
+        id="checkboxid"
+        appearance="pill"
+      />
+    );
+    expect(queryByLabelText("Checkbox Label")).not.toBeInTheDocument();
+  });
+
+  it("should support events through inputProps", () => {
+    const mockHandleMouseOver = jest.fn();
+    const options = render(
+      <Checkbox
+        checked
+        inputProps={{ onMouseOver: mockHandleMouseOver }}
+        id="checkboxid"
+        label="checkbox"
+      />
+    );
+    fireEvent.mouseOver(options.getByLabelText("checkbox"));
+    expect(mockHandleMouseOver).toHaveBeenCalled();
+  });
 });

package/__flow__/Table/index.js

@@ -17,9 +17,9 @@ export type TypeTableRow = {|
 
 type TypeProps = {
   /** Array of TableHeaderCells to render */
-  head: TypeTableHeaderCell[],
+  head?: TypeTableHeaderCell[],
   /** Array of TableRows to render */
-  rows: TypeTableRow[],
+  rows?: TypeTableRow[],
   /** Callback for Sorting Table Columns (optional) */
   onSort?: (id: string) => void,
   /** Controls which column is being sorted (optional) */
@@ -28,64 +28,92 @@ type TypeProps = {
   sortDirection?: TypeEnumSortDirections,
   /** Custom row render for flexibilty */
   rowRender?: (row: TypeTableRow) => React.Node,
+  /**
+   * Including children will overwrite all head, rows, rowRender, and sorting props
+   * Should be used for manually rendering tables and ignoring data props
+   */
+  children?: React.Node,
+};
+
+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 default class Table extends React.Component<TypeProps> {
-  static defaultProps = {
-    head: [],
-    rows: [],
-  };
-
-  renderTableRow = (row: TypeTableRow) => {
+export const Table = ({
+  head = [],
+  rows = [],
+  onSort,
+  sortId,
+  sortDirection,
+  rowRender,
+  children,
+  ...rest
+}: TypeProps) => {
+  if (children) {
     return (
-      <tbody key={row.id} data-qa-table-row={""}>
-        <tr>
-          {row.cells.map((td) => {
-            return <TableCell key={td.id} {...td} />;
-          })}
-        </tr>
-      </tbody>
-    );
-  };
-
-  render() {
-    const {
-      head,
-      rows,
-      onSort,
-      sortId,
-      sortDirection,
-      rowRender,
-      ...rest
-    } = this.props;
-
-    return (
-      // $FlowIssue - upgrade v0.112.0
-      <Container data-qa-table={""} {...rest}>
-        {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) : this.renderTableRow(row);
-        })}
+      <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;
+
+export default Table;

package/__flow__/Table/index.stories.js

@@ -248,3 +248,44 @@ export const customRowRendering = () => (
 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>{c} </Table.HeaderCell>
+          ))}
+        </Table.TableRow>
+      </Table.TableHead>
+      <Table.TableBody>
+        {rows.map((r) => (
+          <Table.TableRow>
+            <Table.Cell>{r.name} </Table.Cell>
+            <Table.Cell>{r.squad} </Table.Cell>
+            <Table.Cell>{r.favoriteColor} </Table.Cell>
+          </Table.TableRow>
+        ))}
+      </Table.TableBody>
+    </Table>
+  );
+};
+
+staticTable.story = {
+  name: "Static Table",
+};

package/__flow__/Table/index.test.js

@@ -73,4 +73,18 @@ describe("The Table Component", () => {
     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.js

@@ -2,36 +2,46 @@
 import * as React from "react";
 import Container from "./styles";
 
-export type TypeTableCell = {|
+export type TypeTableCell = {
   /** Table Cell Id */
   id: string,
-  /** Content to be render */
-  content: React.Node,
+  /** Content is deprecated.  Please use children instead. Content to be render */
+  content?: React.Node,
   /** Controls the colSpan attribute (optional) */
   colSpan?: number,
   /** Controls the width attribute (optional) */
   width?: number,
   /** Controls the CSS text-align property (optional) */
   align?: "left" | "right" | "center" | "justify",
-|};
+  /** Children to be rendered */
+  children?: React.Node,
+};
 
 /**
  * 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, ...rest } = this.props;
+    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={""}
-        {...rest}
       >
-        {content}
+        {children || content}
       </Container>
     );
   }

package/__flow__/TableCell/index.test.js

@@ -4,9 +4,16 @@ import TableCell from "./";
 
 describe("TableCell", () => {
   it("should render properly", () => {
-    const { getByDataQaLabel } = render(
+    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>Child</TableCell>);
+
+    expect(getByText("Child")).toBeInTheDocument();
   });
 });

package/__flow__/TableHeaderCell/index.js

@@ -13,22 +13,24 @@ export const SORT_DIRECTIONS = {
 
 export type TypeEnumSortDirections = $Keys<typeof SORT_DIRECTIONS>;
 
-export type TypeTableHeaderCell = {|
+export type TypeTableHeaderCell = {
   ...TypeTableCell,
-  /** Deteremines if a table column is sortable (optional) */
+  /** Legacy Deteremines if a table column is sortable (optional) */
   isSortable?: boolean,
   /** Truncates text into a singular line with ellipsis (optional) */
   shouldTruncate?: boolean,
-|};
+};
 
 type TypeProps = {
   ...TypeTableHeaderCell,
-  /** Callback for Sorting Table Columns (optional) */
+  /** Legacy: Callback for Sorting Table Columns (optional) */
   onSort?: (id: string) => void,
-  /** Controls which column is being sorted (optional) */
+  /** Legacy: Controls which column is being sorted (optional) */
   sortId?: string,
-  /** Controls the current sort direction (optional) */
+  /** Legacy: Controls the current sort direction (optional) */
   sortDirection?: TypeEnumSortDirections,
+  /** Callback for Click Events. If Included will override onSort prop */
+  onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
 };
 
 /**
@@ -37,6 +39,7 @@ type TypeProps = {
 export default class TableHeaderCell extends React.Component<TypeProps> {
   getSortIcon = (isSorted: boolean) => {
     const { sortDirection } = this.props;
+
     let iconName = "chevron-up-down-filled";
 
     if (isSorted && sortDirection === SORT_DIRECTIONS.ASC) {
@@ -52,6 +55,17 @@ export default class TableHeaderCell extends React.Component<TypeProps> {
     );
   };
 
+  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,
@@ -64,25 +78,26 @@ export default class TableHeaderCell extends React.Component<TypeProps> {
       onSort,
       sortId,
       sortDirection,
+      children,
+      onClick,
       ...rest
     } = this.props;
 
     return (
       <Container
+        {...rest}
         key={id}
         alignment={align || "left"}
         sortable={isSortable}
         colSpan={colSpan}
         width={width}
-        onClick={isSortable && onSort ? () => onSort(id) : undefined}
+        onClick={this.handleClick}
         data-tableheadercell-sortable={isSortable}
         data-qa-table-header-cell={""}
         data-qa-table-header-cell-sortdirection={sortDirection}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
       >
-        {content}
-        {isSortable && this.getSortIcon(id === sortId)}
+        {children || content}
+        {isSortable && !children && this.getSortIcon(id === sortId)}
       </Container>
     );
   }

package/__flow__/TableHeaderCell/index.test.js

@@ -4,7 +4,22 @@ import TableHeaderCell from "./";
 
 describe("TableHeaderCell", () => {
   it("should render properly", () => {
-    const { getByDataQaLabel } = render(<TableHeaderCell />);
+    const { getByDataQaLabel, getByText } = render(
+      <table>
+        <TableHeaderCell 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 content="content">Child</TableHeaderCell>
+      </table>
+    );
+
+    expect(getByText("Child")).toBeInTheDocument();
   });
 });

package/__flow__/TableRowAccordion/index.js

@@ -35,7 +35,7 @@ export default class TableRowAccordion extends React.Component<TypeProps> {
       <Container {...rest} data-qa-table-row-accordion={isExpanded} key={id}>
         <tr data-tablerowaccordion-summary onClick={this.handleToggle}>
           {cells.map((td) => {
-            return <TableCell key={td.id} {...td} />;
+            return <TableCell {...td} key={td.id} />;
           })}
           <TableCell
             id="tableRowAccordion_trigger"