├── .storybook
    ├── preview-head.html
    ├── addons.js
    └── config.js
├── src
    ├── components
    │   ├── TextPassage
    │   │   ├── TextPassage.css
    │   │   ├── TextPassage.js
    │   │   └── TextPassage.stories.js
    │   ├── Logo
    │   │   ├── Logo.css
    │   │   ├── Logo.stories.js
    │   │   └── Logo.js
    │   ├── InlineForm
    │   │   ├── InlineForm.css
    │   │   ├── InlineForm.stories.js
    │   │   └── InlineForm.js
    │   ├── CardList
    │   │   ├── CardList.css
    │   │   ├── CardList.js
    │   │   └── CardLIst.stories.js
    │   ├── Header
    │   │   ├── Header.css
    │   │   ├── Header.stories.js
    │   │   └── Header.js
    │   ├── Footer
    │   │   ├── Footer.css
    │   │   ├── Footer.stories.js
    │   │   └── Footer.js
    │   ├── Card
    │   │   ├── Card.css
    │   │   ├── Card.stories.js
    │   │   └── Card.js
    │   ├── Button
    │   │   ├── Button.css
    │   │   ├── Button.stories.js
    │   │   └── Button.js
    │   ├── PrimaryNav
    │   │   ├── PrimaryNav.css
    │   │   ├── PrimaryNav.stories.js
    │   │   └── PrimaryNav.js
    │   ├── Section
    │   │   ├── Section.css
    │   │   ├── Section.stories.js
    │   │   └── Section.js
    │   └── Hero
    │   │   ├── Hero.css
    │   │   ├── Hero.stories.js
    │   │   └── Hero.js
    ├── index.css
    ├── images
    │   ├── fpo-120x60.png
    │   ├── fpo-500x300.png
    │   └── fpo-1200x650.png
    ├── data
    │   └── globals.json
    ├── index.js
    ├── App.test.js
    ├── css
    │   └── App.css
    └── App.js
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── .gitignore
├── package.json
└── README.md


/.storybook/preview-head.html:
--------------------------------------------------------------------------------
1 | <link rel="stylesheet" href="./css/App.css" />


