add Token component to Storybook and one more state of this component

.gitignore

@@ -3,3 +3,4 @@
 /flow-coverage
 /build
 .idea/
+**/.DS_Store

src/Components/Token/Token.less

@@ -23,6 +23,12 @@
         -webkit-appearance: none;
         appearance: none;
     }
+
+    &.question {
+        position: relative;
+        background-color: transparent;
+        border: 1px dashed #333;
+    }
 }
 
 .token-remove {
@@ -67,3 +73,38 @@
         }
     }
 }
+
+.token-question {
+    margin: 0;
+    position: absolute;
+    top: -7px;
+    left: -7px;
+    width: 14px;
+    height: 14px;
+    border: none;
+    border-radius: 50%;
+    background-color: #fff;
+    border: 1px solid #333;
+    font-family: inherit;
+    line-height: inherit;
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+
+    &::before,
+    &::after {
+        content: '?';
+        position: absolute;
+        font-size: 10px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    &:hover {
+        &::before,
+        &::after {
+            opacity: 0.8;
+        }
+    }
+}

src/Components/Token/Token.tsx

@@ -3,7 +3,7 @@ import cn from "./Token.less";
 
 type Props = {
     children: string;
-    type?: "removable" | "selectable";
+    type?: "removable" | "selectable" | "question";
     onClick?: (token: string) => void;
     onRemove?: (token: string) => void;
 };
@@ -35,12 +35,35 @@ const Token = (props: Props): React.ReactElement => {
         };
 
         return (
-            <button type="button" className={cn("token", "selectable")} onClick={handleClick}>
+            <button
+                type="button"
+                className={cn("token", "selectable")}
+                onClick={handleClick}
+                aria-label="Select"
+            >
                 {children}
             </button>
         );
     }
 
+    if (type === "question") {
+        const handleRemove = () => {
+            onRemove?.(children);
+        };
+
+        return (
+            <span className={cn("token", "question")}>
+                {children}
+                <button
+                    type="button"
+                    className={cn("token-question")}
+                    onClick={handleRemove}
+                    aria-label="Question"
+                />
+            </span>
+        );
+    }
+
     return <span className={cn("token")}>{children}</span>;
 };
 

src/Stories/Token.stories.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import Token from "../Components/Token/Token";
+
+storiesOf("Token", module)
+    .addDecorator((story) => <div style={{ margin: 20 }}>{story()}</div>)
+    .add("removable", () => (
+        <Token type="removable" onRemove={action("onRemove")}>
+            dev
+        </Token>
+    ))
+    .add("selectable", () => (
+        <Token type="selectable" onClick={action("handleClick")}>
+            dev
+        </Token>
+    ))
+    .add("question", () => (
+        <Token type="question" onClick={action("handleClick")}>
+            dev
+        </Token>
+    ));