Skip to main contentFreight Trust

Boilerplate

Boilerplate of all the components of the carbon theme

Activating the dialog

The Feedback button only becomes visible once you’ve supplied an onSubmit handler. To do that, we’ll need to shadow the FeedbackDialog component.

  1. Create a new javascript file under src/gatsby-theme-carbon/components/FeedbackDialog/FeedbackDialog.js. Matching the filepath exactly is important here.

  2. Copy the following snippet into your new file

import React from "react";
import ThemeFeedbackDialog from "gatsby-theme-carbon/src/components/FeedbackDialog/FeedbackDialog";
const FeedbackDialog = ({ props }) => {
const onSubmit = (data) => {
console.log({ ...data });
};
return <ThemeFeedbackDialog {...props} onSubmit={onSubmit} />;

Creating a handler

Next, you’ll need a place to send the data. For the Carbon website, we use a serverless function that forwards the data to a SurveyGizmo quiz. You can see that function here.

The handler can send a fetch request off to the endpoint you create. Update the onSubmit handler to send the data wherever you want. This function receives the following arguments:

  • experience: “Negative”, “Positive” or “Neutral”
  • comment: An optional comment
  • path: the window location when the survey was submitted
const FeedbackDialog = ({ props }) => {
const onSubmit = data => {
fetch(process.env.API_ENDPOINT, {
method: 'POST',
body: JSON.stringify(data),
});
return <ThemeFeedbackDialog {...props} onSubmit={onSubmit} />;
};

GifPlayer

Light
IBM Cloud Pictograms
Dark
IBM Cloud Platform Prototype

Code

Place two images inside of the GifPlayer component. The first image will be used as the gif, the second image will be used as the static image on pause. Only provide two images inside the component, do not place any other children inside the component.

Light
components/GifPlayer/GifPlayer.js
<Column colLg='4'>
<GifPlayer>
![IBM Cloud Pictograms](/images/IBM_Cloud_Pictograms.gif) // must be gif
![IBM Cloud Pictograms](/images/IBM_Cloud_Pictograms.jpg) // must be static
image
Dark
components/GifPlayer/GifPlayer.js
<Column colLg='8'>
<GifPlayer color='dark'>
![IBM Cloud Platform Prototype](/images/IBM_Cloud_Platform_Prototype.gif) //
must be gif
![IBM Cloud Platform Prototype](/images/IBM_Cloud_Platform_Prototype.jpg) //must
be static image

Row

The <Row> component is a wrapper that adds the bx--row class to a wrapper div. You will want to use this to define rows that you will place <Column> components inside of.

Code

components/Grid.js
<Row>
<Column>
Content or additional <Components />
</Column>
</Row>
Row props
propertypropTyperequireddefaultdescription
childrennode
classNamestringAdd custom class name

Column

The <Column> component is used to define column widths for your content, you can set the rules at different breakpoints with the props.

Example

Grid Example
Grid Example
Grid Example
No gutter left
Grid Example
Grid Example
Grid Example
No gutter
Grid Example
Grid Example
Grid Example
Offset
Grid Example
Grid Example

Code

components/Grid.js
<Row>
<Column colMd={4} colLg={4}>
![Grid Example](images/Article_05.jpg)
</Column>
<Column colMd={4} colLg={4}>
No gutter left
components/Grid.js
<Row>
<Column colMd={4} colLg={4} noGutterMdLeft>
![Grid Example](images/Article_05.jpg)
</Column>
<Column colMd={4} colLg={4} noGutterMdLeft>
No gutter
components/Grid.js
<Row>
<Column colMd={4} colLg={4} noGutterSm>
![Grid Example](images/Article_05.jpg)
</Column>
<Column colMd={4} colLg={4} noGutterSm>
Offset
components/Grid.js
<Row>
<Column colMd={4} colLg={4} offsetLg={4}>
![Grid Example](images/Article_05.jpg)
</Column>
<Column colMd={4} colLg={4}>

ImageCard

Code

components/ImageCard/ImageCard.js
<Row className="image-card-group">
<Column colMd={4} colLg={4} noGutterSm>
<ImageCard title="Title" subTitle="Subtitle" href="/">
![Square](/images/square.jpg)
</ImageCard>
<ImageCard

ImageGallery

Click on an image to open the gallery.

Code

You can use the ImageGallery component in markdown by nesting your images inside the ImageGallery component and using the ImageGalleryImage component to define the image’s location, title, alt tag, and the columns the image on the page will span at the medium and large breakpoints. There is no gallery view for mobile so the small breakpoint is not defined.

Here’s an example of how to use the ImageGallery and the ImageGalleryImage components in markdown.

/components/ImageGallery.mdx
<ImageGallery>
<ImageGalleryImage alt="IBM Design" title="IBM Design" col={4}>
![IBM Design](/images/IBM_Design_landing.jpg)
</ImageGalleryImage>

InlineNotification

Info
Error
Success
Warning

Code

components/InlineNotification/InlineNotification.js
// Info
<InlineNotification>
**Lorem ipsum:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim

MiniCard

GroupAside

When you have the mini resource card sitting aside the main content, be sure to add the gutterLg, properties to the <MiniCard>. This will ensure the MiniCard has the appropriate gutters at the approriate breakpoints.

Code

Group
components/MiniCard/MiniCard.js
<CardGroup>
<MiniCard title="26 characters per MiniCard" href="/demo">
![Github icon](/images/github-icon.png)
</MiniCard>
<MiniCard title="Use the default icon" href="/demo" />
<MiniCard
title="Choose from other icons"
href="/demo"
actionIcon="arrowRight"
Aside
components/MiniCard/MiniCard.js
<Row>
<Column colLg={8}>
When you have the mini resource card sitting aside the main content, be sure to
add the `gutterLg`, properties to the `<MiniCard>`. This will ensure the
MiniCard has the appropriate gutters at the approriate breakpoints.
</Column>

ResourceCard

Code

Group
components/ResourceCard/ResourceCard.js
<Row className="resource-card-group">
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Carbon Design System"
href="https://www.carbondesignsystem.com">
![Github icon](/images/github-icon.png)
With title
components/ResourceCard/ResourceCard.js
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="With subtitle"
title="Title"
aspectRatio="2:1"
actionIcon="arrowRight"
href="https://gatsby-theme-carbon.now.sh">
Only subtitle
components/ResourceCard/ResourceCard.js
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Only subtitle"
actionIcon="download"
aspectRatio="2:1"
href="https://gatsby-theme-carbon.now.sh">
![Github icon](/images/github-icon.png)
Dark
components/ResourceCard/ResourceCard.js
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Alternate color"
title="Dark"
aspectRatio="2:1"
color="dark"
actionIcon="email"
href="https://gatsby-theme-carbon.now.sh">
Disabled
components/ResourceCard/ResourceCard.js
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
title="Disabled card"
aspectRatio="2:1"
disabled
href="https://gatsby-theme-carbon.now.sh"
/>
</Column>

Tabs

The tab component can be used for a variety of content. From text, to images, to columns. If you want to have multiple columns, you’ll need to use our Row and Column helpers as demonstrated in the “Two images” tab.

Code

Text
components/Tabs/Tabs.js
// Start with the wrapper component (Tabs)
<Tabs>
<Tab label="Text">
The tab component can be used for a variety of content. From text, to images, to
Single image
components/Tabs/Tabs.js
<Tab label="Single image">
If your content is full width, you don’t need `Row` and `Column` ![color
array](images/colors.jpg)
</Tab>
Multiple images
components/Tabs/Tabs.js
<Tab label="Two images">
<Row>
<Column colSm={6} colLg={6}>
Column one