luna-one

v1.0.250

Published

a year ago

Luna One is a React component library for the Luna design system by Trimble Creative Strategies.

Downloads

158

0High
0Medium
0Low

#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 containing images, header, text, ctas
- images (required) - object consisting of desktop, tablet, and mobile image objects
  - desktop - object with url and altText strings for the desktop image view
    - url - string that indicates the source of the image
    - altText - string that generates accessibility text for images
  - tablet - object with url and altText strings for the tablet image view
    - url - string that indicates the source of the image
    - altText - string that generates accessibility text for images
  - mobile - object with url and altText strings for the mobile image view
    - url - string that indicates the source of the image
    - altText - string that generates accessibility text for images
- header (required) - string for generating header text
- text - string for generating body text
- ctas - object used to populate a <CTASection>
  - ctaOne: object with text and url strings
  - ctaTwo: object with text and url strings
  - subCTA: object with text and url strings
contentSide - string that indicates whether content is on the right or left side of the component. Defaults to right.
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion - boolean that indicates whether to use the animation to render the component.

Example -

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

const images = {
desktop: {
  url: "https://fpoimg.com/1600x1200",
  altText: "placeholder image"
},
  tablet: {
    url: "https://fpoimg.com/800x600",
    altText: "placeholder image" },
  mobile: {
    url: "https://fpoimg.com/400x400",
    altText: "placeholder image"
  }
};

const content = {
  images,
  ctas,
  header: 'Design',
  text: 'I am text'
}

return (
<Hero1
    content={content}
    motion
    theme='theme-2'
  />
);

Hero2

Props -

content (required) - object containing images, ctas, headers, subheaders, button
- images (required) - an object that contains two objects, desktop and mobile. desktop is the 4x1 image object. mobile is the 2x1 image object. Each image object consists have url and altText strings.
  - desktop - object consisting of url and altText strings for generating the desktop-size image
    - url - string that points to the image source
    - altText - string that generates image accessibility text
- mobile - object consisting of url and altText strings for generating the mobile-size image
  - url - string that points to the image source
  - altText - string that generates image accessibility text
- header (required) - string used for generating header text
- subHeader (required) - string used for generating sub-header text
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion - object containing motion, motionDistance, and motionDirection keys. -motion value is a boolen to indicate if motion will be on this component -motionDistance - string indicating the direction that the component should travel from as it fades in -motionDirection - string indicating the distance that the component travels during motion. Motion is currently not enabled in Hero2

Example -

const content = {
  header="Good Design is innovative",
  subHeader="Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis.",
  images: {
    desktop: {
      url: "http://fpoimg.com/1600x400?text=4:1",
      altText: "placeholder image"
    },
    mobile: {
      url: "http://fpoimg.com/1600x800?text=2:1",
      altText: "placeholder image"
    }
  },
}

return (
  <Hero2
    content={content}
  />
);

Hero3

Props -

content (required) - object containing header, text, thumbnail, and video data
- header - string for the header content
- text - string for the body text content
- thumbnail - object for generating the thumbnail with url and altText strings
  - url (required) - string that points to the image source
  - altText - string for creating accessibility text
- video - object for rendering the video embed
  - url - string that points to the video source on YouTube
  - uuid - string used for rendering Vidyard video embeds
- vidyard - boolean for indicating that a Vidyard component should be rendered
- theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
- id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
- motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.

Hero4/Hero5

Props -

content (required) - object containing header, subHeader, text, ctas, and image data
- header (required) - string for generating header text
- subHeader - string for generating sub-header text
- text - string for generating body text
- ctas - object for generating a <CTASection> component
- image - object for generating element with url and altText strings
zIndex - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.

Example -

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

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

const content = {
  ctas: mockCTALinks,
  image: mockImage,
  header: 'Header',
  text: 'I am text'
}

<Hero4
  content={content}
  motion
  theme='theme-1'
/>

Hero6

Props -

content (required) - object containing images, header, text, ctas, and subHeader
- header (required) - string for generating header text
- subHeader - string for generating sub-header text
- text (required) - string for generating body text
- ctas - object for generating a <CTASection> component
- images (required) - object consisting of three image objects, each with url and altText strings. The objects are desktop, tablet, and mobile.
- desktop - object with url and altText strings for generating the desktop hero image
- url - string that links to a 3x2 image source
- altText - string for generating image accessibility text
- tablet - object with url and altText strings for generating the desktop hero image
  - url - string that links to a 1x1 image source
  - altText - string for generating image accessibility text
- mobile - object with url and altText strings for generating the desktop hero image
  - url - string that links to a 4x3 image source
  - altText - string for generating image accessibility text
imageSide - string used for indicating the side of the page that the image should render on. Defaults to right.
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.

Example -

