feat(icon): onclick

web3ui · Feb 28, 2022 · c723b1b · c723b1b
1 parent 2062600
commit c723b1b
Show file tree

Hide file tree

Showing 12 changed files with 112 additions and 31 deletions.
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
@@ -154,7 +154,7 @@ describe('Button - Primary with icon', () => {
     });
     it('renders icon correctly', () => {
         const iconElement = container.querySelector(
-            `[data-testid="${buttonTestId}"] > svg`,
+            `[data-testid="${buttonTestId}"] > div > svg`,
         );
         expect(iconElement).not.toBeNull();
     });

diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
@@ -2,6 +2,9 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import Card from './Card';
 import React from 'react';
 import getModuleAnimation from './Animations/animations';
+import { Icon, iconTypes } from '../Icon';
+import colors from '../../styles/colors';
+import { Button } from '../Button';
 
 export default {
     title: '4.UI/Card',
@@ -94,3 +97,70 @@ ComingSoon.args = {
     description: 'Coming Soon',
     isDisabled: true,
 };
+
+export const ProPlan = Template.bind({});
+ProPlan.args = {
+    children: [
+        <div key={'0'}>
+            <p>Pro Plan</p>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                <span style={{ fontWeight: 600, color: colors.black }}>
+                    $18
+                </span>
+                <span>per month</span>
+            </div>
+            <span>Everything in Starter, plus</span>
+            <div
+                style={{
+                    display: 'flex',
+                    fontSize: '12px',
+                    color: colors.grey,
+                }}
+            >
+                <Icon svg={iconTypes.checkmark} fill="green" />
+                Servers never Sleep
+            </div>
+            <div
+                style={{
+                    display: 'flex',
+                    fontSize: '12px',
+                    color: colors.grey,
+                }}
+            >
+                <Icon svg={iconTypes.checkmark} fill="green" />
+                More requests
+            </div>
+            <div
+                style={{
+                    display: 'flex',
+                    fontSize: '12px',
+                    color: colors.grey,
+                }}
+            >
+                <Icon svg={iconTypes.checkmark} fill="green" />
+                Higher limits
+            </div>
+            <div
+                style={{
+                    display: 'flex',
+                    fontSize: '12px',
+                    color: colors.grey,
+                }}
+            >
+                <Icon svg={iconTypes.checkmark} fill="green" />
+                Request auto scaling
+            </div>
+            <div
+                style={{
+                    display: 'flex',
+                    fontSize: '12px',
+                    color: colors.grey,
+                }}
+            >
+                <Icon svg={iconTypes.checkmark} fill="green" />
+                Email support
+            </div>
+            <Button text="Upgrade" theme="primary" isFullWidth />
+        </div>,
+    ],
+};
diff --git a/src/components/Card/Card.styles.ts b/src/components/Card/Card.styles.ts
@@ -26,7 +26,7 @@ export const DivStyled = styled.div<Pick<CardProps, 'selected' | 'isDisabled'>>`
     padding: 15px;
     position: relative;
     width: 100%;
-    ${(p) => p.isDisabled && `opacity:70%;`}
+    ${(p) => p.isDisabled && 'opacity:70%;'}
     ${(p) => (p.selected ? selected : !p.isDisabled && hoverNotSelected)}
 `;
 

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -49,7 +49,7 @@ const Card: React.FC<CardProps> = ({
                         svg={iconTypes.checkmark}
                     />
                 )}
-                {!isDisabled && (
+                {!isDisabled && tooltipText && (
                     <Tooltip
                         position={'bottom'}
                         children={[
@@ -66,12 +66,14 @@ const Card: React.FC<CardProps> = ({
                 )}
             </HeaderStyled>
             <div>{children}</div>
-            <FooterStyled>
-                {title && <p data-testid={'title-test-id'}>{title}</p>}
-                {description && (
-                    <span data-testid={'desc-test-id'}>{description}</span>
-                )}
-            </FooterStyled>
+            {(title || description) && (
+                <FooterStyled>
+                    {title && <p data-testid={'title-test-id'}>{title}</p>}
+                    {description && (
+                        <span data-testid={'desc-test-id'}>{description}</span>
+                    )}
+                </FooterStyled>
+            )}
         </DivStyled>
     );
 };

diff --git a/src/components/Card/types.ts b/src/components/Card/types.ts
@@ -27,7 +27,7 @@ export interface CardProps {
     /**
      * set text inside tooltip
      */
-    tooltipText: string;
+    tooltipText?: string;
 
     /**
      * Set the state disabled state of the cart

diff --git a/src/components/CreditCard/CreditCard.tsx b/src/components/CreditCard/CreditCard.tsx
@@ -1,31 +1,32 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Radios } from '../Radios';
 import { Logo } from '../Logo';
 import { CreditCardProps } from './types';
 import {
     DivStyledCreditCard,
     DivStyledFlex,
     DivStyledFlexText,
-    DivStyledRemove,
     PStyledDigits,
     PStyledText,
 } from './CreditCard.styles';
+import { Icon, iconTypes } from '../Icon';
+import colors from '../../styles/colors';
 
 const CreditCard: React.FC<CreditCardProps> = ({
     expiresAt,
     id,
     isExpired,
     lastDigits,
     name,
+    onPressed,
     onRemove,
+    pressed,
     brand,
 }: CreditCardProps) => {
-    const [pressed, setPressed] = useState<boolean>(false);
-
     return (
         <DivStyledCreditCard
             isExpired={isExpired}
-            onClick={() => setPressed(!pressed)}
+            onClick={onPressed}
             brand={brand}
             pressed={pressed}
         >
@@ -34,9 +35,13 @@ const CreditCard: React.FC<CreditCardProps> = ({
                     checked={pressed}
                     id={id || 'radio-credit-card'}
                     items={['']}
-                    onChange={() => setPressed(!pressed)}
+                    onChange={() => {}}
+                />
+                <Icon
+                    svg={iconTypes.bin}
+                    fill={colors.red}
+                    onClick={onRemove}
                 />
-                <DivStyledRemove onClick={onRemove} />
             </DivStyledFlex>
             <PStyledDigits>{`•••• ${lastDigits}`}</PStyledDigits>
             <DivStyledFlex>

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -5,6 +5,7 @@ import type { IconProps } from './types';
 
 const Icon: React.FC<IconProps> = ({
     fill = 'inherit',
+    onClick = () => {},
     size = 18,
     svg,
     style,
@@ -20,7 +21,7 @@ const Icon: React.FC<IconProps> = ({
         return collection[key](fill, size, style);
     };
 
-    return getIcon(fill, size, svg, style);
+    return <div onClick={onClick}>{getIcon(fill, size, svg, style)}</div>;
 };
 
 export default Icon;
diff --git a/src/components/Icon/collection.tsx b/src/components/Icon/collection.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable linebreak-style */
-/* eslint-disable no-unused-vars */
 import arrowCircleDownIcon from './icons/arrow-circle-down';
 import arrowCircleLeftIcon from './icons/arrow-circle-left';
 import arrowCircleRightIcon from './icons/arrow-circle-right';

diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts
@@ -6,6 +6,11 @@ export interface IconProps {
      */
     fill?: string;
 
+    /**
+     * Run function if Icon is clikec
+     */
+    onClick?: () => void;
+
     /**
      * set a pixel size, SVGs render as a square icons
      */

diff --git a/src/components/NewComp/NewComp.test.tsx b/src/components/NewComp/NewComp.test.tsx
@@ -18,17 +18,17 @@ import { iconTestId } from '../Icon/Icon.test';
 // importing my stories to test
 const { Default, InitializeRed, UnderLinedText } = composeStories(stories);
 
-//setting my test IDs to match my tsx
+// setting my test IDs to match my tsx
 export const testCompId = 'test-new-comp';
 const testTitle = 'test-title';
 const testHeading = 'test-heading';
 const testText = 'test-text';
 // NOTE: the main test ID is exported incase
 // it is needed for another components test
 
-///////////////////////////////////////////////////////
+// /////////////////////////////////////////////////////
 // examples of basic tests of props, values and styles
-///////////////////////////////////////////////////////
+// /////////////////////////////////////////////////////
 
 // Test Story 1: Default
 describe('Default', () => {

diff --git a/src/components/Notification/Notification.test.tsx b/src/components/Notification/Notification.test.tsx
@@ -43,21 +43,21 @@ describe('Notification - Standard - Active - Regular Text - Regular Icon', () =>
 
     it('should render left icon', () => {
         const iconSVG = container.querySelector(
-            `[data-testid="${iconId}"] > svg`,
+            `[data-testid="${iconId}"] > div > svg`,
         );
         expect(iconSVG).not.toBeNull();
     });
 
     it('should render close icon', () => {
         const closeSVGtitle = container.querySelector(
-            `[data-testid="${closeId}"] > svg > title`,
+            `[data-testid="${closeId}"] > div > svg > title`,
         );
         expect(closeSVGtitle?.innerHTML).toBe('x icon');
     });
 
     it('should render correct', () => {
         const iconSVG = container.querySelector(
-            `[data-testid="${closeId}"] > svg`,
+            `[data-testid="${closeId}"] > div > svg`,
         );
         expect(iconSVG).not.toBeNull();
     });
@@ -101,14 +101,14 @@ describe('Notification - Regular - Active - Custom Text - Regular Icon', () => {
 
     it('should render left icon', () => {
         const iconSVG = container.querySelector(
-            `[data-testid="${iconId}"] > svg`,
+            `[data-testid="${iconId}"] > div > svg`,
         );
         expect(iconSVG).not.toBeNull();
     });
 
     it('should render close icon', () => {
         const iconSVG = container.querySelector(
-            `[data-testid="${closeId}"] > svg`,
+            `[data-testid="${closeId}"] > div > svg`,
         );
         expect(iconSVG).not.toBeNull();
     });
@@ -152,14 +152,14 @@ describe('Notification - Active - Custom Text - Custom Icon', () => {
 
     it('should render left icon', () => {
         const iconSVG = container.querySelector(
-            `[data-testid="${iconId}"] > svg`,
+            `[data-testid="${iconId}"] > div > svg`,
         );
         expect(iconSVG).not.toBeNull();
     });
 
     it('should render close icon', () => {
         const iconSVG = container.querySelector(
-            `[data-testid="${closeId}"] > svg`,
+            `[data-testid="${closeId}"] > div > svg`,
         );
         expect(iconSVG).not.toBeNull();
     });

diff --git a/src/components/Tag/Tag.test.tsx b/src/components/Tag/Tag.test.tsx
@@ -118,7 +118,7 @@ describe('Tag - Active Status', () => {
 
     it('should render icon', () => {
         const iconSVG = container.querySelector(
-            `[data-testid="${tagTestId}"] > svg`,
+            `[data-testid="${tagTestId}"] > div > svg`,
         );
         expect(iconSVG).not.toBeNull();
     });