@storybook/addon-a11y - npm Package Compare versions

Comparing version 3.4.0-alpha.8 to 3.4.0-alpha.9

.storybook/components/Button/component.js

@@ -18,6 +18,6 @@ import React from 'react';
     backgroundColor: '#4caf50',
-  }
-}
+  },
+};
 
-function Button({ label, content, disabled, contrast }) {
+function Button({ content, disabled, contrast }) {
   return (
@@ -31,15 +31,15 @@ <button
     >
-      { content }
+      {content}
     </button>
-  )
+  );
 }
 
 Button.propTypes = {
-  label: PropTypes.string,
   content: PropTypes.string,
   disabled: PropTypes.bool,
-  contrast: PropTypes.oneOf(['ok', 'wrong'])
+  contrast: PropTypes.oneOf(['ok', 'wrong']),
 };
 
 Button.defaultProps = {
+  content: 'null',
   disabled: false,
@@ -46,0 +46,0 @@ contrast: 'ok',

.storybook/components/Button/stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import Faker from 'faker';
 
@@ -8,4 +9,2 @@ import { checkA11y } from './../../../src';
 
-import Faker from 'faker';
-
 const text = Faker.lorem.words();
@@ -15,22 +14,6 @@
   .addDecorator(checkA11y)
-  .add('Default', () => (
-    <Button />
-  ))
-  .add('Content', () => (
-    <Button content={text} />
-  ))
-  .add('Label', () => (
-    <Button label={text} />
-  ))
-  .add('Disabled', () => (
-    <Button
-      disabled
-      content={text}
-    />
-  ))
-  .add('Invalid contrast', () => (
-    <Button
-      contrast="wrong"
-      content={Faker.lorem.words()}
-    />
-  ));
+  .add('Default', () => <Button />)
+  .add('Content', () => <Button content={text} />)
+  .add('Label', () => <Button label={text} />)
+  .add('Disabled', () => <Button disabled content={text} />)
+  .add('Invalid contrast', () => <Button contrast="wrong" content={Faker.lorem.words()} />);

.storybook/components/Form/components/index.js

@@ -5,6 +5,2 @@ import Input from './Input';
 
-export {
-  Input,
-  Label,
-  Row,
-};
+export { Input, Label, Row };

.storybook/components/Form/components/Input.js

@@ -5,10 +5,3 @@ import React from 'react';
 function Input({ id, value, type, placeholder }) {
-  return (
-    <input
-      id={id}
-      value={value}
-      placeholder={placeholder}
-      type={type}
-    />
-  );
+  return <input id={id} value={value} placeholder={placeholder} type={type} />;
 }
@@ -21,4 +14,11 @@
   placeholder: PropTypes.string,
-}
+};
 
+Input.defaultProps = {
+  type: null,
+  id: null,
+  value: null,
+  placeholder: null,
+};
+
 export default Input;

.storybook/components/Form/components/Label.js

@@ -8,20 +8,17 @@ import React from 'react';
   },
-}
+};
 
 function Label({ id, content }) {
   return (
-    <label
-      style={styles.label}
-      htmlFor={id}
-    >
-      { content }
+    <label style={styles.label} htmlFor={id}>
+      {content}
     </label>
-  )
+  );
 }
 
 Label.propTypes = {
-  content: PropTypes.string,
-  id: PropTypes.string,
+  content: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
 };
 
 export default Label;

.storybook/components/Form/components/Row.js

@@ -18,5 +18,9 @@ import React from 'react';
   label: PropTypes.instanceOf(Label),
-  input: PropTypes.instanceOf(Input),
-}
+  input: PropTypes.instanceOf(Input).isRequired,
+};
 
+Row.defaultProps = {
+  label: null,
+};
+
 export default Row;

.storybook/components/Form/stories.js

 import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Faker from 'faker';
 
 import * as Form from './components';
 
