Skip to content

P
paragon
Commit da45db5c by Ari Rizzitano
Options

upgrade storyshots

parent 1cfec874
Showing with 427 additions and 359 deletions
.storybook/Storyshots.test.js 0 → 100644
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();
.storybook/__snapshots__/Storyshots.test.js.snap 0 → 100644
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots CheckBox basic usage 1`] = `
<label
htmlFor="checkbox1"
>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled={undefined}
id="checkbox1"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox"
/>
check me out!
</label>
`;
exports[`Storyshots CheckBox call a function 1`] = `
<label
htmlFor="checkbox4"
>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled={undefined}
id="checkbox4"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox"
/>
check out the console
</label>
`;
exports[`Storyshots CheckBox default checked 1`] = `
<label
htmlFor="checkbox3"
>
<input
aria-checked={true}
aria-describedby="checkbox"
defaultChecked={true}
disabled={undefined}
id="checkbox3"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox"
/>
(un)check me out
</label>
`;
exports[`Storyshots CheckBox disabled 1`] = `
<label
htmlFor="checkbox2"
>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled={true}
id="checkbox2"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox"
/>
you cannot check me out
</label>
`;
exports[`Storyshots InputSelect basic usage 1`] = `
<div
className="form-group"
>
<label
className=""
htmlFor="textInput5"
>
Fruits
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput5"
name="fruits"
onBlur={[Function]}
onChange={[Function]}
value="strawberry"
>
<option
value="apple"
>
apple
</option>
<option
value="orange"
>
orange
</option>
<option
value="strawberry"
>
strawberry
</option>
<option
value="banana"
>
banana
</option>
</select>
</div>
`;
exports[`Storyshots InputSelect separate labels and values 1`] = `
<div
className="form-group"
>
<label
className=""
htmlFor="textInput6"
>
New England States
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput6"
name="new-england-states"
onBlur={[Function]}
onChange={[Function]}
value="RI"
>
<option
value="CN"
>
Connecticut
</option>
<option
value="ME"
>
Maine
</option>
<option
value="MA"
>
Massachusetts
</option>
<option
value="NH"
>
New Hampshire
</option>
<option
value="RI"
>
Rhode Island
</option>
<option
value="VT"
>
Vermont
</option>
</select>
</div>
`;
exports[`Storyshots InputSelect separate option groups 1`] = `
<div
className="form-group"
>
<label
className=""
htmlFor="textInput7"
>
Northeast States
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput7"
name="northeast-states"
onBlur={[Function]}
onChange={[Function]}
value="MD"
>
<optgroup
label="New England States"
>
<option
value="CN"
>
Connecticut
</option>
<option
value="ME"
>
Maine
</option>
<option
value="MA"
>
Massachusetts
</option>
<option
value="NH"
>
New Hampshire
</option>
<option
value="RI"
>
Rhode Island
</option>
<option
value="VT"
>
Vermont
</option>
</optgroup>
<optgroup
label="Mid Atlantic States"
>
<option
value="DE"
>
Delaware
</option>
<option
value="MD"
>
Maryland
</option>
<option
value="NJ"
>
New Jersey
</option>
<option
value="NY"
>
New York
</option>
<option
value="PA"
>
Pennsylvania
</option>
<option
value="VA"
>
Virginia
</option>
<option
value="DC"
>
Washington, DC
</option>
<option
value="WV"
>
West Virginia
</option>
</optgroup>
</select>
</div>
`;
exports[`Storyshots InputSelect with validation 1`] = `
<div
className="form-group"
>
<label
className=""
htmlFor="textInput8"
>
Favorite Color
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput8"
name="color"
onBlur={[Function]}
onChange={[Function]}
value=""
>
<option
value=""
>
</option>
<option
value="red"
>
red
</option>
<option
value="orange"
>
orange
</option>
<option
value="yellow"
>
yellow
</option>
<option
value="green"
>
green
</option>
<option
value="blue"
>
blue
</option>
<option
value="purple"
>
purple
</option>
</select>
</div>
`;
exports[`Storyshots InputText minimal usage 1`] = `
<div
className="form-group"
>
<label
className=""
htmlFor="textInput9"
>
First Name
</label>
<input
aria-describedby={undefined}
aria-invalid={false}
className="form-control"
disabled={false}
id="textInput9"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder={undefined}
required={false}
type="text"
value="Foo Bar"
/>
</div>
`;
exports[`Storyshots InputText validation 1`] = `
<div
className="form-group"
>
<label
className=""
htmlFor="textInput10"
>
Username
</label>
<input
aria-describedby="undefined description-textInput10"
aria-invalid={false}
className="form-control"
disabled={false}
id="textInput10"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder={undefined}
required={false}
type="text"
value=""
/>
<small
className="form-text"
id="description-textInput10"
>
The unique name that identifies you throughout the site.
</small>
</div>
`;
exports[`Storyshots Paragon Welcome 1`] = `
<div
style={
Object {
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
"lineHeight": 1.4,
"margin": 15,
"maxWidth": 600,
}
}
>
<h1>
💎 Paragon
</h1>
<p>
This is a documentation and demo space for the Paragon accessible UI component library. Better docs coming soon, but for now, check out our existing components via the links to the left-hand side.
</p>
<p>
Documentation generated with
<a
href="https://github.com/kadirahq/react-storybook"
rel="noopener noreferrer"
target="_blank"
>
React Storybook
</a>
.
</p>
</div>
`;
.storybook/__storyshots__/CheckBox.shot deleted 100644 → 0
exports[`basic usage`] = `
<label>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled={undefined}
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox" />
check me out!
</label>
`;
exports[`call a function`] = `
<label>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled={undefined}
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox" />
check out the console
</label>
`;
exports[`default checked`] = `
<label>
<input
aria-checked={true}
aria-describedby="checkbox"
defaultChecked={true}
disabled={undefined}
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox" />
(un)check me out
</label>
`;
exports[`disabled`] = `
<label>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled="true"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox" />
you cannot check me out
</label>
`;
.storybook/__storyshots__/SelectInput.shot deleted 100644 → 0
exports[`basic usage`] = `
<div
className="form-group">
<label
className=""
htmlFor="textInput3">
Fruits
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput3"
name="fruits"
onBlur={[Function]}
onChange={[Function]}
value="strawberry">
<option
value="apple">
apple
</option>
<option
value="orange">
orange
</option>
<option
value="strawberry">
strawberry
</option>
<option
value="banana">
banana
</option>
</select>
</div>
`;
exports[`separate labels and values`] = `
<div
className="form-group">
<label
className=""
htmlFor="textInput4">
New England States
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput4"
name="new-england-states"
onBlur={[Function]}
onChange={[Function]}
value="RI">
<option
value="CN">
Connecticut
</option>
<option
value="ME">
Maine
</option>
<option
value="MA">
Massachusetts
</option>
<option
value="NH">
New Hampshire
</option>
<option
value="RI">
Rhode Island
</option>
<option
value="VT">
Vermont
</option>
</select>
</div>
`;
exports[`separate option groups`] = `
<div
className="form-group">
<label
className=""
htmlFor="textInput5">
Northeast States
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput5"
name="northeast-states"
onBlur={[Function]}
onChange={[Function]}
value="MD">
<optgroup
label="New England States">
<option
value="CN">
Connecticut
</option>
<option
value="ME">
Maine
</option>
<option
value="MA">
Massachusetts
</option>
<option
value="NH">
New Hampshire
</option>
<option
value="RI">
Rhode Island
</option>
<option
value="VT">
Vermont
</option>
</optgroup>
<optgroup
label="Mid Atlantic States">
<option
value="DE">
Delaware
</option>
<option
value="MD">
Maryland
</option>
<option
value="NJ">
New Jersey
</option>
<option
value="NY">
New York
</option>
<option
value="PA">
Pennsylvania
</option>
<option
value="VA">
Virginia
</option>
<option
value="DC">
Washington, DC
</option>
<option
value="WV">
West Virginia
</option>
</optgroup>
</select>
</div>
`;
exports[`with validation`] = `
<div
className="form-group">
<label
className=""
htmlFor="textInput6">
Favorite Color
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput6"
name="color"
onBlur={[Function]}
onChange={[Function]}
value="">
<option
value="">
</option>
<option
value="red">
red
</option>
<option
value="orange">
orange
</option>
<option
value="yellow">
yellow
</option>
<option
value="green">
green
</option>
<option
value="blue">
blue
</option>
<option
value="purple">
purple
</option>
</select>
</div>
`;
.storybook/__storyshots__/TextInput.shot deleted 100644 → 0
exports[`minimal usage`] = `
<div
className="form-group">
<label
className=""
htmlFor="textInput1">
First Name
</label>
<input
aria-describedby={undefined}
aria-invalid={false}
className="form-control"
disabled={false}
id="textInput1"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder={undefined}
required={false}
type="text"
value="Foo Bar" />
</div>
`;
exports[`validation`] = `
<div
className="form-group">
<label
className=""
htmlFor="textInput2">
Username
</label>
<input
aria-describedby="undefined description-textInput2"
aria-invalid={false}
className="form-control"
disabled={false}
id="textInput2"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder={undefined}
required={false}
type="text"
value="" />
<small
className="form-text"
id="description-textInput2">
The unique name that identifies you throughout the site.
</small>
</div>
`;
.storybook/__storyshots__/Welcome.shot deleted 100644 → 0
exports[`to Storybook`] = `
<div
style={
Object {
"fontFamily": "\"Helvetica Neue\", Helvetica, \"Segoe UI\", Arial, freesans, sans-serif",
"lineHeight": 1.4,
"margin": 15,
"maxWidth": 600,
}
}>
<h1>
Paragon
</h1>
<p>
This is a documentation and demo space for the Paragon accessible UI Component library. Better docs coming soon, but for now, check out our existing components via the links to the left-hand side.
</p>
<p>
Documentation generated with
<a
href="https://github.com/kadirahq/react-storybook"
rel="noopener noreferrer"
style={
Object {
"borderBottom": "1px solid #1474f3",
"color": "#1474f3",
"paddingBottom": 2,
"textDecoration": "none",
}
}
target="_blank">
React Storybook
</a>
.
</p>
</div>
`;
package.json
...@@ -12,8 +12,7 @@ ...@@ -12,8 +12,7 @@
"lint": "eslint --ext .js --ext .jsx .", "lint": "eslint --ext .js --ext .jsx .",
"precommit": "yarn run lint", "precommit": "yarn run lint",
"start": "start-storybook -p 6006", "start": "start-storybook -p 6006",
"test": "jest", "test": "jest"
"test-storybook": "storyshots"
}, },
"dependencies": { "dependencies": {
"classnames": "^2.2.5", "classnames": "^2.2.5",
...@@ -25,7 +24,6 @@ ...@@ -25,7 +24,6 @@
}, },
"devDependencies": { "devDependencies": {
"@kadira/storybook-deployer": "^1.2.0", "@kadira/storybook-deployer": "^1.2.0",
"@kadira/storyshots": "^2.1.0",
"@storybook/addon-options": "^3.1.6", "@storybook/addon-options": "^3.1.6",
"@storybook/addon-storyshots": "^3.1.7", "@storybook/addon-storyshots": "^3.1.7",
"@storybook/react": "3.1.3", "@storybook/react": "3.1.3",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment