@dt-dds/react-message 1.0.0-beta.88 → 1.0.0-beta.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +23 -36
  3. package/dist/index.d.mts +12 -10
  4. package/dist/index.d.ts +12 -10
  5. package/dist/index.js +213 -335
  6. package/dist/index.mjs +238 -333
  7. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @dt-ui/react-message
2
2
 
3
+ ## 1.0.0-beta.89
4
+
5
+ ### Minor Changes
6
+
7
+ - feat: refactor message component
8
+
9
+ ### Patch Changes
10
+
11
+ - @dt-dds/react-button@1.0.0-beta.73
12
+
3
13
  ## 1.0.0-beta.88
4
14
 
5
15
  ### Patch Changes
package/README.md CHANGED
@@ -7,7 +7,7 @@ Furthermore, it can be used to add an action like a link, by passing it as a chi
7
7
  ## Usage
8
8
 
9
9
  ```jsx
10
- import { Message } from '@dt-dds/react';
10
+ import { Message, Button } from '@dt-dds/react';
11
11
 
12
12
  export const App = () => {
13
13
  const title = 'Some Title';
@@ -15,14 +15,12 @@ export const App = () => {
15
15
  const type = 'Error';
16
16
 
17
17
  return (
18
- <Message type={type}>
19
- <Message.Title>{title}</Message.Title>
20
- <Message.Description>{description}</Message.Description>
21
- <Message.Action>
22
- <Link textSize='small' href='/'>
18
+ <Message type={type} title={title} description={description}>
19
+ <Message.Actions>
20
+ <Button size='small' variant='text'>
23
21
  View action
24
- </Link>
25
- </Message.Action>
22
+ </Button>
23
+ </Message.Actions>
26
24
  </Message>
27
25
  );
28
26
  };
@@ -32,34 +30,23 @@ export const App = () => {
32
30
 
33
31
  ### Message
34
32
 
35
- | Property | Type | Default | Description |
36
- | ------------- | --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
37
- | `children` | `ReactNode` | - | Child components to be rendered. There is flexibility on what the content can be, but the recommendation is that it should be a link with a character count limit of 25. |
38
- | `dataTestId` | `string` | `'message'` | Customizable test identifier. |
39
- | `style` | `React.CSSProperties` | - | Customizable styles |
40
- | `type` | `MessageType` | `'default'` | Sets the type of the Message, responsible for the icon and It's color, the background color and color of the dashed border |
41
- | `title` | `string` | - | Optional Text to be presented as Title within the Message.Content, It should have text character count limit: 50. |
42
- | `description` | `string` | - | Text to be presented as Description within the Message.Content, It should have text character count limit: 230. |
43
- | `onClose` | `function` | - | When provided, a close button is displayed and, when clicked, it triggers this function. |
44
-
45
- ### Message.Title
46
-
47
- | Property | Type | Default | Description |
48
- | ---------- | ----------- | ------- | -------------------------------------------------------------------- |
49
- | `children` | `ReactNode` | - | Child components to be rendered within the action. Text is expected. |
50
-
51
- ### Message.Description
52
-
53
- | Property | Type | Default | Description |
54
- | ---------- | ----------- | ------- | -------------------------------------------------------------------- |
55
- | `children` | `ReactNode` | - | Child components to be rendered within the action. Text is expected. |
56
-
57
- ### Message.Action
58
-
59
- | Property | Type | Default | Description |
60
- | ------------ | ----------- | ------------------ | -------------------------------------------------- |
61
- | `children` | `ReactNode` | - | Child components to be rendered within the action. |
62
- | `dataTestId` | `string` | `'message-action'` | Customizable test identifier for the action. |
33
+ | Property | Type | Default | Description |
34
+ | ------------- | --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
35
+ | `children` | `ReactNode` | - | Child components to be rendered. There is flexibility on what the content can be, but the recommendation is that it should be a link with a character count limit of 25. |
36
+ | `dataTestId` | `string` | `'message'` | Customizable test identifier. |
37
+ | `style` | `React.CSSProperties` | - | Customizable styles |
38
+ | `type` | `MessageType` | `'default'` | Sets the type of the Message, responsible for the icon and It's color, the background color and color of the dashed border |
39
+ | `title` | `string` | - | Optional Text to be presented as Title within the Message.Content, It should have text character count limit: 50. |
40
+ | `description` | `string` | - | Text to be presented as Description within the Message.Content, It should have text character count limit: 230. |
41
+ | `onClose` | `function` | - | When provided, a close button is displayed and, when clicked, it triggers this function. |
42
+ | `orientation` | `Orientation` | `'horizontal'` | Sets the orientation of the message component. |
43
+
44
+ ### Message.Actions
45
+
46
+ | Property | Type | Default | Description |
47
+ | ------------ | ----------- | ------------------ | ------------------------------------------------ |
48
+ | `children` | `ReactNode` | - | Container to render actions. Button is expected. |
49
+ | `dataTestId` | `string` | `'message-action'` | Customizable test identifier for the action. |
63
50
 
64
51
  ## Stack
65
52
 
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
- import { BaseProps } from '@dt-dds/react-core';
4
- import { SVGProps, ReactElement } from 'react';
3
+ import { BaseProps, Orientation } from '@dt-dds/react-core';
4
+ import { ReactNode } from 'react';
5
5
 
6
6
  declare const OMessageType: {
7
7
  readonly Default: "default";
@@ -11,18 +11,20 @@ declare const OMessageType: {
11
11
  readonly Warning: "warning";
12
12
  };
13
13
  type MessageType = (typeof OMessageType)[keyof typeof OMessageType];
14
-
15
14
  interface MessageProps extends BaseProps {
16
15
  type: MessageType;
17
16
  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
17
+ title?: string;
18
+ description: ReactNode;
19
+ orientation?: Orientation;
20
+ }
21
+ interface ActionsProps extends BaseProps {
22
+ type?: MessageType;
18
23
  }
19
- type MessageIcon = (props: SVGProps<SVGSVGElement>) => ReactElement;
20
- declare const MessageIcons: Record<MessageType, MessageIcon | null>;
24
+
21
25
  declare const Message: {
22
- ({ children, dataTestId, style, type, onClose, }: MessageProps): react_jsx_runtime.JSX.Element;
23
- Title({ children }: BaseProps): react_jsx_runtime.JSX.Element;
24
- Description({ children }: BaseProps): react_jsx_runtime.JSX.Element;
25
- Action({ children, dataTestId }: BaseProps): react_jsx_runtime.JSX.Element;
26
+ ({ children, dataTestId, style, type, onClose, description, title, orientation, }: MessageProps): react_jsx_runtime.JSX.Element;
27
+ Actions({ children, dataTestId, type }: ActionsProps): react_jsx_runtime.JSX.Element;
26
28
  };
27
29
 
28
30
  declare module '@emotion/react' {
@@ -30,4 +32,4 @@ declare module '@emotion/react' {
30
32
  }
31
33
  }
32
34
 
33
- export { Message, MessageIcons, type MessageProps };
35
+ export { Message };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
- import { BaseProps } from '@dt-dds/react-core';
4
- import { SVGProps, ReactElement } from 'react';
3
+ import { BaseProps, Orientation } from '@dt-dds/react-core';
4
+ import { ReactNode } from 'react';
5
5
 
6
6
  declare const OMessageType: {
7
7
  readonly Default: "default";
@@ -11,18 +11,20 @@ declare const OMessageType: {
11
11
  readonly Warning: "warning";
12
12
  };
13
13
  type MessageType = (typeof OMessageType)[keyof typeof OMessageType];
14
-
15
14
  interface MessageProps extends BaseProps {
16
15
  type: MessageType;
17
16
  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
17
+ title?: string;
18
+ description: ReactNode;
19
+ orientation?: Orientation;
20
+ }
21
+ interface ActionsProps extends BaseProps {
22
+ type?: MessageType;
18
23
  }
19
- type MessageIcon = (props: SVGProps<SVGSVGElement>) => ReactElement;
20
- declare const MessageIcons: Record<MessageType, MessageIcon | null>;
24
+
21
25
  declare const Message: {
22
- ({ children, dataTestId, style, type, onClose, }: MessageProps): react_jsx_runtime.JSX.Element;
23
- Title({ children }: BaseProps): react_jsx_runtime.JSX.Element;
24
- Description({ children }: BaseProps): react_jsx_runtime.JSX.Element;
25
- Action({ children, dataTestId }: BaseProps): react_jsx_runtime.JSX.Element;
26
+ ({ children, dataTestId, style, type, onClose, description, title, orientation, }: MessageProps): react_jsx_runtime.JSX.Element;
27
+ Actions({ children, dataTestId, type }: ActionsProps): react_jsx_runtime.JSX.Element;
26
28
  };
27
29
 
28
30
  declare module '@emotion/react' {
@@ -30,4 +32,4 @@ declare module '@emotion/react' {
30
32
  }
31
33
  }
32
34
 
33
- export { Message, MessageIcons, type MessageProps };
35
+ export { Message };