const images = {
  desktop : {
    url: "http://fpoimg.com/2400x1600?text=3:2",
    altText: "placeholder image"
  },
  mobile: {
    url: "http://fpoimg.com/1600x1200?text=4:3",
    altText: "placeholder image"
  },
  tablet: {
    url: "http://fpoimg.com/1600x1600?text=1:1",
    altText: "placeholder image"
  }
};

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

const content {
  images,
  ctas,
  header: 'Header',
  text: 'Text!'
}

return (
<Hero6
    imageSide="left"
    content={content}
    motion
    theme='theme-4'
  />
);

FilterHero

Props -

header - string for generating header text
text - string for generating body text.
dropdowns - an array used for generating Dropdown components - see example for structuring
checkboxes - an array used for generating Checkbox components - see example for structuring
handleDropdownChange - method used for handling new dropdown selections - takes the new selection and the associated name of the dropdown from the event object arguments.
handleCheckboxChange - method used for handling checkbox toggling - takes a boolean for the status of the checkbox and the name of the checkbox from the event object as arguments.
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.

Example -

handleDropdownChange = (selection, name) => {
  this.setState({[name]: selection})
}

handleCheckboxChange = (bool, name) => {
  this.setState({[name]: bool})
}

const header = 'I am a header'
const text = 'Tempor ex esse ipsum sit eiusmod dolor mollit cupidatat elit cupidatat pariatur commodo non est.'

const dropdownOne = {
  options: ["trade one", "trade two", "trade three"],
  defaultText: "All",
  name: "Trade"
};
const dropdownTwo = {
  options: ["category one", "category two", "category three"],
  defaultText: "All",
  name: "Category"
};
const dropdowns = [dropdownOne, dropdownTwo]

const checkboxOne = {
  name: "Checkbox One"
};
const checkboxTwo = { name: "Checkbox Two" };
const checkboxes = [checkboxOne, checkboxTwo];

return (
  <FilterHero
    header={header}
    text={text}
    dropdowns={dropdowns}
    checkboxes={checkboxes}
    handleDropdownChange={this.handleDropdownChange}
    handleCheckboxChange={this.handleCheckboxChange}
    backgroundColor='#5e5e5e'
  />
)

Feat1

Props -

content (required) - object containing the objects content (see example)
header (required) - string for generating header text
subHeader - string for generating sub-header text
text (required) - string for generating body text
cta - object for generating a <ButtonLink> component requiring url and text strings
image (required) - object consisting of url and altText strings.
backgroundImage - url string that points to a background image address
backgroundPosition - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
backgroundImageWidth - number indicating the width of the background image in pixels
backgroundImageHeight - number indicating the height of the background image in pixels
backgroundOffsetY - number indicating the offset of the background image on the Y axis
backgroundOffsetX - number indicating the offset of the background image on the X axis
parallaxPosition - number indicating the current scrollY position of the page, should come from Redux
zIndex - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.

Example -

const content = {
  header: 'Header',
  subHeader: 'Sub Header',
  text: '<p>Sunt elit officia id aute esse dolore elit Lorem officia.</p>'
  cta: {
    url: '/',
    text: 'link'
  },
  image: {
    url: '/',
    altText: 'Image'
  }
}

const background = {
  backgroundImage: './image.png',
  backgroundPosition: 'right',
  backgroundImageWidth: 900,
  backgroundImageHeight: 900,
  backgroundOFfsetY: 0,
  backgroundOffsetX: 100
}

return (
  <Feat1
    content={content}
    motion
    background={background}
    parallaxPosition={this.props.parallaxPosition}
    theme='theme-2',
    id={data.id}
  />
);

Feat2A

Props -

image (required) - object with url and altText strings
<AccordionFold> (required) - child component for rendering folds in the <Accordion> component with each fold taking a header string as a prop
zIndex - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.

Example -

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

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

return (
  <Feat2A
    image={mockImage}
    header="Good design is a thing, apparently."
    text="Veniam laboris laboris consequat et."
  >
    <AccordionFold header="Test one">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
        lobortis augue ligula, eget gravida tellus lacinia id. Sed ultricies
        mi malesuada tincidunt dapibus. Donec porta ligula sagittis elit
        sollicitudin.
      </p>
    </AccordionFold>
    <AccordionFold header="Test two">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
        lobortis augue ligula, eget gravida tellus lacinia id. Sed ultricies
        mi malesuada tincidunt dapibus. Donec porta ligula sagittis elit
        sollicitudin.
      </p>
    </AccordionFold>
    <AccordionFold header="Test three">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
        lobortis augue ligula, eget gravida tellus lacinia id. Sed ultricies
        mi malesuada tincidunt dapibus. Donec porta ligula sagittis elit
        sollicitudin.
      </p>
    </AccordionFold>
  </Feat2>
);

Feat2B

Props -

content (required) - object containing images and cards (see Example)
cards (required) - array of objects used for generating IconListItem components with text and header strings
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.

Example -

