Merge pull request #93 from web3ui/feat/creditCard

Feat/credit card

src/components/Accordion/Accordion.styles.ts

@@ -63,6 +63,8 @@ export const DivStyled = styled.div`
         ${resetCSS}
         ${fonts.text}
         margin: 0 6px;
+        min-width: 100px;
+        text-align: right;
     }
 
     svg {

src/components/CreditCard/CreditCard.stories.tsx

@@ -0,0 +1,38 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import CreditCard from './CreditCard';
+import React from 'react';
+
+export default {
+    title: 'UI/CreditCard',
+    component: CreditCard,
+} as ComponentMeta<typeof CreditCard>;
+
+const Template: ComponentStory<typeof CreditCard> = (args) => {
+    return <CreditCard {...args} />;
+};
+
+export const Mastercard = Template.bind({});
+Mastercard.args = {
+    id: 'marty-mc-fly-cc-id',
+    isExpired: false,
+    name: 'Marty McFly',
+    type: 'visa',
+    lastDigits: '1177',
+    expiresAt: {
+        month: '04',
+        year: '22',
+    },
+};
+
+export const MastercardExpired = Template.bind({});
+MastercardExpired.args = {
+    id: 'marty-mc-fly-cc-id',
+    isExpired: true,
+    name: 'Marty McFly',
+    type: 'mastercard',
+    lastDigits: '1177',
+    expiresAt: {
+        month: '11',
+        year: '21',
+    },
+};

src/components/CreditCard/CreditCard.styles.ts

@@ -0,0 +1,125 @@
+import styled, { css } from 'styled-components';
+import resetCSS from '../../styles/reset';
+import fonts from '../../styles/fonts';
+import colors, { colorPercentage } from '../../styles/colors';
+import { CreditCardProps } from './types';
+
+type TStyleProps = Pick<CreditCardProps, 'isExpired' | 'pressed'>;
+
+export const DivStyledCreditCard = styled.div<TStyleProps>`
+    ${resetCSS};
+    ${fonts.text};
+    background: linear-gradient(
+            113.54deg,
+            rgba(60, 87, 140, 0.5) 14.91%,
+            rgba(70, 86, 169, 0.5) 43.21%,
+            rgba(125, 150, 217, 0.345) 44.27%,
+            rgba(129, 161, 225, 0.185) 55.76%
+        ),
+        linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
+    border: 2px solid ${colorPercentage(colors.white, 40)};
+    border-radius: 16px;
+    display: grid;
+    gap: 20%;
+    padding: 16px;
+    height: 154px;
+    width: 277px;
+
+    label {
+        height: 10px;
+    }
+
+    ${(p) => (p.isExpired ? expiredStyles : p.pressed ? pressedStyles : '')}
+
+    @keyframes hoverEffect {
+        from {
+            background: linear-gradient(
+                    113.54deg,
+                    rgba(60, 87, 140, 0.5) 18.91%,
+                    rgba(70, 86, 169, 0.5) 44.21%,
+                    rgba(125, 150, 217, 0.345) 48.27%,
+                    rgba(129, 161, 225, 0.185) 55.76%
+                ),
+                linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
+        }
+        from {
+            background: linear-gradient(
+                    113.54deg,
+                    rgba(60, 87, 140, 0.5) 19.91%,
+                    rgba(70, 86, 169, 0.5) 45.21%,
+                    rgba(125, 150, 217, 0.345) 49.27%,
+                    rgba(129, 161, 225, 0.185) 55.76%
+                ),
+                linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
+        }
+        to {
+            background: linear-gradient(
+                    113.54deg,
+                    rgba(60, 87, 140, 0.5) 20.91%,
+                    rgba(70, 86, 169, 0.5) 46.21%,
+                    rgba(125, 150, 217, 0.345) 50.27%,
+                    rgba(129, 161, 225, 0.185) 55.76%
+                ),
+                linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
+        }
+    }
+
+    :hover {
+        animation-name: hoverEffect;
+        animation-duration: 40ms;
+        background: linear-gradient(
+                113.54deg,
+                rgba(60, 87, 140, 0.5) 16.91%,
+                rgba(70, 86, 169, 0.5) 45.21%,
+                rgba(125, 150, 217, 0.345) 52.27%,
+                rgba(129, 161, 225, 0.185) 55.76%
+            ),
+            linear-gradient(151.07deg, #141659 33.25%, #4152a7 98.24%);
+        cursor: pointer;
+    }
+`;
+
+export const DivStyledFlex = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+export const DivStyledFlexText = styled.div`
+    color: white;
+    display: flex;
+    gap: 15px;
+`;
+
+export const DivStyledRemove = styled.div`
+    display: grid;
+    place-items: center;
+
+    :hover {
+        cursor: pointer;
+    }
+`;
+
+export const PStyledDigits = styled.p`
+    ${fonts.semiBold};
+    color: ${colors.white};
+    font-size: 18px;
+    line-height: 24px;
+    margin: 0;
+`;
+
+export const PStyledText = styled.p`
+    ${fonts.semiBold}
+    color: ${colors.white};
+    font-size: 12px;
+    line-height: 16px;
+    margin: 0;
+`;
+
+const expiredStyles = css`
+    border-color: ${colors.red};
+`;
+
+const pressedStyles = css`
+    border-color: ${colors.green};
+`;

src/components/CreditCard/CreditCard.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Radios } from '../Radios';
+import { Icon } from '../Icon';
+import { Logo } from '../Logo';
+import { iconTypes } from '../Icon/collection';
+import colors from '../../styles/colors';
+import { CreditCardProps } from './types';
+import {
+    DivStyledCreditCard,
+    DivStyledFlex,
+    DivStyledFlexText,
+    DivStyledRemove,
+    PStyledDigits,
+    PStyledText,
+} from './CreditCard.styles';
+
+const CreditCard: React.FC<CreditCardProps> = ({
+    expiresAt,
+    id,
+    isExpired,
+    lastDigits,
+    name,
+    onRemove,
+    type,
+}: CreditCardProps) => {
+    const [pressed, setPressed] = useState<boolean>(false);
+
+    return (
+        <DivStyledCreditCard
+            isExpired={isExpired}
+            onClick={() => setPressed(!pressed)}
+            pressed={pressed}
+        >
+            <DivStyledFlex>
+                <Radios
+                    checked={pressed}
+                    id={id || 'radio-credit-card'}
+                    items={['']}
+                    onChange={() => setPressed(!pressed)}
+                />
+                <DivStyledRemove onClick={onRemove}></DivStyledRemove>
+            </DivStyledFlex>
+            <PStyledDigits>{`•••• ${lastDigits}`}</PStyledDigits>
+            <DivStyledFlex>
+                <DivStyledFlexText>
+                    <PStyledText>{name}</PStyledText>
+                    <PStyledText>{`${expiresAt.month} / ${expiresAt.year}`}</PStyledText>
+                </DivStyledFlexText>
+                <Logo size="small" theme={type} />
+            </DivStyledFlex>
+        </DivStyledCreditCard>
+    );
+};
+
+export default CreditCard;

src/components/CreditCard/index.tsx

@@ -0,0 +1,2 @@
+export { default as CreditCard } from './CreditCard';
+export { CreditCardProps } from './types';

src/components/CreditCard/types.ts

@@ -0,0 +1,50 @@
+export interface CreditCardProps {
+    /**
+     * set the id of credit-card
+     */
+    id?: string;
+
+    /**
+     * set date of expiration MM/YY
+     */
+    expiresAt: {
+        /**
+         * 01 -> Jan, 02 -> Feb, ..., 12 -> Dec
+         */
+        month: string;
+        /**
+         * 22 -> 2022 , 23 -> 2023 ..., 40 -> 2040
+         */
+        year: string;
+    };
+
+    /**
+     * set if credit-card is expired
+     */
+    isExpired: boolean;
+
+    /**
+     * last 4 digits of credit-card-number
+     */
+    lastDigits: string | number;
+
+    /**
+     * set full-name of credit-card holder
+     */
+    name: string;
+
+    /**
+     * run function when remove icon is clicked
+     */
+    onRemove?: () => void;
+
+    /**
+     * set pressed
+     */
+    pressed?: boolean;
+
+    /**
+     * set type
+     */
+    type: 'mastercard' | 'visa';
+}

src/components/Icon/collection.tsx

@@ -156,7 +156,6 @@ export enum iconTypes {
 
 const collection = {
     arrowCircleDownIcon,
-    mailIcon,
     arrowCircleLeftIcon,
     arrowCircleRightIcon,
     bellIcon,
@@ -200,6 +199,7 @@ const collection = {
     lockClosedIcon,
     lockOpenIcon,
     logOutIcon,
+    mailIcon,
     maximizeIcon,
     messageCircleIcon,
     minimizeIcon,

src/components/Icon/icons/mastercard.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+const mastercardIcon = (
+    fill: string,
+    size: number,
+    style?: React.CSSProperties,
+) => {
+    return (
+        <svg
+            aria-hidden="true"
+            data-testid="test-icon"
+            fill={fill}
+            height={size}
+            viewBox="0 0 36 32"
+            width={size}
+            xmlns="http://www.w3.org/2000/svg"
+            style={style}
+        >
+            <title>mastercard icon</title>
+            <path
+                d="M21.607 7.61462H12.3606V24.3869H21.607V7.61462Z"
+                fill="#FF5F00"
+            />
+            <path
+                d="M12.9553 16.0003C12.9538 14.385 13.3164 12.7905 14.0157 11.3376C14.7149 9.88471 15.7325 8.61142 16.9913 7.61415C15.4325 6.37731 13.5603 5.60813 11.5888 5.39454C9.61729 5.18095 7.62604 5.53155 5.84263 6.40629C4.05921 7.28103 2.55559 8.64462 1.50362 10.3412C0.451656 12.0377 -0.106201 13.9988 -0.106201 16.0003C-0.106201 18.0017 0.451656 19.9628 1.50362 21.6594C2.55559 23.3559 4.05921 24.7195 5.84263 25.5942C7.62604 26.469 9.61729 26.8196 11.5888 26.606C13.5603 26.3924 15.4325 25.6232 16.9913 24.3864C15.7325 23.3891 14.715 22.1158 14.0157 20.6629C13.3165 19.21 12.9538 17.6156 12.9553 16.0003Z"
+                fill="#EB001B"
+            />
+            <path
+                d="M34.0814 16.0003C34.0815 18.0017 33.5237 19.9628 32.4718 21.6593C31.4199 23.3559 29.9163 24.7195 28.1329 25.5942C26.3495 26.469 24.3583 26.8196 22.3868 26.606C20.4154 26.3924 18.5432 25.6232 16.9844 24.3864C18.2421 23.3881 19.2589 22.1146 19.958 20.6619C20.6572 19.2093 21.0204 17.6153 21.0204 16.0003C21.0204 14.3852 20.6572 12.7913 19.958 11.3386C19.2589 9.88592 18.2421 8.61243 16.9844 7.61415C18.5432 6.3773 20.4154 5.60812 22.3868 5.39454C24.3583 5.18095 26.3495 5.53157 28.1329 6.40632C29.9163 7.28107 31.4199 8.64465 32.4718 10.3412C33.5237 12.0378 34.0815 13.9988 34.0814 16.0003Z"
+                fill="#F79E1B"
+            />
+            <path
+                d="M33.0867 22.6121V22.2688H33.2238V22.1988H32.8745V22.2688H33.0117V22.6121H33.0867ZM33.7649 22.6121V22.1981H33.6578L33.5347 22.4829L33.4115 22.1981H33.3043V22.6121H33.3799V22.2998L33.4954 22.5691H33.5738L33.6893 22.2992V22.6121H33.7649Z"
+                fill="#F79E1B"
+            />
+        </svg>
+    );
+};
+
+export default mastercardIcon;

src/components/Icon/icons/visa.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const visaIcon = (fill: string, size: number, style?: React.CSSProperties) => {
+    return (
+        <svg
+            aria-hidden="true"
+            data-testid="test-icon"
+            fill="none"
+            height={size}
+            viewBox="0 0 46 24"
+            width={size}
+            xmlns="http://www.w3.org/2000/svg"
+            style={style}
+        >
+            <title>visa icon</title>
+            <path
+                d="M23.2729 12.8118C23.2473 14.9083 25.0769 16.0784 26.4552 16.7739C27.8713 17.4877 28.3469 17.9454 28.3415 18.5835C28.3307 19.5604 27.2119 19.9915 26.1646 20.0083C24.3377 20.0377 23.2756 19.4974 22.4311 19.0888L21.773 22.2784C22.6203 22.6828 24.1891 23.0355 25.816 23.0509C29.6347 23.0509 32.1332 21.0985 32.1467 18.0713C32.1616 14.2295 27.0159 14.0168 27.0511 12.2996C27.0632 11.7789 27.5429 11.2233 28.5942 11.082C29.1145 11.0106 30.5509 10.956 32.1791 11.7328L32.8183 8.64675C31.9427 8.31646 30.8171 8.00016 29.4158 8.00016C25.8214 8.00016 23.2932 9.97912 23.2729 12.8118ZM38.9598 8.26607C38.2626 8.26607 37.6748 8.68734 37.4126 9.33393L31.9575 22.8242H35.7735L36.5329 20.6507H41.1962L41.6367 22.8242H45L42.065 8.26607H38.9598ZM39.4936 12.1988L40.5949 17.6654H37.5788L39.4936 12.1988ZM18.6462 8.26607L15.6382 22.8242H19.2745L22.2811 8.26607H18.6462ZM13.2668 8.26607L9.48186 18.1749L7.95087 9.7496C7.77115 8.8091 7.06174 8.26607 6.27395 8.26607H0.0864813L0 8.68874C1.27019 8.97425 2.71335 9.4347 3.58762 9.92734C4.12273 10.2282 4.27542 10.4914 4.45108 11.2065L7.35091 22.8242H11.1939L17.0855 8.26607H13.2668Z"
+                fill={fill}
+            />
+        </svg>
+    );
+};
+
+export default visaIcon;

src/components/Illustrations/index.tsx

@@ -1,2 +1,2 @@
-export { default as Illustration } from "./Illustration";
-export { IllustrationProps } from "./types";
+export { default as Illustration } from './Illustration';
+export type { IllustrationProps } from './types';

src/components/Illustrations/types.ts

@@ -21,8 +21,8 @@ export const logoState = [
     'marketplace',
 ] as const;
 export type Logo = typeof logoState[number];
-
 export type Size = number | string;
+
 export interface IllustrationProps {
     id?: string;