-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
gvieiraschwade
committed
Aug 9, 2020
1 parent
3387877
commit e20a4f8
Showing
9 changed files
with
494 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,3 +25,6 @@ yarn-error.log* | |
|
|
||
| # VScode settings | ||
| /.vscode | ||
|
|
||
| # meld | ||
| *.orig | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import React from 'react'; | ||
| import { fireEvent, render } from '@testing-library/react'; | ||
| import { BaseCard } from './BaseCard'; | ||
|
|
||
| describe('BaseCard', () => { | ||
| it('should render the card', () => { | ||
| const { getByTestId, getByRole } = render(<BaseCard />); | ||
| expect(getByRole('button')).toBeInTheDocument(); | ||
| expect(getByTestId('BaseCard')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| describe('when rendered', () => { | ||
| let cardContainer: HTMLElement; | ||
| let frontFace: HTMLElement; | ||
| let backFace: HTMLElement; | ||
| beforeEach(() => { | ||
| const { getByTestId, getByRole } = render( | ||
| <BaseCard | ||
| frontFace={<div data-testid="front-face">MY FRONT</div>} | ||
| backFace={<div data-testid="back-face">MY BACK</div>} | ||
| />, | ||
| ); | ||
| cardContainer = getByRole('button'); | ||
| frontFace = getByTestId('front-face'); | ||
| backFace = getByTestId('back-face'); | ||
| }); | ||
|
|
||
| it('should display the front face by default', () => { | ||
| expect(frontFace).toBeVisible(); | ||
| }); | ||
|
|
||
| it('should hide the back face by default', () => { | ||
| expect(backFace).not.toBeVisible(); | ||
| }); | ||
|
|
||
| it('should flip when clicked', async () => { | ||
| fireEvent.click(cardContainer); | ||
| expect(backFace).toBeVisible(); | ||
| expect(frontFace).not.toBeVisible(); | ||
| }); | ||
|
|
||
| it('should flip again when clicked again', async () => { | ||
| fireEvent.click(cardContainer); | ||
| fireEvent.click(cardContainer); | ||
| expect(backFace).not.toBeVisible(); | ||
| expect(frontFace).toBeVisible(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import React, { useState, KeyboardEvent } from 'react'; | ||
| import { createUseStyles } from 'react-jss'; | ||
|
|
||
| /** | ||
| * Properties for BaseCard component | ||
| */ | ||
| export interface BaseCardProps { | ||
| /** Element to show at card front face */ | ||
| frontFace?: JSX.Element; | ||
| /** Element to show at card back face */ | ||
| backFace?: JSX.Element; | ||
| /** Defines the card height */ | ||
| height?: number; | ||
| /** Defines the card width */ | ||
| width?: number; | ||
| } | ||
|
|
||
| const useStyles = createUseStyles({ | ||
| // Generic classes | ||
| cardFace: { | ||
| backfaceVisibility: 'hidden', | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| color: 'cornSilk', | ||
| textAlign: 'center', | ||
| font: `3em/240px 'Helvetica Neue', Helvetica, sans-serif`, | ||
| boxShadow: '-5px 5px 5px #aaa', | ||
| transition: '0.6s', | ||
| }, | ||
| // Modal classes | ||
| backVisible: {}, | ||
| frontVisible: {}, | ||
| // Style classes | ||
| card: ({ width, height }) => ({ | ||
| width: width || 600, | ||
| height: height || 400, | ||
| perspective: 1000, | ||
| cursor: 'pointer', | ||
| '&$backVisible $cardFlipper': { transform: 'rotateY(180deg)' }, | ||
| '&$backVisible $cardFront': { opacity: 0 }, | ||
| '&$backVisible $cardBack': { opacity: 1 }, | ||
| '&$frontVisible $cardFront': { opacity: 1 }, | ||
| '&$frontVisible $cardBack': { opacity: 0 }, | ||
| outline: 'none', | ||
| overflow: 'hidden', | ||
| }), | ||
| cardFlipper: { | ||
| transition: '0.6s', | ||
| transformStyle: 'preserve-3d', | ||
| position: 'relative', | ||
| }, | ||
| cardFront: { | ||
| extend: 'cardFace', | ||
| zIndex: 2, | ||
| transform: 'rotateY(0deg)', | ||
| }, | ||
| cardBack: { | ||
| extend: 'cardFace', | ||
| transform: 'rotateY(180deg)', | ||
| }, | ||
| }); | ||
|
|
||
| /** | ||
| * Base card molecule | ||
| * @param props Card props | ||
| */ | ||
| export const BaseCard: React.FC<BaseCardProps> = ({ | ||
| frontFace, | ||
| backFace, | ||
| width = undefined, | ||
| height = undefined, | ||
| } = {}) => { | ||
| const { backVisible, frontVisible, card, cardFlipper, cardFront, cardBack } = useStyles({ width, height }); | ||
| const [visibleFace, setVisibleFace] = useState<'front' | 'back'>('front'); | ||
|
|
||
| const turnCard = (): void => setVisibleFace(visibleFace === 'front' ? 'back' : 'front'); | ||
| const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => event.keyCode === 32 && turnCard(); | ||
|
|
||
| return ( | ||
| <div | ||
| data-testid="BaseCard" | ||
| role="button" | ||
| onClick={turnCard} | ||
| onKeyDown={onKeyDown} | ||
| className={`${card} ${visibleFace === 'back' ? backVisible : frontVisible}`} | ||
| tabIndex={0} | ||
| > | ||
| <div className={cardFlipper}> | ||
| <div className={cardFront}>{frontFace}</div> | ||
| <div className={cardBack}>{backFace}</div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| /* eslint-disable import/no-extraneous-dependencies */ | ||
| // jest-dom adds custom jest matchers for asserting on DOM nodes. | ||
| // allows you to do things like: | ||
| // expect(element).toHaveTextContent(/react/i) | ||
| // learn more: https://github.com/testing-library/jest-dom | ||
| import '@testing-library/jest-dom/extend-expect'; | ||
| import '@testing-library/jest-dom'; |
Oops, something went wrong.