--------------------------------------------------------------------------------
/src/components/TextPassage/TextPassage.css:
--------------------------------------------------------------------------------
1 | .c-text-passage {
2 |     
3 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradfrost/dumb-react/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 |   font-family: sans-serif;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/images/fpo-120x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradfrost/dumb-react/HEAD/src/images/fpo-120x60.png


--------------------------------------------------------------------------------
/src/images/fpo-500x300.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradfrost/dumb-react/HEAD/src/images/fpo-500x300.png


--------------------------------------------------------------------------------
/src/images/fpo-1200x650.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradfrost/dumb-react/HEAD/src/images/fpo-1200x650.png


--------------------------------------------------------------------------------
/src/components/Logo/Logo.css:
--------------------------------------------------------------------------------
1 | .c-logo {
2 |     display: inline;
3 | }
4 | 
5 | .c-logo__img {
6 |     display: block;
7 | }


--------------------------------------------------------------------------------
/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-actions/register';
2 | import '@storybook/addon-links/register';
3 | import '@storybook/addon-knobs/register';
4 | 


--------------------------------------------------------------------------------
/src/data/globals.json:
--------------------------------------------------------------------------------
1 | {
2 |     "company" : {
3 |         "name" : "Company Name",
4 |         "url" : "http://companyname.com",
5 |         "phone" : "555-555-5555"
6 |     }
7 | }


--------------------------------------------------------------------------------
/src/components/InlineForm/InlineForm.css:
--------------------------------------------------------------------------------
1 | .c-inline-form {
2 |     display: flex;
3 |     padding: 0.5rem 0;
4 | }
5 | 
6 | .c-inline-form__input {
7 |     flex: 1;
8 |     padding: 0.5rem;
9 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'));
7 | 


--------------------------------------------------------------------------------
/src/components/CardList/CardList.css:
--------------------------------------------------------------------------------
1 | .c-card-list {
2 |     margin: 0;
3 |     padding: 0;
4 |     display: grid;
5 |     grid-gap: 2rem;
6 |     grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
7 | }


--------------------------------------------------------------------------------
/src/components/Header/Header.css:
--------------------------------------------------------------------------------
1 | .c-header {
2 |     background: #ddd;
3 |     padding: 1rem 2rem;
4 |     display: grid;
5 |     grid-template-columns: 1fr;
6 |     grid-auto-flow: column;
7 |     gap: 10px;
8 | }


--------------------------------------------------------------------------------
/src/components/Footer/Footer.css:
--------------------------------------------------------------------------------
 1 | .c-footer {
 2 |     background: #333;
 3 |     color: #fff;
 4 |     padding: 2rem;
 5 | }
 6 | 
 7 | .c-footer__copyright {
 8 |     text-align: center;
 9 |     margin-top: 2rem;
10 | }


--------------------------------------------------------------------------------
/src/components/Card/Card.css:
--------------------------------------------------------------------------------
 1 | .c-card {
 2 |     border: 1px solid #808080;
 3 |     padding: 1rem;
 4 | }
 5 | 
 6 | .c-card--dark {
 7 |     background: #000;
 8 |     color: #fff;
 9 | }
10 | 
11 | .c-card__title {
12 |     margin-top: 0;
13 | }


--------------------------------------------------------------------------------
/src/components/Button/Button.css:
--------------------------------------------------------------------------------
 1 | .c-btn {
 2 |     background: #333;
 3 |     color: #fff;
 4 |     border: 0;
 5 | }
 6 | 
 7 | .c-btn[disabled] {
 8 |     opacity: 0.5;
 9 | }
10 | 
11 | .c-btn--secondary {
12 |     background: #eee;
13 |     color: #222;
14 |     border: 1px solid #eee;
15 | }


--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { configure } from '@storybook/react';
2 | import '../src/css/App.css';
3 | 
4 | const req = require.context("../src/components", true, /.stories.js$/);
5 | function loadStories() {
6 |   req.keys().forEach(filename => req(filename));
7 | }
8 | 
9 | configure(loadStories, module);


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/components/PrimaryNav/PrimaryNav.css:
--------------------------------------------------------------------------------
 1 | .c-primary-nav {
 2 |     margin-left: auto;
 3 |     display: flex;
 4 |     align-items: center;
 5 | }
 6 | 
 7 | .c-primary-nav__list {
 8 |     display: flex;
 9 |     list-style: none;
10 |     margin: 0;
11 |     padding: 0;
12 | }
13 | 
14 | .c-primary-nav__item {
15 |     margin-right: 2rem;
16 | }


--------------------------------------------------------------------------------
/src/components/Section/Section.css:
--------------------------------------------------------------------------------
 1 | .c-section {
 2 |     padding: 2rem;
 3 | }
 4 | 
 5 | .c-section__header {
 6 |     display: flex;
 7 |     flex-direction: column;
 8 |     align-items: center;
 9 |     margin-bottom: 2rem;
10 | }
11 | 
12 | .c-section__title {
13 |     font-size: 2rem;
14 |     margin: 0;
15 | }
16 | 
17 | .c-section__description {
18 |     margin: 0;
19 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/TextPassage/TextPassage.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import './TextPassage.css';
 4 | 
 5 | export class TextPassage extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div className="c-text-passage">
 9 |         { this.props.children }
10 |       </div>
11 |     );
12 |   }
13 | }
14 | 
15 | TextPassage.propTypes = {
16 |   children: PropTypes.node
17 | }


--------------------------------------------------------------------------------
/src/components/Header/Header.stories.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { withKnobs } from '@storybook/addon-knobs/react';
 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs';
 5 | import { Header } from './Header';
 6 | 
 7 | let stories = storiesOf('Global/Header', module);
 8 | 
 9 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs);
10 | 
11 | stories.add('Default', () =>
12 |   <Header />
13 | );
14 | 


--------------------------------------------------------------------------------
/src/components/Footer/Footer.stories.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { withKnobs } from '@storybook/addon-knobs/react';
 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs';
 5 | import { Footer } from './Footer';
 6 | 
 7 | let stories = storiesOf('Global/Footer', module);
 8 | 
 9 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs);
10 | 
11 | stories.add('Default', () =>
12 |   <Footer>
13 |     Hello Footer
14 |   </Footer>
15 | );
16 | 


--------------------------------------------------------------------------------
/src/components/Hero/Hero.css:
--------------------------------------------------------------------------------
 1 | .c-hero {
 2 |     background: #eee;
 3 |     position: relative;
 4 | }
 5 | 
 6 | .c-hero__img {
 7 |     display: block;
 8 |     width: 100%;
 9 |     height: auto;
10 |     max-height: 80vh;
11 |     object-fit: cover;
12 | }
13 | 
14 | .c-hero__body {
15 |     position: absolute;
16 |     bottom: 0;
17 |     left: 0;
18 |     padding: 3rem 2rem;
19 |     z-index: 1;
20 | }
21 | 
22 | .c-hero__title {
23 |     font-size: 3rem;
24 |     margin: 0;
25 | }
26 | 
27 | .c-hero__description {
28 |     font-size: 1.4rem;
29 |     margin: 0;
30 | }


