npm - luna-one - Versions diffs - 3.1.589 → 3.1.590 - Mend

luna-one 3.1.589 → 3.1.590

Files changed (194) hide show

package/README.md +2315 -2315
package/dist/application/assets/images/carat-down.svg +3 -3
package/dist/application/assets/images/carat-up.svg +3 -3
package/dist/application/assets/images/close-blue.svg +4 -4
package/dist/application/assets/images/close.svg +3 -3
package/dist/application/assets/images/ellipses.svg +6 -6
package/dist/application/assets/images/facebook.svg +13 -13
package/dist/application/assets/images/instagram.svg +19 -19
package/dist/application/assets/images/linkedin.svg +15 -15
package/dist/application/assets/images/twitter.svg +17 -17
package/dist/application/assets/images/youtube.svg +14 -14
package/dist/application/components/Loading/Loading.scss +10 -10
package/dist/global-styles/content/typography.scss +140 -140
package/dist/global-styles/fonts/benton.scss +113 -113
package/dist/global-styles/global-terra.scss +10 -10
package/dist/global-styles/global-vars.scss +599 -599
package/dist/global-styles/layout/_css-grid.scss +20 -20
package/dist/global-styles/layout/_media-queries.scss +35 -35
package/dist/global-styles/layout/_normalize.scss +340 -340
package/dist/global-styles/layout/_reset.scss +13 -13
package/dist/global-styles/mixins/_box-shadow.scss +6 -6
package/dist/global-styles/mixins/_mixins.scss +5 -5
package/dist/global-styles/mixins/_organism-padding-hack.scss +7 -7
package/dist/global-styles/mixins/_typography.scss +102 -102
package/dist/global-styles/mixins/_yiq.scss +50 -50
package/dist/global-styles/mixins/_z-index.scss +3 -3
package/dist/global-styles/terra.scss +15 -15
package/dist/global-styles/utilities/_box-shadow.scss +8 -8
package/dist/global-styles/utilities/_display.scss +48 -48
package/dist/global-styles/utilities/_font-family.scss +15 -15
package/dist/global-styles/utilities/_parallax.scss +23 -23
package/dist/global-styles/utilities/_text-align.scss +24 -24
package/dist/luna/components/2x2/2x2.scss +915 -915
package/dist/luna/components/AdminCategoryData/AdminCategoryData.scss +81 -81
package/dist/luna/components/AdminProductData/AdminProductData.scss +75 -75
package/dist/luna/components/BlockListItems/BlockListItems.scss +285 -285
package/dist/luna/components/BrowserSupportBanner/BrowserSupportBanner.scss +6 -6
package/dist/luna/components/CTAButtons/CTAButtons.js +1 -1
package/dist/luna/components/CTAButtons/CTAButtons.scss +19 -19
package/dist/luna/components/ComparisonTable/ComparisonTable.scss +331 -331
package/dist/luna/components/CtaWithHeader/CtaWithHeader.scss +324 -324
package/dist/luna/components/DataPoint/DataPoint.scss +170 -170
package/dist/luna/components/EventCard/EventCard.scss +134 -134
package/dist/luna/components/FilterSection/FilterSection.scss +143 -143
package/dist/luna/components/HTMLEmbed/HTMLEmbed.scss +51 -51
package/dist/luna/components/Header/Header.scss +36 -36
package/dist/luna/components/ImageGallery/ImageGallery.scss +442 -442
package/dist/luna/components/InPageJumpNav/InPageJumpNav.scss +122 -122
package/dist/luna/components/JobPosting/JobPosting.scss +171 -171
package/dist/luna/components/LinkList/LinkList.scss +59 -59
package/dist/luna/components/LinkList/LinkListMethods.js +3 -0
package/dist/luna/components/LoadingSpinner/LoadingSpinner.scss +34 -34
package/dist/luna/components/Login/Login.scss +180 -180
package/dist/luna/components/MegaMenu/MegaMenu.js +2 -2
package/dist/luna/components/MegaMenu/MegaMenu.scss +570 -570
package/dist/luna/components/MegaMenu/menu-generators/AllSections.js +6 -6
package/dist/luna/components/MegaMenu/menu-generators/FeatureSection.js +5 -4
package/dist/luna/components/MegaMenu/menu-generators/FullSubMenu.js +4 -4
package/dist/luna/components/MegaMenu/menu-generators/PartialSubMenu.js +4 -4
package/dist/luna/components/MegaMenu/menu-generators/SubMenu.js +15 -15
package/dist/luna/components/MegaMenu/menu-generators/TertiaryMenu.js +3 -3
package/dist/luna/components/MegaMenu/menu-generators/UncollapsedLinks.js +14 -14
package/dist/luna/components/MegaMenu/menu-generators/UncollapsedSubMenu.js +7 -7
package/dist/luna/components/MiniFeatDropdown/MiniFeatDropdown.scss +107 -107
package/dist/luna/components/MobileLogin/MobileLogin.scss +38 -38
package/dist/luna/components/MobileMegaMenu/MobileMegaMenu.js +8 -8
package/dist/luna/components/MobileMegaMenu/MobileMegaMenu.scss +289 -289
package/dist/luna/components/MobileMegaMenu/MobileMegaMenuCategory.js +9 -9
package/dist/luna/components/MobileMenu/MobileMenu.scss +70 -70
package/dist/luna/components/MobileNav/MobileNav.scss +286 -286
package/dist/luna/components/NavBarTop/NavBarTop.scss +403 -403
package/dist/luna/components/NavSearch/NavSearch.scss +130 -130
package/dist/luna/components/NonTimeBasedListEntries/NonTimeBasedListEntries.scss +339 -339
package/dist/luna/components/OverlayNotice/OverlayNotice.scss +247 -247
package/dist/luna/components/Pagination/Pagination.scss +27 -27
package/dist/luna/components/ProductSummary/ProductSummary.scss +273 -273
package/dist/luna/components/ProseLayout/ProseLayout.scss +384 -384
package/dist/luna/components/RegionCard/RegionCard.scss +86 -86
package/dist/luna/components/ResourceGrid/ResourceGrid.scss +34 -34
package/dist/luna/components/ScrollInPlace/ScrollInPlace.scss +219 -219
package/dist/luna/components/SketchUpPricingCard/SketchUpPricingCard.scss +142 -142
package/dist/luna/components/SlideOutFeat/SlideOutFeat.scss +124 -124
package/dist/luna/components/StoreFrontCard/StoreFrontCard.scss +434 -434
package/dist/luna/components/SupportCard/SupportCard.scss +134 -134
package/dist/luna/components/Tabs/Tabs.scss +871 -871
package/dist/luna/components/TimeBasedList/TimeBasedList.scss +394 -394
package/dist/luna/components/TrainerCard/TrainerCard.scss +51 -51
package/dist/luna/components/TrialForm/TrialComponents/TrialSpecifics.scss +44 -44
package/dist/luna/components/TrialForm/TrialComponents/TrialSummary.scss +57 -57
package/dist/luna/components/TrialForm/TrialFormStart/TrialFormStart.scss +28 -28
package/dist/luna/components/TrialForm/images/check.svg +3 -3
package/dist/luna/components/TrialForm/images/form-border-bottom-dark.svg +4 -4
package/dist/luna/components/TrialForm/images/form-border-bottom-light.svg +4 -4
package/dist/luna/components/TrialForm/images/form-border-top-dark.svg +4 -4
package/dist/luna/components/TrialForm/images/form-border-top-light.svg +4 -4
package/dist/luna/components/UnboundedCard/UnboundedCard.scss +108 -108
package/dist/luna/components/UnboundedCard/playIcon.svg +17 -17
package/dist/luna/components/VariableContentCard/VariableContentCard.scss +253 -253
package/dist/luna/components/Video/Video.scss +209 -209
package/dist/luna/components/VidyardModal/VidyardModal.scss +34 -34
package/dist/luna/components/WaffleMenu/WaffleMenu.scss +73 -73
package/dist/luna/featurettes/Accordion/Accordion.scss +154 -154
package/dist/luna/featurettes/CustomFeat/CustomFeat.scss +17 -17
package/dist/luna/featurettes/Feat1/Feat1.scss +110 -110
package/dist/luna/featurettes/Feat2A/Feat2A.scss +132 -132
package/dist/luna/featurettes/Feat2B/Feat2B.scss +231 -231
package/dist/luna/featurettes/Feat3/Feat3.scss +49 -49
package/dist/luna/featurettes/Feat4/Feat4.scss +86 -86
package/dist/luna/featurettes/Feat5/Feat5.scss +235 -235
package/dist/luna/featurettes/Feat7/Feat7.scss +49 -49
package/dist/luna/featurettes/Feat8/Feat8.scss +103 -103
package/dist/luna/featurettes/IconTextList/IconTextList.scss +124 -124
package/dist/luna/featurettes/ProductsPackage/ProductsPackage.scss +194 -194
package/dist/luna/featurettes/PullQuote/PullQuote.scss +400 -400
package/dist/luna/featurettes/PullQuote/ico-quote-white.svg +3 -3
package/dist/luna/featurettes/PullQuote/ico-quote.svg +3 -3
package/dist/luna/heroes/FilterHero/FilterHero.scss +80 -80
package/dist/luna/heroes/FullBackgroundHero/FullBackgroundHero.scss +722 -722
package/dist/luna/heroes/Hero1/Hero1.scss +223 -223
package/dist/luna/heroes/Hero2/Hero2.scss +165 -165
package/dist/luna/heroes/Hero3/Hero3.scss +250 -250
package/dist/luna/heroes/Hero4/Hero4.scss +112 -112
package/dist/luna/heroes/Hero6/Hero6.scss +127 -127
package/dist/luna/heroes/Hero7/Hero7.scss +193 -193
package/dist/luna/heroes/SuperHero/SuperHero.scss +804 -804
package/dist/luna/images/arrow-diagonal-black.svg +13 -13
package/dist/luna/images/arrow-diagonal-blue.svg +13 -13
package/dist/luna/images/arrow-diagonal-white.svg +13 -13
package/dist/luna/images/bulletpoint.svg +3 -3
package/dist/luna/images/callout-icon.svg +3 -3
package/dist/luna/images/check-blue.svg +4 -4
package/dist/luna/images/circle-arrow-right-black.svg +3 -3
package/dist/luna/images/circle-arrow-right-white.svg +3 -3
package/dist/luna/images/circle-arrow.svg +3 -3
package/dist/luna/images/close-button.svg +42 -42
package/dist/luna/images/close-dark-navy.svg +3 -3
package/dist/luna/images/close-icon.svg +3 -3
package/dist/luna/images/collapse-close-blue.svg +5 -5
package/dist/luna/images/collapse-close-gold.svg +5 -5
package/dist/luna/images/collapse-open-blue.svg +4 -4
package/dist/luna/images/collapse-open-gold.svg +4 -4
package/dist/luna/images/cross-medium-blue.svg +4 -4
package/dist/luna/images/cross-medium-white.svg +5 -5
package/dist/luna/images/down-caret-dark-blue.svg +4 -4
package/dist/luna/images/down-caret-dark-gray.svg +4 -4
package/dist/luna/images/down-caret-light-gray.svg +4 -4
package/dist/luna/images/downArrow.svg +36 -36
package/dist/luna/images/external-arrow-blue.svg +11 -11
package/dist/luna/images/external-arrow-white-theme.svg +12 -12
package/dist/luna/images/external-arrow.svg +12 -12
package/dist/luna/images/form-border-top-light.svg +4 -4
package/dist/luna/images/frame-intersection.svg +3 -3
package/dist/luna/images/gallery-image-corner-border.svg +3 -3
package/dist/luna/images/green-tick.svg +3 -3
package/dist/luna/images/internal-arrow-blue.svg +15 -15
package/dist/luna/images/internal-arrow-white-theme.svg +15 -15
package/dist/luna/images/internal-arrow.svg +15 -15
package/dist/luna/images/logo-icon.svg +17 -17
package/dist/luna/images/pdf-doc.svg +9 -9
package/dist/luna/images/play.svg +17 -17
package/dist/luna/images/right-caret-dark-blue.svg +3 -3
package/dist/luna/images/right-caret-light-gray.svg +4 -4
package/dist/luna/images/right-caret-light-yellow-stroke.svg +9 -9
package/dist/luna/images/right-caret-light-yellow.svg +4 -4
package/dist/luna/images/right-caret-medium-gray.svg +4 -4
package/dist/luna/images/search.svg +9 -9
package/dist/luna/images/skipicon.svg +154 -154
package/dist/luna/images/text-doc.svg +9 -9
package/dist/luna/images/text-lines.svg +22 -22
package/dist/luna/images/tooltip-close-icon.svg +3 -3
package/dist/luna/images/tooltip-icon.svg +3 -3
package/dist/luna/images/up-arrow.svg +36 -36
package/dist/luna/images/up-right-arrow.svg +9 -9
package/dist/luna/images/user-profile.svg +37 -37
package/dist/luna/images/user.svg +4 -4
package/dist/luna/images/waffle.svg +11 -11
package/dist/luna/images/worldwide.svg +19 -19
package/dist/luna/list-feats/ListFeat/ListFeat.scss +112 -112
package/dist/luna/list-feats/ListFeat1/ListFeat1.scss +94 -94
package/dist/luna/list-feats/ListFeat2/ListFeat2.scss +19 -19
package/dist/luna/list-feats/ListFeat4/ListFeat4.scss +32 -32
package/dist/luna/list-feats/ListFeat5/ListFeat5.scss +26 -26
package/dist/luna/list-feats/ListFeat6/ListFeat6.scss +34 -34
package/dist/luna/list-feats/ListFeat7/ListFeat7.scss +13 -13
package/dist/luna/list-feats/ListFeatCustom/ListFeatCustom.scss +7 -7
package/dist/luna/other-organisms/Carousel/Carousel.scss +155 -155
package/dist/luna/other-organisms/Flyout/Flyout.scss +367 -367
package/dist/luna/other-organisms/Footer/Footer.scss +484 -484
package/dist/luna/other-organisms/LanguageSelector/LanguageSelector.scss +318 -318
package/dist/luna/other-organisms/MarketoForm/MarketoForm.scss +56 -56
package/dist/luna/other-organisms/NavBar/NavBar.scss +628 -628
package/dist/luna/other-organisms/SubNav/SubNav.scss +274 -274
package/dist/luna/utils/generateLinks.js +3 -3
package/package.json +91 -91

package/README.md CHANGED Viewed

