@highlight-ui/dialog - npm Package Compare versions

Comparing version 9.0.4 to 9.0.5

dist/cjs/index.js

@@ -48,15 +48,15 @@ 'use strict';
 var styles$1 = {
-  "dialog": "Dialog-module__QT4OG-LI__v9-0-4",
-  "size-small": "Dialog-module__mLhhxvim__v9-0-4",
-  "size-medium": "Dialog-module__YSc4N9fm__v9-0-4",
-  "size-large": "Dialog-module__Vnnq2R4U__v9-0-4",
-  "header": "Dialog-module__u7ppcJcZ__v9-0-4",
-  "headerShadowed": "Dialog-module__vgIqlm3C__v9-0-4",
-  "headerTitle": "Dialog-module__FBO9JaKV__v9-0-4",
-  "closeButton": "Dialog-module__4I99Gqr4__v9-0-4",
-  "body": "Dialog-module__PE94udd0__v9-0-4",
-  "bodyDanger": "Dialog-module__mf37TEfD__v9-0-4",
-  "footer": "Dialog-module__w2q5B9My__v9-0-4",
-  "footerShadowed": "Dialog-module__4StcUX8W__v9-0-4",
-  "disabled": "Dialog-module__U1jN9tzY__v9-0-4"
+  "dialog": "Dialog-module__QT4OG-LI__v9-0-5",
+  "size-small": "Dialog-module__mLhhxvim__v9-0-5",
+  "size-medium": "Dialog-module__YSc4N9fm__v9-0-5",
+  "size-large": "Dialog-module__Vnnq2R4U__v9-0-5",
+  "header": "Dialog-module__u7ppcJcZ__v9-0-5",
+  "headerShadowed": "Dialog-module__vgIqlm3C__v9-0-5",
+  "headerTitle": "Dialog-module__FBO9JaKV__v9-0-5",
+  "closeButton": "Dialog-module__4I99Gqr4__v9-0-5",
+  "body": "Dialog-module__PE94udd0__v9-0-5",
+  "bodyDanger": "Dialog-module__mf37TEfD__v9-0-5",
+  "footer": "Dialog-module__w2q5B9My__v9-0-5",
+  "footerShadowed": "Dialog-module__4StcUX8W__v9-0-5",
+  "disabled": "Dialog-module__U1jN9tzY__v9-0-5"
 };
