Skip to content

Commit b5336d1

Browse files
jaebradleyjaebradley
authored
Merge pull request #4 from jaebradley/readme
Readme
2 parents 3f6649c + cbc7f8b commit b5336d1

File tree

9 files changed

+171
-25
lines changed

9 files changed

+171
-25
lines changed

‎.storybook/addons.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
import '@storybook/addon-options/register';
22
import '@storybook/addon-actions/register';
3+
import '@storybook/addon-a11y/register';

‎.storybook/config.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
1-
import { configure } from '@storybook/react';
1+
import { configure, addDecorator } from '@storybook/react';
22
import { setOptions } from '@storybook/addon-options';
33
import { setDefaults } from '@storybook/addon-info';
4+
import centered from '@storybook/addon-centered';
5+
import { checkA11y } from '@storybook/addon-a11y';
6+
7+
addDecorator(centered);
8+
addDecorator(checkA11y);
49

510
setDefaults({
6-
inline: true,
11+
inline: false,
712
header: true,
813
source: true,
914
});
1015

1116
setTimeout(() => setOptions({
1217
name: 'REACT MADE WITH',
1318
url: 'https://github.com/jaebradley/react-made-with',
14-
showDownPanel: true,
15-
downPanelInRight: true,
19+
showAddonPanel: true,
20+
addonPanelInRight: true,
1621
}), 1000);
1722