const content = {
  images: {
    desktop: {
      url: "http://fpoimg.com/1600x400?text=4:1",
      altText: "placeholder image"
    },
    mobile: {
      url: "http://fpoimg.com/1600x800?text=2:1",
      altText: "placeholder image"
    }
  },
 cards: [
    {
      header: "Header",
      text:
        "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum."
    },
    {
      header: "Header",
      text:
        "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum."
    },
    {
      header: "Header",
      text:
        "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum."
    }
  ]
}

return (
  <Feat2B
    content={content}
    motion
    theme='theme-2'
    id={data.id}
  />
);

Feat3

Description -

Featurette with a large image, header, and sub-header text

Props -

content (required) - object containing, images, header, and text
- header - string used for generating the feat header
- subHeader - string used for generating the feat sub-header
- images - object containing mobile and desktop images
  - mobile - object containing the mobile image source and alt text
    - url - string pointing to the image source
    - altText - string used for assisted alternate text for screen readers
  - desktop - object containing the desktop image source and alt text
    - url - string pointing to the image source
    - altText - string used for assisted alternate text for screen readers
- motion - boolean indicating if component animation is active
- id - string used for generating the component's id, defaults to the header text (spaces removed)
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.

Example -

const content = {
  header: "Feat 3 Header",
  subHeader: "This is sub-header text",
  images: {
    mobile: {
      url: "www.image.com/mobile-image.jpg",
      altText: "image alt text
    },
    desktop: {
      url: "www.image.com/desktop-image.jpg",
      altText: "image alt text
    }
  },
  theme: "theme-2",
  motion: true
}

return <Feat3 content={content} />

Feat4

Props -

content (required) - object containing, ctas, headers, subheaders
- header (required) - string used for generating header text
- subHeader (required) - string used for generating sub-header text
background - object containing backgroundImage which value is a string, backgroundPosition which value is a number, backgroundColor which value is a string, backgroundOffsetX which value is a number, backgroundOffsetY which value is a number, backgroundImageHeight which value is a number and backgroundImageWidth which value is anumber
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion - object containing motion, motionDistance, and motionDirection keys. -motion value is a boolen to indicate if motion will be on this component -motionDistance - string indicating the direction that the component should travel from as it fades in -motionDirection - string indicating the distance that the component travels during motion.

Example -

const content = {
  header="Good Design is innovative",
  subHeader="Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis.",
  const ctas = {
    ctaOne: {
      text: "Button",
      url: "/#"
    },
    ctaTwo: {
      text: "Button",
      url: "/#"
    }
  };
}

return (
  <Feat4
    content={content}
  />
);

Feat5

Props -

dumplings (required) - an array of objects used for generating <Dumpling> components; see the Terra component library for requirements
type - string used to determine whether or not small or large dumplings are used ('a' is large, 'b' is small)
header (required) - string used for generating header text
subHeader - string used for generating sub-header text
backgroundImage - url string that points to a background image address
backgroundPosition - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
backgroundImageWidth - number indicating the width of the background image in pixels
backgroundImageHeight - number indicating the height of the background image in pixels
backgroundOffsetY - number indicating the offset of the background image on the Y axis
backgroundOffsetX - number indicating the offset of the background image on the X axis
zIndex - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
className - string that is interpolated into the organisms class for targeted styling and/or manipulation
id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.
motionDirection - string indicating the direction that the component should travel from as it fades in.
motionDistance - string indicating the distance that the component travels during motion

Example -

const mockDumplings = [
  {
    header: "Dumplin'",
    link: { url: "/#" },
    size: "small",
    icon: { type: "enclosed-check-dark-48px", size: "48px" }
  },
  {
    header: "Dumplin'",
    link: { url: "/#" },
    size: "small",
    icon: { type: "enclosed-check-dark-48px", size: "48px" }
  }
];

return (
  <Feat5
    dumplings={mockDumplings}
    type="a"
    header="Design is design"
    subHeader="It's like, this thing, you know?"
  />
);

Feat6

Props -

content (required) - object containing quotes, ctas, button
- quote (required) - object consisting of text, source, and sourceTitle strings
- images (required) - an object that contains two objects, desktop and mobile. desktop is the 4x1 image object. mobile is the 2x1 image object. Each image object consists have url and altText strings.
- header (required) - string used for generating header text
- subHeader (required) - string used for generating sub-header text
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion - object containing motion, motionDistance, and motionDirection keys. -motion value is a boolen to indicate if motion will be on this component -motionDistance - string indicating the direction that the component should travel from as it fades in -motionDirection - string indicating the distance that the component travels during motion.

Example -

const content = {
  image:{
    url: "http://fpoimg.com/800x800",
    altText: "placeholder image"
  },
  quote:{
    text: `Excepteur incididunt magna commodo amet est fugiat."`,
    source: "Leonard Sciarra",
    sourceTitle: "Senior Associate at Gensler, AIA, ASHRAE, LEED AP+"
  },
  cta:{
    text: "CTA",
    url: "/#"
  },
}

