@sproutsocial/racine 11.4.2-input-beta.0 → 11.6.1-theme-type.0

package/__flow__/Button/__snapshots__/index.test.js.snap

@@ -1,511 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Racine Button should render in active state 1`] = `
-.c0 {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  border: 1px solid #364141;
-  border-radius: 6px;
-  border-style: solid;
-  background: transparent;
-  color: #364141;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: 16px;
-  white-space: nowrap;
-  font-weight: 700;
-  -webkit-transition: all .15s linear;
-  transition: all .15s linear;
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-  color: #FFFFFF !important;
-  background: #273333 !important;
-}
-
-.c0:visited {
-  color: #364141;
-}
-
-.c0:hover {
-  color: #FFFFFF;
-  background: #364141;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  box-shadow: none;
-}
-
-.c0:active {
-  color: #FFFFFF;
-  background: #273333;
-  -webkit-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px);
-}
-
-.c0:focus {
-  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-  outline: none;
-}
-
-.c0:focus::-moz-focus-inner {
-  border: 0;
-}
-
-.c0:focus:active {
-  box-shadow: none;
-}
-
-.c0 .styles__Container-x0vwa5-0 {
-  vertical-align: text-bottom;
-}
-
-<div>
-  <button
-    class="c0"
-    data-qa-button=""
-    data-qa-button-isdisabled="false"
-    type="button"
-  >
-    Button
-  </button>
-</div>
-`;
-
-exports[`Racine Button should render in an anchor tag with external target 1`] = `
-.c0 {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  border-style: solid;
-  background: transparent;
-  color: #515e5f;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: 16px;
-  white-space: nowrap;
-  font-weight: 700;
-  -webkit-transition: all .15s linear;
-  transition: all .15s linear;
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-}
-
-.c0:visited {
-  color: #515e5f;
-}
-
-.c0:hover {
-  color: #273333;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  box-shadow: none;
-}
-
-.c0:active {
-  color: #273333;
-  -webkit-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px);
-}
-
-.c0:focus {
-  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-  outline: none;
-}
-
-.c0:focus::-moz-focus-inner {
-  border: 0;
-}
-
-.c0:focus:active {
-  box-shadow: none;
-}
-
-.c0 .styles__Container-x0vwa5-0 {
-  vertical-align: text-bottom;
-}
-
-<div>
-  <a
-    class="c0"
-    data-qa-button=""
-    data-qa-button-isdisabled="false"
-    href="http://sproutsocial.style"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    Button
-  </a>
-</div>
-`;
-
-exports[`Racine Button should render in default style 1`] = `
-.c0 {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  border-style: solid;
-  background: transparent;
-  color: #515e5f;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: 16px;
-  white-space: nowrap;
-  font-weight: 700;
-  -webkit-transition: all .15s linear;
-  transition: all .15s linear;
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-}
-
-.c0:visited {
-  color: #515e5f;
-}
-
-.c0:hover {
-  color: #273333;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  box-shadow: none;
-}
-
-.c0:active {
-  color: #273333;
-  -webkit-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px);
-}
-
-.c0:focus {
-  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-  outline: none;
-}
-
-.c0:focus::-moz-focus-inner {
-  border: 0;
-}
-
-.c0:focus:active {
-  box-shadow: none;
-}
-
-.c0 .styles__Container-x0vwa5-0 {
-  vertical-align: text-bottom;
-}
-
-<div>
-  <button
-    class="c0"
-    data-qa-button=""
-    data-qa-button-isdisabled="false"
-    type="button"
-  >
-    Button
-  </button>
-</div>
-`;
-
-exports[`Racine Button should render in large size 1`] = `
-.c0 {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  border: 1px solid #364141;
-  border-radius: 6px;
-  border-style: solid;
-  background: transparent;
-  color: #364141;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: 16px;
-  white-space: nowrap;
-  font-weight: 700;
-  -webkit-transition: all .15s linear;
-  transition: all .15s linear;
-  margin: 0;
-  padding: 12px;
-  font-size: 16px;
-}
-
-.c0:visited {
-  color: #364141;
-}
-
-.c0:hover {
-  color: #FFFFFF;
-  background: #364141;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  box-shadow: none;
-}
-
-.c0:active {
-  color: #FFFFFF;
-  background: #273333;
-  -webkit-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px);
-}
-
-.c0:focus {
-  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-  outline: none;
-}
-
-.c0:focus::-moz-focus-inner {
-  border: 0;
-}
-
-.c0:focus:active {
-  box-shadow: none;
-}
-
-.c0 .styles__Container-x0vwa5-0 {
-  vertical-align: text-bottom;
-}
-
-<div>
-  <button
-    class="c0"
-    data-qa-button=""
-    data-qa-button-isdisabled="false"
-    type="button"
-  >
-    Button
-  </button>
-</div>
-`;
-
-exports[`Racine Button should render in pill style 1`] = `
-.c0 {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  border-style: solid;
-  background: transparent;
-  color: #515e5f;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: 16px;
-  white-space: nowrap;
-  font-weight: 700;
-  -webkit-transition: all .15s linear;
-  transition: all .15s linear;
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-}
-
-.c0:visited {
-  color: #515e5f;
-}
-
-.c0:hover {
-  color: #273333;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  box-shadow: none;
-}
-
-.c0:active {
-  color: #273333;
-  -webkit-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px);
-}
-
-.c0:focus {
-  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-  outline: none;
-}
-
-.c0:focus::-moz-focus-inner {
-  border: 0;
-}
-
-.c0:focus:active {
-  box-shadow: none;
-}
-
-.c0 .styles__Container-x0vwa5-0 {
-  vertical-align: text-bottom;
-}
-
-<div>
-  <button
-    class="c0"
-    data-qa-button=""
-    data-qa-button-isdisabled="false"
-    shape="pill"
-    type="button"
-  >
-    Button
-  </button>
-</div>
-`;
-
-exports[`Racine Button should render in primary style 1`] = `
-.c0 {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  border-style: solid;
-  background: #2079c3;
-  color: #FFFFFF;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: 16px;
-  white-space: nowrap;
-  font-weight: 700;
-  -webkit-transition: all .15s linear;
-  transition: all .15s linear;
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-}
-
-.c0:visited {
-  color: #FFFFFF;
-}
-
-.c0:hover {
-  color: #FFFFFF;
-  background: #116daa;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  box-shadow: none;
-}
-
-.c0:active {
-  color: #FFFFFF;
-  background: #0c5689;
-  -webkit-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px);
-}
-
-.c0:focus {
-  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-  outline: none;
-}
-
-.c0:focus::-moz-focus-inner {
-  border: 0;
-}
-
-.c0:focus:active {
-  box-shadow: none;
-}
-
-.c0 .styles__Container-x0vwa5-0 {
-  vertical-align: text-bottom;
-}
-
-<div>
-  <button
-    class="c0"
-    data-qa-button=""
-    data-qa-button-isdisabled="false"
-    type="button"
-  >
-    Button
-  </button>
-</div>
-`;
-
-exports[`Racine Button should render in secondary style 1`] = `
-.c0 {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-  border: 1px solid #364141;
-  border-radius: 6px;
-  border-style: solid;
-  background: transparent;
-  color: #364141;
-  cursor: pointer;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  line-height: 16px;
-  white-space: nowrap;
-  font-weight: 700;
-  -webkit-transition: all .15s linear;
-  transition: all .15s linear;
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-}
-
-.c0:visited {
-  color: #364141;
-}
-
-.c0:hover {
-  color: #FFFFFF;
-  background: #364141;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  box-shadow: none;
-}
-
-.c0:active {
-  color: #FFFFFF;
-  background: #273333;
-  -webkit-transform: translateY(1px);
-  -ms-transform: translateY(1px);
-  transform: translateY(1px);
-}
-
-.c0:focus {
-  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
-  outline: none;
-}
-
-.c0:focus::-moz-focus-inner {
-  border: 0;
-}
-
-.c0:focus:active {
-  box-shadow: none;
-}
-
-.c0 .styles__Container-x0vwa5-0 {
-  vertical-align: text-bottom;
-}
-
-<div>
-  <button
-    class="c0"
-    data-qa-button=""
-    data-qa-button-isdisabled="false"
-    type="button"
-  >
-    Button
-  </button>
-</div>
-`;

package/__flow__/Button/index.test.js

@@ -1,113 +0,0 @@
-import React from "react";
-import { fireEvent, render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import Button from "./";
-
-describe("Racine Button", () => {
-  it("should render in default style", () => {
-    const { container } = render(<Button>Button</Button>);
-    expect(container).toMatchSnapshot();
-  });
-  it("should render in primary style", () => {
-    const { container } = render(<Button appearance="primary">Button</Button>);
-    expect(container).toMatchSnapshot();
-  });
-  it("should render in secondary style", () => {
-    const { container } = render(
-      <Button appearance="secondary">Button</Button>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should render in pill style", () => {
-    const { container } = render(<Button shape="pill">Button</Button>);
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should render in an anchor tag with external target", () => {
-    const { container } = render(
-      <Button href="http://sproutsocial.style" external>
-        Button
-      </Button>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should render in large size", () => {
-    const { container } = render(
-      <Button appearance="secondary" size="large">
-        Button
-      </Button>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it("should render in active state", () => {
-    const { container } = render(
-      <Button appearance="secondary" active>
-        Button
-      </Button>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it("setting external to prop true should add target blank attribute to anchor", () => {
-    const { getByText } = render(
-      <Button href="http://sproutsocial.com" external>
-        Link
-      </Button>
-    );
-    expect(getByText("Link").target).toEqual("_blank");
-  });
-
-  it("setting external to prop true should add rel='noopener noreferrer' attribute", () => {
-    const { getByText } = render(
-      <Button href="http://sproutsocial.com" external>
-        Link
-      </Button>
-    );
-    expect(getByText("Link").rel).toEqual("noopener noreferrer");
-  });
-
-  it("setting a URL renders component as an Anchor", () => {
-    const { getByText } = render(
-      <Button href="http://sproutsocial.com">Am I an anchor?</Button>
-    );
-    // expect(wrapper.find("a").length).toEqual(1);
-    expect(getByText("Am I an anchor?").tagName).toEqual("A");
-  });
-
-  it("should only submit a form when given type=submit", () => {
-    const onSubmit = jest.fn();
-    const { queryByText } = render(
-      <form onSubmit={onSubmit}>
-        <Button>Not Submit</Button>
-        <Button type="submit">Submit</Button>
-      </form>
-    );
-    fireEvent.click(queryByText("Not Submit"));
-    expect(onSubmit).not.toHaveBeenCalled();
-    fireEvent.click(queryByText("Submit"));
-    expect(onSubmit).toHaveBeenCalled();
-  });
-
-  it("Has type attribute as button by default", () => {
-    const { getByText } = render(<Button>My Button</Button>);
-    expect(getByText("My Button").type).toEqual("button");
-  });
-
-  it("Does not have type attribute when given href attribute", () => {
-    const { getByText } = render(<Button href="google.com">My Button</Button>);
-    expect(getByText("My Button").type).toBeFalsy();
-    expect(getByText("My Button").type).not.toEqual("button");
-  });
-
-  it("Had overriden type attribute", () => {
-    const { getByText } = render(
-      <Button href="google.com" type="button">
-        My Button
-      </Button>
-    );
-    expect(getByText("My Button").type).toEqual("button");
-  });
-});