Developing components

Component common props

When developing a component, you should always document the props. This is done by using TypeScript’s interface syntax.

interface CommonProps {
  /**
   * The ID of the component
   */
  id: string;
  /**
   * The class name of the component
   */
  className: string;
  /**
   * The style of the component
   */
  style: React.CSSProperties;
}

The following props are common to a lot of components and should be reused as much as possible.

kind

The kind of the component is used to define a behaviour of the component

TODO: Currenty called type in Figma, but should be renamed to kind

/**
 * The kind of the component is used to define a behaviour or a style of the component
 */
kind: "primary" | "secondary" | "tertiary";

type

The type of the component is used to define a style of the component. It is used to define for example the colour of the component.

/**
 * The type of the component is used to define a style of the component. It is used to define for example the colour of the component.
 */
type: "default" | "success" | "warning" | "error";

The difference between kind and type is that kind is used to define a behaviour of the component, while type is used to define a style of the component.

size

The size of the component is used to define the size of the component.

/**
 * The size of the component is used to define the size of the component
 */
size: "small" | "medium" | "large";

disabled

The disabled prop is used to define if the component is disabled or not.

/**
 * The disabled prop is used to define if the component is disabled or not
 */
disabled: boolean;

loading

The loading prop is used to define if the component is in a loading state or not.

/**
 * The loading prop is used to define if the component is in a loading state or not
 */
loading: boolean;

onClick

The onClick prop is used to define the click event of the component.

/**
 * The onClick prop is used to define the click event of the component
 */
onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;

onChange

The onChange prop is used to define the change event of the component.

/**
 * The onChange prop is used to define the change event of the component
 */
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;

Other onAction events should be documented in the same way.

pageWidth

The pageWidth prop is used to define the width of the page and is usually using the Wrapper component internally.

/**
 * The pageWidth prop is used to define the width of the page
 */
pageWidth: "small" | "medium" | "large";