@trimble-creative-strategy/luna-component-lib v0.6.223

#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.

Luna Organisms

Hero1 -

Props -

• images (required) - object consisting of desktop, tablet, and mobile image objects with url and altText strings
• header (required) - string for generating header text
• text - string for generating body text
• ctas - object used to populate a <CTALinkSection>
• contentSide - string that indicates whether content is on the right or left side of the component. Defaults to right.
• backgroundImage - url string that points to a background image address
• 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
• insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
• 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" }
};

return (
  <Hero1
    images={images}
    header="Design is design."
    text="Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis."
    ctas={ctas}
  />
);

Hero2

Props -

• header (required) - string used for generating header text
• subHeader - string used for generating sub header text
• text (required) - string used for generating body text
• ctas - object used for generating a <CTALinkSection> or <CTARow>
• imageSide - string used for indicating the side of the page that the image should render on. Defaults to right.
• images - object used for populating adaptive images. Requires a imageThreeXTwo, imageFourXThree, and imageOneXOne key/value pairings with url and altText strings.
• variant - string of either 'a' or 'b' for determing whether or not to use a <CTALinkSection> or <CTARow>
• 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
• insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
• 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 images = {
  imageThreeXTwo: {
    url: "https://fpoimg.com/600x400",
    altText: "placeholder"
  },
  imageFourXThree: {
    url: "https://fpoimg.com/800x600",
    altText: "placeholder"
  },
  imageOneXOne: {
    url: "https://fpoimg.com/500x500",
    altText: "placeholder"
  }
};

const ctas = {
  ctaOne: {
    text: "Button",
    url: "/#"
  },
  ctaTwo: {
    text: "Button",
    url: "/#"
  },
  subCTA: {
    text: "Button",
    url: "/#"
  }
};

return (
  <Hero2
    imageSide="left"
    images={images}
    header="Good design is innovative."
    text="Ipsum anim laboris dolore incididunt proident quis tempor."
    ctas={ctas}
  />
);

Hero3

Props -

• images (required) - object consisting of two image objects that have url and altText strings. The first object is imageFourByOne and the second is imageTwoByOne
• header (required) - string used for generating header text
• subHeader (required) - string used for generating sub-header text
• backgroundImage - url string that points to a background image address
• 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 animation to render the component.

Example -

const images = {
  imageFourByOne: {
    url: "http://fpoimg.com/1600x400?text=4:1",
    altText: "placeholder image"
  },
  imageTwoByOne: {
    url: "http://fpoimg.com/1600x800?text=2:1",
    altText: "placeholder image"
  }
};

return (
  <Hero3
    images={images}
    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."
  />
);

Hero4

Props -

• video (required) - object consisting of url (string), autoPlay (boolean), and allowFulScreen (boolean) variables.
• header (required) - string for generating header text
• text (required) - string for generating body text
• ctas - object for generating a <CTALinkSection> component
• 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
• insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
• 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 mockCTALinks = {
  ctaOne: {
    text: "Button",
    url: "/#"
  },
  ctaTwo: {
    text: "Button",
    url: "/#"
  },
  subCTA: {
    text: "Button",
    url: "/#"
  }
};

const mockVideo = {
  url: "https://www.youtube.com/embed/UY7r0juBF8Y",
  allowFullScreen: "true"
};

return (
  <Hero4
    video={mockVideo}
    header="Design is design."
    text="Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis."
    ctas={mockCTALinks}
    allowFullScreen={true}
  />
);

Hero5

Props -

• 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 <CTALinkSection> component
• 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
• insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
• 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 mockCTALinks = {
  ctaOne: {
    text: "Button",
    url: "/#"
  },
  ctaTwo: {
    text: "Button",
    url: "/#"
  },
  subCTA: {
    text: "Button",
    url: "/#"
  }
};

const mockImage = {
  url: "./1-to-1.png",
  altText: "placeholder"
};

<Hero5
  image={mockImage}
  header="Design is design."
  subHeader="Nulla ex commodo reprehenderit aliquip."
  text="Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis."
  ctas={mockCTALinks}
/>

Hero6

Props -

