@highlight-ui/action-bar - npm Package Compare versions

Comparing version 5.0.3 to 5.0.4

dist/cjs/index.js

@@ -44,7 +44,7 @@ 'use strict';
 var styles = {
-  "actionBar": "ActionBar-module__ubLYJLqB__v5-0-3",
-  "inline": "ActionBar-module__e52E4-fm__v5-0-3",
-  "fullWidth": "ActionBar-module__e20jMPMr__v5-0-3",
-  "centerAlignedFlex": "ActionBar-module__dLePk2wp__v5-0-3",
-  "secondaryAction": "ActionBar-module__477Xyecj__v5-0-3"
+  "actionBar": "ActionBar-module__ubLYJLqB__v5-0-4",
+  "inline": "ActionBar-module__e52E4-fm__v5-0-4",
+  "fullWidth": "ActionBar-module__e20jMPMr__v5-0-4",
+  "centerAlignedFlex": "ActionBar-module__dLePk2wp__v5-0-4",
+  "secondaryAction": "ActionBar-module__477Xyecj__v5-0-4"
 };
@@ -51,0 +51,0 @@ var ActionBar = function (_a) {

dist/esm/index.js

@@ -32,7 +32,7 @@ import React from 'react';
 var styles = {
-  "actionBar": "ActionBar-module__ubLYJLqB__v5-0-3",
-  "inline": "ActionBar-module__e52E4-fm__v5-0-3",
-  "fullWidth": "ActionBar-module__e20jMPMr__v5-0-3",
-  "centerAlignedFlex": "ActionBar-module__dLePk2wp__v5-0-3",
-  "secondaryAction": "ActionBar-module__477Xyecj__v5-0-3"
+  "actionBar": "ActionBar-module__ubLYJLqB__v5-0-4",
+  "inline": "ActionBar-module__e52E4-fm__v5-0-4",
+  "fullWidth": "ActionBar-module__e20jMPMr__v5-0-4",
+  "centerAlignedFlex": "ActionBar-module__dLePk2wp__v5-0-4",
+  "secondaryAction": "ActionBar-module__477Xyecj__v5-0-4"
 };
@@ -39,0 +39,0 @@ var ActionBar = function (_a) {

package.json

 {
   "name": "@highlight-ui/action-bar",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "author": "Personio GmbH & Co. KG",
@@ -34,3 +34,3 @@ "main": "dist/cjs/index.js",
     "@highlight-ui/tokens": "^3.0.0",
-    "@highlight-ui/typography": "^6.0.0",
+    "@highlight-ui/typography": "^6.0.1",
     "@highlight-ui/utils-dev": "^1.1.8",
@@ -46,3 +46,3 @@ "@testing-library/dom": "8.19.0",
   "dependencies": {
-    "@highlight-ui/button": "^12.0.3",
+    "@highlight-ui/button": "^12.0.4",
     "@highlight-ui/utils-commons": "^2.3.8"
@@ -54,3 +54,3 @@ },
   },
-  "gitHead": "44cecc1fca096dc9101e4b4dae1523fe99c4064f"
+  "gitHead": "e350b6a3203165c887f553b3f2bb0b286f392dbf"
 }

README.md

@@ -1,15 +0,25 @@
-# `@highlight-ui/action-bar`
+[![npm](https://img.shields.io/npm/v/@highlight-ui/action-bar)](https://www.npmjs.com/package/@highlight-ui/action-bar)
+[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/8587a8-action-bar/b/381185)
+[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/content-structure-actionbar--default)
 
+# @highlight-ui/action-bar
+
 ## Installation
 
+Using npm:
+
+```bash
+npm install @highlight-ui/action-bar
 ```
+
+Using yarn:
+
+```bash
 yarn add @highlight-ui/action-bar
 ```
 
-## Usage
+Using pnpm:
 
-In your TypeScript file:
-
-```ts
-import { ActionBar, ActionBarProps } from '@highlight-ui/action-bar';
+```bash
+pnpm install @highlight-ui/action-bar
 ```
@@ -23,4 +33,46 @@
 
-## Documentation
+Once the package is installed, you can import the library:
 
-Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/8587a8-action-bar)
+```ts
+import { ActionBar, ActionBarProps } from '@highlight-ui/action-bar';
+```
+
+## Usage
+
+```tsx
+import React, { useState } from 'react';
+import { ActionBar } from '@highlight-ui/action-bar';
+
+export default function ActionBarExample() {
+  return (
+    <ActionBar
+      variant="inline"
+      primaryAction={{
+        label: 'Save',
+        onClick: callback(action('Primary action clicked')),
+      }}
+    />
+  );
+}
+```
+
+## Props 📜
+
+| Prop              | Type                    | Required | Default  | Description                                                                                                                                                                                                                     |
+| :---------------- | :---------------------- | :------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `variant`         | `'inline', 'fullwidth'` | Yes      | `inline` | When `inline`, uses `position: sticky` to position the ActionBar and uses `100%` of its container's width. When `full-width`, uses `position: fixed` to position the ActionBar and uses `100% - 64px` of its container's width. |
+| `primaryAction`   | `ActionButtonProps`     | Yes      |          | Allows passing props to the primary action button                                                                                                                                                                               |
+| `secondaryAction` | `ActionButtonProps`     | No       |          | Allows passing props to the secondary action button                                                                                                                                                                             |
+| `information`     | `React.ReactNode`       | No       |          | Allows rendering any element on the left side of the ActionBar. If specified, the action buttons will be aligned to the right.                                                                                                  |
+
+### Custom types 🔠
+
+| Type                | Values                                                                           | Description                                              |
+| :------------------ | :------------------------------------------------------------------------------- | :------------------------------------------------------- |
+| `ActionButtonProps` | `{label: string, onClick?: () => void, buttonState: ButtonProps['buttonState']}` | Used for the `primaryAction` and `secondaryAction` props |
+
+## Contributing 🖌️
+
+Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/8587a8-action-bar/b/381185) for usage guidelines and visual examples.
+
+If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).

No alert changes

Improved metrics

Total package byte prevSize

52390

increased by7.19%

Number of lines in readme file

78

increased by200%

Dependency changes

• Updated@highlight-ui/button@^12.0.4