--------------------------------------------------------------------------------
/src/components/Logo/Logo.stories.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { withKnobs } from '@storybook/addon-knobs/react';
 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs';
 5 | import { Logo } from './Logo';
 6 | 
 7 | import logoimg from '../../images/fpo-120x60.png';
 8 | 
 9 | let stories = storiesOf('Global/Logo', module);
10 | 
11 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs);
12 | 
13 | stories.add('Default', () =>
14 |   <Logo href="http://bradfrost.com" src={ logoimg } alt="Company Name" />
15 | );


--------------------------------------------------------------------------------
/src/components/Logo/Logo.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import './Logo.css';
 4 | 
 5 | export class Logo extends Component {
 6 | 
 7 |   render() {
 8 |     return (
 9 |       <a href={ this.props.href } className="c-logo" rel="home" { ...this.props }>
10 |         <img className="c-logo__img" src={ this.props.src } alt={ this.props.alt } />
11 |       </a>
12 |     );
13 |   }
14 | }
15 | 
16 | Logo.propTypes = {
17 |   href: PropTypes.string,
18 |   src: PropTypes.string.isRequired,
19 |   alt: PropTypes.string.isRequired
20 | }
21 | 


--------------------------------------------------------------------------------
/src/css/App.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: #fff;
 3 |   font-family: sans-serif;
 4 | }
 5 | 
 6 | .l-linelength-container {
 7 |   max-width: 40rem;
 8 |   margin: 0 auto;
 9 |   padding: 0 1rem;
10 | }
11 | 
12 | /*------------------------------------*\
13 |     #UTILITY CLASSES
14 | \*------------------------------------*/
15 | 
16 | /**
17 |  * Visibility hidden
18 |  * 1) Visible to screenreaders but not to the screen 
19 |  */
20 | .u-is-vishidden {
21 |   position: absolute !important;
22 |   overflow: hidden;
23 |   width: 1px;
24 |   height: 1px;
25 |   padding: 0;
26 |   border: 0;
27 |   clip: rect(1px, 1px, 1px, 1px);
28 | }


--------------------------------------------------------------------------------
/src/components/Button/Button.stories.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { withKnobs } from '@storybook/addon-knobs/react';
 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs';
 5 | import { Button } from './Button';
 6 | 
 7 | let stories = storiesOf('Buttons/Button', module);
 8 | 
 9 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs);
10 | 
11 | stories.add('Default', () =>
12 |   <Button onClick={() => console.log("clicked!!")} />
13 | );
14 | 
15 | stories.add('Secondary', () =>
16 |   <Button issecondary text="Secondary Button" />
17 | );


--------------------------------------------------------------------------------
/src/components/InlineForm/InlineForm.stories.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { withKnobs } from '@storybook/addon-knobs/react';
 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs';
 5 | import { InlineForm } from './InlineForm';
 6 | 
 7 | let stories = storiesOf('Forms/InlineForm', module);
 8 | 
 9 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs);
10 | 
11 | stories.add('Default', () =>
12 |   <InlineForm 
13 |     method="post"
14 |     action="http://google.com"
15 |     id="demo-form-id"
16 |     placeholder="Placeholder"
17 |     cta="Action" 
18 |   />
19 | );
20 | 


--------------------------------------------------------------------------------
/src/components/Hero/Hero.stories.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { withKnobs } from '@storybook/addon-knobs/react';
 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs';
 5 | import { Hero } from './Hero';
 6 | import heroImg from '../../images/fpo-1200x650.png';
 7 | 
 8 | let stories = storiesOf('Blocks/Hero', module);
 9 | 
10 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs);
11 | 
12 | stories.add('Default', () =>
13 |   <Hero heroimgsrc={ heroImg } heroimgalt="Alt Text" title="Hero Title" description="This is the hero description">
14 |     Hello Hero
15 |   </Hero>
16 | );
17 | 


--------------------------------------------------------------------------------
/src/components/Section/Section.stories.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { withKnobs } from '@storybook/addon-knobs/react';
 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs';
 5 | import { Section } from './Section';
 6 | 
 7 | let stories = storiesOf('Containers/Section', module);
 8 | 
 9 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs);
