#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 - for meta information in the document
<head>
- React Player - for rendering YouTube and Vimeo videos
- React Reveal - for handling organism animation when they are scrolled into view
- React Scroll - for direct scrolling behavior from the navigation bar to specific organisms
- Vidyard - for rendering Vidyard videos
- Node Sass v4.12.x - for compiling SASS into CSS
Luna Organisms
Hero1 -
Props -
-
content
(required) - object containingimages
,header
,text
,ctas
- images (required) - object consisting of
desktop
,tablet
, andmobile
image objects-
desktop
- object withurl
andaltText
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 withurl
andaltText
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 withurl
andaltText
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 withtext
andurl
strings -
ctaTwo
: object withtext
andurl
strings -
subCTA
: object withtext
andurl
strings
-
- images (required) - object consisting of
-
contentSide
- string that indicates whether content is on theright
orleft
side of the component. Defaults toright
. - 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
andmobile
.desktop
is the 4x1 image object.mobile
is the 2x1 image object. Each image object consists haveurl
andaltText
strings.-
desktop
- object consisting ofurl
andaltText
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 ofurl
andaltText
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 aretheme-1
,theme-2
,theme-3
,theme-4
,theme-5
. -
id
- string used for generating the component'sid
attribute. Will default to the organism'sheader
text or the organism type. -
motion
- object containingmotion
,motionDistance
, andmotionDirection
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 inHero2
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 containingheader
,text
,thumbnail
, andvideo
data-
header
- string for the header content -
text
- string for the body text content -
thumbnail
- object for generating the thumbnail withurl
andaltText
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 aretheme-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 -
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 aredesktop
,tablet
, andmobile
. -
desktop
- object withurl
andaltText
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 withurl
andaltText
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 withurl
andaltText
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 aretheme-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 requiringurl
andtext
strings -
image
(required) - object consisting ofurl
andaltText
strings. -
backgroundImage
- url string that points to a background image address -
backgroundPosition
- string indicating where the background image appears. Options aretop
,top-left
,top-right
,bottom
,bottom-left
,bottom-right
,right
,left
andcenter
. -
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 desiredz-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 aretheme-1
,theme-2
,theme-3
,theme-4
,theme-5
. -
id
- string used for generating the component'sid
attribute. Will default to the organism'sheader
text or the organism type. -
motion
- boolean that indicates whether to use thereact-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 withurl
andaltText
strings -
<AccordionFold>
(required) - child component for rendering folds in the<Accordion>
component with each fold taking aheader
string as a prop -
zIndex
- number indicating the desiredz-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 aretheme-1
,theme-2
,theme-3
,theme-4
,theme-5
. -
id
- string used for generating the component'sid
attribute. Will default to the organism'sheader
text or the organism type. -
motion
- boolean that indicates whether to use thereact-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 generatingIconListItem
components withtext
andheader
strings -
theme
- string indicating the theme that styles the organism. Options aretheme-1
,theme-2
,theme-3
,theme-4
,theme-5
. -
id
- string used for generating the component'sid
attribute. Will default to the organism'sheader
text or the organism type. -
motion
- boolean that indicates whether to use thereact-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 aretheme-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 andbackgroundImageWidth
which value is anumber -
theme
- string indicating the theme that styles the organism. Options aretheme-1
,theme-2
,theme-3
,theme-4
,theme-5
. -
id
- string used for generating the component'sid
attribute. Will default to the organism'sheader
text or the organism type. -
motion
- object containingmotion
,motionDistance
, andmotionDirection
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 aretop
,top-left
,top-right
,bottom
,bottom-left
,bottom-right
,right
,left
andcenter
. -
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 desiredz-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 aretheme-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'sid
attribute. Will default to the organism'sheader
text or the organism type. -
motion
- boolean that indicates whether to use thereact-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
andmobile
.desktop
is the 4x1 image object.mobile
is the 2x1 image object. Each image object consists haveurl
andaltText
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 aretheme-1
,theme-2
,theme-3
,theme-4
,theme-5
. -
id
- string used for generating the component'sid
attribute. Will default to the organism'sheader
text or the organism type. -
motion
- object containingmotion
,motionDistance
, andmotionDirection
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 ofheader
,text
, andurl
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 aretop
,top-left
,top-right
,bottom
,bottom-left
,bottom-right
,right
,left
andcenter
. -
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 desiredz-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 aretheme-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'sid
attribute. Will default to the organism'sheader
text or the organism type. -
motion
- boolean that indicates whether to use thereact-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 to2
. A speed of1
will keep the background image fixed, while a speed of2
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 requiresurl
andtext
strings. -
logo
(required) - object consisting ofurl
andaltText
strings (for generating the logo image) in addition to a link object with aurl
string for generating thehref
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 aclassName
string for formating the button (see Terra buttons) and alink
object withurl
andtext
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. TheMegaMenu
can both render a links both with and without subcategories. -
utilityNav
- object consisting of apageTitle
string as well as alinks
array of objects consisting oftext
andurl
strings. See example below. -
currentLanguage
- object withregion
andlanguage
strings that indicate the current region and language selected. -
languageSelectorData
- object consisting of data needed to populate theLanguageSelector
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 inlocation={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 aurl
andaltText
strings -
trimbleText
- string from generating the main content on the left side -
trimbleLink
- object consisting oftext
andurl
strings for generating a link below the left-side text -
siteText
- text string that appears above the secondary link -
siteLink
- object consisting ofurl
andtext
string for generating the secondary link on the left side -
linksOne
- array of objects consisting ofurl
andtext
strings for generating the links that take up the left-center of the footer space -
linksTwo
- array of objects consisting ofurl
andtext
strings for generating the links that take up the right-center of the footer space -
socialLinks
- array of objects consiting of anicon
object (url
andaltText
strings) and a link object (url
string) -
legalStuff
- array of objects consisting ofurl
andtext
strings for generating the links that take up the bottom of the footer space. Theurl
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 containsheader
andtext
keys with values that are strings. -
cardTwo
- an object that containsheader
andtext
andcta
.header
has a value of a string.text
has a value of a string.cta
has a value of an object with keyurl
with value of a string and keytext
with value of a string. -
type
(required) - required to render the correct listFeat. ListFeat1 must belist_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 aretheme-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 iscontent
which value is an object containingheader
andimage
keys.header
is a string andimage
is an object with keysurl
(which value is a string) and keyaltText
which value is a string. The second key of each indice isfilter
which value is a string. -
type
(required) - required to render the correct listFeat. ListFeat2 must belist_feat_2
-
-
motion
- boolean used to indicate whether or not motion should be used -
theme
- string indicating the theme that styles the organism. Options aretheme-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 isimage
which value is an object containingurl
andaltText
keys.url
andaltText
both have strings as values. The second key of each indice isheader
which value is a string. The third key of each indice islink
which value is an object ofurl
andtext
.url
andtext
both have strings as values. -
type
(required) - required to render the correct listFeat. ListFeat3 must belist_feat_3
-
-
motion
- boolean used to indicate whether or not motion should be used -
theme
- string indicating the theme that styles the organism. Options aretheme-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 isheader
which value is a string. The second key of each indice islink
which value is an object ofurl
.url
has a string as a value. The third key of each indice issize
which has a string as a value. The fourth key of each indice isicon
which value is an object containingtype
andsize
keys.type
andsize
both have strings as values. -
type
(required) - required to render the correct listFeat. ListFeat4 must belist_feat_3
-
-
motion
- boolean used to indicate whether or not motion should be used -
theme
- string indicating the theme that styles the organism. Options aretheme-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 isheader
which has a string as a value. The second key istext
which has a string as a value. -
type
(required) - required to render the correct listFeat. ListFeat5 must belist_feat_3
-
-
motion
- boolean used to indicate whether or not motion should be used -
theme
- string indicating the theme that styles the organism. Options aretheme-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 hassrc
andaltText
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 belist_feat_3
-
-
motion
- boolean used to indicate whether or not motion should be used -
theme
- string indicating the theme that styles the organism. Options aretheme-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 belist_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 keysurl
andaltText
with values as strings -
video
- object with keysurl
andallowFullScreen
.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 keysurl
andaltText
with values as strings, used for a thumbnail image in place of a video, while video is not playing -
link
- object with keysurl
andtext
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 thehref
orto
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 withvalue
andformat
strings for generating columns -
-