Usage

How to use React Magma components. The examples here use the Button component. More information about each of the components can be found in the Component API section.

Basic Usage

To use a component, simply import the component and add it to your UI. The styles are already bundled with the component. Here is a most basic example:

import React from 'react';

import { Button } from 'react-magma-dom';

export function Example() {
  return <Button>Hello World</Button>;
}

Using TypeScript Enums

When using a prop that takes an enum, you must import that type from React Magma if you are using TypeScript.

import React from 'react';

import { Button, ButtonVariant } from 'react-magma-dom';

export function Example() {
  return <Button variant={ButtonVariant.solid}>Hello World</Button>;
}

Importing Global Styles

Most of the styles for React Magma are bundled within their components. However, a GlobalStyles object is available, which provides a very basic CSS reset plus the required fonts, body styles, and some generic styles for links. It is recommended that you use this GlobalStyles component in any app that uses React Magma to insure consistency across products.

To use the GlobalStyles object, simply import it from react-magma-dom and include it in your App.

The GlobalStyles component can be nested inside the ThemeContext.Provider to inherit styles from the theme.

import React from 'react';

import { GlobalStyles } from 'react-magma-dom';

export function Example() {
  return (
    <div>
      <GlobalStyles />
    </div>
  );
}

Using the Magma Theme

React Magma uses the Magma theme for styles, which includes fonts, colors and screen sizes for media queries. To remain consistent, you can import magma and reference these values in your application's styles.

The complete Magma theme can be found in the Github repository. For more information about colors, see the Design Documentation.

import React from 'react';

import styled from '@emotion/styled';
import { magma } from 'react-magma-dom';

export function Example() {
  const StyledDiv = styled('div')(props => ({
    background: props.theme.colors.neutral,
    color: props.theme.colors.neutral100,
    padding: props.theme.spaceScale.spacing02,
  }));

  return <StyledDiv theme={magma}>Hello world</StyledDiv>;
}

Testing

We recommend using jest with @testing-library/react.

Wherever possible selecting elements should be handled using visible text or aria-labels with the @testing-library/react queries for text and labelText. If there are multiple elements that are returned from a query you can refine the results using the SelectorMatcherOptions in your query.

If that is not sufficient, each of our components accept a testId that is passed to the primary element as a data-testid attribute that can be found with the getByTestId helper function from @testing-library/react.