From fc5b3fa7296ca16250ba98a9eb857b11fbff6082 Mon Sep 17 00:00:00 2001 From: Sam M <68707128+sam-m-m@users.noreply.github.com> Date: Thu, 20 Aug 2020 17:33:48 -0700 Subject: [PATCH] Feat #30 - Toggle and Icon components (#52) * Feat #30 - Add toggle component, icon component, improved verified labels action --- .github/workflows/verify-labels.yml | 27 ------- src/__snapshots__/storybook.test.ts.snap | 94 +++++++++++++++++++++++- src/components/Button/Button.test.tsx | 2 +- src/components/Button/index.tsx | 2 +- src/components/Link/Link.stories.tsx | 31 +++++--- src/components/Link/Link.test.tsx | 69 ++++++++++------- src/components/Link/index.tsx | 29 +++++--- src/components/Tag/Tag.stories.tsx | 2 +- src/components/Tag/Tag.test.tsx | 8 -- src/components/index.ts | 4 +- 10 files changed, 181 insertions(+), 87 deletions(-) diff --git a/.github/workflows/verify-labels.yml b/.github/workflows/verify-labels.yml index 6998a318..cf171141 100644 --- a/.github/workflows/verify-labels.yml +++ b/.github/workflows/verify-labels.yml @@ -1,5 +1,3 @@ -<<<<<<< HEAD -<<<<<<< HEAD name: Pull Request Labels on: pull_request: @@ -22,28 +20,3 @@ jobs: mode: minimum count: 1 labels: 'fix, bug, bugfix, feature, enhancement, chore' -======= -======= ->>>>>>> chore #41 - Add verify labels GitHub action (#42) -name: Verify Labels - -on: - pull_request: - types: [opened, labeled, unlabeled, synchronize] - -jobs: - check_pr_labels: - runs-on: ubuntu-latest - name: Verify that the PR has a valid label - steps: - - name: Checkout - uses: actions/checkout@v2 - - name: Verify PR label action - uses: jesusvasquez333/verify-pr-label-action@v1.1.0 - with: - github-token: '${{ secrets.GITHUB_TOKEN }}' - valid-labels: 'fix, bug, bugfix, feature, enhancement, chore' -<<<<<<< HEAD ->>>>>>> chore #41 - Add verify labels GitHub action (#42) -======= ->>>>>>> chore #41 - Add verify labels GitHub action (#42) diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index 2f9fd953..bbab594d 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -85,6 +85,22 @@ exports[`Storyshots Button Primary Disabled 1`] = ` `; +exports[`Storyshots Icon Custom 1`] = ` +https://dummyimage.com/600x400/000/fff&text=Dassana +`; + +exports[`Storyshots Icon Predefined 1`] = ` +dassana-orange +`; + exports[`Storyshots InputField Default 1`] = `
`; -exports[`Storyshots Link Default 1`] = ` +exports[`Storyshots Link Click 1`] = ` - Default + Click + + +`; + +exports[`Storyshots Link Href 1`] = ` + + + Href `; @@ -249,3 +281,59 @@ exports[`Storyshots Tag Default 1`] = ` Default `; + +exports[`Storyshots Toggle Checked Disabled 1`] = ` + +`; + +exports[`Storyshots Toggle Default 1`] = ` + +`; + +exports[`Storyshots Toggle Disabled 1`] = ` + +`; diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx index 98728d10..e5774b71 100644 --- a/src/components/Button/Button.test.tsx +++ b/src/components/Button/Button.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Button, { ButtonProps } from './index' +import Button, { ButtonProps } from '.' import { shallow, ShallowWrapper } from 'enzyme' let wrapper: ShallowWrapper diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 8d82328e..badeeae6 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -19,7 +19,7 @@ export interface ButtonProps { primary?: boolean /** * Adds the disabled attribute and styles (opacity, gray scale filter, no pointer events). - * */ + */ disabled?: boolean /** * Array of classes to pass to button. diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx index c0712493..3a103800 100644 --- a/src/components/Link/Link.stories.tsx +++ b/src/components/Link/Link.stories.tsx @@ -1,6 +1,6 @@ import { action } from '@storybook/addon-actions' import React from 'react' -import Link, { LinkProps } from './index' +import Link, { LinkProps } from '.' import { Meta, Story } from '@storybook/react/types-6-0' export default { @@ -11,13 +11,26 @@ export default { title: 'Link' } as Meta -const linkProps: LinkProps = { - children: 'Default', - href: ' ', - onClick: action('onClick') -} - const Template: Story = args => -export const Default = Template.bind({}) -Default.args = linkProps +export const Href = Template.bind({}) +Href.argTypes = { + onClick: { + control: { disable: true } + } +} +Href.args = { + children: 'Href', + href: ' ' +} + +export const Click = Template.bind({}) +Click.argTypes = { + href: { + control: { disable: true } + } +} +Click.args = { + children: 'Click', + onClick: action('onClick') +} diff --git a/src/components/Link/Link.test.tsx b/src/components/Link/Link.test.tsx index 504d33f1..b2ea2514 100644 --- a/src/components/Link/Link.test.tsx +++ b/src/components/Link/Link.test.tsx @@ -1,43 +1,62 @@ import React from 'react' import Link, { LinkProps } from '.' -import { mount, ReactWrapper, shallow } from 'enzyme' +import { mount, ReactWrapper } from 'enzyme' let wrapper: ReactWrapper let mockClick: jest.Mock -const mockProps: LinkProps = { - children: 'Test', - href: '/test', - target: '_blank' -} - -beforeEach(() => { - mockClick = jest.fn() - wrapper = mount() -}) +let mockProps: LinkProps -describe('Link', () => { - it('renders', () => { - const link = wrapper.find(Link) - expect(link).toHaveLength(1) +describe('Link with href', () => { + beforeEach(() => { + mockProps = { + children: 'Test', + href: '/test', + target: '_blank' + } + + wrapper = mount() }) - it('calls onClick function when link is clicked', () => { - const link = wrapper.find(Link) - link.simulate('click') - expect(mockClick).toHaveBeenCalledTimes(1) + it('renders', () => { + expect(wrapper).toHaveLength(1) }) it('has the correct href attribute', () => { - const link = wrapper.find(Link) - expect(link.getDOMNode().getAttribute('href')).toBe(mockProps.href) + expect(wrapper.getDOMNode().getAttribute('href')).toBe(mockProps.href) }) it('has the correct target attribute', () => { - const link = wrapper.find(Link) - expect(link.getDOMNode().getAttribute('target')).toBe(mockProps.target) + expect(wrapper.getDOMNode().getAttribute('target')).toBe( + mockProps.target + ) }) +}) + +describe('Link', () => { + beforeEach(() => { + mockClick = jest.fn() + + mockProps = { + children: 'Test', + onClick: mockClick, + target: '_blank' + } - it('throws an error if both onClick and href props are undefined', () => { - expect(() => shallow(Test)).toThrow() + wrapper = mount() + }) + + it('renders', () => { + expect(wrapper).toHaveLength(1) + }) + + it('calls onClick function when link is clicked', () => { + wrapper.simulate('click') + expect(mockClick).toHaveBeenCalledTimes(1) + }) + + it('has the correct target attribute', () => { + expect(wrapper.getDOMNode().getAttribute('target')).toBe( + mockProps.target + ) }) }) diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx index 7cc2ccb3..72c37f01 100644 --- a/src/components/Link/index.tsx +++ b/src/components/Link/index.tsx @@ -1,6 +1,6 @@ import 'antd/lib/typography/style/index.css' import { createUseStyles } from 'react-jss' -import { linkColor } from '../../styles/styleguide' +import { linkColor } from 'styles/styleguide' import { Typography } from 'antd' import React, { FC, ReactNode } from 'react' @@ -8,25 +8,35 @@ const AntDLink = Typography.Link export type LinkTargetType = '_self' | '_blank' -export interface LinkProps { +interface SharedLinkProps { /** * Link children to render including link text. */ children: ReactNode /** - * The URL the link goes to. + * Where to open the linked url - either in a new tab or the current browsing context. */ - href?: string + target?: LinkTargetType +} + +interface LinkHref extends SharedLinkProps { /** - * Click handler. **Note**: While both `onClick` and `href` are optional, one of them is required. + * The URL the link goes to. */ - onClick?: () => void + href: string /** - * Where to open the linked url - either in a new tab or the current browsing context. + * Click handler. **Note**: Either an `onClick` or `href` is required. */ - target?: LinkTargetType + onClick?: never +} + +interface LinkClick extends SharedLinkProps { + href?: never + onClick: () => void } +export type LinkProps = LinkHref | LinkClick + interface AntDProps extends Omit { underline: boolean } @@ -54,9 +64,6 @@ const Link: FC = ({ underline: true } - if (!onClick && !href) - throw new Error('Link requires either an onClick or href prop.') - return {children} } diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx index bc461cc7..78ac4d82 100644 --- a/src/components/Tag/Tag.stories.tsx +++ b/src/components/Tag/Tag.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Meta, Story } from '@storybook/react/types-6-0' -import Tag, { TagProps } from './index' +import Tag, { TagProps } from '.' export default { argTypes: { diff --git a/src/components/Tag/Tag.test.tsx b/src/components/Tag/Tag.test.tsx index 2b4c065a..c8a6883c 100644 --- a/src/components/Tag/Tag.test.tsx +++ b/src/components/Tag/Tag.test.tsx @@ -1,14 +1,6 @@ import React from 'react' import { shallow, ShallowWrapper } from 'enzyme' -<<<<<<< HEAD -<<<<<<< HEAD import Tag, { TagProps } from '.' -======= -import Tag, { TagProps } from './index' ->>>>>>> Feat #43 - Tag, Link components -======= -import Tag, { TagProps } from './index' ->>>>>>> Feat #43 - Tag, Link components let wrapper: ShallowWrapper diff --git a/src/components/index.ts b/src/components/index.ts index 124c4d6e..e58de666 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,6 +1,8 @@ import 'normalize.css' -import '../styles/index.css' +import 'styles/index.css' export { default as Button } from './Button' export { default as InputField } from './InputField' +export { default as Icon } from './Icon' export { default as Link } from './Link' export { default as Tag } from './Tag' +export { default as Toggle } from './Toggle'