From dcd6ab85ae73d35f4d6f8917202802bd0c739c1d Mon Sep 17 00:00:00 2001
From: Danil Pismenny <danil@brandymint.ru>
Date: Tue, 30 Jul 2019 20:50:20 +0300
Subject: [PATCH] fix(stories): Add DeleteIcon into CustomCard story

fix #306
---
 stories/CustomCard.story.js                 | 23 +++++++-
 tests/__snapshots__/Storyshots.test.js.snap | 61 ++++++++++++++++++++-
 2 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/stories/CustomCard.story.js b/stories/CustomCard.story.js
index 3f6c1f27b..58f3490b7 100644
--- a/stories/CustomCard.story.js
+++ b/stories/CustomCard.story.js
@@ -1,11 +1,31 @@
 import React from 'react'
 import {storiesOf} from '@storybook/react'
 import {MovableCardWrapper } from 'rt/styles/Base'
+import DeleteButton from 'rt/widgets/DeleteButton'
 
 import Board from '../src'
 import Tag from 'rt/components/Card/Tag'
 
-const CustomCard = ({onClick, className, name, cardStyle, body, dueOn, cardColor, subTitle, tagStyle, escalationText, tags}) => {
+const CustomCard = ({
+  onClick,
+  className,
+  name,
+  cardStyle,
+  body,
+  dueOn,
+  cardColor,
+  subTitle,
+  tagStyle,
+  escalationText,
+  tags,
+  showDeleteButton,
+  onDelete,
+}) => {
+  const clickDelete = e => {
+    onDelete()
+    e.stopPropagation()
+  }
+
   return (
     <MovableCardWrapper
       onClick={onClick}
@@ -24,6 +44,7 @@ const CustomCard = ({onClick, className, name, cardStyle, body, dueOn, cardColor
         }}>
         <div style={{fontSize: 14, fontWeight: 'bold'}}>{name}</div>
         <div style={{fontSize: 11}}>{dueOn}</div>
+        {showDeleteButton && <DeleteButton onClick={clickDelete} />}
       </header>
       <div style={{fontSize: 12, color: '#BD3B36'}}>
         <div style={{color: '#4C4C4C', fontWeight: 'bold'}}>{subTitle}</div>
diff --git a/tests/__snapshots__/Storyshots.test.js.snap b/tests/__snapshots__/Storyshots.test.js.snap
index 6459456ca..6e31cea9a 100644
--- a/tests/__snapshots__/Storyshots.test.js.snap
+++ b/tests/__snapshots__/Storyshots.test.js.snap
@@ -14790,13 +14790,38 @@ exports[`Storyshots Custom Components Card 1`] = `
   color: #000;
 }
 
-.c8 {
+.c10 {
   padding: 2px 3px;
   border-radius: 3px;
   margin: 2px 5px;
   font-size: 70%;
 }
 
+.c8 {
+  text-align: center;
+  position: absolute;
+  top: -1px;
+  right: 2px;
+  cursor: pointer;
+}
+
+.c9 {
+  -webkit-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+  display: inline-block;
+  border: none;
+  font-size: 8px;
+  height: 15px;
+  line-height: 1px;
+  margin: 0 0 8px;
+  padding: 0;
+  text-align: center;
+  width: 15px;
+  background: inherit;
+  cursor: pointer;
+  opacity: 0;
+}
+
 .c6:hover .c9 {
   opacity: 1;
 }
@@ -15015,6 +15040,16 @@ exports[`Storyshots Custom Components Card 1`] = `
                         >
                           due in a day
                         </div>
+                        <div
+                          className="c8"
+                          onClick={[Function]}
+                        >
+                          <button
+                            className="c9"
+                          >
+                            ✖
+                          </button>
+                        </div>
                       </header>
                       <div
                         style={
@@ -15107,6 +15142,16 @@ exports[`Storyshots Custom Components Card 1`] = `
                         >
                           due now
                         </div>
+                        <div
+                          className="c8"
+                          onClick={[Function]}
+                        >
+                          <button
+                            className="c9"
+                          >
+                            ✖
+                          </button>
+                        </div>
                       </header>
                       <div
                         style={
@@ -15229,6 +15274,16 @@ exports[`Storyshots Custom Components Card 1`] = `
                         >
                           due in a day
                         </div>
+                        <div
+                          className="c8"
+                          onClick={[Function]}
+                        >
+                          <button
+                            className="c9"
+                          >
+                            ✖
+                          </button>
+                        </div>
                       </header>
                       <div
                         style={
@@ -15285,7 +15340,7 @@ exports[`Storyshots Custom Components Card 1`] = `
                           }
                         >
                           <span
-                            className="c8"
+                            className="c10"
                             style={
                               Object {
                                 "backgroundColor": "red",
@@ -15297,7 +15352,7 @@ exports[`Storyshots Custom Components Card 1`] = `
                             Critical
                           </span>
                           <span
-                            className="c8"
+                            className="c10"
                             style={
                               Object {
                                 "backgroundColor": "#0079BF",