-import { storiesOf } from '@storybook/react';
 import { checkA11y } from './../../../src';
 
-import Faker from 'faker';
-
 const label = Faker.lorem.word();
@@ -15,23 +14,8 @@ const placeholder = Faker.lorem.word();
   .addDecorator(checkA11y)
-  .add('Without Label', () => (
-    <Form.Row
-      input={<Form.Input />}
-    />
+  .add('Without Label', () => <Form.Row input={<Form.Input />} />)
+  .add('With label', () => (
+    <Form.Row label={<Form.Label content={label} id="1" />} input={<Form.Input id="1" />} />
   ))
-  .add ('With label', () => (
-    <Form.Row
-      label={<Form.Label
-        content={label}
-        id="1"
-      />}
-      input={<Form.Input id="1" />}
-    />
-  ))
-  .add ('With placeholder', () => (
-    <Form.Row
-      input={<Form.Input
-        id="1"
-        placeholder={placeholder}
-      />}
-    />
-  ))
+  .add('With placeholder', () => (
+    <Form.Row input={<Form.Input id="1" placeholder={placeholder} />} />
+  ));

.storybook/components/Image/component.js

@@ -5,9 +5,3 @@ import React from 'react';
 function Image({ src, alt, presentation }) {
-  return (
-    <img
-      src={src}
-      alt={alt}
-      role={presentation && 'presentation'}
-    />
-  );
+  return <img src={src} alt={alt} role={presentation && 'presentation'} />;
 }
@@ -21,2 +15,7 @@
 
+Image.defaultProps = {
+  alt: null,
+  presentation: false,
+};
+
 export default Image;

.storybook/components/Image/stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import Faker from 'faker';
 
@@ -8,4 +9,2 @@ import { checkA11y } from './../../../src';
 
-import Faker from 'faker';
-
 const image = Faker.image.animals();
@@ -16,16 +15,4 @@ const alt = Faker.lorem.words();
   .addDecorator(checkA11y)
-  .add('Without alt', () => (
-    <Image src={image} />
-  ))
-  .add('With alt', () => (
-    <Image
-      src={image}
-      alt={alt}
-    />
-  ))
-  .add('Presentation', () => (
-    <Image
-      presentation
-      src={image}
-    />
-  ));
+  .add('Without alt', () => <Image src={image} />)
+  .add('With alt', () => <Image src={image} alt={alt} />)
+  .add('Presentation', () => <Image presentation src={image} />);

.storybook/components/Typography/components/Heading.js

@@ -1,13 +0,13 @@
-import React, { cloneElement } from 'react';
+import { createElement } from 'react';
 import PropTypes from 'prop-types';
 
 const headings = {
-  1: (<h1 />),
-  2: (<h2 />),
-  3: (<h3 />),
-  4: (<h4 />),
+  1: 'h1',
+  2: 'h2',
+  3: 'h3',
+  4: 'h4',
 };
 
 function Heading({ level, children }) {
-  return cloneElement(headings[level], {}, children)
+  return createElement(headings[level], {}, children);
 }
@@ -17,3 +17,3 @@
   level: PropTypes.oneOf([1, 2, 3, 4]),
-  children: PropTypes.any,
+  children: PropTypes.node,
 };
@@ -20,0 +20,0 @@

.storybook/components/Typography/components/index.js

@@ -5,6 +5,2 @@ import Heading from './Heading';
 
-export {
-  Heading,
-  Link,
-  Text,
-};
+export { Heading, Link, Text };

.storybook/components/Typography/components/Link.js

@@ -5,14 +5,10 @@ import React from 'react';
 function Link({ href, content }) {
-  return (
-    <a href={href}>
-      { content }
-    </a>
-  );
+  return <a href={href}>{content}</a>;
 }
 
 Link.propTypes = {
-  href: PropTypes.string,
-  content: PropTypes.string,
+  href: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
 };
 
 export default Link;

.storybook/components/Typography/components/Text.js

@@ -5,13 +5,9 @@ import React from 'react';
 function Text({ children }) {
-  return (
-    <p>
-      {children}
-    </p>
-  );
+  return <p>{children}</p>;
 }
 
 Text.propTypes = {
-  children: PropTypes.any,
+  children: PropTypes.node.isRequired,
 };
 
 export default Text;

.storybook/components/Typography/stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import Faker from 'faker';
 
@@ -8,6 +9,5 @@ import { checkA11y } from './../../../src';
 
-import Faker from 'faker';
+// eslint-disable-next-line no-script-url
+const href = 'javascript:void 0';
 
-const href = "javascript:void 0";
-
 storiesOf('<Typography />', module)
@@ -17,27 +17,12 @@ .addDecorator(checkA11y)
     <div>
-      <Typography.Heading level={1}>
-        {Faker.lorem.sentence()}
-      </Typography.Heading>
+      <Typography.Heading level={1}>{Faker.lorem.sentence()}</Typography.Heading>
 
-      <Typography.Text>
-        {Faker.lorem.paragraph()}
-      </Typography.Text>
+      <Typography.Text>{Faker.lorem.paragraph()}</Typography.Text>
 
-      <Typography.Link
-        content={`${Faker.lorem.words(4)}...`}
-        href={href}
-      />
+      <Typography.Link content={`${Faker.lorem.words(4)}...`} href={href} />
     </div>
   ))
