Merge pull request #362 from dcos-labs/mp/feat/DCOS-43353-styleutils-…

…lists

DCOS-43353: add vertical list components

packages/index.ts

@@ -45,6 +45,7 @@ export { Dropdownable } from "./dropdownable";
 export { Icon } from "./icon";
 export { InfoBoxInline, InfoBoxBanner } from "./infobox";
 export { InputAppearance } from "./shared/types/inputAppearance";
+export { List, BorderedList } from "./list";
 export {
   DialogModal,
   SmallDialogModal,

packages/list/README.md

@@ -0,0 +1,7 @@
+# Lists
+
+## List
+Renders a plain vertical list of items
+
+## BorderedList
+Renders a list of items with a border and gutter between each item

packages/list/components/BorderedList.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { borderedListStyle } from "../style";
+import { cx } from "emotion";
+import { SharedListProps } from "./List";
+import { listReset } from "../../shared/styles/styleUtils";
+
+const BorderedList: React.SFC<SharedListProps> = props => {
+  const { tag, children } = props;
+  const BorderedListEl = tag;
+
+  return (
+    <BorderedListEl className={cx(listReset, borderedListStyle)}>
+      {children}
+    </BorderedListEl>
+  );
+};
+
+BorderedList.defaultProps = {
+  tag: "ul"
+};
+
+export default BorderedList;

packages/list/components/List.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cx } from "emotion";
+import { listReset } from "../../shared/styles/styleUtils";
+import { listMarker } from "../style";
+
+export interface SharedListProps {
+  children:
+    | Array<React.ReactElement<HTMLLIElement>>
+    | React.ReactElement<HTMLLIElement>;
+  tag: "ul" | "ol";
+}
+
+interface ListProps extends SharedListProps {
+  /**
+   * The style of the text bullets. See https://www.w3.org/TR/CSS21/generate.html#list-style for more info
+   */
+  markerStyle?:
+    | "disc"
+    | "circle"
+    | "decimal"
+    | "decimal-leading-zero"
+    | "lower-roman"
+    | "upper-roman"
+    | "lower-latin"
+    | "upper-latin"
+    | "none";
+}
+
+const List = (props: ListProps) => {
+  const { children, markerStyle, tag } = props;
+  const ListEl = tag;
+
+  return (
+    <ListEl className={cx(listReset, listMarker(markerStyle))}>
+      {children}
+    </ListEl>
+  );
+};
+
+List.defaultProps = {
+  markerStyle: "none",
+  tag: "ul"
+};
+
+export default List;

packages/list/index.ts

@@ -0,0 +1,2 @@
+export { default as List } from "./components/List";
+export { default as BorderedList } from "./components/BorderedList";

packages/list/stories/borderedList.stories.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { withReadme } from "storybook-readme";
+import { BorderedList } from "../index";
+
+const readme = require("../README.md");
+
+storiesOf("Vertical lists/BorderedList", module)
+  .addDecorator(withReadme([readme]))
+  .add("default", () => (
+    <BorderedList>
+      <li>List item</li>
+      <li>List item</li>
+      <li>List item</li>
+    </BorderedList>
+  ));

packages/list/stories/list.stories.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { withKnobs, select } from "@storybook/addon-knobs";
+import { withReadme } from "storybook-readme";
+import { List } from "../index";
+
+const readme = require("../README.md");
+
+storiesOf("Vertical lists/List", module)
+  .addDecorator(withReadme([readme]))
+  .addDecorator(withKnobs)
+  .add("default", () => (
+    <List>
+      <li>List item</li>
+      <li>List item</li>
+      <li>List item</li>
+    </List>
+  ))
+  .add("markerStyle", () => {
+    const markerStyles = {
+      disc: "disc",
+      circle: "circle",
+      upperRoman: "upper-roman",
+      lowerRoman: "lower-roman",
+      upperLatin: "upper-latin",
+      lowerLatin: "lower-latin"
+    };
+    const markerStyle = select("align", markerStyles, "disc");
+
+    return (
+      <List markerStyle={markerStyle}>
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+      </List>
+    );
+  })
+  .add("nested with item markers", () => (
+    <List markerStyle="disc">
+      <li>List item</li>
+      <li>List item</li>
+      <li>
+        Nested List
+        <List markerStyle="circle">
+          <li>List item</li>
+          <li>List item</li>
+          <li>List item</li>
+        </List>
+      </li>
+      <li>List item</li>
+      <li>List item</li>
+    </List>
+  ));

packages/list/style.ts

@@ -0,0 +1,34 @@
+import { css } from "emotion";
+import { padding, border } from "../shared/styles/styleUtils";
+const standardListItemPaddingSize = "xs";
+
+export const listMarker = listStyleType => css`
+  list-style-type: ${listStyleType};
+  ${listStyleType !== "none" ? padding("left") : null};
+`;
+
+export const listItem = css`
+  :not(:last-child) {
+    ${padding("bottom", standardListItemPaddingSize)};
+  }
+
+  > ul,
+  > ol {
+    ${padding("top", standardListItemPaddingSize)};
+  }
+`;
+
+export const borderedListStyle = css`
+  > li:not(:last-child) {
+    ${padding("bottom")};
+  }
+
+  > li {
+    &:not(:last-child) {
+      ${border("bottom")};
+    }
+    &:not(:first-child) {
+      ${padding("top")};
+    }
+  }
+`;

packages/list/tests/BorderedList.test.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { shallow } from "enzyme";
+import * as emotion from "emotion";
+import { createSerializer } from "jest-emotion";
+import toJson from "enzyme-to-json";
+
+import { BorderedList } from "../";
+
+expect.addSnapshotSerializer(createSerializer(emotion));
+
+describe("BorderedList", () => {
+  it("renders default", () => {
+    const component = shallow(
+      <BorderedList tag="ul">
+        <li>list item</li>
+        <li>list item</li>
+      </BorderedList>
+    );
+    expect(toJson(component)).toMatchSnapshot();
+  });
+});

packages/list/tests/List.test.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { shallow } from "enzyme";
+import * as emotion from "emotion";
+import { createSerializer } from "jest-emotion";
+import toJson from "enzyme-to-json";
+
+import { List } from "../";
+
+expect.addSnapshotSerializer(createSerializer(emotion));
+
+describe("List", () => {
+  it("renders default", () => {
+    const component = shallow(
+      <List tag="ul">
+        <li>list item</li>
+        <li>list item</li>
+      </List>
+    );
+    expect(toJson(component)).toMatchSnapshot();
+  });
+  it("renders with all props", () => {
+    const component = shallow(
+      <List markerStyle="disc" tag="ol">
+        <li>list item</li>
+        <li>list item</li>
+      </List>
+    );
+    expect(toJson(component)).toMatchSnapshot();
+  });
+});

packages/list/tests/__snapshots__/BorderedList.test.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BorderedList renders default 1`] = `
+.emotion-0 {
+  list-style: none;
+  margin-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.emotion-0 > li:not(:last-child) {
+  padding-bottom: 16px;
+}
+
+.emotion-0 > li:not(:last-child) {
+  border-width: 1px;
+  border-color: var(--themeBorder,#DADDE2);
+  border-bottom-style: solid;
+}
+
+.emotion-0 > li:not(:first-child) {
+  padding-top: 16px;
+}
+
+<ul
+  className="emotion-0"
+>
+  <li>
+    list item
+  </li>
+  <li>
+    list item
+  </li>
+</ul>
+`;

packages/list/tests/__snapshots__/List.test.tsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List renders default 1`] = `
+.emotion-0 {
+  list-style: none;
+  margin-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style-type: none;
+}
+
+<ul
+  className="emotion-0"
+>
+  <li>
+    list item
+  </li>
+  <li>
+    list item
+  </li>
+</ul>
+`;
+
+exports[`List renders with all props 1`] = `
+.emotion-0 {
+  list-style: none;
+  margin-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style-type: disc;
+  padding-left: 16px;
+}
+
+<ol
+  className="emotion-0"
+>
+  <li>
+    list item
+  </li>
+  <li>
+    list item
+  </li>
+</ol>
+`;