feat(card): fix story for selection

carbon-design-system · Nov 3, 2020 · 557209c · 557209c
1 parent 2c56d07
commit 557209c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 41 deletions.
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -60,23 +60,6 @@ const CardWrapper = ({
     setIsCardSelected(isSelected);
   }, [isSelected, setIsCardSelected]);
 
-  const handleSelection = (e) => {
-    if (e.type === 'click' || e.key === 'Enter') {
-      setIsCardSelected(true);
-    }
-  };
-
-  const handleBlur = (e) => {
-    if (
-      e.relatedTarget.classList.contains(
-        `${iotPrefix}--card iot--card--wrapper`
-      )
-    ) {
-      setIsCardSelected(false);
-    }
-    onBlur();
-  };
-
   return (
     <div
       role="presentation"
@@ -89,9 +72,7 @@ const CardWrapper = ({
       onTouchStart={onTouchStart}
       onScroll={onScroll}
       onFocus={onFocus}
-      onBlur={(e) => handleBlur(e)}
-      onKeyDown={handleSelection}
-      onClick={handleSelection}
+      onBlur={onBlur}
       tabIndex={tabIndex}
       className={classnames(className, `${iotPrefix}--card--wrapper`, {
         [`${iotPrefix}--card--wrapper__selected`]: isCardSelected,

diff --git a/src/components/Card/Card.story.jsx b/src/components/Card/Card.story.jsx
@@ -32,27 +32,44 @@ export const getDataStateProp = () => ({
 
 storiesOf('Watson IoT/Card', module)
   .add('basic', () => {
-    const size = select('size', Object.keys(CARD_SIZES), CARD_SIZES.MEDIUM);
-    return (
-      <div style={{ width: text('width', `450px`), margin: 20 }}>
-        <Card
-          title={text('title', 'Card Title')}
-          id="facilitycard-basic"
-          size={size}
-          isLoading={boolean('isLoading', false)}
-          isSelected={boolean('isSelected', false)}
-          isEmpty={boolean('isEmpty', false)}
-          isEditable={boolean('isEditable', false)}
-          isExpanded={boolean('isExpanded', false)}
-          breakpoint="lg"
-          availableActions={{ range: true, expand: true }}
-          onCardAction={action('onCardAction')}
-          onFocus={action('onFocus')}
-          onBlur={action('onBlur')}
-          tabIndex={0}
-        />
-      </div>
-    );
+    const StatefulExample = () => {
+      const [selected, setSelected] = React.useState(false);
+      const size = select('size', Object.keys(CARD_SIZES), CARD_SIZES.MEDIUM);
+      const handleClick = () => {
+        setSelected(true);
+      };
+      const handleBlur = (e) => {
+        if (
+          !e.currentTarget.contains(e.relatedTarget) ||
+          (e.target === e.currentTarget && e.relatedTarget === null)
+        ) {
+          setSelected(false);
+        }
+        action('onBlur');
+      };
+      return (
+        <div style={{ width: text('width', `450px`), margin: 20 }}>
+          <Card
+            title={text('title', 'Card Title')}
+            id="facilitycard-basic"
+            size={size}
+            isLoading={boolean('isloading', false)}
+            isSelected={selected}
+            isEmpty={boolean('isEmpty', false)}
+            isEditable={boolean('isEditable', false)}
+            isExpanded={boolean('isExpanded', false)}
+            breakpoint="lg"
+            availableActions={{ range: true, expand: true }}
+            onCardAction={action('onCardAction')}
+            onFocus={action('onFocus')}
+            onBlur={handleBlur}
+            tabIndex={0}
+            onClick={handleClick}
+          />
+        </div>
+      );
+    };
+    return <StatefulExample />;
   })
   .add('with ellipsed title tooltip & external tooltip', () => {
     const size = select('size', Object.keys(CARD_SIZES), CARD_SIZES.MEDIUM);

diff --git a/src/components/Card/__snapshots__/Card.story.storyshot b/src/components/Card/__snapshots__/Card.story.storyshot
@@ -25,6 +25,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Card
         data-testid="Card"
         id="facilitycard-basic"
         onBlur={[Function]}
+        onClick={[Function]}
         onFocus={[Function]}
         role="presentation"
         style={