tfiechowski

import React from "react";

export default function Button({ text }) {
  return <button>{text}</button>;
}

tfiechowski

A very simple button.

```jsx
import Button from "./Button";

<Button text="We Salute You!" />
```

tfiechowski

import React from "react";
import styled from "@emotion/styled";

const Wrapper = styled.button`
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 4px;

  background: #5cdb95;

tfiechowski

import { css } from "@emotion/core";

export const font = css`
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: 4px;
`;

export const shape = css`

tfiechowski

import React from "react";
import styled from "@emotion/styled";
import { font, primaryColors, shape } from "../config/styles";

const Wrapper = styled.button`
  ${font}
  ${primaryColors}
  ${shape}
`;

tfiechowski

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [["module-resolver", { "root": ["./src"] }]]
}

tfiechowski

import React from "react";
import styled from "@emotion/styled";
import { font, primaryColors, shape } from "config/styles";

const Wrapper = styled.button`
  ${font}; ${primaryColors}; ${shape};
`;

export default function Button({ text }) {
  return <Wrapper>{text}</Wrapper>;

tfiechowski

import { render, getByText } from "@testing-library/react";
import React from "react";
import Button from "components/Button";

describe("Button", () => {
  test("should display text", () => {
    const { container } = render(<Button text="We Salute You!" />);

    getByText(container, "We Salute You!");
  });

tfiechowski

import { matchers } from "jest-emotion";
expect.extend(matchers);

tfiechowski

module.exports = {
  setupFilesAfterEnv: ["./src/setupTests.js"]
};