Feature/improves screen components (#8)

* Adds word button component
* Disables import/order eslint rule
* Adds ScreenText component
* Modifies Screen component and moves it to organisms

frontend/package.json

@@ -51,6 +51,14 @@
           "import/no-anonymous-default-export": "off",
           "react/jsx-props-no-spreading": "off"
         }
+      },
+      {
+        "files": [
+          "**/*"
+        ],
+        "rules": {
+          "import/order": "off"
+        }
       }
     ]
   },

frontend/src/components/atoms/Word/Word.stories.jsx

@@ -0,0 +1,11 @@
+import Word from "./index";
+
+const Template = (props) => <Word {...props} />;
+
+export const Default = Template.bind({});
+export const NotActive = () => <Word word="Plane" />;
+export const Active = () => <Word word="Plane" active />;
+
+export default {
+  title: "Atoms/Word",
+};

frontend/src/components/atoms/Word/Word.test.jsx

@@ -0,0 +1,14 @@
+import { render, screen } from "@testing-library/react";
+import Word from "./index";
+
+describe("Word", () => {
+  it("renders without crash", () => {
+    render(<Word word="apple" />);
+  });
+
+  it("renders the given word", () => {
+    const word = "apple";
+    render(<Word word={word} />);
+    expect(screen.getByText(word)).toBeTruthy();
+  });
+});

frontend/src/components/atoms/Word/index.jsx

@@ -0,0 +1,62 @@
+/**
+ * Core dependencies
+ */
+import PropTypes from "prop-types";
+
+/**
+ * UI components
+ */
+import { ButtonBase, createStyles, makeStyles } from "@material-ui/core";
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    root: (active) => ({
+      textAlign: "left",
+      verticalAlign: "top",
+      textDecoration: active ? "underline" : "inherit",
+      wordWrap: "break-word",
+      display: "inline !important",
+      fontWeight: 700,
+    }),
+    focusVisible: {
+      border: "1px solid red",
+      borderColor: theme.palette.primary.dark,
+    },
+  })
+);
+
+/**
+ * Button component used to render attention on the given word
+ */
+const Word = ({ word, active }) => {
+  const classes = useStyles(active);
+
+  return (
+    <ButtonBase
+      component="span"
+      classes={{
+        root: classes.root,
+        focusVisible: classes.focusVisible,
+      }}
+    >
+      {word}
+    </ButtonBase>
+  );
+};
+
+Word.propTypes = {
+  /**
+   Word that will be printed on the button
+   */
+  word: PropTypes.string.isRequired,
+  /**
+   If true, it will render a decoration
+   */
+  active: PropTypes.bool,
+};
+
+Word.defaultProps = {
+  active: false,
+};
+
+export default Word;

frontend/src/components/layouts/MainLayout/MainLayout.stories.jsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from "@material-ui/core";
 import { action } from "@storybook/addon-actions";
 import MainLayout from "./index";
-import Screen from "../../molecules/Screen";
+import Screen from "../../organisms/Screen";
 import Keyboard from "../../molecules/Keyboard";
 import Suggestions from "../../molecules/Suggestions";
 

frontend/src/components/molecules/ScreenText/ScreenText.stories.jsx

@@ -0,0 +1,23 @@
+import ScreenText from "./index";
+import getWord from "../../../utils/getWord";
+
+const Template = (props) => <ScreenText {...props} />;
+
+const appleWord = getWord("345", 0, "Apple");
+const bananaWord = getWord("543", 0, "Banana");
+const melonWord = getWord("645", 0, "Melon");
+const pineAppleWord = getWord("6745564", 0, "Pineapple");
+const emptySpace = getWord("0", 0, " ");
+const fruits = [appleWord, emptySpace, bananaWord, emptySpace, melonWord];
+
+export const Default = Template.bind({});
+
+export const WithText = () => <ScreenText words={fruits} />;
+
+export const WithActiveWord = () => (
+  <ScreenText words={fruits} activeWord={pineAppleWord} />
+);
+
+export default {
+  title: "Molecules/ScreenText",
+};

frontend/src/components/molecules/ScreenText/ScreenText.test.jsx

@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import { ThemeProvider } from "@material-ui/core/styles";
+import darkTheme from "../../../themes/darkTheme";
+import ScreenText from "./index";
+import getWord from "../../../utils/getWord";
+
+describe("ScreenText", () => {
+  beforeAll(() => {
+    window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  });
+
+  it("renders without crash", () => {
+    render(
+      <ThemeProvider theme={darkTheme}>
+        <ScreenText />
+      </ThemeProvider>
+    );
+  });
+
+  it("renders all words", () => {
+    const words = [getWord("4545", 0, "apple"), getWord("45455", 0, "applex")];
+    render(
+      <ThemeProvider theme={darkTheme}>
+        <ScreenText words={words} />
+      </ThemeProvider>
+    );
+    words.forEach((word) => expect(screen.getByText(word.chosen)).toBeTruthy());
+  });
+
+  it("renders active word", () => {
+    const words = [getWord("4545", 0, "apple"), getWord("45455", 0, "applex")];
+    const activeWord = getWord("777", 3, "active");
+    render(
+      <ThemeProvider theme={darkTheme}>
+        <ScreenText words={words} activeWord={activeWord} />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(activeWord.chosen)).toBeTruthy();
+  });
+
+  it("renders last word as active if active word is not present", () => {
+    const words = [getWord("4545", 0, "apple"), getWord("45455", 1, "applex")];
+    render(
+      <ThemeProvider theme={darkTheme}>
+        <ScreenText words={words} />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(words[words.length - 1].chosen)).toBeTruthy();
+  });
+});