From 793f604ec53d488cb7610ee8c806fed41628d255 Mon Sep 17 00:00:00 2001 From: Loco The Dev <89942527+locothedev@users.noreply.github.com> Date: Tue, 11 Jan 2022 21:12:49 +0100 Subject: [PATCH 01/10] feat(CreditCard): init commit --- .../CreditCard/CreditCard.stories.tsx | 34 ++++++++++++ .../CreditCard/CreditCard.styles.ts | 54 +++++++++++++++++++ src/components/CreditCard/CreditCard.tsx | 49 +++++++++++++++++ .../CreditCard/Icons/mastercard.tsx | 21 ++++++++ src/components/CreditCard/Icons/visa.tsx | 11 ++++ src/components/CreditCard/types.ts | 41 ++++++++++++++ src/styles/fonts.ts | 10 ++-- 7 files changed, 215 insertions(+), 5 deletions(-) create mode 100644 src/components/CreditCard/CreditCard.stories.tsx create mode 100644 src/components/CreditCard/CreditCard.styles.ts create mode 100644 src/components/CreditCard/CreditCard.tsx create mode 100644 src/components/CreditCard/Icons/mastercard.tsx create mode 100644 src/components/CreditCard/Icons/visa.tsx create mode 100644 src/components/CreditCard/types.ts diff --git a/src/components/CreditCard/CreditCard.stories.tsx b/src/components/CreditCard/CreditCard.stories.tsx new file mode 100644 index 000000000..1a46f40c0 --- /dev/null +++ b/src/components/CreditCard/CreditCard.stories.tsx @@ -0,0 +1,34 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import CreditCard from "./CreditCard"; +import React from 'react' + +export default { + title: "UI/CreditCard", + component: CreditCard, +} as ComponentMeta; + +const Template: ComponentStory = (args) => { + return ( + + ) +} + +export const Mastercard = Template.bind({}); +Mastercard.args = { + id: "marty-mc-fly-cc-id", + isExpired: false, + name: "Marty McFly", + type: "mastercard", + lastDigits: "1177", + expiresAt: "04/22" +} + +export const MastercardExpired = Template.bind({}); +MastercardExpired.args = { + id: "marty-mc-fly-cc-id", + isExpired: true, + name: "Marty McFly", + type: "mastercard", + lastDigits: "1177", + expiresAt: "04/22" +} \ No newline at end of file diff --git a/src/components/CreditCard/CreditCard.styles.ts b/src/components/CreditCard/CreditCard.styles.ts new file mode 100644 index 000000000..32d75e726 --- /dev/null +++ b/src/components/CreditCard/CreditCard.styles.ts @@ -0,0 +1,54 @@ +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"; + +export const CreditCardStyled = styled.div>` + ${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; + ${(p) => p.isExpired ? expiredStyles : p.pressed ? pressedStyles : ""} + :hover { + cursor: pointer; + } +` + +export const RemoveIcon = styled.div` + display: grid; + place-items: center; + :hover{ + cursor: pointer; + } +` + +export const LastDigitsStyled = styled.p` + ${fonts.semiBold}; + color: ${colors.white}; + font-size: 18px; + line-height: 24px; + margin: 0; +` + +export const TextStyled = 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}; +` \ No newline at end of file diff --git a/src/components/CreditCard/CreditCard.tsx b/src/components/CreditCard/CreditCard.tsx new file mode 100644 index 000000000..c3fc74767 --- /dev/null +++ b/src/components/CreditCard/CreditCard.tsx @@ -0,0 +1,49 @@ +import {CreditCardProps} from "./types"; +import React, {useState} from "react"; +import {CreditCardStyled, LastDigitsStyled, RemoveIcon, TextStyled} from "./CreditCard.styles"; +import {Radios} from "../Radios"; +import {Icon} from "../Icon"; +import colors from "../../styles/colors"; +import {iconTypes} from "../Icon/collection"; +import mastercard from "./Icons/mastercard"; +import visa from "./Icons/visa"; + +const getBrand = (brand: "mastercard" | "visa") => { + switch (brand) { + case "mastercard": + return mastercard(); + case "visa": + return visa(); + } +} + +const CreditCard: React.FC = ({ + id, + expiresAt, + isExpired, + lastDigits, + name, + type, +}: CreditCardProps) => { + const [pressed, setPressed] = useState(false) + return ( + setPressed(!pressed)} pressed={pressed}> +
+ {}} /> + {}}> + + +
+ {`•••• ${lastDigits}`} +
+
+ {name} + {expiresAt} +
+ {getBrand(type)} +
+ + ) +} + +export default CreditCard; \ No newline at end of file diff --git a/src/components/CreditCard/Icons/mastercard.tsx b/src/components/CreditCard/Icons/mastercard.tsx new file mode 100644 index 000000000..82873e876 --- /dev/null +++ b/src/components/CreditCard/Icons/mastercard.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +const mastercard = () => { + return ( + + + + + + + + + + + + + + ) +} + +export default mastercard; \ No newline at end of file diff --git a/src/components/CreditCard/Icons/visa.tsx b/src/components/CreditCard/Icons/visa.tsx new file mode 100644 index 000000000..36be40c37 --- /dev/null +++ b/src/components/CreditCard/Icons/visa.tsx @@ -0,0 +1,11 @@ +import React from "react"; + +const visa = () => { + return ( + + + + ) +} + +export default visa; \ No newline at end of file diff --git a/src/components/CreditCard/types.ts b/src/components/CreditCard/types.ts new file mode 100644 index 000000000..adde9ccb2 --- /dev/null +++ b/src/components/CreditCard/types.ts @@ -0,0 +1,41 @@ +export interface CreditCardProps { + /** + * set the id of credit-card + */ + id?: string; + + /** + * set date of expiration MM/YY + */ + expiresAt: 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" +} \ No newline at end of file diff --git a/src/styles/fonts.ts b/src/styles/fonts.ts index 60c5604a6..03c829989 100644 --- a/src/styles/fonts.ts +++ b/src/styles/fonts.ts @@ -9,7 +9,7 @@ const heading = css` font-size: 36px; font-style: normal; font-weight: 600; - letter-spacing: 0px; + letter-spacing: 0; `; const h1 = css` @@ -40,7 +40,7 @@ const h5 = css` `; const ibm = css` - font-family: IBM Plex Mono; + font-family: IBM Plex Mono, sans-serif; font-size: 16px; font-style: normal; `; @@ -53,7 +53,7 @@ const text = css` font-size: 16px; font-style: normal; font-weight: 400; - letter-spacing: 0em; + letter-spacing: 0; line-height: 24px; `; @@ -72,12 +72,12 @@ const textBold700 = css` const textSmall = css` font-size: 14px; font-weight: 400; - letter-spacing: 0px; + letter-spacing: 0; line-height: 24px; `; const semiBold = css` - ${text} + ${text}; font-weight: 600; `; From 50be9eb8121bafb4db3cf552b00f8d3cfc21c3fb Mon Sep 17 00:00:00 2001 From: Loco The Dev <89942527+locothedev@users.noreply.github.com> Date: Wed, 12 Jan 2022 14:31:34 +0100 Subject: [PATCH 02/10] feat(CreditCard): before final --- src/components/CreditCard/CreditCard.stories.tsx | 10 ++++++++-- src/components/CreditCard/CreditCard.styles.ts | 11 +++++++++++ src/components/CreditCard/CreditCard.tsx | 5 +++-- src/components/CreditCard/index.tsx | 2 ++ src/components/CreditCard/types.ts | 11 ++++++++++- 5 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 src/components/CreditCard/index.tsx diff --git a/src/components/CreditCard/CreditCard.stories.tsx b/src/components/CreditCard/CreditCard.stories.tsx index 1a46f40c0..7c36347c3 100644 --- a/src/components/CreditCard/CreditCard.stories.tsx +++ b/src/components/CreditCard/CreditCard.stories.tsx @@ -20,7 +20,10 @@ Mastercard.args = { name: "Marty McFly", type: "mastercard", lastDigits: "1177", - expiresAt: "04/22" + expiresAt: { + month: "04", + year: "22" + } } export const MastercardExpired = Template.bind({}); @@ -30,5 +33,8 @@ MastercardExpired.args = { name: "Marty McFly", type: "mastercard", lastDigits: "1177", - expiresAt: "04/22" + expiresAt: { + month: "11", + year: "21" + } } \ No newline at end of file diff --git a/src/components/CreditCard/CreditCard.styles.ts b/src/components/CreditCard/CreditCard.styles.ts index 32d75e726..1357a6f6e 100644 --- a/src/components/CreditCard/CreditCard.styles.ts +++ b/src/components/CreditCard/CreditCard.styles.ts @@ -16,7 +16,18 @@ export const CreditCardStyled = styled.div 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: 4ms; + 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; } ` diff --git a/src/components/CreditCard/CreditCard.tsx b/src/components/CreditCard/CreditCard.tsx index c3fc74767..7e9b74b05 100644 --- a/src/components/CreditCard/CreditCard.tsx +++ b/src/components/CreditCard/CreditCard.tsx @@ -22,6 +22,7 @@ const CreditCard: React.FC = ({ expiresAt, isExpired, lastDigits, + onRemove, name, type, }: CreditCardProps) => { @@ -30,7 +31,7 @@ const CreditCard: React.FC = ({ setPressed(!pressed)} pressed={pressed}>
{}} /> - {}}> +
@@ -38,7 +39,7 @@ const CreditCard: React.FC = ({
{name} - {expiresAt} + {`${expiresAt.month} / ${expiresAt.year}`}
{getBrand(type)}
diff --git a/src/components/CreditCard/index.tsx b/src/components/CreditCard/index.tsx new file mode 100644 index 000000000..efabefd12 --- /dev/null +++ b/src/components/CreditCard/index.tsx @@ -0,0 +1,2 @@ +export { default as CreditCard } from './CreditCard'; +export { CreditCardProps } from './types'; \ No newline at end of file diff --git a/src/components/CreditCard/types.ts b/src/components/CreditCard/types.ts index adde9ccb2..a2dc3a720 100644 --- a/src/components/CreditCard/types.ts +++ b/src/components/CreditCard/types.ts @@ -7,7 +7,16 @@ export interface CreditCardProps { /** * set date of expiration MM/YY */ - expiresAt: string; + expiresAt: { + /** + * 01 -> Jan, 02 -> Feb, ..., 12 -> Dec + */ + month: string, + /** + * 22 -> 2022 , 23 -> 2023 ..., 40 -> 2040 + */ + year: string; + } /** * set if credit-card is expired From 6dc3ed2397b142b29ff1038bb17e05c3f54b0313 Mon Sep 17 00:00:00 2001 From: BillyG83 Date: Mon, 24 Jan 2022 21:31:09 +0100 Subject: [PATCH 03/10] feat(Radios): added checked by default --- src/components/Radios/Radios.stories.tsx | 17 +++++++++++++++++ src/components/Radios/Radios.test.tsx | 2 ++ src/components/Radios/Radios.tsx | 5 ++++- src/components/Radios/types.tsx | 10 ++++++++++ 4 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/components/Radios/Radios.stories.tsx b/src/components/Radios/Radios.stories.tsx index 813245133..e4b2b0d3c 100644 --- a/src/components/Radios/Radios.stories.tsx +++ b/src/components/Radios/Radios.stories.tsx @@ -37,3 +37,20 @@ RadiosWithLongText.args = { ], title: 'What is your favorite bitCoin quote of 2021?', }; + +export const RadiosSetDefault = Template.bind({}); +RadiosSetDefault.args = { + id: 'radios', + items: ['Charmander', 'Squirtle', 'Bulbasaur', 'Pikachu'], + title: "Who's that Pokemon?", + checked: true, +}; + +export const RadiosSetParticular = Template.bind({}); +RadiosSetParticular.args = { + id: 'radios', + items: ['Charmander', 'Squirtle', 'Bulbasaur', 'Pikachu'], + title: "Who's that Pokemon?", + checked: true, + setWhichIsChecked: 2, +}; diff --git a/src/components/Radios/Radios.test.tsx b/src/components/Radios/Radios.test.tsx index 637b988b3..72434e07f 100644 --- a/src/components/Radios/Radios.test.tsx +++ b/src/components/Radios/Radios.test.tsx @@ -294,3 +294,5 @@ describe('Radios - RadiosWithLongText', () => { expect(testEvent).toHaveBeenCalledWith(input); }); }); + +// TODO @bill add tests for SetDefault and SetParticular diff --git a/src/components/Radios/Radios.tsx b/src/components/Radios/Radios.tsx index ee6d205c7..321fd3549 100644 --- a/src/components/Radios/Radios.tsx +++ b/src/components/Radios/Radios.tsx @@ -20,11 +20,13 @@ const RadioButtonStyled = styled.input` `; const Radios: React.FC = ({ + checked, id, items, onChange, - validation, + setWhichIsChecked = 0, title, + validation, }) => { const formattedID = id.replace(/\s/g, '-'); @@ -37,6 +39,7 @@ const Radios: React.FC = ({ {items.map((value, i) => ( ) => void; + /** + * you can have a radio checked by default, it always checks the first (position 0) unless you pass a valid array position to setWhichIsChecked + */ + checked?: boolean; + + /** + * if checked is set to true but you don't want to check the first radio, you can pass an array position number here. Note this should not be greater or less than the array.length + */ + setWhichIsChecked?: number; + /** * You can validate your radios */ From 7de00a7a751acab36955058d507a7591ea2652a0 Mon Sep 17 00:00:00 2001 From: BillyG83 Date: Mon, 24 Jan 2022 21:32:05 +0100 Subject: [PATCH 04/10] feat(CreditCard): added Radio, aligned markup, minor fixes --- .../CreditCard/CreditCard.styles.ts | 174 ++++++++++++------ src/components/CreditCard/CreditCard.tsx | 85 +++++---- 2 files changed, 168 insertions(+), 91 deletions(-) diff --git a/src/components/CreditCard/CreditCard.styles.ts b/src/components/CreditCard/CreditCard.styles.ts index 1357a6f6e..49fa812a9 100644 --- a/src/components/CreditCard/CreditCard.styles.ts +++ b/src/components/CreditCard/CreditCard.styles.ts @@ -1,65 +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"; +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'; -export const CreditCardStyled = styled.div>` - ${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; - ${(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: 4ms; - 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; - } -` +type TStyleProps = Pick; -export const RemoveIcon = styled.div` - display: grid; - place-items: center; - :hover{ - cursor: pointer; - } -` +export const DivStyledCreditCard = styled.div` + ${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; -export const LastDigitsStyled = styled.p` - ${fonts.semiBold}; - color: ${colors.white}; - font-size: 18px; - line-height: 24px; - margin: 0; -` + label { + height: 10px; + } -export const TextStyled = styled.p` - ${fonts.semiBold} - color: ${colors.white};; - font-size: 12px; - line-height: 16px; - margin: 0; -` + ${(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}; -` + border-color: ${colors.red}; +`; const pressedStyles = css` - border-color: ${colors.green}; -` \ No newline at end of file + border-color: ${colors.green}; +`; diff --git a/src/components/CreditCard/CreditCard.tsx b/src/components/CreditCard/CreditCard.tsx index 7e9b74b05..ab48c57b7 100644 --- a/src/components/CreditCard/CreditCard.tsx +++ b/src/components/CreditCard/CreditCard.tsx @@ -1,50 +1,67 @@ -import {CreditCardProps} from "./types"; -import React, {useState} from "react"; -import {CreditCardStyled, LastDigitsStyled, RemoveIcon, TextStyled} from "./CreditCard.styles"; -import {Radios} from "../Radios"; -import {Icon} from "../Icon"; -import colors from "../../styles/colors"; -import {iconTypes} from "../Icon/collection"; -import mastercard from "./Icons/mastercard"; -import visa from "./Icons/visa"; +import React, { useState } from 'react'; +import { Radios } from '../Radios'; +import { Icon } from '../Icon'; +import { iconTypes } from '../Icon/collection'; +import mastercard from './Icons/mastercard'; +import visa from './Icons/visa'; +import colors from '../../styles/colors'; +import { CreditCardProps } from './types'; +import { + DivStyledCreditCard, + DivStyledFlex, + DivStyledFlexText, + DivStyledRemove, + PStyledDigits, + PStyledText, +} from './CreditCard.styles'; -const getBrand = (brand: "mastercard" | "visa") => { +const getBrand = (brand: 'mastercard' | 'visa') => { switch (brand) { - case "mastercard": + case 'mastercard': return mastercard(); - case "visa": + case 'visa': return visa(); } -} +}; const CreditCard: React.FC = ({ - id, expiresAt, + id, isExpired, lastDigits, - onRemove, name, + onRemove, type, }: CreditCardProps) => { - const [pressed, setPressed] = useState(false) + const [pressed, setPressed] = useState(false); + return ( - setPressed(!pressed)} pressed={pressed}> -
- {}} /> - - - -
- {`•••• ${lastDigits}`} -
-
- {name} - {`${expiresAt.month} / ${expiresAt.year}`} -
+ setPressed(!pressed)} + pressed={pressed} + > + + setPressed(!pressed)} + /> + + + + + {`•••• ${lastDigits}`} + + + {name} + {`${expiresAt.month} / ${expiresAt.year}`} + {getBrand(type)} -
- - ) -} + + + ); +}; -export default CreditCard; \ No newline at end of file +export default CreditCard; From b35cba683320b9f9a4c351bfaab304e8b0eb0bb1 Mon Sep 17 00:00:00 2001 From: BillyG83 Date: Tue, 25 Jan 2022 11:11:18 +0100 Subject: [PATCH 05/10] fix(Accordion): minor responsive fix --- src/components/Accordion/Accordion.styles.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Accordion/Accordion.styles.ts b/src/components/Accordion/Accordion.styles.ts index cf3b9bb88..da6e4454b 100644 --- a/src/components/Accordion/Accordion.styles.ts +++ b/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 { From 791d1da397d568cf985ffb7fcef29ed4905af56d Mon Sep 17 00:00:00 2001 From: BillyG83 Date: Tue, 25 Jan 2022 11:11:59 +0100 Subject: [PATCH 06/10] feat(Icon): added mastercard and visa logo icons --- src/components/Icon/Icon.tsx | 4 +++ src/components/Icon/collection.tsx | 8 ++++- src/components/Icon/icons/mastercard.tsx | 40 ++++++++++++++++++++++++ src/components/Icon/icons/visa.tsx | 24 ++++++++++++++ 4 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 src/components/Icon/icons/mastercard.tsx create mode 100644 src/components/Icon/icons/visa.tsx diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index ba3bd8309..25abaaec5 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -105,6 +105,8 @@ const Icon: React.FC = ({ return collection?.logOutIcon(fill, size, style); case 'mail': return collection?.mailIcon(fill, size, style); + case 'mastercard': + return collection?.mastercardIcon(fill, size, style); case 'maximize': return collection?.maximizeIcon(fill, size, style); case 'message circle': @@ -159,6 +161,8 @@ const Icon: React.FC = ({ return collection?.updateIcon(fill, size, style); case 'user': return collection?.userIcon(fill, size, style); + case 'visa': + return collection?.visaIcon(fill, size, style); case 'windows': return collection?.windowsIcon(fill, size, style); case 'x circle': diff --git a/src/components/Icon/collection.tsx b/src/components/Icon/collection.tsx index 72c898220..c9bb5ee68 100644 --- a/src/components/Icon/collection.tsx +++ b/src/components/Icon/collection.tsx @@ -43,6 +43,7 @@ import lockClosedIcon from './icons/lock-closed'; import lockOpenIcon from './icons/lock-open'; import logOutIcon from './icons/log-out'; import mailIcon from './icons/mail'; +import mastercardIcon from './icons/mastercard'; import maximizeIcon from './icons/maximize'; import messageCircleIcon from './icons/message-circle'; import minimizeIcon from './icons/minimize'; @@ -70,6 +71,7 @@ import triangleUpIcon from './icons/triangle-up'; import twitterIcon from './icons/twitter'; import updateIcon from './icons/update'; import userIcon from './icons/user'; +import visaIcon from './icons/visa'; import windowsIcon from './icons/windows'; import xCircleIcon from './icons/x-circle'; import xIcon from './icons/x'; @@ -121,6 +123,7 @@ export enum iconTypes { lockOpen = 'lock open', logOut = 'log out', mail = 'mail', + mastercard = 'mastercard', maximize = 'maximize', messageCircle = 'message circle', minimize = 'minimize', @@ -148,6 +151,7 @@ export enum iconTypes { twitter = 'twitter', update = 'update', user = 'user', + visa = 'visa', windows = 'windows', xCircle = 'x circle', x = 'x', @@ -156,7 +160,6 @@ export enum iconTypes { const collection = { arrowCircleDownIcon, - mailIcon, arrowCircleLeftIcon, arrowCircleRightIcon, bellIcon, @@ -200,6 +203,8 @@ const collection = { lockClosedIcon, lockOpenIcon, logOutIcon, + mailIcon, + mastercardIcon, maximizeIcon, messageCircleIcon, minimizeIcon, @@ -227,6 +232,7 @@ const collection = { twitterIcon, updateIcon, userIcon, + visaIcon, windowsIcon, xCircleIcon, xIcon, diff --git a/src/components/Icon/icons/mastercard.tsx b/src/components/Icon/icons/mastercard.tsx new file mode 100644 index 000000000..d88813b4f --- /dev/null +++ b/src/components/Icon/icons/mastercard.tsx @@ -0,0 +1,40 @@ +import React from 'react'; + +const mastercardIcon = ( + fill: string, + size: number, + style?: React.CSSProperties, +) => { + return ( + + ); +}; + +export default mastercardIcon; diff --git a/src/components/Icon/icons/visa.tsx b/src/components/Icon/icons/visa.tsx new file mode 100644 index 000000000..69876cb1e --- /dev/null +++ b/src/components/Icon/icons/visa.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +const visaIcon = (fill: string, size: number, style?: React.CSSProperties) => { + return ( + + ); +}; + +export default visaIcon; From 9d805383f6c6138f1bad5c98ad736ea2738c161e Mon Sep 17 00:00:00 2001 From: BillyG83 Date: Tue, 25 Jan 2022 11:12:29 +0100 Subject: [PATCH 07/10] fix(CreditCard): using centralised icons for CC logos --- .../CreditCard/CreditCard.stories.tsx | 46 +++++++++---------- src/components/CreditCard/CreditCard.tsx | 25 ++++------ .../CreditCard/Icons/mastercard.tsx | 21 --------- src/components/CreditCard/Icons/visa.tsx | 11 ----- src/components/CreditCard/index.tsx | 2 +- src/components/CreditCard/types.ts | 8 ++-- 6 files changed, 37 insertions(+), 76 deletions(-) delete mode 100644 src/components/CreditCard/Icons/mastercard.tsx delete mode 100644 src/components/CreditCard/Icons/visa.tsx diff --git a/src/components/CreditCard/CreditCard.stories.tsx b/src/components/CreditCard/CreditCard.stories.tsx index 7c36347c3..72670b94d 100644 --- a/src/components/CreditCard/CreditCard.stories.tsx +++ b/src/components/CreditCard/CreditCard.stories.tsx @@ -1,40 +1,38 @@ -import { ComponentStory, ComponentMeta } from "@storybook/react"; -import CreditCard from "./CreditCard"; -import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import CreditCard from './CreditCard'; +import React from 'react'; export default { - title: "UI/CreditCard", + title: 'UI/CreditCard', component: CreditCard, } as ComponentMeta; const Template: ComponentStory = (args) => { - return ( - - ) -} + return ; +}; export const Mastercard = Template.bind({}); Mastercard.args = { - id: "marty-mc-fly-cc-id", + id: 'marty-mc-fly-cc-id', isExpired: false, - name: "Marty McFly", - type: "mastercard", - lastDigits: "1177", + name: 'Marty McFly', + type: 'visa', + lastDigits: '1177', expiresAt: { - month: "04", - year: "22" - } -} + month: '04', + year: '22', + }, +}; export const MastercardExpired = Template.bind({}); MastercardExpired.args = { - id: "marty-mc-fly-cc-id", + id: 'marty-mc-fly-cc-id', isExpired: true, - name: "Marty McFly", - type: "mastercard", - lastDigits: "1177", + name: 'Marty McFly', + type: 'mastercard', + lastDigits: '1177', expiresAt: { - month: "11", - year: "21" - } -} \ No newline at end of file + month: '11', + year: '21', + }, +}; diff --git a/src/components/CreditCard/CreditCard.tsx b/src/components/CreditCard/CreditCard.tsx index ab48c57b7..2552579eb 100644 --- a/src/components/CreditCard/CreditCard.tsx +++ b/src/components/CreditCard/CreditCard.tsx @@ -2,8 +2,6 @@ import React, { useState } from 'react'; import { Radios } from '../Radios'; import { Icon } from '../Icon'; import { iconTypes } from '../Icon/collection'; -import mastercard from './Icons/mastercard'; -import visa from './Icons/visa'; import colors from '../../styles/colors'; import { CreditCardProps } from './types'; import { @@ -15,15 +13,6 @@ import { PStyledText, } from './CreditCard.styles'; -const getBrand = (brand: 'mastercard' | 'visa') => { - switch (brand) { - case 'mastercard': - return mastercard(); - case 'visa': - return visa(); - } -}; - const CreditCard: React.FC = ({ expiresAt, id, @@ -48,9 +37,7 @@ const CreditCard: React.FC = ({ items={['']} onChange={() => setPressed(!pressed)} /> - - - + {`•••• ${lastDigits}`} @@ -58,7 +45,15 @@ const CreditCard: React.FC = ({ {name} {`${expiresAt.month} / ${expiresAt.year}`} - {getBrand(type)} + ); diff --git a/src/components/CreditCard/Icons/mastercard.tsx b/src/components/CreditCard/Icons/mastercard.tsx deleted file mode 100644 index 82873e876..000000000 --- a/src/components/CreditCard/Icons/mastercard.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; - -const mastercard = () => { - return ( - - - - - - - - - - - - - - ) -} - -export default mastercard; \ No newline at end of file diff --git a/src/components/CreditCard/Icons/visa.tsx b/src/components/CreditCard/Icons/visa.tsx deleted file mode 100644 index 36be40c37..000000000 --- a/src/components/CreditCard/Icons/visa.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; - -const visa = () => { - return ( - - - - ) -} - -export default visa; \ No newline at end of file diff --git a/src/components/CreditCard/index.tsx b/src/components/CreditCard/index.tsx index efabefd12..70b3e6350 100644 --- a/src/components/CreditCard/index.tsx +++ b/src/components/CreditCard/index.tsx @@ -1,2 +1,2 @@ export { default as CreditCard } from './CreditCard'; -export { CreditCardProps } from './types'; \ No newline at end of file +export { CreditCardProps } from './types'; diff --git a/src/components/CreditCard/types.ts b/src/components/CreditCard/types.ts index a2dc3a720..3f015d8c1 100644 --- a/src/components/CreditCard/types.ts +++ b/src/components/CreditCard/types.ts @@ -11,12 +11,12 @@ export interface CreditCardProps { /** * 01 -> Jan, 02 -> Feb, ..., 12 -> Dec */ - month: string, + month: string; /** * 22 -> 2022 , 23 -> 2023 ..., 40 -> 2040 */ year: string; - } + }; /** * set if credit-card is expired @@ -46,5 +46,5 @@ export interface CreditCardProps { /** * set type */ - type: "mastercard" | "visa" -} \ No newline at end of file + type: 'mastercard' | 'visa'; +} From 79c7bfae4055c323850e74fab637410b90d26891 Mon Sep 17 00:00:00 2001 From: BillyG83 Date: Tue, 25 Jan 2022 11:36:27 +0100 Subject: [PATCH 08/10] fix(Icon): removing visa and mastercard --- src/components/Icon/Icon.tsx | 4 ---- src/components/Icon/collection.tsx | 6 ------ 2 files changed, 10 deletions(-) diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 25abaaec5..ba3bd8309 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -105,8 +105,6 @@ const Icon: React.FC = ({ return collection?.logOutIcon(fill, size, style); case 'mail': return collection?.mailIcon(fill, size, style); - case 'mastercard': - return collection?.mastercardIcon(fill, size, style); case 'maximize': return collection?.maximizeIcon(fill, size, style); case 'message circle': @@ -161,8 +159,6 @@ const Icon: React.FC = ({ return collection?.updateIcon(fill, size, style); case 'user': return collection?.userIcon(fill, size, style); - case 'visa': - return collection?.visaIcon(fill, size, style); case 'windows': return collection?.windowsIcon(fill, size, style); case 'x circle': diff --git a/src/components/Icon/collection.tsx b/src/components/Icon/collection.tsx index c9bb5ee68..c8cb9690b 100644 --- a/src/components/Icon/collection.tsx +++ b/src/components/Icon/collection.tsx @@ -43,7 +43,6 @@ import lockClosedIcon from './icons/lock-closed'; import lockOpenIcon from './icons/lock-open'; import logOutIcon from './icons/log-out'; import mailIcon from './icons/mail'; -import mastercardIcon from './icons/mastercard'; import maximizeIcon from './icons/maximize'; import messageCircleIcon from './icons/message-circle'; import minimizeIcon from './icons/minimize'; @@ -71,7 +70,6 @@ import triangleUpIcon from './icons/triangle-up'; import twitterIcon from './icons/twitter'; import updateIcon from './icons/update'; import userIcon from './icons/user'; -import visaIcon from './icons/visa'; import windowsIcon from './icons/windows'; import xCircleIcon from './icons/x-circle'; import xIcon from './icons/x'; @@ -123,7 +121,6 @@ export enum iconTypes { lockOpen = 'lock open', logOut = 'log out', mail = 'mail', - mastercard = 'mastercard', maximize = 'maximize', messageCircle = 'message circle', minimize = 'minimize', @@ -151,7 +148,6 @@ export enum iconTypes { twitter = 'twitter', update = 'update', user = 'user', - visa = 'visa', windows = 'windows', xCircle = 'x circle', x = 'x', @@ -204,7 +200,6 @@ const collection = { lockOpenIcon, logOutIcon, mailIcon, - mastercardIcon, maximizeIcon, messageCircleIcon, minimizeIcon, @@ -232,7 +227,6 @@ const collection = { twitterIcon, updateIcon, userIcon, - visaIcon, windowsIcon, xCircleIcon, xIcon, From ded95344fb5e6c799c37d2e7a47c803a3a3e9947 Mon Sep 17 00:00:00 2001 From: BillyG83 Date: Tue, 25 Jan 2022 11:36:52 +0100 Subject: [PATCH 09/10] fix(CreditCard): use logo for logos --- src/components/CreditCard/CreditCard.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/CreditCard/CreditCard.tsx b/src/components/CreditCard/CreditCard.tsx index 2552579eb..a2dc0b7c0 100644 --- a/src/components/CreditCard/CreditCard.tsx +++ b/src/components/CreditCard/CreditCard.tsx @@ -1,6 +1,7 @@ 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'; @@ -45,15 +46,7 @@ const CreditCard: React.FC = ({ {name} {`${expiresAt.month} / ${expiresAt.year}`} - + ); From 305c7fb21d381f56705280655d5bce66fb48a182 Mon Sep 17 00:00:00 2001 From: BillyG83 Date: Tue, 25 Jan 2022 11:48:00 +0100 Subject: [PATCH 10/10] fix(Illustration): minor warning fixed by using type --- src/components/Illustrations/index.tsx | 4 ++-- src/components/Illustrations/types.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Illustrations/index.tsx b/src/components/Illustrations/index.tsx index 5c696244b..0378c1186 100644 --- a/src/components/Illustrations/index.tsx +++ b/src/components/Illustrations/index.tsx @@ -1,2 +1,2 @@ -export { default as Illustration } from "./Illustration"; -export { IllustrationProps } from "./types"; \ No newline at end of file +export { default as Illustration } from './Illustration'; +export type { IllustrationProps } from './types'; diff --git a/src/components/Illustrations/types.ts b/src/components/Illustrations/types.ts index f400a3a60..2f0872daa 100644 --- a/src/components/Illustrations/types.ts +++ b/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;