25 | {children}
26 |
;
27 | };
28 |
29 | export default Card;
30 |
--------------------------------------------------------------------------------
/src/Card/styles.module.scss:
--------------------------------------------------------------------------------
1 | .card {
2 | position: relative;
3 | max-width: 100%;
4 | width: 250px;
5 | min-width: 250px;
6 | min-height: 350px;
7 | display: flex;
8 | flex-flow: column;
9 | background-color: #ecf0f1;
10 | border-radius: 0.25rem;
11 | margin: 1rem;
12 | user-select: none;
13 | transition: 0.25s;
14 |
15 | &.float:hover {
16 | transform: translateY(-8px);
17 | box-shadow: 0 10px 10px -10px rgba(#7f8c8d, 1);
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/CryptoCard/CryptoChart/config.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-anonymous-default-export */
2 | export default {
3 | datasets: {
4 | borderColor: 'rgba(241, 196, 15, 1)',
5 | borderCapStyle: 'round',
6 | borderJoinStyle: 'round',
7 | lineTension: 0.4,
8 | xAxisId: 'x-0',
9 | yAxisID: 'y-0',
10 | pointRadius: 0,
11 | pointHoverRadius: 0,
12 | fill: true,
13 | showLine: true
14 | },
15 | options: {
16 | legend: {
17 | display: false
18 | },
19 | tooltip: {
20 | enabled: false
21 | },
22 | scales: {
23 | yAxes: [
24 | {
25 | id: 'y-0',
26 | display: false,
27 | type: 'linear',
28 | gridLines: {
29 | display: false
30 | }
31 | }
32 | ],
33 | xAxes: [
34 | {
35 | id: 'x-0',
36 | display: false,
37 | gridLines: {
38 | display: false
39 | }
40 | }
41 | ]
42 | },
43 | responsive: true
44 | }
45 |
46 | };
47 |
--------------------------------------------------------------------------------
/src/CryptoCard/CryptoChart/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Line } from 'react-chartjs-2';
3 |
4 | import config from './config';
5 | import styles from './styles.module.scss';
6 |
7 | export type CryptoChartProps = {
8 | chartColor?: string;
9 | chartData: number[];
10 | }
11 |
12 | const CryptoChart: React.FC
42 |
48 | );
49 | }
50 |
51 | export default CryptoChart;
52 |
--------------------------------------------------------------------------------
/src/CryptoCard/CryptoChart/styles.module.scss:
--------------------------------------------------------------------------------
1 | .crypto-chart {
2 | position: absolute;
3 | bottom: 0;
4 | right: 0;
5 | left: 0;
6 | top: 40%;
7 | display: flex;
8 | width: 100%;
9 |
10 | canvas {
11 | height: 100% !important;
12 | width: 100% !important;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/CryptoCard/IconLine/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import styles from './styles.module.scss';
5 |
6 | export type IconLineProps = {
7 | icon: React.ReactNode;
8 | currencyShortName: string;
9 | trend: string;
10 | trendDirection: -1 | 0 | 1;
11 | };
12 |
13 | const IconLine: React.FC
20 |
45 | )
46 |
47 | export default IconLine;
48 |
--------------------------------------------------------------------------------
/src/CryptoCard/IconLine/styles.module.scss:
--------------------------------------------------------------------------------
1 | .crypto-card-icon-line {
2 | display: flex;
3 | flex-flow: row;
4 | justify-content: space-between;
5 | align-items: center;
6 | font-size: 18px;
7 |
8 | .left,
9 | .right,
10 | .crypto-short-name {
11 | display: flex;
12 | flex-flow: row;
13 | flex: 1 1 auto;
14 | align-items: center;
15 | }
16 |
17 | .left {
18 | justify-content: flex-start;
19 | color: rgba(#fff, 0.4);
20 | }
21 |
22 | .right {
23 | justify-content: flex-end;
24 | }
25 |
26 | .crypto-icon {
27 | display: flex;
28 | height: 24px;
29 |
30 | img {
31 | height: 100%;
32 | }
33 | }
34 |
35 | .crypto-short-name {
36 | height: 100%;
37 | margin-left: 0.5em;
38 | }
39 |
40 | .trend {
41 | &.green {
42 | color: #2ecc71;
43 | }
44 |
45 | &.yellow {
46 | color: #f1c40f;
47 | }
48 |
49 | &.red {
50 | color: #e74c3c;
51 | }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/CryptoCard/TitleLine/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | export type TitleLineProps = {
6 | currencyName: string,
7 | currencyPrice: string
8 | }
9 |
10 | const TitleLine: React.FC
21 |
28 |
22 | {icon}
23 |
24 |
25 | {currencyShortName}
26 |
27 |
29 |
44 | 0 },
32 | { [`${styles.yellow}`]: trendDirection === 0 },
33 | { [`${styles.red}`]: trendDirection < 0 }
34 | )}>
35 | {trend}
36 | {' '}
37 | {trendDirection > 0
38 | ? '▲'
39 | : trendDirection < 0
40 | ? '▼'
41 | : '='}
42 |
43 |
15 |
18 | )
19 |
20 | export default TitleLine;
21 |
--------------------------------------------------------------------------------
/src/CryptoCard/TitleLine/styles.module.scss:
--------------------------------------------------------------------------------
1 | .crypto-card-title-line {
2 | display: flex;
3 | flex-flow: row;
4 | justify-content: space-between;
5 | align-items: center;
6 | margin-bottom: 0.5rem;
7 | font-size: 20px;
8 |
9 | color: #FFF;
10 | }
11 |
--------------------------------------------------------------------------------
/src/CryptoCard/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import Card from '../Card';
5 | import TitleLine, { TitleLineProps } from './TitleLine';
6 | import IconLine, { IconLineProps } from './IconLine';
7 | import CryptoChart, { CryptoChartProps } from './CryptoChart';
8 |
9 | import styles from './styles.module.scss';
10 |
11 | export type CryptoCardProps = {
12 | className?: string;
13 | currencyName: TitleLineProps['currencyName'];
14 | currencyPrice: TitleLineProps['currencyPrice'];
15 | icon: IconLineProps['icon'];
16 | currencyShortName: IconLineProps['currencyShortName'];
17 | trend: IconLineProps['trend'];
18 | trendDirection: IconLineProps['trendDirection'];
19 | chartColor?: CryptoChartProps['chartColor'];
20 | chartData: CryptoChartProps['chartData'];
21 | };
22 |
23 | const CryptoCard: React.FC{currencyName}
16 | {currencyPrice}
17 |
20 |
21 |
30 | );
31 | }
32 | }
33 | export default NameSurname;
34 |
--------------------------------------------------------------------------------
/src/DropdownCard/NameSurname/styles.scss:
--------------------------------------------------------------------------------
1 | .NSroot{
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 3rem;
6 | border-radius: 30px 5px 0 0;
7 |
8 | .name{
9 | padding-right: 0.5rem;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/DropdownCard/ToggledCard/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Card from '../../Card';
4 |
5 | import styles from './styles.scss';
6 |
7 | class ToggledCard extends React.Component {
8 | constructor(props){
9 | super(props);
10 | }
11 | render(){
12 | let{
13 | email,
14 | phone,
15 | info,
16 | bgColor
17 | } = this.props;
18 |
19 | return(
20 |
22 | {name}
23 |
24 |
25 |
26 | {surname}
27 |
28 |
29 |
23 |
24 |
37 | );
38 | }
39 | };
40 |
41 | export default ToggledCard;
42 |
--------------------------------------------------------------------------------
/src/DropdownCard/ToggledCard/styles.scss:
--------------------------------------------------------------------------------
1 | .toggled-root{
2 | height: 10rem;
3 | border-radius: 0 0 5px 5px;
4 | display: flex;
5 | flex-direction: column;
6 | justify-content: space-evenly;
7 | align-items: center;
8 | }
9 |
--------------------------------------------------------------------------------
/src/DropdownCard/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import Card from '../Card';
5 | import NameSurname from './NameSurname';
6 | import Arrow from './Arrow';
7 | import ToggledCard from './ToggledCard';
8 |
9 | import styles from './styles.scss';
10 |
11 | class DropdownCard extends React.Component{
12 | constructor(props){
13 | super(props);
14 | this.state = {
15 | arrowToggled : false
16 | };
17 | }
18 |
19 | toggleArrow() {
20 | this.setState(prevState => {
21 | return { arrowToggled: !prevState.arrowToggled };
22 | });
23 | }
24 |
25 | render(){
26 | let{
27 | className,
28 | name,
29 | surname,
30 | email,
31 | phone,
32 | info,
33 | messageOnToggled,
34 | messageOnUntoggled,
35 | buttonColor,
36 | bgColor,
37 | ...other
38 | } = this.props;
39 |
40 | return(
41 |
25 | { email }
26 |
27 |
28 |
29 | { phone }
30 |
31 |
32 |
33 | { info }
34 |
35 |
36 |
7 | {children}
8 |
9 | )
10 |
11 | export default FlippingCardBack;
12 |
--------------------------------------------------------------------------------
/src/FlippingCard/FlippingCardBack/styles.module.scss:
--------------------------------------------------------------------------------
1 | .back {
2 | position: absolute;
3 | width: 100%;
4 | height: 100%;
5 |
6 | backface-visibility: hidden;
7 | top: 0;
8 | left: 0;
9 | transform: rotateY(180deg);
10 | border-radius: 0.25rem;
11 | overflow: hidden;
12 | }
13 |
--------------------------------------------------------------------------------
/src/FlippingCard/FlippingCardFront/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | const FlippingCardFront: React.FC = ({ children }) => (
6 |
7 | {children}
8 |
9 | )
10 |
11 | export default FlippingCardFront;
12 |
--------------------------------------------------------------------------------
/src/FlippingCard/FlippingCardFront/styles.module.scss:
--------------------------------------------------------------------------------
1 | .front {
2 | position: absolute;
3 | width: 100%;
4 | height: 100%;
5 |
6 | backface-visibility: hidden;
7 | top: 0;
8 | left: 0;
9 | z-index: 2;
10 | transform: rotateY(0deg);
11 | border-radius: 0.25rem;
12 | overflow: hidden;
13 | }
14 |
--------------------------------------------------------------------------------
/src/FlippingCard/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import Card from '../Card';
5 | import styles from './styles.module.scss';
6 |
7 | export type FlippingCardProps = {
8 | className?: string,
9 | };
10 |
11 | const FlippingCard: React.FC
24 | {children}
25 |
26 |
19 |
20 |
45 | )
46 |
47 | export default NewsHeader;
48 |
--------------------------------------------------------------------------------
/src/NewsHeaderCard/NewsHeader/styles.module.scss:
--------------------------------------------------------------------------------
1 | .news-header{
2 | position: absolute;
3 | bottom: 0;
4 | flex-flow: row;
5 | color: #FAFAFA;
6 | width: 100%;
7 | padding: 1rem;
8 | box-sizing: border-box;
9 | z-index: 2;
10 | text-decoration: none;
11 |
12 | div{
13 | display: flex;
14 | flex-flow: row;
15 | align-items: center;
16 | border: none;
17 | white-space: nowrap;
18 | overflow: hidden;
19 | text-overflow: ellipsis;
20 | }
21 |
22 | .title{
23 | padding-bottom: 0.75rem;
24 | display: block;
25 | justify-content: center;
26 | font-size: 1.5rem;
27 | }
28 |
29 | .bottom{
30 | justify-content: space-between;
31 | }
32 |
33 | .tags {
34 | display: flex;
35 | justify-content: flex-end;
36 | width: 100%;
37 | margin-top: 0.25rem;
38 |
39 | .tag {
40 | margin: 0 0.5rem;
41 | padding: 0.25rem 0.75rem;
42 | background-color: rgba(255, 255, 255, 0.35);
43 | border-radius: 2rem;
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/NewsHeaderCard/NewsHeaderBackground/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | export type NewsHeaderBackgroundProps = {
6 | thumbnail: string;
7 | };
8 |
9 | const NewsHeaderBackground: React.FC
21 | {title}
22 |
23 |
24 |
25 |
33 |
34 |
26 | {author}
27 |
28 |
29 |
30 | {date}
31 |
32 |
35 | {tags && tags.map((tag, i) => {
36 | return (
37 |
38 | {typeof tag === "function" ? tag() : tag}
39 |
40 | );
41 | })}
42 |
43 |
44 |
11 |
12 |
16 | )
17 |
18 | export default NewsHeaderBackground;
19 |
--------------------------------------------------------------------------------
/src/NewsHeaderCard/NewsHeaderBackground/styles.module.scss:
--------------------------------------------------------------------------------
1 | .news-header-background{
2 | display: flex;
3 | flex-flow: column;
4 | justify-content: flex-start;
5 | align-items: center;
6 | overflow: hidden;
7 | position: absolute;
8 | top: 0;
9 | left: 0;
10 | right: 0;
11 | bottom: 0;
12 | background-color: black;
13 | z-index: 1;
14 |
15 | .overlay {
16 | position: absolute;
17 | top: 0;
18 | bottom: 0;
19 | left: 0;
20 | right: 0;
21 | background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.0) 100%);
22 | pointer-events : none;
23 | z-index: 10;
24 | }
25 |
26 | .thumbnail{
27 | display: flex;
28 | justify-content: center;
29 | align-items: center;
30 | width: 100%;
31 | transition: 0.4s;
32 |
33 | &:hover {
34 | transform: scale(1.1);
35 | opacity: 0.75;
36 | }
37 | }
38 |
39 | div{
40 | width: 100%;
41 | height: 100%;
42 | background-size: cover;
43 | background-position: center;
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/NewsHeaderCard/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import Card from '../Card';
5 | import NewsHeader, { NewsHeaderProps } from './NewsHeader';
6 | import NewsHeaderBackground, { NewsHeaderBackgroundProps } from './NewsHeaderBackground';
7 |
8 | import styles from './styles.module.scss';
9 |
10 | export type NewsHeaderCardProps = {
11 | className?: string;
12 | href: string;
13 | hrefTarget?: string;
14 | title: NewsHeaderProps['title'];
15 | author: NewsHeaderProps['author'];
16 | date: NewsHeaderProps['date'];
17 | tags?: NewsHeaderProps['tags'];
18 | thumbnail: NewsHeaderBackgroundProps['thumbnail'];
19 | };
20 |
21 | const NewsHeaderCard: React.FC
13 |
14 |
15 |
7 |
8 |
9 | );
10 |
11 | export default Chip;
12 |
--------------------------------------------------------------------------------
/src/PaymentCard/Chip/styles.module.scss:
--------------------------------------------------------------------------------
1 | .chip-container {
2 | position: relative;
3 | display: flex;
4 | flex-flow: row;
5 | justify-content: flex-start;
6 | width: 100%;
7 | }
8 |
9 | .chip {
10 | position: relative;
11 | border-radius: 0.5rem;
12 | width: 3rem;
13 | height: 2.25rem;
14 | background: linear-gradient(135deg, #ffb347, #ffcc33);
15 | border: 2px solid rgba(#2c3e50, 0.2);
16 | margin-left: 2rem;
17 | z-index: 10;
18 | }
19 |
--------------------------------------------------------------------------------
/src/PaymentCard/IssuerIcon/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | export type IssuerIconProps = {
6 | icon?: string | React.ReactNode;
7 | }
8 |
9 | const IssuerIcon: React.FC
14 | {
15 | icon === undefined
16 | ? null
17 | : typeof icon === 'string'
18 | ? (
19 | 
20 | )
21 | : icon
22 | }
23 |
24 | );
25 | }
26 |
27 | export default IssuerIcon;
28 |
--------------------------------------------------------------------------------
/src/PaymentCard/IssuerIcon/styles.module.scss:
--------------------------------------------------------------------------------
1 | .issuer-icon {
2 | position: relative;
3 | z-index: 10;
4 |
5 | display: flex;
6 | align-items: flex-start;
7 | flex-flow: row;
8 | justify-content: flex-end;
9 |
10 | box-sizing: border-box;
11 | width: 100%;
12 | padding: 1.5rem 1.5rem 0;
13 |
14 | img {
15 | width: 20%;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/PaymentCard/PaymentCardBack/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | export type PaymentCardBackProps = {
6 | cvv: string | number;
7 | };
8 |
9 | const PaymentCardBack: React.FC
13 |
14 |
18 | )
19 |
20 | export default PaymentCardBack;
21 |
--------------------------------------------------------------------------------
/src/PaymentCard/PaymentCardBack/styles.module.scss:
--------------------------------------------------------------------------------
1 | .payment-card-back {
2 | position: relative;
3 |
4 | display: flex;
5 | flex-flow: column;
6 |
7 | width: 100%;
8 | height: 100%;
9 |
10 | .magnetic-stripe {
11 | width: 100%;
12 | height: 3rem;
13 | margin-top: 1rem;
14 |
15 | background: #2c3e50;
16 | }
17 |
18 | .signature-field {
19 | display: flex;
20 | align-items: flex-end;
21 | flex-flow: row;
22 | justify-content: flex-end;
23 |
24 | height: 2rem;
25 | margin-top: 0.5rem;
26 | margin-right: 6rem;
27 | margin-left: 0.5rem;
28 |
29 | background-image: repeating-linear-gradient(180deg, #f1c40f, #f1c40f 3px, #ecf0f1 3px, #ecf0f1 6px);
30 | }
31 |
32 | .cvv {
33 | color: #2c3e50;
34 |
35 | font-family: 'OCR A Std';
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/PaymentCard/PaymentCardBackground/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classnames from 'classnames';
3 |
4 | import triangles from '../svg/triangles.svg';
5 | import spiral from '../svg/spiral.svg';
6 | import styles from './styles.module.scss';
7 |
8 | const patterns = {
9 | triangles,
10 | spiral
11 | };
12 |
13 | const defaultBackground = 'linear-gradient( 135deg, #FF9D6C 10%, #BB4E75 100%)';
14 |
15 | export type PaymentCardBackgroundProps = {
16 | background?: string,
17 | backgroundPattern?: keyof typeof patterns | null;
18 | }
19 |
20 | const PaymentCardBackground: React.FC
15 | {cvv}
16 |
17 |
30 |
36 |
37 | );
38 | }
39 |
40 | export default PaymentCardBackground;
41 |
--------------------------------------------------------------------------------
/src/PaymentCard/PaymentCardBackground/styles.module.scss:
--------------------------------------------------------------------------------
1 | .payment-card-background {
2 | position: absolute;
3 | top: 0;
4 | bottom: 0;
5 | left: 0;
6 | right: 0;
7 |
8 | .svg-background {
9 | position: relative;
10 | width: 100%;
11 | height: 100%;
12 |
13 | &.triangles>svg {
14 | opacity: 0.4;
15 | top: -25%;
16 | }
17 |
18 | &.worldMap>svg {
19 | top: -40%;
20 | opacity: 0.6;
21 | }
22 |
23 | &.spiral>svg {
24 | top: 0;
25 | height: 100%;
26 | width: auto;
27 | opacity: 0.5;
28 | }
29 | }
30 |
31 | svg {
32 | position: relative;
33 | width: 100%;
34 | fill: #ecf0f1;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/PaymentCard/PaymentCardDate/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | export type PaymentCardDateProps = {
6 | date: string
7 | };
8 |
9 | const PaymentCardDate: React.FC
13 |
16 | )
17 |
18 | export default PaymentCardDate;
19 |
--------------------------------------------------------------------------------
/src/PaymentCard/PaymentCardDate/styles.module.scss:
--------------------------------------------------------------------------------
1 | .payment-card-date {
2 | position: relative;
3 | z-index: 10;
4 |
5 | display: flex;
6 | flex-flow: column;
7 |
8 | color: #ecf0f1;
9 |
10 | .valid-date {
11 | padding-left: 6.5rem;
12 |
13 | text-transform: uppercase;
14 |
15 | font-size: 10px;
16 | font-weight: bold;
17 | }
18 |
19 | .to-date {
20 | padding-left: 6.5rem;
21 |
22 | text-shadow: 0px 1px 3px rgba(#2c3e50, 0.7);
23 |
24 | font-family: 'OCR A Std';
25 | font-size: 14px;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/PaymentCard/PaymentCardName/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | export type PaymentCardNameProps = {
6 | name: string;
7 | }
8 |
9 | const PaymentCardName: React.FCValid dates
14 | {date}
15 |
13 | {name}
14 |
15 | )
16 |
17 | export default PaymentCardName;
18 |
--------------------------------------------------------------------------------
/src/PaymentCard/PaymentCardName/styles.module.scss:
--------------------------------------------------------------------------------
1 | .payment-card-name {
2 | position: relative;
3 | color: #ecf0f1;
4 | z-index: 10;
5 | font-family: 'OCR A Std';
6 | text-transform: uppercase;
7 | text-shadow: 0px 1px 3px rgba(#2c3e50, 0.7);
8 | margin-left: 1.3rem;
9 | margin-top: 0.5rem;
10 | font-size: 14px;
11 | }
12 |
--------------------------------------------------------------------------------
/src/PaymentCard/PaymentCardNumber/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | export type PaymentCardNumberProps = {
6 | number: string;
7 | }
8 |
9 | const PaymentCardNumber: React.FC
13 | {number}
14 |
15 | )
16 |
17 | export default PaymentCardNumber;
18 |
--------------------------------------------------------------------------------
/src/PaymentCard/PaymentCardNumber/styles.module.scss:
--------------------------------------------------------------------------------
1 | .payment-card-number {
2 | position: relative;
3 | z-index: 10;
4 |
5 | display: flex;
6 | align-items: center;
7 | flex-flow: column;
8 | justify-content: center;
9 | margin-top: 1rem;
10 |
11 | letter-spacing: 0.4px;
12 |
13 | color: #ecf0f1;
14 |
15 | font-family: 'OCR A Std';
16 | font-size: 21px;
17 | opacity: 0.85;
18 | text-shadow: 0px 1px 3px rgba(#2c3e50, 0.7);
19 | }
20 |
--------------------------------------------------------------------------------
/src/PaymentCard/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import FlippingCard from '../FlippingCard';
5 | import FlippingCardFront from '../FlippingCard/FlippingCardFront';
6 | import FlippingCardBack from '../FlippingCard/FlippingCardBack';
7 | import PaymentCardBackground, { PaymentCardBackgroundProps } from './PaymentCardBackground';
8 | import IssuerIcon, { IssuerIconProps } from './IssuerIcon';
9 | import PaymentCardNumber, { PaymentCardNumberProps } from './PaymentCardNumber';
10 | import Chip from './Chip';
11 | import PaymentCardDate, { PaymentCardDateProps } from './PaymentCardDate';
12 | import PaymentCardName, { PaymentCardNameProps } from './PaymentCardName';
13 | import PaymentCardBack, { PaymentCardBackProps } from './PaymentCardBack';
14 | import styles from './styles.module.scss';
15 |
16 | export type PaymentCardProps = {
17 | className?: string;
18 | background?: PaymentCardBackgroundProps['background'];
19 | backgroundPattern?: PaymentCardBackgroundProps['backgroundPattern'];
20 | issuerIcon: IssuerIconProps['icon'];
21 | number: PaymentCardNumberProps['number'];
22 | date: PaymentCardDateProps['date'];
23 | name: PaymentCardNameProps['name'];
24 | cvv: PaymentCardBackProps['cvv'];
25 | }
26 |
27 | const PaymentCard: React.FC
11 | {price}
12 |
13 | )
14 |
15 | export default PriceTag;
16 |
--------------------------------------------------------------------------------
/src/ProductCard/PriceTag/styles.module.scss:
--------------------------------------------------------------------------------
1 | .price-tag {
2 | position: absolute;
3 | background-color: rgba(#2c3e50, 0.95);
4 | color: #ecf0f1;
5 | border-radius: 0.25rem;
6 | padding: 0.125rem 0.5rem;
7 | top: 1rem;
8 | left: 1rem;
9 | }
10 |
--------------------------------------------------------------------------------
/src/ProductCard/ProductCardDescription/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | export type ProductCardDescriptionProps = {
6 | productName: string;
7 | description: string;
8 | buttonText?: string;
9 | url: string;
10 | isButtonActive?: boolean;
11 | };
12 |
13 | const ProductCardDescription: React.FC
21 |
30 | );
31 |
32 | export default ProductCardDescription;
33 |
--------------------------------------------------------------------------------
/src/ProductCard/ProductCardDescription/styles.module.scss:
--------------------------------------------------------------------------------
1 | .product-card-description-box {
2 | display: flex;
3 | flex-flow: column;
4 | justify-content: flex-start;
5 |
6 | flex: 0 0 auto;
7 | height: 50%;
8 | padding: 1.5rem 2rem;
9 | box-sizing: border-box;
10 | background-color: #ecf0f1;
11 |
12 | .row {
13 | display: flex;
14 | flex-flow: row;
15 | margin-top: 0.5rem;
16 | }
17 | }
18 |
19 | .product-card-name {
20 | text-transform: uppercase;
21 | font-size: 1.5rem;
22 | letter-spacing: 3px;
23 | color: #2c3e50;
24 | }
25 |
26 | .product-card-description {
27 | color: #2c3e50;
28 | font-size: 0.75rem;
29 | letter-spacing: 2px;
30 | }
31 |
32 | .buy-button {
33 | padding: 0.75rem 1.5rem;
34 | font-size: 0.75rem;
35 | text-decoration: none;
36 | text-transform: uppercase;
37 | letter-spacing: 3px;
38 | color: #ecf0f1;
39 | background-color: #1abc9c;
40 | border-radius: 0.25rem;
41 | transition: 0.25s;
42 |
43 | &:hover,
44 | &:focus,
45 | &:active {
46 | background-color: #16a085;
47 | }
48 | }
49 |
50 | .buy-button-disabled {
51 | padding: 0.75rem 1.5rem;
52 | font-size: 0.75rem;
53 | text-decoration: none;
54 | text-transform: uppercase;
55 | letter-spacing: 3px;
56 | color: rgb(245, 230, 230);
57 | background-color: #cccccc;
58 | border-radius: 0.25rem;
59 | transition: 0.25s;
60 | cursor: default;
61 | }
62 |
--------------------------------------------------------------------------------
/src/ProductCard/ProductCardGallery/GalleryToggle/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import styles from './styles.module.scss';
5 |
6 | export type GalleryToggleProps = {
7 | icon: string;
8 | action: React.MouseEventHandler;
9 | left?: boolean;
10 | right?: boolean;
11 | };
12 |
13 | const GalleryToggle: React.FC{productName}
22 | {description}
23 | {buttonText && 24 |
25 |
26 | {buttonText}
27 |
28 |
}
29 |
29 | {icon}
30 |
31 | )
32 |
33 | export default GalleryToggle;
34 |
--------------------------------------------------------------------------------
/src/ProductCard/ProductCardGallery/GalleryToggle/styles.module.scss:
--------------------------------------------------------------------------------
1 | .gallery-toggle {
2 | position: absolute;
3 | display: flex;
4 | flex-flow: column;
5 | justify-content: center;
6 | align-items: center;
7 | height: 100%;
8 | width: 2rem;
9 | transition: 0.25s;
10 | color: rgba(#ecf0f1, 0.5);
11 | background-color: rgba(#2c3e50, 0.5);
12 | opacity: 0;
13 | cursor: pointer;
14 |
15 | &.left {
16 | left: 0;
17 | border-radius: 0.25rem 0 0 0;
18 | }
19 |
20 | &.right {
21 | right: 0;
22 | border-radius: 0 0.25rem 0 0;
23 | }
24 |
25 | &:hover {
26 | opacity: 1;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/ProductCard/ProductCardGallery/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import cx from 'classnames';
3 |
4 | import GalleryToggle from './GalleryToggle';
5 | import styles from './styles.module.scss';
6 |
7 | export type ProductCardGalleryProps = {
8 | photos: string[];
9 | }
10 |
11 | const ProductCardGallery: React.FC
28 | {
29 | photos.map((photo, i) => (
30 |
39 | ))
40 | }
41 |
52 | );
53 | }
54 |
55 | export default ProductCardGallery;
56 |
--------------------------------------------------------------------------------
/src/ProductCard/ProductCardGallery/styles.module.scss:
--------------------------------------------------------------------------------
1 | .product-card-gallery {
2 | position: relative;
3 | display: flex;
4 | flex-flow: row;
5 | flex: 0 0 auto;
6 | height: 50%;
7 | overflow: hidden;
8 |
9 | .gallery-item {
10 | position: absolute;
11 | width: 100%;
12 | height:100%;
13 |
14 | background-size: cover;
15 | background-repeat: no-repeat;
16 | background-position: center;
17 | border-radius: 0.25rem 0.25rem 0 0;
18 | opacity: 0;
19 |
20 | transition: 1s;
21 | }
22 | .active {
23 | width: 100%;
24 | opacity: 1;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/ProductCard/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import Card from '../Card';
5 | import ProductCardDescription, { ProductCardDescriptionProps } from './ProductCardDescription';
6 | import ProductCardGallery, { ProductCardGalleryProps } from './ProductCardGallery';
7 | import PriceTag, { PriceTagProps } from './PriceTag';
8 |
9 | import styles from './styles.module.scss';
10 |
11 | export type ProductCardProps = {
12 | className?: string;
13 | photos: ProductCardGalleryProps['photos'];
14 | price: PriceTagProps['price'];
15 | productName: ProductCardDescriptionProps['productName'];
16 | description: ProductCardDescriptionProps['description'];
17 | buttonText?: ProductCardDescriptionProps['buttonText'];
18 | url: ProductCardDescriptionProps['url'];
19 | }
20 |
21 | const ProductCard: React.FC
19 |
20 |
21 |
22 | )
23 |
24 | export default RecipeCardContent;
25 |
--------------------------------------------------------------------------------
/src/RecipeCard/RecipeCardContent/styles.module.scss:
--------------------------------------------------------------------------------
1 | .recipe-card-content{
2 | display: flex;
3 | flex-flow:column;
4 | justify-content: flex-start;
5 | align-items: center;
6 |
7 | .thumbnail{
8 | display:flex;
9 | justify-content:center;
10 | align-items:center;
11 | width: 100%;
12 |
13 | div {
14 | width:100%;
15 | height:300px;
16 | background-size: cover;
17 | background-position: center;
18 |
19 | &:hover{
20 | opacity:0.7;
21 | }
22 | }
23 | }
24 | }
25 |
26 |
27 |
--------------------------------------------------------------------------------
/src/RecipeCard/RecipeCardDesc/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import FontAwesome from 'react-fontawesome';
3 |
4 | import styles from './styles.module.scss';
5 |
6 | export type RecipeCardDescProps = {
7 | title: string;
8 | time: string;
9 | servings: string;
10 | likeCallback: React.MouseEventHandler;
11 | };
12 |
13 | const RecipeCardDesc: React.FC
19 |
;
37 |
38 |
39 | export default RecipeCardDesc;
40 |
--------------------------------------------------------------------------------
/src/RecipeCard/RecipeCardDesc/styles.module.scss:
--------------------------------------------------------------------------------
1 | .recipe-card-desc {
2 | display: flex;
3 | flex-flow: row;
4 | justify-content: center;
5 | color: rgba(0, 0, 0, 0.75);
6 |
7 |
8 | div,
9 | a {
10 | display: flex;
11 | flex-flow: row;
12 | justify-content: center;
13 | align-items: center;
14 | padding: 1rem;
15 | flex: 1 1 auto;
16 | border: none;
17 | white-space: nowrap;
18 | overflow: hidden;
19 | text-overflow: ellipsis;
20 |
21 | &:hover {
22 | background: #F8BBD0;
23 | }
24 | }
25 |
26 | .title {
27 | display: inline;
28 | text-align: center;
29 | }
30 |
31 | a:hover {
32 | cursor: pointer;
33 | }
34 |
35 | .title {
36 | font-size: 1.25rem;
37 | }
38 |
39 | span.fa:not(.fa-heart-o) {
40 | margin-right: 0.25rem;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/RecipeCard/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import Card from '../Card';
5 | import RecipeCardContent, { RecipeCardContentProps } from './RecipeCardContent';
6 | import RecipeCardDesc, { RecipeCardDescProps } from './RecipeCardDesc';
7 |
8 | import styles from './styles.module.scss';
9 |
10 | export type RecipeCardProps = {
11 | className?: string;
12 | href: RecipeCardContentProps['href'];
13 | thumbnail: RecipeCardContentProps['thumbnail'];
14 | likeCallback: RecipeCardDescProps['likeCallback'];
15 | title: RecipeCardDescProps['title'];
16 | time: RecipeCardDescProps['time'];
17 | servings: RecipeCardDescProps['servings'];
18 | };
19 |
20 | const RecipeCard: React.FC
20 | {title}
21 |
22 |
26 |
29 |
32 |
33 |
36 |
22 |
45 | )
46 |
47 | export default CardContent;
48 |
--------------------------------------------------------------------------------
/src/TaggedContentCard/CardContent/styles.module.scss:
--------------------------------------------------------------------------------
1 | .card-content {
2 | display: flex;
3 | flex-flow: column;
4 | justify-content: flex-start;
5 | align-items: center;
6 | width: 100%;
7 | height: 100%;
8 | z-index: 10;
9 |
10 | .thumbnail {
11 | display: flex;
12 | height: 50%;
13 | width: 100%;
14 | justify-content: center;
15 | align-items: center;
16 | padding: 2rem 0 0 0;
17 | flex: 1 1 auto;
18 |
19 | img {
20 | width: auto;
21 | height: 100%;
22 | object-fit: cover;
23 | box-shadow: 0 16px 24px 2px rgba(#2c3e50,0.24), 0 6px 30px 5px rgba(#2c3e50,0.22), 0 8px 10px -5px rgba(#2c3e50,0.4)
24 | }
25 | }
26 |
27 | .text {
28 | display: flex;
29 | flex-flow: column;
30 | justify-content: center;
31 | width: 100%;
32 | padding: 1rem;
33 | margin-top: 1rem;
34 | box-sizing: border-box;
35 | border-top: 1px solid rgba(#ecf0f1, 0.2);
36 | background-color: rgba(0, 0, 0, 0.2);
37 | color: #ecf0f1;
38 |
39 | .description {
40 | color: rgba(#ecf0f1, 0.8);
41 | font-size: 0.875rem;
42 | }
43 | }
44 |
45 | .tags {
46 | display: flex;
47 | justify-content: flex-end;
48 | width: 100%;
49 |
50 | .tag {
51 | margin: 0 0.5rem;
52 | padding: 0.25rem 0.75rem;
53 | background-color: rgba(0, 0, 0, 0.5);
54 | border-radius: 2rem;
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/TaggedContentCard/CardOverlay/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | export type CardOverlayProps = {
6 | thumbnail: string;
7 | };
8 |
9 | const CardOverlay: React.FC
23 | 
24 |
25 |
26 |
27 |
44 |
28 | {title}
29 |
30 |
31 | {description}
32 |
33 |
34 | {tags.map((tag, i) => (
35 |
39 | {typeof tag === "function" ? tag() : tag}
40 |
41 | ))}
42 |
43 |
13 |
18 |
19 | );
20 |
21 | export default CardOverlay;
22 |
--------------------------------------------------------------------------------
/src/TaggedContentCard/CardOverlay/styles.module.scss:
--------------------------------------------------------------------------------
1 | .card-overlay {
2 | position: absolute;
3 | width: 100%;
4 | height: 100%;
5 | overflow: hidden;
6 | border-radius: 0.25rem;
7 |
8 | .overlay {
9 | position: absolute;
10 | width: 100%;
11 | height: 100%;
12 | background-repeat: no-repeat;
13 | background-position: center;
14 | background-size: cover;
15 | filter: blur(20px) brightness(0.75);
16 | backface-visibility: hidden;
17 | perspective: 1000;
18 | transform: translate3d(0,0,0);
19 | transform: translateZ(0);
20 | will-change: transform;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/TaggedContentCard/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cx from 'classnames';
3 |
4 | import Card from '../Card';
5 | import CardContent, { CardContentProps } from './CardContent';
6 | import CardOverlay from './CardOverlay';
7 | import styles from './styles.module.scss';
8 |
9 | export type TaggedContentCardProps = {
10 | className?: string;
11 | href: string;
12 | thumbnail: CardContentProps['thumbnail'];
13 | title: CardContentProps['title'];
14 | description: CardContentProps['description'];
15 | tags: CardContentProps['tags'];
16 | };
17 |
18 | const TaggedContentCard: React.FC
14 |
22 | )
23 |
24 | export default UserCardBody;
25 |
--------------------------------------------------------------------------------
/src/UserCard/UserCardBody/styles.module.scss:
--------------------------------------------------------------------------------
1 | .user-card-body {
2 | padding: 1rem;
3 | padding-top: 4rem;
4 |
5 | .user-card-name {
6 | display: flex;
7 | justify-content: center;
8 | font-size: 1.25rem;
9 | margin-bottom: 0.25rem;
10 | color: #2c3e50;
11 | }
12 |
13 | .user-card-position-name {
14 | display: flex;
15 | justify-content: center;
16 | font-size: 0.75rem;
17 | color: #7f8c8d;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/UserCard/UserCardHeader/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | export type UserCardHeaderProps = {
6 | src: string;
7 | };
8 |
9 | const UserCardHeader: React.FC
15 | {name}
16 |
17 |
18 | {positionName}
19 |
20 | {children}
21 |
14 |
15 | )
16 |
17 | export default UserCardHeader;
18 |
--------------------------------------------------------------------------------
/src/UserCard/UserCardHeader/styles.module.scss:
--------------------------------------------------------------------------------
1 | .user-card-header {
2 | position: relative;
3 | display: flex;
4 | flex: 0 0 auto;
5 | height: 50%;
6 |
7 | background-size: cover;
8 | background-repeat: no-repeat;
9 | background-position: center;
10 | border-radius: 0.25rem 0.25rem 0 0;
11 | }
12 |
--------------------------------------------------------------------------------
/src/UserCard/UserCardStats/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './styles.module.scss';
4 |
5 | export type UserCardStatsProps = {
6 | stats?: {
7 | name: string;
8 | value: number | string;
9 | }[];
10 | }
11 |
12 | const UserCardStats: React.FC
16 | {stats?.map((stat) => {
17 | return (
18 |
32 | )
33 |
34 | export default UserCardStats;
35 |
--------------------------------------------------------------------------------
/src/UserCard/UserCardStats/styles.module.scss:
--------------------------------------------------------------------------------
1 | .user-card-stats {
2 | display: flex;
3 | flex-flow: row;
4 | justify-content: center;
5 |
6 | font-size: 0.75rem;
7 | }
8 |
9 | .stat-container {
10 | border-top: 2px solid rgba(#7f8c8d, 0.2);
11 | border-right: 2px solid rgba(#7f8c8d, 0.2);
12 | min-width: 4rem;
13 | padding: 0.25rem;
14 |
15 | &:last-child {
16 | border-right: none;
17 | }
18 | }
19 |
20 | .stat-name {
21 | display: flex;
22 | flex-flow: row;
23 | justify-content: center;
24 | color: #7f8c8d;
25 | }
26 |
27 | .stat-value {
28 | display: flex;
29 | flex-flow: row;
30 | justify-content: center;
31 | color: #2c3e50;
32 | font-weight: bold;
33 | }
34 |
--------------------------------------------------------------------------------
/src/UserCard/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Card, { CardProps } from '../Card';
4 | import UserCardHeader, { UserCardHeaderProps } from './UserCardHeader';
5 | import UserCardAvatar, { UserCardAvatarProps } from './UserCardAvatar';
6 | import UserCardBody, { UserCardBodyProps } from './UserCardBody';
7 | import UserCardStats, { UserCardStatsProps } from './UserCardStats';
8 |
9 | import styles from './styles.module.scss';
10 |
11 | export type UserCardProps = CardProps & {
12 | href: string;
13 | header: UserCardHeaderProps['src'];
14 | avatar: UserCardAvatarProps['src'];
15 | name: UserCardBodyProps['name'];
16 | positionName: UserCardBodyProps['positionName'];
17 | stats?: UserCardStatsProps['stats'];
18 | };
19 |
20 | const UserCard: React.FC
22 |
29 | );
30 | })}
31 |
23 | {stat.value}
24 |
25 |
26 | {stat.name}
27 |
28 |
18 | Card with custom className
19 |
,
20 | ]
21 | `;
22 |
23 | exports[`Storyshots Cards/Base card Example 1 1`] = `
24 |
27 | Card content
28 |
29 | `;
30 |
31 | exports[`Storyshots Cards/Base card Floating Card 1`] = `
32 |
35 | Hover over me
36 |
37 | `;
38 |
39 | exports[`Storyshots Cards/Crypto card Example 1 1`] = `
40 |
43 |
92 | `;
93 |
94 | exports[`Storyshots Cards/Crypto card Example 2 1`] = `
95 |
46 |
57 |
49 | Bitcoin
50 |
51 |
54 | $8850.32
55 |
56 |
60 |
88 |
91 |
63 |
76 |
66 | 
69 |
70 |
69 |
73 | BTC
74 |
75 |
79 |
87 |
82 | (8.54%) $563.47
83 |
84 | ▲
85 |
86 |
98 |
147 | `;
148 |
149 | exports[`Storyshots Cards/Crypto card Example 3 1`] = `
150 |
101 |
112 |
104 | Ethereum
105 |
106 |
109 | $766.12
110 |
111 |
115 |
143 |
146 |
118 |
131 |
121 | 
124 |
125 |
124 |
128 | ETH
129 |
130 |
134 |
142 |
137 | (7.32%) $14.94
138 |
139 | ▲
140 |
141 |
153 |
202 | `;
203 |
204 | exports[`Storyshots Cards/Flipping card Example 1 1`] = `
205 |
156 |
167 |
159 | Litecoin
160 |
161 |
164 | $137.92
165 |
166 |
170 |
198 |
201 |
173 |
186 |
176 | 
179 |
180 |
179 |
183 | LTC
184 |
185 |
189 |
197 |
192 | (-5.12%) $6.34
193 |
194 | ▼
195 |
196 |
208 |
243 | `;
244 |
245 | exports[`Storyshots Cards/Flipping card Example 2 1`] = `
246 |
211 |
242 |
214 |
225 |
226 |
229 |
240 |
241 |
249 |
284 | `;
285 |
286 | exports[`Storyshots Cards/Flipping card Example 3 1`] = `
287 |
252 |
283 |
255 |
266 |
267 |
270 |
281 |
282 |
290 |
325 | `;
326 |
327 | exports[`Storyshots Cards/News header card Example 1 1`] = `
328 |
332 |
293 |
324 |
296 |
307 |
308 |
311 |
322 |
323 |
335 |
398 |
399 | `;
400 |
401 | exports[`Storyshots Cards/News header card Example 2 1`] = `
402 |
406 |
338 |
341 |
353 |
344 |
351 |
352 |
356 |
397 |
359 | Polish mountaineers on the top
360 |
361 |
364 |
375 |
367 | Daily Sport
368 |
369 |
372 | Feb 2, 2018
373 |
374 |
378 |
381 | nature
382 |
383 |
386 | photo
387 |
388 |
391 |
392 | component
393 |
394 |
395 |
396 |
409 |
454 |
455 | `;
456 |
457 | exports[`Storyshots Cards/News header card Example 3 1`] = `
458 |
462 |
412 |
415 |
427 |
418 |
425 |
426 |
430 |
453 |
433 | Most poisonous dishes you must avoid
434 |
435 |
438 |
449 |
452 |
441 | Daily Health
442 |
443 |
446 | Jan 2, 2018
447 |
448 |
465 |
510 |
511 | `;
512 |
513 | exports[`Storyshots Cards/Payment card Example 1 1`] = `
514 |
468 |
471 |
483 |
474 |
481 |
482 |
486 |
509 |
489 | Cool looking test tubes
490 |
491 |
494 |
505 |
508 |
497 | Daily Science
498 |
499 |
502 | Mar 2, 2018
503 |
504 |
517 |
618 | `;
619 |
620 | exports[`Storyshots Cards/Payment card Example 2 1`] = `
621 |
520 |
617 |
523 |
579 |
531 |
539 |
540 |
543 | 
546 |
547 |
546 |
550 |
553 |
554 |
557 | 4445 8509 0753 1365
558 |
559 |
562 |
573 |
565 | Valid dates
566 |
567 |
570 | 12/18
571 |
572 |
576 | Jean Pierre Polnareff
577 |
578 |
582 |
616 |
590 |
598 |
599 |
602 |
605 |
615 |
608 |
611 | 213
612 |
613 |
614 |
624 |
725 | `;
726 |
727 | exports[`Storyshots Cards/Product card Example 1 1`] = `
728 |
627 |
724 |
630 |
686 |
638 |
646 |
647 |
650 | 
653 |
654 |
653 |
657 |
660 |
661 |
664 | 3421 7270 0864 956
665 |
666 |
669 |
680 |
672 | Valid dates
673 |
674 |
677 | 02/22
678 |
679 |
683 | Jotaro Kujo
684 |
685 |
689 |
723 |
697 |
705 |
706 |
709 |
712 |
722 |
715 |
718 | 880
719 |
720 |
721 |
731 |
801 | `;
802 |
803 | exports[`Storyshots Cards/Product card Example 2 1`] = `
804 |
734 |
742 |
750 |
758 |
771 |
762 | >
763 |
764 |
768 | <
769 |
770 |
774 | $99
775 |
776 |
779 |
800 |
782 | Headphones
783 |
784 | 787 | Donec lectus nulla, molestie aliquam nisl vitae, tempor placerat magna. Morbi dignissim in felis vel aliquet. 788 |
789 |
792 |
796 | Add to cart
797 |
798 |
799 |
807 |
867 | `;
868 |
869 | exports[`Storyshots Cards/Recipe card Example 1 1`] = `
870 |
810 |
818 |
826 |
834 |
847 |
838 | >
839 |
840 |
844 | <
845 |
846 |
850 | $1.50
851 |
852 |
855 |
866 |
858 | Cupcake
859 |
860 | 863 | Nullam velit leo, pulvinar non metus feugiat, pharetra ornare enim. Vivamus ac quam a purus venenatis fringilla. 864 |
865 |
873 |
877 |
925 | `;
926 |
927 | exports[`Storyshots Cards/Recipe card Example 2 1`] = `
928 |
880 |
887 |
888 |
889 |
892 |
924 |
895 | Fluffy pancakes
896 |
897 |
900 |
904 |
905 |
908 |
912 | 0:30
913 |
914 |
917 |
921 | 3-5
922 |
923 |
931 |
935 |
983 | `;
984 |
985 | exports[`Storyshots Cards/Recipe card Example 3 1`] = `
986 |
938 |
945 |
946 |
947 |
950 |
982 |
953 | Cupcakes
954 |
955 |
958 |
962 |
963 |
966 |
970 | 1:30
971 |
972 |
975 |
979 | 4-6
980 |
981 |
989 |
993 |
1041 | `;
1042 |
1043 | exports[`Storyshots Cards/Tagged content card Example 1 1`] = `
1044 |
1048 |
996 |
1003 |
1004 |
1005 |
1008 |
1040 |
1011 | Macarons
1012 |
1013 |
1016 |
1020 |
1021 |
1024 |
1028 | 2:00
1029 |
1030 |
1033 |
1037 | 7-10
1038 |
1039 |
1051 |
1108 |
1109 | `;
1110 |
1111 | exports[`Storyshots Cards/Tagged content card Example 2 1`] = `
1112 |
1116 |
1054 |
1062 |
1063 |
1066 |
1107 |
1069 | 
1072 |
1073 |
1072 |
1076 |
1106 |
1079 | Cheesecake
1080 |
1081 |
1084 | a cake with raspberries
1085 |
1086 |
1089 |
1092 | food
1093 |
1094 |
1097 | cake
1098 |
1099 |
1102 | fruits
1103 |
1104 |
1105 |
1119 |
1176 |
1177 | `;
1178 |
1179 | exports[`Storyshots Cards/Tagged content card Example 3 1`] = `
1180 |
1184 |
1122 |
1130 |
1131 |
1134 |
1175 |
1137 | 
1140 |
1141 |
1140 |
1144 |
1174 |
1147 | Cupcakes
1148 |
1149 |
1152 | a bite-sized cake
1153 |
1154 |
1157 |
1160 | food
1161 |
1162 |
1165 | cake
1166 |
1167 |
1170 | icing
1171 |
1172 |
1173 |
1187 |
1244 |
1245 | `;
1246 |
1247 | exports[`Storyshots Cards/User card Example 1 1`] = `
1248 |
1252 |
1190 |
1198 |
1199 |
1202 |
1243 |
1205 | 
1208 |
1209 |
1208 |
1212 |
1242 |
1215 | Burger
1216 |
1217 |
1220 | the cornerstone of every nutritious breakfast
1221 |
1222 |
1225 |
1228 | food
1229 |
1230 |
1233 | sandwich
1234 |
1235 |
1238 | meat
1239 |
1240 |
1241 |
1255 |
1263 |
1271 |
1332 |
1333 | `;
1334 |
1335 | exports[`Storyshots Cards/User card Example 2 1`] = `
1336 |
1340 |
1274 |
1285 |
1277 | Justin Case
1278 |
1279 |
1282 | Software Developer
1283 |
1284 |
1288 |
1331 |
1291 |
1302 |
1294 | 21
1295 |
1296 |
1299 | followers
1300 |
1301 |
1305 |
1316 |
1308 | 37
1309 |
1310 |
1313 | following
1314 |
1315 |
1319 |
1330 |
1322 | 117
1323 |
1324 |
1327 | posts
1328 |
1329 |
1343 |
1351 |
1359 |
1374 |
1375 | `;
1376 |
1377 | exports[`Storyshots Cards/User card Example 3 1`] = `
1378 |
1382 |
1362 |
1373 |
1365 | Frank Hepsfield
1366 |
1367 |
1370 | Software Engineering Manager
1371 |
1372 |
1385 |
1393 |
1401 |
1462 |
1463 | `;
1464 |
1465 | exports[`Storyshots Demo Demo 1`] = `
1466 |
1404 |
1415 |
1407 | Joseph Cheps
1408 |
1409 |
1412 | Firmware Engineer
1413 |
1414 |
1418 |
1461 |
1421 |
1432 |
1424 | 365
1425 |
1426 |
1429 | commits
1430 |
1431 |
1435 |
1446 |
1438 | 110
1439 |
1440 |
1443 | stars
1444 |
1445 |
1449 |
1460 |
1452 | 54
1453 |
1454 |
1457 | repositories
1458 |
1459 |
1469 |
1700 | `;
1701 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import UserCard from './UserCard';
2 | import ProductCard from './ProductCard';
3 | import TaggedContentCard from './TaggedContentCard';
4 | import FlippingCard from './FlippingCard';
5 | import FlippingCardFront from './FlippingCard/FlippingCardFront';
6 | import FlippingCardBack from './FlippingCard/FlippingCardBack';
7 | import PaymentCard from './PaymentCard';
8 | import RecipeCard from './RecipeCard';
9 | import NewsHeaderCard from './NewsHeaderCard';
10 | import CryptoCard from './CryptoCard';
11 |
12 | export {
13 | UserCard,
14 | ProductCard,
15 | TaggedContentCard,
16 | FlippingCard,
17 | FlippingCardFront,
18 | FlippingCardBack,
19 | PaymentCard,
20 | RecipeCard,
21 | NewsHeaderCard,
22 | CryptoCard,
23 | };
24 |
--------------------------------------------------------------------------------
/src/stories/Card.stories.tsx:
--------------------------------------------------------------------------------
1 | import Card from "../Card"
2 |
3 | export default {
4 | title: 'Cards/Base card'
5 | };
6 |
7 | export const Example1 = () =>
1472 |
1475 | NPM package
1476 |
1477 |
1480 | See the source at Github
1481 |
1482 |
1483 | 1484 | Use the links on the left to see the other components. 1485 |
1486 |
1489 |
1493 |
1699 |
1496 |
1504 |
1512 |
1573 |
1574 |
1578 |
1515 |
1526 |
1518 | Justin Case
1519 |
1520 |
1523 | Software Developer
1524 |
1525 |
1529 |
1572 |
1532 |
1543 |
1535 | 21
1536 |
1537 |
1540 | followers
1541 |
1542 |
1546 |
1557 |
1549 | 37
1550 |
1551 |
1554 | following
1555 |
1556 |
1560 |
1571 |
1563 | 117
1564 |
1565 |
1568 | posts
1569 |
1570 |
1581 |
1589 |
1597 |
1612 |
1613 |
1617 |
1600 |
1611 |
1603 | Frank Hepsfield
1604 |
1605 |
1608 | Software Engineering Manager
1609 |
1610 |
1620 |
1628 |
1636 |
1697 |
1698 |
1639 |
1650 |
1642 | Joseph Cheps
1643 |
1644 |
1647 | Firmware Engineer
1648 |
1649 |
1653 |
1696 |
1656 |
1667 |
1659 | 365
1660 |
1661 |
1664 | commits
1665 |
1666 |
1670 |
1681 |
1673 | 110
1674 |
1675 |
1678 | stars
1679 |
1680 |
1684 |
1695 |
1687 | 54
1688 |
1689 |
1692 | repositories
1693 |
1694 |
11 |
;
--------------------------------------------------------------------------------
/src/stories/FlippingCard.stories.tsx:
--------------------------------------------------------------------------------
1 | import FlippingCard from "../FlippingCard";
2 | import FlippingCardBack from "../FlippingCard/FlippingCardBack";
3 | import FlippingCardFront from "../FlippingCard/FlippingCardFront";
4 |
5 | export default {
6 | title: 'Cards/Flipping card',
7 | component: FlippingCard,
8 | };
9 |
10 | export const Example1 = () =>
12 | NPM package
13 | See the source at Github
14 |
15 |
16 | 17 | Use the links on the left to see the other components. 18 |
19 | 20 |
21 |
76 |
20 |
21 |
31 |
32 |
45 |
46 |
56 |
57 |
70 |
71 |
81 |
82 |