10 | 
11 | stories.add('Default', () =>
12 |   <Section title="Section Title" description="This is a description of what the section is">
13 |     This is the section body, where you can put any content or include other components.
14 |   </Section>
15 | );
16 | 


--------------------------------------------------------------------------------
/src/components/Card/Card.stories.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { withKnobs } from '@storybook/addon-knobs/react';
 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs';
 5 | import { Card } from './Card';
 6 | 
 7 | let stories = storiesOf('Blocks/Card', module);
 8 | 
 9 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs);
10 | 
11 | stories.add('Default', () =>
12 |   <Card>
13 |     This is the card body.
14 |   </Card>
15 | );
16 | 
17 | stories.add('Dark', () =>
18 |   <Card theme="dark" title="Dark Card Title" description="This is the card description">
19 |     This is the card body.
20 |   </Card>
21 | );
22 | 


--------------------------------------------------------------------------------
/src/components/Section/Section.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import './Section.css';
 4 | 
 5 | export class Section extends Component {
 6 |   render() {
 7 |     return (
 8 |       <section className="c-section">
 9 |         <header className="c-section__header">
10 |           <h2 className="c-section__title">{ this.props.title }</h2>
11 |           <p className="c-section__description">{ this.props.description }</p>
12 |         </header>
13 |         <div className="c-section__body">
14 |           { this.props.children }
15 |         </div>
16 |       </section>
17 |     );
18 |   }
19 | }
20 | 
21 | Section.propTypes = {
22 |   title: PropTypes.string,
23 |   description: PropTypes.string,
24 |   children: PropTypes.node
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/Footer/Footer.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import PropTypes from 'prop-types';
 3 | import "./Footer.css";
 4 | import { InlineForm } from "../InlineForm/InlineForm";
 5 | import globals from "../../data/globals.json";
 6 | 
 7 | export class Footer extends Component {
 8 |     render() {
 9 |         return (
10 |             <footer className="c-footer" {...this.props}>
11 | 				<InlineForm
12 | 					method="post"
13 | 					action="#"
14 |                     placeholder="name@email.com"
15 |                     cta="Join our newsletter"
16 |                     id="search-form"
17 |                     label="Email address"
18 |                 />
19 | 
20 |                 <p className="c-footer__copyright">&copy; { (new Date()).getFullYear() } { globals.company.name }</p>
21 |             </footer>
22 |         );
23 |     }
24 | }


--------------------------------------------------------------------------------
/src/components/PrimaryNav/PrimaryNav.stories.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { withKnobs } from '@storybook/addon-knobs/react';
 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs';
 5 | import { PrimaryNav } from './PrimaryNav';
 6 | 
 7 | let stories = storiesOf('Navigation/PrimaryNav', module);
 8 | 
 9 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs);
10 | 
11 | stories.add('Default', () =>
12 | <PrimaryNav 
13 |   listItems={[
14 |       {
15 |         "href": "#",
16 |         "text": "Nav Item 1"
17 |       },
18 |       {
19 |         "href": "#",
20 |         "text": "Nav Item 2"
21 |       },
22 |       {
23 |         "href": "#",
24 |         "text": "Nav Item 3"
25 |       },
26 |       {
27 |         "href": "#",
28 |         "text": "Nav Item 4"
29 |       }
30 |     ]} 
31 |   />
32 | );


--------------------------------------------------------------------------------
/src/components/PrimaryNav/PrimaryNav.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import './PrimaryNav.css';
 4 | 
 5 | export class PrimaryNav extends Component {
 6 |   render() {
 7 | 
 8 |     return (
 9 |       <nav className="c-primary-nav { this.props.styleModifier }">
10 |         <ul className="c-primary-nav__list">
11 |           {this.props.listItems.map(function(listItem, index){
12 |             return <li className="c-primary-nav__item" key={`c-primary-nav__item-${index}`}>
13 |               <a href={ listItem.href }>
14 |                 { listItem.text }
15 |               </a>
16 |             </li>
17 |           })}
18 |         </ul>
19 |       </nav>
20 |     );
21 |   }
22 | }
23 | 
24 | PrimaryNav.propTypes = {
25 |   listItems: PropTypes.array.isRequired,
26 |   href: PropTypes.string,
27 |   text: PropTypes.string
28 | }
29 | 
30 | 


