@arc-core-components/feature_global-amp-nav

Core component for the amp-sidebar in a Fusion implementation.

Usage no npm install needed!

<script type="module">
  import arcCoreComponentsFeatureGlobalAmpNav from 'https://cdn.skypack.dev/@arc-core-components/feature_global-amp-nav';
</script>

README

Feature: Amp Nav

What does this do?

When used in a Fusion Project, this Core Component can be used to render a navigation bar that is compliant with amp, using the amp-sidebar component.

The Story Card requires the following information as props:

  • data
    • Array of sites -- the children returned from the Site Service content source.
  • elementClasses
    • Object of classes you can pass through to your markup.
  • sidebarConfig
    • Determines what side of the page your sidebar will render from, and allows you to pass classes to it.
  • logoConfig
    • Allows you to pass in a logo element, and allows it to go to the right or left side.
  • closeButtonConfig
    • Allows you to pass in a custom icon, along with classes.
  • openButtonConfig
    • Allows you to pass in a custom icon, along with classes

How do I use it?

  import AMPNav from '@arc-core-components/feature_global-amp-nav'

  <AMPNav {..yourProps}></AMPNav>

Take a look in the src file to see a suggested implementation, in index.mdx

How can I view what's in there quickly?

Run npm i && npm run docz:dev after cloning to see what is within.

Amp Notes:

Read the amp-sidebar documentation

Testing & Linting

We are using Jest and XO for testing and linting.

We are using Husky to run a pre-push hook, preventing un-linted or code that fails tests from making it into the repo.

To test: npm test

To lint: npm run lint - This will also fix any simple linter errors automatically.

To push without testing or linting: git push --no-verify - This can often be helpful if you just need to push a branch for demonstration purposes or for help.