-  .add('Empty Heading', () => (
-    <Typography.Heading level={2} />
-  ))
-  .add('Empty Paragraph', () => (
-    <Typography.Text />
-  ))
-  .add('Empty Link', () => (
-    <Typography.Link href={href} />
-  ))
-  .add('Link without href', () => (
-    <Typography.Link content={`${Faker.lorem.words(4)}...`} />
-  ));
+  .add('Empty Heading', () => <Typography.Heading level={2} />)
+  .add('Empty Paragraph', () => <Typography.Text />)
+  .add('Empty Link', () => <Typography.Link href={href} />)
+  .add('Link without href', () => <Typography.Link content={`${Faker.lorem.words(4)}...`} />);

.storybook/config.js

 import * as storybook from '@storybook/react';
 
-const req = require.context('./components/', true, /stories\.js$/)
+const req = require.context('./components/', true, /stories\.js$/);
 
-const loadStories = () =>
-  req.keys().forEach(req);
+const loadStories = () => req.keys().forEach(req);
 
-
-storybook.configure(loadStories, module)
+storybook.configure(loadStories, module);

package.json

 {
   "name": "@storybook/addon-a11y",
-  "version": "3.4.0-alpha.8",
+  "version": "3.4.0-alpha.9",
   "description": "a11y addon for storybook",
@@ -28,7 +28,11 @@ "keywords": [
   "dependencies": {
-    "@storybook/components": "^3.4.0-alpha.8",
+    "@storybook/components": "^3.4.0-alpha.9",
     "axe-core": "^2.6.1",
-    "glamorous": "^4.11.4",
+    "glamorous": "^4.11.6",
     "prop-types": "^15.6.0"
   },
+  "devDependencies": {
+    "@storybook/react": "^3.4.0-alpha.9",
+    "faker": "^4.1.0"
+  },
   "peerDependencies": {
@@ -35,0 +39,0 @@ "@storybook/addons": "^3.3.0",

README.md

@@ -5,2 +5,4 @@ # storybook-addon-a11y
 
+[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
+
 ![](docs/screenshot.png)
@@ -7,0 +9,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

54

increased by3.85%

Worsened metrics

Total package byte prevSize

399685

decreased by-0.01%

Dev dependency count

2

increased byInfinity%

Lines of code

1577

decreased by-4.66%

Dependency changes

• Updated@storybook/components@^3.4.0-alpha.9

• Updatedglamorous@^4.11.6