--------------------------------------------------------------------------------
/src/components/CardList/CardList.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import PropTypes from 'prop-types';
 3 | import "./CardList.css";
 4 | import { Card } from "../Card/Card";
 5 | 
 6 | export class CardList extends Component {
 7 |     render() {
 8 |         return (
 9 |             <ul className="c-card-list">
10 |                 {this.props.listItems.map(function(listItem, index) {
11 |                     return (
12 |                         <Card
13 |                             key={`c-card-${index}`}
14 |                             theme={listItem.theme}
15 |                             title={listItem.title}
16 |                             description={listItem.description}
17 |                         />
18 |                     );
19 |                 })}
20 |             </ul>
21 |         );
22 |     }
23 | }
24 | 
25 | CardList.propTypes = {
26 |     listItems: PropTypes.array
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/Button/Button.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import classnames from "classnames";
 3 | import PropTypes from 'prop-types';
 4 | import "./Button.css";
 5 | 
 6 | export class Button extends Component {
 7 | 
 8 |     render() {
 9 |         const btnClass = classnames('c-btn', this.props.className, {
10 |             'c-btn--secondary': this.props.issecondary
11 |         });
12 | 
13 |         return (
14 |             <button
15 |                 className={ btnClass }
16 |                 disabled={ this.props.disabled }
17 |                 {...this.props}
18 |             >
19 |                 {this.props.text}
20 |             </button>
21 |         );
22 |     }
23 | }
24 | 
25 | Button.propTypes = {
26 |     btnClass: PropTypes.string,
27 |     issecondary: PropTypes.bool,
28 |     disabled: PropTypes.bool,
29 |     text: PropTypes.string
30 | }
31 | 
32 | Button.defaultProps = {
33 |     disabled: false,
34 |     text: 'Button'
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/Hero/Hero.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import './Hero.css';
 4 | 
 5 | export class Hero extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div className="c-hero" { ...this.props }>
 9 |         <img className="c-hero__img" src={ this.props.heroimgsrc } alt={ this.props.heroimgalt } />
10 |         <div className="c-hero__body">
11 |           <h2 className="c-hero__title">{ this.props.title }</h2>
12 |           <p className="c-hero__description">{ this.props.description }</p>
13 |         </div>
14 |       </div>
15 |     );
16 |   }
17 | }
18 | 
19 | Hero.propTypes = {
20 |   heroimgsrc: PropTypes.string.isRequired,
21 |   heroimgalt: PropTypes.string.isRequired,
22 |   title: PropTypes.string.isRequired,
23 |   description: PropTypes.string
24 | }
25 | 
26 | Hero.defaultProps = {
27 |   heroimgsrc: "../../images/fpo-1200x650.png",
28 |   title: "Hero Title",
29 |   description: "This is the hero description"
30 | };
31 | 
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-react-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "node-gyp": "^3.8.0",
 7 |     "prop-types": "^15.6.2",
 8 |     "react": "^16.6.0",
 9 |     "react-dom": "^16.6.0",
