Getting Started for Developers

This guide will get you started with the Peakon Bedrock library, which consists of a wide range of React components that will enable you to build a consistent, accessible and performant user interface while freeing up time to focus other work.

All components are created using TypeScript. While this ensures correct technical usage, please read the component documentation to make sure that you understand when to use which component. This is one of the most important take-aways: choosing the right component is vital for the end-user experience.

Before you get started, make sure that you have the following installed:

• NodeJS v18
• React

InstallationPermalink to: Installation

To install the library, run the following command in your project:

$ npm install @peakon/bedrock --save

RequirementsPermalink to: Requirements

The library provides individual React components which means that there are some basic requirements for use.

CSSPermalink to: CSS

The components in the library are primarily built for use within the Peakon product, which already includes a reset file and a global CSS file that contains styling for all of the components (see Global CSS approach)

All CSS within Bedrock is standard CSS that requires no pre- or post-processing, but feel free to add it to your favorite processor.

Using Bedrock CSSPermalink to: Using Bedrock CSS

Either import the files in the entrypoint of your app:

import "@peakon/bedrock/css/custom-properties/index.css";
import "@peakon/bedrock/css/reset/index.css";
import "@peakon/bedrock/css/index.css";

or include it in your webpack config:

module.exports = {
  /* ... */
  entry: [
    /* ... */
    "@peakon/bedrock/css/custom-properties/index.css",
    "@peakon/bedrock/css/reset/index.css",
    "@peakon/bedrock/css/index.css",
  ],
};

No restyling allowedPermalink to: No restyling allowed

One of the advantages of having our component library is that we can change things globally from one central code base, so please do not overwrite any component styles in your own CSS files. In most cases your restyling needs can probably be solved in one of two ways:

• Ask the designer to use a Bedrock component with no modifications.
• Use a container element for layout purposes:

<div className="buttonContainer">
  <Button variant="primary">Button Label</Button>
</div>

and then adding the required CSS to that element instead. However it is not allowed to overwrite the styles, ie.

/* Don't ever do this. */
.buttonContainer button {
  background-color: hotpink;
}

If either of those two methods mentioned above do not work for you, please contact the Design Systems team for further guidance — we might be able to help you.

CSS Custom properties auto completePermalink to: CSS Custom properties auto complete

If you want to have autocomplete and go to definition of the Bedrock CSS custom properties, you can use the CSS Variable Autocomplete(external link) plugin for VS Code.

Configure it to use the custom properties from @peakon/bedrock in your .vscode/settings like this:

{
  ...,
  "cssVariables.lookupFiles": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "node_modules/@peakon/bedrock/css/custom-properties/index.css"
  ]
}

This will provide you with autocomplete and go to definition for the custom properties. You can also hover over a custom property to see it's value.