amphora-html 6.0.1-dev.0 → 7.0.0

package/lib/styleguide.test.js

@@ -1,268 +0,0 @@
-'use strict';
-
-const _ = require('lodash'),
-  filename = __filename.split('/').pop().split('.').shift(),
-  lib = require('./' + filename),
-  files = require('nymag-fs');
-
-jest.mock('nymag-fs', () => ({
-  getFiles: () => []
-}));
-
-describe(_.startCase(filename), () => {
-  beforeEach(() => {
-    var diMockData = [
-        'blockquote.css',
-        'video.css'
-      ],
-      vultureMockData = [
-        'blockquote.css',
-        'blockquote_red.css',
-        'blockquote_blue.css',
-        'video.css',
-        'video_fullbleed.css',
-        'video_mobile.css'
-      ],
-      defaultMockData = [
-        'blockquote.css',
-        'blockquote_red.css',
-        'pull-quote.css',
-        'pull-quote_large.css'
-      ];
-
-    jest.spyOn(files, 'getFiles').mockImplementation((path) => {
-      if (path === 'styleguides/di/components') return diMockData;
-      if (path === 'styleguides/vulture/components') return vultureMockData;
-      if (path === 'styleguides/_default/components') return defaultMockData;
-      return [];
-    });
-
-    // bust memoization cache
-    lib.getVariations.cache = new Map();
-  });
-
-  test('get all available component variations', () => {
-    var expected = {
-      blockquote: [ 'blockquote_red', 'blockquote_blue' ],
-      video: [ 'video_fullbleed', 'video_mobile' ],
-      'pull-quote': ['pull-quote_large']
-    };
-
-    expect(lib.getVariations('vulture')).toEqual(expected);
-  });
-
-  test('gets default variations', () => {
-    var expected = {
-      'pull-quote': [ 'pull-quote_large' ],
-      blockquote: [ 'blockquote_red' ]
-    };
-
-    expect(lib.getVariations('_default')).toEqual(expected);
-  });
-
-  test('gets default variations when passed no styleguide', () => {
-    var expected = {
-      'pull-quote': [ 'pull-quote_large' ],
-      blockquote: [ 'blockquote_red' ]
-    };
-
-    expect(lib.getVariations()).toEqual(expected);
-  });
-
-  test(
-    'set default variations for components that have variations but none set',
-    () => {
-      var testData = {
-          main: [
-            {
-              _ref: 'www.vulture.com/_components/blockquote/instances/foo@published',
-              componentVariation: 'blockquote_red'
-            },
-            {
-              _ref: 'www.vulture.com/_components/blockquote/instances/bar@published',
-            },
-            {
-              _ref: 'www.vulture.com/_components/clay-paragraph/instances/cjeq5662h001b3i61rr8fffu1@published',
-            },
-            {
-              _ref: 'www.vulture.com/_components/article-sidebar/instances/foobar@published',
-              content: [
-                { _ref: 'www.vulture.com/_components/blockquote/instances/pho@published'}
-              ]
-            }
-          ],
-          primary: [
-            {
-              _ref: 'www.vulture.com/_components/video/instances/foo@published'
-            },
-          ]
-        },
-        expectedData = {
-          main: [
-            {
-              _ref: 'www.vulture.com/_components/blockquote/instances/foo@published',
-              componentVariation: 'blockquote_red'
-            },
-            {
-              _ref: 'www.vulture.com/_components/blockquote/instances/bar@published',
-              componentVariation: 'blockquote'
-            },
-            {
-              _ref: 'www.vulture.com/_components/clay-paragraph/instances/cjeq5662h001b3i61rr8fffu1@published',
-              componentVariation: 'clay-paragraph'
-            },
-            {
-              _ref: 'www.vulture.com/_components/article-sidebar/instances/foobar@published',
-              componentVariation: 'article-sidebar',
-              content: [
-                {
-                  _ref: 'www.vulture.com/_components/blockquote/instances/pho@published',
-                  componentVariation: 'blockquote'
-                }
-              ]
-            }
-          ],
-          primary: [
-            {
-              _ref: 'www.vulture.com/_components/video/instances/foo@published',
-              componentVariation: 'video'
-            },
-          ]
-        },
-        expectedUsedVariations = [
-          'layout',
-          'blockquote_red',
-          'blockquote',
-          'clay-paragraph',
-          'article-sidebar',
-          'video'
-        ],
-        state = {
-          _layoutRef: 'www.vulture.com/_components/layout/instances/article',
-          _componentVariations: lib.getVariations('vulture')
-        };
-
-      lib.setDefaultVariations(
-        testData,
-        state
-      );
-
-      expect(testData).toEqual(expectedData);
-      expect(state._usedVariations).toEqual(expectedUsedVariations);
-    }
-  );
-
-  test(
-    'sets default variation if specified variation does not exist',
-    () => {
-      let testData = {
-          main: [
-            {
-              _ref: 'domain.com/_components/blockquote/instances/foo',
-              componentVariation: 'blockquote_red'
-            }
-          ]
-        },
-        expectedData = {
-          main: [
-            {
-              _ref: 'domain.com/_components/blockquote/instances/foo',
-              componentVariation: 'blockquote'
-            }
-          ]
-        },
-        state = {
-          _layoutRef: 'www.vulture.com/_components/layout/instances/article',
-          _componentVariations: {}
-        };
-
-      lib.setDefaultVariations(testData, state);
-      expect(testData).toEqual(expectedData);
-    }
-  );
-
-  test('handles rendering a component and not a page', () => {
-    let testData = {
-        content: [{
-          _ref: 'domain.com/_components/blockquote/instances/foo'
-        }],
-        singleCmpt: {
-          _ref: 'domain.com/_components/foobar/instances/baz'
-        }
-      },
-      expectedData = {
-        content: [
-          {
-            _ref: 'domain.com/_components/blockquote/instances/foo',
-            componentVariation: 'blockquote'
-          }
-        ],
-        singleCmpt: {
-          _ref: 'domain.com/_components/foobar/instances/baz',
-          componentVariation: 'foobar'
-        }
-      },
-      state = {
-        _self: 'domain.com/_components/foo/instances/bar',
-        _layoutRef: undefined,
-        _componentVariations: {}
-      };
-
-    lib.setDefaultVariations(testData, state);
-    expect(testData).toEqual(expectedData);
-  });
-
-  test(
-    'do not change data if there are no components in the page data',
-    () => {
-      var testData = ['Steve Rogers', 'Tony Stark', 'Natasha Romanov', 'Clint Barton', 'Wanda Maximoff'],
-        variations = lib.getVariations('vulture'),
-        state = {
-          _layoutRef: 'www.vulture.com/_components/layout/instances/article',
-          _componentVariations: variations
-        };
-
-      lib.setDefaultVariations(testData, state);
-      expect(testData).toEqual(testData);
-    }
-  );
-
-  test('do not change data if there are no component variations', () => {
-    var testData = [
-      {
-        _ref: 'nymag.com/daily/intelligencer/_components/blockquote/instances/foo@published'
-      },
-      {
-        _ref: 'nymag.com/daily/intelligencer/_components/blockquote/instances/bar@published',
-      },
-      {
-        _ref: 'nymag.com/daily/intelligencer/_components/clay-paragraph/instances/cjeq5662h001b3i61rr8fffu1@published',
-      }
-      ],
-      variations = lib.getVariations('di'),
-      state = {
-        _layoutRef: 'nymag.com/daily/intelligencer/_components/layout/instances/article',
-        _componentVariations: variations
-      };
-
-    lib.setDefaultVariations(testData, state);
-    expect(testData).toEqual(testData);
-  });
-
-  test('handles top level componentVariations (when rendering an individual component with variation', () => {
-    let _data = {
-        _ref: 'nymag.com/daily/intelligencer/_components/blockquote/instances/foo@published',
-        componentVariation: 'blockquote_red',
-      },
-      state = {
-        _self: 'nymag.com/daily/intelligencer/_components/blockquote/instances/foo@published',
-        _layoutRef: undefined,
-        _componentVariations: lib.getVariations('di')
-      };
-
-    lib.setDefaultVariations(_data, state);
-    expect(state._usedVariations).toEqual([
-      'blockquote_red'
-    ]);
-  });
-});