@@ -1277,6 +1277,6 @@ function useEventListener(t, r, i, o) {
 var styles = {
-  "modal": "Modal-module__fBTelkwv__v9-0-4",
-  "modalBackdrop": "Modal-module__SnXcT4vC__v9-0-4",
-  "modalContent": "Modal-module__n3eZk6iN__v9-0-4",
-  "scrollLocked": "Modal-module__IDCbrhr-__v9-0-4"
+  "modal": "Modal-module__fBTelkwv__v9-0-5",
+  "modalBackdrop": "Modal-module__SnXcT4vC__v9-0-5",
+  "modalContent": "Modal-module__n3eZk6iN__v9-0-5",
+  "scrollLocked": "Modal-module__IDCbrhr-__v9-0-5"
 };
@@ -1283,0 +1283,0 @@ var Modal = function (_a) {

dist/esm/index.js

@@ -36,15 +36,15 @@ import React, { useRef, useEffect, useCallback, useState } from 'react';
 var styles$1 = {
-  "dialog": "Dialog-module__QT4OG-LI__v9-0-4",
-  "size-small": "Dialog-module__mLhhxvim__v9-0-4",
-  "size-medium": "Dialog-module__YSc4N9fm__v9-0-4",
-  "size-large": "Dialog-module__Vnnq2R4U__v9-0-4",
-  "header": "Dialog-module__u7ppcJcZ__v9-0-4",
-  "headerShadowed": "Dialog-module__vgIqlm3C__v9-0-4",
-  "headerTitle": "Dialog-module__FBO9JaKV__v9-0-4",
-  "closeButton": "Dialog-module__4I99Gqr4__v9-0-4",
-  "body": "Dialog-module__PE94udd0__v9-0-4",
-  "bodyDanger": "Dialog-module__mf37TEfD__v9-0-4",
-  "footer": "Dialog-module__w2q5B9My__v9-0-4",
-  "footerShadowed": "Dialog-module__4StcUX8W__v9-0-4",
-  "disabled": "Dialog-module__U1jN9tzY__v9-0-4"
+  "dialog": "Dialog-module__QT4OG-LI__v9-0-5",
+  "size-small": "Dialog-module__mLhhxvim__v9-0-5",
+  "size-medium": "Dialog-module__YSc4N9fm__v9-0-5",
+  "size-large": "Dialog-module__Vnnq2R4U__v9-0-5",
+  "header": "Dialog-module__u7ppcJcZ__v9-0-5",
+  "headerShadowed": "Dialog-module__vgIqlm3C__v9-0-5",
+  "headerTitle": "Dialog-module__FBO9JaKV__v9-0-5",
+  "closeButton": "Dialog-module__4I99Gqr4__v9-0-5",
+  "body": "Dialog-module__PE94udd0__v9-0-5",
+  "bodyDanger": "Dialog-module__mf37TEfD__v9-0-5",
+  "footer": "Dialog-module__w2q5B9My__v9-0-5",
+  "footerShadowed": "Dialog-module__4StcUX8W__v9-0-5",
+  "disabled": "Dialog-module__U1jN9tzY__v9-0-5"
 };
@@ -1265,6 +1265,6 @@ function useEventListener(t, r, i, o) {
 var styles = {
-  "modal": "Modal-module__fBTelkwv__v9-0-4",
-  "modalBackdrop": "Modal-module__SnXcT4vC__v9-0-4",
-  "modalContent": "Modal-module__n3eZk6iN__v9-0-4",
-  "scrollLocked": "Modal-module__IDCbrhr-__v9-0-4"
+  "modal": "Modal-module__fBTelkwv__v9-0-5",
+  "modalBackdrop": "Modal-module__SnXcT4vC__v9-0-5",
+  "modalContent": "Modal-module__n3eZk6iN__v9-0-5",
+  "scrollLocked": "Modal-module__IDCbrhr-__v9-0-5"
 };
@@ -1271,0 +1271,0 @@ var Modal = function (_a) {

package.json

 {
   "name": "@highlight-ui/dialog",
-  "version": "9.0.4",
+  "version": "9.0.5",
   "author": "Personio GmbH & Co. KG",
@@ -44,6 +44,6 @@ "main": "dist/cjs/index.js",
   "dependencies": {
-    "@highlight-ui/button": "^12.0.3",
-    "@highlight-ui/icon": "^5.0.0",
-    "@highlight-ui/tooltip": "^3.3.46",
-    "@highlight-ui/typography": "^6.0.0",
+    "@highlight-ui/button": "^12.0.4",
+    "@highlight-ui/icon": "^5.0.1",
+    "@highlight-ui/tooltip": "^3.3.47",
+    "@highlight-ui/typography": "^6.0.1",
     "@highlight-ui/utils-commons": "^2.3.8",
@@ -60,3 +60,3 @@ "@highlight-ui/utils-hooks": "^3.2.21",
   },
-  "gitHead": "51a5201361862dac280c11639ff2dd6d0453aa88"
+  "gitHead": "e350b6a3203165c887f553b3f2bb0b286f392dbf"
 }

README.md

@@ -1,15 +0,25 @@
-# `@highlight-ui/dialog`
+[![npm](https://img.shields.io/npm/v/@highlight-ui/dialog)](https://www.npmjs.com/package/@highlight-ui/dialog)
+[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/954aa0-dialog/b/54f508)
+[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/feedback-dialog--default-dialog)
 
+# @highlight-ui/dialog
+
 ## Installation
 
+Using npm:
+
+```bash
+npm install @highlight-ui/dialog
 ```
+
+Using yarn:
+
+```bash
 yarn add @highlight-ui/dialog
 ```
 
-## Usage
+Using pnpm:
 
-In your TypeScript file:
-
-```ts
-import { Dialog } from '@highlight-ui/dialog';
+```bash
+pnpm install @highlight-ui/dialog
 ```
@@ -23,4 +33,78 @@
 
-## Documentation
+Once the package is installed, you can import the library:
 
-Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/954aa0-dialog)
+```ts
+import { Dialog } from '@highlight-ui/dialog';
+```
+
+## Usage
+
+```tsx
+import React, { useState } from 'react';
+import { Dialog, Modal } from '@highlight-ui/dialog';
+
+export default function DialogExample() {
+  return (
+    <div>
+      <Button
+        variant="emphasized"
+        onClick={() => {
+          setIsDialogOpen(true);
+        }}
+      >
+        Show dialog
+      </Button>
+
+      <Dialog
+        title={title}
+        open={isDialogOpen}
+        size="small"
+        variant="default"
+        primaryButton={{
+          buttonLabel: 'Confirm',
+          buttonState: 'default',
+        }}
+        secondaryButtons={[
+          {
+            buttonLabel: 'Cancel',
+            buttonState: 'default',
+          },
+        ]}
+      />
+    </div>
+  );
+}
+```
+
+## Props 📜
+
+### Dialog
+
+> Dialog props extend the Modal props below
+
+| Prop               | Type                                                                                                                                                                 | Required | Default   | Description                                                                                             |
+| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | :-------- | :------------------------------------------------------------------------------------------------------ |
+| `title`            | `string`                                                                                                                                                             | Yes      |           | Sets the title of the dialog                                                                            |
+| `labelledBy`       | `string`                                                                                                                                                             | No       |           | Sets the reference to the `aria-labelledby` attribute. It'll add a default value if not present.        |
+| `describedBy`      | `string`                                                                                                                                                             | No       |           | Sets the reference to the `aria-describedby` attribute                                                  |
+| `variant`          | `'default', 'destructive'`                                                                                                                                           | No       | `default` | `default` is used for regular interactions and `destructive` is usually for destructing (e.g. deletion) |
+| `size`             | `'small', 'medium', 'large'`                                                                                                                                         | No       | `small`   | Sets the width of the dialog                                                                            |
+| `primaryButton`    | [`DialogActionButtonProps`](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/dialog/src/Dialog.tsx?ref_type=heads#L20)   | No       |           | Configures the label/icon and behaviour of the primary action button                                    |
+| `secondaryButtons` | [`DialogActionButtonProps[]`](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/dialog/src/Dialog.tsx?ref_type=heads#L20) | No       |           | Configures the label/icon and behaviour of the secondary action buttons                                 |
+
+### Modal
+
+| Prop                  | Type          | Required | Default | Description                                             |
+| :-------------------- | :------------ | :------- | :------ | :------------------------------------------------------ |
+| `open`                | `boolean`     | Yes      | `false` | Specifies whether the `Dialog` is mounted and displayed |
+| `className`           | `string`      | No       |         | Allows providing a custom class name                    |
+| `initialFocusElement` | `HTMLElement` | No       |         | Specifies an initial focused HTML element               |
+| `onRequestToClose`    | `() => void`  | No       |         | Gets called when the close or cancel button is pressed  |
+| `onClose`             | `() => void`  | No       |         | Gets called after the `Dialog` is closed                |
+| `onOpen`              | `() => void`  | No       |         | Gets called after the `Dialog` is opened                |
+
+## Contributing 🖌️
+
+Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/954aa0-dialog/b/54f508) 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).

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

287008

increased by2.01%

Number of lines in readme file

110

increased by323.08%

Dependency changes

• Updated@highlight-ui/button@^12.0.4

• Updated@highlight-ui/icon@^5.0.1

• Updated@highlight-ui/tooltip@^3.3.47

• Updated@highlight-ui/typography@^6.0.1