@@ -1,2315 +1,2315 @@
-# Luna One React Component Library
-The Luna One React Component Library represents the organisms used by the Trimble Creative Strategies team in web development. It consists of a series of heros and featurettes. Examples of each with required an optional props can be found below. Additionally, Luna One provides our Luna Boilerplate with a series of important methods and structural components that allow us to manage fetching, data, state, and content formatting as well as provide components for handling things like `Footer`, `NavBar`, `Stack`, and more.
-Using this library requires that the Terra One React Component Library is also installed, which can be done with `npm i --save terra-one`.
-## Branches and Versions
-#### Master
-- This branch contains the most up to date Luna components BEFORE updating component's compatibility with Gatsby. This includes the application directory inside src/lib/application that contains boilerplate JSON formatting for React Luna Boilerplate from Drupal api-v2 endpoints. Themes are handled in the updated way, but uses old theme colors. This branch is Luna version 3.2.x. Used by Tekla
-#### 3.x
-- This branch is for Luna 3.x versions which have components that are compatible with Gatsby. This contains the most up to date theme colors and styling. When building new components/updates for the future, this is the branch to use. Used by Gatsby Boilerplate.
-#### 2.x
-- This branch is for Luna 2.x versions, most up to date Luna version before the addition of the application directory. This contains the previous way of handling themes. Used by Construction and Careers
-#### 1.x
-- This branch is for Luna 1.x versions and used on Field Technology and Heavy Industry.
-## External Libraries Used:
-- [React Helmet](https://www.npmjs.com/package/react-helmet) - for meta information in the document `<head>`
-- [React Player](https://www.npmjs.com/package/react-player) - for rendering YouTube and Vimeo videos
-- [React Reveal](https://www.npmjs.com/package/react-reveal) - for handling organism animation when they are scrolled into view
-- [React Scroll](https://www.npmjs.com/package/react-scroll) - for direct scrolling behavior from the navigation bar to specific organisms
-- [Vidyard](https://www.npmjs.com/package/@vidyard/embed-code) - for rendering Vidyard videos
-- [Node Sass v4.12.x](https://www.npmjs.com/package/node-sass) - for compiling SASS into CSS
-- [Axios](https://www.npmjs.com/package/axios) - for handling fetch logic
-## Storybook Documentation
-- Technical documentation for Luna 3.x is in the process of being moved to [Storybook](https://mxp-storybook.netlify.app).
-## Components, Hooks, and Methods
-### Luna Organisms and Components
-#### Heroes
-- [Hero1](#hero1)
-- [Hero2](#hero2)
-- [Hero3](#hero3)
-- [Hero4](#hero4)
-- [Hero5](#hero5)
-- [Hero7](#hero7)
-- [FilterHero](#filterhero)
-#### Feats
-- [Feat1](#feat1)
-- [Feat2A](#feat2a)
-- [Feat2B](#feat2b)
-- [Feat3](#feat3)
-- [Feat4](#feat4)
-- [Feat5](#feat5)
-- [Feat7](#feat7)
-- [Feat8](#feat8)
-#### List Feats
-- [ListFeat1](#listfeat1)
-- [ListFeat2](#listfeat2)
-- [ListFeat4](#listfeat4)
-- [ListFeat5](#listfeat5)
-- [ListFeat6](#listfeat6)
-- [ListFeat7](#listfeat7)
-### Boilerplate Components, Hooks, and Methods
-#### Components
-- [FooterHandler](#footerhandler)
-- [HelmetHandler](#helmethandler)
-- [NavBarHandler](#navbarhandler)
-- [Routing](#routing)
-- [Stack](#stack)
-- [Loading](#loading)
-#### Hooks
-- [useErrorPageData](#useerrorpagedata)
-- [useFetch](#usefetch)
-- [useFooterData](#usefooterdata)
-- [useFooterResponse](#usefooterresponse)
-- [useFooterURL](#usefooterurl)
-- [useInnerPageNav](#useinnerpagenav)
-- [useLanguage](#uselanguage)
-- [useLanguages](#uselanguages)
-- [useMetadata](#usemetadata)
-- [useNavData](#usenavdata)
-- [useNavResponse](#usenavresponse)
-- [useNavURL](#usenavurl)
-- [usePageFetch](#usepagefetch)
-- [useRegions](#useregions)
-- [useRoutes](#useroutes)
-- [useScrollTo](#usescrollto)
-- [useSiteData](#usesitedata)
-#### Methods
-- [formatContentSections](#formatcontentsections)
-## Luna Organisms
-#### Important Theme information
-- ALL Organisms are able to take a theme. Themes can be customized.
-- Themes will default to `theme-1` if no theme object is passed in as a prop.
-##### Standard Themes:
-- `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
-  - theme-1: `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-  - theme-2: `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-  - theme-3: `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-  - theme-4: `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-  - theme-5: `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-  * To customize themes, add your own hex values to `color`, and `backgroundColor`, and your own classes with custom styling to `ctaOne` and `ctaTwo`.
-  Example of Theme Object:
-  ```
-  const theme = {
-    color: "blue",
-    backgroundColor: "pink",
-    ctaOne: "primary--1",
-    ctaTwo: "secondary--1"
-  }
-  ```
-  - Some organisms have additional key value pairs that are necessary, like `Feat7`, these additions are documented below in each organism section.
----
-#### Hero1 -
-###### Props -
-- `content` **(required)** - object containing `images`, `header`, `text`, `ctas`
-  - images **(required)** - object consisting of `desktop`, `tablet`, and `mobile` image objects
-    - `desktop` - object with `url` and `altText` strings for the desktop image view
-      - `url` - string that indicates the source of the image
-      - `altText` - string that generates accessibility text for images
-    - `tablet` - object with `url` and `altText` strings for the tablet image view
-      - `url` - string that indicates the source of the image
-      - `altText` - string that generates accessibility text for images
-    - `mobile` - object with `url` and `altText` strings for the mobile image view
-      - `url` - string that indicates the source of the image
-      - `altText` - string that generates accessibility text for images
-    - `BackgroundImage` - optional BackgroundImage component from gatsby-background-image to render background images as gatsby-background-images instead of through styling
-      - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
-  - `header` **(required)** - string for generating header text
-  - `text` - string for generating body text
-  - `ctas` - object used to populate a `<CTASection>`
-    - `ctaOne`: object with `text` and `url` strings
-    - `ctaTwo`: object with `text` and `url` strings
-    - `subCTA`: object with `text` and `url` strings
-  - `theme` - object with `backgroundColor` as strings to represent hex value for background color
-    - theme-1 `backgroundColor` hex value `#F8F8FB`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`
-    - theme-4 `backgroundColor` hex value `#0063A3`
-    - theme-5 `backgroundColor` hex value `#004F83`
-- `contentSide` - string that indicates whether content is on the `right` or `left` side of the component. Defaults to `right`.
-- `id` - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
-- `motion` - boolean that indicates whether to use the animation to render the component.
-- `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
-###### Example -
-```
-const ctas = {
-  ctaOne: {
-    text: "Button",
-    url: "/#"
-  },
-    ctaTwo: {
-    text: "Button",
-    url: "/#"
-  },
-  subCTA: {
-    text: "Button",
-    url: "/#"
-  }
-};
-const images = {
-desktop: {
-  url: "https://fpoimg.com/1600x1200",
-  altText: "placeholder image"
-},
-  tablet: {
-    url: "https://fpoimg.com/800x600",
-    altText: "placeholder image" },
-  mobile: {
-    url: "https://fpoimg.com/400x400",
-    altText: "placeholder image"
-  }
-};
-const theme1 = {
-  backgroundColor: "#ffffff",
-};
-const content = {
-  images,
-  ctas,
-  header: 'Design',
-  text: 'I am text',
-  theme: theme1,
-  focalPointImage: {
-    x: 6000,
-    y: 0,
-    title: "union-station",
-    height: 4000,
-    width: 6000,
-    url: "https://images.ctfassets.net/citn2sn5tdjr/4NzwDSDlGECGIiokKomsyI/f78a74130fc60ae9b4fb2e0da2f405db/city.jpg"
-  },
-}
-return (
-<Hero1
-    content={content}
-    motion
-  />
-);
-```
-#### Hero2
-###### Props -
-- `content` **(required)** - object containing images, ctas, headers, subheaders, button
-  - `images` **(required)** - object that contains two objects, `desktop` and `mobile`. `desktop` is the 4x1 image object. `mobile` is the 2x1 image object. Each image object consists have `url` and `altText` strings.
-    - `desktop` - object consisting of `url` and `altText` strings for generating the desktop-size image
-      - `url` - string that points to the image source
-      - `altText` - string that generates image accessibility text
-    - `mobile` - object consisting of `url` and `altText` strings for generating the mobile-size image
-      - `url` - string that points to the image source
-      - `altText` - string that generates image accessibility text
-  - `header` **(required)** - string used for generating header text
-  - `subHeader` **(required)** - string used for generating sub-header text
-  - `theme` - object with `backgroundColor` as strings to represent hex value for background color
-    - theme-1 `backgroundColor` hex value `#F8F8FB`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`
-    - theme-4 `backgroundColor` hex value `#0063A3`
-    - theme-5 `backgroundColor` hex value `#004F83`
-- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
-- `motion` - object containing `motion`, `motionDistance`, and `motionDirection` keys. -`motion` value is a boolen to indicate if motion will be on this component -`motionDistance` - string indicating the direction that the component should travel from as it fades in -`motionDirection` - string indicating the distance that the component travels during motion. **Motion is currently not enabled in `Hero2`**
-- `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
-###### Example -
-```
-const theme1 = {
-  backgroundColor: "#ffffff",
-};
-const content = {
-  header="Good Design is innovative",
-  subHeader="Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis.",
-  images: {
-    desktop: {
-      url: "http://fpoimg.com/1600x400?text=4:1",
-      altText: "placeholder image"
-    },
-    mobile: {
-      url: "http://fpoimg.com/1600x800?text=2:1",
-      altText: "placeholder image"
-    }
-  },
-  theme: theme1,
-  focalPointImage: {
-    x: 6000,
-    y: 0,
-    title: "union-station",
-    height: 4000,
-    width: 6000,
-    url: "https://images.ctfassets.net/citn2sn5tdjr/4NzwDSDlGECGIiokKomsyI/f78a74130fc60ae9b4fb2e0da2f405db/city.jpg"
-  },
-}
-return (
-  <Hero2
-    content={content}
-  />
-);
-```
-#### Hero3
-###### Props -
-- `content` **(required)** - object containing `header`, `text`, `thumbnail`, and `video` data
-  - `header` - string for the header content
-  - `text` - string for the body text content
-  - `thumbnail` - object for generating the thumbnail with `url` and `altText` strings
-    - `url` **(required)** - string that points to the image source
-    - `altText` - string for creating accessibility text
-  - `video` - object for rendering the video embed
-    - `url` - string that points to the video source on YouTube or Vimeo
-    - `uuid` - string used for rendering Vidyard video embeds
-  - `vidyard` - boolean for indicating that a Vidyard component should be rendered
-  - `id` - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
-  - `motion` - boolean that indicates whether to use the react-reveal library to render the component inside a `<Fade>` component.
-  - `theme` - object with `backgroundColor` and `color` as strings to represent hex value for background color
-  - `theme` - object with `backgroundColor` and `color` as strings to represent hex value for background color
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
-  - `contentSide` string of either "left" or "right" which will dictate where the content will render.
-###### Example -
-```
-const content = {
-  header: 'Video Header',
-  text: 'This is descriptive text for the video',
-  thumbnail: {
-    url: 'www.youtube.com/123467890/thumbnail.jpg',
-    altText: 'I am a thumbnail'
-  },
-  video: {
-    url: 'www.youtube.com/123467890',
-    allowFullScreen: true
-  }
-}
-return (
-  <Hero3
-    content={content}
-    theme={theme}
-    motion
-  />
-);
-```
----
-#### Hero4/Hero5
-###### Note -
-These two components are functionally the same from a React perspective but exist as separate entities in design. They are populated the same exact way and will always render a `Hero4` in your React tree.
-###### Props -
-- `content` **(required)** - object containing header, subHeader, text, ctas, and image data
-  - `header` **(required)** - string for generating header text
-  - `subHeader` - string for generating sub-header text
-  - `text` - string for generating body text
-  - `ctas` - object for generating a `<CTASection>` component. Note that CTA should contain className for theme purposes.
-    - previous theme-1, theme-2, and theme-3 has className `primary--1` for ctaOne and `secondary--1` for ctaTwo
-    - previous theme-4 and theme-5 has className `primary--5` and `secondary--5`
-  - `image` - object for generating <img> element with url and altText strings
-  - `theme` - object with `backgroundColor` and `color` as strings to represent hex value for background color
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
-- `id` - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
-- `motion` - boolean that indicates whether to use the react-reveal library to render the component inside a `<Fade>` component.
-- `contentSide` - optional string of "left" or "right", which defaults to "left" - dictates what side of the screen the content renders.
-- `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
-###### Example -
-```
-const mockCTALinks = {
-  ctaOne: {
-    text: "Button",
-    url: "/#"
-  },
-  ctaTwo: {
-    text: "Button",
-    url: "/#"
-  },
-  subCTA: {
-    text: "Button",
-    url: "/#"
-  }
-};
-const mockImage = {
-  url: "./1-to-1.png",
-  altText: "placeholder"
-};
-const content = {
-  ctas: mockCTALinks,
-  image: mockImage,
-  header: 'Header',
-  text: 'I am text',
-  focalPointImage: {
-    x: 6000,
-    y: 0,
-    title: "union-station",
-    height: 4000,
-    width: 6000,
-    url: "https://images.ctfassets.net/citn2sn5tdjr/4NzwDSDlGECGIiokKomsyI/f78a74130fc60ae9b4fb2e0da2f405db/city.jpg"
-  },
-}
-<Hero4
-  content={content}
-  motion
-  theme='theme-1'
-/>
-```
----
-#### Hero7
-###### Props -
-- `content` **(required)** - object containing images, header, text, ctas, and subHeader
-  - `header` **(required)** - string for generating header text
-  - `subHeader` - string for generating sub-header text
-  - `ctas` - object for generating a `<CTASection>` component
-  - `images` **(required)** - object consisting of three image objects, each with url and altText strings. The objects are `desktop`, `tablet`, and `mobile`.
-        - `desktop` - object with `url` and `altText` strings for generating the desktop hero image
-          - `url` - string that links to a 3x2 image source
-          - `altText` - string for generating image accessibility text
-        - `tablet` - object with `url` and `altText` strings for generating the desktop hero image
-          - `url` - string that links to a 1x1 image source
-          - `altText` - string for generating image accessibility text
-          - `BackgroundImage` - optional BackgroundImage component from gatsby-background-image to render background images as gatsby-background-images instead of through styling
-          - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed - `mobile` - object with `url` and `altText` strings for generating the desktop hero image - `url` - string that links to a 4x3 image source - `altText` - string for generating image accessibility text
-        -`theme` - string for hex value of color that will overlay on hero image. This defaults to `#000000`,
-        - `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
-###### Example -
-```
-const images = {
-  desktop : {
-    url: "http://fpoimg.com/2400x1600?text=3:2",
-    altText: "placeholder image"
-  },
-  mobile: {
-    url: "http://fpoimg.com/1600x1200?text=4:3",
-    altText: "placeholder image"
-  },
-  tablet: {
-    url: "http://fpoimg.com/1600x1600?text=1:1",
-    altText: "placeholder image"
-  }
-};
-const ctas = {
-  ctaOne: {
-    url: "/#",
-    text: "Button"
-  },
-  ctaTwo: {
-    url: "/#",
-    text: "Button"
-  }
-};
-const content {
-  images,
-  ctas,
-  header: 'Header',
-  subHeader: 'Text!',
-  focalPointImage: {
-    x: 6000,
-    y: 0,
-    title: "union-station",
-    height: 4000,
-    width: 6000,
-    url: "https://images.ctfassets.net/citn2sn5tdjr/4NzwDSDlGECGIiokKomsyI/f78a74130fc60ae9b4fb2e0da2f405db/city.jpg"
-  },
-}
-return (
-<Hero7
-    content={content}
-    theme='theme-1'
-  />
-);
-```
-#### FilterHero
-###### Props -
-- `header` - string for generating header text
-- `text` - string for generating body text.
-- `dropdowns` - array used for generating Dropdown components - see example for structuring
-- `checkboxes` - array used for generating Checkbox components - see example for structuring
-- `handleDropdownChange` - function used for handling new dropdown selections - takes the new selection and the associated name of the dropdown from the event object arguments.
-- `handleCheckboxChange` - function used for handling checkbox toggling - takes a boolean for the status of the checkbox and the name of the checkbox from the event object as arguments.
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-- `motion` - boolean that indicates whether to use the react-reveal library to render the component inside a `<Fade>` component.
-- `id` - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
-###### Example -
-```
-handleDropdownChange = (selection, name) => {
-  this.setState({[name]: selection})
-}
-handleCheckboxChange = (bool, name) => {
-  this.setState({[name]: bool})
-}
-const header = 'I am a header'
-const text = 'Tempor ex esse ipsum sit eiusmod dolor mollit cupidatat elit cupidatat pariatur commodo non est.'
-const dropdownOne = {
-  options: ["trade one", "trade two", "trade three"],
-  defaultText: "All",
-  name: "Trade"
-};
-const dropdownTwo = {
-  options: ["category one", "category two", "category three"],
-  defaultText: "All",
-  name: "Category"
-};
-const dropdowns = [dropdownOne, dropdownTwo]
-const checkboxOne = {
-  name: "Checkbox One"
-};
-const checkboxTwo = { name: "Checkbox Two" };
-const checkboxes = [checkboxOne, checkboxTwo];
-return (
-  <FilterHero
-    header={header}
-    text={text}
-    dropdowns={dropdowns}
-    checkboxes={checkboxes}
-    handleDropdownChange={this.handleDropdownChange}
-    handleCheckboxChange={this.handleCheckboxChange}
-    backgroundColor='#5e5e5e'
-  />
-)
-```
----
-#### Feat1
-###### Props -
-- `content` **(required)** - object containing the objects content (see example)
-- `header` **(required)** - string for generating header text
-- `subHeader` - string for generating sub-header text
-- `text` **(required)** - string for generating body text
-- `cta` - object for generating a `<ButtonLink>` component requiring `url` and `text` strings
-- `ctas` - array of objects for generating a `<CTASection>` component requiring `ctaOne` and/or `ctaTwo` objects with `url`, `text`, and `className` strings, takes precedence over the `cta` object
-  - ctaClass names are important for themes. If no className is passed as a prop, the className will default to `primary--1` for ctaOne and `secondary--1` for ctaTwo. This is consistent for previous `theme-1`, `theme-2`, and `theme-3`. For `theme-4` and `theme-5`, use `className` of `primary--5` for ctaOne and `secondary--5` for ctaTwo
-- `image` **(required)** - object consisting of `url` and `altText` strings.
-  - `Image` - optional Image component from gatsby-image to render images as gatsby-images instad of HTML `<img />`
-  - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
-  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
-- `motion` - boolean that indicates whether to use the `react-reveal` library to render the component inside a `<Fade>` component.
-- `Link` - optional - either a react-router-dom or gatsby-link component
-- `BackgroundImage` - optional BackgroundImage component from gatsby-background-image to render background images as gatsby-background-images instead of through styling
-  - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
-###### Example -
-```
-const content = {
-  header: 'Header',
-  subHeader: 'Sub Header',
-  text: '<p>Sunt elit officia id aute esse dolore elit Lorem officia.</p>'
-  cta: {
-    url: '/',
-    text: 'link'
-  },
-  image: {
-    url: '/',
-    altText: 'Image'
-  },
-  theme: {
-    backgroundColor: "blue",
-    color: "green"
-  }
-}
-return (
-  <Feat1
-    content={content}
-    motion
-    id={data.id}
-  />
-);
-```
----
-#### Feat2A
-###### Props -
-- `image` **(required)** - object for generating the left-side image
-  - `url` - string that points to the source of the image
-  - `altText` - string for generating accessibility text
-  - `Image` - optional Image component from gatsby-image to render images as gatsby-images instad of HTML `<img />`
-      - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
-- `<AccordionFold>` **(required)** - child component for rendering folds in the `<Accordion>` component with each fold taking a `header` string as a prop
-  - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
-- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
-- `motion` - boolean that indicates whether to use the `react-reveal` library to render the component inside a `<Fade>` component.
-###### Example -
-```
-import { AccordionFold } from 'terra-component-lib'
-const mockImage = {
-  url: "https://fpoimg.com/500x500",
-  altText: "Placeholder image"
-};
-const content = {
-  header: "I am a header!",
-  subHeader: "This is a sub header. ",
-  theme: {
-    color: "#363545",
-    backgroundColor: "#ffffff",
-  };
-}
-return (
-  <Feat2A
-    image={mockImage}
-    content={content}
-  >
-    <AccordionFold header="Test one">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
-        lobortis augue ligula, eget gravida tellus lacinia id. Sed ultricies
-        mi malesuada tincidunt dapibus. Donec porta ligula sagittis elit
-        sollicitudin.
-      </p>
-    </AccordionFold>
-    <AccordionFold header="Test two">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
-        lobortis augue ligula, eget gravida tellus lacinia id. Sed ultricies
-        mi malesuada tincidunt dapibus. Donec porta ligula sagittis elit
-        sollicitudin.
-      </p>
-    </AccordionFold>
-    <AccordionFold header="Test three">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
-        lobortis augue ligula, eget gravida tellus lacinia id. Sed ultricies
-        mi malesuada tincidunt dapibus. Donec porta ligula sagittis elit
-        sollicitudin.
-      </p>
-    </AccordionFold>
-  </Feat2>
-);
-```
----
-#### Feat2B
-###### Props -
-- `content` **(required)** - object containing images and cards
-  - `images` **(required)** - object for generating images
-    - `desktop` **(required)** - object for generating the desktop image
-      - `url` - string that points to the image source
-      - `altText` - string for generating image accessibility text
-    - `mobile` **(required)** - object for generating the mobile image
-      - `url` - string that points to the image source
-      - `altText` - string for generating image accessibility text
-  - `cards` **(required)** - array of objects for generating `IconListItem`
-    - `header` - string for generating card header text
-    - `text` - string for generating card descriptive text
-    - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
-- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
-- `motion` - boolean that indicates whether to use the `react-reveal` library to render the component inside a `<Fade>` component.
-###### Example -
-```
-const content = {
-  images: {
-    desktop: {
-      url: "http://fpoimg.com/1600x400?text=4:1",
-      altText: "placeholder image"
-    },
-    mobile: {
-      url: "http://fpoimg.com/1600x800?text=2:1",
-      altText: "placeholder image"
-    }
-  },
- cards: [
-    {
-      header: "Header",
-      text:
-        "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum."
-    },
-    {
-      header: "Header",
-      text:
-        "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum."
-    },
-    {
-      header: "Header",
-      text:
-        "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum."
-    }
-  ],
-  theme: {
-    color: "#363545",
-    backgroundColor: "#ffffff",
-  }
-}
-return (
-  <Feat2B
-    content={content}
-    motion
-    id={data.id}
-  />
-);
-```
----
-#### Feat3
-###### Description -
-Featurette with a large image, header, and sub-header text
-###### Props -
-- `content` **(required)** - object containing, images, header, and text
-  - `header` - string used for generating the feat header
-  - `subHeader` - string used for generating the feat sub-header
-  - `images` - object containing mobile and desktop images
-    - `mobile` - object containing the mobile image source and alt text
-      - `src` - string pointing to the image source
-      - `alt` - string used for assisted alternate text for screen readers
-    - `desktop` - object containing the desktop image source and alt text
-      - `src` - string pointing to the image source
-      - `alt` - string used for assisted alternate text for screen readers
-  - `motion` - boolean indicating if component animation is active
-  - `id` - string used for generating the component's id, defaults to the header text (spaces removed)
-  - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
-###### Example -
-```
-const content = {
-  header: "Feat 3 Header",
-  subHeader: "This is sub-header text",
-  images: {
-    mobile: {
-      src: "www.image.com/mobile-image.jpg",
-      alt: "image alt text
-    },
-    desktop: {
-      src: "www.image.com/desktop-image.jpg",
-      alt: "image alt text
-    }
-  },
-  theme: {
-    backgroundColor: "#f2f2f2",
-    color: "#333333"
-  },
-  motion: true
-}
-return <Feat3 content={content} />
-```
----
-#### Feat4
-###### Props -
-- content **(required)** - object containing, ctas, headers, subheaders
-  - `header` **(required)** - string used for generating header text
-  - `subHeader` **(required)** - string used for generating sub-header text
-  - `ctas` - objects for generating a `<CTASection>` component requiring `ctaOne` and/or `ctaTwo` objects with `url`, `text`, and `className` strings, takes precedence over the `cta` object
-    - ctaClass names are important for themes. If no className is passed as a prop, the className will default to `primary--1` for ctaOne and `secondary--1` for ctaTwo. This is consistent for previous `theme-1`, `theme-2`, and `theme-3`. For `theme-4` and `theme-5`, use `className` of `primary--5` for ctaOne and `secondary--5` for ctaTwo
-  - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
-- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
-- `motion` - object containing `motion`, `motionDistance`, and `motionDirection` keys. -`motion` value is a boolen to indicate if motion will be on this component -`motionDistance` - string indicating the direction that the component should travel from as it fades in -`motionDirection` - string indicating the distance that the component travels during motion.
-- `Link` - optional - either a react-router-dom or gatsby-link component
-- `BackgroundImage` - optional BackgroundImage component from gatsby-background-image to render background images as gatsby-background-images instead of through styling
-  - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
-###### Example -
-```
-const content = {
-  header:"Good Design is innovative",
-  subHeader:"Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis.",
-  ctas:{
-    ctaOne: {
-      text: "Button",
-      url: "/#"
-    },
-    ctaTwo: {
-      text: "Button",
-      url: "/#"
-    }
-  },
-  theme: {
-    color: "#363545",
-    backgroundColor: "#ffffff",
-  },
-}
-return (
-  <Feat4
-    content={content}
-  />
-);
-```
----
-#### Feat5
-###### Props -
-- `content` **(required)** - object for generating organism content
-  - `header` **(required)** - string used for generating header text
-  - `subHeader` - string used for generating sub-header text
-  - `thumbnail` - object for generating the thumbnail with `url` and `altText` strings - `url` **(required)** - string that points to the image source - `altText` - string for creating accessibility text - `Image` - optional Image component from gatsby-image to render images as gatsby-images instad of HTML `<img />`
-      - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
-  - `video` - object for rendering the video embed
-    - `url` - string that points to the video source on YouTube or Vimeo
-    - `uuid` - string used for rendering Vidyard video embeds
-  - `vidyard` - boolean for indicating that a Vidyard component should be rendered
-  - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
-- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
-- `motion` - boolean that indicates whether to use the `react-reveal` library to render the component inside a `<Fade>` component.
-- `BackgroundImage` - optional BackgroundImage component from gatsby-background-image to render background images as gatsby-background-images instead of through styling
-    - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
-###### Example -
-```
-const content = {
-  header: 'Video Header',
-  text: 'This is descriptive text for the video',
-  thumbnail: {
-    url: 'www.youtube.com/123467890/thumbnail.jpg',
-    altText: 'I am a thumbnail'
-  },
-  video: {
-    url: 'www.youtube.com/123467890',
-    allowFullScreen: true
-  },
-  theme: {
-    color: "#363545",
-    backgroundColor: "#ffffff",
-  },
-}
-return (
-  <Feat5
-    content={content}
-    motion
-  />
-);
-```
----
-#### Feat7
-###### Props -
-- `content` **(required)** - array of objects used for generating organism content
-  - `header` - string used for generating header text
-  - `subHeader`- string used for generating sub-header text
-  - `theme` - object with `backgroundColor`, `color`, `activeTabBarColor`, `activeTabTextColor`, and `inactiveTabBarColor` as strings to represent hex value for background color
-  - `Theme Colors:`
-  - Props to pass into component for `theme-1`:
-    - `color`: `#98A0AB`
-    - `backgroundColor`: `#F8F8FB"`,
-    - `activeTabBarColor`: `#0063A3`,
-    - `ativeTabTextColor`: `#0063A3`,
-    - `inactiveTabBarColor`: `#ffffff`,
-    - `introTextColor`: `#242D2F`
-  - Props to pass into component fot `theme-2`:
-    - `color`: `#98A0AB`
-    - `backgroundColor`: `#F1F2F7"`,
-    - `activeTabBarColor`: `#0063A3`,
-    - `ativeTabTextColor`: `#0063A3`,
-    - `inactiveTabBarColor`: `#ffffff`,
-    - `introTextColor`: `#242D2F`
-  - Props to pass into component fot `theme-3`:
-    - `color`: `#98A0AB`
-    - `backgroundColor`: `#E7E9EF"`,
-    - `activeTabBarColor`: `#0063A3`,
-    - `ativeTabTextColor`: `#0063A3`,
-    - `inactiveTabBarColor`: `#ffffff`,
-    - `introTextColor`: `#242D2F`
-  - Props to pass into component fot `theme-4`:
-    - `color`: `#B6BCC5`
-    - `backgroundColor`: `#0063A3"`,
-    - `activeTabBarColor`: `#FFFFFF`,
-    - `ativeTabTextColor`: `#FFFFFF`,
-    - `inactiveTabBarColor`: `#217cbb`,
-    - `introTextColor`: `#FFFFFF`
-  - Props to pass into component fot `theme-5`:
-    - `color`: `#98A0AB`
-    - `backgroundColor`: `#004F83"`,
-    - `activeTabBarColor`: `#FFFFFF`,
-    - `ativeTabTextColor`: `#FFFFFF`,
-    - `inactiveTabBarColor`: `#0063a3`,
-    - `introTextColor`: `#FFFFFF`
-- `children` - React components used for generating a Terra Tabs component. The children should consist of `TabsPanel` components. See Terra One documentation for details.
-- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
-- `motion` - boolean that indicates whether to use the `react-reveal` library to render the component inside a `<Fade>` component.
-###### Example -
-```
-const content = {
-  header: 'Tabs Header',
-  subHeader: null,
-  theme: {
-    color: "#363545",
-    backgroundColor: "#f9f9fb",
-    activeTabBarColor: "#0e6ba8",
-    activeTabTextColor: "#0e6ba8",
-  }
-}
-return (
-  <Feat7 content={content} motion>
-    <TabsPanel name='Tab One'>
-      <p>Ea eiusmod non nulla incididunt officia do nostrud.</p>
-    <TabsPabel>
-    <TabsPanel name='Tab Two'>
-      <p>Tempor eiusmod nulla et dolore et magna veniam elit proident ullamco.</p>
-    <TabsPabel>
-    <TabsPanel name='Tab Three'>
-      <p>Id nostrud id ut elit excepteur sit incididunt Lorem aliquip.</p>
-    <TabsPabel>
-  </Feat7>
-)
-```
-#### Feat8
-###### Props -
-- `content` **(required)** - object containing the objects content (see example)
-- `header` **(required)** - string for generating header text
-- `subHeader` - string for generating sub-header text
-- `text` **(required)** - string for generating body text
-- `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
-  - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
-  - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
-  - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
-  - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
-  - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
-- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
-- `motion` - boolean that indicates whether to use the `react-reveal` library to render the component inside a `<Fade>` component.
-- `darkTheme` - boolean which indicates whether a dark theme is used - will toggle css class on body copy to use inverse colour as per global styles. Defaults to `false`.
-- `headerAlignment` - boolean to control alignment of `header`. Default option is `left`, with `center` as alternative option.
-- `subHeaderAlignment` - boolean to control alignment of `subHeader`. Default option is `left`, with `center` as alternative option.
-#### SlideOut Feat
-###### Props -
-- `content` **(required)** - object containing header, text, ctas, and image
-  - `header` **(required)** - string for generating header text
-  - `text` **(required)** - string for generating body text either HTML or plain text
-  - `ctas` - objects for generating a `<CTASection>` component requiring `ctaOne` and/or `ctaTwo` objects with `url`, `text`, and `className` strings, takes precedence over the `cta` object
-  - `image` object with `url` as key.
-###### Example -
-```
-const content = {
-  image: {
-    url: image,
-  },
-  header: "I am a header",
-  text:
-    "<p>Voluptate nisi sint nisi ullamco nulla aute ullamco eiusmod. Exercitation cillum anim aliqua nulla occaecat eiusmod.</p>",
-  ctas: {
-    ctaOne: {
-      url: "/",
-      text: "CTA",
-    },
-    ctaTwo: {
-      url: "/",
-      text: "CTA Two",
-    },
-  },
-};
-return (
-  SlideOutFeat content={content} />
-);
-```
----
-#### ListFeat1
-###### Props -
-- `content` **(required)** - object containing all organism content
-  - `header` - string for generating organism header text
-  - `subHeader` - string for generating organism sub-header text
-  - `ctas` - object used to populate a `<CTASection>`
-    - `ctaOne`: object with `text`, `url` and `className` strings
-    - `ctaTwo`: object with `text`, `url` and `className` strings
-      - Important to note that `className` corresponds to theme.
-        - previous `theme-1`, `theme-2`, and `theme-3` take `classNames` of `primary--1` and `secondary--1` respectively
-        - previous `theme-4` and `theme-5` take `classNames` of `primary--2` and `secondary--2` respectively.
-    - `subCTA`: object with `text` and `url` strings
-  - `cardOne`, `cardTwo` - objects that contains `header` and `text` keys with values that are strings.
-    - `header` - string for card header text
-    - `text` - string for card body text
-    - `cta` - object for generating a cta on the card
-      - `url` - string to generates the cta's link href
-      - `text` - string for generating the cta's text
-  - `cards` - array of objects with structure matching `cardOne` or `cardTwo`
-  - `type` **(required)** - required to render the correct listFeat. ListFeat1 must be `list_feat_1`
-  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-* `motion` - boolean used to indicate whether or not motion should be used
-* `Link` - optional - either a react-router-dom or gatsby-link component
-###### Example -
-```
-theme1 = {
-  color: "#363545",
-  backgroundColor: "#ffffff",
-};
-const content = {
-  sort: true,
-  header: "Hello everyone! This is a header. Enjoy!",
-  subHeader: "This is truly wonderful.",
-  type: "list_feat_1",
-  image: { src: "https://fpoimg.com/500x500", alt: "placeholder" },
-  cardOne: {
-    header: "I am Card One Header",
-    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",
-    cta: { url: "/#", text: "Click me!", className: "primary--1" }
-  },
-  cardTwo: {
-    header: "I am Card Two Header",
-    text:
-      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, la",
-    cta: { url: "/#", text: "I am a button!", "secondary--1" }
-  },
-  theme: theme1
-};
-return (
-  <ListFeat content={content} motion  />
-)
-```
-#### ListFeat2
-###### Props -
-- `content` **(required)** - object containing text, headers, subheaders, headShotdumplings, and type
-  - `header` - string for generating organism header text
-  - `subHeader` - string for generating organism sub-header text
-  - `headShotdumplings` **(required)** - array of objects for generating headshot dumplings
-    - `header` - string for generating dumpling header text
-    - `subHeader` - string for generating dumpling sub-header text
-    - `text` - string for generating dumpling body text
-    - `color` - string to indicate color of text in headshotDumpling
-    - `image` - object for generating dumpling image
-      - `url` - string for the image's source
-      - `altText` - string for the image's accessibility text
-    - `filter` - string for indicating whether or not to use a colored overlay for the image. Options are "blue" and "grey"
-  - `type` **(required)** - required to render the correct listFeat. ListFeat2 must be `list_feat_2`
-  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-- `motion` - boolean used to indicate whether or not motion should be used
-- `Link` - optional - either a react-router-dom or gatsby-link component
-###### Example -
-```
-theme1 = {
-  color: "#363545",
-  backgroundColor: "#ffffff",
-};
-const content = {
-  header: "Hello everyone! This is a header. Enjoy!",
-  subheader: "This is truly wonderful.",
-  type: "list_feat_2",
-  headShotdumplings: [
-    {
-      content: {
-        header: "Lorem Ipsum",
-        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" },
-        color: "pink",
-      },
-      filter: "default"
-    },
-    {
-      content: {
-        header: "Nemo enim ipsam",
-        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" },
-        color: "pink"
-      },
-      filter: "default"
-    },
-    {
-      content: {
-        header: "Sed ut perspiciatis",
-        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" },
-        color: "pink"
-      },
-      filter: "default"
-    }
-  ],
-  theme: theme1
-};
-return (
-  <ListFeat content={content} motion />
-)
-```
-#### ListFeat4
-###### Props -
-- `content` **(required)** - object containing header, subHeader, type, cards
-  - `header` - key that has a string as a value
-  - `subHeader` - key that has a string as a value
-  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-  - `dumplings` - array containing objects for generating dumplings.
-    - `header` - string for generating dumpling header text
-    - `link` - object for generating dumpling link, is optional
-      - `url` - string for generating the link href/to
-    - `icon` - object for generating the dumpling's icon
-      - `size` - string with a number and 'px' for indicating the icon's size
-      - `type` - string for indicating the type of icon to render. See the Terra One icon options for reference
-    - `color` - string for inddicating the hex color for icon and text. This will default to #000000
-  - `type` **(required)** - required to render the correct listFeat. ListFeat4 must be `list_feat_4`
-- `motion` - boolean used to indicate whether or not motion should be used
-- `Link` - optional - either a react-router-dom or gatsby-link component
-###### Example -
-```
-theme1 = {
-  color: "#363545",
-  backgroundColor: "#ffffff",
-};
-const content = {
-  header: "Hello everyone! This is a header. Enjoy!",
-  subheader: "This is truly wonderful.",
-  type: "list_feat_4",
-  dumplings: [
-    {
-      header: "Lorem Ipsum",
-      link: { url: "/#" },
-      size: "small",
-      icon: { type: "enclosed-check-dark-48px", size: "48px" },
-      color: "blue"
-    },
-    {
-      header: "Nemo enim ipsam voluptatem",
-      link: { url: "/#" },
-      size: "small",
-      icon: { type: "enclosed-check-dark-48px", size: "48px" }
-      color: "blue"
-    },
-    {
-      header: "Sed ut perspiciatis, unde omnis",
-      link: { url: "/#" },
-      size: "small",
-      icon: { type: "enclosed-check-dark-48px", size: "48px" }
-      color: "blue"
-    }
-  ],
-  theme: theme1
-};
-return (
-  <ListFeat content={content} motion/>
-)
-```
-#### ListFeat5
-###### Props -
-- `content` **(required)** - object containing header, subHeader, type, cards
-  - `header` - key that has a string as a value
-  - `subHeader` - key that has a string as a value -`insertCardHTML` - key that is a boolean
-  - `iconListItems` - array of objects for generating `IconListItem`
-    - `header` - string for generating card header text
-    - `text` - string for generating card descriptive text
-    - `type` - string for indicating type of icon to render, see Terra One for options, defaults to a checkmark
-    - `color` - string for indicating hex value for color of icon.
-  - `type` **(required)** - required to render the correct listFeat. ListFeat5 must be `list_feat_5`
-  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-- `motion` - boolean used to indicate whether or not motion should be used
-- `Link` - optional - either a react-router-dom or gatsby-link component
-###### Example -
-```
-theme1 = {
-  color: "#363545",
-  backgroundColor: "#ffffff",
-};
-const content = {
-  header: "Hello everyone! This is a header. Enjoy!",
-  subheader: "This is truly wonderful.",
-  type: "list_feat_5",
-  insertCardHTML: true,
-  iconListItems: [
-    {
-      header: "Good design is innovative",
-      text:
-        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>",
-      color: "pink"
-    },
-    {
-      header: "Good design is innovative",
-      text:
-        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
-      color: "pink"
-    },
-    {
-      header: "Good design is innovative",
-      text:
-        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
-      color: "pink"
-    },
-    {
-      header: "Good design is innovative",
-      text:
-        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
-      color: "pink"
-    },
-    {
-      header: "Good design is innovative",
-      text:
-        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
-    },
-    {
-      header: "Good design is innovative",
-      text:
-        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
-    }
-  ],
-  theme: theme1
-};
-return (
-  <ListFeat content={content} motion  />
-)
-```
-#### ListFeat6
-###### Props -
-- `content` **(required)** - object containing header, subHeader, type, cards
-  - `header` - key that has a string as a value
-  - `subHeader` - key that has a string as a value
-  - `images` - key that has an object as a value. Object has `src` and `altText` keys which values are strings.
-  - `list` - array containing strings in each indice. The strings of each indice will be rendered onto the component as html tags
-  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-- `motion` - boolean used to indicate whether or not motion should be used
-- `Link` - optional - either a react-router-dom or gatsby-link component
-###### Example -
-```
-theme1 = {
-  color: "#363545",
-  backgroundColor: "#ffffff",
-};
-const content = {
-  header: "Hello everyone! This is a header. Enjoy!",
-  subheader: "This is truly wonderful.",
-  images: { src: "https://fpoimg.com/500x500", alt: "placeholder" },
-  type: "list_feat_6",
-  list: [
-    "<h4>Viewer Edition</h4><p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p><p>Donec sit amet arcu nibh. Donec vitae dolor nunc.</p><p>Mauris ut feugiat mauris eu volutpat arcu. Integer mollis neque dui ac auctor dui tincidunt eget.</p>",
-    "<h4>Field Data Edition</h4>p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p><p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>",
-    "<h4>A list of great ideas:</h4><ul><li>Lorem ipsum dolor sit amet consectetur adipiscing elit</li><li>Donec sit amet arcu nibh Donec vitae dolor nunc.</li><li>Cras vel pharetra augue at sollicitudin velit. Vivamus dapibus quis nisi et vestibulum.</li><li>Mauris ut feugiat mauris eu volutpat arcu. Integer mollis neque dui ac auctor dui tincidunt eget.</li><ul>",
-    "<h4>Here It Is: </h4><ul><li>Lorem ipsum dolor sit amet consectetur adipiscing elit</li><li>Donec sit amet arcu nibh Donec vitae dolor nunc.</li><li>Cras vel pharetra augue at sollicitudin velit. Vivamus dapibus quis nisi et vestibulum.</li><li>Mauris ut feugiat mauris eu volutpat arcu. Integer mollis neque dui ac auctor dui tincidunt eget.</li><li>It's not Latin, though it looks like it, and it actually says nothing,</li><ul>"
-  ],
-  theme: theme1
-};
-return (
-  <ListFeat content={content} motion />
-)
-```
-#### ListFeat7
-###### Props -
-- `content` **(required)** - object containing header, subHeader, type, cards
-- `header` **(required)** - string for generating header text
-  - `subHeader` - string for generating sub-header text
-  - `type` **(required)** - required to render the correct listFeat. ListFeat7 must be `list_feat_7`
-  - `content` **(required)** - object containing images, ctas, text, variant, headers, subheaders, button, link, videos
-  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
-    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
-    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
-    - `card` - an array containing the following objects:
-      - `text` - string for generating body text
-      - `ctas` - object for generating a `<CTASection>` component
-      - `images` - object with keys `url` and `altText` with values as strings
-      - `video` - object with keys `url` and `allowFullScreen`. `url` has a value as a string. `allowFullScreen` is a boolean
-        - `uuid` - string used for rendering Vidyard video embeds
-      - `vidyard` - boolean for indicating that a Vidyard component should be rendered
-      - `thumbnail` - object with keys `url` and `altText` with values as strings, used for a thumbnail image in place of a video, while video is not playing
-      - `link` - object with keys `url` and `text` with values as strings.
-      - `Image` - optional Image component from gatsby-image to render images as gatsby-images instad of HTML `<img />`
-        - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
-      - `BackgroundImage` - optional BackgroundImage component from gatsby-background-image to render background images as gatsby-background-images instead of through styling
-        - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
-- `motion` - boolean used to indicate whether or not motion should be used
-- `Link` - optional - either a react-router-dom or gatsby-link component
-###### Example -
-```
-const theme1 = {
-  color: "#363545",
-  backgroundColor: "#ffffff",
-  ctaOne: "primary--1",
-};
-export const mockContent = {
-  header: "Hello everyone! This is a header. Enjoy!",
-  subheader: "This is truly wonderful.",
-  type: "list_feat_7",
-  cards: [
-    {
-      video: {
-        url: "https://www.youtube.com/embed/UY7r0juBF8Y",
-        allowFullScreen: "true"
-      },
-      thumbnail: {
-        url: "https://fpoimg.com/2880x1920",
-        altText: "fpo"
-      },
-      header: "Here is a title! Woooo",
-      link: {
-        url: "/#",
-        text: "Link"
-      },
-      text:
-        "Ut in amet id proident commodo officia cillum. Aliqua id ex culpa labore duis minim fugiat proident ad deserunt qui."
-    },
-    {
-      video: {
-        url: "https://www.youtube.com/watch?v=sBws8MSXN7A",
-        allowFullScreen: "true"
-      },
-      thumbnail: {
-        url: "https://fpoimg.com/2880x1920",
-        altText: "fpo"
-      },
-      header: "This is a React Tutorial. Enjoy!",
-      link: {
-        url: "/#",
-        text: "Link"
-      },
-      text:
-        "Watch this and you'll be able to make beautiful applications using the wonderful framework of React, built by Facebook"
-    },
-    {
-      image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
-      header: "Here is a title! Woooo",
-      link: {
-        url: "/#",
-        text: "Link"
-      },
-      text:
-        "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
-    },
-    {
-      header: "Here is a title! Woooo",
-      subheader: "sub header! ",
-      text:
-        "It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries"
-    },
-    {
-      image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
-      header: "Here is a title! Woooo",
-      link: {
-        url: "/#",
-        text: "Link"
-      },
-      text:
-        "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
-    }
-  ],
-  theme: theme1
-};
-return (
-  <ListFeat content={content} motion />
-)
-```
-## Miscellaneous organisms
-#### AdminCategoryData
-###### Props -
-- `content` **(required)** - object containing name, industry, translations, url, and languageOptions
-  - `name` - string for generating header
-  - `industry` - string for generating subheader
-  - `translations` - array of objects
-    - `language` - string for language
-    - `teaserImage` - object with key value pair of `url` to represent image path
-    - `name` - string for name of product
-    - `text` - string for text description
-  - `languageOptions` - object with language abbreviations as key and value is language
-###### Example -
-```
-const translations = [
-  {
-    language: "en",
-    teaserImage: { url: "http://fpoimg.com/95x95" },
-    name: "Product name",
-    text: "Dolore velit irure velit duis ea."
-  },
-  {
-    language: "fr",
-    teaserImage: { url: "http://fpoimg.com/95x95" },
-    name: "Product name, but in French",
-    text: "Dolore velit irure velit duis ea."
-  },
-  {
-    language: "de",
-    teaserImage: { url: "http://fpoimg.com/95x95" },
-    name: "Product name, but in German",
-    text: "Dolore velit irure velit duis ea."
-  }
-];
-const content = {
-  name: "Category name",
-  industry: "Industry name",
-  translations,
-  url: "/products/industry_name/category_name",
-  languageOptions: {
-    de: "German",
-    fr: "French",
-    en: "English"
-  }
-};
-return (
-  <AdminCategoryData content={content} currentLanguageURL="en" />
-)
-```
-#### AdminProductData
-###### Props -
-- `content` **(required)** - object containing name, regions, translations, url, and languageOptions
-  - `regions` - array of regions as strings
-  - `translations` - array of objects
-    - `language` - string for language
-    - `teaserImage` - object with key value pair of `url` to represent image path
-    - `name` - string for name of product
-    - `text` - string for text description
-  - `languageOptions` - object with language abbreviations as key and value is language
-###### Example -
-```
-const translations = [
-  {
-    language: "en",
-    teaserImage: {
-      url: "http://fpoimg.com/95x95"
-    },
-    teaserName: "Product name",
-    teaserText: "Dolore velit irure velit duis ea."
-  },
-  {
-    language: "fr",
-    teaserImage: {
-      url: "http://fpoimg.com/95x95"
-    },
-    teaserName: "Product name, but in French",
-    teaserText: "Dolore velit irure velit duis ea."
-  },
-  {
-    language: "de",
-    teaserImage: {
-      url: "http://fpoimg.com/95x95"
-    },
-    teaserName: "Product name, but in German",
-    teaserText: "Dolore velit irure velit duis ea."
-  }
-];
-const content = {
-  name: "Product name",
-  regions: ["Illinois", "Colorado", "Ohio"],
-  translations,
-  url: "/products/product-name",
-  languageOptions: {
-    de: "Germand",
-    fr: "French",
-    en: "English"
-  }
-};
-return (
-  <AdminProductData content={content} currentLanguageURL="en" />
-)
-```
-#### MiniFeatDropdown
-###### Props -
-- `content` - object containing header, text, and dropdowns
-  - `header` - string to represent header
-  - `text` - string to represent text. Can be either HTML or plain text
-  - `dropdowns` - array of single object
-    - `dropdownOne` - object with key options, defaultText, and name
-      - `options` - array of strings to represent dropdown options
-      - `defaultTetx` - string to represent dropdown default option
-      - `name` - string to represent dropdown label
-###### Example
-```
-const header = "How can we help you?";
-const text =
-  "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>";
-const dropdownOne = {
-  options: [
-    "General Contractor",
-    "Software Engineer",
-    "Cyber Security Analyst",
-    "Graphic Designer",
-  ],
-  defaultText: "Choose Your Fighter",
-  name: "I am a ...",
-};
-const content = {
-  header,
-  text,
-};
-return (
-  <MiniFeatDropdown
-        content={content}
-        dropdowns={dropdowns}
-        handleDropdownSelect={action("Dropdown Selected")}
-      />
-    )
-```
-#### BrowserSupportBanner
-###### Props -
-- `content` - object containing text, type, and browser
-  - `text` - string to represent text
-  - `type` - string to represent banner type. Options include "warning", "danger", and "success"
-  - `browser` - represents type of browser the alert should render on
-###### Example
-```
-const content = {
-  text:
-    "WARNING: Internet Explorer is not recommended for use of this site. Please switch your browser to Chrome, Firefox, or Safari.",
-  type: "danger",
-  browser: "chrome",
-};
-return (
-  <BrowserSupportBanner content={content} />
-)
-```
-#### SketchUp Pricing Card
-###### Props -
-- `content` - object containing header, boldHeader, text, price, subscript, cta, icons, iconText, listtems, bottomLink, prevPrice, featured, featuredText, featuredColor
-  - `header` - string for generating header text (example: SketchUp)
-  - `boldHeader` - string for generating header type (example: Pro - will read as SketchUp Pro with Pro bolded)
-  - `text` - string to represent text
-  - `price` - string to generate price
-  - `subscript` - string to represent cost frequency ("yr", "month", etc)
-  - `cta` - object with key value pairs `text` and `url`
-    - `text` - string to represent CTA text
-    - `url` - string to represent path of where CTA links
-  - `icons` - array of icon in strings
-  - `listItems` - array of objects with key value pairs `items`, `featured`
-    - `item` - string to generate bullet point items on card
-    - `featured` - boolean: `true` will render "new" on card
-  - `bottomLink` - object with key value pairs `text` and `url`
-    - `text` - string to generate text for bottom link
-    - `url` - string to represent path for link
-  - `prevPrice` - string to represent previous price
-  - `featured` - boolean - `true` will render featuredText
-  - `featuredText` - string to generate featured text if card is featured
-  - `featuredColor` - string to generate color of featuredText background
-###### Example
-```
-const header = "SketchUp";
-const boldHeader = "Pro";
-const text = "Model Personal Projects";
-const price = "$199";
-const subscript = "/yr";
-const cta = {
-  text: "Subscribe",
-  url: "/",
-};
-const icons = ["enclosed-x-dark-16px", "enclosed-arrow-right-dark-32px"];
-const iconText = "Web Only";
-const listItems = [
-  { item: "Lorem ipsum dolor site amet.", featured: false },
-  { item: "Lorem ipsum dolor sit, adipisicing.", featured: false },
-  {
-    item: "Lorem ipsum dolor site amet Lorite amet.",
-    featured: true,
-  },
-];
-const bottomLink = {
-  text: "Learn more about SHOP",
-  url: "/",
-};
-const prevPrice = "$299";
-const featured = true;
-const featuredText = "Most Popular";
-const featuredColor = "#0d6aa8";
-const content = {
-  header,
-  boldHeader,
-  text,
-  price,
-  subscript,
-  cta,
-  icons,
-  iconText,
-  listItems,
-  bottomLink,
-  prevPrice,
-  featuredColor,
-  featured,
-  featuredText,
-};
-return (
- <SketchUpPricingCard content={content} />
-)
-```
-#### StoreFront Card
-###### Props -
-- `content` - object containing title, header, text, link, image, priceTitle, quantityTitle, price, button, and deliveryEstimation
-  - `title` - string to generate main title of card
-  - `header` - string to generate header of card
-  - `text` - string to represent the description
-  - `link` - object with key value pairs `text` and `url`
-    - `url` - string to represent the path for link
-    - `text` - string to represent text on link
-  - `priceTitle` - string to represent price label
-  - `price` - string to represent price
-  - `button` - object with key value pairs `url` and `text`
-    - `text` - string to represent text of button
-    - `url` - string to generate link path
-  - `deliveryEstimation` - string to represent delivery time
-###### Example
-```
-const title = "Trimble XR10";
-const header = "Desgined for the frontline worker";
-const text =
-  "Additional information: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et aliqua";
-const link = {
-  url: "/",
-  text: "Learn More",
-};
-const image = { url: "http://fpoimg.com/95x95", altText: "image" };
-const priceTitle = "Price";
-const quantityTitle = "Quantity";
-const price = "$4750.00";
-const button = { url: "Added", text: "Added" };
-const deliveryEstimation = "Delivery: 4-6 weeks";
-const content = {
-  title,
-  header,
-  text,
-  link,
-  image,
-  priceTitle,
-  price,
-  button,
-  quantityTitle,
-  deliveryEstimation,
-};
-return (
-   <StoreFrontCard content={content} />
-)
-```
-#### SupportCard
-###### Props -
-- `content` - object containing header, headerLabel, subHeader, product, subHeaderLabel, and sections
-  - `header` - string for generating the header
-  - `headerLabel` - string for generating header label
-  - `subHeader` - string for generating the subheader
-  - `product` - string for generating a product
-  - sections - array of arrays of objects to represent sections
-    - array of objects include key value pairs `value` and `format`
-      - `value` - text or HTML for each section
-      - `format` - optional - string to represent wysiwyg_editor
-###### Example
-```
-const sectionOne = [
-  {
-    value:
-      "<h1>Header</h1><p>Non anim voluptate eu cillum sunt voluptate ipsum laboris ipsum do irure.</p><a href='/#'>Link</a>",
-    format: "wysiwyg_editor",
-  },
-  {
-    value:
-      "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin lectus ligula, nec tempus eros viverra sed. Curabitur malesuada, leo ut porta pretium, turpis turpis dignissim neque, convallis vulputate nisl ante id sapien. Donec efficitur, turpis et blandit ornare, lorem sem aliquet ligula, euismod condimentum dui quam quis purus.</p>\r\n\r\n<p>adadasd</p>\r\n\r\n<ul>\r\n\t<li>asdasd</li>\r\n\t<li>sfdsdfsd</li>\r\n\t<li>sdfsdf</li>\r\n</ul>\r\n",
-    format: "wysiwyg_editor",
-  },
-  {
-    value: "<p>Non anim voluptate eu cillum sunt.</p>",
-    format: "wysiwyg_editor",
-  },
-  {
-    value: '<a href="mailto:jeff@biscuits.com">Email me</a>',
-  },
-];
-const sectionTwo = [
-  {
-    value:
-      "<p>Non anim voluptate eu cillum sunt voluptate ipsum laboris ipsum do irure.</p>",
-    format: "w/e",
-  },
-  {
-    value: "<p>Veniam labore sunt tempor nulla commodo ullamco tempor.</p>",
-    format: "w/e",
-  },
-];
-const sectionThree = [
-  {
-    value:
-      "Non anim voluptate eu cillum sunt voluptate ipsum laboris ipsum do irure.",
-    format: "w/e",
-  },
-  {
-    value: "Veniam labore sunt tempor nulla commodo ullamco tempor.",
-    format: "w/e",
-  },
-  {
-    value: "Non anim voluptate eu cillum sunt. Okay",
-    format: "w/e",
-  },
-];
-const content = {
-  header: "Construction",
-  headerLabel: "Industry",
-  subHeader: "Civil Engineering Software",
-  product: "Novapoint and Quandri",
-  subHeaderLabel: "Categories",
-  sections: [sectionOne, sectionTwo, sectionThree],
-};
-return (
-   <SupportCard content={content} />
-)
-```
-#### Trainer Card
-###### Props -
-- `content` - object containing header, name, country, region, and link
-  - `header` - string to generate header
-  - `name` - string to generate name
-  - `country` - string to represent country
-  - link - object with key value pairs `url` and `text`
-    - `text` - string to represent button text
-    - `url` - string to represent url path
-###### Example
-```
-const content = {
-  header: "Trainer",
-  name: "Sketchy McSketcherson",
-  country: "United States",
-  region: "North America",
-  link: {
-    url: "/",
-    text: "Get in touch",
-  },
-};
-return (
-  <TrainerCard content={content} />
-)
-```
----
-## Boilerplate Components, Hooks, and Methods
-#### `FooterHandler`
-##### Description -
-Takes the footer data from `App` and uses it to render `Footer`. Was broken out of Template to keep the component nice and lean.
-##### Props -
-- `data` **(required)** - object containing all `Footer` data. See [Footer](#footer) for reference
----
-#### `HelmetHandler`
-##### Description -
-Takes the helmet data from `Template` and uses it to render `Helmet`. Was broken out of Template to keep the component nice and lean.
-##### Props -
-- `data` **(required)** - object containing all `Helmet` data.
-  - `title` - string
-  - `canonical_url` - string
-  - `description` - string
-- `language` - string for the current active language code
----
-#### NavBarHandler
-##### Description -
-Takes the navigation data from `App` and uses it to render `NavBar`. Was broken out of Template to keep the component nice and lean.
-##### Props -
-- `data` **(required)** - object containing all `NavBar` data.
-- `innerPageNavData` - object used for populating the utility nav
-- `history`**(required)** - the React Router `history` object
-- `regionData` - object with `region`, `regions`, and method for `setRegion` from `App`
-- `applicationData` - object with the site data from `App`
-- `languages` - array of available languages
-- `language` - string with active language code
-- `setLanguage` - method for setting the active language
-- `navCTAOverride` - object used to override the utility nav CTA
----
-#### Routing
-##### Description -
-Takes all the passed information from App and uses it to render the all routes.
-##### Props -
-- `routes` - array of available route strings
-- `languages` - array of available languages
-- `language` - string with active language code
-- `setMetaData` - method for setting active metadata in React Helmet
-- `setInnerPageNavData` - method for setting active inner-page navigation
-- `fiveHundreData` - object for populating the 500 page
-- `fourZeroFourData` - object for populating the 404 page
-- `languageEnabled` - boolean for indicating that site translations are active and to reference the language code in pathname strings
-- `labels` - object used for passing various labels from site application data
-- `setNavCTAOverride` - method for setting the CTA override in the utility nav.
-- `Page` - the Page component from the React Boilerplate
-- `children` - array of custom routes for the page.
----
-#### Stack
-##### Description -
-Responsible for iterating over the content array passed down from Page and rendering corresponding organisms. Custom organisms can be added here by creating a new method and adding the new organism's type and method name to the methods array
-##### Props -
-- `content` - array of all organism content used for rendering organism components
-  - `content` - object with content for the organism, structure varies
-  - `type` - string indicating organism type
-  - `theme` - object with organism theme data (`color`, `backgroundColor`)
-- `customMethods` - object of custom organisms for the site where the `key` is the organism type and the value is the organism object (`content`, `type`, `theme`)
----
-#### Loading
-##### Description -
-Responsible for rendering a loading gif when the site is in a loading state
-##### Props -
-- `image` - points to the image source you'd like to use for the. Defaults to the standard dancing dots without it.
----
-## Hooks
-#### useErrorPageData
-##### Description -
-Takes the site application data and returns `errorPageData`
-##### Arguments -
-- `data` - object containing site appplication data
-  - `fourOhFourHeader` - string
-  - `fourOhFourText` - string
-  - `fourOhFourFiveHundredImage` - string (image src)
-  - `homeButtonText` - string
-  - `fiveHundredHeader` - string
-  - `fiveHundredText` - string
----
-#### useFetch
-##### Description -
-Makes a fetch call to the passed url and returns the `response` object, `status` string, and `setResponse` method
-##### Arguments -
-- `url` - string
----
-#### useFooterData
-##### Description -
-Formats the footer data returned from `useFooterResponse`
-##### Arguments -
-- `language` - string
-- `footerResponse` - object
-- `setFooterURL` - method returned from `useFooterURL`
-- `setFooterResponse` - method return from `useFooterResponse`
----
-#### useFooterResponse
-##### Description -
-Makes a fetch call for footer data to the passed url and returns the `footerResponse` object and `setFooterResponse` method
-##### Arguments -
-- `url` - string
----
-#### useFooterURL
-##### Description -
-Returns the footer url string.
-##### Arguments -
-- `language` - string
-- `languageEnabled` - boolean
-- `backendURL` - string
----
-#### useInnerPageNav
-##### Description -
-Used to how the utility nav is populated. Returns and `innerPageNavData` and `setInnerPageNavData`, which takes an object like `{ pageTitle: "", links: [] }`
----
-#### useLanguage
-##### Description -
-Takes the site `languages` array as an argument and returns the browser-preferred language or 'en' and `setLanguage` a method for manually setting to another language.
-##### Arguments -
-- `languages` - array of objects -`id` - string that is two letters
----
-#### useLanguages
-##### Description -
-Takes the site `backendURL` method as an argument and returns all available site languages.
-##### Arguments -
-- `backendURL` - method that returns the string for the site backend url
----
-#### useMetadata
-##### Description -
-Returns the site `metadata` object and the `setMetadata` method for updating it.
----
-#### useNavData
-##### Description -
-Formats the `navData` object and returns it and the `setNavData` method
-##### Arguments -
-- `mainNavResponse` - object
-- `setMainNavResponse` - function
-- `setNavURLs` - function
-- `applicationData` - object
-- `language` - string
----
-#### useNavResponse
-##### Description -
-Returns the fetched `mainNavResponse` object and `setMainNavResponse` method
-##### Arguments -
-- `urls` - object with `navURL` string
----
-#### useNavURL
-##### Description -
-Returns the `navURLs` object and `setNavURLs` function
-##### Arguments -
-- `language` - string
-- `languageEnabled` - boolean
-- `backendURL` - function that return backend URL string
----
-#### usePageFetch
-##### Description -
-Returns the page `response` object, `setResponse` function, and `error` boolean
-##### Arguments -
-- `url` - string
-- `setStatus` - method that takes strings of `loading`, `success`, or `error`
-- `setURL` - function
----
-#### useRegions
-##### Description -
-Used to determine user's region based on browser data and to set it dynamically. Returns the active `region`, `regions` options array, `setRegion` and `setRegions` functions, `userLocation` country code string, `setUserLocation` function.
-##### Arguments -
-- `backendURL` - function that return backend URL string
----
-#### useRoutes
-##### Description -
-Fetches all data for routing, used for setting up custom routes. Returns the `routesData` object
-##### Arguments -
-- `backendURL` - function that return backend URL string
----
-#### useScrollTo
-##### Description -
-This tracks movement from react-scroll and determines whether or not to add an extra 100px of distance between the scrollY and the element we're scrolling to so that when the navbar expands during upward scrolling it doesn't cover up the top of the container we've sxrolled to. Returns nothing and takes no arguments.
----
-#### useSiteData
-##### Description -
-Fetches and stores all site data from Drupal. Returns the `data` object
-##### Arguments -
-- `language` - string
-- `backendURL` - function that return backend URL string
----
-## Methods
-#### formatContentSections
-##### Description -
-Used to format all page data from a Drupal fetch call. Returns the `formattedSections` array for rendering Luna organisms and `links` array for populating the utility nav
-##### Arguments -
-- `content_sections` - `object`
-- `language` - string, defaults to 'en'
-- `languageEnabled`
-- `labels`
-- - `customMethods` - `object` of custom organisms used for the site. The key is the organisms `type` that is referenced in Drupal and the value is the function that formats the data. They take the following arguments: `section` object, `languageCode` string, `languageEnabled` bool, `labels` object, `fpoBox` image src, `formatLinks` function, and `fpoSquare` image src.
----
+# Luna One React Component Library
+The Luna One React Component Library represents the organisms used by the Trimble Creative Strategies team in web development. It consists of a series of heros and featurettes. Examples of each with required an optional props can be found below. Additionally, Luna One provides our Luna Boilerplate with a series of important methods and structural components that allow us to manage fetching, data, state, and content formatting as well as provide components for handling things like `Footer`, `NavBar`, `Stack`, and more.
+Using this library requires that the Terra One React Component Library is also installed, which can be done with `npm i --save terra-one`.
+## Branches and Versions
+#### Master
+- This branch contains the most up to date Luna components BEFORE updating component's compatibility with Gatsby. This includes the application directory inside src/lib/application that contains boilerplate JSON formatting for React Luna Boilerplate from Drupal api-v2 endpoints. Themes are handled in the updated way, but uses old theme colors. This branch is Luna version 3.2.x. Used by Tekla
+#### 3.x
+- This branch is for Luna 3.x versions which have components that are compatible with Gatsby. This contains the most up to date theme colors and styling. When building new components/updates for the future, this is the branch to use. Used by Gatsby Boilerplate.
+#### 2.x
+- This branch is for Luna 2.x versions, most up to date Luna version before the addition of the application directory. This contains the previous way of handling themes. Used by Construction and Careers
+#### 1.x
+- This branch is for Luna 1.x versions and used on Field Technology and Heavy Industry.
+## External Libraries Used:
+- [React Helmet](https://www.npmjs.com/package/react-helmet) - for meta information in the document `<head>`
+- [React Player](https://www.npmjs.com/package/react-player) - for rendering YouTube and Vimeo videos
+- [React Reveal](https://www.npmjs.com/package/react-reveal) - for handling organism animation when they are scrolled into view
+- [React Scroll](https://www.npmjs.com/package/react-scroll) - for direct scrolling behavior from the navigation bar to specific organisms
+- [Vidyard](https://www.npmjs.com/package/@vidyard/embed-code) - for rendering Vidyard videos
+- [Node Sass v4.12.x](https://www.npmjs.com/package/node-sass) - for compiling SASS into CSS
+- [Axios](https://www.npmjs.com/package/axios) - for handling fetch logic
+## Storybook Documentation
+- Technical documentation for Luna 3.x is in the process of being moved to [Storybook](https://mxp-storybook.netlify.app).
+## Components, Hooks, and Methods
+### Luna Organisms and Components
+#### Heroes
+- [Hero1](#hero1)
+- [Hero2](#hero2)
+- [Hero3](#hero3)
+- [Hero4](#hero4)
+- [Hero5](#hero5)
+- [Hero7](#hero7)
+- [FilterHero](#filterhero)
+#### Feats
+- [Feat1](#feat1)
+- [Feat2A](#feat2a)
+- [Feat2B](#feat2b)
+- [Feat3](#feat3)
+- [Feat4](#feat4)
+- [Feat5](#feat5)
+- [Feat7](#feat7)
+- [Feat8](#feat8)
+#### List Feats
+- [ListFeat1](#listfeat1)
+- [ListFeat2](#listfeat2)
+- [ListFeat4](#listfeat4)
+- [ListFeat5](#listfeat5)
+- [ListFeat6](#listfeat6)
+- [ListFeat7](#listfeat7)
+### Boilerplate Components, Hooks, and Methods
+#### Components
+- [FooterHandler](#footerhandler)
+- [HelmetHandler](#helmethandler)
+- [NavBarHandler](#navbarhandler)
+- [Routing](#routing)
+- [Stack](#stack)
+- [Loading](#loading)
+#### Hooks
+- [useErrorPageData](#useerrorpagedata)
+- [useFetch](#usefetch)
+- [useFooterData](#usefooterdata)
+- [useFooterResponse](#usefooterresponse)
+- [useFooterURL](#usefooterurl)
+- [useInnerPageNav](#useinnerpagenav)
+- [useLanguage](#uselanguage)
+- [useLanguages](#uselanguages)
+- [useMetadata](#usemetadata)
+- [useNavData](#usenavdata)
+- [useNavResponse](#usenavresponse)
+- [useNavURL](#usenavurl)
+- [usePageFetch](#usepagefetch)
+- [useRegions](#useregions)
+- [useRoutes](#useroutes)
+- [useScrollTo](#usescrollto)
+- [useSiteData](#usesitedata)
+#### Methods
+- [formatContentSections](#formatcontentsections)
+## Luna Organisms
+#### Important Theme information
+- ALL Organisms are able to take a theme. Themes can be customized.
+- Themes will default to `theme-1` if no theme object is passed in as a prop.
+##### Standard Themes:
+- `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
+  - theme-1: `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+  - theme-2: `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+  - theme-3: `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+  - theme-4: `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+  - theme-5: `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+  * To customize themes, add your own hex values to `color`, and `backgroundColor`, and your own classes with custom styling to `ctaOne` and `ctaTwo`.
+  Example of Theme Object:
+  ```
+  const theme = {
+    color: "blue",
+    backgroundColor: "pink",
+    ctaOne: "primary--1",
+    ctaTwo: "secondary--1"
+  }
+  ```
+  - Some organisms have additional key value pairs that are necessary, like `Feat7`, these additions are documented below in each organism section.
+---
+#### Hero1 -
+###### Props -
+- `content` **(required)** - object containing `images`, `header`, `text`, `ctas`
+  - images **(required)** - object consisting of `desktop`, `tablet`, and `mobile` image objects
+    - `desktop` - object with `url` and `altText` strings for the desktop image view
+      - `url` - string that indicates the source of the image
+      - `altText` - string that generates accessibility text for images
+    - `tablet` - object with `url` and `altText` strings for the tablet image view
+      - `url` - string that indicates the source of the image
+      - `altText` - string that generates accessibility text for images
+    - `mobile` - object with `url` and `altText` strings for the mobile image view
+      - `url` - string that indicates the source of the image
+      - `altText` - string that generates accessibility text for images
+    - `BackgroundImage` - optional BackgroundImage component from gatsby-background-image to render background images as gatsby-background-images instead of through styling
+      - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
+  - `header` **(required)** - string for generating header text
+  - `text` - string for generating body text
+  - `ctas` - object used to populate a `<CTASection>`
+    - `ctaOne`: object with `text` and `url` strings
+    - `ctaTwo`: object with `text` and `url` strings
+    - `subCTA`: object with `text` and `url` strings
+  - `theme` - object with `backgroundColor` as strings to represent hex value for background color
+    - theme-1 `backgroundColor` hex value `#F8F8FB`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`
+    - theme-4 `backgroundColor` hex value `#0063A3`
+    - theme-5 `backgroundColor` hex value `#004F83`
+- `contentSide` - string that indicates whether content is on the `right` or `left` side of the component. Defaults to `right`.
+- `id` - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
+- `motion` - boolean that indicates whether to use the animation to render the component.
+- `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
+###### Example -
+```
+const ctas = {
+  ctaOne: {
+    text: "Button",
+    url: "/#"
+  },
+    ctaTwo: {
+    text: "Button",
+    url: "/#"
+  },
+  subCTA: {
+    text: "Button",
+    url: "/#"
+  }
+};
+const images = {
+desktop: {
+  url: "https://fpoimg.com/1600x1200",
+  altText: "placeholder image"
+},
+  tablet: {
+    url: "https://fpoimg.com/800x600",
+    altText: "placeholder image" },
+  mobile: {
+    url: "https://fpoimg.com/400x400",
+    altText: "placeholder image"
+  }
+};
+const theme1 = {
+  backgroundColor: "#ffffff",
+};
+const content = {
+  images,
+  ctas,
+  header: 'Design',
+  text: 'I am text',
+  theme: theme1,
+  focalPointImage: {
+    x: 6000,
+    y: 0,
+    title: "union-station",
+    height: 4000,
+    width: 6000,
+    url: "https://images.ctfassets.net/citn2sn5tdjr/4NzwDSDlGECGIiokKomsyI/f78a74130fc60ae9b4fb2e0da2f405db/city.jpg"
+  },
+}
+return (
+<Hero1
+    content={content}
+    motion
+  />
+);
+```
+#### Hero2
+###### Props -
+- `content` **(required)** - object containing images, ctas, headers, subheaders, button
+  - `images` **(required)** - object that contains two objects, `desktop` and `mobile`. `desktop` is the 4x1 image object. `mobile` is the 2x1 image object. Each image object consists have `url` and `altText` strings.
+    - `desktop` - object consisting of `url` and `altText` strings for generating the desktop-size image
+      - `url` - string that points to the image source
+      - `altText` - string that generates image accessibility text
+    - `mobile` - object consisting of `url` and `altText` strings for generating the mobile-size image
+      - `url` - string that points to the image source
+      - `altText` - string that generates image accessibility text
+  - `header` **(required)** - string used for generating header text
+  - `subHeader` **(required)** - string used for generating sub-header text
+  - `theme` - object with `backgroundColor` as strings to represent hex value for background color
+    - theme-1 `backgroundColor` hex value `#F8F8FB`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`
+    - theme-4 `backgroundColor` hex value `#0063A3`
+    - theme-5 `backgroundColor` hex value `#004F83`
+- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
+- `motion` - object containing `motion`, `motionDistance`, and `motionDirection` keys. -`motion` value is a boolen to indicate if motion will be on this component -`motionDistance` - string indicating the direction that the component should travel from as it fades in -`motionDirection` - string indicating the distance that the component travels during motion. **Motion is currently not enabled in `Hero2`**
+- `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
+###### Example -
+```
+const theme1 = {
+  backgroundColor: "#ffffff",
+};
+const content = {
+  header="Good Design is innovative",
+  subHeader="Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis.",
+  images: {
+    desktop: {
+      url: "http://fpoimg.com/1600x400?text=4:1",
+      altText: "placeholder image"
+    },
+    mobile: {
+      url: "http://fpoimg.com/1600x800?text=2:1",
+      altText: "placeholder image"
+    }
+  },
+  theme: theme1,
+  focalPointImage: {
+    x: 6000,
+    y: 0,
+    title: "union-station",
+    height: 4000,
+    width: 6000,
+    url: "https://images.ctfassets.net/citn2sn5tdjr/4NzwDSDlGECGIiokKomsyI/f78a74130fc60ae9b4fb2e0da2f405db/city.jpg"
+  },
+}
+return (
+  <Hero2
+    content={content}
+  />
+);
+```
+#### Hero3
+###### Props -
+- `content` **(required)** - object containing `header`, `text`, `thumbnail`, and `video` data
+  - `header` - string for the header content
+  - `text` - string for the body text content
+  - `thumbnail` - object for generating the thumbnail with `url` and `altText` strings
+    - `url` **(required)** - string that points to the image source
+    - `altText` - string for creating accessibility text
+  - `video` - object for rendering the video embed
+    - `url` - string that points to the video source on YouTube or Vimeo
+    - `uuid` - string used for rendering Vidyard video embeds
+  - `vidyard` - boolean for indicating that a Vidyard component should be rendered
+  - `id` - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
+  - `motion` - boolean that indicates whether to use the react-reveal library to render the component inside a `<Fade>` component.
+  - `theme` - object with `backgroundColor` and `color` as strings to represent hex value for background color
+  - `theme` - object with `backgroundColor` and `color` as strings to represent hex value for background color
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
+  - `contentSide` string of either "left" or "right" which will dictate where the content will render.
+###### Example -
+```
+const content = {
+  header: 'Video Header',
+  text: 'This is descriptive text for the video',
+  thumbnail: {
+    url: 'www.youtube.com/123467890/thumbnail.jpg',
+    altText: 'I am a thumbnail'
+  },
+  video: {
+    url: 'www.youtube.com/123467890',
+    allowFullScreen: true
+  }
+}
+return (
+  <Hero3
+    content={content}
+    theme={theme}
+    motion
+  />
+);
+```
+---
+#### Hero4/Hero5
+###### Note -
+These two components are functionally the same from a React perspective but exist as separate entities in design. They are populated the same exact way and will always render a `Hero4` in your React tree.
+###### Props -
+- `content` **(required)** - object containing header, subHeader, text, ctas, and image data
+  - `header` **(required)** - string for generating header text
+  - `subHeader` - string for generating sub-header text
+  - `text` - string for generating body text
+  - `ctas` - object for generating a `<CTASection>` component. Note that CTA should contain className for theme purposes.
+    - previous theme-1, theme-2, and theme-3 has className `primary--1` for ctaOne and `secondary--1` for ctaTwo
+    - previous theme-4 and theme-5 has className `primary--5` and `secondary--5`
+  - `image` - object for generating <img> element with url and altText strings
+  - `theme` - object with `backgroundColor` and `color` as strings to represent hex value for background color
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
+- `id` - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
+- `motion` - boolean that indicates whether to use the react-reveal library to render the component inside a `<Fade>` component.
+- `contentSide` - optional string of "left" or "right", which defaults to "left" - dictates what side of the screen the content renders.
+- `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
+###### Example -
+```
+const mockCTALinks = {
+  ctaOne: {
+    text: "Button",
+    url: "/#"
+  },
+  ctaTwo: {
+    text: "Button",
+    url: "/#"
+  },
+  subCTA: {
+    text: "Button",
+    url: "/#"
+  }
+};
+const mockImage = {
+  url: "./1-to-1.png",
+  altText: "placeholder"
+};
+const content = {
+  ctas: mockCTALinks,
+  image: mockImage,
+  header: 'Header',
+  text: 'I am text',
+  focalPointImage: {
+    x: 6000,
+    y: 0,
+    title: "union-station",
+    height: 4000,
+    width: 6000,
+    url: "https://images.ctfassets.net/citn2sn5tdjr/4NzwDSDlGECGIiokKomsyI/f78a74130fc60ae9b4fb2e0da2f405db/city.jpg"
+  },
+}
+<Hero4
+  content={content}
+  motion
+  theme='theme-1'
+/>
+```
+---
+#### Hero7
+###### Props -
+- `content` **(required)** - object containing images, header, text, ctas, and subHeader
+  - `header` **(required)** - string for generating header text
+  - `subHeader` - string for generating sub-header text
+  - `ctas` - object for generating a `<CTASection>` component
+  - `images` **(required)** - object consisting of three image objects, each with url and altText strings. The objects are `desktop`, `tablet`, and `mobile`.
+        - `desktop` - object with `url` and `altText` strings for generating the desktop hero image
+          - `url` - string that links to a 3x2 image source
+          - `altText` - string for generating image accessibility text
+        - `tablet` - object with `url` and `altText` strings for generating the desktop hero image
+          - `url` - string that links to a 1x1 image source
+          - `altText` - string for generating image accessibility text
+          - `BackgroundImage` - optional BackgroundImage component from gatsby-background-image to render background images as gatsby-background-images instead of through styling
+          - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed - `mobile` - object with `url` and `altText` strings for generating the desktop hero image - `url` - string that links to a 4x3 image source - `altText` - string for generating image accessibility text
+        -`theme` - string for hex value of color that will overlay on hero image. This defaults to `#000000`,
+        - `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
+###### Example -
+```
+const images = {
+  desktop : {
+    url: "http://fpoimg.com/2400x1600?text=3:2",
+    altText: "placeholder image"
+  },
+  mobile: {
+    url: "http://fpoimg.com/1600x1200?text=4:3",
+    altText: "placeholder image"
+  },
+  tablet: {
+    url: "http://fpoimg.com/1600x1600?text=1:1",
+    altText: "placeholder image"
+  }
+};
+const ctas = {
+  ctaOne: {
+    url: "/#",
+    text: "Button"
+  },
+  ctaTwo: {
+    url: "/#",
+    text: "Button"
+  }
+};
+const content {
+  images,
+  ctas,
+  header: 'Header',
+  subHeader: 'Text!',
+  focalPointImage: {
+    x: 6000,
+    y: 0,
+    title: "union-station",
+    height: 4000,
+    width: 6000,
+    url: "https://images.ctfassets.net/citn2sn5tdjr/4NzwDSDlGECGIiokKomsyI/f78a74130fc60ae9b4fb2e0da2f405db/city.jpg"
+  },
+}
+return (
+<Hero7
+    content={content}
+    theme='theme-1'
+  />
+);
+```
+#### FilterHero
+###### Props -
+- `header` - string for generating header text
+- `text` - string for generating body text.
+- `dropdowns` - array used for generating Dropdown components - see example for structuring
+- `checkboxes` - array used for generating Checkbox components - see example for structuring
+- `handleDropdownChange` - function used for handling new dropdown selections - takes the new selection and the associated name of the dropdown from the event object arguments.
+- `handleCheckboxChange` - function used for handling checkbox toggling - takes a boolean for the status of the checkbox and the name of the checkbox from the event object as arguments.
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+- `motion` - boolean that indicates whether to use the react-reveal library to render the component inside a `<Fade>` component.
+- `id` - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
+###### Example -
+```
+handleDropdownChange = (selection, name) => {
+  this.setState({[name]: selection})
+}
+handleCheckboxChange = (bool, name) => {
+  this.setState({[name]: bool})
+}
+const header = 'I am a header'
+const text = 'Tempor ex esse ipsum sit eiusmod dolor mollit cupidatat elit cupidatat pariatur commodo non est.'
+const dropdownOne = {
+  options: ["trade one", "trade two", "trade three"],
+  defaultText: "All",
+  name: "Trade"
+};
+const dropdownTwo = {
+  options: ["category one", "category two", "category three"],
+  defaultText: "All",
+  name: "Category"
+};
+const dropdowns = [dropdownOne, dropdownTwo]
+const checkboxOne = {
+  name: "Checkbox One"
+};
+const checkboxTwo = { name: "Checkbox Two" };
+const checkboxes = [checkboxOne, checkboxTwo];
+return (
+  <FilterHero
+    header={header}
+    text={text}
+    dropdowns={dropdowns}
+    checkboxes={checkboxes}
+    handleDropdownChange={this.handleDropdownChange}
+    handleCheckboxChange={this.handleCheckboxChange}
+    backgroundColor='#5e5e5e'
+  />
+)
+```
+---
+#### Feat1
+###### Props -
+- `content` **(required)** - object containing the objects content (see example)
+- `header` **(required)** - string for generating header text
+- `subHeader` - string for generating sub-header text
+- `text` **(required)** - string for generating body text
+- `cta` - object for generating a `<ButtonLink>` component requiring `url` and `text` strings
+- `ctas` - array of objects for generating a `<CTASection>` component requiring `ctaOne` and/or `ctaTwo` objects with `url`, `text`, and `className` strings, takes precedence over the `cta` object
+  - ctaClass names are important for themes. If no className is passed as a prop, the className will default to `primary--1` for ctaOne and `secondary--1` for ctaTwo. This is consistent for previous `theme-1`, `theme-2`, and `theme-3`. For `theme-4` and `theme-5`, use `className` of `primary--5` for ctaOne and `secondary--5` for ctaTwo
+- `image` **(required)** - object consisting of `url` and `altText` strings.
+  - `Image` - optional Image component from gatsby-image to render images as gatsby-images instad of HTML `<img />`
+  - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
+  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
+- `motion` - boolean that indicates whether to use the `react-reveal` library to render the component inside a `<Fade>` component.
+- `Link` - optional - either a react-router-dom or gatsby-link component
+- `BackgroundImage` - optional BackgroundImage component from gatsby-background-image to render background images as gatsby-background-images instead of through styling
+  - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
+###### Example -
+```
+const content = {
+  header: 'Header',
+  subHeader: 'Sub Header',
+  text: '<p>Sunt elit officia id aute esse dolore elit Lorem officia.</p>'
+  cta: {
+    url: '/',
+    text: 'link'
+  },
+  image: {
+    url: '/',
+    altText: 'Image'
+  },
+  theme: {
+    backgroundColor: "blue",
+    color: "green"
+  }
+}
+return (
+  <Feat1
+    content={content}
+    motion
+    id={data.id}
+  />
+);
+```
+---
+#### Feat2A
+###### Props -
+- `image` **(required)** - object for generating the left-side image
+  - `url` - string that points to the source of the image
+  - `altText` - string for generating accessibility text
+  - `Image` - optional Image component from gatsby-image to render images as gatsby-images instad of HTML `<img />`
+      - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
+- `<AccordionFold>` **(required)** - child component for rendering folds in the `<Accordion>` component with each fold taking a `header` string as a prop
+  - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
+- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
+- `motion` - boolean that indicates whether to use the `react-reveal` library to render the component inside a `<Fade>` component.
+###### Example -
+```
+import { AccordionFold } from 'terra-component-lib'
+const mockImage = {
+  url: "https://fpoimg.com/500x500",
+  altText: "Placeholder image"
+};
+const content = {
+  header: "I am a header!",
+  subHeader: "This is a sub header. ",
+  theme: {
+    color: "#363545",
+    backgroundColor: "#ffffff",
+  };
+}
+return (
+  <Feat2A
+    image={mockImage}
+    content={content}
+  >
+    <AccordionFold header="Test one">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
+        lobortis augue ligula, eget gravida tellus lacinia id. Sed ultricies
+        mi malesuada tincidunt dapibus. Donec porta ligula sagittis elit
+        sollicitudin.
+      </p>
+    </AccordionFold>
+    <AccordionFold header="Test two">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
+        lobortis augue ligula, eget gravida tellus lacinia id. Sed ultricies
+        mi malesuada tincidunt dapibus. Donec porta ligula sagittis elit
+        sollicitudin.
+      </p>
+    </AccordionFold>
+    <AccordionFold header="Test three">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
+        lobortis augue ligula, eget gravida tellus lacinia id. Sed ultricies
+        mi malesuada tincidunt dapibus. Donec porta ligula sagittis elit
+        sollicitudin.
+      </p>
+    </AccordionFold>
+  </Feat2>
+);
+```
+---
+#### Feat2B
+###### Props -
+- `content` **(required)** - object containing images and cards
+  - `images` **(required)** - object for generating images
+    - `desktop` **(required)** - object for generating the desktop image
+      - `url` - string that points to the image source
+      - `altText` - string for generating image accessibility text
+    - `mobile` **(required)** - object for generating the mobile image
+      - `url` - string that points to the image source
+      - `altText` - string for generating image accessibility text
+  - `cards` **(required)** - array of objects for generating `IconListItem`
+    - `header` - string for generating card header text
+    - `text` - string for generating card descriptive text
+    - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
+- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
+- `motion` - boolean that indicates whether to use the `react-reveal` library to render the component inside a `<Fade>` component.
+###### Example -
+```
+const content = {
+  images: {
+    desktop: {
+      url: "http://fpoimg.com/1600x400?text=4:1",
+      altText: "placeholder image"
+    },
+    mobile: {
+      url: "http://fpoimg.com/1600x800?text=2:1",
+      altText: "placeholder image"
+    }
+  },
+ cards: [
+    {
+      header: "Header",
+      text:
+        "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum."
+    },
+    {
+      header: "Header",
+      text:
+        "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum."
+    },
+    {
+      header: "Header",
+      text:
+        "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum."
+    }
+  ],
+  theme: {
+    color: "#363545",
+    backgroundColor: "#ffffff",
+  }
+}
+return (
+  <Feat2B
+    content={content}
+    motion
+    id={data.id}
+  />
+);
+```
+---
+#### Feat3
+###### Description -
+Featurette with a large image, header, and sub-header text
+###### Props -
+- `content` **(required)** - object containing, images, header, and text
+  - `header` - string used for generating the feat header
+  - `subHeader` - string used for generating the feat sub-header
+  - `images` - object containing mobile and desktop images
+    - `mobile` - object containing the mobile image source and alt text
+      - `src` - string pointing to the image source
+      - `alt` - string used for assisted alternate text for screen readers
+    - `desktop` - object containing the desktop image source and alt text
+      - `src` - string pointing to the image source
+      - `alt` - string used for assisted alternate text for screen readers
+  - `motion` - boolean indicating if component animation is active
+  - `id` - string used for generating the component's id, defaults to the header text (spaces removed)
+  - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
+###### Example -
+```
+const content = {
+  header: "Feat 3 Header",
+  subHeader: "This is sub-header text",
+  images: {
+    mobile: {
+      src: "www.image.com/mobile-image.jpg",
+      alt: "image alt text
+    },
+    desktop: {
+      src: "www.image.com/desktop-image.jpg",
+      alt: "image alt text
+    }
+  },
+  theme: {
+    backgroundColor: "#f2f2f2",
+    color: "#333333"
+  },
+  motion: true
+}
+return <Feat3 content={content} />
+```
+---
+#### Feat4
+###### Props -
+- content **(required)** - object containing, ctas, headers, subheaders
+  - `header` **(required)** - string used for generating header text
+  - `subHeader` **(required)** - string used for generating sub-header text
+  - `ctas` - objects for generating a `<CTASection>` component requiring `ctaOne` and/or `ctaTwo` objects with `url`, `text`, and `className` strings, takes precedence over the `cta` object
+    - ctaClass names are important for themes. If no className is passed as a prop, the className will default to `primary--1` for ctaOne and `secondary--1` for ctaTwo. This is consistent for previous `theme-1`, `theme-2`, and `theme-3`. For `theme-4` and `theme-5`, use `className` of `primary--5` for ctaOne and `secondary--5` for ctaTwo
+  - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
+- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
+- `motion` - object containing `motion`, `motionDistance`, and `motionDirection` keys. -`motion` value is a boolen to indicate if motion will be on this component -`motionDistance` - string indicating the direction that the component should travel from as it fades in -`motionDirection` - string indicating the distance that the component travels during motion.
+- `Link` - optional - either a react-router-dom or gatsby-link component
+- `BackgroundImage` - optional BackgroundImage component from gatsby-background-image to render background images as gatsby-background-images instead of through styling
+  - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
+###### Example -
+```
+const content = {
+  header:"Good Design is innovative",
+  subHeader:"Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis.",
+  ctas:{
+    ctaOne: {
+      text: "Button",
+      url: "/#"
+    },
+    ctaTwo: {
+      text: "Button",
+      url: "/#"
+    }
+  },
+  theme: {
+    color: "#363545",
+    backgroundColor: "#ffffff",
+  },
+}
+return (
+  <Feat4
+    content={content}
+  />
+);
+```
+---
+#### Feat5
+###### Props -
+- `content` **(required)** - object for generating organism content
+  - `header` **(required)** - string used for generating header text
+  - `subHeader` - string used for generating sub-header text
+  - `thumbnail` - object for generating the thumbnail with `url` and `altText` strings - `url` **(required)** - string that points to the image source - `altText` - string for creating accessibility text - `Image` - optional Image component from gatsby-image to render images as gatsby-images instad of HTML `<img />`
+      - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
+  - `video` - object for rendering the video embed
+    - `url` - string that points to the video source on YouTube or Vimeo
+    - `uuid` - string used for rendering Vidyard video embeds
+  - `vidyard` - boolean for indicating that a Vidyard component should be rendered
+  - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
+- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
+- `motion` - boolean that indicates whether to use the `react-reveal` library to render the component inside a `<Fade>` component.
+- `BackgroundImage` - optional BackgroundImage component from gatsby-background-image to render background images as gatsby-background-images instead of through styling
+    - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
+###### Example -
+```
+const content = {
+  header: 'Video Header',
+  text: 'This is descriptive text for the video',
+  thumbnail: {
+    url: 'www.youtube.com/123467890/thumbnail.jpg',
+    altText: 'I am a thumbnail'
+  },
+  video: {
+    url: 'www.youtube.com/123467890',
+    allowFullScreen: true
+  },
+  theme: {
+    color: "#363545",
+    backgroundColor: "#ffffff",
+  },
+}
+return (
+  <Feat5
+    content={content}
+    motion
+  />
+);
+```
+---
+#### Feat7
+###### Props -
+- `content` **(required)** - array of objects used for generating organism content
+  - `header` - string used for generating header text
+  - `subHeader`- string used for generating sub-header text
+  - `theme` - object with `backgroundColor`, `color`, `activeTabBarColor`, `activeTabTextColor`, and `inactiveTabBarColor` as strings to represent hex value for background color
+  - `Theme Colors:`
+  - Props to pass into component for `theme-1`:
+    - `color`: `#98A0AB`
+    - `backgroundColor`: `#F8F8FB"`,
+    - `activeTabBarColor`: `#0063A3`,
+    - `ativeTabTextColor`: `#0063A3`,
+    - `inactiveTabBarColor`: `#ffffff`,
+    - `introTextColor`: `#242D2F`
+  - Props to pass into component fot `theme-2`:
+    - `color`: `#98A0AB`
+    - `backgroundColor`: `#F1F2F7"`,
+    - `activeTabBarColor`: `#0063A3`,
+    - `ativeTabTextColor`: `#0063A3`,
+    - `inactiveTabBarColor`: `#ffffff`,
+    - `introTextColor`: `#242D2F`
+  - Props to pass into component fot `theme-3`:
+    - `color`: `#98A0AB`
+    - `backgroundColor`: `#E7E9EF"`,
+    - `activeTabBarColor`: `#0063A3`,
+    - `ativeTabTextColor`: `#0063A3`,
+    - `inactiveTabBarColor`: `#ffffff`,
+    - `introTextColor`: `#242D2F`
+  - Props to pass into component fot `theme-4`:
+    - `color`: `#B6BCC5`
+    - `backgroundColor`: `#0063A3"`,
+    - `activeTabBarColor`: `#FFFFFF`,
+    - `ativeTabTextColor`: `#FFFFFF`,
+    - `inactiveTabBarColor`: `#217cbb`,
+    - `introTextColor`: `#FFFFFF`
+  - Props to pass into component fot `theme-5`:
+    - `color`: `#98A0AB`
+    - `backgroundColor`: `#004F83"`,
+    - `activeTabBarColor`: `#FFFFFF`,
+    - `ativeTabTextColor`: `#FFFFFF`,
+    - `inactiveTabBarColor`: `#0063a3`,
+    - `introTextColor`: `#FFFFFF`
+- `children` - React components used for generating a Terra Tabs component. The children should consist of `TabsPanel` components. See Terra One documentation for details.
+- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
+- `motion` - boolean that indicates whether to use the `react-reveal` library to render the component inside a `<Fade>` component.
+###### Example -
+```
+const content = {
+  header: 'Tabs Header',
+  subHeader: null,
+  theme: {
+    color: "#363545",
+    backgroundColor: "#f9f9fb",
+    activeTabBarColor: "#0e6ba8",
+    activeTabTextColor: "#0e6ba8",
+  }
+}
+return (
+  <Feat7 content={content} motion>
+    <TabsPanel name='Tab One'>
+      <p>Ea eiusmod non nulla incididunt officia do nostrud.</p>
+    <TabsPabel>
+    <TabsPanel name='Tab Two'>
+      <p>Tempor eiusmod nulla et dolore et magna veniam elit proident ullamco.</p>
+    <TabsPabel>
+    <TabsPanel name='Tab Three'>
+      <p>Id nostrud id ut elit excepteur sit incididunt Lorem aliquip.</p>
+    <TabsPabel>
+  </Feat7>
+)
+```
+#### Feat8
+###### Props -
+- `content` **(required)** - object containing the objects content (see example)
+- `header` **(required)** - string for generating header text
+- `subHeader` - string for generating sub-header text
+- `text` **(required)** - string for generating body text
+- `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
+  - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`
+  - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`
+  - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`
+  - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`
+  - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`
+- `id` - string used for generating the component's `id` attribute. Will default to the organism's `header` text or the organism type.
+- `motion` - boolean that indicates whether to use the `react-reveal` library to render the component inside a `<Fade>` component.
+- `darkTheme` - boolean which indicates whether a dark theme is used - will toggle css class on body copy to use inverse colour as per global styles. Defaults to `false`.
+- `headerAlignment` - boolean to control alignment of `header`. Default option is `left`, with `center` as alternative option.
+- `subHeaderAlignment` - boolean to control alignment of `subHeader`. Default option is `left`, with `center` as alternative option.
+#### SlideOut Feat
+###### Props -
+- `content` **(required)** - object containing header, text, ctas, and image
+  - `header` **(required)** - string for generating header text
+  - `text` **(required)** - string for generating body text either HTML or plain text
+  - `ctas` - objects for generating a `<CTASection>` component requiring `ctaOne` and/or `ctaTwo` objects with `url`, `text`, and `className` strings, takes precedence over the `cta` object
+  - `image` object with `url` as key.
+###### Example -
+```
+const content = {
+  image: {
+    url: image,
+  },
+  header: "I am a header",
+  text:
+    "<p>Voluptate nisi sint nisi ullamco nulla aute ullamco eiusmod. Exercitation cillum anim aliqua nulla occaecat eiusmod.</p>",
+  ctas: {
+    ctaOne: {
+      url: "/",
+      text: "CTA",
+    },
+    ctaTwo: {
+      url: "/",
+      text: "CTA Two",
+    },
+  },
+};
+return (
+  SlideOutFeat content={content} />
+);
+```
+---
+#### ListFeat1
+###### Props -
+- `content` **(required)** - object containing all organism content
+  - `header` - string for generating organism header text
+  - `subHeader` - string for generating organism sub-header text
+  - `ctas` - object used to populate a `<CTASection>`
+    - `ctaOne`: object with `text`, `url` and `className` strings
+    - `ctaTwo`: object with `text`, `url` and `className` strings
+      - Important to note that `className` corresponds to theme.
+        - previous `theme-1`, `theme-2`, and `theme-3` take `classNames` of `primary--1` and `secondary--1` respectively
+        - previous `theme-4` and `theme-5` take `classNames` of `primary--2` and `secondary--2` respectively.
+    - `subCTA`: object with `text` and `url` strings
+  - `cardOne`, `cardTwo` - objects that contains `header` and `text` keys with values that are strings.
+    - `header` - string for card header text
+    - `text` - string for card body text
+    - `cta` - object for generating a cta on the card
+      - `url` - string to generates the cta's link href
+      - `text` - string for generating the cta's text
+  - `cards` - array of objects with structure matching `cardOne` or `cardTwo`
+  - `type` **(required)** - required to render the correct listFeat. ListFeat1 must be `list_feat_1`
+  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+* `motion` - boolean used to indicate whether or not motion should be used
+* `Link` - optional - either a react-router-dom or gatsby-link component
+###### Example -
+```
+theme1 = {
+  color: "#363545",
+  backgroundColor: "#ffffff",
+};
+const content = {
+  sort: true,
+  header: "Hello everyone! This is a header. Enjoy!",
+  subHeader: "This is truly wonderful.",
+  type: "list_feat_1",
+  image: { src: "https://fpoimg.com/500x500", alt: "placeholder" },
+  cardOne: {
+    header: "I am Card One Header",
+    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",
+    cta: { url: "/#", text: "Click me!", className: "primary--1" }
+  },
+  cardTwo: {
+    header: "I am Card Two Header",
+    text:
+      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, la",
+    cta: { url: "/#", text: "I am a button!", "secondary--1" }
+  },
+  theme: theme1
+};
+return (
+  <ListFeat content={content} motion  />
+)
+```
+#### ListFeat2
+###### Props -
+- `content` **(required)** - object containing text, headers, subheaders, headShotdumplings, and type
+  - `header` - string for generating organism header text
+  - `subHeader` - string for generating organism sub-header text
+  - `headShotdumplings` **(required)** - array of objects for generating headshot dumplings
+    - `header` - string for generating dumpling header text
+    - `subHeader` - string for generating dumpling sub-header text
+    - `text` - string for generating dumpling body text
+    - `color` - string to indicate color of text in headshotDumpling
+    - `image` - object for generating dumpling image
+      - `url` - string for the image's source
+      - `altText` - string for the image's accessibility text
+    - `filter` - string for indicating whether or not to use a colored overlay for the image. Options are "blue" and "grey"
+  - `type` **(required)** - required to render the correct listFeat. ListFeat2 must be `list_feat_2`
+  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+- `motion` - boolean used to indicate whether or not motion should be used
+- `Link` - optional - either a react-router-dom or gatsby-link component
+###### Example -
+```
+theme1 = {
+  color: "#363545",
+  backgroundColor: "#ffffff",
+};
+const content = {
+  header: "Hello everyone! This is a header. Enjoy!",
+  subheader: "This is truly wonderful.",
+  type: "list_feat_2",
+  headShotdumplings: [
+    {
+      content: {
+        header: "Lorem Ipsum",
+        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" },
+        color: "pink",
+      },
+      filter: "default"
+    },
+    {
+      content: {
+        header: "Nemo enim ipsam",
+        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" },
+        color: "pink"
+      },
+      filter: "default"
+    },
+    {
+      content: {
+        header: "Sed ut perspiciatis",
+        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" },
+        color: "pink"
+      },
+      filter: "default"
+    }
+  ],
+  theme: theme1
+};
+return (
+  <ListFeat content={content} motion />
+)
+```
+#### ListFeat4
+###### Props -
+- `content` **(required)** - object containing header, subHeader, type, cards
+  - `header` - key that has a string as a value
+  - `subHeader` - key that has a string as a value
+  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+  - `dumplings` - array containing objects for generating dumplings.
+    - `header` - string for generating dumpling header text
+    - `link` - object for generating dumpling link, is optional
+      - `url` - string for generating the link href/to
+    - `icon` - object for generating the dumpling's icon
+      - `size` - string with a number and 'px' for indicating the icon's size
+      - `type` - string for indicating the type of icon to render. See the Terra One icon options for reference
+    - `color` - string for inddicating the hex color for icon and text. This will default to #000000
+  - `type` **(required)** - required to render the correct listFeat. ListFeat4 must be `list_feat_4`
+- `motion` - boolean used to indicate whether or not motion should be used
+- `Link` - optional - either a react-router-dom or gatsby-link component
+###### Example -
+```
+theme1 = {
+  color: "#363545",
+  backgroundColor: "#ffffff",
+};
+const content = {
+  header: "Hello everyone! This is a header. Enjoy!",
+  subheader: "This is truly wonderful.",
+  type: "list_feat_4",
+  dumplings: [
+    {
+      header: "Lorem Ipsum",
+      link: { url: "/#" },
+      size: "small",
+      icon: { type: "enclosed-check-dark-48px", size: "48px" },
+      color: "blue"
+    },
+    {
+      header: "Nemo enim ipsam voluptatem",
+      link: { url: "/#" },
+      size: "small",
+      icon: { type: "enclosed-check-dark-48px", size: "48px" }
+      color: "blue"
+    },
+    {
+      header: "Sed ut perspiciatis, unde omnis",
+      link: { url: "/#" },
+      size: "small",
+      icon: { type: "enclosed-check-dark-48px", size: "48px" }
+      color: "blue"
+    }
+  ],
+  theme: theme1
+};
+return (
+  <ListFeat content={content} motion/>
+)
+```
+#### ListFeat5
+###### Props -
+- `content` **(required)** - object containing header, subHeader, type, cards
+  - `header` - key that has a string as a value
+  - `subHeader` - key that has a string as a value -`insertCardHTML` - key that is a boolean
+  - `iconListItems` - array of objects for generating `IconListItem`
+    - `header` - string for generating card header text
+    - `text` - string for generating card descriptive text
+    - `type` - string for indicating type of icon to render, see Terra One for options, defaults to a checkmark
+    - `color` - string for indicating hex value for color of icon.
+  - `type` **(required)** - required to render the correct listFeat. ListFeat5 must be `list_feat_5`
+  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+- `motion` - boolean used to indicate whether or not motion should be used
+- `Link` - optional - either a react-router-dom or gatsby-link component
+###### Example -
+```
+theme1 = {
+  color: "#363545",
+  backgroundColor: "#ffffff",
+};
+const content = {
+  header: "Hello everyone! This is a header. Enjoy!",
+  subheader: "This is truly wonderful.",
+  type: "list_feat_5",
+  insertCardHTML: true,
+  iconListItems: [
+    {
+      header: "Good design is innovative",
+      text:
+        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>",
+      color: "pink"
+    },
+    {
+      header: "Good design is innovative",
+      text:
+        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
+      color: "pink"
+    },
+    {
+      header: "Good design is innovative",
+      text:
+        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
+      color: "pink"
+    },
+    {
+      header: "Good design is innovative",
+      text:
+        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
+      color: "pink"
+    },
+    {
+      header: "Good design is innovative",
+      text:
+        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
+    },
+    {
+      header: "Good design is innovative",
+      text:
+        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
+    }
+  ],
+  theme: theme1
+};
+return (
+  <ListFeat content={content} motion  />
+)
+```
+#### ListFeat6
+###### Props -
+- `content` **(required)** - object containing header, subHeader, type, cards
+  - `header` - key that has a string as a value
+  - `subHeader` - key that has a string as a value
+  - `images` - key that has an object as a value. Object has `src` and `altText` keys which values are strings.
+  - `list` - array containing strings in each indice. The strings of each indice will be rendered onto the component as html tags
+  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+- `motion` - boolean used to indicate whether or not motion should be used
+- `Link` - optional - either a react-router-dom or gatsby-link component
+###### Example -
+```
+theme1 = {
+  color: "#363545",
+  backgroundColor: "#ffffff",
+};
+const content = {
+  header: "Hello everyone! This is a header. Enjoy!",
+  subheader: "This is truly wonderful.",
+  images: { src: "https://fpoimg.com/500x500", alt: "placeholder" },
+  type: "list_feat_6",
+  list: [
+    "<h4>Viewer Edition</h4><p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p><p>Donec sit amet arcu nibh. Donec vitae dolor nunc.</p><p>Mauris ut feugiat mauris eu volutpat arcu. Integer mollis neque dui ac auctor dui tincidunt eget.</p>",
+    "<h4>Field Data Edition</h4>p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p><p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>",
+    "<h4>A list of great ideas:</h4><ul><li>Lorem ipsum dolor sit amet consectetur adipiscing elit</li><li>Donec sit amet arcu nibh Donec vitae dolor nunc.</li><li>Cras vel pharetra augue at sollicitudin velit. Vivamus dapibus quis nisi et vestibulum.</li><li>Mauris ut feugiat mauris eu volutpat arcu. Integer mollis neque dui ac auctor dui tincidunt eget.</li><ul>",
+    "<h4>Here It Is: </h4><ul><li>Lorem ipsum dolor sit amet consectetur adipiscing elit</li><li>Donec sit amet arcu nibh Donec vitae dolor nunc.</li><li>Cras vel pharetra augue at sollicitudin velit. Vivamus dapibus quis nisi et vestibulum.</li><li>Mauris ut feugiat mauris eu volutpat arcu. Integer mollis neque dui ac auctor dui tincidunt eget.</li><li>It's not Latin, though it looks like it, and it actually says nothing,</li><ul>"
+  ],
+  theme: theme1
+};
+return (
+  <ListFeat content={content} motion />
+)
+```
+#### ListFeat7
+###### Props -
+- `content` **(required)** - object containing header, subHeader, type, cards
+- `header` **(required)** - string for generating header text
+  - `subHeader` - string for generating sub-header text
+  - `type` **(required)** - required to render the correct listFeat. ListFeat7 must be `list_feat_7`
+  - `content` **(required)** - object containing images, ctas, text, variant, headers, subheaders, button, link, videos
+  - `theme` - object with `backgroundColor`, `color`, `ctaOne`, and `ctaTwo` as strings to represent hex value for background color,
+    - theme-1 `backgroundColor` hex value `#F8F8FB`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-2 `backgroundColor` hex value `#F1F2F7`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-3 `backgroundColor` hex value `#E7E9EF`, `color` hex value `#242D2F`, ctaOne `primary--1`, ctaTwo `secondary--1`
+    - theme-4 `backgroundColor` hex value `#0063A3`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+    - theme-5 `backgroundColor` hex value `#004F83`, `color` hex value `#ffffff`, ctaOne `primary--2`, ctaTwo `secondary--2`
+    - `card` - an array containing the following objects:
+      - `text` - string for generating body text
+      - `ctas` - object for generating a `<CTASection>` component
+      - `images` - object with keys `url` and `altText` with values as strings
+      - `video` - object with keys `url` and `allowFullScreen`. `url` has a value as a string. `allowFullScreen` is a boolean
+        - `uuid` - string used for rendering Vidyard video embeds
+      - `vidyard` - boolean for indicating that a Vidyard component should be rendered
+      - `thumbnail` - object with keys `url` and `altText` with values as strings, used for a thumbnail image in place of a video, while video is not playing
+      - `link` - object with keys `url` and `text` with values as strings.
+      - `Image` - optional Image component from gatsby-image to render images as gatsby-images instad of HTML `<img />`
+        - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
+      - `BackgroundImage` - optional BackgroundImage component from gatsby-background-image to render background images as gatsby-background-images instead of through styling
+        - `fluid` or `fixed` must be accompanied along with Image. Refer to Gatsby docs for further details on fluid and fixed
+- `motion` - boolean used to indicate whether or not motion should be used
+- `Link` - optional - either a react-router-dom or gatsby-link component
+###### Example -
+```
+const theme1 = {
+  color: "#363545",
+  backgroundColor: "#ffffff",
+  ctaOne: "primary--1",
+};
+export const mockContent = {
+  header: "Hello everyone! This is a header. Enjoy!",
+  subheader: "This is truly wonderful.",
+  type: "list_feat_7",
+  cards: [
+    {
+      video: {
+        url: "https://www.youtube.com/embed/UY7r0juBF8Y",
+        allowFullScreen: "true"
+      },
+      thumbnail: {
+        url: "https://fpoimg.com/2880x1920",
+        altText: "fpo"
+      },
+      header: "Here is a title! Woooo",
+      link: {
+        url: "/#",
+        text: "Link"
+      },
+      text:
+        "Ut in amet id proident commodo officia cillum. Aliqua id ex culpa labore duis minim fugiat proident ad deserunt qui."
+    },
+    {
+      video: {
+        url: "https://www.youtube.com/watch?v=sBws8MSXN7A",
+        allowFullScreen: "true"
+      },
+      thumbnail: {
+        url: "https://fpoimg.com/2880x1920",
+        altText: "fpo"
+      },
+      header: "This is a React Tutorial. Enjoy!",
+      link: {
+        url: "/#",
+        text: "Link"
+      },
+      text:
+        "Watch this and you'll be able to make beautiful applications using the wonderful framework of React, built by Facebook"
+    },
+    {
+      image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
+      header: "Here is a title! Woooo",
+      link: {
+        url: "/#",
+        text: "Link"
+      },
+      text:
+        "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
+    },
+    {
+      header: "Here is a title! Woooo",
+      subheader: "sub header! ",
+      text:
+        "It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries"
+    },
+    {
+      image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
+      header: "Here is a title! Woooo",
+      link: {
+        url: "/#",
+        text: "Link"
+      },
+      text:
+        "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
+    }
+  ],
+  theme: theme1
+};
+return (
+  <ListFeat content={content} motion />
+)
+```
+## Miscellaneous organisms
+#### AdminCategoryData
+###### Props -
+- `content` **(required)** - object containing name, industry, translations, url, and languageOptions
+  - `name` - string for generating header
+  - `industry` - string for generating subheader
+  - `translations` - array of objects
+    - `language` - string for language
+    - `teaserImage` - object with key value pair of `url` to represent image path
+    - `name` - string for name of product
+    - `text` - string for text description
+  - `languageOptions` - object with language abbreviations as key and value is language
+###### Example -
+```
+const translations = [
+  {
+    language: "en",
+    teaserImage: { url: "http://fpoimg.com/95x95" },
+    name: "Product name",
+    text: "Dolore velit irure velit duis ea."
+  },
+  {
+    language: "fr",
+    teaserImage: { url: "http://fpoimg.com/95x95" },
+    name: "Product name, but in French",
+    text: "Dolore velit irure velit duis ea."
+  },
+  {
+    language: "de",
+    teaserImage: { url: "http://fpoimg.com/95x95" },
+    name: "Product name, but in German",
+    text: "Dolore velit irure velit duis ea."
+  }
+];
+const content = {
+  name: "Category name",
+  industry: "Industry name",
+  translations,
+  url: "/products/industry_name/category_name",
+  languageOptions: {
+    de: "German",
+    fr: "French",
+    en: "English"
+  }
+};
+return (
+  <AdminCategoryData content={content} currentLanguageURL="en" />
+)
+```
+#### AdminProductData
+###### Props -
+- `content` **(required)** - object containing name, regions, translations, url, and languageOptions
+  - `regions` - array of regions as strings
+  - `translations` - array of objects
+    - `language` - string for language
+    - `teaserImage` - object with key value pair of `url` to represent image path
+    - `name` - string for name of product
+    - `text` - string for text description
+  - `languageOptions` - object with language abbreviations as key and value is language
+###### Example -
+```
+const translations = [
+  {
+    language: "en",
+    teaserImage: {
+      url: "http://fpoimg.com/95x95"
+    },
+    teaserName: "Product name",
+    teaserText: "Dolore velit irure velit duis ea."
+  },
+  {
+    language: "fr",
+    teaserImage: {
+      url: "http://fpoimg.com/95x95"
+    },
+    teaserName: "Product name, but in French",
+    teaserText: "Dolore velit irure velit duis ea."
+  },
+  {
+    language: "de",
+    teaserImage: {
+      url: "http://fpoimg.com/95x95"
+    },
+    teaserName: "Product name, but in German",
+    teaserText: "Dolore velit irure velit duis ea."
+  }
+];
+const content = {
+  name: "Product name",
+  regions: ["Illinois", "Colorado", "Ohio"],
+  translations,
+  url: "/products/product-name",
+  languageOptions: {
+    de: "Germand",
+    fr: "French",
+    en: "English"
+  }
+};
+return (
+  <AdminProductData content={content} currentLanguageURL="en" />
+)
+```
+#### MiniFeatDropdown
+###### Props -
+- `content` - object containing header, text, and dropdowns
+  - `header` - string to represent header
+  - `text` - string to represent text. Can be either HTML or plain text
+  - `dropdowns` - array of single object
+    - `dropdownOne` - object with key options, defaultText, and name
+      - `options` - array of strings to represent dropdown options
+      - `defaultTetx` - string to represent dropdown default option
+      - `name` - string to represent dropdown label
+###### Example
+```
+const header = "How can we help you?";
+const text =
+  "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>";
+const dropdownOne = {
+  options: [
+    "General Contractor",
+    "Software Engineer",
+    "Cyber Security Analyst",
+    "Graphic Designer",
+  ],
+  defaultText: "Choose Your Fighter",
+  name: "I am a ...",
+};
+const content = {
+  header,
+  text,
+};
+return (
+  <MiniFeatDropdown
+        content={content}
+        dropdowns={dropdowns}
+        handleDropdownSelect={action("Dropdown Selected")}
+      />
+    )
+```
+#### BrowserSupportBanner
+###### Props -
+- `content` - object containing text, type, and browser
+  - `text` - string to represent text
+  - `type` - string to represent banner type. Options include "warning", "danger", and "success"
+  - `browser` - represents type of browser the alert should render on
+###### Example
+```
+const content = {
+  text:
+    "WARNING: Internet Explorer is not recommended for use of this site. Please switch your browser to Chrome, Firefox, or Safari.",
+  type: "danger",
+  browser: "chrome",
+};
+return (
+  <BrowserSupportBanner content={content} />
+)
+```
+#### SketchUp Pricing Card
+###### Props -
+- `content` - object containing header, boldHeader, text, price, subscript, cta, icons, iconText, listtems, bottomLink, prevPrice, featured, featuredText, featuredColor
+  - `header` - string for generating header text (example: SketchUp)
+  - `boldHeader` - string for generating header type (example: Pro - will read as SketchUp Pro with Pro bolded)
+  - `text` - string to represent text
+  - `price` - string to generate price
+  - `subscript` - string to represent cost frequency ("yr", "month", etc)
+  - `cta` - object with key value pairs `text` and `url`
+    - `text` - string to represent CTA text
+    - `url` - string to represent path of where CTA links
+  - `icons` - array of icon in strings
+  - `listItems` - array of objects with key value pairs `items`, `featured`
+    - `item` - string to generate bullet point items on card
+    - `featured` - boolean: `true` will render "new" on card
+  - `bottomLink` - object with key value pairs `text` and `url`
+    - `text` - string to generate text for bottom link
+    - `url` - string to represent path for link
+  - `prevPrice` - string to represent previous price
+  - `featured` - boolean - `true` will render featuredText
+  - `featuredText` - string to generate featured text if card is featured
+  - `featuredColor` - string to generate color of featuredText background
+###### Example
+```
+const header = "SketchUp";
+const boldHeader = "Pro";
+const text = "Model Personal Projects";
+const price = "$199";
+const subscript = "/yr";
+const cta = {
+  text: "Subscribe",
+  url: "/",
+};
+const icons = ["enclosed-x-dark-16px", "enclosed-arrow-right-dark-32px"];
+const iconText = "Web Only";
+const listItems = [
+  { item: "Lorem ipsum dolor site amet.", featured: false },
+  { item: "Lorem ipsum dolor sit, adipisicing.", featured: false },
+  {
+    item: "Lorem ipsum dolor site amet Lorite amet.",
+    featured: true,
+  },
+];
+const bottomLink = {
+  text: "Learn more about SHOP",
+  url: "/",
+};
+const prevPrice = "$299";
+const featured = true;
+const featuredText = "Most Popular";
+const featuredColor = "#0d6aa8";
+const content = {
+  header,
+  boldHeader,
+  text,
+  price,
+  subscript,
+  cta,
+  icons,
+  iconText,
+  listItems,
+  bottomLink,
+  prevPrice,
+  featuredColor,
+  featured,
+  featuredText,
+};
+return (
+ <SketchUpPricingCard content={content} />
+)
+```
+#### StoreFront Card
+###### Props -
+- `content` - object containing title, header, text, link, image, priceTitle, quantityTitle, price, button, and deliveryEstimation
+  - `title` - string to generate main title of card
+  - `header` - string to generate header of card
+  - `text` - string to represent the description
+  - `link` - object with key value pairs `text` and `url`
+    - `url` - string to represent the path for link
+    - `text` - string to represent text on link
+  - `priceTitle` - string to represent price label
+  - `price` - string to represent price
+  - `button` - object with key value pairs `url` and `text`
+    - `text` - string to represent text of button
+    - `url` - string to generate link path
+  - `deliveryEstimation` - string to represent delivery time
+###### Example
+```
+const title = "Trimble XR10";
+const header = "Desgined for the frontline worker";
+const text =
+  "Additional information: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et aliqua";
+const link = {
+  url: "/",
+  text: "Learn More",
+};
+const image = { url: "http://fpoimg.com/95x95", altText: "image" };
+const priceTitle = "Price";
+const quantityTitle = "Quantity";
+const price = "$4750.00";
+const button = { url: "Added", text: "Added" };
+const deliveryEstimation = "Delivery: 4-6 weeks";
+const content = {
+  title,
+  header,
+  text,
+  link,
+  image,
+  priceTitle,
+  price,
+  button,
+  quantityTitle,
+  deliveryEstimation,
+};
+return (
+   <StoreFrontCard content={content} />
+)
+```
+#### SupportCard
+###### Props -
+- `content` - object containing header, headerLabel, subHeader, product, subHeaderLabel, and sections
+  - `header` - string for generating the header
+  - `headerLabel` - string for generating header label
+  - `subHeader` - string for generating the subheader
+  - `product` - string for generating a product
+  - sections - array of arrays of objects to represent sections
+    - array of objects include key value pairs `value` and `format`
+      - `value` - text or HTML for each section
+      - `format` - optional - string to represent wysiwyg_editor
+###### Example
+```
+const sectionOne = [
+  {
+    value:
+      "<h1>Header</h1><p>Non anim voluptate eu cillum sunt voluptate ipsum laboris ipsum do irure.</p><a href='/#'>Link</a>",
+    format: "wysiwyg_editor",
+  },
+  {
+    value:
+      "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin lectus ligula, nec tempus eros viverra sed. Curabitur malesuada, leo ut porta pretium, turpis turpis dignissim neque, convallis vulputate nisl ante id sapien. Donec efficitur, turpis et blandit ornare, lorem sem aliquet ligula, euismod condimentum dui quam quis purus.</p>\r\n\r\n<p>adadasd</p>\r\n\r\n<ul>\r\n\t<li>asdasd</li>\r\n\t<li>sfdsdfsd</li>\r\n\t<li>sdfsdf</li>\r\n</ul>\r\n",
+    format: "wysiwyg_editor",
+  },
+  {
+    value: "<p>Non anim voluptate eu cillum sunt.</p>",
+    format: "wysiwyg_editor",
+  },
+  {
+    value: '<a href="mailto:jeff@biscuits.com">Email me</a>',
+  },
+];
+const sectionTwo = [
+  {
+    value:
+      "<p>Non anim voluptate eu cillum sunt voluptate ipsum laboris ipsum do irure.</p>",
+    format: "w/e",
+  },
+  {
+    value: "<p>Veniam labore sunt tempor nulla commodo ullamco tempor.</p>",
+    format: "w/e",
+  },
+];
+const sectionThree = [
+  {
+    value:
+      "Non anim voluptate eu cillum sunt voluptate ipsum laboris ipsum do irure.",
+    format: "w/e",
+  },
+  {
+    value: "Veniam labore sunt tempor nulla commodo ullamco tempor.",
+    format: "w/e",
+  },
+  {
+    value: "Non anim voluptate eu cillum sunt. Okay",
+    format: "w/e",
+  },
+];
+const content = {
+  header: "Construction",
+  headerLabel: "Industry",
+  subHeader: "Civil Engineering Software",
+  product: "Novapoint and Quandri",
+  subHeaderLabel: "Categories",
+  sections: [sectionOne, sectionTwo, sectionThree],
+};
+return (
+   <SupportCard content={content} />
+)
+```
+#### Trainer Card
+###### Props -
+- `content` - object containing header, name, country, region, and link
+  - `header` - string to generate header
+  - `name` - string to generate name
+  - `country` - string to represent country
+  - link - object with key value pairs `url` and `text`
+    - `text` - string to represent button text
+    - `url` - string to represent url path
+###### Example
+```
+const content = {
+  header: "Trainer",
+  name: "Sketchy McSketcherson",
+  country: "United States",
+  region: "North America",
+  link: {
+    url: "/",
+    text: "Get in touch",
+  },
+};
+return (
+  <TrainerCard content={content} />
+)
+```
+---
+## Boilerplate Components, Hooks, and Methods
+#### `FooterHandler`
+##### Description -
+Takes the footer data from `App` and uses it to render `Footer`. Was broken out of Template to keep the component nice and lean.
+##### Props -
+- `data` **(required)** - object containing all `Footer` data. See [Footer](#footer) for reference
+---
+#### `HelmetHandler`
+##### Description -
+Takes the helmet data from `Template` and uses it to render `Helmet`. Was broken out of Template to keep the component nice and lean.
+##### Props -
+- `data` **(required)** - object containing all `Helmet` data.
+  - `title` - string
+  - `canonical_url` - string
+  - `description` - string
+- `language` - string for the current active language code
+---
+#### NavBarHandler
+##### Description -
+Takes the navigation data from `App` and uses it to render `NavBar`. Was broken out of Template to keep the component nice and lean.
+##### Props -
+- `data` **(required)** - object containing all `NavBar` data.
+- `innerPageNavData` - object used for populating the utility nav
+- `history`**(required)** - the React Router `history` object
+- `regionData` - object with `region`, `regions`, and method for `setRegion` from `App`
+- `applicationData` - object with the site data from `App`
+- `languages` - array of available languages
+- `language` - string with active language code
+- `setLanguage` - method for setting the active language
+- `navCTAOverride` - object used to override the utility nav CTA
+---
+#### Routing
+##### Description -
+Takes all the passed information from App and uses it to render the all routes.
+##### Props -
+- `routes` - array of available route strings
+- `languages` - array of available languages
+- `language` - string with active language code
+- `setMetaData` - method for setting active metadata in React Helmet
+- `setInnerPageNavData` - method for setting active inner-page navigation
+- `fiveHundreData` - object for populating the 500 page
+- `fourZeroFourData` - object for populating the 404 page
+- `languageEnabled` - boolean for indicating that site translations are active and to reference the language code in pathname strings
+- `labels` - object used for passing various labels from site application data
+- `setNavCTAOverride` - method for setting the CTA override in the utility nav.
+- `Page` - the Page component from the React Boilerplate
+- `children` - array of custom routes for the page.
+---
+#### Stack
+##### Description -
+Responsible for iterating over the content array passed down from Page and rendering corresponding organisms. Custom organisms can be added here by creating a new method and adding the new organism's type and method name to the methods array
+##### Props -
+- `content` - array of all organism content used for rendering organism components
+  - `content` - object with content for the organism, structure varies
+  - `type` - string indicating organism type
+  - `theme` - object with organism theme data (`color`, `backgroundColor`)
+- `customMethods` - object of custom organisms for the site where the `key` is the organism type and the value is the organism object (`content`, `type`, `theme`)
+---
+#### Loading
+##### Description -
+Responsible for rendering a loading gif when the site is in a loading state
+##### Props -
+- `image` - points to the image source you'd like to use for the. Defaults to the standard dancing dots without it.
+---
+## Hooks
+#### useErrorPageData
+##### Description -
+Takes the site application data and returns `errorPageData`
+##### Arguments -
+- `data` - object containing site appplication data
+  - `fourOhFourHeader` - string
+  - `fourOhFourText` - string
+  - `fourOhFourFiveHundredImage` - string (image src)
+  - `homeButtonText` - string
+  - `fiveHundredHeader` - string
+  - `fiveHundredText` - string
+---
+#### useFetch
+##### Description -
+Makes a fetch call to the passed url and returns the `response` object, `status` string, and `setResponse` method
+##### Arguments -
+- `url` - string
+---
+#### useFooterData
+##### Description -
+Formats the footer data returned from `useFooterResponse`
+##### Arguments -
+- `language` - string
+- `footerResponse` - object
+- `setFooterURL` - method returned from `useFooterURL`
+- `setFooterResponse` - method return from `useFooterResponse`
+---
+#### useFooterResponse
+##### Description -
+Makes a fetch call for footer data to the passed url and returns the `footerResponse` object and `setFooterResponse` method
+##### Arguments -
+- `url` - string
+---
+#### useFooterURL
+##### Description -
+Returns the footer url string.
+##### Arguments -
+- `language` - string
+- `languageEnabled` - boolean
+- `backendURL` - string
+---
+#### useInnerPageNav
+##### Description -
+Used to how the utility nav is populated. Returns and `innerPageNavData` and `setInnerPageNavData`, which takes an object like `{ pageTitle: "", links: [] }`
+---
+#### useLanguage
+##### Description -
+Takes the site `languages` array as an argument and returns the browser-preferred language or 'en' and `setLanguage` a method for manually setting to another language.
+##### Arguments -
+- `languages` - array of objects -`id` - string that is two letters
+---
+#### useLanguages
+##### Description -
+Takes the site `backendURL` method as an argument and returns all available site languages.
+##### Arguments -
+- `backendURL` - method that returns the string for the site backend url
+---
+#### useMetadata
+##### Description -
+Returns the site `metadata` object and the `setMetadata` method for updating it.
+---
+#### useNavData
+##### Description -
+Formats the `navData` object and returns it and the `setNavData` method
+##### Arguments -
+- `mainNavResponse` - object
+- `setMainNavResponse` - function
+- `setNavURLs` - function
+- `applicationData` - object
+- `language` - string
+---
+#### useNavResponse
+##### Description -
+Returns the fetched `mainNavResponse` object and `setMainNavResponse` method
+##### Arguments -
+- `urls` - object with `navURL` string
+---
+#### useNavURL
+##### Description -
+Returns the `navURLs` object and `setNavURLs` function
+##### Arguments -
+- `language` - string
+- `languageEnabled` - boolean
+- `backendURL` - function that return backend URL string
+---
+#### usePageFetch
+##### Description -
+Returns the page `response` object, `setResponse` function, and `error` boolean
+##### Arguments -
+- `url` - string
+- `setStatus` - method that takes strings of `loading`, `success`, or `error`
+- `setURL` - function
+---
+#### useRegions
+##### Description -
+Used to determine user's region based on browser data and to set it dynamically. Returns the active `region`, `regions` options array, `setRegion` and `setRegions` functions, `userLocation` country code string, `setUserLocation` function.
+##### Arguments -
+- `backendURL` - function that return backend URL string
+---
+#### useRoutes
+##### Description -
+Fetches all data for routing, used for setting up custom routes. Returns the `routesData` object
+##### Arguments -
+- `backendURL` - function that return backend URL string
+---
+#### useScrollTo
+##### Description -
+This tracks movement from react-scroll and determines whether or not to add an extra 100px of distance between the scrollY and the element we're scrolling to so that when the navbar expands during upward scrolling it doesn't cover up the top of the container we've sxrolled to. Returns nothing and takes no arguments.
+---
+#### useSiteData
+##### Description -
+Fetches and stores all site data from Drupal. Returns the `data` object
+##### Arguments -
+- `language` - string
+- `backendURL` - function that return backend URL string
+---
+## Methods
+#### formatContentSections
+##### Description -
+Used to format all page data from a Drupal fetch call. Returns the `formattedSections` array for rendering Luna organisms and `links` array for populating the utility nav
+##### Arguments -
+- `content_sections` - `object`
+- `language` - string, defaults to 'en'
+- `languageEnabled`
+- `labels`
+- - `customMethods` - `object` of custom organisms used for the site. The key is the organisms `type` that is referenced in Drupal and the value is the function that formats the data. They take the following arguments: `section` object, `languageCode` string, `languageEnabled` bool, `labels` object, `fpoBox` image src, `formatLinks` function, and `fpoSquare` image src.
+---