@highlight-ui/layout - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

dist/cjs/index.js

@@ -43,18 +43,18 @@ 'use strict';
 var styles$1 = {
-  "stack": "Stack-module__1EcFT-8V__v0-2-1",
-  "spacing-0": "Stack-module__6lRZvyuc__v0-2-1",
-  "spacing-0-5": "Stack-module__g9Dn3J1U__v0-2-1",
-  "spacing-1": "Stack-module__IqD3B5Y2__v0-2-1",
-  "spacing-2": "Stack-module__y3QoKyTs__v0-2-1",
-  "spacing-3": "Stack-module__x0wRVlfo__v0-2-1",
-  "spacing-4": "Stack-module__thm96A-q__v0-2-1",
-  "spacing-5": "Stack-module__oMP2QdUC__v0-2-1",
-  "spacing-6": "Stack-module__KD9eyULq__v0-2-1",
-  "spacing-8": "Stack-module__pesLazX2__v0-2-1",
-  "spacing-10": "Stack-module__YpWt5m5x__v0-2-1",
-  "spacing-12": "Stack-module__E0RiyNBI__v0-2-1",
-  "spacing-16": "Stack-module__MTsavH-u__v0-2-1",
-  "spacing-20": "Stack-module__pqezygQ0__v0-2-1",
-  "spacing-24": "Stack-module__tFFh2DIC__v0-2-1",
-  "spacing-32": "Stack-module__FcbRkwlI__v0-2-1"
+  "stack": "Stack-module__1EcFT-8V__v0-2-2",
+  "spacing-0": "Stack-module__6lRZvyuc__v0-2-2",
+  "spacing-0-5": "Stack-module__g9Dn3J1U__v0-2-2",
+  "spacing-1": "Stack-module__IqD3B5Y2__v0-2-2",
+  "spacing-2": "Stack-module__y3QoKyTs__v0-2-2",
+  "spacing-3": "Stack-module__x0wRVlfo__v0-2-2",
+  "spacing-4": "Stack-module__thm96A-q__v0-2-2",
+  "spacing-5": "Stack-module__oMP2QdUC__v0-2-2",
+  "spacing-6": "Stack-module__KD9eyULq__v0-2-2",
+  "spacing-8": "Stack-module__pesLazX2__v0-2-2",
+  "spacing-10": "Stack-module__YpWt5m5x__v0-2-2",
+  "spacing-12": "Stack-module__E0RiyNBI__v0-2-2",
+  "spacing-16": "Stack-module__MTsavH-u__v0-2-2",
+  "spacing-20": "Stack-module__pqezygQ0__v0-2-2",
+  "spacing-24": "Stack-module__tFFh2DIC__v0-2-2",
+  "spacing-32": "Stack-module__FcbRkwlI__v0-2-2"
 };