return (
  <Feat6
    content={content}
  />

Feat7

Props -

content (required) - array of objects use for generating 'cards' consisting of header, text, and url strings.
header (required) - string used for generating header text
backgroundImage - url string that points to a background image address
backgroundPosition - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
backgroundImageWidth - number indicating the width of the background image in pixels
backgroundImageHeight - number indicating the height of the background image in pixels
backgroundOffsetY - number indicating the offset of the background image on the Y axis
backgroundOffsetX - number indicating the offset of the background image on the X axis
zIndex - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
className - string that is interpolated into the organisms class for targeted styling and/or manipulation
id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.
motionDirection - string indicating the direction that the component should travel from as it fades in.
motionDistance - string indicating the distance that the component travels during motion

Example -

const content = [
  {
    header: "Design!",
    text:
      "Enim laborum ad anim laborum ad minim ipsum proident est cillum aliqua. Irure laboris aute ullamco ad Lorem et culpa id commodo quis sunt labore in id.",
    url: "/#"
  },
  {
    header: "Aesthetics!",
    text:
      "Enim laborum ad anim laborum ad minim ipsum proident est cillum aliqua.",
    url: "/#"
  }
];
return <Feat7 header="I am a header" content={content} />;

ParallaxBackground

Props -

backgroundImage - string for the URL that points to the background image to be rendered
speed - integer used for determining the speed of the parallax effect. Defaults to 2. A speed of 1 will keep the background image fixed, while a speed of 2 will cause it to scroll at half speed.
styles - object of style properties that are passed to the parent container.
children - JSX passed inside the tags that will be rendered within the container and will scroll at normal speed.

Example -

const backgroundImage = 'https://www.images.com/images/image.jpg

return (
  <ParallaxBackground
    backgroundImage={backgroundImage}
    styles={{padding: '0 40px'}}
    speed={1.4}
  >
    <p>Content!</p>
  </ParallaxBackground>
)

NavBar

Notes -

This component uses the react-slidedown library for the innerpage navigation links in the utilityNav. The link.url string should be a reference to the name of the <Element> that wraps the cooresponding organism that the window should scroll to.

Props -

rightLinks - array of objects used for generating links to the right of the search icon. Each object requires url and text strings.
logo (required) - object consisting of url and altText strings (for generating the logo image) in addition to a link object with a url string for generating the href property.
divisionName (required) - string used for generating the name of the Trimble division that is to the right of the logo.n
navCTA - object consiting of a className string for formating the button (see Terra buttons) and a link object with url and text strings used for generating the CTA in the lower right corner of the Nav
navOptions - array of objects used for generating the middle section of the nav. All objects will have a type indicating whether to render a (MegaMenu), a simple drop down of links (miniMenus), or a single link (singleLink). See examples below on how to load up these objects. The MegaMenu can both render a links both with and without subcategories.
utilityNav - object consisting of a pageTitle string as well as a links array of objects consisting of text and url strings. See example below.
currentLanguage - object with region and language strings that indicate the current region and language selected.
languageSelectorData - object consisting of data needed to populate the LanguageSelector component. See example below.
setLanguage - method used to set the region and language, which it takes as string key/values in an object as an argument
location - prop used to close the mobile menu when a user clicks on one of the rightLinks. In your project, pass in location={this.props.location}

Example -

const rightLinks = [
  {
    url: "/#",
    text: "Support"
  }
];

const logo = {
  url: Logo (should be imported in the application),
  altText: 'Trimble Logo',
  link: {
    url: 'www.trimble.com'
  }
};

const divisionName = 'Geospatial';
const location = 'N. America';

const navCTA = {
  className: 'ter-button--primary--1',
  link: {
    url: '/#',
    text: 'Contact Sales'
  }
}

const location = this.props.location

const utilityNav = {
  pageTitle: "Trimble Accubid Enterprise",
  links: [
    {
      text: "Product Anchor One",
      url: "/#"
    },
    {
      text: "Product Anchor Two",
      url: "/#"
    }
  ]
};

const megaMenu = {
  type: "mega menu",
  bottomLink: {
    url: "/#",
    text: "All Products"
  },
  text: "Products",
  links: [
    {
      text: "Mechanical",
      links: [
        {
          url: "/#",
          text: "BIM Collaboration"
        },
        {
          url: "/#",
          text: "MEP Content"
        }
      ]
    },
    {
      text: "Electrical",
      links: [
        {
          url: "/#",
          text: "Design/Detailing"
        },
        {
          url: "/#",
          text: "Project Management"
        }
      ]
    },
    {
      text: "Plumbing",
      link: {url: "/#"}
    },
  ]
};

const miniMenus = [
  {
    type: "mini menu",
    text: "Services",
    links: [
      {
        url: "/#",
        text: "Link One"
      },
      {
        url: "/#",
        text: "Link Two"
      }
    ]
  },
  {
    type: "mini menu",
    text: "Resources",
    links: [
      {
        url: "/#",
        text: "Link One"
      },
      {
        url: "/#",
        text: "Link Two"
      }
    ]
  }
];

const singleLink = {
  type: "link",
  url: "/#",
  text: "Process"
};

const languageSelectorData = {
  labels: {
    currentRegion: "Current Region",
    cancel: "Cancel",
    save: "Save"
  },
  regions: [
    {
      region: "North America",
      languages: [
        "EN: English (US)",
        "EN-UK: English (UK)",
        "FR: French",
        "DE: German",
        "NL: Dutch"
      ]
    },
    {
      region: "UK and Middle East",
      languages: [
        "EN: English (US)",
        "EN-UK: English (UK)",
        "FR: French",
        "DE: German",
        "NL: Dutch"
      ]
    },
    {
      region: "France",
      languages: [
        "EN: English (US)",
        "EN-UK: English (UK)",
        "FR: French",
        "DE: German",
        "NL: Dutch"
      ]
    },
    {
      region: "Germany and Austria",
      languages: [
        "EN: English (US)",
        "EN-UK: English (UK)",
        "FR: French",
        "DE: German",
        "NL: Dutch"
      ]
    },
    {
      region: "Switzerland",
      languages: [
        "EN: English (US)",
        "EN-UK: English (UK)",
        "FR: French",
        "DE: German",
        "NL: Dutch"
      ]
    }
  ],
  currentRegionLanguage: {
    region: "UK and Middle East",
    language: "EN-UK"
  },

  activeRegion: {
    region: "UK and Middle East",
    language: "EN: English"
  },

  companyDivision: "MEP"
};


return (
  <NavBar
    location={location}
    rightLinks={rightLinks}
    currentLanguage={{ region: "N. America", language: "EN: English" }}
    logo={logo}
    divisionName="MEP"
    navCTA={navCTA}
    navOptions={[megaMenu, ...miniMenus, singleLink]}
    utilityNav={utilityNav}
    languageSelectorData={languageSelectorData}
  />
)

Footer

Props -

logo - object consisting of a url and altText strings
trimbleText - string from generating the main content on the left side
trimbleLink - object consisting of text and url strings for generating a link below the left-side text
siteText - text string that appears above the secondary link
siteLink - object consisting of url and text string for generating the secondary link on the left side
linksOne - array of objects consisting of url and text strings for generating the links that take up the left-center of the footer space
linksTwo - array of objects consisting of url and text strings for generating the links that take up the right-center of the footer space
socialLinks - array of objects consiting of an icon object (url and altText strings) and a link object (url string)
legalStuff - array of objects consisting of url and text strings for generating the links that take up the bottom of the footer space. The url string is optional, as the component will simply render a <p> tags instead.

Example -

const logo = {
    url: Logo,
    altText: "fpo"
  };

  const trimbleText =
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";

  const trimbleLink = {
    url: "/#",
    text: "More About Trimble"
  };

  const siteText = "Text for secondary link information";

  const siteLink = {
    url: "/#",
    text: "link.trimble.com"
  };

  const linksOne = [
    { url: "/#", text: "Label Left" },
    { url: "/#", text: "Label Left" },
    { url: "/#", text: "Label Left" }
  ];

  const linksTwo = [
    { url: "/#", text: "Label Right" },
    { url: "/#", text: "Label Right" },
    { url: "/#", text: "Label Right" }
  ];

  const socialLinks = [
    {
      icon: {
        url: Facebook,
        altText: "fpo"
      },
      link: {
        url: "/#"
      }
    },
    {
      icon: {
        url: Twitter,
        altText: "fpo"
      },
      link: {
        url: "/#"
      }
    },
    {
      icon: {
        url: YouTube,
        altText: "fpo"
      },
      link: {
        url: "/#"
      }
    },
    {
      icon: {
        url: LinkedIn,
        altText: "fpo"
      },
      link: {
        url: "/#"
      }
    },
    {
      icon: {
        url: Facebook,
        altText: "fpo"
      },
      link: {
        url: "/#"
      }
    },
    {
      icon: {
        url: Twitter,
        altText: "fpo"
      },
      link: {
        url: "/#"
      }
    },
    {
      icon: {
        url: YouTube,
        altText: "fpo"
      },
      link: {
        url: "/#"
      }
    },
    {
      icon: {
        url: LinkedIn,
        altText: "fpo"
      },
      link: {
        url: "/#"
      }
    }
  ];

  const privacyStatement = {
    url: "/#",
    text: "Privacy Statement"
  };

  const termsOfUse = {
    url: "/#",
    text: "Terms of Use"
  };

  const copyright = {
    url: "/#",
    text: "Copyright"
  };

  const legalStuff = [
    {
      url: "/#",
      text: "Terms of Use"
    },
    {
      url: "/#",
      text: "Privacy Statement"
    },
    { text: "© 2019, Trimble Inc." }
  ];

  return (
    <Footer
      trimbleText={trimbleText}
      trimbleLink={trimbleLink}
      siteText={siteText}
      siteLink={siteLink}
      linksOne={linksOne}
      linksTwo={linksTwo}
      logo={logo}
      socialLinks={socialLinks}
      legalStuff={legalStuff}
    />
  );

ListFeat1

Props -

content (required) - object containing images, ctas, text, variant, headers, subheaders, button, link, videos
- cardOne - an object that contains header and text keys with values that are strings.
- cardTwo - an object that contains header and text and cta. header has a value of a string. text has a value of a string. cta has a value of an object with key url with value of a string and key text with value of a string.
- type (required) - required to render the correct listFeat. ListFeat1 must be list_feat_1
- sort - boolean indicating whether or not cards should be sorted alphabetically by header
motion - boolean used to indicate whether or not motion should be used
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.

Example -

const content = {
  sort: true,
  header: "Hello everyone! This is a header. Enjoy!",
  subheader: "This is truly wonderful.",
  type: "list_feat_1",
  image: { src: "https://fpoimg.com/500x500", alt: "placeholder" },
  cardOne: {
    header: "I am Card One Header",
    text:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex",
    cta: { url: "/#", text: "Click me!" }
  },
  cardTwo: {
    header: "I am Card Two Header",
    text:
      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, la",
    cta: { url: "/#", text: "I am a button!" }
  }
};

return (
  <ListFeat content={content} />
)

ListFeat2

Props -

content (required) - object containing text, headers, subheaders, and headShotdumplings
- headShotdumplings - array containing objects. Each indice is an object with two keys. The first key is content which value is an object containing header and image keys. header is a string and image is an object with keys url (which value is a string) and key altText which value is a string. The second key of each indice is filter which value is a string.
- type (required) - required to render the correct listFeat. ListFeat2 must be list_feat_2
motion - boolean used to indicate whether or not motion should be used
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.

Example -

const content = {
  header: "Hello everyone! This is a header. Enjoy!",
  subheader: "This is truly wonderful.",
  type: "list_feat_2",
  headShotdumplings: [
    {
      content: {
        header: "Lorem Ipsum",
        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" }
      },
      filter: "default"
    },
    {
      content: {
        header: "Nemo enim ipsam",
        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" }
      },
      filter: "default"
    },
    {
      content: {
        header: "Sed ut perspiciatis",
        image: { url: "https://fpoimg.com/150x150", altText: "FPO Image" }
      },
      filter: "default"
    }
  ]
};

export const motion = {
  motion: true,
  motionDistance: "75px",
  motionDirection: "bottom"
};

return (
  <ListFeat content={content} motion={motion}/>
)

ListFeat3

Props -

content (required) - object containing header, subHeader, type, cards
- header - key that has a string as a value
- subHeader - key that has a string as a value
- cards - array containing objects. Each indice is an object with three keys. The first key is image which value is an object containing url and altText keys. url and altText both have strings as values. The second key of each indice is header which value is a string. The third key of each indice is link which value is an object of url and text. url and text both have strings as values.
- type (required) - required to render the correct listFeat. ListFeat3 must be list_feat_3
motion - boolean used to indicate whether or not motion should be used
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.

Example -

const content = {
  header: "Hello everyone! This is a header. Enjoy!",
  subheader: "This is truly wonderful.",
  type: "list_feat_3",
  cards: [
    {
      image: { url: "https://fpoimg.com/400x300", altText: "FPO Image" },
      header: "Here is a title! Woooo",
      link: {
        url: "/#",
        text: "Link"
      },
      text:
        "Ut in amet id proident commodo officia cillum. Aliqua id ex culpa labore duis minim fugiat proident ad deserunt qui."
    },
    {
      image: { url: "https://fpoimg.com/400x300", altText: "FPO Image" },
      header: "Here is a title! Woooo",
      link: {
        url: "/#",
        text: "Link"
      },
      text:
        "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
    },
    {
      image: { url: "https://fpoimg.com/400x300", altText: "FPO Image" },
      header: "Here is a title! Woooo",
      link: {
        url: "/#",
        text: "Link"
      },
      text:
        " Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
    }
  ]
};

const motion = {
  motion: true,
  motionDistance: "75px",
  motionDirection: "bottom"
};

return (
  <ListFeat content={content} motion={motion}/>
)

ListFeat4

Props -

content (required) - object containing header, subHeader, type, cards
- header - key that has a string as a value
- subHeader - key that has a string as a value
- dumplings - array containing objects. Each indice is an object with four keys. The first key of each indice is header which value is a string. The second key of each indice is link which value is an object of url. url has a string as a value. The third key of each indice is size which has a string as a value. The fourth key of each indice is icon which value is an object containing type and size keys. type and size both have strings as values.
- type (required) - required to render the correct listFeat. ListFeat4 must be list_feat_3
motion - boolean used to indicate whether or not motion should be used
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.

Example -

const content = {
  header: "Hello everyone! This is a header. Enjoy!",
  subheader: "This is truly wonderful.",
  type: "list_feat_4",
  dumplings: [
    {
      header: "Lorem Ipsum",
      link: { url: "/#" },
      size: "small",
      icon: { type: "enclosed-check-dark-48px", size: "48px" }
    },
    {
      header: "Nemo enim ipsam voluptatem",
      link: { url: "/#" },
      size: "small",
      icon: { type: "enclosed-check-dark-48px", size: "48px" }
    },
    {
      header: "Sed ut perspiciatis, unde omnis",
      link: { url: "/#" },
      size: "small",
      icon: { type: "enclosed-check-dark-48px", size: "48px" }
    }
  ]
};

const motion = {
  motion: true,
  motionDistance: "75px",
  motionDirection: "bottom"
};

return (
  <ListFeat content={content} motion={motion}/>
)

ListFeat5

Props -

content (required) - object containing header, subHeader, type, cards
- header - key that has a string as a value
- subHeader - key that has a string as a value -insertCardHTML - key that is a boolean
- iconListItems - array containing objects. Each indice is an object with two keys. The first key is header which has a string as a value. The second key is text which has a string as a value.
- type (required) - required to render the correct listFeat. ListFeat5 must be list_feat_3
motion - boolean used to indicate whether or not motion should be used
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.

Example -

const content = {
  header: "Hello everyone! This is a header. Enjoy!",
  subheader: "This is truly wonderful.",
  type: "list_feat_5",
  insertCardHTML: true,
  iconListItems: [
    {
      header: "Good design is innovative",
      text:
        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
    },
    {
      header: "Good design is innovative",
      text:
        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
    },
    {
      header: "Good design is innovative",
      text:
        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
    },
    {
      header: "Good design is innovative",
      text:
        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
    },
    {
      header: "Good design is innovative",
      text:
        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
    },
    {
      header: "Good design is innovative",
      text:
        "<p>Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit.</p>"
    }
  ]
};

const motion = {
  motion: true,
  motionDistance: "75px",
  motionDirection: "bottom"
};

return (
  <ListFeat content={content} motion={motion}/>
)

ListFeat6

Props -

content (required) - object containing header, subHeader, type, cards
- header - key that has a string as a value
- subHeader - key that has a string as a value
- images - key that has an object as a value. Object has src and altText keys which values are strings.
- list - array containing strings in each indice. The strings of each indice will be rendered onto the component as html tags
- type (required) - required to render the correct listFeat. ListFeat6 must be list_feat_3
motion - boolean used to indicate whether or not motion should be used
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.

Example -

const content = {
  header: "Hello everyone! This is a header. Enjoy!",
  subheader: "This is truly wonderful.",
  images: { src: "https://fpoimg.com/500x500", alt: "placeholder" },
  type: "list_feat_6",
  list: [
    "<h4>Viewer Edition</h4><p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p><p>Donec sit amet arcu nibh. Donec vitae dolor nunc.</p><p>Mauris ut feugiat mauris eu volutpat arcu. Integer mollis neque dui ac auctor dui tincidunt eget.</p>",
    "<h4>Field Data Edition</h4>p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p><p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>",
    "<h4>A list of great ideas:</h4><ul><li>Lorem ipsum dolor sit amet consectetur adipiscing elit</li><li>Donec sit amet arcu nibh Donec vitae dolor nunc.</li><li>Cras vel pharetra augue at sollicitudin velit. Vivamus dapibus quis nisi et vestibulum.</li><li>Mauris ut feugiat mauris eu volutpat arcu. Integer mollis neque dui ac auctor dui tincidunt eget.</li><ul>",
    "<h4>Here It Is: </h4><ul><li>Lorem ipsum dolor sit amet consectetur adipiscing elit</li><li>Donec sit amet arcu nibh Donec vitae dolor nunc.</li><li>Cras vel pharetra augue at sollicitudin velit. Vivamus dapibus quis nisi et vestibulum.</li><li>Mauris ut feugiat mauris eu volutpat arcu. Integer mollis neque dui ac auctor dui tincidunt eget.</li><li>It's not Latin, though it looks like it, and it actually says nothing,</li><ul>"
  ]
};

const motion = {
  motion: true,
  motionDistance: "75px",
  motionDirection: "bottom"
};

return (
  <ListFeat content={content} motion={motion}/>
)

ListFeat7

Props -

header (required) - string for generating header text
subHeader - string for generating sub-header text
type (required) - required to render the correct listFeat. ListFeat7 must be list_feat_7
content (required) - object containing images, ctas, text, variant, headers, subheaders, button, link, videos
- card - an array containing the following objects:
  - text - string for generating body text
  - ctas - object for generating a <CTASection> component
  - images - object with keys url and altText with values as strings
  - video - object with keys url and allowFullScreen. url has a value as a string. allowFullScreen is a boolean
    - uuid - string used for rendering Vidyard video embeds
  - vidyard - boolean for indicating that a Vidyard component should be rendered
  - thumbnail - object with keys url and altText with values as strings, used for a thumbnail image in place of a video, while video is not playing
  - link - object with keys url and text with values as strings.
motion - boolean used to indicate whether or not motion should be used

Example -

export const mockContent = {
  header: "Hello everyone! This is a header. Enjoy!",
  subheader: "This is truly wonderful.",
  type: "list_feat_7",
  cards: [
    {
      video: {
        url: "https://www.youtube.com/embed/UY7r0juBF8Y",
        allowFullScreen: "true"
      },
      thumbnail: {
        url: "https://fpoimg.com/2880x1920",
        altText: "fpo"
      },
      header: "Here is a title! Woooo",
      link: {
        url: "/#",
        text: "Link"
      },
      text:
        "Ut in amet id proident commodo officia cillum. Aliqua id ex culpa labore duis minim fugiat proident ad deserunt qui."
    },
    {
      video: {
        url: "https://www.youtube.com/watch?v=sBws8MSXN7A",
        allowFullScreen: "true"
      },
      thumbnail: {
        url: "https://fpoimg.com/2880x1920",
        altText: "fpo"
      },
      header: "This is a React Tutorial. Enjoy!",
      link: {
        url: "/#",
        text: "Link"
      },
      text:
        "Watch this and you'll be able to make beautiful applications using the wonderful framework of React, built by Facebook"
    },
    {
      image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
      header: "Here is a title! Woooo",
      link: {
        url: "/#",
        text: "Link"
      },
      text:
        "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
    },
    {
      header: "Here is a title! Woooo",
      subheader: "sub header! ",
      text:
        "It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries"
    },
    {
      image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
      header: "Here is a title! Woooo",
      link: {
        url: "/#",
        text: "Link"
      },
      text:
        "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
    }
  ]
};

export const motion = {
  motion: true,
  motionDistance: "75px",
  motionDirection: "bottom"
};

return (
  <ListFeat content={content} motion={motion} />
)

EventCard

Props -

content (required) - object used for delivering content strings to the EventCard
- date - string that generates the dates of the event
- year - string that generates the year of the event
- industry - string that indicates which industry the event applies to (i.e 'construction')
- industryLabel - a string to generate the label that preceedes the industry text
- name - a string used to indicate the name of the event
- location - a string used for indicating the location of the event, can also be used for event description
- link - an object for generating the link that the card sends the user to
  - url - string that creates the href or to props depending on whether an <a> or React Router <NavLink> is generated
- images - object for generating the 95px x 95px image
  - url - source of the image
  - altText - alt string for the image

Example -

const date = "Nov 18 - Nov 19";
const year = "2019";
const image = { url: "http://fpoimg.com/95x95" };
const industry = "Construction";
const industryLabel = "Industry";
const name = "Trimble Digital Construction Summit - The Bridge to BIM";
const location = "Tivoli Hotel and Congress Center, Copenhagen";
const content = {
  date,
  year,
  image,
  industry,
  industryLabel,
  name,
  location,
  link: { url: "/wut" }
};

return (
  <div style={{ maxWidth: "1200px", margin: "auto", padding: "0 32px" }}>
    <EventCard content={content} />
  </div>
)

SupportCard -

content (required) - object used for delivering content strings to the SupportCard
- header - string for generating header text
- headerLabel - string that preceeds the header text with an added colon
- subHeader - string for generating sub-header text
- subHeaderLabel - string that preceeds the sub-header text with an added colon
- product - product name that succeeds the sub-header
- sections - array of objects with value and format strings for generating columns

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

External Libraries Used:

Luna Organisms

Hero1 -

Props -

Example -

Hero2

Props -

Example -

Hero3

Props -

Hero4/Hero5

Props -

Example -

Hero6

Props -

Example -

FilterHero

Props -

Example -

Feat1

Props -

Example -

Feat2A

Props -

Example -

Feat2B

Props -

Example -

Feat3

Description -

Props -

Example -

Feat4

Props -

Example -

Feat5

Props -

Example -

Feat6

Props -

Example -

Feat7

Props -

Example -

ParallaxBackground

Props -

Example -

NavBar

Notes -

Props -

Example -

Footer

Props -

Example -

ListFeat1

Props -

Example -

ListFeat2

Props -

Example -

ListFeat3

Props -

Example -

ListFeat4

Props -

Example -

ListFeat5

Props -

Example -

ListFeat6

Props -

Example -

ListFeat7

Props -