Security News
PyPI Introduces Digital Attestations to Strengthen Python Package Security
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
@highlight-ui/layout
Advanced tools
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.
spacing
tokensspacing
tokensflex
valuesUsing 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');
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>
Prop | Type | Required | Default | Description |
---|---|---|---|---|
space | SpacingType | No | spacing-0 | The spacing applied to the children. |
className | string | No | null | Classname to apply to the element. |
metadata | ComponentMetadata | No | null | Object used for testing. Contains testId and actionName. |
children | React.ReactNode | No | null | Components to apply spacing between. |
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>
Prop | Type | Required | Default | Description |
---|---|---|---|---|
space | SpacingType | No | spacing-0 | The spacing applied to the children. |
align | AlignmentType | No | start | Horizontal alignment of the items. |
alignVertical | AlignmentType | No | start | Vertical alignment of the items. |
wrap | boolean | No | true | Whether to wrap the items when their width exceeds the container width. |
className | string | No | null | Classname to apply to the element. |
metadata | ComponentMetadata | No | null | Object used for testing. Contains testId and actionName. |
children | React.ReactNode | No | null | Components to apply spacing between. |
Type | Values |
---|---|
SpacingType | spacing-0 , spacing-0-5 , spacing-1 , spacing-2 , spacing-3 , spacing-4 , spacing-5 , spacing-6 , spacing-8 , spacing-10 , spacing-12 , spacing-16 , spacing-20 , spacing-24 , spacing-32 |
AlignmentType | start , center , end |
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);
}
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:
If you're interested in contributing, please visit our contribution page.
FAQs
A collection of layout helper components.
The npm package @highlight-ui/layout receives a total of 278 weekly downloads. As such, @highlight-ui/layout popularity was classified as not popular.
We found that @highlight-ui/layout demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.