@highlight-ui/layout - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/cjs/index.d.ts

 export { Stack } from './src/stack';
 export type { StackProps } from './src/stack';
+export { Inline } from './src/inline';
+export type { InlineProps } from './src/inline';

dist/cjs/index.js

@@ -52,19 +52,19 @@ 'use strict';
 
-var styles = {
-  "stack": "Stack-module__1Z0TVMk0__v0-1-0",
-  "spacing-0": "Stack-module__2ySgOKfI__v0-1-0",
-  "spacing-0-5": "Stack-module__3aTg7ont__v0-1-0",
-  "spacing-1": "Stack-module__PDhQa1l5__v0-1-0",
-  "spacing-2": "Stack-module__1jenF-92__v0-1-0",
-  "spacing-3": "Stack-module__36QSkEUh__v0-1-0",
-  "spacing-4": "Stack-module__1YqBVz_r__v0-1-0",
-  "spacing-5": "Stack-module__pl44GgJA__v0-1-0",
-  "spacing-6": "Stack-module__2yG7841h__v0-1-0",
-  "spacing-8": "Stack-module__3mcyNuOg__v0-1-0",
-  "spacing-10": "Stack-module__2Pc3xBPs__v0-1-0",
-  "spacing-12": "Stack-module__nNSh936F__v0-1-0",
-  "spacing-16": "Stack-module__1tkzlJ5Y__v0-1-0",
-  "spacing-20": "Stack-module__2bXwUC-Y__v0-1-0",
-  "spacing-24": "Stack-module__2NtXK43f__v0-1-0",
-  "spacing-32": "Stack-module__1oPS-87M__v0-1-0"
+var styles$1 = {
+  "stack": "Stack-module__1Z0TVMk0__v0-2-0",
+  "spacing-0": "Stack-module__2ySgOKfI__v0-2-0",
+  "spacing-0-5": "Stack-module__3aTg7ont__v0-2-0",
+  "spacing-1": "Stack-module__PDhQa1l5__v0-2-0",
+  "spacing-2": "Stack-module__1jenF-92__v0-2-0",
+  "spacing-3": "Stack-module__36QSkEUh__v0-2-0",
+  "spacing-4": "Stack-module__1YqBVz_r__v0-2-0",
+  "spacing-5": "Stack-module__pl44GgJA__v0-2-0",
+  "spacing-6": "Stack-module__2yG7841h__v0-2-0",
+  "spacing-8": "Stack-module__3mcyNuOg__v0-2-0",
+  "spacing-10": "Stack-module__2Pc3xBPs__v0-2-0",
+  "spacing-12": "Stack-module__nNSh936F__v0-2-0",
+  "spacing-16": "Stack-module__1tkzlJ5Y__v0-2-0",
+  "spacing-20": "Stack-module__2bXwUC-Y__v0-2-0",
+  "spacing-24": "Stack-module__2NtXK43f__v0-2-0",
+  "spacing-32": "Stack-module__1oPS-87M__v0-2-0"
 };
@@ -78,7 +78,52 @@ var Stack = React__default["default"].forwardRef(function (_a, ref) {
   return React__default["default"].createElement("div", __assign({
-    className: classnames__default["default"](styles.stack, styles[space], className),
+    className: classnames__default["default"](styles$1.stack, styles$1[space], className),
     ref: ref
   }, utilsCommons.parseMetadata(metadata)), children);
 });
+var styles = {
+  "inline": "Inline-module__2aZXP6_L__v0-2-0",
+  "wrap": "Inline-module__3_a_UnFU__v0-2-0",
+  "justify-start": "Inline-module__3tWW_bxE__v0-2-0",
+  "align-start": "Inline-module__3KOYdxUy__v0-2-0",
+  "justify-center": "Inline-module__3374-2FN__v0-2-0",
+  "align-center": "Inline-module__27MAKqkj__v0-2-0",
+  "justify-end": "Inline-module__20Q7r0QF__v0-2-0",
+  "align-end": "Inline-module__32BDfYVC__v0-2-0",
+  "spacing-0": "Inline-module__3QBhX-d-__v0-2-0",
+  "spacing-0-5": "Inline-module__2BjQmfKr__v0-2-0",
+  "spacing-1": "Inline-module__3pNbh9rd__v0-2-0",
+  "spacing-2": "Inline-module__2faoCu-m__v0-2-0",
+  "spacing-3": "Inline-module__2wWXsICI__v0-2-0",
+  "spacing-4": "Inline-module__1ZQERGdz__v0-2-0",
+  "spacing-5": "Inline-module__2oLnGAsK__v0-2-0",
+  "spacing-6": "Inline-module__1cCvK5Ld__v0-2-0",
+  "spacing-8": "Inline-module__1C9ylay-__v0-2-0",
+  "spacing-10": "Inline-module__2LTq5c9n__v0-2-0",
+  "spacing-12": "Inline-module__wdvPl5Ud__v0-2-0",
+  "spacing-16": "Inline-module__2F43RmI6__v0-2-0",
+  "spacing-20": "Inline-module__JGDJkFEE__v0-2-0",
+  "spacing-24": "Inline-module__WKta76h4__v0-2-0",
+  "spacing-32": "Inline-module__1wjFy7b-__v0-2-0"
+};
+var Inline = React__default["default"].forwardRef(function (_a, ref) {
+  var _b;
+
+  var _c = _a.space,
+      space = _c === void 0 ? 'spacing-0' : _c,
+      _d = _a.align,
+      align = _d === void 0 ? 'start' : _d,
+      _e = _a.alignVertical,
+      alignVertical = _e === void 0 ? 'start' : _e,
+      _f = _a.wrap,
+      wrap = _f === void 0 ? true : _f,
+      className = _a.className,
+      metadata = _a.metadata,
+      children = _a.children;
+  return React__default["default"].createElement("div", __assign({
+    className: classnames__default["default"](styles.inline, styles[space], styles["justify-" + align], styles["align-" + alignVertical], (_b = {}, _b[styles.wrap] = wrap, _b), className),
+    ref: ref
+  }, utilsCommons.parseMetadata(metadata)), children);
+});
+exports.Inline = Inline;
 exports.Stack = Stack;
 //# sourceMappingURL=index.js.map

dist/cjs/src/stack/Stack.d.ts

 import React from 'react';
-import { PropsWithMetadata } from '@highlight-ui/utils-commons';
-import spacings from '@highlight-ui/tokens/dist/spacings.json';
-export declare type SpacingType = keyof typeof spacings | 'spacing-0';
-export declare type StackProps = PropsWithMetadata<{
-    /** The spacing applied to the children */
-    space?: SpacingType;
-    /** Allows providing a custom class name to the container element */
-    className?: string;
-    /** Elements to apply spacing */
-    children?: React.ReactNode;
-}>;
+import type { LayoutProps } from '../types';
+export declare type StackProps = LayoutProps;
 declare const Stack: React.ForwardRefExoticComponent<{
-    /** The spacing applied to the children */
-    space?: SpacingType | undefined;
-    /** Allows providing a custom class name to the container element */
+    space?: import("../types").SpacingType | undefined;
     className?: string | undefined;
-    /** Elements to apply spacing */
-    children?: React.ReactNode;
 } & {
     metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined;
+} & {
+    children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 export default Stack;

dist/esm/index.d.ts

 export { Stack } from './src/stack';
 export type { StackProps } from './src/stack';
+export { Inline } from './src/inline';
+export type { InlineProps } from './src/inline';

dist/esm/index.js

@@ -33,19 +33,19 @@ import React from 'react';
 
-var styles = {
-  "stack": "Stack-module__1Z0TVMk0__v0-1-0",
-  "spacing-0": "Stack-module__2ySgOKfI__v0-1-0",
-  "spacing-0-5": "Stack-module__3aTg7ont__v0-1-0",
-  "spacing-1": "Stack-module__PDhQa1l5__v0-1-0",
-  "spacing-2": "Stack-module__1jenF-92__v0-1-0",
-  "spacing-3": "Stack-module__36QSkEUh__v0-1-0",
-  "spacing-4": "Stack-module__1YqBVz_r__v0-1-0",
-  "spacing-5": "Stack-module__pl44GgJA__v0-1-0",
-  "spacing-6": "Stack-module__2yG7841h__v0-1-0",
-  "spacing-8": "Stack-module__3mcyNuOg__v0-1-0",
-  "spacing-10": "Stack-module__2Pc3xBPs__v0-1-0",
-  "spacing-12": "Stack-module__nNSh936F__v0-1-0",
-  "spacing-16": "Stack-module__1tkzlJ5Y__v0-1-0",
-  "spacing-20": "Stack-module__2bXwUC-Y__v0-1-0",
-  "spacing-24": "Stack-module__2NtXK43f__v0-1-0",
-  "spacing-32": "Stack-module__1oPS-87M__v0-1-0"
+var styles$1 = {
+  "stack": "Stack-module__1Z0TVMk0__v0-2-0",
+  "spacing-0": "Stack-module__2ySgOKfI__v0-2-0",
+  "spacing-0-5": "Stack-module__3aTg7ont__v0-2-0",
+  "spacing-1": "Stack-module__PDhQa1l5__v0-2-0",
+  "spacing-2": "Stack-module__1jenF-92__v0-2-0",
+  "spacing-3": "Stack-module__36QSkEUh__v0-2-0",
+  "spacing-4": "Stack-module__1YqBVz_r__v0-2-0",
+  "spacing-5": "Stack-module__pl44GgJA__v0-2-0",
+  "spacing-6": "Stack-module__2yG7841h__v0-2-0",
+  "spacing-8": "Stack-module__3mcyNuOg__v0-2-0",
+  "spacing-10": "Stack-module__2Pc3xBPs__v0-2-0",
+  "spacing-12": "Stack-module__nNSh936F__v0-2-0",
+  "spacing-16": "Stack-module__1tkzlJ5Y__v0-2-0",
+  "spacing-20": "Stack-module__2bXwUC-Y__v0-2-0",
+  "spacing-24": "Stack-module__2NtXK43f__v0-2-0",
+  "spacing-32": "Stack-module__1oPS-87M__v0-2-0"
 };
@@ -59,7 +59,51 @@ var Stack = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   return /*#__PURE__*/React.createElement("div", __assign({
-    className: classnames(styles.stack, styles[space], className),
+    className: classnames(styles$1.stack, styles$1[space], className),
     ref: ref
   }, parseMetadata(metadata)), children);
 });
-export { Stack };
+var styles = {
+  "inline": "Inline-module__2aZXP6_L__v0-2-0",
+  "wrap": "Inline-module__3_a_UnFU__v0-2-0",
+  "justify-start": "Inline-module__3tWW_bxE__v0-2-0",
+  "align-start": "Inline-module__3KOYdxUy__v0-2-0",
+  "justify-center": "Inline-module__3374-2FN__v0-2-0",
+  "align-center": "Inline-module__27MAKqkj__v0-2-0",
+  "justify-end": "Inline-module__20Q7r0QF__v0-2-0",
+  "align-end": "Inline-module__32BDfYVC__v0-2-0",
+  "spacing-0": "Inline-module__3QBhX-d-__v0-2-0",
+  "spacing-0-5": "Inline-module__2BjQmfKr__v0-2-0",
+  "spacing-1": "Inline-module__3pNbh9rd__v0-2-0",
+  "spacing-2": "Inline-module__2faoCu-m__v0-2-0",
+  "spacing-3": "Inline-module__2wWXsICI__v0-2-0",
+  "spacing-4": "Inline-module__1ZQERGdz__v0-2-0",
+  "spacing-5": "Inline-module__2oLnGAsK__v0-2-0",
+  "spacing-6": "Inline-module__1cCvK5Ld__v0-2-0",
+  "spacing-8": "Inline-module__1C9ylay-__v0-2-0",
+  "spacing-10": "Inline-module__2LTq5c9n__v0-2-0",
+  "spacing-12": "Inline-module__wdvPl5Ud__v0-2-0",
+  "spacing-16": "Inline-module__2F43RmI6__v0-2-0",
+  "spacing-20": "Inline-module__JGDJkFEE__v0-2-0",
+  "spacing-24": "Inline-module__WKta76h4__v0-2-0",
+  "spacing-32": "Inline-module__1wjFy7b-__v0-2-0"
+};
+var Inline = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b;
+
+  var _c = _a.space,
+      space = _c === void 0 ? 'spacing-0' : _c,
+      _d = _a.align,
+      align = _d === void 0 ? 'start' : _d,
+      _e = _a.alignVertical,
+      alignVertical = _e === void 0 ? 'start' : _e,
+      _f = _a.wrap,
+      wrap = _f === void 0 ? true : _f,
+      className = _a.className,
+      metadata = _a.metadata,
+      children = _a.children;
+  return /*#__PURE__*/React.createElement("div", __assign({
+    className: classnames(styles.inline, styles[space], styles["justify-" + align], styles["align-" + alignVertical], (_b = {}, _b[styles.wrap] = wrap, _b), className),
+    ref: ref
+  }, parseMetadata(metadata)), children);
+});
+export { Inline, Stack };
 //# sourceMappingURL=index.js.map

