Merge pull request #12 from labcodes/migrate-tags

CSYS-210: Migrate Tags

apps/docs/.gitignore

@@ -110,3 +110,6 @@ dist
 
 # Visual Studio Code
 .vscode
+
+# VIM swap files
+*.swp

apps/docs/stories/Tag/DropdownTag.stories.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+import { ICON_TYPES, TAG_COLORS } from "../../confetti-ds/src/constants";
+import { DropdownTag as Component  } from "../../confetti-ds/src";
+
+export default {
+  title: "Tag/Dropdown Tag",
+  component: Component,
+  argTypes: {
+    icon: {
+      control: { type: "select", options: ICON_TYPES },
+    },
+    color: {
+      control: { type: "select", options: TAG_COLORS },
+    },
+    skin: {
+      control: { type: "inline-radio" },
+    },
+  },
+};
+
+export const DropdownTag = (args) => <Component {...args} />;
+
+DropdownTag.args = {
+  text: "demo tag",
+};

apps/docs/stories/Tag/RemovableTag.stories.js

@@ -0,0 +1,40 @@
+import React from "react";
+
+import { ICON_TYPES, TAG_COLORS } from "../../confetti-ds/src/constants";
+import { Button, RemovableTag as Component } from "../../confetti-ds/src";
+
+export default {
+  title: "Tag/Removable Tag",
+  component: Component,
+  argTypes: {
+    icon: {
+      control: { type: "select", options: ICON_TYPES },
+    },
+    color: {
+      control: { type: "select", options: TAG_COLORS },
+    },
+    skin: {
+      control: { type: "inline-radio" },
+    },
+  },
+};
+
+export const RemovableTag = (args) => {
+  const [showTag, setShowTag] = React.useState(true);
+
+  return (
+    <React.Fragment>
+      { showTag ?
+        <Component {...args} onClick={() => setShowTag(false)} />
+        :
+        <div>
+          <Button text="Restore tag" onClick={() => setShowTag(true)} size="small"/>
+        </div> }
+
+      <p>Use this link for a <strong>thumbSrc</strong> example: <a>http://avatars3.githubusercontent.com/u/1887591</a></p>
+    </React.Fragment>
+  )
+}
+RemovableTag.args = {
+  text: "demo tag",
+};

apps/docs/stories/Tag/SimpleTag.stories.js

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { ICON_TYPES, TAG_COLORS } from "../../confetti-ds/src/constants";
+import { SimpleTag as Component } from "../../confetti-ds/src";
+
+export default {
+  title: "Tag/Simple Tag",
+  component: Component,
+  argTypes: {
+    icon: {
+      control: { type: "select", options: ICON_TYPES },
+    },
+    color: {
+      control: { type: "select", options: TAG_COLORS },
+    },
+    skin: {
+      control: { type: "inline-radio" },
+    },
+  },
+};
+
+export const SimpleTag = (args) => {
+  return (
+    <React.Fragment>
+      <Component {...args} />
+      <p>Use this link for a <strong>thumbSrc</strong> example: <a>http://avatars3.githubusercontent.com/u/1887591</a></p>
+    </React.Fragment>
+  )
+};
+
+SimpleTag.args = {
+  text: "demo tag",
+};

apps/docs/stories/Tag/TogglableTag.stories.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+import { TAG_COLORS } from "../../confetti-ds/src/constants";
+import { TogglableTag as Component } from "../../confetti-ds/src";
+
+export default {
+  title: "Tag/Togglable Tag",
+  component: Component,
+  argTypes: {
+    color: {
+      control: { type: "select", options: TAG_COLORS },
+    },
+  },
+};
+
+export const TogglableTag = (args) => <Component {...args} />;
+TogglableTag.args = {
+  text: "demo tag",
+};