10 |     "react-scripts": "1.1.4"
11 |   },
12 |   "scripts": {
13 |     "start": "react-scripts start",
14 |     "build": "react-scripts build",
15 |     "test": "react-scripts test --env=jsdom",
16 |     "eject": "react-scripts eject",
17 |     "storybook": "start-storybook -p 9009 -s public",
18 |     "build-storybook": "build-storybook -s public"
19 |   },
20 |   "devDependencies": {
21 |     "@storybook/addon-actions": "^3.4.0",
22 |     "@storybook/addon-knobs": "^3.4.2",
23 |     "storybook-addon-smart-knobs": "^3.3.1",
24 |     "@storybook/addon-links": "^3.4.0",
25 |     "@storybook/addons": "^3.4.0",
26 |     "@storybook/react": "^3.4.0",
27 |     "babel-core": "^6.26.0",
28 |     "babel-runtime": "^6.26.0",
29 |     "classnames": "^2.2.5",
30 |     "node-sass": "^4.9.4",
31 |     "sass-loader": "^6.0.7"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/Card/Card.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import classnames from "classnames";
 3 | import PropTypes from "prop-types";
 4 | import "./Card.css";
 5 | 
 6 | export class Card extends Component {
 7 |     render() {
 8 |         let cardClass = classnames({
 9 |             "c-card": true,
10 |             "c-card--dark": this.props.theme === "dark"
11 |         });
12 | 
13 |         return (
14 |             <div className={cardClass}>
15 |                 <header className="c-card__header">
16 |                     <h3 className="c-card__title">{this.props.title}</h3>
17 |                     <p className="c-card__description">
18 |                         {this.props.description}
19 |                     </p>
20 |                 </header>
21 |                 <div className="c-card__body">{this.props.children}</div>
22 |             </div>
23 |         );
24 |     }
25 | }
26 | 
27 | Card.propTypes = {
28 |     cardClass: PropTypes.string,
29 |     title: PropTypes.string,
30 |     description: PropTypes.string,
31 |     children: PropTypes.node
32 | }
33 | 
34 | Card.defaultProps = {
35 |     title: "Card Title",
36 |     description: "This is the card description"
37 | };


--------------------------------------------------------------------------------
/src/components/InlineForm/InlineForm.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import PropTypes from 'prop-types';
 3 | import "./InlineForm.css";
 4 | import { Button } from "../Button/Button";
 5 | 
 6 | export class InlineForm extends Component {
 7 |     render() {
 8 |         return (
 9 |             <form
10 |                 className="c-inline-form"
11 |                 method={this.props.method}
12 |                 action={this.props.action}
13 |             >
14 |                 <label htmlFor={ this.props.id } className="c-inline-form__label u-is-vishidden">{this.props.label}</label>
15 |                 <input
16 |                     id={ this.props.id }
17 |                     className="c-inline-form__input"
18 |                     placeholder={this.props.placeholder}
19 |                 />
20 |                 <Button text={this.props.cta} />
21 |             </form>
22 |         );
23 |     }
24 | }
25 | 
26 | InlineForm.propTypes = {
27 |     method: PropTypes.oneOf(['get', 'post']).isRequired,
28 |     action: PropTypes.string.isRequired,
29 |     id: PropTypes.string.isRequired,
30 |     label: PropTypes.string.isRequired,
31 |     placeholder: PropTypes.string,
32 |     cta: PropTypes.string
33 | }
34 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/src/components/CardList/CardLIst.stories.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { withKnobs } from '@storybook/addon-knobs/react';
 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs';
 5 | import { CardList } from './CardList';
 6 | 
 7 | let stories = storiesOf('Lists & Collections/CardList', module);
 8 | 
 9 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs);
10 | 
11 | stories.add('Default', () =>
12 |   <CardList listItems={[
13 |     {
14 |       "title": "Squeeze Its",
15 |       "description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
16 |     },
17 |     {
18 |       "title": "Card Title",
19 |       "description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
20 |     },
21 |     {
22 |       "title": "Hugs",
23 |       "description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
24 |     },
25 |     {
26 |       "href": "http://google.com",
27 |       "title": "Mondo",
28 |       "description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
29 |     }
30 |   ]} />
31 | );
32 | 


--------------------------------------------------------------------------------
/src/components/Header/Header.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import PropTypes from 'prop-types';
 3 | import "./Header.css";
 4 | import { Logo } from "../Logo/Logo";
 5 | import { PrimaryNav } from "../PrimaryNav/PrimaryNav";
 6 | import { InlineForm } from "../InlineForm/InlineForm";
 7 | import logoImg from "../../images/fpo-120x60.png";
 8 | import globals from "../../data/globals.json";
 9 | 
10 | export class Header extends Component {
11 |     render() {
12 |         return (
13 |             <header className="c-header" {...this.props}>
14 |                 <Logo
15 |                     href="#"
16 |                     src={logoImg}
17 |                     alt={globals.company.name}
18 |                 />
19 | 
20 |                 <PrimaryNav
21 |                     listItems={[
22 |                         {
23 |                             href: "#",
24 |                             text: "Nav Item 1"
25 |                         },
26 |                         {
27 |                             href: "#",
28 |                             text: "Nav Item "
29 |                         },
30 |                         {
31 |                             href: "#",
32 |                             text: "Nav Item 3"
33 |                         },
34 |                         {
35 |                             href: "#",
36 |                             text: "Nav Item 4"
37 |                         }
38 |                     ]}
39 |                 />
40 | 
41 |                 <InlineForm
42 | 					method="post"
43 | 					action="#"
44 |                     placeholder="Search the site"
45 |                     cta="Search"
46 |                     id="search-form"
47 |                     label="Search the site"
48 |                 />
49 |                 {this.props.children}
50 |             </header>
51 |         );
52 |     }
53 | }
54 | 
55 | Header.propTypes = {
56 |     children: PropTypes.node
57 | }


