Merge pull request #165 from web3ui/feature/icon-onClick

feat: -onClick as Icon prop -CreditCard onPress/onRemove - delete Icon -RGBToHex -> rgbToHex
web3ui · Feb 28, 2022 · d833000 · d833000
2 parents 20958a9 + ae6660d
commit d833000
Show file tree

Hide file tree

Showing 19 changed files with 173 additions and 88 deletions.
diff --git a/src/components/BannerStrip/BannerStrip.test.tsx b/src/components/BannerStrip/BannerStrip.test.tsx
@@ -4,7 +4,7 @@ import { composeStories } from '@storybook/testing-react';
 import * as stories from './BannerStrip.stories';
 import 'jest-styled-components';
 import color from '../../styles/colors';
-import RGBToHex from '../../utils/rgbToHex';
+import rgbToHex from '../../utils/rgbToHex';
 
 const { Standard, StandardWithButton, Warning, Error, Success } =
     composeStories(stories);
@@ -42,7 +42,7 @@ describe('Banner Strip - Standard', () => {
         );
         const styles = element && getComputedStyle(element);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.blue);
     });
 });
@@ -93,7 +93,7 @@ describe('Banner Strip - Warning', () => {
         );
         const styles = element && getComputedStyle(element);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.yellow);
     });
 });
@@ -120,7 +120,7 @@ describe('Banner Strip - Error', () => {
         );
         const styles = element && getComputedStyle(element);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.red);
     });
 });
@@ -147,7 +147,7 @@ describe('Banner Strip - Success', () => {
         );
         const styles = element && getComputedStyle(element);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.green);
     });
 });
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
@@ -4,7 +4,7 @@ import { fireEvent } from '@testing-library/react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Button.stories';
 import color from '../../styles/colors';
-import RGBToHex from '../../utils/rgbToHex';
+import rgbToHex from '../../utils/rgbToHex';
 
 const {
     Primary,
@@ -59,9 +59,9 @@ describe('Button - Primary', () => {
         );
         const styles = element && getComputedStyle(element);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.green);
-        const colorHex = styles && RGBToHex(styles.color).toUpperCase();
+        const colorHex = styles && rgbToHex(styles.color).toUpperCase();
         expect(colorHex).toBe(color.white);
     });
 
@@ -90,10 +90,10 @@ describe('Button - Primary Large', () => {
             `[data-testid="${buttonTestId}"]`,
         );
         const styles = element && getComputedStyle(element);
-        const colorHex = styles && RGBToHex(styles.color).toUpperCase();
+        const colorHex = styles && rgbToHex(styles.color).toUpperCase();
         expect(colorHex).toBe(color.white);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.green);
         expect(styles?.borderWidth).toBe('4px');
         expect(styles?.fontSize).toBe('16px');
@@ -117,10 +117,10 @@ describe('Button - Primary Small', () => {
             `[data-testid="${buttonTestId}"]`,
         );
         const styles = element && getComputedStyle(element);
-        const colorHex = styles && RGBToHex(styles.color).toUpperCase();
+        const colorHex = styles && rgbToHex(styles.color).toUpperCase();
         expect(colorHex).toBe(color.white);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.green);
         expect(styles?.fontSize).toBe('13px');
         expect(styles?.padding).toBe('2px 12px');
@@ -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();
     });
@@ -275,9 +275,9 @@ describe('Button - Secondary', () => {
         );
         const styles = element && getComputedStyle(element);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.blueLight);
-        const colorHex = styles && RGBToHex(styles.color).toUpperCase();
+        const colorHex = styles && rgbToHex(styles.color).toUpperCase();
         expect(colorHex).toBe(color.blue);
     });
 
@@ -321,9 +321,9 @@ describe('Button - Outline', () => {
         );
         const styles = element && getComputedStyle(element);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.white);
-        const colorHex = styles && RGBToHex(styles.color).toUpperCase();
+        const colorHex = styles && rgbToHex(styles.color).toUpperCase();
         expect(colorHex).toBe(color.blue);
     });
     it('returns the normal onClick event', () => {
@@ -366,9 +366,9 @@ describe('Button - ColoredRed', () => {
         );
         const styles = element && getComputedStyle(element);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.red);
-        const colorHex = styles && RGBToHex(styles.color).toUpperCase();
+        const colorHex = styles && rgbToHex(styles.color).toUpperCase();
         expect(colorHex).toBe(color.red);
     });
     it('returns the normal onClick event', () => {
@@ -411,9 +411,9 @@ describe('Button - ColoredBlue', () => {
         );
         const styles = element && getComputedStyle(element);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.blue);
-        const colorHex = styles && RGBToHex(styles.color).toUpperCase();
+        const colorHex = styles && rgbToHex(styles.color).toUpperCase();
         expect(colorHex).toBe(color.blue);
     });
     it('returns the normal onClick event', () => {
@@ -456,9 +456,9 @@ describe('Button - ColoredGreen', () => {
         );
         const styles = element && getComputedStyle(element);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.green);
-        const colorHex = styles && RGBToHex(styles.color).toUpperCase();
+        const colorHex = styles && rgbToHex(styles.color).toUpperCase();
         expect(colorHex).toBe(color.green);
     });
     it('returns the normal onClick event', () => {
@@ -501,9 +501,9 @@ describe('Button - ColoredYellow', () => {
         );
         const styles = element && getComputedStyle(element);
         const bgColorHex =
-            styles && RGBToHex(styles.backgroundColor).toUpperCase();
+            styles && rgbToHex(styles.backgroundColor).toUpperCase();
         expect(bgColorHex).toBe(color.yellow);
-        const colorHex = styles && RGBToHex(styles.color).toUpperCase();
+        const colorHex = styles && rgbToHex(styles.color).toUpperCase();
         expect(colorHex).toBe(color.yellow);
     });
     it('returns the normal onClick event', () => {

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.styles.ts b/src/components/CreditCard/CreditCard.styles.ts
@@ -48,7 +48,6 @@ export const DivStyledFlex = styled.div`
 export const DivStyledFlexText = styled.div`
     color: white;
     display: flex;
-    gap: 15px;
 `;
 
 export const DivStyledRemove = styled.div`
@@ -73,7 +72,7 @@ export const PStyledText = styled.p`
     color: ${colors.white};
     font-size: 12px;
     line-height: 16px;
-    margin: 0;
+    margin: 0 0 0 5px;
 `;
 
 const expiredStyles = css`

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/CreditCard/types.ts b/src/components/CreditCard/types.ts
@@ -33,6 +33,11 @@ export interface CreditCardProps {
      */
     name: string;
 
+    /**
+     * run function when creditcard is clicked
+     */
+    onPressed?: () => void;
+
     /**
      * run function when remove icon is clicked
      */