@highlight-ui/layout v0.6.4

@highlight-ui/layout

Layout components are used to manage the white space between components and other elements. They produce visual consistency across Personio products by using a limited set of standardised spacing tokens. This also removes the hassle of space-management from the user.

Features

• Vertical spacing
  • Controlled by spacing tokens
• Horizontal spacing
  • Controlled by spacing tokens
  • Horizontal and vertical alignment based on flex values
  • Toggle to allow wrapping

Installation

Using npm:

npm install @highlight-ui/layout

Using yarn:

yarn add @highlight-ui/layout

Using pnpm:

pnpm install @highlight-ui/layout

Remember to import the styles in your (S)CSS file, like so:

@import url('@highlight-ui/layout');

Usage

Stack

The Stack component manages the vertical spacing between elements.

In your TypeScript file:

import { Stack, StackProps } from '@highlight-ui/layout';

<Stack space="spacing-4">
  <Placeholder>Item 1</Placeholder>
  <Placeholder>Item 2</Placeholder>
  <Placeholder>Item 3</Placeholder>
</Stack>

Props 📜

Inline

The Inline component manages the horizontal spacing between elements. In addition to this, this component can also control the alignment of the items (both vertically and horizontally).

In your TypeScript file:

import { Inline, InlineProps } from '@highlight-ui/layout';

<Inline space="spacing-4" align="center">
  <Placeholder>Item 1</Placeholder>
  <Placeholder>Item 2</Placeholder>
  <Placeholder>Item 3</Placeholder>
  <Placeholder>Item 4</Placeholder>
  <Placeholder>Item 5</Placeholder>
</Inline>

Props 📜

Shared types

Testing

This example serves as starting point on how you can use these layout components as part of your tests.

Certain props are already defined in the renderInline (or renderStack) method, to reuse through individual tests. Any props can be overriden by passing these to the above function.

const testId = 'test-inline';
const metadata = { testId };

function renderInline(props?: Partial<InlineProps>) {
  render(
    <Inline {...props} metadata={metadata}>
      <p>Item 1</p>
      <p>Item 2</p>
    </Inline>,
  );
  return screen.getByTestId(testId);
}

Place in design system 💻

These layout components are not yet used within the highlight-ui library. They are still being develiped to be initially used within the following organisms:

• select

Contributing 🖌️

If you're interested in contributing, please visit our contribution page.