Merge pull request #211 from dcos-labs/weblancaster/feat/DCOS-40043-t…

…oggle-component

DCOS-40043: toggle component

packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`BadgeButton accept jsx as children 1`] = `
 <span
- className="css-1ydbtd2"
+ className="css-1mfjuh7"
  onClick={[Function]}
  onKeyPress={[Function]}
  role="button"
@@ -16,7 +16,7 @@ exports[`BadgeButton accept jsx as children 1`] = `
 
 exports[`BadgeButton danger 1`] = `
 <span
- className="css-16xjcxo"
+ className="css-5yz412"
  onClick={[Function]}
  onKeyPress={[Function]}
  role="button"
@@ -28,7 +28,7 @@ exports[`BadgeButton danger 1`] = `
 
 exports[`BadgeButton default 1`] = `
 <span
- className="css-1ydbtd2"
+ className="css-1mfjuh7"
  onClick={[Function]}
  onKeyPress={[Function]}
  role="button"
@@ -40,7 +40,7 @@ exports[`BadgeButton default 1`] = `
 
 exports[`BadgeButton outline 1`] = `
 <span
- className="css-w3zj9q"
+ className="css-1nvs8l1"
  onClick={[Function]}
  onKeyPress={[Function]}
  role="button"
@@ -52,7 +52,7 @@ exports[`BadgeButton outline 1`] = `
 
 exports[`BadgeButton primary 1`] = `
 <span
- className="css-n0m8w5"
+ className="css-1e4v5oe"
  onClick={[Function]}
  onKeyPress={[Function]}
  role="button"
@@ -64,7 +64,7 @@ exports[`BadgeButton primary 1`] = `
 
 exports[`BadgeButton success 1`] = `
 <span
- className="css-qzf5te"
+ className="css-stidvd"
  onClick={[Function]}
  onKeyPress={[Function]}
  role="button"
@@ -76,7 +76,7 @@ exports[`BadgeButton success 1`] = `
 
 exports[`BadgeButton warning 1`] = `
 <span
- className="css-dus73p"
+ className="css-ddfcfh"
  onClick={[Function]}
  onKeyPress={[Function]}
  role="button"

packages/clickable/components/clickable.tsx

@@ -17,7 +17,7 @@ export interface IClickableProps {
  tabIndex?: number | string;
 }
 
-class Clickable extends React.PureComponent<IClickableProps, {}> {
+export class Clickable extends React.PureComponent<IClickableProps, {}> {
  public static defaultProps: Partial<IClickableProps> = {
  tabIndex: -1
  };

packages/clickable/index.ts

@@ -1 +1 @@
-export { default as Clickable } from "./clickable";
+export { default as Clickable } from "./components/clickable";

packages/clickable/style.ts

@@ -1,10 +1,7 @@
 import { css } from "emotion";
-import { coreColors } from "../shared/styles/color";
 
-const { white } = coreColors();
 export const outline = css`
  &:focus {
- box-shadow: 0 0 0 1px ${white}, 0 0 0 3px currentColor;
  outline: 0;
  }
 `;

packages/index.ts

@@ -1,5 +1,6 @@
 import { injectGlobalCss } from "./shared/styles/global";
 export { Badge, BadgeButton } from "./badge";
 export { Column, Table, Cell, TextCell, HeaderCell, NumberCell } from "./table";
+export { ToggleContent } from "./toggleContent";
 
 injectGlobalCss();

packages/toggleContent/README.md

@@ -0,0 +1,3 @@
+# Toggle
+
+Toggle component is used when there is a need to switch between two contents when there is a click from the user.

packages/toggleContent/components/toggleContent.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import Clickable from "../../clickable/components/clickable";
+import { style } from "../style";
+
+export interface IToggleContentState {
+ isOn: boolean;
+}
+
+export interface IToggleContentProps {
+ contentOn: JSX.Element | string;
+ contentOff: JSX.Element | string;
+ tabIndex?: string | number;
+}
+
+export class ToggleContent extends React.PureComponent<
+ IToggleContentProps,
+ IToggleContentState
+> {
+ static defaultProps = {
+ tabIndex: -1
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.handleClick = this.handleClick.bind(this);
+ this.state = {
+ isOn: true
+ };
+ }
+
+ public handleClick(): void {
+ this.setState({
+ isOn: !this.state.isOn
+ });
+ }
+
+ public render() {
+ const { tabIndex, contentOn, contentOff } = this.props;
+ let content = contentOn;
+
+ if (!this.state.isOn) {
+ content = contentOff;
+ }
+
+ return (
+ <Clickable tabIndex={tabIndex} action={this.handleClick}>
+ <div className={style}>{content}</div>
+ </Clickable>
+ );
+ }
+}
+
+export default ToggleContent;

packages/toggleContent/index.ts

@@ -0,0 +1 @@
+export { default as ToggleContent } from "./components/toggleContent";

packages/toggleContent/stories/toggleContent.stories.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { withReadme } from "storybook-readme";
+import { ToggleContent } from "../../index";
+
+const readme = require("../README.md");
+
+const primary = () => <div>primary component</div>;
+const secondary = () => <div>secondary component</div>;
+
+storiesOf("Toggle", module)
+ .addDecorator(withReadme([readme]))
+ .addWithInfo("string", () => (
+ <ToggleContent contentOn="Hello" contentOff="Bye" />
+ ))
+ .addWithInfo("component", () => (
+ <ToggleContent contentOn={primary()} contentOff={secondary()} />
+ ));

packages/toggleContent/style.ts

@@ -0,0 +1,5 @@
+import { css } from "emotion";
+
+export const style = css`
+ cursor: pointer;
+`;

packages/toggleContent/tests/__snapshots__/toggleContent.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToggleContent renders a div wrapping the content passed as props 1`] = `
+.emotion-0 {
+ cursor: pointer;
+}
+
+.emotion-0:focus {
+ outline: 0;
+}
+
+<div
+ class="emotion-0"
+ role="button"
+ tabindex="0"
+>
+ Hello
+</div>
+`;

packages/toggleContent/tests/toggleContent.test.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import * as emotion from "emotion";
+import { createSerializer } from "jest-emotion";
+import { mount, render } from "enzyme";
+import toJson from "enzyme-to-json";
+
+import { ToggleContent } from "../";
+
+expect.addSnapshotSerializer(createSerializer(emotion));
+
+const primary = () => <div>primary</div>;
+const secondary = () => <div>secondary</div>;
+
+describe("ToggleContent", () => {
+ it("renders a div wrapping the content passed as props", () => {
+ expect(
+ toJson(
+ render(
+ <ToggleContent tabIndex="0" contentOn="Hello" contentOff="Bye" />
+ )
+ )
+ ).toMatchSnapshot();
+ });
+
+ it("string content", () => {
+ const wrapper = mount(<ToggleContent contentOn="Hello" contentOff="Bye" />);
+
+ expect(
+ wrapper
+ .last()
+ .children()
+ .last()
+ .text()
+ ).toEqual("Hello");
+
+ wrapper.simulate("click");
+
+ expect(
+ wrapper
+ .last()
+ .children()
+ .last()
+ .text()
+ ).toEqual("Bye");
+ });
+
+ it("component content", () => {
+ const wrapper = mount(
+ <ToggleContent contentOn={primary()} contentOff={secondary()} />
+ );
+
+ expect(
+ wrapper
+ .last()
+ .children()
+ .last()
+ .text()
+ ).toEqual("primary");
+
+ wrapper.simulate("click");
+
+ expect(
+ wrapper
+ .last()
+ .children()
+ .last()
+ .text()
+ ).toEqual("secondary");
+ });
+});