Mobile Updates v1

[matthewgisonno]

Description / Motivation

Extensive changes for Mobile Navigation and Layout. This is part 1 in my attempt to break up a 50+ file change branch.

• Sitecore context Storybook decorator for all stories, can engage / test different page states in Storybook through the sitecorePageState: 'edit’, props.
• Added extra breakpoints to Storybook for changing view to Mobile devices.
• Install 2 packages @chakra-ui/icons and clsx for icons and className coordination.
• Created new Header component.
• Created new Footer component.
• Updated Layout component to call the new Header and Footer components.
• Created a LayoutConstants file with common and shared items for the Mobile and Desktop template.
• Updated the Chakra UI Theme with Button styles and sizes, Link styles and sizes, colors, etc.
• Updated some .scss files in support of the Global Navigation / Template and update the main html property with 16px font-size.
• Slight Refactor to Logo component in support of new layout.
• Navigation component was completely re-written.
• Added a LayoutFlex wrapper for the Chakra UI Flex component, which will set Flex container specific items according to the Chakra UI theme, like max-width, padding, margins, etc which can be re-used in components.
• Created / Updated a couple storybook stories.
• Added a template compiler path shortcut.

How Has This Been Tested?

Locally in Connected mode and Storybook.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have read the Contributing guide.
• My code/comments/docs fully adhere to the Code of Conduct.
• My change is a code change.
• My change is a documentation change and there are NO other updates required.