Adding new components to the website

New components will automatically be discovered and added to the website navigation using the information provided in the front matter that lives in the header of each Markdown (.md) file that describes the component. This front matter includes the component’s ID or name and the section of the site where it should appear.

---
id: Your component name
section: Where this lives in the above structure, e.g. "components"
---

Each component will also need a related illustration, which will appear in the component catalog view, and summary text, which describes the component and will appear at the top of the component page in all views.

The image file link and summary text must be added to the following file: packages/documentation-site/patternfly-docs/pages/landing-pages/components/components-data.json. In this file, you will find an entry for each component in the following format:

“<component-name>": {
“Illustration”:”./images/component-illustrations/<component-name>.png”,
“summary”:”<summary text>
}

Summaries should be short (1-2 sentences) and give readers a quick overview the component’s purpose. You may also include reference links to related components, if applicable, or other essential information that consumers of the component should be aware of.

Illustrations provide a visual that will help consumers identify the component when they do not know its name. For that reason they should be simple and distinct. Guidelines for creating component illustrations are included below.

Finally, add the new image to the index file within that folder as this is what allows them to be shared to the other files that build out the component gallery: packages/patternfly-docs/images/component-illustrations/index.js. For each image, there is an entry in the form:

export { default as <component_name> } from './<image-name>.png';

The component name and the image name must match and be consistent with the component as it is named in the Markdown file for that component.

Creating component illustrations

You should use a graphics tool like Sketch or Figma for creating illustrations. If you are using Sketch, add your new illustration to the master component illustrations file on Sketch Cloud.

When designing illustrations, we want to ensure simplicity, while maintaining clarity. It's important that all illustrations are clear and cohesive. If you are using the Sketch file, you will find some predefined symbols to use in place of common elements like buttons and text. Here are some rules and guidelines to follow:

1. Begin with a 200px x 200px artboard

2. Create an outline for the component (if needed):

• Fill white
• Border-none
• Shadow: Color #151515, Opacity 10%, adjust x-y accordingly

3. When using colors, ensure they align with PatternFly colors. For more information or other color variants, visit PatternFly color guidelines. The following are a set of default colors to use:

• Red (failure): #C9190B
• Green (success): #3E8635
• Yellow (warning): #F0AB00
• Blue (primary): #0066CC
• Grey (standard): #D2D2D2

4. Do not include every detail. You should simplify icons and other graphics where possible. For example, when putting success icons, use a solid green circle to represent the icon, and do not include the checkmark.

5. Avoid using text as much as possible. Instead, use “Flow” font to represent where text would be.

• XL headers: 16 px
• L headers: 12 px
• Body: 8px
• Small body: 6px
• If needed, use Lorem Ipsum to represent text

6. Export the illustration as a 2x PNG with a white background and open a pull request to add it to the ./images/component-illustrations folder on patternfly-org.