npm - luna-one - Versions diffs - 1.0.232 → 1.0.237 - Mend

luna-one 1.0.232 → 1.0.237

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/README.md +1630 -1630
package/dist/global-styles/content/icon.scss +361 -361
package/dist/global-styles/content/typography.scss +99 -99
package/dist/global-styles/fonts/benton.scss +5 -5
package/dist/global-styles/global-terra.scss +11 -11
package/dist/global-styles/global-vars.scss +535 -535
package/dist/global-styles/layout/_css-grid.scss +24 -24
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 +80 -80
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 +12 -12
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/AdminCategoryData/AdminCategoryData.scss +81 -81
package/dist/luna/components/AdminProductData/AdminProductData.scss +74 -74
package/dist/luna/components/BrowserSupportBanner/BrowserSupportBanner.scss +6 -6
package/dist/luna/components/EventCard/EventCard.scss +130 -130
package/dist/luna/components/LanguageSelector/LanguageSelector.scss +139 -139
package/dist/luna/components/MegaMenu/MegaMenu.js +1 -1
package/dist/luna/components/MegaMenu/MegaMenu.scss +209 -209
package/dist/luna/components/MegaMenu/RightSection.js +16 -16
package/dist/luna/components/MiniFeatDropdown/MiniFeatDropdown.js +4 -3
package/dist/luna/components/MiniFeatDropdown/MiniFeatDropdown.scss +106 -106
package/dist/luna/components/MobileMegaMenu/MobileMegaMenu.scss +147 -147
package/dist/luna/components/MobileMenu/MobileMenu.scss +65 -65
package/dist/luna/components/MobileNav/MobileNav.js +1 -1
package/dist/luna/components/MobileNav/MobileNav.scss +104 -104
package/dist/luna/components/NavBarTop/NavBarTop.js +182 -160
package/dist/luna/components/NavBarTop/NavBarTop.scss +235 -235
package/dist/luna/components/NavSearch/NavSearch.scss +38 -38
package/dist/luna/components/RegionCard/RegionCard.scss +84 -84
package/dist/luna/components/StoreFrontCard/StoreFrontCard.scss +434 -434
package/dist/luna/components/SupportCard/SupportCard.scss +150 -150
package/dist/luna/components/VariableContentCard/VariableContentCard.scss +288 -288
package/dist/luna/components/VidyardModal/VidyardModal.scss +23 -23
package/dist/luna/depracated/Feat10/Feat10.js +3 -3
package/dist/luna/depracated/Feat10/Feat10.scss +30 -30
package/dist/luna/depracated/Feat4Flex/Feat4Flex.js +1 -1
package/dist/luna/depracated/Feat4Flex/Feat4Flex.scss +118 -118
package/dist/luna/depracated/Feat4Flex/Feat4FlexMethods.js +2 -2
package/dist/luna/depracated/Feat5/Feat5.js +2 -2
package/dist/luna/depracated/Feat5/Feat5.scss +209 -209
package/dist/luna/depracated/Feat7/Feat7.js +1 -1
package/dist/luna/depracated/Feat7/Feat7.scss +220 -220
package/dist/luna/depracated/Feat8/Feat8.js +1 -1
package/dist/luna/depracated/Feat8/Feat8.scss +173 -173
package/dist/luna/depracated/Hero5/Hero5.js +2 -2
package/dist/luna/depracated/Hero5/Hero5.scss +197 -197
package/dist/luna/depracated/MegaFeat/MegaFeat.js +2 -2
package/dist/luna/depracated/MegaFeat/MegaFeat.scss +141 -141
package/dist/luna/depracated/MegaFeat/MegaFeatMethods.js +2 -2
package/dist/luna/depracated/MegaMenu/MegaMenu.scss +115 -115
package/dist/luna/depracated/ParallaxBackground/ParallaxBackground.js +6 -5
package/dist/luna/featurettes/CustomFeat/CustomFeat.js +4 -3
package/dist/luna/featurettes/CustomFeat/CustomFeat.scss +17 -17
package/dist/luna/featurettes/Feat1/Feat1.js +2 -2
package/dist/luna/featurettes/Feat1/Feat1.scss +146 -146
package/dist/luna/featurettes/Feat2A/Feat2A.scss +192 -192
package/dist/luna/featurettes/Feat2B/Feat2B.scss +317 -317
package/dist/luna/featurettes/Feat3/Feat3.scss +78 -78
package/dist/luna/featurettes/Feat4/Feat4.js +2 -2
package/dist/luna/featurettes/Feat4/Feat4.scss +168 -168
package/dist/luna/featurettes/Feat4/LazyBackgroundImage.js +1 -1
package/dist/luna/featurettes/Feat5/Feat5.js +2 -2
package/dist/luna/featurettes/Feat5/Feat5.scss +282 -282
package/dist/luna/featurettes/Feat6/Feat6.scss +170 -170
package/dist/luna/featurettes/Feat6/ico-quote-white.svg +3 -3
package/dist/luna/featurettes/Feat6/ico-quote.svg +3 -3
package/dist/luna/featurettes/Feat7/Feat7.scss +57 -57
package/dist/luna/heroes/FilterHero/FilterHero.js +4 -3
package/dist/luna/heroes/FilterHero/FilterHero.scss +151 -151
package/dist/luna/heroes/Hero1/Hero1.scss +269 -269
package/dist/luna/heroes/Hero2/Hero2.scss +171 -171
package/dist/luna/heroes/Hero3/Hero3.js +1 -1
package/dist/luna/heroes/Hero3/Hero3.scss +350 -350
package/dist/luna/heroes/Hero4/Hero4.scss +157 -157
package/dist/luna/heroes/Hero6/Hero6.scss +142 -142
package/dist/luna/heroes/HeroRatioWrapper/HeroRatioWrapper.scss +16 -16
package/dist/luna/images/close-button.svg +42 -42
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/play.svg +6 -6
package/dist/luna/images/right-caret-light-gray.svg +4 -4
package/dist/luna/images/right-caret-medium-gray.svg +4 -4
package/dist/luna/images/search-highlighted.svg +9 -9
package/dist/luna/images/search.svg +9 -9
package/dist/luna/images/skipicon.svg +154 -154
package/dist/luna/images/worldwide.svg +19 -19
package/dist/luna/list-feats/ListFeat/ListFeat.js +2 -2
package/dist/luna/list-feats/ListFeat/ListFeat.scss +153 -153
package/dist/luna/list-feats/ListFeat1/ListFeat1.scss +68 -68
package/dist/luna/list-feats/ListFeat2/ListFeat2.scss +31 -31
package/dist/luna/list-feats/ListFeat3/ListFeat3.scss +28 -28
package/dist/luna/list-feats/ListFeat4/ListFeat4.scss +41 -41
package/dist/luna/list-feats/ListFeat5/ListFeat5.scss +43 -43
package/dist/luna/list-feats/ListFeat6/ListFeat6.scss +63 -63
package/dist/luna/list-feats/ListFeat7/ListFeat7.scss +13 -13
package/dist/luna/list-feats/ListFeatCustom/ListFeatCustom.scss +4 -4
package/dist/luna/other-organisms/Footer/Footer.scss +237 -237
package/dist/luna/other-organisms/MarketoForm/MarketoForm.js +4 -3
package/dist/luna/other-organisms/MarketoForm/MarketoForm.scss +56 -56
package/dist/luna/other-organisms/NavBar/NavBar.js +369 -246
package/dist/luna/other-organisms/NavBar/NavBar.scss +375 -375
package/dist/luna/utils/generateBackgroundImage.js +1 -1
package/package.json +80 -80

package/README.md CHANGED Viewed