1823
function loadStories() {

‎README.md‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,27 @@
1-
# react-made-with
1+
# react-made-with
2+
3+
## Introduction
4+
5+
![alt-text](https://imgur.com/pWp6tZQ.png)
6+
7+
but as a `React` component
8+
9+
## Installation
10+
11+
```
12+
npm install --save react-made-with
13+
```
14+
15+
## API
16+
17+
[`MadeWith`](/src/MadeWith)
18+
19+
### Example
20+
21+
```javascript
22+
<MadeWith
23+
love
24+
react
25+
maker={{ identifier: 'https://github.com/jaebradley' }}
26+
/>
27+
```

‎package-lock.json‎

Lines changed: 26 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@
3939
"@commitlint/config-angular": "^6.1.0",
4040
"@commitlint/prompt": "^6.1.0",
4141
"@commitlint/prompt-cli": "^6.1.0",
42+
"@storybook/addon-a11y": "^3.3.13",
4243
"@storybook/addon-actions": "^3.3.13",
44+
"@storybook/addon-centered": "^3.3.13",
4345
"@storybook/addon-console": "^1.0.0",
4446
"@storybook/addon-info": "^3.3.13",
4547
"@storybook/addon-options": "^3.3.13",

‎src/MadeWith/MadeWith.stories.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11

22
import React from 'react';
3-
import { storiesOf } from '@storybook/react';
3+
import { storiesOf, addDecorator } from '@storybook/react';
44
import { withInfo } from '@storybook/addon-info';
55
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
66
import { faUserSecret, faPlus } from '@fortawesome/fontawesome-free-solid';
77

88
import MadeWith from './index';
9-
// import README from './README.md';
9+
import README from './README.md';
1010

11-
// const wrapComponent = (component) => (
12-
// withInfo(README)(() => component)
13-
// );
11+
const wrapComponent = (component) => (
12+
withInfo(README)(() => component)
13+
);
1414

1515
storiesOf('Made With', module)
16-
.add('basic usage', () => (
16+
.add('basic usage', wrapComponent(
1717
<MadeWith
1818
love
1919
react
@@ -22,7 +22,7 @@ storiesOf('Made With', module)
2222
}}
2323
/>
2424
))
25-
.add('with email address', () => (
25+
.add('with email address', wrapComponent(
2626
<MadeWith
2727
love
2828
react
@@ -33,7 +33,7 @@ storiesOf('Made With', module)
3333
}}
3434
/>
3535
))
36-
.add('with icon as display', () => (
36+
.add('with icon as display', wrapComponent(
3737
<MadeWith
3838
react
3939
love
@@ -44,7 +44,7 @@ storiesOf('Made With', module)
4444
}}
4545
/>
4646
))
47-
.add('custom separator', () => (
47+
.add('custom separator', wrapComponent(
4848
<MadeWith
4949
love
5050
react

‎src/MadeWith/README.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# MadeWith
2+
3+
Component for `Made with` like ![alt-text](https://imgur.com/pWp6tZQ.png)
4+
5+
## API
6+
7+
### `maker (optional; shape)`
8+
9+
Specifies the formatting of the maker
10+
11+
* `identifier (optional; string)`
12+
13+
When specified, is used to format the displayed author.
14+
15+
If no `identifier` is specified, `null` is returned.
16+
17+
When `identifier` receives an email address, it creates a hyperlink with a `mailto` URL (using the given email address) and a trailing [`FontAwesome` `envelope` icon](https://fontawesome.com/icons/envelope?style=solid). The displayed value associated with the `mailto` URL is the `display` prop value or the given email address.
18+
19+
When `identifier` receives a URL, it creates a hyperlink that points to the given URL and a trailing [`FontAwesome` `link` icon](https://fontawesome.com/icons/link?style=solid).
20+
21+
The only exceptions to this are when the URL has a `twitter.com` or `github.com` host, when the icons are the [`FontAwesome` `Twitter` icon](https://fontawesome.com/icons/twitter?style=brands) and the [`FontAwesome` `GitHub` icon](https://fontawesome.com/icons/github?style=brands)
22+
23+
The displayed value associated with the hyperlink is the `display` prop value or the given URL.
24+
25+
If the `identifier` is not an email address or a URL, it is wrapped in a `<span>`, unless the `display` prop is defined.
26+
27+
* `display(optional; string, element)`
28+
29+
When specified, is the displayed value that represents the maker.
30+
31+
* `showIcon (optional; boolean)`
32+
33+
Determines whether or not to show the icon generated by analyzing the `identifier` prop
34+
35+
* `iconColor (optional; string)`
36+
37+
Determines the color of any icon generated by analyzing the `identifier` prop
38+
39+
### `love (optional; boolean)`
40+
41+
Specifies if [the `FontAwesome` `heart` icon](https://fontawesome.com/icons/heart?style=solid) should be used. By default, `false`.
42+
43+
### `react (optional; boolean)`
44+
45+
Specifies if [the `FontAwesome` `react` icon](https://fontawesome.com/icons/heart?style=solid) should be used. By default, `false`.
46+
47+
### `separator (optional; string or element)`
48+
49+
Specifies how each "made with" type is separated. Be default, `and`.
50+
51+
### `className (optional; string)`
52+
53+
Specifies custom class name for component

‎src/Maker/Maker.stories.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,31 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
55
import { faUserSecret } from '@fortawesome/fontawesome-free-solid';
66

77
import Maker from './index';
8-
// import README from './README.md';
8+
import README from './README.md';
99

10-
// const wrapComponent = (component) => (
11-
// withInfo(README)(() => component)
12-
// );
10+
const wrapComponent = (component) => (
11+
withInfo(README)(() => component)
12+
);
1313

1414
storiesOf('Maker', module)
15-
.add('basic usage', () => (
15+
.add('basic usage', wrapComponent(
1616
<Maker identifier={ 'Jae Bradley' } />
1717
))
18-
.add('with email address, no icon', () => (
18+
.add('with email address, no icon', wrapComponent(
1919
<Maker identifier={ '[email protected]' } showIcon={ false } />
2020
))
21-
.add('Twitter URL with icon and inferred display name', () => (
21+
.add('Twitter URL with icon and inferred display name', wrapComponent(
2222
<Maker identifier={ 'https://twitter.com/jaebradley' } />
2323
))
24-
.add('GitHub URL with icon and explicit display name', () => (
24+
.add('GitHub URL with icon and explicit display name', wrapComponent(
2525
<Maker identifier={ 'https://github.com/jaebradley' } display={ 'Jae Bradley' } />
2626
))
27-
.add('with email address and envelope icon', () => (
27+
.add('with email address and envelope icon', wrapComponent(
2828
<Maker identifier={ '[email protected]' } />
2929
))
30-
.add('url without explicit display name', () => (
30+
.add('url without explicit display name', wrapComponent(
3131
<Maker identifier={ 'https://example.com' } />
3232
))
33-
.add('url with explicit display name', () => (
33+
.add('url with explicit display name', wrapComponent(
3434
<Maker identifier={ 'https://example.com' } display={ 'Example Dot Com' } />
3535
));

‎src/Maker/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Maker
2+
3+
Private (i.e API is not publicly exposed) component that determines the maker.
4+
5+
## API
6+
7+
### `identifier (optional; string)`
8+
9+
When specified, is used to format the displayed maker.
10+
11+
If no `identifier` is specified, `null` is returned.
12+
13+
When `identifier` receives an email address, it creates a hyperlink with a `mailto` URL (using the given email address) and a trailing [`FontAwesome` `envelope` icon](https://fontawesome.com/icons/envelope?style=solid). The displayed value associated with the `mailto` URL is the `display` prop value or the given email address.
14+
15+
When `identifier` receives a URL, it creates a hyperlink that points to the given URL and a trailing [`FontAwesome` `link` icon](https://fontawesome.com/icons/link?style=solid).
16+
17+
The only exceptions to this are when the URL has a `twitter.com` or `github.com` host, when the icons are the [`FontAwesome` `Twitter` icon](https://fontawesome.com/icons/twitter?style=brands) and the [`FontAwesome` `GitHub` icon](https://fontawesome.com/icons/github?style=brands)
18+
19+
The displayed value associated with the hyperlink is the `display` prop value or the given URL.
20+
21+
If the `identifier` is not an email address or a URL, it is wrapped in a `<span>`, unless the `display` prop is defined.
22+
23+
### `display(optional; string, element)`
24+
25+
When specified, is the displayed value that represents the maker.
26+
27+
### `showIcon (optional; boolean)`
28+
29+
Determines whether or not to show the icon generated by analyzing the `identifier` prop
30+
31+
### `iconColor (optional; string)`
32+
33+
Determines the color of any icon generated by analyzing the `identifier` prop

0 commit comments

Comments
 (0)