• 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 <CTALinkSection> component
• images (required) - object consisting of three image objects, each with url and altText strings. The objects are imageThreeByTwo, imageFourByThree, and imageOneByOne.
• imageSide - string used for indicating the side of the page that the image should render on. Defaults to right.
• backgroundImage - url string that points to a background image address
• 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
• insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
• 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 images = {
  imageThreeByTwo: {
    url: "http://fpoimg.com/2400x1600?text=3:2",
    altText: "placeholder image"
  },
  imageFourByThree: {
    url: "http://fpoimg.com/1600x1200?text=4:3",
    altText: "placeholder image"
  },
  imageOneByOne: {
    url: "http://fpoimg.com/1600x1600?text=1:1",
    altText: "placeholder image"
  }
};

const ctas = {
  ctaOne: {
    url: "/#",
    text: "Button"
  },
  ctaTwo: {
    url: "/#",
    text: "Button"
  }
};
return (
  <Hero6
    imageSide="left"
    images={images}
    header="Good design is innovative."
    text="Do in anim ex excepteur magna excepteur mollit pariatur sit sunt ullamco velit occaecat."
    ctas={ctas}
  />
);

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.
• backgroundImage - url string that points to a background image address
• 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
• insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()

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}
    insertHTML={true}
    dropdowns={dropdowns}
    checkboxes={checkboxes}
    handleDropdownChange={this.handleDropdownChange}
    handleCheckboxChange={this.handleCheckboxChange}
    backgroundColor='#5e5e5e'
  />
)

Feat1

Props -

• 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.
• variant (required) - string consisting of either a or b to indicate which version of Feat1 to render in terms of positioning.
• 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
• insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
• 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 mockheader = "Design is good.";
const mockSubheader = "You should know about it, maybe?";
const mockText =
  "Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur.";
const mockCTA = { url: "/#", text: "Button" };
const mockImage = {
  url: "https://fpoimg.com/500x500",
  altText: "placeholder"
};

return (
  <Feat1
    header={mockheader}
    subHeader={mockSubheader}
    text={mockText}
    cta={mockCTA}
    variant="a"
    image={mockImage}
  />
);

Feat2

Props -

• header (required) - string that generates header text
• image (required) - object with url and altText strings
• text (required) - string that generates body text
• <AccordionFold> (required) - child component for rendering folds in the <Accordion> component with each fold taking a header string as a prop
• 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
• insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
• 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 -

import { AccordionFold } from 'terra-component-lib'

const mockImage = {
  url: "https://fpoimg.com/500x500",
  altText: "Placeholder image"
};

return (
  <Feat2
    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>
);

Feat3

Props -

• header (required) - string that generates header text
• images (required) - object with desktop, tablet, and mobile sub-objects with url and altText strings
• text - string that generates body text
• content (required) - an array of objects with header and text strings
• cta (required) - object consisting of url and text strings for generating a <ButtonLink>
• 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
• insertCardHTML - boolean that indicates if text strings for <IconListItem /> should be passed as innerHTML (true) or into a <p> tag as a string. Used when Drupal is returning WYSIWYG html blobs.
• insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
• 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 header = "Good design is aesthetic.";

const text =
  "Fugiat ad est sit non elit nulla laborum occaecat proident non.";

const content = [
  {
    header: "Good design is innovative",
    text:
      "Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit."
  },
  {
    header: "Good design is innovative",
    text:
      "Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit."
  }
];

const cta = { url: "/#", text: "Sub-CTA" };

const images = {
  desktop: { url: "https://fpoimg.com/600x900", altText: "placeholder" },
  tablet: { url: "https://fpoimg.com/800x600", altText: "placeholder" },
  mobile: { url: "https://fpoimg.com/500x500", altText: "placeholder" }
};

return (
  <Feat3
    header={header}
    text={text}
    content={content}
    cta={cta}
    images={images}
  />
);

Feat4

Props -

