PatternFly React Docs

This site uses gatsby.

For an overview of the project structure please refer to the Gatsby documentation - Building with Components...

Note: All commands below assume you are on the root directory in this repository.

Install

Run to install all the dependencies

lerna bootstrap

Running

To start the site locally.

yarn build && yarn start:pf4

Building

To build the site.

yarn build:site

Live examples

Disabling globally

You can turn off the functionality to live edit the examples globally by settings GATSBY_LIVE_EXAMPLES to false, either by editing .env.development and .env.production or by setting it in the CLI prior to starting the docs:

GATSBY_LIVE_EXAMPLES=false yarn start:pf4

Other example settings

There are some special static fields you can specify in the example to change behavior:

// Sets the title for the example
static title = 'Example title';

// Sets the description for the example
static description = 'Example description';

// True by default, set to false to disable live editing for this example
static live = false;

// Pass imports into the liveScope object so it is available to the live editor.
// By default, the live editor only knows about React.*, react-core components, react-icons, and the react-styles css function
// If you have additional imports in your examples, they can be passed to the live editor scope like this:
static liveScope = { spacingStyles };

// Additional styles relevant to the example display can be added via a static field getContainerProps.
// getContainerProps is an import to a .js file that has content such as:
/*
import { css, StyleSheet } from '@breakaway/react-styles';
const styles = StyleSheet.create({
  demoLayout: {
    '& > .pf-c-alert': {
      marginBottom: '0.5rem'
    }
  }
});
export default () => ({ className: css(styles.demoLayout) });
*/
static getContainerProps = getContainerProps;

In the examples *.docs.js file, you can specify these properties:

// Main title for the examples
title: 'Alert',

// Components to display in the props table
components: {
  Alert
},

// Enums that need to be evaluated for the props table
enumValues: {
  'Object.values(AlertVariant)': Object.values(AlertVariant)
},

// The examples
examples: [SuccessExample, DangerExample, InfoExample, WarningExample],
// True to show links instead of inline examples, also turns live editing off

fullPageOnly: false