@trimble-creative-strategy/luna-component-lib

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 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 (
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 should be passed as innerHTML (true) or into a

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 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 (
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 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 ;
`

---

#### Feat5

###### Props -

- dumplings (required) - an array of objects used for generating 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 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 (
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
- 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 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 ;
`

---

#### 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 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 ;
`

---

#### Feat8

###### Props -

- header - string used for generating header text
- subHeader - string used for generating sub-header text;
- buttonLink - object used for generating a 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 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 should be passed as innerHTML (true) or into a

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 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 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 (
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
- 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 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 ;
`

---

#### Feat10

###### Props -

- header - string used for generating header text
- children - 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 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 (











);
`

---

#### 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 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 (
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 (
backgroundImage={backgroundImage}
styles={{padding: '0 40px'}}
speed={1.4}
>

Content!

)
`

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

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 (