Merge pull request #192 from web3ui/fix/card_state

Fix/card state
web3ui · Mar 4, 2022 · e8507c6 · e8507c6
2 parents b0f3978 + f7f4c40
commit e8507c6
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 23 deletions.
diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
@@ -1,20 +1,33 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import Card from './Card';
-import React from 'react';
+import React, { useState } from 'react';
 import getModuleAnimation from './Animations/animations';
 import { Icon, iconTypes } from '../Icon';
 import colors from '../../styles/colors';
 import { Button } from '../Button';
+// import { useArgs } from '@storybook/addons';
+
+/**
+ * To-do:
+ * find correct way of using useArgs with react testing
+ */
 
 export default {
     title: '4.UI/Card',
     component: Card,
 } as ComponentMeta<typeof Card>;
 
 const Template: ComponentStory<typeof Card> = (args) => {
+    // const [{ isSelected }, updateArgs] = useArgs();
+    const [isSelected, setIsSelected] = useState(false);
     return (
         <div style={{ width: '250px' }}>
-            <Card key={'0'} {...args} />
+            <Card
+                isSelected={isSelected}
+                {...args}
+                setIsSelected={setIsSelected}
+                // setIsSelected={() => updateArgs({ isSelected: !isSelected })}
+            />
         </div>
     );
 };
@@ -32,7 +45,7 @@ RegularSelected.args = {
     tooltipText: 'Lorem Ipsum Dole met sai souni lokomit anici trenicid',
     children: [<div key={'0'}>{getModuleAnimation(undefined)}</div>],
     title: 'dApp',
-    selected: true,
+    isSelected: true,
     description: 'Click to create a dApp',
 };
 

diff --git a/src/components/Card/Card.styles.ts b/src/components/Card/Card.styles.ts
@@ -5,7 +5,7 @@ import fonts from '../../styles/fonts';
 import colors from '../../styles/colors';
 
 const DivStyled = styled.div<
-    Pick<CardProps, 'selected' | 'isDisabled' | 'cursorType'>
+    Pick<CardProps, 'isSelected' | 'isDisabled' | 'cursorType'>
 >`
     ${resetCSS};
     ${fonts.text};
@@ -32,7 +32,7 @@ const DivStyled = styled.div<
         );
     }`}
     ${(p) => p.cursorType === 'pointer' && 'cursor: pointer;'}
-    ${(p) => p.selected && `outline-color: ${colors.green};`}
+    ${(p) => p.isSelected && `outline-color: ${colors.green};`}
 `;
 
 const AbsoluteIconStyled = styled.div<AbsoluteIconStyledProps>`

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import React from 'react';
 import { CardProps } from './types';
 import { iconTypes } from '../Icon/collection';
@@ -15,38 +14,28 @@ const Card: React.FC<CardProps> = ({
     children,
     cursorType = 'pointer',
     description,
-    selected,
+    isSelected,
     title,
     tooltipText,
     isDisabled = false,
+    setIsSelected,
 }: CardProps) => {
-    const [isSelected, setSelected] = useState<boolean | undefined>(selected);
-    const [showCheckedIcon, toggleChecked] =
-        useState<boolean | undefined>(false);
-
-    useEffect(() => {
-        toggleChecked(selected);
-    }, [selected]);
-
     return (
         <DivStyled
             aria-label={isSelected ? 'card not selected' : 'card selected'}
             data-testid={'card-test-id'}
             id={id}
             onClick={() => {
-                if (isDisabled) {
-                    return;
-                }
-                setSelected(!isSelected);
-                toggleChecked(!showCheckedIcon);
+                if (isDisabled || !setIsSelected) return;
+                setIsSelected(!isSelected);
             }}
             role="button"
-            selected={isSelected && showCheckedIcon}
+            isSelected={isSelected}
             isDisabled={isDisabled}
             cursorType={cursorType}
         >
             <HeaderStyled data-testid={'header-test-id'}>
-                {showCheckedIcon && (
+                {isSelected && (
                     <AbsoluteIconStyled position="topL">
                         <Icon
                             data-testid={'check-test-id'}

diff --git a/src/components/Card/types.ts b/src/components/Card/types.ts
@@ -17,7 +17,7 @@ export interface CardProps {
     /**
      * set if card is selected
      */
-    selected?: boolean;
+    isSelected?: boolean;
 
     /**
      * set title of card
@@ -38,6 +38,12 @@ export interface CardProps {
      * Style of the cursor
      */
     cursorType?: 'pointer' | 'default';
+
+    /**
+     * Sets isSelected state
+     */
+
+    setIsSelected?: (value: boolean) => void;
 }
 
 export interface AbsoluteIconStyledProps {