• header (required) - string that generates header text
• text - string that generates sub-header text, can be an HTML blob
• variant (required) - string of either 'a', 'b', or 'c' for determining what kind of cards are generated
• text - string that generates body text
• content (required) - an array of objects with header and text strings and a link object with url and text strings. Variants 'a' and 'b' do not require a link.
• columns (required) - a number used to determing how many columns are on the page for card/tile generation. Typically 2, 3, or 4.
• image - object with 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
• 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
• insertCardHTML - boolean that indicates if text strings for <IconListItem /> should be passed as innerHTML (true) or into a <p> tag as a string. Used when Drupal is returning WYSIWYG html blobs.
• insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
• 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 mockContent = [
  {
    header: "Design is good. Period.",
    text:
      "Forget the fat lady! You're obsessed with the fat lady! Drive us out of here!",
    link: {
      url: "/#",
      text: "Button"
    }
  },
  {
    header: "Design is good. Period.",
    text:
      "Forget the fat lady! You're obsessed with the fat lady! Drive us out of here!",
    link: {
      url: "/#",
      text: "Button"
    }
  }
];

return (
  <Feat4
    header="Good design is good."
    content={mockContent}
    variant="a"
    columns={2}
    image={{
      url: "https://fpoimg.com/600x400",
      altText: "placeholder image"
    }}
  />
);

Feat4Flex

Props -

• cards (required) - array of content for Terra Cards or LogoDumplings
• 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
• fallbackImage - source for a fallback image if images break

Example -

const cards = [
  {
    image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
    header: "Card",
    link: {
      url: "/#",
      text: "Link"
    },
    text: "Ut in amet id proident commodo officia cillum."
  },
  {
    image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
    header: "Card",
    link: {
      url: "/#",
      text: "Link"
    },
    text: "Ut in amet id proident commodo officia cillum."
  },
  {
    image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
    header: "Card",
    link: {
      url: "/#",
      text: "Link"
    },
    text: "Ut in amet id proident commodo officia cillum."
  },
]

return <Feat4Flex cards={cards} backgroundColor="#f2f2f2" />;

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 -

• ctas {required} - used for generating ctaOne and ctaTwo from <CTALinkSection>
• header (required) - string 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 mockCTALinks = {
  ctaOne: {
    text: "Button",
    url: "/#"
  },
  ctaTwo: {
    text: "Button",
    url: "/#"
  }
};

return <Feat6 header="I am a header" ctas={mockCTALinks} />;

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} />;

Feat8

Props -

• header - string used for generating header text
• subHeader - string used for generating sub-header text;
• buttonLink - object used for generating a <ButtonLink> with url and text strings
• ctas - array of cta objects with text and url strings for generating CTAs below the headers
• cards (required) - array of objects used for generating <Card> components
• 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
• insertCardHTML - boolean that indicates if text strings for <Card /> should be passed as innerHTML (true) or into a <p> tag as a string. Used when Drupal is returning WYSIWYG html blobs.
• 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
• CTAType- string used for specifying the type of <Button> to render. Defaults to'ter-button--primary--1'
• fallbackImage - source for a fallback image if images break

Example -

const mockButtonLink = {
  url: "/home",
  text: "Home"
};

const cards = [
  {
    image: {
      url: "https://fpoimg.com/700x300",
      altText: "Placeholder"
    },
    header: "Card header",
    text:
      "Irure cillum ad culpa ad non cillum irure dolore ad nostrud aliqua mollit"
  },
  {
    image: {
      url: "https://fpoimg.com/700x300",
      altText: "Placeholder"
    },
    header: "Card header",
    text:
      "Irure cillum ad culpa ad non cillum irure dolore ad nostrud aliqua mollit."
  },
  {
    image: {
      url: "https://fpoimg.com/700x300",
      altText: "Placeholder"
    },
    header: "Card header",
    text:
      "Irure cillum ad culpa ad non cillum irure dolore ad nostrud aliqua mollit."
  },
  {
    image: {
      url: "https://fpoimg.com/700x300",
      altText: "Placeholder"
    },
    header: "Card header",
    text:
      "Irure cillum ad culpa ad non cillum irure dolore ad nostrud aliqua mollit."
  }
];

return (
  <Feat8
    header="Good design is innovative."
    buttonLink={mockButtonLink}
    cards={cards}
  />
);

Feat9

Props -