@@ -73,25 +73,25 @@ var Stack = React__default["default"].forwardRef(function (_a, ref) {
 var styles = {
-  "inline": "Inline-module__bXbkibKw__v0-2-1",
-  "wrap": "Inline-module__YF9rtVNH__v0-2-1",
-  "justify-start": "Inline-module__-WI6T-Pu__v0-2-1",
-  "align-start": "Inline-module__uD5yQygQ__v0-2-1",
-  "justify-center": "Inline-module__iz1r0ak9__v0-2-1",
-  "align-center": "Inline-module__97XnVtXw__v0-2-1",
-  "justify-end": "Inline-module__5EBc1Pez__v0-2-1",
-  "align-end": "Inline-module__oXJkmk-c__v0-2-1",
-  "spacing-0": "Inline-module__SAlBEU9D__v0-2-1",
-  "spacing-0-5": "Inline-module__D1V7owtS__v0-2-1",
-  "spacing-1": "Inline-module__OigU1RUi__v0-2-1",
-  "spacing-2": "Inline-module__XTSrxcwj__v0-2-1",
-  "spacing-3": "Inline-module__kTVUcUWM__v0-2-1",
-  "spacing-4": "Inline-module__G9I7Vdtm__v0-2-1",
-  "spacing-5": "Inline-module__WVGqRKtI__v0-2-1",
-  "spacing-6": "Inline-module__W9oxvNGX__v0-2-1",
-  "spacing-8": "Inline-module__Us2UoNCq__v0-2-1",
-  "spacing-10": "Inline-module__D3CLyxtx__v0-2-1",
-  "spacing-12": "Inline-module__3hwmqgcV__v0-2-1",
-  "spacing-16": "Inline-module__rlpoWnog__v0-2-1",
-  "spacing-20": "Inline-module__esCMhoV1__v0-2-1",
-  "spacing-24": "Inline-module__WSUyNPQ2__v0-2-1",
-  "spacing-32": "Inline-module__F-eRrOMk__v0-2-1"
+  "inline": "Inline-module__bXbkibKw__v0-2-2",
+  "wrap": "Inline-module__YF9rtVNH__v0-2-2",
+  "justify-start": "Inline-module__-WI6T-Pu__v0-2-2",
+  "align-start": "Inline-module__uD5yQygQ__v0-2-2",
+  "justify-center": "Inline-module__iz1r0ak9__v0-2-2",
+  "align-center": "Inline-module__97XnVtXw__v0-2-2",
+  "justify-end": "Inline-module__5EBc1Pez__v0-2-2",
+  "align-end": "Inline-module__oXJkmk-c__v0-2-2",
+  "spacing-0": "Inline-module__SAlBEU9D__v0-2-2",
+  "spacing-0-5": "Inline-module__D1V7owtS__v0-2-2",
+  "spacing-1": "Inline-module__OigU1RUi__v0-2-2",
+  "spacing-2": "Inline-module__XTSrxcwj__v0-2-2",
+  "spacing-3": "Inline-module__kTVUcUWM__v0-2-2",
+  "spacing-4": "Inline-module__G9I7Vdtm__v0-2-2",
+  "spacing-5": "Inline-module__WVGqRKtI__v0-2-2",
+  "spacing-6": "Inline-module__W9oxvNGX__v0-2-2",
+  "spacing-8": "Inline-module__Us2UoNCq__v0-2-2",
+  "spacing-10": "Inline-module__D3CLyxtx__v0-2-2",
+  "spacing-12": "Inline-module__3hwmqgcV__v0-2-2",
+  "spacing-16": "Inline-module__rlpoWnog__v0-2-2",
+  "spacing-20": "Inline-module__esCMhoV1__v0-2-2",
+  "spacing-24": "Inline-module__WSUyNPQ2__v0-2-2",
+  "spacing-32": "Inline-module__F-eRrOMk__v0-2-2"
 };
@@ -98,0 +98,0 @@ var Inline = React__default["default"].forwardRef(function (_a, ref) {

dist/esm/index.js

@@ -31,18 +31,18 @@ import React from 'react';
 var styles$1 = {
-  "stack": "Stack-module__1EcFT-8V__v0-2-1",
-  "spacing-0": "Stack-module__6lRZvyuc__v0-2-1",
-  "spacing-0-5": "Stack-module__g9Dn3J1U__v0-2-1",
-  "spacing-1": "Stack-module__IqD3B5Y2__v0-2-1",
-  "spacing-2": "Stack-module__y3QoKyTs__v0-2-1",
-  "spacing-3": "Stack-module__x0wRVlfo__v0-2-1",
-  "spacing-4": "Stack-module__thm96A-q__v0-2-1",
-  "spacing-5": "Stack-module__oMP2QdUC__v0-2-1",
-  "spacing-6": "Stack-module__KD9eyULq__v0-2-1",
-  "spacing-8": "Stack-module__pesLazX2__v0-2-1",
-  "spacing-10": "Stack-module__YpWt5m5x__v0-2-1",
-  "spacing-12": "Stack-module__E0RiyNBI__v0-2-1",
-  "spacing-16": "Stack-module__MTsavH-u__v0-2-1",
-  "spacing-20": "Stack-module__pqezygQ0__v0-2-1",
-  "spacing-24": "Stack-module__tFFh2DIC__v0-2-1",
-  "spacing-32": "Stack-module__FcbRkwlI__v0-2-1"
+  "stack": "Stack-module__1EcFT-8V__v0-2-2",
+  "spacing-0": "Stack-module__6lRZvyuc__v0-2-2",
+  "spacing-0-5": "Stack-module__g9Dn3J1U__v0-2-2",
+  "spacing-1": "Stack-module__IqD3B5Y2__v0-2-2",
+  "spacing-2": "Stack-module__y3QoKyTs__v0-2-2",
+  "spacing-3": "Stack-module__x0wRVlfo__v0-2-2",
+  "spacing-4": "Stack-module__thm96A-q__v0-2-2",
+  "spacing-5": "Stack-module__oMP2QdUC__v0-2-2",
+  "spacing-6": "Stack-module__KD9eyULq__v0-2-2",
+  "spacing-8": "Stack-module__pesLazX2__v0-2-2",
+  "spacing-10": "Stack-module__YpWt5m5x__v0-2-2",
+  "spacing-12": "Stack-module__E0RiyNBI__v0-2-2",
+  "spacing-16": "Stack-module__MTsavH-u__v0-2-2",
+  "spacing-20": "Stack-module__pqezygQ0__v0-2-2",
+  "spacing-24": "Stack-module__tFFh2DIC__v0-2-2",
+  "spacing-32": "Stack-module__FcbRkwlI__v0-2-2"
 };
@@ -61,25 +61,25 @@ var Stack = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 var styles = {
-  "inline": "Inline-module__bXbkibKw__v0-2-1",
-  "wrap": "Inline-module__YF9rtVNH__v0-2-1",
-  "justify-start": "Inline-module__-WI6T-Pu__v0-2-1",
-  "align-start": "Inline-module__uD5yQygQ__v0-2-1",
-  "justify-center": "Inline-module__iz1r0ak9__v0-2-1",
-  "align-center": "Inline-module__97XnVtXw__v0-2-1",
-  "justify-end": "Inline-module__5EBc1Pez__v0-2-1",
-  "align-end": "Inline-module__oXJkmk-c__v0-2-1",
-  "spacing-0": "Inline-module__SAlBEU9D__v0-2-1",
-  "spacing-0-5": "Inline-module__D1V7owtS__v0-2-1",
-  "spacing-1": "Inline-module__OigU1RUi__v0-2-1",
-  "spacing-2": "Inline-module__XTSrxcwj__v0-2-1",
-  "spacing-3": "Inline-module__kTVUcUWM__v0-2-1",
-  "spacing-4": "Inline-module__G9I7Vdtm__v0-2-1",
-  "spacing-5": "Inline-module__WVGqRKtI__v0-2-1",
-  "spacing-6": "Inline-module__W9oxvNGX__v0-2-1",
-  "spacing-8": "Inline-module__Us2UoNCq__v0-2-1",
-  "spacing-10": "Inline-module__D3CLyxtx__v0-2-1",
-  "spacing-12": "Inline-module__3hwmqgcV__v0-2-1",
-  "spacing-16": "Inline-module__rlpoWnog__v0-2-1",
-  "spacing-20": "Inline-module__esCMhoV1__v0-2-1",
-  "spacing-24": "Inline-module__WSUyNPQ2__v0-2-1",
-  "spacing-32": "Inline-module__F-eRrOMk__v0-2-1"
+  "inline": "Inline-module__bXbkibKw__v0-2-2",
+  "wrap": "Inline-module__YF9rtVNH__v0-2-2",
+  "justify-start": "Inline-module__-WI6T-Pu__v0-2-2",
+  "align-start": "Inline-module__uD5yQygQ__v0-2-2",
+  "justify-center": "Inline-module__iz1r0ak9__v0-2-2",
+  "align-center": "Inline-module__97XnVtXw__v0-2-2",
+  "justify-end": "Inline-module__5EBc1Pez__v0-2-2",
+  "align-end": "Inline-module__oXJkmk-c__v0-2-2",
+  "spacing-0": "Inline-module__SAlBEU9D__v0-2-2",
+  "spacing-0-5": "Inline-module__D1V7owtS__v0-2-2",
+  "spacing-1": "Inline-module__OigU1RUi__v0-2-2",
+  "spacing-2": "Inline-module__XTSrxcwj__v0-2-2",
+  "spacing-3": "Inline-module__kTVUcUWM__v0-2-2",
+  "spacing-4": "Inline-module__G9I7Vdtm__v0-2-2",
+  "spacing-5": "Inline-module__WVGqRKtI__v0-2-2",
+  "spacing-6": "Inline-module__W9oxvNGX__v0-2-2",
+  "spacing-8": "Inline-module__Us2UoNCq__v0-2-2",
+  "spacing-10": "Inline-module__D3CLyxtx__v0-2-2",
+  "spacing-12": "Inline-module__3hwmqgcV__v0-2-2",
+  "spacing-16": "Inline-module__rlpoWnog__v0-2-2",
+  "spacing-20": "Inline-module__esCMhoV1__v0-2-2",
+  "spacing-24": "Inline-module__WSUyNPQ2__v0-2-2",
+  "spacing-32": "Inline-module__F-eRrOMk__v0-2-2"
 };
@@ -86,0 +86,0 @@ var Inline = /*#__PURE__*/React.forwardRef(function (_a, ref) {

package.json

 {
   "name": "@highlight-ui/layout",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "author": "Personio GmbH & Co. KG",
@@ -47,3 +47,3 @@ "main": "dist/cjs/index.js",
   },
-  "gitHead": "3758f5f987510edb100f5a22ebe829b7cee4573f"
+  "gitHead": "50d4ff0ea3cef7a8fed5b666a7788bb279fdb6da"
 }

README.md

@@ -1,16 +0,49 @@
-# `@highlight-ui/layout`
+[![npm](https://img.shields.io/npm/v/@highlight-ui/layout)](https://www.npmjs.com/package/@highlight-ui/layout)
+[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=Storybook&color=red)](https://storybook.personio.design/?path=/story/foundations-layout)
 
+# @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
 
-```bash
-yarn add @highlight-ui/layout
+Using npm:
+
 ```
+$ npm install @highlight-ui/layout
+```
 
-## Stack
+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:
+
+```scss
+@import url('@highlight-ui/layout');
+```
+
+## Getting started
+
+### Stack
+
 The `Stack` component manages the **vertical** spacing between elements.
 
-### Usage
 
@@ -23,8 +56,2 @@ In your TypeScript file:
 
-In your (S)CSS file:
-
-```scss
-@import url('@highlight-ui/layout');
-```
-
 ```jsx
@@ -38,14 +65,17 @@ <Stack space="spacing-4">
 
-### Props
+#### **Props** 📜
 
-| Prop    | Type          | Default     | Description                          |
-| :------ | :------------ | :---------- | :----------------------------------- |
-| `space` | `SpacingType` | `spacing-0` | The spacing applied to the children. |
 
-## Inline
 
+| 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.                     |
+
+### 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).
 
-### Usage
-
 In your TypeScript file:
@@ -57,8 +87,2 @@
 
-In your (S)CSS file:
-
-```scss
-@import url('@highlight-ui/layout');
-```
-
 ```jsx
@@ -74,13 +98,17 @@ <Inline space="spacing-4" align="center">
 
-### Props
+#### **Props** 📜
 
-| Prop            | Type            | Default     | Description                                                             |
-| :-------------- | :-------------- | :---------- | :---------------------------------------------------------------------- |
-| `space`         | `SpacingType`   | `spacing-0` | The spacing applied to the children.                                    |
-| `align`         | `AlignmentType` | `start`     | Horizontal alignment of the items.                                      |
-| `alignVertical` | `AlignmentType` | `start`     | Vertical alignment of the items.                                        |
-| `wrap`          | `boolean`       | `true`      | Whether to wrap the items when their width exceeds the container width. |
 
-## Types
+| 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.                                    |
 
+### Shared types
+
 | Type            | Values                                                                                                                                                                                                    |
@@ -91,4 +119,32 @@ | :-------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 
-## Documentation
+## Testing
 
-Please visit [personio.design]()
+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](https://www.npmjs.com/package/@highlight-ui/select)
+
+## Contributing 🖌️
+
+If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/22ac59-support--contribute/b/463fdd).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63319

increased by4.34%

Number of lines in readme file

146

increased by62.22%

No dependency changes