--------------------------------------------------------------------------------
/src/components/TextPassage/TextPassage.stories.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { withKnobs } from '@storybook/addon-knobs/react';
 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs';
 5 | import { TextPassage } from './TextPassage';
 6 | 
 7 | let stories = storiesOf('Text/TextPassage', module);
 8 | 
 9 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs);
10 | 
11 | stories.add('Default', () =>
12 |   <TextPassage>
13 |     <p>A text passage contains arbitrary text that might come from a CMS. It should live within a container that caps the line length of the text to avoid a straining reading experience.</p>
14 | 
15 |     <h2>Heading 2</h2>
16 | 
17 |     <p>This is another paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
18 | 
19 |     <ul>
20 |       <li>Here is a unordered list item</li>
21 |       <li>Here is a unordered list item</li>
22 |       <li>Here is a unordered list item</li>
23 |       <li>Here is a unordered list item</li>
24 |     </ul>
25 | 
26 |     <h3>Heading 3</h3>
27 | 
28 |     <ol>
29 |       <li>Here is a unordered list item</li>
30 |       <li>Here is a unordered list item</li>
31 |       <li>Here is a unordered list item</li>
32 |       <li>Here is a unordered list item</li>
33 |     </ol>
34 | 
35 |     <p><a href="#">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
36 | 
37 |     <blockquote>
38 |       <p>This is a quotation from something.</p>
39 |       <cite>Cite source</cite>
40 |     </blockquote>
41 | 
42 |     <p>That is all.</p>
43 |   </TextPassage>
44 | );
45 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import './css/App.css';
 3 | import { Header } from './components/Header/Header';
 4 | import { Hero } from './components/Hero/Hero';
 5 | import { Section } from './components/Section/Section';
 6 | import { CardList } from './components/CardList/CardList';
 7 | import { TextPassage } from './components/TextPassage/TextPassage';
 8 | import { Footer } from './components/Footer/Footer';
 9 | 