dist/esm/src/stack/Stack.d.ts

 import React from 'react';
-import { PropsWithMetadata } from '@highlight-ui/utils-commons';
-import spacings from '@highlight-ui/tokens/dist/spacings.json';
-export declare type SpacingType = keyof typeof spacings | 'spacing-0';
-export declare type StackProps = PropsWithMetadata<{
-    /** The spacing applied to the children */
-    space?: SpacingType;
-    /** Allows providing a custom class name to the container element */
-    className?: string;
-    /** Elements to apply spacing */
-    children?: React.ReactNode;
-}>;
+import type { LayoutProps } from '../types';
+export declare type StackProps = LayoutProps;
 declare const Stack: React.ForwardRefExoticComponent<{
-    /** The spacing applied to the children */
-    space?: SpacingType | undefined;
-    /** Allows providing a custom class name to the container element */
+    space?: import("../types").SpacingType | undefined;
     className?: string | undefined;
-    /** Elements to apply spacing */
-    children?: React.ReactNode;
 } & {
     metadata?: import("@highlight-ui/utils-commons").ComponentMetadata | undefined;
+} & {
+    children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 export default Stack;

package.json

 {
   "name": "@highlight-ui/layout",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "Personio GmbH & Co. KG",
@@ -47,3 +47,3 @@ "main": "dist/cjs/index.js",
   },
-  "gitHead": "894de65de5cc9bcad3bcc978e8290c720feabe36"
+  "gitHead": "105c85b1c8d0c7d233b9712d982acada5ea19e86"
 }

