Skip to content

P
paragon
Commit f74f0959 by Ari Rizzitano Committed by GitHub
Options

Merge pull request #4 from edx/ari/reorg 

new directory structure + upgrade + integrations
parents b2c1510b 38ddc861
Showing with 571 additions and 501 deletions
.gitignore
......@@ -2,3 +2,4 @@
.eslintcache
node_modules
npm-debug.log
coverage
stories/Welcome.jsx → .storybook/Paragon.stories.jsx
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react';
const styles = {
main: {
......@@ -7,45 +9,19 @@ const styles = {
lineHeight: 1.4,
fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
},
logo: {
width: 200,
},
link: {
color: '#1474f3',
textDecoration: 'none',
borderBottom: '1px solid #1474f3',
paddingBottom: 2,
},
code: {
fontSize: 15,
fontWeight: 600,
padding: '2px 5px',
border: '1px solid #eae9e9',
borderRadius: 4,
backgroundColor: '#f3f2f2',
color: '#3a3a3a',
},
note: {
opacity: 0.5,
},
};
export default function Welcome() {
return (
storiesOf('Paragon', module)
.add('Welcome', () => (
<div style={styles.main}>
<h1>Paragon</h1>
<h1>💎 Paragon</h1>
<p>
This is a documentation and demo space for the Paragon accessible UI Component
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
style={styles.link}
href="https://github.com/kadirahq/react-storybook"
target="_blank"
rel="noopener noreferrer"
......@@ -54,5 +30,4 @@ export default function Welcome() {
</a>.
</p>
</div>
);
}
));
.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>
`;
.storybook/addons.js 0 → 100644
import '@storybook/addon-options/register';
.storybook/config.js
import { configure } from '@kadira/storybook';
import { configure } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
setOptions({
name: '💎 PARAGON',
url: 'https://github.com/edx/paragon',
showDownPanel: false,
});
const req = require.context('../src', true, /\.stories\.jsx$/);
function loadStories() {
require('../stories');
require('./Paragon.stories.jsx');
req.keys().forEach((filename) => req(filename));
}
configure(loadStories, module);
.storybook/head.html deleted 100644 → 0
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
.travis.yml 0 → 100644
language: node_js
node_js:
- 6
after_script:
- yarn run coveralls
package.json
......@@ -8,34 +8,35 @@
"scripts": {
"build": "NODE_ENV=production webpack",
"build-storybook": "build-storybook",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"deploy-storybook": "storybook-to-ghpages",
"lint": "eslint --ext .js --ext .jsx .",
"precommit": "yarn run lint",
"start": "start-storybook -p 6006",
"test": "jest",
"test-storybook": "storyshots"
"test": "jest --coverage"
},
"dependencies": {
"babel-jest": "^20.0.3",
"babel-preset-es2015": "^6.24.1",
"classnames": "^2.2.5",
"prop-types": "^15.5.8",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-test-renderer": "^15.6.1",
"react-transition-group": "^1.1.2",
"reactstrap": "^4.6.2"
},
"devDependencies": {
"@kadira/storybook": "^2.35.3",
"@kadira/storybook-deployer": "^1.2.0",
"@kadira/storyshots": "^2.1.0",
"@storybook/addon-options": "^3.1.6",
"@storybook/addon-storyshots": "^3.1.7",
"@storybook/react": "3.1.3",
"@storybook/storybook-deployer": "^2.0.0",
"babel-cli": "^6.24.1",
"babel-jest": "^20.0.3",
"babel-loader": "^7.0.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-babili": "^0.0.12",
"babel-preset-env": "^1.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"coveralls": "^2.13.1",
"enzyme": "^2.8.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
......@@ -46,6 +47,7 @@
"husky": "^0.13.4",
"jest": "^20.0.4",
"react-router-dom": "^4.1.1",
"react-test-renderer": "^15.6.1",
"source-map-loader": "^0.2.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4"
......
src/CheckBox/CheckBox.stories.jsx 0 → 100644
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-console */
import React from 'react';
import { storiesOf } from '@storybook/react';
import CheckBox from './index';
storiesOf('CheckBox', module)
.add('basic usage', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="check me out!"
checked="false"
/>
))
.add('disabled', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="you cannot check me out"
checked="false"
disabled
/>
))
.add('default checked', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="(un)check me out"
checked="true"
/>
))
.add('call a function', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="check out the console"
checked="false"
onChange={() => console.log('the checkbox changed state')}
/>
));
__tests__/checkbox-test.jsx → src/CheckBox/CheckBox.test.jsx
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-console */
import React from 'react';
import { shallow, mount } from 'enzyme';
import CheckBox from '../src/CheckBox';
import CheckBox from './index';
describe('<CheckBox />', () => {
it('attributes are set correctly', () => {
......
src/CheckBox.jsx → src/CheckBox/index.jsx
import React from 'react';
import { inputProps } from './utils/asInput';
import newId from './utils/newId';
import { inputProps } from '../utils/asInput';
import newId from '../utils/newId';
class CheckBox extends React.Component {
constructor(props) {
......
stories/index.jsx → src/InputSelect/InputSelect.stories.jsx
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-console */
import React from 'react';
import { storiesOf, linkTo } from '@kadira/storybook';
import { storiesOf } from '@storybook/react';
import TextInput from '../src/TextInput';
import SelectInput from '../src/SelectInput';
import CheckBox from '../src/CheckBox';
import Welcome from './Welcome';
import InputSelect from './index';
storiesOf('Welcome', module)
.add('to Storybook', () => (
<Welcome showApp={linkTo('Button')} />
));
storiesOf('TextInput', module)
.add('minimal usage', () => (
<TextInput
name="name"
label="First Name"
value="Foo Bar"
/>
))
.add('validation', () => (
<TextInput
name="username"
label="Username"
description="The unique name that identifies you throughout the site."
validator={(value) => {
let feedback = { isValid: true };
if (value.length < 3) {
feedback = {
isValid: false,
validationMessage: 'Username must be at least 3 characters in length.',
};
}
return feedback;
}}
/>
));
storiesOf('SelectInput', module)
storiesOf('InputSelect', module)
.add('basic usage', () => (
<SelectInput
<InputSelect
name="fruits"
label="Fruits"
value="strawberry"
......@@ -54,7 +19,7 @@ storiesOf('SelectInput', module)
/>
))
.add('separate labels and values', () => (
<SelectInput
<InputSelect
name="new-england-states"
label="New England States"
value="RI"
......@@ -69,7 +34,7 @@ storiesOf('SelectInput', module)
/>
))
.add('separate option groups', () => (
<SelectInput
<InputSelect
name="northeast-states"
label="Northeast States"
value="MD"
......@@ -102,7 +67,7 @@ storiesOf('SelectInput', module)
/>
))
.add('with validation', () => (
<SelectInput
<InputSelect
name="color"
label="Favorite Color"
options={[
......@@ -126,39 +91,3 @@ storiesOf('SelectInput', module)
}}
/>
));
storiesOf('CheckBox', module)
.add('basic usage', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="check me out!"
checked="false"
/>
))
.add('disabled', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="you cannot check me out"
checked="false"
disabled
/>
))
.add('default checked', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="(un)check me out"
checked="true"
/>
))
.add('call a function', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="check out the console"
checked="false"
onChange={() => console.log('the checkbox changed state')}
/>
));
src/SelectInput.jsx → src/InputSelect/index.jsx
......@@ -2,7 +2,7 @@ import React from 'react';
import { Input } from 'reactstrap';
import PropTypes from 'prop-types';
import asInput, { inputProps } from './utils/asInput';
import asInput, { inputProps } from '../utils/asInput';
class Select extends React.Component {
static getOption(option, i) {
......@@ -63,11 +63,11 @@ Select.propTypes = {
]).isRequired,
};
const SelectInput = asInput(Select);
const InputSelect = asInput(Select);
SelectInput.propTypes = {
...SelectInput.propTypes,
InputSelect.propTypes = {
...InputSelect.propTypes,
...Select.propTypes,
};
export default SelectInput;
export default InputSelect;
src/InputText/InputText.stories.jsx 0 → 100644
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react';
import InputText from './index';
storiesOf('InputText', module)
.add('minimal usage', () => (
<InputText
name="name"
label="First Name"
value="Foo Bar"
/>
))
.add('validation', () => (
<InputText
name="username"
label="Username"
description="The unique name that identifies you throughout the site."
validator={(value) => {
let feedback = { isValid: true };
if (value.length < 3) {
feedback = {
isValid: false,
validationMessage: 'Username must be at least 3 characters in length.',
};
}
return feedback;
}}
/>
));
src/TextInput.jsx → src/InputText/index.jsx
import React from 'react';
import { Input } from 'reactstrap';
import asInput, { inputProps } from './utils/asInput';
import asInput, { inputProps } from '../utils/asInput';
function TextField(props) {
function Text(props) {
return (
<Input
id={props.id}
......@@ -22,8 +22,8 @@ function TextField(props) {
);
}
TextField.propTypes = inputProps;
Text.propTypes = inputProps;
const TextInput = asInput(TextField);
const InputText = asInput(Text);
export default TextInput;
export default InputText;
src/TabInterface.jsx → src/Tabs/index.jsx
......@@ -3,9 +3,9 @@ import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { newId } from './utils/newId';
import { newId } from '../utils/newId';
class TabInterface extends React.Component {
class Tabs extends React.Component {
constructor(props) {
super(props);
......@@ -95,7 +95,7 @@ class TabInterface extends React.Component {
}
// TODO: custom validator that ensures tabLabels and panels are the same length
TabInterface.propTypes = {
Tabs.propTypes = {
tabLabels: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.String),
PropTypes.arrayOf(PropTypes.Element),
......@@ -103,4 +103,4 @@ TabInterface.propTypes = {
panels: PropTypes.arrayOf(PropTypes.Element).isRequired,
};
export default TabInterface;
export default Tabs;
src/index.js
import SelectInput from './SelectInput';
import TabInterface from './TabInterface';
import TextInput from './TextInput';
import CheckBox from './CheckBox';
import InputSelect from './InputSelect';
import InputText from './InputText';
import Tabs from './Tabs';
export {
SelectInput,
TabInterface,
TextInput,
CheckBox,
InputSelect,
InputText,
Tabs,
};
yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
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