This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
#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.
images (required) - object consisting of desktop, tablet, and mobile image objects with url and altText strings
header (required) - string for generating header text
text - string for generating body text
ctas - object used to populate a
contentSide - string that indicates whether content is on the right or left side of the component. Defaults to right.
backgroundImage - url string that points to a background image address
backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
className - string that is interpolated into the organisms class for targeted styling and/or manipulation
insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion - boolean that indicates whether to use the animation to render the component.
const ctas = {
ctaOne: {
text: "Button",
url: "/#"
},
ctaTwo: {
text: "Button",
url: "/#"
},
subCTA: {
text: "Button",
url: "/#"
}
};
const images = {
desktop: {
url: "https://fpoimg.com/1600x1200",
altText: "placeholder image"
},
tablet: { url: "https://fpoimg.com/800x600", altText: "placeholder image" },
mobile: { url: "https://fpoimg.com/400x400", altText: "placeholder image" }
};
return (
images={images}
header="Design is design."
text="Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis."
ctas={ctas}
/>
);
`
---
#### Hero2
###### Props -
- header (required) - string used for generating header text
- subHeader - string used for generating sub header text
- text (required) - string used for generating body text
- ctas - object used for generating a or
- imageSide - string used for indicating the side of the page that the image should render on. Defaults to right.
- images - object used for populating adaptive images. Requires a imageThreeXTwo, imageFourXThree, and imageOneXOne key/value pairings with url and altText strings.
- variant - string of either 'a' or 'b' for determing whether or not to use a or
- backgroundImage - url string that points to a background image address
- backgroundPosition - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
- backgroundImageWidth - number indicating the width of the background image in pixels
- backgroundImageHeight - number indicating the height of the background image in pixels
- backgroundOffsetY - number indicating the offset of the background image on the Y axis
- backgroundOffsetX - number indicating the offset of the background image on the X axis
- zIndex - number indicating the desired z-index of the background image.
- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
- theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
- className - string that is interpolated into the organisms class for targeted styling and/or manipulation
- insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
- id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
- motion - boolean that indicates whether to use the react-reveal library to render the component inside a component.
- motionDirection - string indicating the direction that the component should travel from as it fades in.
- motionDistance - string indicating the distance that the component travels during motion
###### Example -
`
const images = {
imageThreeXTwo: {
url: "https://fpoimg.com/600x400",
altText: "placeholder"
},
imageFourXThree: {
url: "https://fpoimg.com/800x600",
altText: "placeholder"
},
imageOneXOne: {
url: "https://fpoimg.com/500x500",
altText: "placeholder"
}
};
const ctas = {
ctaOne: {
text: "Button",
url: "/#"
},
ctaTwo: {
text: "Button",
url: "/#"
},
subCTA: {
text: "Button",
url: "/#"
}
};
return (
imageSide="left"
images={images}
header="Good design is innovative."
text="Ipsum anim laboris dolore incididunt proident quis tempor."
ctas={ctas}
/>
);
`
---
#### Hero3
###### Props -
- images (required) - object consisting of two image objects that have url and altText strings. The first object is imageFourByOne and the second is imageTwoByOne
- header (required) - string used for generating header text
- subHeader (required) - string used for generating sub-header text
- backgroundImage - url string that points to a background image address
- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
- theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
- className - string that is interpolated into the organisms class for targeted styling and/or manipulation
- id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
- motion - boolean that indicates whether to use the animation to render the component.
###### Example -
`
const images = {
imageFourByOne: {
url: "http://fpoimg.com/1600x400?text=4:1",
altText: "placeholder image"
},
imageTwoByOne: {
url: "http://fpoimg.com/1600x800?text=2:1",
altText: "placeholder image"
}
};
return (
images={images}
header="Good design is innovative."
subHeader="Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis."
/>
);
`
---
#### Hero4
###### Props -
- video (required) - object consisting of url (string), autoPlay (boolean), and allowFulScreen (boolean) variables.
- header (required) - string for generating header text
- text (required) - string for generating body text
- ctas - object for generating a component
- backgroundImage - url string that points to a background image address
- backgroundPosition - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
- backgroundImageWidth - number indicating the width of the background image in pixels
- backgroundImageHeight - number indicating the height of the background image in pixels
- backgroundOffsetY - number indicating the offset of the background image on the Y axis
- backgroundOffsetX - number indicating the offset of the background image on the X axis
- zIndex - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
- theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
- className - string that is interpolated into the organisms class for targeted styling and/or manipulation
- insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
- id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
- motion - boolean that indicates whether to use the react-reveal library to render the component inside a component.
- motionDirection - string indicating the direction that the component should travel from as it fades in.
- motionDistance - string indicating the distance that the component travels during motion
###### Example -
`
const mockCTALinks = {
ctaOne: {
text: "Button",
url: "/#"
},
ctaTwo: {
text: "Button",
url: "/#"
},
subCTA: {
text: "Button",
url: "/#"
}
};
const mockVideo = {
url: "https://www.youtube.com/embed/UY7r0juBF8Y",
allowFullScreen: "true"
};
return (
video={mockVideo}
header="Design is design."
text="Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis."
ctas={mockCTALinks}
allowFullScreen={true}
/>
);
`
---
#### Hero5
###### Props -
- header (required) - string for generating header text
- subHeader - string for generating sub-header text
- text - string for generating body text
- ctas - object for generating a component
- backgroundImage - url string that points to a background image address
- backgroundPosition - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
- backgroundImageWidth - number indicating the width of the background image in pixels
- backgroundImageHeight - number indicating the height of the background image in pixels
- backgroundOffsetY - number indicating the offset of the background image on the Y axis
- backgroundOffsetX - number indicating the offset of the background image on the X axis
- zIndex - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
- theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
- className - string that is interpolated into the organisms class for targeted styling and/or manipulation
- insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
- id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
- motion - boolean that indicates whether to use the react-reveal library to render the component inside a component.
- motionDirection - string indicating the direction that the component should travel from as it fades in.
- motionDistance - string indicating the distance that the component travels during motion
###### Example -
`
const mockCTALinks = {
ctaOne: {
text: "Button",
url: "/#"
},
ctaTwo: {
text: "Button",
url: "/#"
},
subCTA: {
text: "Button",
url: "/#"
}
};
const mockImage = {
url: "./1-to-1.png",
altText: "placeholder"
};
image={mockImage}
header="Design is design."
subHeader="Nulla ex commodo reprehenderit aliquip."
text="Esse aliquip ad in et ut ipsum paEu elit consectetur aliquip excepteur fugiat ut qui dolor pariatur consectetur.riatur elit quis."
ctas={mockCTALinks}
/>
`
---
#### Hero6
###### Props -
- header (required) - string for generating header text
- subHeader - string for generating sub-header text
- text (required) - string for generating body text
- ctas - object for generating a component
- images (required) - object consisting of three image objects, each with url and altText strings. The objects are imageThreeByTwo, imageFourByThree, and imageOneByOne.
- imageSide - string used for indicating the side of the page that the image should render on. Defaults to right.
- backgroundImage - url string that points to a background image address
- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
- theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
- className - string that is interpolated into the organisms class for targeted styling and/or manipulation
- insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
- id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
- motion - boolean that indicates whether to use the react-reveal library to render the component inside a component.
- motionDirection - string indicating the direction that the component should travel from as it fades in.
- motionDistance - string indicating the distance that the component travels during motion
###### Example -
`
const images = {
imageThreeByTwo: {
url: "http://fpoimg.com/2400x1600?text=3:2",
altText: "placeholder image"
},
imageFourByThree: {
url: "http://fpoimg.com/1600x1200?text=4:3",
altText: "placeholder image"
},
imageOneByOne: {
url: "http://fpoimg.com/1600x1600?text=1:1",
altText: "placeholder image"
}
};
const ctas = {
ctaOne: {
url: "/#",
text: "Button"
},
ctaTwo: {
url: "/#",
text: "Button"
}
};
return (
imageSide="left"
images={images}
header="Good design is innovative."
text="Do in anim ex excepteur magna excepteur mollit pariatur sit sunt ullamco velit occaecat."
ctas={ctas}
/>
);
`
#### FilterHero
###### Props -
- header - string for generating header text
- text - string for generating body text.
- dropdowns - an array used for generating Dropdown components - see example for structuring
- checkboxes - an array used for generating Checkbox components - see example for structuring
- handleDropdownChange - method used for handling new dropdown selections - takes the new selection and the associated name of the dropdown from the event object arguments.
- handleCheckboxChange - method used for handling checkbox toggling - takes a boolean for the status of the checkbox and the name of the checkbox from the event object as arguments.
- backgroundImage - url string that points to a background image address
- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
- theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
- className - string that is interpolated into the organisms class for targeted styling and/or manipulation
- insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
###### Example -
`
handleDropdownChange = (selection, name) => {
this.setState({[name]: selection})
}
handleCheckboxChange = (bool, name) => {
this.setState({[name]: bool})
}
const header = 'I am a header'
const text = 'Tempor ex esse ipsum sit eiusmod dolor mollit cupidatat elit cupidatat pariatur commodo non est.'
const dropdownOne = {
options: ["trade one", "trade two", "trade three"],
defaultText: "All",
name: "Trade"
};
const dropdownTwo = {
options: ["category one", "category two", "category three"],
defaultText: "All",
name: "Category"
};
const dropdowns = [dropdownOne, dropdownTwo]
const checkboxOne = {
name: "Checkbox One"
};
const checkboxTwo = { name: "Checkbox Two" };
const checkboxes = [checkboxOne, checkboxTwo];
return (
header={header}
text={text}
insertHTML={true}
dropdowns={dropdowns}
checkboxes={checkboxes}
handleDropdownChange={this.handleDropdownChange}
handleCheckboxChange={this.handleCheckboxChange}
backgroundColor='#5e5e5e'
/>
)
`
---
#### Feat1
###### Props -
- header (required) - string for generating header text
- subHeader - string for generating sub-header text
- text (required) - string for generating body text
- cta - object for generating a component requiring url and text strings
- image (required) - object consisting of url and altText strings.
- variant (required) - string consisting of either a or b to indicate which version of Feat1 to render in terms of positioning.
- backgroundImage - url string that points to a background image address
- backgroundPosition - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
- backgroundImageWidth - number indicating the width of the background image in pixels
- backgroundImageHeight - number indicating the height of the background image in pixels
- backgroundOffsetY - number indicating the offset of the background image on the Y axis
- backgroundOffsetX - number indicating the offset of the background image on the X axis
- zIndex - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
- theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
- className - string that is interpolated into the organisms class for targeted styling and/or manipulation
- insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
- id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
- motion - boolean that indicates whether to use the react-reveal library to render the component inside a component.
- motionDirection - string indicating the direction that the component should travel from as it fades in.
- motionDistance - string indicating the distance that the component travels during motion
###### Example -
`
const mockheader = "Design is good.";
const mockSubheader = "You should know about it, maybe?";
const mockText =
"Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur.";
const mockCTA = { url: "/#", text: "Button" };
const mockImage = {
url: "https://fpoimg.com/500x500",
altText: "placeholder"
};
return (
header={mockheader}
subHeader={mockSubheader}
text={mockText}
cta={mockCTA}
variant="a"
image={mockImage}
/>
);
`
---
#### Feat2
###### Props -
- header (required) - string that generates header text
- image (required) - object with url and altText strings
- text (required) - string that generates body text
- (required) - child component for rendering folds in the component with each fold taking a header string as a prop
- backgroundImage - url string that points to a background image address
- backgroundPosition - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
- backgroundImageWidth - number indicating the width of the background image in pixels
- backgroundImageHeight - number indicating the height of the background image in pixels
- backgroundOffsetY - number indicating the offset of the background image on the Y axis
- backgroundOffsetX - number indicating the offset of the background image on the X axis
- zIndex - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
- theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
- className - string that is interpolated into the organisms class for targeted styling and/or manipulation
- insertHTML - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
- id - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
- motion - boolean that indicates whether to use the react-reveal library to render the component inside a component.
- motionDirection - string indicating the direction that the component should travel from as it fades in.
- motionDistance - string indicating the distance that the component travels during motion
###### Example -
`
import { AccordionFold } from 'terra-component-lib'
const mockImage = {
url: "https://fpoimg.com/500x500",
altText: "Placeholder image"
};
return (
image={mockImage}
header="Good design is a thing, apparently."
text="Veniam laboris laboris consequat et."
>
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.
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.
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.
);
`
---
#### Feat3
###### Props -
- header (required) - string that generates header text
- images (required) - object with desktop, tablet, and mobile sub-objects with url and altText strings
- text - string that generates body text
- content (required) - an array of objects with header and text strings
- cta (required) - object consisting of url and text strings for generating a
- backgroundImage - url string that points to a background image address
- backgroundPosition - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
- backgroundImageWidth - number indicating the width of the background image in pixels
- backgroundImageHeight - number indicating the height of the background image in pixels
- backgroundOffsetY - number indicating the offset of the background image on the Y axis
- backgroundOffsetX - number indicating the offset of the background image on the X axis
- zIndex - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
- theme - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
- className - string that is interpolated into the organisms class for targeted styling and/or manipulation
- insertCardHTML - boolean that indicates if text strings for should be passed as innerHTML (true) or into a tag as a string. Used when Drupal is returning WYSIWYG html blobs.
insertHTML
- - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
id
- - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion
- - boolean that indicates whether to use the react-reveal library to render the component inside a component.
motionDirection
- - string indicating the direction that the component should travel from as it fades in.
motionDistance
- - string indicating the distance that the component travels during motion
`
###### Example -
`
const header = "Good design is aesthetic.";
const text =
"Fugiat ad est sit non elit nulla laborum occaecat proident non.";
const content = [
{
header: "Good design is innovative",
text:
"Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit."
},
{
header: "Good design is innovative",
text:
"Cupidatat ea in duis ullamco nostrud cupidatat quis aliqua ex labore occaecat sit."
}
];
const cta = { url: "/#", text: "Sub-CTA" };
const images = {
desktop: { url: "https://fpoimg.com/600x900", altText: "placeholder" },
tablet: { url: "https://fpoimg.com/800x600", altText: "placeholder" },
mobile: { url: "https://fpoimg.com/500x500", altText: "placeholder" }
};
return (
text={text}
content={content}
cta={cta}
images={images}
/>
);
header
---
#### Feat4
###### Props -
- (required) - string that generates header text
text
- - string that generates sub-header text, can be an HTML blob
variant
- (required) - string of either 'a', 'b', or 'c' for determining what kind of cards are generated
text
- - string that generates body text
content
- (required) - an array of objects with header and text strings and a link object with url and text strings. Variants 'a' and 'b' do not require a link.
columns
- (required) - a number used to determing how many columns are on the page for card/tile generation. Typically 2, 3, or 4.
image
- - object with url and altText strings
backgroundImage
- - url string that points to a background image address
backgroundPosition
- - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
backgroundImageWidth
- - number indicating the width of the background image in pixels
backgroundImageHeight
- - number indicating the height of the background image in pixels
backgroundOffsetY
- - number indicating the offset of the background image on the Y axis
backgroundOffsetX
- - number indicating the offset of the background image on the X axis
zIndex
- - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
theme
- - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
className
- - string that is interpolated into the organisms class for targeted styling and/or manipulation
insertCardHTML
- - boolean that indicates if text strings for should be passed as innerHTML (true) or into a tag as a string. Used when Drupal is returning WYSIWYG html blobs.
insertHTML
- - boolean used to indicate if the text string is an HTML blob from a Drupal WYSIWYG. Will dangerouslySetInnerHTML()
id
- - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion
- - boolean that indicates whether to use the react-reveal library to render the component inside a component.
motionDirection
- - string indicating the direction that the component should travel from as it fades in.
motionDistance
- - string indicating the distance that the component travels during motion
`
###### Example -
`
const mockContent = [
{
header: "Design is good. Period.",
text:
"Forget the fat lady! You're obsessed with the fat lady! Drive us out of here!",
link: {
url: "/#",
text: "Button"
}
},
{
header: "Design is good. Period.",
text:
"Forget the fat lady! You're obsessed with the fat lady! Drive us out of here!",
link: {
url: "/#",
text: "Button"
}
}
];
return (
content={mockContent}
variant="a"
columns={2}
image={{
url: "https://fpoimg.com/600x400",
altText: "placeholder image"
}}
/>
);
cards
---
#### Feat4Flex
###### Props -
- (required) - array of content for Terra Cards or LogoDumplings
backgroundImage
- - url string that points to a background image address
backgroundPosition
- - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
backgroundImageWidth
- - number indicating the width of the background image in pixels
backgroundImageHeight
- - number indicating the height of the background image in pixels
backgroundOffsetY
- - number indicating the offset of the background image on the Y axis
backgroundOffsetX
- - number indicating the offset of the background image on the X axis
zIndex
- - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
theme
- - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
className
- - string that is interpolated into the organisms class for targeted styling and/or manipulation
id
- - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion
- - boolean that indicates whether to use the react-reveal library to render the component inside a component.
motionDirection
- - string indicating the direction that the component should travel from as it fades in.
motionDistance
- - string indicating the distance that the component travels during motion
fallbackImage
- - source for a fallback image if images break
`
###### Example -
`
const cards = [
{
image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
header: "Card",
link: {
url: "/#",
text: "Link"
},
text: "Ut in amet id proident commodo officia cillum."
},
{
image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
header: "Card",
link: {
url: "/#",
text: "Link"
},
text: "Ut in amet id proident commodo officia cillum."
},
{
image: { url: "https://fpoimg.com/400x225", altText: "FPO Image" },
header: "Card",
link: {
url: "/#",
text: "Link"
},
text: "Ut in amet id proident commodo officia cillum."
},
]
return
dumplings
---
#### Feat5
###### Props -
- (required) - an array of objects used for generating components; see the Terra component library for requirements
type
- - string used to determine whether or not small or large dumplings are used ('a' is large, 'b' is small)
header
- (required) - string used for generating header text
subHeader
- - string used for generating sub-header text
backgroundImage
- - url string that points to a background image address
backgroundPosition
- - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
backgroundImageWidth
- - number indicating the width of the background image in pixels
backgroundImageHeight
- - number indicating the height of the background image in pixels
backgroundOffsetY
- - number indicating the offset of the background image on the Y axis
backgroundOffsetX
- - number indicating the offset of the background image on the X axis
zIndex
- - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
theme
- - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
className
- - string that is interpolated into the organisms class for targeted styling and/or manipulation
id
- - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion
- - boolean that indicates whether to use the react-reveal library to render the component inside a component.
motionDirection
- - string indicating the direction that the component should travel from as it fades in.
motionDistance
- - string indicating the distance that the component travels during motion
`
###### Example -
`
const mockDumplings = [
{
header: "Dumplin'",
link: { url: "/#" },
size: "small",
icon: { type: "enclosed-check-dark-48px", size: "48px" }
},
{
header: "Dumplin'",
link: { url: "/#" },
size: "small",
icon: { type: "enclosed-check-dark-48px", size: "48px" }
}
];
return (
type="a"
header="Design is design"
subHeader="It's like, this thing, you know?"
/>
);
ctas
---
#### Feat6
###### Props -
- {required} - used for generating ctaOne and ctaTwo from
header
- (required) - string for generating header text
subHeader
- - string used for generating sub-header text
backgroundImage
- - url string that points to a background image address
backgroundPosition
- - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
backgroundImageWidth
- - number indicating the width of the background image in pixels
backgroundImageHeight
- - number indicating the height of the background image in pixels
backgroundOffsetY
- - number indicating the offset of the background image on the Y axis
backgroundOffsetX
- - number indicating the offset of the background image on the X axis
zIndex
- - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
theme
- - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
className
- - string that is interpolated into the organisms class for targeted styling and/or manipulation
id
- - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion
- - boolean that indicates whether to use the react-reveal library to render the component inside a component.
motionDirection
- - string indicating the direction that the component should travel from as it fades in.
motionDistance
- - string indicating the distance that the component travels during motion
`
###### Example -
`
const mockCTALinks = {
ctaOne: {
text: "Button",
url: "/#"
},
ctaTwo: {
text: "Button",
url: "/#"
}
};
return
content
---
#### Feat7
###### Props -
- (required) - array of objects use for generating 'cards' consisting of header, text, and url strings.
header
- (required) - string used for generating header text
backgroundImage
- - url string that points to a background image address
backgroundPosition
- - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
backgroundImageWidth
- - number indicating the width of the background image in pixels
backgroundImageHeight
- - number indicating the height of the background image in pixels
backgroundOffsetY
- - number indicating the offset of the background image on the Y axis
backgroundOffsetX
- - number indicating the offset of the background image on the X axis
zIndex
- - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
theme
- - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
className
- - string that is interpolated into the organisms class for targeted styling and/or manipulation
id
- - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion
- - boolean that indicates whether to use the react-reveal library to render the component inside a component.
motionDirection
- - string indicating the direction that the component should travel from as it fades in.
motionDistance
- - string indicating the distance that the component travels during motion
`
###### Example -
`
const content = [
{
header: "Design!",
text:
"Enim laborum ad anim laborum ad minim ipsum proident est cillum aliqua. Irure laboris aute ullamco ad Lorem et culpa id commodo quis sunt labore in id.",
url: "/#"
},
{
header: "Aesthetics!",
text:
"Enim laborum ad anim laborum ad minim ipsum proident est cillum aliqua.",
url: "/#"
}
];
return
header
---
#### Feat8
###### Props -
- - string used for generating header text
subHeader
- - string used for generating sub-header text;
buttonLink
- - object used for generating a with url and text strings
ctas
- - array of cta objects with text and url strings for generating CTAs below the headers
cards
- (required) - array of objects used for generating components
backgroundImage
- - url string that points to a background image address
backgroundPosition
- - string indicating where the background image appears. Options are top, top-left, top-right, bottom, bottom-left, bottom-right, right, left and center.
backgroundImageWidth
- - number indicating the width of the background image in pixels
backgroundImageHeight
- - number indicating the height of the background image in pixels
backgroundOffsetY
- - number indicating the offset of the background image on the Y axis
backgroundOffsetX
- - number indicating the offset of the background image on the X axis
zIndex
- - number indicating the desired z-index of the background image.- backgroundColor - string for specifying color for the background. Accepts RGB, RGBA, hex, etc.
theme
- - string indicating the theme that styles the organism. Options are theme-1, theme-2, theme-3, theme-4, theme-5.
className
- - string that is interpolated into the organisms class for targeted styling and/or manipulation
insertCardHTML
- - boolean that indicates if text strings for should be passed as innerHTML (true) or into a tag as a string. Used when Drupal is returning WYSIWYG html blobs.
id
- - string used for generating the component's id attribute. Will default to the organism's header text or the organism type.
motion
- - boolean that indicates whether to use the react-reveal library to render the component inside a component.
motionDirection
- - string indicating the direction that the component should travel from as it fades in
motionDistance
- - string indicating the distance that the component travels during motion
CTAType
- - string used for specifying the type of