package/test/setupFile.js

@@ -1,3 +0,0 @@
-'use strict';
-
-jest.mock('clay-log');

package/website/README.md

@@ -1,114 +0,0 @@
-You will need to have `Node >= 8.x` and `Yarn >= 1.5`.
-
-# Run the local server
-
-1. Make sure all the dependencies for the website are installed:
-
-```sh
-$ yarn
-```
-
-or
-
-```sh
-$ npm install
-```
-
-2. Go to the `website` directory and run your dev server:
-
-```sh
-$ yarn start
-```
-
-or
-
-```sh
-$ npm run start
-```
-
-## Directory Structure
-
-Your project file structure should look something like this
-
-```
-root-directory
-  ├── docs
-    ├── docs.md
-  website/
-    ├── README.md
-    ├── core
-      └── Footer.js
-    ├── i18n
-      └── en.json
-    ├── package.json
-    ├── pages
-      └── en
-        └── index.js
-    ├── sidebars.json
-    ├── siteConfig.js
-    └── static
-      ├── css
-        └── custom.css
-      └── img
-        ├── favicon
-        └── logo.svg
-```
-
-# Versioning the Code
-
-The first step to begin the process of versioning your documentation is to generate the `versions` script on your website directory with the following command.
-
-```sh
-yarn examples versions
-```
-
-or
-
-```sh
-npm run examples versions
-```
-
-Then, you proceed to create a version of the docs that you need. In this case, it needs to match the version of your current `package.json`. To do this we will use the following command followed by the version number that you want.
-
-```sh
-$ yarn version X.X.X
-```
-
-or
-
-```sh
-$ npm version X.X.X
-```
-
-This will create all the files needed to handle the version that you just built, but this will be necessary only in 2 cases:
-
-1. If the documentation doesn't have a version set
-2. If there is a major update on the number of the version
-
-For other cases, we have an active call [update version](https://github.com/clay/amphora-html/blob/master/.github/main.workflow) that will handle the change of the version automatically.
-
-# Publish the website
-
-This process is automatically done by an action call [Build and push docs](https://github.com/clay/amphora-html/blob/master/.github/main.workflow) but you can deploy your documentation manually. You just need to run the following commands:
-
-```sh
-$ yarn build
-```
-
-or
-
-```sh
-$ npm run build
-```
-
-Then, deploy the static files generated. These files will be pushed to the `gh-page` branch.
-
-```sh
-$ yarn deploy
-```
-
-or
-
-```sh
-$ npm run deploy
-```

package/website/core/Footer.js

@@ -1,55 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const React = require('react');
-
-class Footer extends React.Component {
-  docUrl(doc, language) {
-    const baseUrl = this.props.config.baseUrl;
-    const docsUrl = this.props.config.docsUrl;
-    const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
-    const langPart = `${language ? `${language}/` : ''}`;
-    return `${baseUrl}${docsPart}${langPart}${doc}`;
-  }
-
-  pageUrl(doc, language) {
-    const baseUrl = this.props.config.baseUrl;
-    return baseUrl + (language ? `${language}/` : '') + doc;
-  }
-
-  render() {
-    return (
-      <footer className="nav-footer" id="footer">
-        <section className="sitemap">
-          <a href={this.props.config.baseUrl} className="nav-home">
-            {this.props.config.footerIcon && (
-              <img
-                src={this.props.config.baseUrl + this.props.config.footerIcon}
-                alt={this.props.config.title}
-                width="66"
-                height="58"
-              />
-            )}
-          </a>
-          <div>
-            <h5>Docs</h5>
-            <a href={this.docUrl('intro', this.props.language)}>
-              Introduction
-            </a>
-          </div>
-          <div>
-            <h5>More</h5>
-            <a target="_blank" href="https://github.com/clay/amphora-html">GitHub</a>
-          </div>
-        </section>
-        <section className="copyright">{this.props.config.copyright}</section>
-      </footer>
-    );
-  }
-}
-
-module.exports = Footer;

package/website/package.json

@@ -1,16 +0,0 @@
-{
-  "scripts": {
-    "examples": "docusaurus-examples",
-    "start": "docusaurus-start",
-    "build": "docusaurus-build",
-    "publish-gh-pages": "docusaurus-publish",
-    "write-translations": "docusaurus-write-translations",
-    "version": "docusaurus-version",
-    "rename-version": "docusaurus-rename-version",
-    "deploy": "gh-pages -d build/amphora-html"
-  },
-  "devDependencies": {
-    "docusaurus": "^1.8.1",
-    "gh-pages": "^2.0.1"
-  }
-}

package/website/pages/en/index.js

@@ -1,103 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const React = require('react');
-
-const CompLibrary = require('../../core/CompLibrary.js');
-
-const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
-const Container = CompLibrary.Container;
-const GridBlock = CompLibrary.GridBlock;
-
-class HomeSplash extends React.Component {
-  render() {
-    const {siteConfig, language = ''} = this.props;
-    const {baseUrl, docsUrl} = siteConfig;
-    const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
-    const langPart = `${language ? `${language}/` : ''}`;
-    const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
-
-    const SplashContainer = props => (
-      <div className="homeContainer">
-        <div className="homeSplashFade">
-          <div className="wrapper homeWrapper">{props.children}</div>
-        </div>
-      </div>
-    );
-
-    const Logo = props => (
-      <div className="projectLogo">
-        <img src={props.img_src} alt="Project Logo" />
-      </div>
-    );
-
-    const ProjectTitle = () => (
-      <h2 className="projectTitle">
-        {siteConfig.title}
-        <small>{siteConfig.tagline}</small>
-      </h2>
-    );
-
-    const PromoSection = props => (
-      <div className="section promoSection">
-        <div className="promoRow">
-          <div className="pluginRowBlock">{props.children}</div>
-        </div>
-      </div>
-    );
-
-    const Button = props => (
-      <div className="pluginWrapper buttonWrapper">
-        <a className="button" href={props.href} target={props.target}>
-          {props.children}
-        </a>
-      </div>
-    );
-
-    return (
-      <SplashContainer>
-        <div className="inner">
-          <ProjectTitle siteConfig={siteConfig} />
-          <PromoSection>
-          <Button href={docUrl('intro')}>Introduction</Button>
-            <Button href="https://github.com/clay/amphora-html" target="_blank">View on Github</Button>
-          </PromoSection>
-        </div>
-      </SplashContainer>
-    );
-  }
-}
-
-class Index extends React.Component {
-  render() {
-    const {config: siteConfig, language = ''} = this.props;
-    const {baseUrl} = siteConfig;
-
-    const Block = props => (
-      <Container
-        padding={['bottom', 'top']}
-        id={props.id}
-        background={props.background}>
-        <GridBlock
-          align="center"
-          contents={props.children}
-          layout={props.layout}
-        />
-      </Container>
-    );
-
-    return (
-      <div>
-        <HomeSplash siteConfig={siteConfig} language={language} />
-        <div className="mainContainer">
-        </div>
-      </div>
-    );
-  }
-}
-
-module.exports = Index;

package/website/pages/en/versions.js

@@ -1,92 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const React = require('react');
-
-const CompLibrary = require('../../core/CompLibrary');
-
-const Container = CompLibrary.Container;
-
-const CWD = process.cwd();
-
-const versions = require(`${CWD}/versions.json`);
-
-function Versions(props) {
-  const {config: siteConfig} = props;
-  const latestVersion = versions[0];
-  const repoUrl = "https://github.com/clay/amphora-html";
-  return (
-    <div className="docMainWrapper wrapper">
-      <Container className="mainContainer versionsContainer">
-        <div className="post">
-          <header className="postHeader">
-            <h1>{siteConfig.title} Versions</h1>
-          </header>
-          <p>New versions of this project are released every so often.</p>
-          <h3 id="latest">Current version (Stable)</h3>
-          <table className="versions">
-            <tbody>
-              <tr>
-                <th>{latestVersion}</th>
-                <td>
-                  <a href={`${siteConfig.baseUrl}docs/intro`}>Documentation</a>
-                </td>
-                <td>
-                  <a href={`https://github.com/clay/amphora-html/releases/tag/v${latestVersion}`} target="_blank">Release Notes</a>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <p>
-            This is the version that is configured automatically when you first
-            install this project.
-          </p>
-          <h3 id="rc">Pre-release versions</h3>
-          <table className="versions">
-            <tbody>
-              <tr>
-                <th>master</th>
-                <td>
-                  <a href={`${siteConfig.baseUrl}docs/next/intro`}>Documentation</a>
-                </td>
-                <td>
-                  <a href="https://github.com/clay/amphora-html/releases" target="_blank">Release Notes</a>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <p>Other text describing this section.</p>
-          <h3 id="archive">Past Versions</h3>
-          <table className="versions">
-            <tbody>
-              {versions.map(
-                version =>
-                  version !== latestVersion && (
-                    <tr>
-                      <th>{version}</th>
-                      <td>
-                        <a href={`${siteConfig.baseUrl}docs/${version}/intro`}>Documentation</a>
-                      </td>
-                      <td>
-                        <a href={`https://github.com/clay/amphora-html/releases/tag/v${version}`}>Release Notes</a>
-                      </td>
-                    </tr>
-                  ),
-              )}
-            </tbody>
-          </table>
-          <p>
-            You can find past versions of this project on{' '}
-            <a href={repoUrl} target="_blank">GitHub</a>.
-          </p>
-        </div>
-      </Container>
-    </div>
-  );
-}
-
-module.exports = Versions;

package/website/sidebars.json

@@ -1,13 +0,0 @@
-{
-  "docs": {
-    "Introduction": [
-      "intro"
-    ],
-    "Integration": [
-      "integration"
-    ],
-    "Styleguide": [
-      "style"
-    ]
-  }
-}