Repository: NMF-earth/nmf-app (language: typescript)

Issue:
ClickableTag component
#### Summary
Create ClickableTag component with 2 props, `text` and `isSelected`

#### To Do List 

- [ ] Code
- [ ] Snapshots Tests + OnPress Test

_NB: First to submit a valid PR, first to merge. Except if you already have merged some good code in this repo, I won’t assign any issue due to spam and beginners unable to complete a PR without a lot of help from my side._

<img width="447" alt="Screenshot 2021-09-24 at 11 07 41" src="https://user-images.githubusercontent.com/8709134/134649384-cf0cc8f6-88b4-4e1e-826a-fd31a6b510b5.png">



Discussion hints:

Pull request: Add ClickableTag
<!-- Thanks for submitting a pull request! We appreciate a lot your help. Please provide some information so that others can review your pull request. The two last fields below are optional but appreciated. -->

✅ I have read the [contributing file](https://github.com/NMF-earth/nmf-app/blob/main/contributing.md)

## Summary

This PR creates the ClickableTag component.
Closes #324

## Changelog

- Added the `ClickableTag` component, story and tests.


Test command: NODE_OPTIONS='--experimental-vm-modules --max-old-space-size=4096' npx --no-install jest app/components/ClickableTag/__tests__/ClickableTag.test.tsx --passWithNoTests 2>&1

Fix patch:
diff --git a/app/components/ClickableTag/ClickableTag.styles.ts b/app/components/ClickableTag/ClickableTag.styles.ts
new file mode 100644
index 00000000..c9a37298
--- /dev/null
+++ b/app/components/ClickableTag/ClickableTag.styles.ts
@@ -0,0 +1,21 @@
+import { StyleSheet } from "react-native";
+
+import { Colors } from "style";
+
+export default StyleSheet.create({
+  default: {
+    alignSelf: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6,
+    borderWidth: 1.5,
+  },
+  selected: {
+    backgroundColor: Colors.green10,
+    borderColor: Colors.green50,
+  },
+  unselected: {
+    backgroundColor: Colors.grey10,
+    borderColor: Colors.grey40,
+  },
+});
diff --git a/app/components/ClickableTag/ClickableTag.tsx b/app/components/ClickableTag/ClickableTag.tsx
new file mode 100644
index 00000000..9808321a
--- /dev/null
+++ b/app/components/ClickableTag/ClickableTag.tsx
@@ -0,0 +1,31 @@
+import React, { ReactElement } from "react";
+import { StyleProp, TouchableOpacity, ViewStyle } from "react-native";
+
+import { Text } from "components";
+
+import styles from "./ClickableTag.styles";
+
+type Props = {
+  text: string;
+  isSelected: boolean;
+  onPress: () => void;
+};
+
+const ClickableTag = ({ text, isSelected, onPress }: Props): ReactElement => {
+  const containerStyle: StyleProp<ViewStyle> = [
+    styles.default,
+    isSelected ? styles.selected : styles.unselected,
+  ];
+
+  const textColor = { darkGray: !isSelected, green: isSelected };
+
+  return (
+    <TouchableOpacity style={containerStyle} onPress={onPress}>
+      <Text.Secondary bold {...textColor}>
+        {text}
+      </Text.Secondary>
+    </TouchableOpacity>
+  );
+};
+
+export default ClickableTag;
diff --git a/app/components/ClickableTag/index.ts b/app/components/ClickableTag/index.ts
new file mode 100644
index 00000000..4092383a
--- /dev/null
+++ b/app/components/ClickableTag/index.ts
@@ -0,0 +1,1 @@
+export { default } from "./ClickableTag";
diff --git a/app/components/ClickableTag/stories/ClickableTag.story.tsx b/app/components/ClickableTag/stories/ClickableTag.story.tsx
new file mode 100644
index 00000000..40f9b8d1
--- /dev/null
+++ b/app/components/ClickableTag/stories/ClickableTag.story.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { storiesOf } from "@storybook/react-native";
+import { boolean, text } from "@storybook/addon-knobs";
+
+import ClickableTag from "..";
+
+storiesOf("ClickableTag", module).add("Clickable tag", () => {
+  <ClickableTag
+    text={text("Text", "Monday")}
+    isSelected={boolean("Is selected", false)}
+    onPress={() => {
+      // do nothing.
+    }}
+  />;
+});
diff --git a/storybook/storyLoader.js b/storybook/storyLoader.js
index 71f02999..9ff9b1d3 100644
--- a/storybook/storyLoader.js
+++ b/storybook/storyLoader.js
@@ -5,6 +5,8 @@
 
 function loadStories() {
   require("../app/components/Button/stories/Button.story");
+  require("../app/components/ClickableTag/stories/ClickableTag.story");
+  require("../app/components/EmissionListItem/stories/EmissionListItem.story");
   require("../app/components/ListItem/stories/ListItem.story");
   require("../app/components/NoEmission/stories/NoEmission.story");
   require("../app/components/SelectableListItem/stories/SelectableListItem.story");
@@ -12,11 +14,12 @@ function loadStories() {
   require("../app/components/Tag/__stories__/Tag.story");
   require("../app/components/Text/stories/Text.story");
   require("../app/components/TextInput/__stories__/TextInput.story");
-  require("../app/components/EmissionListItem/stories/EmissionListItem.story");
 }
 
 const stories = [
   "../app/components/Button/stories/Button.story",
+  "../app/components/ClickableTag/stories/ClickableTag.story",
+  "../app/components/EmissionListItem/stories/EmissionListItem.story",
   "../app/components/ListItem/stories/ListItem.story",
   "../app/components/NoEmission/stories/NoEmission.story",
   "../app/components/SelectableListItem/stories/SelectableListItem.story",
@@ -24,7 +27,6 @@ const stories = [
   "../app/components/Tag/__stories__/Tag.story",
   "../app/components/Text/stories/Text.story",
   "../app/components/TextInput/__stories__/TextInput.story",
-  "../app/components/EmissionListItem/stories/EmissionListItem.story",
 ];
 
 module.exports = {


Test patch:
diff --git a/app/components/ClickableTag/__tests__/ClickableTag.test.tsx b/app/components/ClickableTag/__tests__/ClickableTag.test.tsx
new file mode 100644
index 00000000..d1191003
--- /dev/null
+++ b/app/components/ClickableTag/__tests__/ClickableTag.test.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+import ClickableTag from "..";
+
+describe("ClickableTag tests", () => {
+  const mockOnPress = jest.fn();
+  const props = {
+    text: "Monday",
+    isSelected: false,
+    onPress: () => mockOnPress(),
+  };
+
+  it("should render correctly", () => {
+    const element = create(<ClickableTag {...props} />).toJSON();
+
+    expect(element).toMatchSnapshot();
+  });
+
+  it("given onPress should be called", () => {
+    const element = create(<ClickableTag {...props} />).toJSON();
+    element.props.onPress();
+
+    expect(mockOnPress).toBeCalled();
+  });
+});
diff --git a/app/components/ClickableTag/__tests__/__snapshots__/ClickableTag.test.tsx.snap b/app/components/ClickableTag/__tests__/__snapshots__/ClickableTag.test.tsx.snap
new file mode 100644
index 00000000..d7e68f83
--- /dev/null
+++ b/app/components/ClickableTag/__tests__/__snapshots__/ClickableTag.test.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClickableTag tests should render correctly 1`] = `
+<TouchableOpacity
+  onPress={[Function]}
+  style={
+    Array [
+      Object {
+        "alignSelf": "center",
+        "borderRadius": 6,
+        "borderWidth": 1.5,
+        "paddingHorizontal": 10,
+        "paddingVertical": 4,
+      },
+      Object {
+        "backgroundColor": "#F0F0F0",
+        "borderColor": "#9CA6A0",
+      },
+    ]
+  }
+>
+  <Text.Secondary
+    bold={true}
+    darkGray={true}
+    green={false}
+  >
+    Monday
+  </Text.Secondary>
+</TouchableOpacity>
+`;