README.md

 # `@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.
+
 ## Installation
 
-```
+```bash
 yarn add @highlight-ui/layout
 ```
 
-## Usage
+## Stack
 
+The `Stack` component manages the **vertical** spacing between elements.
+
+### Usage
+
 In your TypeScript file:
 
-### Stack
-
 ```ts
@@ -25,4 +29,62 @@ import { Stack, StackProps } from '@highlight-ui/layout';
 
+```jsx
+<Stack space="spacing-4">
+  <Placeholder>Item 1</Placeholder>
+  <Placeholder>Item 2</Placeholder>
+  <Placeholder>Item 3</Placeholder>
+</Stack>
+```
+
+### Props
+
+| Prop    | Type          | Default     | Description                          |
+| :------ | :------------ | :---------- | :----------------------------------- |
+| `space` | `SpacingType` | `spacing-0` | The spacing applied to the children. |
+
+## 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:
+
+```ts
+import { Inline, InlineProps } from '@highlight-ui/layout';
+```
+
+In your (S)CSS file:
+
+```scss
+@import url('@highlight-ui/layout');
+```
+
+```jsx
+<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
+
+| 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
+
+| 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`                                                                                                                                                                                  |
+
 ## Documentation
 
 Please visit [personio.design]()

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59848

37.88%

Number of package files

21

40%

Lines of code

572

106.5%

Number of lines in readme file

90

221.43%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes