Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat #65 - Form Component #67

Merged
merged 12 commits into from
Aug 27, 2020
19 changes: 12 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"directory": "@dassana-io/web-components"
},
"dependencies": {
"@ant-design/icons": "^4.2.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
Expand All @@ -21,6 +22,7 @@
"classnames": "^2.2.6",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hook-form": "^6.5.0",
"react-jss": "^10.4.0",
"react-scripts": "^3.4.3",
"typescript": "^3.9.7"
Expand Down Expand Up @@ -77,7 +79,7 @@
"chromatic": "^5.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint-plugin-react": "^7.20.5",
"eslint-plugin-react": "^7.20.6",
"normalize.css": "^8.0.1",
"react-test-renderer": "^16.13.1",
"rollup": "^2.26.4",
Expand Down
175 changes: 133 additions & 42 deletions src/__snapshots__/storybook.test.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,56 @@ exports[`Storyshots Button Google 1`] = `
</button>
`;

exports[`Storyshots Button Loading 1`] = `
<button
className="ant-btn ant-btn-default"
disabled={false}
onClick={[Function]}
type="button"
>
<span
style={
Object {
"paddingRight": 8,
}
}
>
<div
className="ant-spin ant-spin-spinning"
>
<span
aria-label="loading"
className="anticon anticon-loading ant-spin-dot"
role="img"
style={
Object {
"fontSize": 16,
}
}
>
<svg
aria-hidden="true"
className="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</div>
</span>
<span>
Loading
</span>
</button>
`;

exports[`Storyshots Button Primary 1`] = `
<button
className="ant-btn ant-btn-primary"
Expand All @@ -85,6 +135,71 @@ exports[`Storyshots Button Primary Disabled 1`] = `
</button>
`;

exports[`Storyshots Form Default 1`] = `
<form
onSubmit={[Function]}
>
<div
className="container-0-2-2"
>
<div>
<div
className="container-0-2-3 required-0-2-4"
>
First Name
</div>
<div
className="container-0-2-5 container-d0-0-2-8"
>
<input
className="ant-input"
disabled={false}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
placeholder=""
type="text"
value="First Name"
/>
</div>
</div>
<div>
<div
className="container-0-2-3"
>
Last Name
</div>
<div
className="container-0-2-5 container-d1-0-2-9"
>
<input
className="ant-input"
disabled={false}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
placeholder=""
type="text"
value=""
/>
</div>
</div>
<button
className="ant-btn ant-btn-default"
disabled={false}
onClick={[Function]}
type="button"
>
<span>
Submit
</span>
</button>
</div>
</form>
`;

exports[`Storyshots Icon Custom 1`] = `
<img
alt="https://dummyimage.com/600x400/000/fff&text=Dassana"
Expand All @@ -101,15 +216,10 @@ exports[`Storyshots Icon Predefined 1`] = `
/>
`;

exports[`Storyshots InputField Default 1`] = `
exports[`Storyshots Input Default 1`] = `
<div
className="container-0-2-2 container-d0-0-2-7"
className="container-0-2-5 container-d2-0-2-10"
>
<div
className="label-0-2-5"
>
Field Label
</div>
<input
className="ant-input"
disabled={false}
Expand All @@ -124,17 +234,12 @@ exports[`Storyshots InputField Default 1`] = `
</div>
`;

exports[`Storyshots InputField Error 1`] = `
exports[`Storyshots Input Error 1`] = `
<div
className="container-0-2-2 container-d4-0-2-14"
className="container-0-2-5 container-d6-0-2-16"
>
<div
className="label-0-2-5"
>
Field Label
</div>
<input
className="ant-input error-0-2-3"
className="ant-input error-0-2-6"
disabled={false}
onBlur={[Function]}
onChange={[Function]}
Expand All @@ -147,15 +252,10 @@ exports[`Storyshots InputField Error 1`] = `
</div>
`;

exports[`Storyshots InputField Full Width 1`] = `
exports[`Storyshots Input Full Width 1`] = `
<div
className="container-0-2-2 container-d3-0-2-13"
className="container-0-2-5 container-d5-0-2-15"
>
<div
className="label-0-2-5"
>
Field Label
</div>
<input
className="ant-input"
disabled={false}
Expand All @@ -170,24 +270,15 @@ exports[`Storyshots InputField Full Width 1`] = `
</div>
`;

exports[`Storyshots InputField Loading 1`] = `
exports[`Storyshots Input Loading 1`] = `
<div
className="container-0-2-2 container-d2-0-2-9"
className="container-0-2-5 container-d4-0-2-12"
>
<div
className="label-0-2-5"
>
<span
className="container-0-2-10 container-d0-0-2-11"
>

</span>
</div>
<div
className="input-0-2-4"
className="input-0-2-7"
>
<span
className="container-0-2-10 container-d1-0-2-12"
className="container-0-2-13 container-d0-0-2-14"
>

</span>
Expand Down Expand Up @@ -231,7 +322,7 @@ exports[`Storyshots Link Href 1`] = `

exports[`Storyshots Skeleton Circle 1`] = `
<span
className="container-0-2-10 container-d3-0-2-16"
className="container-0-2-13 container-d2-0-2-18"
>

</span>
Expand All @@ -240,27 +331,27 @@ exports[`Storyshots Skeleton Circle 1`] = `
exports[`Storyshots Skeleton Count 1`] = `
Array [
<span
className="container-0-2-10 container-d4-0-2-17"
className="container-0-2-13 container-d3-0-2-19"
>

</span>,
<span
className="container-0-2-10 container-d4-0-2-17"
className="container-0-2-13 container-d3-0-2-19"
>

</span>,
<span
className="container-0-2-10 container-d4-0-2-17"
className="container-0-2-13 container-d3-0-2-19"
>

</span>,
<span
className="container-0-2-10 container-d4-0-2-17"
className="container-0-2-13 container-d3-0-2-19"
>

</span>,
<span
className="container-0-2-10 container-d4-0-2-17"
className="container-0-2-13 container-d3-0-2-19"
>

</span>,
Expand All @@ -269,7 +360,7 @@ Array [

exports[`Storyshots Skeleton Default 1`] = `
<span
className="container-0-2-10 container-d2-0-2-15"
className="container-0-2-13 container-d1-0-2-17"
>

</span>
Expand Down
3 changes: 3 additions & 0 deletions src/components/Button/Button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ Default.args = { children: 'Default' }
export const Disabled = Template.bind({})
Disabled.args = { children: 'Disabled', disabled: true }

export const Loading = Template.bind({})
Loading.args = { children: 'Loading', loading: true }
nancy-dassana marked this conversation as resolved.
Show resolved Hide resolved

nancy-dassana marked this conversation as resolved.
Show resolved Hide resolved
export const Primary = Template.bind({})
Primary.args = { children: 'Primary', primary: true }

Expand Down
26 changes: 25 additions & 1 deletion src/components/Button/Button.test.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Button as AntDButton } from 'antd'
import React from 'react'
import Skeleton from '../Skeleton'
import { Button as AntDButton, Spin } from 'antd'
import Button, { ButtonProps } from '.'
import { shallow, ShallowWrapper } from 'enzyme'

Expand Down Expand Up @@ -35,6 +36,18 @@ describe('Button', () => {
})
})

describe('rendering', () => {
it('renders a skeleton', () => {
wrapper = shallow(
<Button onClick={mockClick} rendering>
Test
</Button>
)

expect(wrapper.find(Skeleton)).toHaveLength(1)
})
nancy-dassana marked this conversation as resolved.
Show resolved Hide resolved
})

describe('Disabled Button', () => {
it('has correct prop "disabled" and correct class "disabled"', () => {
wrapper = shallow(
Expand All @@ -45,3 +58,14 @@ describe('Disabled Button', () => {
expect(wrapper.props().disabled).toBeTruthy()
})
})

describe('Loading Button', () => {
nancy-dassana marked this conversation as resolved.
Show resolved Hide resolved
it('has correct prop "loading"', () => {
wrapper = shallow(
<Button loading onClick={mockClick}>
Test
</Button>
)
expect(wrapper.find(Spin)).toHaveLength(1)
})
})
Loading