10 | import heroImg from './images/fpo-1200x650.png';
11 | 
12 | class App extends Component {
13 |   render() {
14 | 	return (
15 | 		<div className="App">
16 | 			<Header />
17 | 			
18 | 			<Hero title="This is my hero" description="This is the hero description text" heroimgsrc={ heroImg } />
19 | 			<Section title="Hi I'm a section title" description="This is a description of the section">
20 | 		  		<CardList listItems={[
21 | 					{
22 | 					"theme" : "dark",
23 | 					"title": "Squeeze Its",
24 | 					"description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
25 | 					},
26 | 					{
27 | 					"title": "Capri Suns",
28 | 					"description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
29 | 					},
30 | 					{
31 | 					"title": "Hugs",
32 | 					"description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
33 | 					},
34 | 					{
35 | 					"href": "http://google.com",
36 | 					"title": "Mondo",
37 | 					"description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
38 | 					}
39 | 		  		]} />
40 | 				
41 | 			</Section>
42 | 
43 | 			<Section title="Hi I'm another section" description="This is a different description">
44 | 				<div className="l-linelength-container">
45 | 					<TextPassage>
46 | 						<p>A text passage contains arbitrary text that might come from a CMS. It should live within a container that caps the line length of the text to avoid a straining reading experience.</p>
47 | 
48 | 						<h2>Heading 2</h2>
49 | 
50 | 						<p>This is another paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
51 | 
52 | 						<ul>
53 | 						<li>Here is a unordered list item</li>
54 | 						<li>Here is a unordered list item</li>
55 | 						<li>Here is a unordered list item</li>
56 | 						<li>Here is a unordered list item</li>
57 | 						</ul>
58 | 
59 | 						<h3>Heading 3</h3>
60 | 
61 | 						<ol>
62 | 						<li>Here is a unordered list item</li>
63 | 						<li>Here is a unordered list item</li>
64 | 						<li>Here is a unordered list item</li>
65 | 						<li>Here is a unordered list item</li>
66 | 						</ol>
67 | 
68 | 						<p><a href="#link">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
69 | 
70 | 						<blockquote>
71 | 						<p>This is a quotation from something.</p>
72 | 						<cite>Cite source</cite>
73 | 						</blockquote>
74 | 
75 | 						<p>That is all.</p>
76 | 					</TextPassage>
77 | 				</div>{/* end l-linelength-container */}
78 | 			</Section>
79 | 			<Footer />
80 | 	  	</div>
81 | 	);
82 |   }
83 | }
84 | 
85 | export default App;
86 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Dumb React
  2 | Dumb React is a collection of [React](https://reactjs.org/) components used to create a static (dumb) website screen. Why do this? Many React tutorials or boilerplates I've encountered are either too basic ("here's a button component!") or more often too complex ("here's a simple babel typescript redux cssmodules isometric oh god oh god oh god..."). I wanted to be able to draw a straight line from how a simple component ("[atom](http://atomicdesign.bradfrost.com/chapter-2/#atoms)" in atomic design speak) makes its way into a full [page](http://atomicdesign.bradfrost.com/chapter-2/#pages).
  3 | 
  4 | There are a ton of different ways to build reusable components and put dynamic content inside them, and many teams &mdash; even ones that aren't building highly-interactive web apps that would actually benefit from a tool like React &mdash; are reaching for React to create component-driven experiences. So in that spirit, I wanted to create a demo that shows how to construct a whole screen (even if it's a dumb, static one) out of React components.
  5 | 
  6 | [More info in my blog post](http://bradfrost.com/blog/post/dumb-react/)
  7 | 
  8 | # React w/ Storybook Starter
  9 | This repo is a fork of Micah Godbolt's [React with Storybook Starter](https://github.com/micahgodbolt/react-with-storybook-starter), which is a combination of [Create React App](https://github.com/facebook/create-react-app) and the [Storybook CLI](https://github.com/storybooks/storybook#getting-started). The `stories` folder has been changed to `components` and a new Button component has been scaffolded and used in the application.
 10 | 
 11 | ## Using This Repo
 12 | 
 13 | - `git clone https://github.com/bradfrost/dumb-react.git && cd dumb-react`
 14 | - `npm install`
 15 | - `npm start` will start the application
 16 | - `npm run storybook` will start the storybook.
 17 | 
 18 | ## Building components
 19 | 
 20 | Start building in the `src/components` folder with this folder structure
 21 | 
 22 | ```js
 23 | - ComponentName
 24 |   - Component.css
 25 |   - ComponentName.stories.js
 26 |   - ComponentName.js
 27 | ```
 28 | 
 29 | Create `src/components/Button` and add `Button.css`, `Button.js` and `Button.stories.js`
 30 | 
 31 | __Button.js__ will be:
 32 | 
 33 | ```js
 34 | import React, { Component } from 'react';
 35 | import './Button.css';
 36 | 
 37 | export class Button extends Component {
 38 |   render() {
 39 |     return (
 40 |       <button className="Button" {...this.props}> {this.props.children} </button>
 41 |     );
 42 |   }
 43 | }
 44 | ```
 45 | 
 46 | __Button.stories.js__ will be:
 47 | 
 48 | ```js
 49 | import React from 'react';
 50 | import { storiesOf } from '@storybook/react';
 51 | import { Button } from './Button';
 52 | 
 53 | let stories = storiesOf('Button', module);
 54 | 
 55 | stories.add('Default', () =>
 56 |   <Button onClick={() => console.log("clicked!!")}>
 57 |     Hello Button
 58 |   </Button>
 59 | );
 60 | 
 61 | ```
 62 | 
 63 | __Button.css__ is plain CSS, but will automatically be loaded when the component is used.
 64 | 
 65 | ### Run Storybook
 66 | 
 67 | ```bash
 68 | npm run storybook
 69 | ```
 70 | 
 71 | ## Add Button to App.js
 72 | 
 73 | ```jsx
 74 | import React, { Component } from 'react';
 75 | import { Button } from './components/Button/Button';
 76 | 
 77 | class App extends Component {
 78 |   render() {
 79 |     return (
 80 |       <div className="App">
 81 |         <Button onClick={() => alert('i was clicked!')} > Click Me Please </Button>
 82 |       </div>
 83 |     );
 84 |   }
 85 | }
 86 | 
 87 | export default App;
 88 | ```
 89 | 
 90 | ### Run the application 
 91 | 
 92 | ```bash
 93 | npm start
 94 | ```
 95 | 
 96 | ## Adding Sass
 97 | 
 98 | Adding Sass involves "ejecting" out of create react app. This process is out of the scope of this demo, but I'll include some links below.
 99 | 
100 | - [Adding Sass support to Create React App](https://medium.com/front-end-hacking/how-to-add-sass-or-scss-to-create-react-app-c303dae4b5bc)
101 | - [Adding Sass support to Storybook](https://storybook.js.org/configurations/custom-webpack-config/)
102 | 


--------------------------------------------------------------------------------