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 '@dmn-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.