• imageSide - string used for indicating the side of the page that the image should render on. Defaults to right.
• image - object with url and altText strings
• quote (required) - object consisting of text, source, and sourceTitle strings
• cta - object consisting of url and text strings for generating a <ButtonLink>
• 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
• insertHTML - boolean used to indicate if the quote string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
• 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

Examples -

const image = {
  url: "http://fpoimg.com/800x800",
  altText: "placeholder image"
};

const quote = {
  text: "Excepteur incididunt magna commodo amet est fugiat.",
  source: "Leonard Sciarra",
  sourceTitle: "Senior Associate at Gensler, AIA, ASHRAE, LEED AP+"
};

return <Feat9 imageSide="right" image={image} quote={quote} />;

Feat10

Props -

• header - string used for generating header text
• children - <TabsPanel> components that are passed to the organism as children. See Terra docs for details.
• 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

Examples -

const cardsOne = [
  {
    image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
    header: "Card One",
    link: {
      url: "/#",
      text: "Link One"
    },
    text: "Ut in amet id proident commodo officia cillum."
  },
  {
    image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
    header: "Card Two",
    link: {
      url: "/#",
      text: "Link Two"
    },
    text: "Ut in amet id proident commodo officia cillum."
  },
  {
    image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
    header: "Card Three",
    link: {
      url: "/#",
      text: "Link Three"
    },
    text: "Ut in amet id proident commodo officia cillum."
  }
];

const cardsTwo = [
  {
    image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
    header: "Card Four",
    link: {
      url: "/#",
      text: "Link Four"
    },
    text: "Ut in amet id proident commodo officia cillum."
  },
  {
    image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
    header: "Card Five",
    link: {
      url: "/#",
      text: "Link Five"
    },
    text: "Ut in amet id proident commodo officia cillum."
  },
  {
    image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
    header: "Card Six",
    link: {
      url: "/#",
      text: "Link Six"
    },
    text: "Ut in amet id proident commodo officia cillum."
  }
];

const cardsThree = [
  {
    image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
    header: "Card Seven",
    link: {
      url: "/#",
      text: "Link Seven"
    },
    text: "Ut in amet id proident commodo officia cillum."
  },
  {
    image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
    header: "Card Eight",
    link: {
      url: "/#",
      text: "Link Eight"
    },
    text: "Ut in amet id proident commodo officia cillum."
  },
  {
    image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
    header: "Card Nine",
    link: {
      url: "/#",
      text: "Link Nine"
    },
    text: "Ut in amet id proident commodo officia cillum."
  }
];

return (
  <Feat10 header="One easy subscription does it all">
    <TabsPanel name="Tab One">
      <Feat4Flex cards={cardsOne} />
    </TabsPanel>
    <TabsPanel name="Tab Two">
      <Feat4Flex cards={cardsTwo} />
    </TabsPanel>
    <TabsPanel name="Tab Three">
      <Feat4Flex cards={cardsThree} />
    </TabsPanel>
  </Feat10>
);

VideoFeat

Props -

• header - string used to generate header text
• subHeader - string used to generate sub-header text
• thumbnail - object with url and altText string used to generate the thumbnail image for the video
• video - object with a url string that points to the video's YouTube link.
• 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

Examples -

const header = "Video Featurette";
const subHeader =
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque facilisis nisl eu gravida vestibulum. Suspendisse potenti. Aenean cursus pharetra lorem, ac rutrum lectus. Cras molestie, quam sed mattis lobortis, nisl diam sodales leo, vel egestas mauris quam eget sapien.";

const video = {
  url: "https://www.youtube.com/embed/UY7r0juBF8Y",
  allowFullScreen: "true"
};

const thumbnail = {
  url: "https://fpoimg.com/2880x1920",
  altText: "fpo"
};

return (
  <VideoFeat
    thumbnail={thumbnail}
    header={header}
    subHeader={subHeader}
    video={video}
    backgroundImage={pattern}
    backgroundPosition="right"
    backgroundImageHeight={900}
    backgroundImageWidth={900}
    backgroundOffsetY={-100}
    backgroundOffsetX={0}
    theme="theme-4"
    motion={true}
    motionDirection="bottom"
    zIndex={1}
  />
);

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

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 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
    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}
    />
  );