](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)import PropTypes from 'prop-types';
46 | import React from 'react';
47 | import setClassName from 'utilities/setClassName';
48 |
49 | /**
50 | * @namespace Avatar
51 | * @description Avatar component. For example, to be represent a user.
52 | * @property {string} variant - Variant of avatar to use (e.g., "large", "medium", or "small").
53 | * @property {children} - Image to use as avatar.
54 | * @tutorial `src\stories\Avatar.stories.js`.
55 | */
56 |
57 | export const Avatar = (props) => {
58 | const {
59 | children,
60 | ...componentProps
61 | } = props;
62 |
63 | return (
64 | <article { ...componentProps } className={ setClassName(props, 'avatar') }>
65 | { children }
66 | </article>
67 | );
68 | };
69 |
70 | Avatar.propTypes = {
71 | children: PropTypes.node.isRequired
72 | };
34 |
35 |
44 |
45 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
95 |
96 |
97 |
98 | switch/Switch.js
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |import React, { Component } from 'react';
46 |
47 | import setClassName from 'utilities/setClassName';
48 |
49 | // import PropTypes from 'prop-types';
50 |
51 | /**
52 | * @namespace Switch
53 | * @description Default styled switch/toggle component.
54 | * @tutorial `src\stories\Switch.stories.js`
55 | */
56 |
57 | export class Switch extends Component {
58 | state = { status: false };
59 | toggle = (callback) => this.setState({ status: !this.state.status }, () => callback || null);
60 | handleClick = () => this.toggle(this.props.onClick());
61 |
62 | render() {
63 |
64 | return (
65 | <article
66 | { ...this.props }
67 | onClick={ this.handleClick }
68 | data-active={ this.state.status }
69 | className={ setClassName(this.props, 'switch') }
70 | >
71 | <span />
72 | </article>
73 | );
74 | }
75 | };
76 |
77 | // Switch.propTypes = {};99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /docs/vendors~main.2132ca66e14e6488e138.bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | * https://github.com/es-shims/es5-shim 9 | * @license es5-shim Copyright 2009-2020 by contributors, MIT License 10 | * see https://github.com/es-shims/es5-shim/blob/master/LICENSE 11 | */ 12 | 13 | /*! 14 | * https://github.com/paulmillr/es6-shim 15 | * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com) 16 | * and contributors, MIT License 17 | * es6-shim: v0.35.4 18 | * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE 19 | * Details and documentation: 20 | * https://github.com/paulmillr/es6-shim/ 21 | */ 22 | 23 | /*! 24 | * isobject
-
8 |
9 |
-
6 |
-
7 | 8 | 9 |10 |
11 |
12 |
- 13 |
- 15 | Type 16 | 17 |
- 18 | 19 | 20 |
-
14 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/jsdoc/tmpl/layout.tmpl:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /jsdoc/tmpl/mainpage.tmpl: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 |
15 |
16 |
17 |
18 |
19 |
20 | Type:
21 |-
22 |
- 23 | 24 | 25 |
Fires:
30 |-
31 |
32 |
Example 1? 's':'' ?>
37 | 38 | 39 | -------------------------------------------------------------------------------- /jsdoc/tmpl/method.tmpl: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 |Constructor
8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 | Extends:
28 | 29 | 30 | 31 | 32 |Type:
33 |-
34 |
- 35 | 36 | 37 |
This:
42 |57 | () 58 | → {} 59 |
60 |
61 |
62 |
63 |
67 |
68 |
69 | Example 1? 's':'' ?>
70 | 71 | 72 | 73 | 74 | 75 |Requires:
76 |-
77 |
78 |
Fires:
83 |-
84 |
85 |
Listens to Events:
90 |-
91 |
92 |
Listeners of This Event:
97 |-
98 |
99 |
Throws:
104 | 1) { ?>-
106 |
107 |
Returns:
116 | 1) { ?>-
118 |
119 |
| Name | 58 | 59 | 60 |Type | 61 | 62 | 63 |Attributes | 64 | 65 | 66 | 67 |Default | 68 | 69 | 70 |Description | 71 |
|---|---|---|---|---|
|
84 |
85 |
86 | 87 | 88 | 89 | 90 | | 91 | 92 | 93 |
94 |
95 |
96 | <nullable> 97 | 98 | 99 | 100 | <repeatable> 101 | 102 | |
103 |
104 |
105 |
106 |
107 |
108 | |
111 |
112 |
113 |
114 | Properties115 | 116 | |
117 |
| Name | 47 | 48 | 49 |Type | 50 | 51 | 52 |Attributes | 53 | 54 | 55 | 56 |Default | 57 | 58 | 59 |Description | 60 |
|---|---|---|---|---|
|
73 |
74 |
75 | 76 | 77 | 78 | 79 | | 80 | 81 | 82 |
83 |
84 | <nullable> 85 | 86 | |
87 |
88 |
89 |
90 |
91 |
92 | |
95 |
96 |
97 |
98 | Properties99 | |
100 |
6 |
7 |
8 |
9 |
10 |
11 | -
12 |
- 13 | Type 14 | 15 |
- 16 | 17 | 18 |
-
8 |
9 |
40 |
42 | ) : null;
43 | };
44 |
45 | Loader.propTypes = {
46 | show: PropTypes.bool,
47 | variant: PropTypes.string
48 | };
49 |
50 | Loader.defaultProps = {
51 | show: false,
52 | variant: ''
53 | };
--------------------------------------------------------------------------------
/src/components/loader/Loader.scss:
--------------------------------------------------------------------------------
1 | .loader-container {
2 | cursor: not-allowed;
3 | position: fixed;
4 | top: 0;
5 | right: 0;
6 | bottom: 0;
7 | left: 0;
8 | background-color: var(--transparent-slight);
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | z-index: 9991;
13 | }
--------------------------------------------------------------------------------
/src/components/loader/atomic/AtomicSpinner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import setClassName from 'utilities/setClassName';
3 | import styles from 'src/components/loader/atomic/AtomicSpinner.module.scss';
4 |
5 | /**
6 | * @namespace AtomicSpinner
7 | * @description Atomic variant loader component.
8 | * @tutorial `src\stories\Loader.stories.js`.
9 | *
10 | * @memberof Loader
11 | */
12 | export const AtomicSpinner = (props) => {
13 |
14 | return (
15 |
56 | );
57 | };
--------------------------------------------------------------------------------
/src/components/loader/atomic/AtomicSpinner.module.scss:
--------------------------------------------------------------------------------
1 | .atomic-spinner {
2 | width: 100px;
3 | height: 100px;
4 |
5 | circle {
6 | color: var(--secondary-color);
7 | }
8 |
9 | use {
10 | color: var(--grey-color-dark);
11 | }
12 | }
--------------------------------------------------------------------------------
/src/components/loader/bouncy/BouncySpinner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import setClassName from 'utilities/setClassName';
3 | import styles from 'src/components/loader/bouncy/BouncySpinner.module.scss';
4 |
5 | /**
6 | * @namespace BouncySpinner
7 | * @description Bouncy variant loader component.
8 | * @tutorial `src\stories\Loader.stories.js`.
9 | *
10 | * @memberof Loader
11 | */
12 | export const BouncySpinner = (props) => {
13 |
14 | return (
15 |
34 | );
35 | };
--------------------------------------------------------------------------------
/src/components/loader/bouncy/BouncySpinner.module.scss:
--------------------------------------------------------------------------------
1 | .bouncy-spinner {
2 | width: 100px;
3 | height: 100px;
4 |
5 | circle:first-child {
6 | color: var(--primary-color);
7 | }
8 |
9 | circle:last-child {
10 | color: var(--secondary-color);
11 | }
12 | }
--------------------------------------------------------------------------------
/src/components/loader/default/DefaultSpinner.module.scss:
--------------------------------------------------------------------------------
1 | .default-spinner {
2 | width: 100px;
3 | height: 100px;
4 |
5 | g {
6 | color: var(--primary-color);
7 | }
8 | }
--------------------------------------------------------------------------------
/src/components/notice/Notice.scss:
--------------------------------------------------------------------------------
1 | $notice-border-radius: var(--border-radius) var(--border-radius) 0 0;
2 | $notice-backing-border-radius: calc(#{var(--border-radius)} + 2px)
3 | calc(#{var(--border-radius)} + 2px)
4 | var(--border-radius)
5 | var(--border-radius);
6 |
7 | .notice {
8 | min-height: 125px;
9 | background: var(--white-color);
10 | border: var(--border);
11 | border-radius: var(--border-radius);
12 | box-shadow: var(--box-shadow-medium);
13 | border-radius: $notice-backing-border-radius;
14 | margin-top: 5rem;
15 | width: 400px;
16 | @media (max-width: 420px) {
17 | width: calc(100vw - 40px);
18 | }
19 |
20 | header {
21 | display: flex;
22 | justify-content: space-between;
23 | padding: .75rem 1rem .75rem .75rem;
24 | background-color: var(--primary-color);
25 | border-radius: $notice-border-radius;
26 | border: solid 1px var(--primary-color);
27 | border-bottom: none;
28 |
29 | h5 {
30 | color: var(--primary-color-contrast);
31 | margin: 0;
32 | }
33 | }
34 |
35 | article {
36 | display: grid;
37 | padding: .75rem 1rem 1rem .75rem;
38 |
39 | p {
40 | margin: 0;
41 | font-size: 1rem;
42 | color: var(--black-color);
43 | text-align: left;
44 | }
45 |
46 | article {
47 | display: flex;
48 | justify-content: flex-end;
49 | flex-wrap: wrap;
50 | padding-left: 0;
51 |
52 | // Default Input
53 | label[class*='input'] {
54 | width: 100%;
55 |
56 | input {
57 | width: calc(100% - 1.25rem);
58 | margin: .75rem 0 -10px;
59 | padding: .5rem;
60 | padding-right: 1.25rem;
61 | }
62 | }
63 |
64 | // Default Buttons
65 | a[class*='button'] {
66 | margin-top: 2rem;
67 | margin-left: 1.5rem;
68 | margin-bottom: -1rem;
69 | }
70 | }
71 |
72 | }
73 |
74 | svg {
75 | width: 1.15rem;
76 | cursor: pointer;
77 | color: var(--primary-color-contrast);
78 | margin-top: -1rem;
79 | margin-right: -.7rem;
80 | }
81 | }
82 |
83 | .notice-mask {
84 | @include mask;
85 | position: fixed;
86 | display: flex;
87 | justify-content: center;
88 | align-items: baseline;
89 | z-index: 9991;
90 | }
--------------------------------------------------------------------------------
/src/components/pages/404/FileNotFound.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import setClassName from 'utilities/setClassName';
4 | import styles from 'src/assets/scss/styles.module.scss';
5 |
6 | /**
7 | * @namespace FileNotFound
8 | * @description Default styled 404 page component.
9 | * @tutorial `src\stories\Pages.stories.js`.
10 | */
11 |
12 | export class FileNotFound extends Component {
13 | state = {
14 | 0: 0,
15 | 1: 0,
16 | 2: 0
17 | };
18 |
19 | componentDidMount() {
20 | const randomNum = () => {
21 | return Math.floor(Math.random() * 9) + 1;
22 | };
23 |
24 | const loopOne = setInterval(() => this.setState({ 0: randomNum() }), 30);
25 | const loopTwo = setInterval(() => this.setState({ 1: randomNum() }), 30);
26 | const loopThree = setInterval(() => this.setState({ 2: randomNum() }), 30);
27 |
28 | setTimeout(() => {
29 | const clearIt = (interval, digit, time, value) => {
30 | setTimeout(() => {
31 | clearInterval(interval);
32 | this.setState({ [digit]: value });
33 | }, time);
34 | };
35 |
36 | clearIt(loopOne, 0, 40, 4);
37 | clearIt(loopTwo, 1, 80, 0);
38 | clearIt(loopThree, 2, 100, 4);
39 | }, 1000);
40 | }
41 |
42 | render() {
43 | const { props, state: numbers } = this;
44 | return (
45 |
46 |
62 | );
63 | }
64 | }
--------------------------------------------------------------------------------
/src/components/pages/404/FileNotFound.scss:
--------------------------------------------------------------------------------
1 | .file-not-found {
2 |
3 | display: flex;
4 | flex-wrap: wrap;
5 | justify-content: center;
6 | text-align: center;
7 | align-items: flex-end;
8 | margin-top: 10em;
9 |
10 | h2 {
11 | font-size: 32px;
12 | color: var(--primary-color);
13 | font-weight: bold;
14 | padding-bottom: 20px;
15 | }
16 |
17 | > div {
18 | width: 540px;
19 |
20 | > div {
21 | display: inline-block;
22 |
23 | span {
24 | color: var(--white-color);
25 | background: var(--primary-color);
26 | border-radius: 50%;
27 | display: inline-block;
28 | width: 150px;
29 | line-height: 150px;
30 | font-size: 120px;
31 | font-weight: bold;
32 | margin: 15px;
33 |
34 | @media(max-width: 615px) {
35 | width: 100px;
36 | line-height: 100px;
37 | font-size: 65px;
38 | margin: 10px;
39 | }
40 |
41 | @media(max-width: 400px) {
42 | width: 78px;
43 | line-height: 78px;
44 | font-size: 55px;
45 | margin: 8px;
46 | }
47 |
48 | }
49 | }
50 | }
51 |
52 | @media(max-width: $tablet) {
53 |
54 | h2 {
55 | font-size: 24px;
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/pagination/PaginationList.scss:
--------------------------------------------------------------------------------
1 | .pagination-list {
2 |
3 | ul + article {
4 | display: flex;
5 | flex-wrap: wrap;
6 | justify-content: center;
7 | align-items: center;
8 |
9 | span {
10 | cursor: pointer;
11 | margin: .4rem;
12 | background: var(--primary-color);
13 | color: var(--primary-color-contrast);
14 | font-size: .8rem;
15 | padding: .4rem .3rem;
16 | display: flex;
17 | justify-content: center;
18 | align-items: center;
19 | border-radius: var(--border-radius);
20 | min-width: 1.25rem;
21 |
22 | &[data-active="true"] {
23 | background: var(--primary-color-focus);
24 | }
25 |
26 | @include accessible-border-behavior;
27 | }
28 | }
29 |
30 | ul[variant="round"] + article span {
31 | //padding: .3rem .4rem;
32 | border-radius: var(--border-radius-round);
33 | @include accessible-border-behavior;
34 | }
35 | }
--------------------------------------------------------------------------------
/src/components/radiobutton/RadioButton.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 | import setClassName from 'utilities/setClassName';
4 | import styles from 'src/assets/scss/styles.module.scss';
5 |
6 | /**
7 | * @namespace RadioButton
8 | * @description Default styled radio button component.
9 | * @property {string} type - If provided, is discarded and "radio" is used.
10 | * @property {string} text - Radio button text.
11 | * @property {string} variant - Radio button variant to use (e.g., "alt-icons").
12 | * @tutorial `src\stories\Radio.stories.js`
13 | */
14 |
15 | export const RadioButton = (props) => {
16 | const {
17 | className,
18 | text,
19 | type,
20 | ...inputProps
21 | } = props;
22 |
23 | if (type && type !== 'radio') { return console.warn(
24 | `\`RadioButton\` can only accept a \`type\` prop of "radio". Received "${props.type}", which was discarded and replaced by "radio".`
25 | ); }
26 |
27 | return (
28 |
33 | );
34 | };
35 |
36 | RadioButton.propTypes = {
37 | className: PropTypes.string,
38 | text: PropTypes.string,
39 | type: PropTypes.string
40 | };
41 |
42 | RadioButton.defaultProps = {
43 | className: '',
44 | text: '',
45 | type: ''
46 | };
--------------------------------------------------------------------------------
/src/components/radiobutton/RadioButton.scss:
--------------------------------------------------------------------------------
1 | .radio-button {
2 | @include input-label;
3 |
4 | input {
5 | appearance: none;
6 | border-radius: var(--border-radius-round);
7 | width: var(--input-size);
8 | height: var(--input-size);
9 | border: solid var(--border-size) var(--grey-color-medium);
10 | transition: var(--transition-speed-quick) background-color var(--transition-animation-type);
11 | cursor: pointer;
12 | margin: .01rem;
13 | margin-right: .5rem;
14 |
15 |
16 | &:checked {
17 | cursor: default;
18 |
19 | + span {
20 | pointer-events: none;
21 | border-radius: var(--border-radius-round);
22 | position: absolute;
23 | margin: .325rem;
24 | background-color: var(--primary-color);
25 | width: calc(1.15rem - 10px);
26 | height: calc(1.15rem - 10px);
27 | }
28 | }
29 |
30 | &[variant="filled"] {
31 |
32 | &:checked {
33 | background-color: var(--primary-color);
34 |
35 | + span {
36 | background-color: var(--white-color);
37 | width: 5px;
38 | height: 5px;
39 | position: relative;
40 | margin-left: .425rem;
41 | }
42 | }
43 | }
44 |
45 | @include accessible-border-behavior;
46 | }
47 |
48 | }
--------------------------------------------------------------------------------
/src/components/select/Select.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import { ChevronDownAltIcon } from 'assets/icons/ChevronDownAltIcon';
4 | import { ChevronDownIcon } from 'assets/icons/ChevronDownIcon';
5 | import PropTypes from 'prop-types';
6 | import setClassName from 'utilities/setClassName';
7 | import styles from 'src/assets/scss/styles.module.scss';
8 |
9 | /**
10 | * @namespace Select
11 | * @description Default styled select drop down component.
12 | * @property {Array.
47 |
61 |
48 | {numbers[2]}
49 |
50 |
51 |
52 | {numbers[1]}
53 |
54 |
55 |
56 | {numbers[2]}
57 |
58 |
59 | Page not found
60 |-
64 | {
65 | options.map((option, index) => {
66 | const key = `${option.replace(/ /g, '-')}-${index}`;
67 |
68 | return (
69 |
- handleOptionClick(option) } 72 | style={ setOptionStyles(option) } 73 | title={ option } 74 | > 75 | { option } 76 | 77 | ); 78 | }) 79 | } 80 |
95 |
98 | { currentOption }
99 |
100 | |
101 |
103 |
104 | { showOptions ? optionList : undefined }
105 |
66 |
68 | );
69 | }
70 | }
71 |
72 | ToTop.propTypes = {
73 | variant: PropTypes.string
74 | };
--------------------------------------------------------------------------------
/src/components/totop/ToTop.scss:
--------------------------------------------------------------------------------
1 | .to-top {
2 | position: fixed;
3 | bottom: 2rem;
4 | right: 2.25rem;
5 | cursor: pointer;
6 | transition: opacity var(--transition-speed-medium);
7 | z-index: 9989;
8 |
9 | @media(max-width: $tablet) {
10 | bottom: 1rem;
11 | right: 1.25rem;
12 | }
13 |
14 | svg {
15 | all: unset;
16 | width: 1.5rem;
17 | border: var(--border);
18 | border-radius: var(--border-radius-round);
19 | padding: .5rem;
20 | box-shadow: var(--box-shadow-medium);
21 | color: var(--primary-color-contrast);
22 | background-color: var(--primary-color);
23 | }
24 | }
--------------------------------------------------------------------------------
/src/stories/0-Welcome.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Welcome = () => {
4 | return (
5 |
6 |
10 |
18 |
19 | );
20 | };
21 |
22 | export default {
23 | title: 'Welcome',
24 | component: Welcome
25 | };
26 |
27 | export const ToStorybook = () => Default component Storybook
7 |This is a UI component dev environment for Default component library.
8 | 9 |Component To-Do:
11 |-
12 |
- Create loading component. 13 |
- Create card component. 14 |
- Create 404 page component. 15 |
- Update pagination component (for 10+ pages). 16 |
12 |
13 | Square Button
14 |
15 |
16 | );
17 |
18 | export const Round = () => (
19 |
20 |
21 | Round Button
22 |
23 |
24 | );
25 |
26 | export const Large = () => (
27 |
28 |
29 | Round Button
30 |
31 |
32 | );
33 |
34 | export const Large_Round = () => (
35 |
36 |
37 | Round Button
38 |
39 |
40 | );
--------------------------------------------------------------------------------
/src/stories/Checkbox.stories.js:
--------------------------------------------------------------------------------
1 | import { Checkbox as DefaultCheckbox } from 'components/checkbox/Checkbox';
2 | import React from 'react';
3 | import { action } from '@storybook/addon-actions';
4 |
5 | export default {
6 | title: 'Checkbox',
7 | component: DefaultCheckbox
8 | };
9 |
10 | export const Checkbox = () => (
11 | This is the container contents
13 |By Default Services
13 |
12 |
14 | );
15 |
16 | export const Input_Large = () => (
17 |
18 |
20 | );
--------------------------------------------------------------------------------
/src/stories/Loader.stories.js:
--------------------------------------------------------------------------------
1 | import { Loader as DefaultLoader } from 'components/loader/Loader';
2 | import React from 'react';
3 |
4 | export default {
5 | title: 'Loader',
6 | component: DefaultLoader
7 | };
8 |
9 | export const Atomic_Loader = () => (
10 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
40 | Alert styled notice.
41 |
42 |
43 | console.log('Confirm canceled.') }
45 | cancelText='Cancel'
46 | header='Confirm'
47 | okayFunc={ () => console.log('Confirm "Okay" button pressed.') }
48 | okayText='Okay'
49 | show={ showConfirm }
50 | setShow={ setShowConfirm }
51 | type='confirm'
52 | >
53 | Confirm styled notice.
54 |
55 |
56 | console.log('Prompt canceled.') }
58 | cancelText='Cancel'
59 | header='Prompt'
60 | okayFunc={ handleOkPrompt }
61 | okayText='Okay'
62 | show={ showPrompt }
63 | setShow={ setShowPrompt }
64 | type='prompt'
65 | >
66 | Prompt styled notice.
67 |
68 |
69 | );
70 | };
71 |
72 |
73 | export const Notice_Alt_Icons = () => {
74 | const [ showAlert, setShowAlert ] = useState(false);
75 | const [ showConfirm, setShowConfirm ] = useState(false);
76 | const [ showPrompt, setShowPrompt ] = useState(false);
77 |
78 | const handleAlertClick = () => setShowAlert(true);
79 | const handleConfirmClick = () => setShowConfirm(true);
80 | const handlePromptClick = () => setShowPrompt(true);
81 | const handleOkPrompt = (inputValue) => console.log(inputValue);
82 |
83 | return (
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 | console.log('Prompt "Okay" button pressed.') }
94 | okayText='Okay'
95 | show={ showAlert }
96 | setShow={ setShowAlert }
97 | variant='alt-icons'
98 | >
99 | Alert styled notice.
100 |
101 |
102 | console.log('Prompt "Okay" button pressed.') }
105 | okayText='Okay'
106 | show={ showConfirm }
107 | setShow={ setShowConfirm }
108 | variant='alt-icons'
109 | type='confirm'
110 | >
111 | Confirm styled notice.
112 |
113 |
114 |
123 | Prompt styled notice.
124 |
125 |
126 | );
127 |
128 | };
--------------------------------------------------------------------------------
/src/stories/Pages.stories.js:
--------------------------------------------------------------------------------
1 | import { FileNotFound as FileNotFoundPage } from 'components/pages/404/FileNotFound';
2 | import React from 'react';
3 |
4 | export default {
5 | title: 'Pages',
6 | component: 'Pages'
7 | };
8 |
9 | export const Page_404 = () => (
10 |
19 |
21 | );
22 |
23 | export const Select_Alt_Icons = () => (
24 |
25 |
27 | );
--------------------------------------------------------------------------------
/src/stories/Switch.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { action } from '@storybook/addon-actions';
3 | import { Switch as DefaultSwitch } from 'components/switch/Switch';
4 |
5 | export default {
6 | title: 'Switch',
7 | component: DefaultSwitch
8 | };
9 |
10 | export const Switch = () => (
11 |
12 |
14 | );
--------------------------------------------------------------------------------
/src/stories/ToTop.stories.js:
--------------------------------------------------------------------------------
1 | import { ToTop as DefaultToTop } from 'components/totop/ToTop';
2 | import React from 'react';
3 | import { action } from '@storybook/addon-actions';
4 |
5 | export default {
6 | title: 'To-top',
7 | component: DefaultToTop
8 | };
9 |
10 | const styles = `
11 | div[class*="to-top"][role="button"] {
12 | opacity: 1 !important;
13 | pointer-events: auto !important;
14 | }
15 | `;
16 |
17 | export const ToTop = () => (
18 |
19 |
22 | );
23 |
24 | export const ToTop_Alt_Icons = () => (
25 |
26 |
29 | );
--------------------------------------------------------------------------------
/src/utilities/setClassName.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @description - Allow for variants, and additional user-specified classes.
3 | * @property {Object} props - Component props.
4 | * @property {string} props.className - User defined class name.
5 | * @property {string} defaultClassName - Default's class name.
6 | */
7 | const setClassName = (props, defaultClassName) => {
8 | const { className: userClassName } = props;
9 |
10 | return userClassName
11 | ? `${defaultClassName} ${userClassName}`
12 | : defaultClassName;
13 | };
14 |
15 | export default setClassName;
--------------------------------------------------------------------------------