@@ -1,1630 +1,1630 @@
-#Luna React Component Library
-The Luna 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. Using this library requires that the Terra React Component Library is also installed, which can be done with `npm i --save terra-component-lib`.
-## 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
-## Luna Organisms
-#### 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
-  - `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
-- `contentSide` - string that indicates whether content is on the `right` or `left` side of the component. Defaults to `right`.
-- theme - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-- `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.
-###### 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 content = {
-  images,
-  ctas,
-  header: 'Design',
-  text: 'I am text'
-}
-return (
-<Hero1
-    content={content}
-    motion
-    theme='theme-2'
-  />
-);
-```
-#### Hero2
-###### Props -
-- content **(required)** - object containing images, ctas, headers, subheaders, button
-  - `images` **(required)** - an 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` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-- `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`**
-###### 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.",
-  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"
-    }
-  },
-}
-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
-    - `uuid` - string used for rendering Vidyard video embeds
-  - `vidyard` - boolean for indicating that a Vidyard component should be rendered
-  - `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-  - `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.
----
-#### Hero4/Hero5
-###### 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
-  - `image` - object for generating <img> element with url and altText strings
-- `zIndex` - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
-- `theme` - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
-- `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 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'
-}
-<Hero4
-  content={content}
-  motion
-  theme='theme-1'
-/>
-```
----
-#### Hero6
-###### 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
-  - `text` **(required)** - string for generating body 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
-  - `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
-- `imageSide` - string used for indicating the side of the page that the image should render on. Defaults to right.
-- `theme` - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
-- `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 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',
-  text: 'Text!'
-}
-return (
-<Hero6
-    imageSide="left"
-    content={content}
-    motion
-    theme='theme-4'
-  />
-);
-```
-#### FilterHero
-###### Props -
-- `header` - string for generating header text
-- `text` - string for generating body text.
-- `dropdowns` - an array used for generating Dropdown components - see example for structuring
-- `checkboxes` - an array used for generating Checkbox components - see example for structuring
-- `handleDropdownChange` - method used for handling new dropdown selections - takes the new selection and the associated name of the dropdown from the event object arguments.
-- `handleCheckboxChange` - method 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.
-###### 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
-- `image` **(required)** - object consisting of `url` and `altText` strings.
-- `backgroundImage` - url string that points to a background image address
-- `backgroundPosition` - string indicating where the background image appears. Options are `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `right`, `left` and `center`.
-- `backgroundImageWidth` - number indicating the width of the background image in pixels
-- `backgroundImageHeight` - number indicating the height of the background image in pixels
-- `backgroundOffsetY` - number indicating the offset of the background image on the Y axis
-- `backgroundOffsetX` - number indicating the offset of the background image on the X axis
-- `parallaxPosition` - number indicating the current scrollY position of the page, should come from Redux
-- `zIndex` - number indicating the desired `z-index` of the background image.- `backgroundColor` - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-- `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: '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'
-  }
-}
-const background = {
-  backgroundImage: './image.png',
-  backgroundPosition: 'right',
-  backgroundImageWidth: 900,
-  backgroundImageHeight: 900,
-  backgroundOFfsetY: 0,
-  backgroundOffsetX: 100
-}
-return (
-  <Feat1
-    content={content}
-    motion
-    background={background}
-    parallaxPosition={this.props.parallaxPosition}
-    theme='theme-2',
-    id={data.id}
-  />
-);
-```
----
-#### Feat2A
-###### Props -
-- `image` **(required)** - object with `url` and `altText` strings
-- `<AccordionFold>` **(required)** - child component for rendering folds in the `<Accordion>` component with each fold taking a `header` string as a prop
-- `zIndex` - number indicating the desired `z-index` of the background image.- `backgroundColor` - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-- `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"
-};
-return (
-  <Feat2A
-    image={mockImage}
-    header="Good design is a thing, apparently."
-    text="Veniam laboris laboris consequat et."
-  >
-    <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 (see Example)
-- `cards` **(required)** - array of objects used for generating `IconListItem` components with `text` and `header` strings
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-- `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."
-    }
-  ]
-}
-return (
-  <Feat2B
-    content={content}
-    motion
-    theme='theme-2'
-    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
-      - `url` - string pointing to the image source
-      - `altText` - string used for assisted alternate text for screen readers
-    - `desktop` - object containing the desktop image source and alt text
-      - `url` - string pointing to the image source
-      - `altText` - 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` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-###### Example -
-```
-const content = {
-  header: "Feat 3 Header",
-  subHeader: "This is sub-header text",
-  images: {
-    mobile: {
-      url: "www.image.com/mobile-image.jpg",
-      altText: "image alt text
-    },
-    desktop: {
-      url: "www.image.com/desktop-image.jpg",
-      altText: "image alt text
-    }
-  },
-  theme: "theme-2",
-  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
-- background - object containing `backgroundImage` which value is a string, `backgroundPosition` which value is a number, `backgroundColor` which value is a string, `backgroundOffsetX` which value is a number, `backgroundOffsetY` which value is a number, `backgroundImageHeight` which value is a number and `backgroundImageWidth` which value is anumber
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-- `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.
-###### 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.",
-  const ctas = {
-    ctaOne: {
-      text: "Button",
-      url: "/#"
-    },
-    ctaTwo: {
-      text: "Button",
-      url: "/#"
-    }
-  };
-}
-return (
-  <Feat4
-    content={content}
-  />
-);
-```
----
-#### Feat5
-###### Props -
-- `dumplings` **(required)** - an array of objects used for generating `<Dumpling>` components; see the Terra component library for requirements
-- `type` - string used to determine whether or not small or large dumplings are used (`'a'` is large, `'b'` is small)
-- `header` **(required)** - string used for generating header text
-- `subHeader` - string used for generating sub-header text
-- `backgroundImage` - url string that points to a background image address
-- `backgroundPosition` - string indicating where the background image appears. Options are `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `right`, `left` and `center`.
-- `backgroundImageWidth` - number indicating the width of the background image in pixels
-- `backgroundImageHeight` - number indicating the height of the background image in pixels
-- `backgroundOffsetY` - number indicating the offset of the background image on the Y axis
-- `backgroundOffsetX` - number indicating the offset of the background image on the X axis
-- `zIndex` - number indicating the desired `z-index` of the background image.- `backgroundColor` - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-- `className` - string that is interpolated into the organisms class for targeted styling and/or manipulation
-- `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.
-- `motionDirection` - string indicating the direction that the component should travel from as it fades in.
-- `motionDistance` - string indicating the distance that the component travels during motion
-###### Example -
-```
-const mockDumplings = [
-  {
-    header: "Dumplin'",
-    link: { url: "/#" },
-    size: "small",
-    icon: { type: "enclosed-check-dark-48px", size: "48px" }
-  },
-  {
-    header: "Dumplin'",
-    link: { url: "/#" },
-    size: "small",
-    icon: { type: "enclosed-check-dark-48px", size: "48px" }
-  }
-];
-return (
-  <Feat5
-    dumplings={mockDumplings}
-    type="a"
-    header="Design is design"
-    subHeader="It's like, this thing, you know?"
-  />
-);
-```
----
-#### Feat6
-###### Props -
-- content **(required)** - object containing quotes, ctas, button
-  - quote (required) - object consisting of text, source, and sourceTitle strings
-  - `images` **(required)** - an 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.
-  - `header` **(required)** - string used for generating header text
-  - `subHeader` **(required)** - string used for generating sub-header text
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-- `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.
-###### Example -
-```
-const content = {
-  image:{
-    url: "http://fpoimg.com/800x800",
-    altText: "placeholder image"
-  },
-  quote:{
-    text: `Excepteur incididunt magna commodo amet est fugiat."`,
-    source: "Leonard Sciarra",
-    sourceTitle: "Senior Associate at Gensler, AIA, ASHRAE, LEED AP+"
-  },
-  cta:{
-    text: "CTA",
-    url: "/#"
-  },
-}
-return (
-  <Feat6
-    content={content}
-  />
-```
----
-#### Feat7
-###### Props -
-- `content` **(required)** - array of objects use for generating 'cards' consisting of `header`, `text`, and `url` strings.
-- `header` **(required)** - string used for generating header text
-- `backgroundImage` - url string that points to a background image address
-- `backgroundPosition` - string indicating where the background image appears. Options are `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `right`, `left` and `center`.
-- `backgroundImageWidth` - number indicating the width of the background image in pixels
-- `backgroundImageHeight` - number indicating the height of the background image in pixels
-- `backgroundOffsetY` - number indicating the offset of the background image on the Y axis
-- `backgroundOffsetX` - number indicating the offset of the background image on the X axis
-- `zIndex` - number indicating the desired `z-index` of the background image.- `backgroundColor` - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-- `className` - string that is interpolated into the organisms class for targeted styling and/or manipulation
-- `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.
-- `motionDirection` - string indicating the direction that the component should travel from as it fades in.
-- `motionDistance` - string indicating the distance that the component travels during motion
-###### Example -
-```
-const content = [
-  {
-    header: "Design!",
-    text:
-      "Enim laborum ad anim laborum ad minim ipsum proident est cillum aliqua. Irure laboris aute ullamco ad Lorem et culpa id commodo quis sunt labore in id.",
-    url: "/#"
-  },
-  {
-    header: "Aesthetics!",
-    text:
-      "Enim laborum ad anim laborum ad minim ipsum proident est cillum aliqua.",
-    url: "/#"
-  }
-];
-return <Feat7 header="I am a header" content={content} />;
-```
----
-#### ParallaxBackground
-###### Props -
-- `backgroundImage` - string for the URL that points to the background image to be rendered
-- `speed` - integer used for determining the speed of the parallax effect. Defaults to `2`. A speed of `1` will keep the background image fixed, while a speed of `2` will cause it to scroll at half speed.
-- `styles` - object of style properties that are passed to the parent container.
-- `children` - JSX passed inside the tags that will be rendered within the container and will scroll at normal speed.
-###### Example -
-```
-const backgroundImage = 'https://www.images.com/images/image.jpg
-return (
-  <ParallaxBackground
-    backgroundImage={backgroundImage}
-    styles={{padding: '0 40px'}}
-    speed={1.4}
-  >
-    <p>Content!</p>
-  </ParallaxBackground>
-)
-```
-#### NavBar
-###### Notes -
-This component uses the `react-slidedown` library for the innerpage navigation links in the `utilityNav`. The `link.url` string should be a reference to the name of the `<Element>` that wraps the cooresponding organism that the window should scroll to.
-###### Props -
-- `rightLinks` - array of objects used for generating links to the right of the search icon. Each object requires `url` and `text` strings.
-- `logo` **(required)** - object consisting of `url` and `altText` strings (for generating the logo image) in addition to a link object with a `url` string for generating the `href` property.
-- `divisionName` **(required)** - string used for generating the name of the Trimble division that is to the right of the logo.n
-- `navCTA` - object consiting of a `className` string for formating the button (see Terra buttons) and a `link` object with `url` and `text` strings used for generating the CTA in the lower right corner of the Nav
-- `navOptions` - array of objects used for generating the middle section of the nav. All objects will have a type indicating whether to render a (`MegaMenu`), a simple drop down of links (`miniMenus`), or a single link (`singleLink`). See examples below on how to load up these objects. The `MegaMenu` can both render a links both with and without subcategories.
-- `utilityNav` - object consisting of a `pageTitle` string as well as a `links` array of objects consisting of `text` and `url` strings. See example below.
-- `currentLanguage` - object with `region` and `language` strings that indicate the current region and language selected.
-- `languageSelectorData` - object consisting of data needed to populate the `LanguageSelector` component. See example below.
-- `setLanguage` - method used to set the region and language, which it takes as string key/values in an object as an argument
-- `location` - prop used to close the mobile menu when a user clicks on one of the rightLinks. In your project, pass in `location={this.props.location}`
-###### Example -
-```
-const rightLinks = [
-  {
-    url: "/#",
-    text: "Support"
-  }
-];
-const logo = {
-  url: Logo (should be imported in the application),
-  altText: 'Trimble Logo',
-  link: {
-    url: 'www.trimble.com'
-  }
-};
-const divisionName = 'Geospatial';
-const location = 'N. America';
-const navCTA = {
-  className: 'ter-button--primary--1',
-  link: {
-    url: '/#',
-    text: 'Contact Sales'
-  }
-}
-const location = this.props.location
-const utilityNav = {
-  pageTitle: "Trimble Accubid Enterprise",
-  links: [
-    {
-      text: "Product Anchor One",
-      url: "/#"
-    },
-    {
-      text: "Product Anchor Two",
-      url: "/#"
-    }
-  ]
-};
-const megaMenu = {
-  type: "mega menu",
-  bottomLink: {
-    url: "/#",
-    text: "All Products"
-  },
-  text: "Products",
-  links: [
-    {
-      text: "Mechanical",
-      links: [
-        {
-          url: "/#",
-          text: "BIM Collaboration"
-        },
-        {
-          url: "/#",
-          text: "MEP Content"
-        }
-      ]
-    },
-    {
-      text: "Electrical",
-      links: [
-        {
-          url: "/#",
-          text: "Design/Detailing"
-        },
-        {
-          url: "/#",
-          text: "Project Management"
-        }
-      ]
-    },
-    {
-      text: "Plumbing",
-      link: {url: "/#"}
-    },
-  ]
-};
-const miniMenus = [
-  {
-    type: "mini menu",
-    text: "Services",
-    links: [
-      {
-        url: "/#",
-        text: "Link One"
-      },
-      {
-        url: "/#",
-        text: "Link Two"
-      }
-    ]
-  },
-  {
-    type: "mini menu",
-    text: "Resources",
-    links: [
-      {
-        url: "/#",
-        text: "Link One"
-      },
-      {
-        url: "/#",
-        text: "Link Two"
-      }
-    ]
-  }
-];
-const singleLink = {
-  type: "link",
-  url: "/#",
-  text: "Process"
-};
-const languageSelectorData = {
-  labels: {
-    currentRegion: "Current Region",
-    cancel: "Cancel",
-    save: "Save"
-  },
-  regions: [
-    {
-      region: "North America",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    },
-    {
-      region: "UK and Middle East",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    },
-    {
-      region: "France",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    },
-    {
-      region: "Germany and Austria",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    },
-    {
-      region: "Switzerland",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    }
-  ],
-  currentRegionLanguage: {
-    region: "UK and Middle East",
-    language: "EN-UK"
-  },
-  activeRegion: {
-    region: "UK and Middle East",
-    language: "EN: English"
-  },
-  companyDivision: "MEP"
-};
-return (
-  <NavBar
-    location={location}
-    rightLinks={rightLinks}
-    currentLanguage={{ region: "N. America", language: "EN: English" }}
-    logo={logo}
-    divisionName="MEP"
-    navCTA={navCTA}
-    navOptions={[megaMenu, ...miniMenus, singleLink]}
-    utilityNav={utilityNav}
-    languageSelectorData={languageSelectorData}
-  />
-)
-```
----
-#### Footer
-###### Props -
-- `logo` - object consisting of a `url` and `altText` strings
-- `trimbleText` - string from generating the main content on the left side
-- `trimbleLink` - object consisting of `text` and `url` strings for generating a link below the left-side text
-- `siteText` - text string that appears above the secondary link
-- `siteLink` - object consisting of `url` and `text` string for generating the secondary link on the left side
-- `linksOne` - array of objects consisting of `url` and `text` strings for generating the links that take up the left-center of the footer space
-- `linksTwo` - array of objects consisting of `url` and `text` strings for generating the links that take up the right-center of the footer space
-- `socialLinks` - array of objects consiting of an `icon` object (`url` and `altText` strings) and a link object (`url` string)
-- `legalStuff` - array of objects consisting of `url` and `text` strings for generating the links that take up the bottom of the footer space. The `url` string is optional, as the component will simply render a `<p>` tags instead.
-###### Example -
-```
-const logo = {
-    url: Logo,
-    altText: "fpo"
-  };
-  const trimbleText =
-    "Lorem ipsum dolor sit amet, consectetur adipisicing 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 ea commodo consequat.";
-  const trimbleLink = {
-    url: "/#",
-    text: "More About Trimble"
-  };
-  const siteText = "Text for secondary link information";
-  const siteLink = {
-    url: "/#",
-    text: "link.trimble.com"
-  };
-  const linksOne = [
-    { url: "/#", text: "Label Left" },
-    { url: "/#", text: "Label Left" },
-    { url: "/#", text: "Label Left" }
-  ];
-  const linksTwo = [
-    { url: "/#", text: "Label Right" },
-    { url: "/#", text: "Label Right" },
-    { url: "/#", text: "Label Right" }
-  ];
-  const socialLinks = [
-    {
-      icon: {
-        url: Facebook,
-        altText: "fpo"
-      },
-      link: {
-        url: "/#"
-      }
-    },
-    {
-      icon: {
-        url: Twitter,
-        altText: "fpo"
-      },
-      link: {
-        url: "/#"
-      }
-    },
-    {
-      icon: {
-        url: YouTube,
-        altText: "fpo"
-      },
-      link: {
-        url: "/#"
-      }
-    },
-    {
-      icon: {
-        url: LinkedIn,
-        altText: "fpo"
-      },
-      link: {
-        url: "/#"
-      }
-    },
-    {
-      icon: {
-        url: Facebook,
-        altText: "fpo"
-      },
-      link: {
-        url: "/#"
-      }
-    },
-    {
-      icon: {
-        url: Twitter,
-        altText: "fpo"
-      },
-      link: {
-        url: "/#"
-      }
-    },
-    {
-      icon: {
-        url: YouTube,
-        altText: "fpo"
-      },
-      link: {
-        url: "/#"
-      }
-    },
-    {
-      icon: {
-        url: LinkedIn,
-        altText: "fpo"
-      },
-      link: {
-        url: "/#"
-      }
-    }
-  ];
-  const privacyStatement = {
-    url: "/#",
-    text: "Privacy Statement"
-  };
-  const termsOfUse = {
-    url: "/#",
-    text: "Terms of Use"
-  };
-  const copyright = {
-    url: "/#",
-    text: "Copyright"
-  };
-  const legalStuff = [
-    {
-      url: "/#",
-      text: "Terms of Use"
-    },
-    {
-      url: "/#",
-      text: "Privacy Statement"
-    },
-    { text: "© 2019, Trimble Inc." }
-  ];
-  return (
-    <Footer
-      trimbleText={trimbleText}
-      trimbleLink={trimbleLink}
-      siteText={siteText}
-      siteLink={siteLink}
-      linksOne={linksOne}
-      linksTwo={linksTwo}
-      logo={logo}
-      socialLinks={socialLinks}
-      legalStuff={legalStuff}
-    />
-  );
-```
-#### ListFeat1
-###### Props -
-- `content` **(required)** - object containing images, ctas, text, variant, headers, subheaders, button, link, videos
-  - `cardOne` - an object that contains `header` and `text` keys with values that are strings.
-  - `cardTwo` - an object that contains `header` and `text` and `cta`. `header` has a value of a string. `text` has a value of a string. `cta` has a value of an object with key `url` with value of a string and key `text` with value of a string.
-  - `type` **(required)** - required to render the correct listFeat. ListFeat1 must be `list_feat_1`
-  - `sort` - boolean indicating whether or not cards should be sorted alphabetically by header
-- `motion` - boolean used to indicate whether or not motion should be used
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-###### Example -
-```
-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!" }
-  },
-  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!" }
-  }
-};
-return (
-  <ListFeat content={content} />
-)
-```
-#### ListFeat2
-###### Props -
-- `content` **(required)** - object containing text, headers, subheaders, and headShotdumplings
-  - `headShotdumplings` - array containing objects. Each indice is an object with two keys. The first key is `content` which value is an object containing `header` and `image` keys. `header` is a string and `image` is an object with keys `url` (which value is a string) and key `altText` which value is a string. The second key of each indice is `filter` which value is a string.
-  - `type` **(required)** - required to render the correct listFeat. ListFeat2 must be `list_feat_2`
-- `motion` - boolean used to indicate whether or not motion should be used
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-###### Example -
-```
-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" }
-      },
-      filter: "default"
-    },
-    {
-      content: {
-        header: "Nemo enim ipsam",
-        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" }
-      },
-      filter: "default"
-    },
-    {
-      content: {
-        header: "Sed ut perspiciatis",
-        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" }
-      },
-      filter: "default"
-    }
-  ]
-};
-export const motion = {
-  motion: true,
-  motionDistance: "75px",
-  motionDirection: "bottom"
-};
-return (
-  <ListFeat content={content} motion={motion}/>
-)
-```
-#### ListFeat3
-###### 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
-  - `cards` - array containing objects. Each indice is an object with three keys. The first key is `image` which value is an object containing `url` and `altText` keys. `url` and `altText` both have strings as values. The second key of each indice is `header` which value is a string. The third key of each indice is `link` which value is an object of `url` and `text`. `url` and `text` both have strings as values.
-  - `type` **(required)** - required to render the correct listFeat. ListFeat3 must be `list_feat_3`
-- `motion` - boolean used to indicate whether or not motion should be used
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-###### Example -
-```
-const content = {
-  header: "Hello everyone! This is a header. Enjoy!",
-  subheader: "This is truly wonderful.",
-  type: "list_feat_3",
-  cards: [
-    {
-      image: { url: "https://fpoimg.com/400x300", altText: "FPO Image" },
-      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."
-    },
-    {
-      image: { url: "https://fpoimg.com/400x300", 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."
-    },
-    {
-      image: { url: "https://fpoimg.com/400x300", altText: "FPO Image" },
-      header: "Here is a title! Woooo",
-      link: {
-        url: "/#",
-        text: "Link"
-      },
-      text:
-        " Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
-    }
-  ]
-};
-const motion = {
-  motion: true,
-  motionDistance: "75px",
-  motionDirection: "bottom"
-};
-return (
-  <ListFeat content={content} motion={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
-  - `dumplings` - array containing objects. Each indice is an object with four keys. The first key of each indice is `header` which value is a string. The second key of each indice is `link` which value is an object of `url`. `url` has a string as a value. The third key of each indice is `size` which has a string as a value. The fourth key of each indice is `icon` which value is an object containing `type` and `size` keys. `type` and `size` both have strings as values.
-  - `type` **(required)** - required to render the correct listFeat. ListFeat4 must be `list_feat_3`
-- `motion` - boolean used to indicate whether or not motion should be used
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-###### Example -
-```
-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" }
-    },
-    {
-      header: "Nemo enim ipsam voluptatem",
-      link: { url: "/#" },
-      size: "small",
-      icon: { type: "enclosed-check-dark-48px", size: "48px" }
-    },
-    {
-      header: "Sed ut perspiciatis, unde omnis",
-      link: { url: "/#" },
-      size: "small",
-      icon: { type: "enclosed-check-dark-48px", size: "48px" }
-    }
-  ]
-};
-const motion = {
-  motion: true,
-  motionDistance: "75px",
-  motionDirection: "bottom"
-};
-return (
-  <ListFeat content={content} motion={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 containing objects. Each indice is an object with two keys. The first key is `header` which has a string as a value. The second key is `text` which has a string as a value.
-  - `type` **(required)** - required to render the correct listFeat. ListFeat5 must be `list_feat_3`
-- `motion` - boolean used to indicate whether or not motion should be used
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-###### Example -
-```
-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>"
-    },
-    {
-      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>"
-    },
-    {
-      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>"
-    },
-    {
-      header: "Good design is innovative",
-      text:
-        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
-    }
-  ]
-};
-const motion = {
-  motion: true,
-  motionDistance: "75px",
-  motionDirection: "bottom"
-};
-return (
-  <ListFeat content={content} motion={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
-  - `type` **(required)** - required to render the correct listFeat. ListFeat6 must be `list_feat_3`
-- `motion` - boolean used to indicate whether or not motion should be used
-- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
-###### Example -
-```
-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>"
-  ]
-};
-const motion = {
-  motion: true,
-  motionDistance: "75px",
-  motionDirection: "bottom"
-};
-return (
-  <ListFeat content={content} motion={motion}/>
-)
-```
-#### ListFeat7
-###### Props -
-- `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
-  - `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.
-- `motion` - boolean used to indicate whether or not motion should be used
-###### Example -
-```
-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."
-    }
-  ]
-};
-export const motion = {
-  motion: true,
-  motionDistance: "75px",
-  motionDirection: "bottom"
-};
-return (
-  <ListFeat content={content} motion={motion} />
-)
-```
-#### EventCard
-###### Props -
-- `content` **(required)** - object used for delivering content strings to the EventCard
-  - `date` - string that generates the dates of the event
-  - `year` - string that generates the year of the event
-  - `industry` - string that indicates which industry the event applies to (i.e 'construction')
-  - `industryLabel` - a string to generate the label that preceedes the industry text
-  - `name` - a string used to indicate the name of the event
-  - `location` - a string used for indicating the location of the event, can also be used for event description
-  - `link` - an object for generating the link that the card sends the user to
-    - `url` - string that creates the `href` or `to` props depending on whether an `<a>` or React Router `<NavLink>` is generated
-  - `images` - object for generating the 95px x 95px image
-    - `url` - source of the image
-    - `altText` - alt string for the image
-###### Example -
-```
-const date = "Nov 18 - Nov 19";
-const year = "2019";
-const image = { url: "http://fpoimg.com/95x95" };
-const industry = "Construction";
-const industryLabel = "Industry";
-const name = "Trimble Digital Construction Summit - The Bridge to BIM";
-const location = "Tivoli Hotel and Congress Center, Copenhagen";
-const content = {
-  date,
-  year,
-  image,
-  industry,
-  industryLabel,
-  name,
-  location,
-  link: { url: "/wut" }
-};
-return (
-  <div style={{ maxWidth: "1200px", margin: "auto", padding: "0 32px" }}>
-    <EventCard content={content} />
-  </div>
-)
-```
-#### SupportCard -
-- `content` **(required)** - object used for delivering content strings to the SupportCard
-  - `header` - string for generating header text
-  - `headerLabel` - string that preceeds the header text with an added colon
-  - `subHeader` - string for generating sub-header text
-  - `subHeaderLabel` - string that preceeds the sub-header text with an added colon
-  - `product` - product name that succeeds the sub-header
-  - `sections` - array of objects with `value` and `format` strings for generating columns
-    - -
+#Luna React Component Library
+The Luna 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. Using this library requires that the Terra React Component Library is also installed, which can be done with `npm i --save terra-component-lib`.
+## 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
+## Luna Organisms
+#### 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
+  - `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
+- `contentSide` - string that indicates whether content is on the `right` or `left` side of the component. Defaults to `right`.
+- theme - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+- `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.
+###### 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 content = {
+  images,
+  ctas,
+  header: 'Design',
+  text: 'I am text'
+}
+return (
+<Hero1
+    content={content}
+    motion
+    theme='theme-2'
+  />
+);
+```
+#### Hero2
+###### Props -
+- content **(required)** - object containing images, ctas, headers, subheaders, button
+  - `images` **(required)** - an 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` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+- `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`**
+###### 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.",
+  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"
+    }
+  },
+}
+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
+    - `uuid` - string used for rendering Vidyard video embeds
+  - `vidyard` - boolean for indicating that a Vidyard component should be rendered
+  - `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+  - `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.
+---
+#### Hero4/Hero5
+###### 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
+  - `image` - object for generating <img> element with url and altText strings
+- `zIndex` - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
+- `theme` - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
+- `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 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'
+}
+<Hero4
+  content={content}
+  motion
+  theme='theme-1'
+/>
+```
+---
+#### Hero6
+###### 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
+  - `text` **(required)** - string for generating body 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
+  - `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
+- `imageSide` - string used for indicating the side of the page that the image should render on. Defaults to right.
+- `theme` - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
+- `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 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',
+  text: 'Text!'
+}
+return (
+<Hero6
+    imageSide="left"
+    content={content}
+    motion
+    theme='theme-4'
+  />
+);
+```
+#### FilterHero
+###### Props -
+- `header` - string for generating header text
+- `text` - string for generating body text.
+- `dropdowns` - an array used for generating Dropdown components - see example for structuring
+- `checkboxes` - an array used for generating Checkbox components - see example for structuring
+- `handleDropdownChange` - method used for handling new dropdown selections - takes the new selection and the associated name of the dropdown from the event object arguments.
+- `handleCheckboxChange` - method 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.
+###### 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
+- `image` **(required)** - object consisting of `url` and `altText` strings.
+- `backgroundImage` - url string that points to a background image address
+- `backgroundPosition` - string indicating where the background image appears. Options are `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `right`, `left` and `center`.
+- `backgroundImageWidth` - number indicating the width of the background image in pixels
+- `backgroundImageHeight` - number indicating the height of the background image in pixels
+- `backgroundOffsetY` - number indicating the offset of the background image on the Y axis
+- `backgroundOffsetX` - number indicating the offset of the background image on the X axis
+- `parallaxPosition` - number indicating the current scrollY position of the page, should come from Redux
+- `zIndex` - number indicating the desired `z-index` of the background image.- `backgroundColor` - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+- `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: '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'
+  }
+}
+const background = {
+  backgroundImage: './image.png',
+  backgroundPosition: 'right',
+  backgroundImageWidth: 900,
+  backgroundImageHeight: 900,
+  backgroundOFfsetY: 0,
+  backgroundOffsetX: 100
+}
+return (
+  <Feat1
+    content={content}
+    motion
+    background={background}
+    parallaxPosition={this.props.parallaxPosition}
+    theme='theme-2',
+    id={data.id}
+  />
+);
+```
+---
+#### Feat2A
+###### Props -
+- `image` **(required)** - object with `url` and `altText` strings
+- `<AccordionFold>` **(required)** - child component for rendering folds in the `<Accordion>` component with each fold taking a `header` string as a prop
+- `zIndex` - number indicating the desired `z-index` of the background image.- `backgroundColor` - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+- `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"
+};
+return (
+  <Feat2A
+    image={mockImage}
+    header="Good design is a thing, apparently."
+    text="Veniam laboris laboris consequat et."
+  >
+    <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 (see Example)
+- `cards` **(required)** - array of objects used for generating `IconListItem` components with `text` and `header` strings
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+- `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."
+    }
+  ]
+}
+return (
+  <Feat2B
+    content={content}
+    motion
+    theme='theme-2'
+    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
+      - `url` - string pointing to the image source
+      - `altText` - string used for assisted alternate text for screen readers
+    - `desktop` - object containing the desktop image source and alt text
+      - `url` - string pointing to the image source
+      - `altText` - 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` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+###### Example -
+```
+const content = {
+  header: "Feat 3 Header",
+  subHeader: "This is sub-header text",
+  images: {
+    mobile: {
+      url: "www.image.com/mobile-image.jpg",
+      altText: "image alt text
+    },
+    desktop: {
+      url: "www.image.com/desktop-image.jpg",
+      altText: "image alt text
+    }
+  },
+  theme: "theme-2",
+  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
+- background - object containing `backgroundImage` which value is a string, `backgroundPosition` which value is a number, `backgroundColor` which value is a string, `backgroundOffsetX` which value is a number, `backgroundOffsetY` which value is a number, `backgroundImageHeight` which value is a number and `backgroundImageWidth` which value is anumber
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+- `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.
+###### 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.",
+  const ctas = {
+    ctaOne: {
+      text: "Button",
+      url: "/#"
+    },
+    ctaTwo: {
+      text: "Button",
+      url: "/#"
+    }
+  };
+}
+return (
+  <Feat4
+    content={content}
+  />
+);
+```
+---
+#### Feat5
+###### Props -
+- `dumplings` **(required)** - an array of objects used for generating `<Dumpling>` components; see the Terra component library for requirements
+- `type` - string used to determine whether or not small or large dumplings are used (`'a'` is large, `'b'` is small)
+- `header` **(required)** - string used for generating header text
+- `subHeader` - string used for generating sub-header text
+- `backgroundImage` - url string that points to a background image address
+- `backgroundPosition` - string indicating where the background image appears. Options are `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `right`, `left` and `center`.
+- `backgroundImageWidth` - number indicating the width of the background image in pixels
+- `backgroundImageHeight` - number indicating the height of the background image in pixels
+- `backgroundOffsetY` - number indicating the offset of the background image on the Y axis
+- `backgroundOffsetX` - number indicating the offset of the background image on the X axis
+- `zIndex` - number indicating the desired `z-index` of the background image.- `backgroundColor` - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+- `className` - string that is interpolated into the organisms class for targeted styling and/or manipulation
+- `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.
+- `motionDirection` - string indicating the direction that the component should travel from as it fades in.
+- `motionDistance` - string indicating the distance that the component travels during motion
+###### Example -
+```
+const mockDumplings = [
+  {
+    header: "Dumplin'",
+    link: { url: "/#" },
+    size: "small",
+    icon: { type: "enclosed-check-dark-48px", size: "48px" }
+  },
+  {
+    header: "Dumplin'",
+    link: { url: "/#" },
+    size: "small",
+    icon: { type: "enclosed-check-dark-48px", size: "48px" }
+  }
+];
+return (
+  <Feat5
+    dumplings={mockDumplings}
+    type="a"
+    header="Design is design"
+    subHeader="It's like, this thing, you know?"
+  />
+);
+```
+---
+#### Feat6
+###### Props -
+- content **(required)** - object containing quotes, ctas, button
+  - quote (required) - object consisting of text, source, and sourceTitle strings
+  - `images` **(required)** - an 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.
+  - `header` **(required)** - string used for generating header text
+  - `subHeader` **(required)** - string used for generating sub-header text
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+- `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.
+###### Example -
+```
+const content = {
+  image:{
+    url: "http://fpoimg.com/800x800",
+    altText: "placeholder image"
+  },
+  quote:{
+    text: `Excepteur incididunt magna commodo amet est fugiat."`,
+    source: "Leonard Sciarra",
+    sourceTitle: "Senior Associate at Gensler, AIA, ASHRAE, LEED AP+"
+  },
+  cta:{
+    text: "CTA",
+    url: "/#"
+  },
+}
+return (
+  <Feat6
+    content={content}
+  />
+```
+---
+#### Feat7
+###### Props -
+- `content` **(required)** - array of objects use for generating 'cards' consisting of `header`, `text`, and `url` strings.
+- `header` **(required)** - string used for generating header text
+- `backgroundImage` - url string that points to a background image address
+- `backgroundPosition` - string indicating where the background image appears. Options are `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `right`, `left` and `center`.
+- `backgroundImageWidth` - number indicating the width of the background image in pixels
+- `backgroundImageHeight` - number indicating the height of the background image in pixels
+- `backgroundOffsetY` - number indicating the offset of the background image on the Y axis
+- `backgroundOffsetX` - number indicating the offset of the background image on the X axis
+- `zIndex` - number indicating the desired `z-index` of the background image.- `backgroundColor` - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+- `className` - string that is interpolated into the organisms class for targeted styling and/or manipulation
+- `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.
+- `motionDirection` - string indicating the direction that the component should travel from as it fades in.
+- `motionDistance` - string indicating the distance that the component travels during motion
+###### Example -
+```
+const content = [
+  {
+    header: "Design!",
+    text:
+      "Enim laborum ad anim laborum ad minim ipsum proident est cillum aliqua. Irure laboris aute ullamco ad Lorem et culpa id commodo quis sunt labore in id.",
+    url: "/#"
+  },
+  {
+    header: "Aesthetics!",
+    text:
+      "Enim laborum ad anim laborum ad minim ipsum proident est cillum aliqua.",
+    url: "/#"
+  }
+];
+return <Feat7 header="I am a header" content={content} />;
+```
+---
+#### ParallaxBackground
+###### Props -
+- `backgroundImage` - string for the URL that points to the background image to be rendered
+- `speed` - integer used for determining the speed of the parallax effect. Defaults to `2`. A speed of `1` will keep the background image fixed, while a speed of `2` will cause it to scroll at half speed.
+- `styles` - object of style properties that are passed to the parent container.
+- `children` - JSX passed inside the tags that will be rendered within the container and will scroll at normal speed.
+###### Example -
+```
+const backgroundImage = 'https://www.images.com/images/image.jpg
+return (
+  <ParallaxBackground
+    backgroundImage={backgroundImage}
+    styles={{padding: '0 40px'}}
+    speed={1.4}
+  >
+    <p>Content!</p>
+  </ParallaxBackground>
+)
+```
+#### NavBar
+###### Notes -
+This component uses the `react-slidedown` library for the innerpage navigation links in the `utilityNav`. The `link.url` string should be a reference to the name of the `<Element>` that wraps the cooresponding organism that the window should scroll to.
+###### Props -
+- `rightLinks` - array of objects used for generating links to the right of the search icon. Each object requires `url` and `text` strings.
+- `logo` **(required)** - object consisting of `url` and `altText` strings (for generating the logo image) in addition to a link object with a `url` string for generating the `href` property.
+- `divisionName` **(required)** - string used for generating the name of the Trimble division that is to the right of the logo.n
+- `navCTA` - object consiting of a `className` string for formating the button (see Terra buttons) and a `link` object with `url` and `text` strings used for generating the CTA in the lower right corner of the Nav
+- `navOptions` - array of objects used for generating the middle section of the nav. All objects will have a type indicating whether to render a (`MegaMenu`), a simple drop down of links (`miniMenus`), or a single link (`singleLink`). See examples below on how to load up these objects. The `MegaMenu` can both render a links both with and without subcategories.
+- `utilityNav` - object consisting of a `pageTitle` string as well as a `links` array of objects consisting of `text` and `url` strings. See example below.
+- `currentLanguage` - object with `region` and `language` strings that indicate the current region and language selected.
+- `languageSelectorData` - object consisting of data needed to populate the `LanguageSelector` component. See example below.
+- `setLanguage` - method used to set the region and language, which it takes as string key/values in an object as an argument
+- `location` - prop used to close the mobile menu when a user clicks on one of the rightLinks. In your project, pass in `location={this.props.location}`
+###### Example -
+```
+const rightLinks = [
+  {
+    url: "/#",
+    text: "Support"
+  }
+];
+const logo = {
+  url: Logo (should be imported in the application),
+  altText: 'Trimble Logo',
+  link: {
+    url: 'www.trimble.com'
+  }
+};
+const divisionName = 'Geospatial';
+const location = 'N. America';
+const navCTA = {
+  className: 'ter-button--primary--1',
+  link: {
+    url: '/#',
+    text: 'Contact Sales'
+  }
+}
+const location = this.props.location
+const utilityNav = {
+  pageTitle: "Trimble Accubid Enterprise",
+  links: [
+    {
+      text: "Product Anchor One",
+      url: "/#"
+    },
+    {
+      text: "Product Anchor Two",
+      url: "/#"
+    }
+  ]
+};
+const megaMenu = {
+  type: "mega menu",
+  bottomLink: {
+    url: "/#",
+    text: "All Products"
+  },
+  text: "Products",
+  links: [
+    {
+      text: "Mechanical",
+      links: [
+        {
+          url: "/#",
+          text: "BIM Collaboration"
+        },
+        {
+          url: "/#",
+          text: "MEP Content"
+        }
+      ]
+    },
+    {
+      text: "Electrical",
+      links: [
+        {
+          url: "/#",
+          text: "Design/Detailing"
+        },
+        {
+          url: "/#",
+          text: "Project Management"
+        }
+      ]
+    },
+    {
+      text: "Plumbing",
+      link: {url: "/#"}
+    },
+  ]
+};
+const miniMenus = [
+  {
+    type: "mini menu",
+    text: "Services",
+    links: [
+      {
+        url: "/#",
+        text: "Link One"
+      },
+      {
+        url: "/#",
+        text: "Link Two"
+      }
+    ]
+  },
+  {
+    type: "mini menu",
+    text: "Resources",
+    links: [
+      {
+        url: "/#",
+        text: "Link One"
+      },
+      {
+        url: "/#",
+        text: "Link Two"
+      }
+    ]
+  }
+];
+const singleLink = {
+  type: "link",
+  url: "/#",
+  text: "Process"
+};
+const languageSelectorData = {
+  labels: {
+    currentRegion: "Current Region",
+    cancel: "Cancel",
+    save: "Save"
+  },
+  regions: [
+    {
+      region: "North America",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    },
+    {
+      region: "UK and Middle East",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    },
+    {
+      region: "France",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    },
+    {
+      region: "Germany and Austria",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    },
+    {
+      region: "Switzerland",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    }
+  ],
+  currentRegionLanguage: {
+    region: "UK and Middle East",
+    language: "EN-UK"
+  },
+  activeRegion: {
+    region: "UK and Middle East",
+    language: "EN: English"
+  },
+  companyDivision: "MEP"
+};
+return (
+  <NavBar
+    location={location}
+    rightLinks={rightLinks}
+    currentLanguage={{ region: "N. America", language: "EN: English" }}
+    logo={logo}
+    divisionName="MEP"
+    navCTA={navCTA}
+    navOptions={[megaMenu, ...miniMenus, singleLink]}
+    utilityNav={utilityNav}
+    languageSelectorData={languageSelectorData}
+  />
+)
+```
+---
+#### Footer
+###### Props -
+- `logo` - object consisting of a `url` and `altText` strings
+- `trimbleText` - string from generating the main content on the left side
+- `trimbleLink` - object consisting of `text` and `url` strings for generating a link below the left-side text
+- `siteText` - text string that appears above the secondary link
+- `siteLink` - object consisting of `url` and `text` string for generating the secondary link on the left side
+- `linksOne` - array of objects consisting of `url` and `text` strings for generating the links that take up the left-center of the footer space
+- `linksTwo` - array of objects consisting of `url` and `text` strings for generating the links that take up the right-center of the footer space
+- `socialLinks` - array of objects consiting of an `icon` object (`url` and `altText` strings) and a link object (`url` string)
+- `legalStuff` - array of objects consisting of `url` and `text` strings for generating the links that take up the bottom of the footer space. The `url` string is optional, as the component will simply render a `<p>` tags instead.
+###### Example -
+```
+const logo = {
+    url: Logo,
+    altText: "fpo"
+  };
+  const trimbleText =
+    "Lorem ipsum dolor sit amet, consectetur adipisicing 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 ea commodo consequat.";
+  const trimbleLink = {
+    url: "/#",
+    text: "More About Trimble"
+  };
+  const siteText = "Text for secondary link information";
+  const siteLink = {
+    url: "/#",
+    text: "link.trimble.com"
+  };
+  const linksOne = [
+    { url: "/#", text: "Label Left" },
+    { url: "/#", text: "Label Left" },
+    { url: "/#", text: "Label Left" }
+  ];
+  const linksTwo = [
+    { url: "/#", text: "Label Right" },
+    { url: "/#", text: "Label Right" },
+    { url: "/#", text: "Label Right" }
+  ];
+  const socialLinks = [
+    {
+      icon: {
+        url: Facebook,
+        altText: "fpo"
+      },
+      link: {
+        url: "/#"
+      }
+    },
+    {
+      icon: {
+        url: Twitter,
+        altText: "fpo"
+      },
+      link: {
+        url: "/#"
+      }
+    },
+    {
+      icon: {
+        url: YouTube,
+        altText: "fpo"
+      },
+      link: {
+        url: "/#"
+      }
+    },
+    {
+      icon: {
+        url: LinkedIn,
+        altText: "fpo"
+      },
+      link: {
+        url: "/#"
+      }
+    },
+    {
+      icon: {
+        url: Facebook,
+        altText: "fpo"
+      },
+      link: {
+        url: "/#"
+      }
+    },
+    {
+      icon: {
+        url: Twitter,
+        altText: "fpo"
+      },
+      link: {
+        url: "/#"
+      }
+    },
+    {
+      icon: {
+        url: YouTube,
+        altText: "fpo"
+      },
+      link: {
+        url: "/#"
+      }
+    },
+    {
+      icon: {
+        url: LinkedIn,
+        altText: "fpo"
+      },
+      link: {
+        url: "/#"
+      }
+    }
+  ];
+  const privacyStatement = {
+    url: "/#",
+    text: "Privacy Statement"
+  };
+  const termsOfUse = {
+    url: "/#",
+    text: "Terms of Use"
+  };
+  const copyright = {
+    url: "/#",
+    text: "Copyright"
+  };
+  const legalStuff = [
+    {
+      url: "/#",
+      text: "Terms of Use"
+    },
+    {
+      url: "/#",
+      text: "Privacy Statement"
+    },
+    { text: "© 2019, Trimble Inc." }
+  ];
+  return (
+    <Footer
+      trimbleText={trimbleText}
+      trimbleLink={trimbleLink}
+      siteText={siteText}
+      siteLink={siteLink}
+      linksOne={linksOne}
+      linksTwo={linksTwo}
+      logo={logo}
+      socialLinks={socialLinks}
+      legalStuff={legalStuff}
+    />
+  );
+```
+#### ListFeat1
+###### Props -
+- `content` **(required)** - object containing images, ctas, text, variant, headers, subheaders, button, link, videos
+  - `cardOne` - an object that contains `header` and `text` keys with values that are strings.
+  - `cardTwo` - an object that contains `header` and `text` and `cta`. `header` has a value of a string. `text` has a value of a string. `cta` has a value of an object with key `url` with value of a string and key `text` with value of a string.
+  - `type` **(required)** - required to render the correct listFeat. ListFeat1 must be `list_feat_1`
+  - `sort` - boolean indicating whether or not cards should be sorted alphabetically by header
+- `motion` - boolean used to indicate whether or not motion should be used
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+###### Example -
+```
+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!" }
+  },
+  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!" }
+  }
+};
+return (
+  <ListFeat content={content} />
+)
+```
+#### ListFeat2
+###### Props -
+- `content` **(required)** - object containing text, headers, subheaders, and headShotdumplings
+  - `headShotdumplings` - array containing objects. Each indice is an object with two keys. The first key is `content` which value is an object containing `header` and `image` keys. `header` is a string and `image` is an object with keys `url` (which value is a string) and key `altText` which value is a string. The second key of each indice is `filter` which value is a string.
+  - `type` **(required)** - required to render the correct listFeat. ListFeat2 must be `list_feat_2`
+- `motion` - boolean used to indicate whether or not motion should be used
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+###### Example -
+```
+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" }
+      },
+      filter: "default"
+    },
+    {
+      content: {
+        header: "Nemo enim ipsam",
+        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" }
+      },
+      filter: "default"
+    },
+    {
+      content: {
+        header: "Sed ut perspiciatis",
+        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" }
+      },
+      filter: "default"
+    }
+  ]
+};
+export const motion = {
+  motion: true,
+  motionDistance: "75px",
+  motionDirection: "bottom"
+};
+return (
+  <ListFeat content={content} motion={motion}/>
+)
+```
+#### ListFeat3
+###### 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
+  - `cards` - array containing objects. Each indice is an object with three keys. The first key is `image` which value is an object containing `url` and `altText` keys. `url` and `altText` both have strings as values. The second key of each indice is `header` which value is a string. The third key of each indice is `link` which value is an object of `url` and `text`. `url` and `text` both have strings as values.
+  - `type` **(required)** - required to render the correct listFeat. ListFeat3 must be `list_feat_3`
+- `motion` - boolean used to indicate whether or not motion should be used
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+###### Example -
+```
+const content = {
+  header: "Hello everyone! This is a header. Enjoy!",
+  subheader: "This is truly wonderful.",
+  type: "list_feat_3",
+  cards: [
+    {
+      image: { url: "https://fpoimg.com/400x300", altText: "FPO Image" },
+      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."
+    },
+    {
+      image: { url: "https://fpoimg.com/400x300", 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."
+    },
+    {
+      image: { url: "https://fpoimg.com/400x300", altText: "FPO Image" },
+      header: "Here is a title! Woooo",
+      link: {
+        url: "/#",
+        text: "Link"
+      },
+      text:
+        " Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
+    }
+  ]
+};
+const motion = {
+  motion: true,
+  motionDistance: "75px",
+  motionDirection: "bottom"
+};
+return (
+  <ListFeat content={content} motion={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
+  - `dumplings` - array containing objects. Each indice is an object with four keys. The first key of each indice is `header` which value is a string. The second key of each indice is `link` which value is an object of `url`. `url` has a string as a value. The third key of each indice is `size` which has a string as a value. The fourth key of each indice is `icon` which value is an object containing `type` and `size` keys. `type` and `size` both have strings as values.
+  - `type` **(required)** - required to render the correct listFeat. ListFeat4 must be `list_feat_3`
+- `motion` - boolean used to indicate whether or not motion should be used
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+###### Example -
+```
+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" }
+    },
+    {
+      header: "Nemo enim ipsam voluptatem",
+      link: { url: "/#" },
+      size: "small",
+      icon: { type: "enclosed-check-dark-48px", size: "48px" }
+    },
+    {
+      header: "Sed ut perspiciatis, unde omnis",
+      link: { url: "/#" },
+      size: "small",
+      icon: { type: "enclosed-check-dark-48px", size: "48px" }
+    }
+  ]
+};
+const motion = {
+  motion: true,
+  motionDistance: "75px",
+  motionDirection: "bottom"
+};
+return (
+  <ListFeat content={content} motion={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 containing objects. Each indice is an object with two keys. The first key is `header` which has a string as a value. The second key is `text` which has a string as a value.
+  - `type` **(required)** - required to render the correct listFeat. ListFeat5 must be `list_feat_3`
+- `motion` - boolean used to indicate whether or not motion should be used
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+###### Example -
+```
+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>"
+    },
+    {
+      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>"
+    },
+    {
+      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>"
+    },
+    {
+      header: "Good design is innovative",
+      text:
+        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
+    }
+  ]
+};
+const motion = {
+  motion: true,
+  motionDistance: "75px",
+  motionDirection: "bottom"
+};
+return (
+  <ListFeat content={content} motion={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
+  - `type` **(required)** - required to render the correct listFeat. ListFeat6 must be `list_feat_3`
+- `motion` - boolean used to indicate whether or not motion should be used
+- `theme` - string indicating the theme that styles the organism. Options are `theme-1`, `theme-2`, `theme-3`, `theme-4`, `theme-5`.
+###### Example -
+```
+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>"
+  ]
+};
+const motion = {
+  motion: true,
+  motionDistance: "75px",
+  motionDirection: "bottom"
+};
+return (
+  <ListFeat content={content} motion={motion}/>
+)
+```
+#### ListFeat7
+###### Props -
+- `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
+  - `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.
+- `motion` - boolean used to indicate whether or not motion should be used
+###### Example -
+```
+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."
+    }
+  ]
+};
+export const motion = {
+  motion: true,
+  motionDistance: "75px",
+  motionDirection: "bottom"
+};
+return (
+  <ListFeat content={content} motion={motion} />
+)
+```
+#### EventCard
+###### Props -
+- `content` **(required)** - object used for delivering content strings to the EventCard
+  - `date` - string that generates the dates of the event
+  - `year` - string that generates the year of the event
+  - `industry` - string that indicates which industry the event applies to (i.e 'construction')
+  - `industryLabel` - a string to generate the label that preceedes the industry text
+  - `name` - a string used to indicate the name of the event
+  - `location` - a string used for indicating the location of the event, can also be used for event description
+  - `link` - an object for generating the link that the card sends the user to
+    - `url` - string that creates the `href` or `to` props depending on whether an `<a>` or React Router `<NavLink>` is generated
+  - `images` - object for generating the 95px x 95px image
+    - `url` - source of the image
+    - `altText` - alt string for the image
+###### Example -
+```
+const date = "Nov 18 - Nov 19";
+const year = "2019";
+const image = { url: "http://fpoimg.com/95x95" };
+const industry = "Construction";
+const industryLabel = "Industry";
+const name = "Trimble Digital Construction Summit - The Bridge to BIM";
+const location = "Tivoli Hotel and Congress Center, Copenhagen";
+const content = {
+  date,
+  year,
+  image,
+  industry,
+  industryLabel,
+  name,
+  location,
+  link: { url: "/wut" }
+};
+return (
+  <div style={{ maxWidth: "1200px", margin: "auto", padding: "0 32px" }}>
+    <EventCard content={content} />
+  </div>
+)
+```
+#### SupportCard -
+- `content` **(required)** - object used for delivering content strings to the SupportCard
+  - `header` - string for generating header text
+  - `headerLabel` - string that preceeds the header text with an added colon
+  - `subHeader` - string for generating sub-header text
+  - `subHeaderLabel` - string that preceeds the sub-header text with an added colon
+  - `product` - product name that succeeds the sub-header
+  - `sections` - array of objects with `value` and `format` strings for generating columns
+    - -