@uxf/ui 11.49.0 → 11.49.1

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 (9) hide show
  1. package/css/info-box.css +38 -31
  2. package/css/modal-dialog.css +5 -9
  3. package/info-box/info-box.d.ts +2 -2
  4. package/info-box/info-box.js +8 -6
  5. package/info-box/info-box.stories.js +4 -3
  6. package/modal-dialog/modal-dialog.d.ts +2 -0
  7. package/modal-dialog/modal-dialog.js +9 -7
  8. package/modal-dialog/modal-dialog.stories.js +2 -2
  9. package/package.json +1 -1
package/css/info-box.css CHANGED
@@ -1,74 +1,81 @@
1
- .uxf-infobox {
2
- --infobox-bg-color: transparent;
3
- --infobox-border-color: transparent;
1
+ .uxf-info-box {
2
+ --info-box-bg-color: transparent;
3
+ --info-box-border-color: transparent;
4
4
  --i-w: theme("spacing.5");
5
5
  --i-h: theme("spacing.5");
6
6
 
7
7
  @apply transition;
8
8
 
9
- background-color: var(--infobox-bg-color);
10
- border: 1px solid var(--infobox-border-color);
9
+ background-color: var(--info-box-bg-color);
10
+ border: 1px solid var(--info-box-border-color);
11
11
  border-radius: theme("borderRadius.lg");
12
12
  color: theme("colors.base_text_high_emphasis");
13
13
  display: flex;
14
14
  font-size: theme("fontSize.sm");
15
15
  font-weight: theme("fontWeight.medium");
16
- gap: theme("spacing.2");
17
- padding: theme("spacing.2");
16
+ gap: theme("spacing.3");
17
+ min-height: 48px;
18
+ padding: theme("spacing.2") theme("spacing.4");
19
+
20
+ &--centered {
21
+ align-items: center;
22
+ }
18
23
 
19
24
  &__text-wrapper {
20
25
  display: flex;
21
26
  flex-direction: column;
22
27
  gap: 6px;
23
- justify-content: center;
24
- min-height: theme("height.8");
28
+ }
25
29
 
26
- .uxf-info-box__title {
27
- font-size: theme("fontSize.medium");
28
- font-weight: theme("fontWeight.semibold");
29
- margin-top: 6px;
30
- }
30
+ &__title {
31
+ font-size: theme("fontSize.medium");
32
+ font-weight: theme("fontWeight.semibold");
33
+ }
34
+
35
+ &__text {
36
+ font-weight: theme("fontWeight.normal");
37
+ margin-right: theme("spacing.2");
38
+ padding-inline: theme("spacing.1");
39
+ }
31
40
 
32
- .uxf-info-box__text {
33
- font-weight: theme("fontWeight.normal");
34
- margin-right: theme("spacing.2");
35
- padding: theme("spacing.1") 0;
36
- }
41
+ &__action-component {
42
+ align-self: center;
43
+ margin-left: auto;
37
44
  }
38
45
 
39
46
  &--brand {
40
47
  --uxf-icon-color: theme("colors.brand_icon_on_muted");
41
- --infobox-bg-color: theme("colors.brand_surface_muted");
42
- --infobox-border-color: theme("colors.brand_border");
48
+ --info-box-bg-color: theme("colors.brand_surface_muted");
49
+ --info-box-border-color: theme("colors.brand_border");
43
50
  }
44
51
 
45
52
  &--info {
46
53
  --uxf-icon-color: theme("colors.info_icon_on_muted");
47
- --infobox-bg-color: theme("colors.info_surface_muted");
48
- --infobox-border-color: theme("colors.info_border");
54
+ --info-box-bg-color: theme("colors.info_surface_muted");
55
+ --info-box-border-color: theme("colors.info_border");
49
56
  }
50
57
 
51
58
  &--negative {
52
59
  --uxf-icon-color: theme("colors.negative_icon_on_muted");
53
- --infobox-bg-color: theme("colors.negative_surface_muted");
54
- --infobox-border-color: theme("colors.negative_border");
60
+ --info-box-bg-color: theme("colors.negative_surface_muted");
61
+ --info-box-border-color: theme("colors.negative_border");
55
62
  }
56
63
 
57
64
  &--neutral {
58
65
  --uxf-icon-color: theme("colors.neutral_icon_on_muted");
59
- --infobox-bg-color: theme("colors.neutral_surface_muted");
60
- --infobox-border-color: theme("colors.neutral_border");
66
+ --info-box-bg-color: theme("colors.neutral_surface_muted");
67
+ --info-box-border-color: theme("colors.neutral_border");
61
68
  }
62
69
 
63
70
  &--positive {
64
71
  --uxf-icon-color: theme("colors.positive_icon_on_muted");
65
- --infobox-bg-color: theme("colors.positive_surface_muted");
66
- --infobox-border-color: theme("colors.positive_border");
72
+ --info-box-bg-color: theme("colors.positive_surface_muted");
73
+ --info-box-border-color: theme("colors.positive_border");
67
74
  }
68
75
 
69
76
  &--warning {
70
77
  --uxf-icon-color: theme("colors.warning_icon_on_muted");
71
- --infobox-bg-color: theme("colors.warning_surface_muted");
72
- --infobox-border-color: theme("colors.warning_border");
78
+ --info-box-bg-color: theme("colors.warning_surface_muted");
79
+ --info-box-border-color: theme("colors.warning_border");
73
80
  }
74
81
  }
package/css/modal-dialog.css CHANGED
@@ -7,17 +7,13 @@
7
7
  line-height: var(--uxf-typo-main-line-height);
8
8
  padding: theme("spacing.4");
9
9
 
10
- &__icon {
11
- flex-shrink: 0;
12
- height: theme("spacing.5");
13
- transform: translateY(2px);
14
- width: theme("spacing.5");
15
- }
16
-
17
10
  &__header {
18
- align-items: flex-start;
11
+ align-items: center;
19
12
  display: flex;
20
- gap: theme("spacing.2");
13
+ gap: theme("spacing.3");
14
+
15
+ --i-h: theme("spacing.5");
16
+ --i-w: theme("spacing.5");
21
17
  }
22
18
 
23
19
  &__title {
package/info-box/info-box.d.ts CHANGED
@@ -4,10 +4,10 @@ import { InfoBoxColor } from "./types";
4
4
  import IntrinsicElements = React.JSX.IntrinsicElements;
5
5
  export declare const getDefaultIconName: (color: InfoBoxColor) => IconName;
6
6
  export interface InfoboxProps {
7
- action?: ReactNode;
7
+ actionElement?: ReactNode;
8
8
  className?: string;
9
9
  color?: InfoBoxColor;
10
- description: ReactNode;
10
+ description?: ReactNode;
11
11
  icon?: IconName | false;
12
12
  title?: ReactNode;
13
13
  titleElement?: keyof Pick<IntrinsicElements, "p" | "h1" | "h2" | "h3" | "h4">;
package/info-box/info-box.js CHANGED
@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.InfoBox = exports.getDefaultIconName = void 0;
27
27
  const show_1 = require("@uxf/core-react/components/show");
28
+ const is_nil_1 = require("@uxf/core/utils/is-nil");
28
29
  const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
29
30
  const react_1 = __importStar(require("react"));
30
31
  const icon_1 = require("../icon");
@@ -48,12 +49,13 @@ exports.InfoBox = (0, react_1.forwardRef)((props, ref) => {
48
49
  var _a, _b, _c;
49
50
  const color = (_a = props.color) !== null && _a !== void 0 ? _a : "warning";
50
51
  const Component = (_b = props.titleElement) !== null && _b !== void 0 ? _b : "p";
51
- return (react_1.default.createElement("div", { className: `uxf-infobox uxf-infobox--${color} ${(_c = props.className) !== null && _c !== void 0 ? _c : ""}`, ref: ref },
52
- props.icon !== false && react_1.default.createElement(icon_1.Icon, { name: props.icon || (0, exports.getDefaultIconName)(color) }),
53
- react_1.default.createElement("div", { className: "uxf-infobox__text-wrapper" },
52
+ return (react_1.default.createElement("div", { className: `uxf-info-box uxf-info-box--${color} ${(0, is_nil_1.isNil)(props.description) || (0, is_nil_1.isNil)(props.title) ? "uxf-info-box--centered" : ""} ${(_c = props.className) !== null && _c !== void 0 ? _c : ""}`, ref: ref },
53
+ props.icon !== false && (react_1.default.createElement(icon_1.Icon, { className: "uxf-info-box__icon", name: props.icon || (0, exports.getDefaultIconName)(color) })),
54
+ react_1.default.createElement("div", { className: "uxf-info-box__text-wrapper" },
54
55
  react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.title) },
55
- react_1.default.createElement(Component, { className: "uxf-infobox__title" }, props.title)),
56
- react_1.default.createElement("p", { className: "uxf-infobox__description" }, props.description)),
57
- (0, is_not_nil_1.isNotNil)(props.action) && react_1.default.createElement("div", { className: "uxf-info-box__action" }, props.action)));
56
+ react_1.default.createElement(Component, { className: "uxf-info-box__title" }, props.title)),
57
+ react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.description) },
58
+ react_1.default.createElement("p", { className: "uxf-info-box__description" }, props.description))),
59
+ (0, is_not_nil_1.isNotNil)(props.actionElement) && (react_1.default.createElement("div", { className: "uxf-info-box__action-component" }, props.actionElement))));
58
60
  });
59
61
  exports.InfoBox.displayName = "UxfUiInfoBox";
package/info-box/info-box.stories.js CHANGED
@@ -10,10 +10,11 @@ const info_box_1 = require("./info-box");
10
10
  const TEXT = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus faucibus molestie nisl. Cras elementum.";
11
11
  function Default() {
12
12
  return (react_1.default.createElement("div", { className: "space-y-4 p-4" },
13
- react_1.default.createElement(info_box_1.InfoBox, { action: react_1.default.createElement(button_1.Button, { color: "warning", variant: "secondary" }, "Button"), color: "warning", description: TEXT, title: "Warning" }),
14
- react_1.default.createElement(info_box_1.InfoBox, { action: react_1.default.createElement(button_1.Button, { color: "positive", variant: "secondary" }, "Button"), color: "positive", description: TEXT, title: "Positive" }),
13
+ react_1.default.createElement(info_box_1.InfoBox, { actionElement: react_1.default.createElement(button_1.Button, { color: "warning", variant: "secondary" }, "Button"), color: "warning", description: TEXT, title: "Warning" }),
14
+ react_1.default.createElement(info_box_1.InfoBox, { actionElement: react_1.default.createElement(button_1.Button, { color: "positive", variant: "secondary" }, "Button"), color: "positive", title: "Positive no description" }),
15
15
  react_1.default.createElement(info_box_1.InfoBox, { color: "negative", description: TEXT, title: "Negative" }),
16
16
  react_1.default.createElement(info_box_1.InfoBox, { color: "info", description: TEXT, title: "Info" }),
17
17
  react_1.default.createElement(info_box_1.InfoBox, { color: "brand", description: TEXT, title: "Brand" }),
18
- react_1.default.createElement(info_box_1.InfoBox, { color: "neutral", description: TEXT, title: "Neutral" })));
18
+ react_1.default.createElement(info_box_1.InfoBox, { color: "neutral", description: TEXT, title: "Neutral" }),
19
+ react_1.default.createElement(info_box_1.InfoBox, { color: "neutral", description: "Neutral no title" })));
19
20
  }
package/modal-dialog/modal-dialog.d.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  import React, { ReactNode } from "react";
2
+ import { DialogPanelWidth } from "../dialog";
2
3
  interface ModalDialogProps {
3
4
  children?: ReactNode;
4
5
  className?: string;
5
6
  footer?: ReactNode;
6
7
  icon?: ReactNode;
7
8
  title: string;
9
+ width?: DialogPanelWidth;
8
10
  }
9
11
  export declare function ModalDialog(props: ModalDialogProps): React.JSX.Element;
10
12
  export {};
package/modal-dialog/modal-dialog.js CHANGED
@@ -5,12 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ModalDialog = ModalDialog;
7
7
  const react_1 = __importDefault(require("react"));
8
+ const dialog_1 = require("../dialog");
8
9
  function ModalDialog(props) {
9
- var _a;
10
- return (react_1.default.createElement("div", { className: `uxf-modal-dialog ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
11
- react_1.default.createElement("div", { className: "uxf-modal-dialog__header" },
12
- props.icon && react_1.default.createElement("div", { className: "uxf-modal-dialog__icon" }, props.icon),
13
- react_1.default.createElement("div", { className: "uxf-modal-dialog__title" }, props.title)),
14
- props.children && react_1.default.createElement("div", { className: "uxf-modal-dialog__text" }, props.children),
15
- props.footer && react_1.default.createElement("div", { className: "uxf-modal-dialog__footer" }, props.footer)));
10
+ var _a, _b;
11
+ return (react_1.default.createElement(dialog_1.DialogPanel, { width: (_a = props.width) !== null && _a !== void 0 ? _a : "xs" },
12
+ react_1.default.createElement("div", { className: `uxf-modal-dialog ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` },
13
+ react_1.default.createElement("div", { className: "uxf-modal-dialog__header" },
14
+ props.icon,
15
+ react_1.default.createElement("div", { className: "uxf-modal-dialog__title" }, props.title)),
16
+ props.children && react_1.default.createElement("div", { className: "uxf-modal-dialog__text" }, props.children),
17
+ props.footer && react_1.default.createElement("div", { className: "uxf-modal-dialog__footer" }, props.footer))));
16
18
  }
package/modal-dialog/modal-dialog.stories.js CHANGED
@@ -21,8 +21,8 @@ function Default() {
21
21
  react_1.default.createElement(button_1.Button, { color: "positive" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "positive", name: "youtube" }), title: "Positive dialog asda ksdjahs kjdhakj shdk jahksdjh kajsdh k" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
22
22
  react_1.default.createElement(modal_dialog_1.ModalDialog, { footer: react_1.default.createElement(react_1.default.Fragment, null,
23
23
  react_1.default.createElement(button_1.Button, { variant: "text" }, "Cancel"),
24
- react_1.default.createElement(button_1.Button, { color: "negative" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "negative", name: "xmark" }), title: "Negative dialog" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
24
+ react_1.default.createElement(button_1.Button, { color: "negative" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "negative", name: "xmark", size: 48 }), title: "Negative dialog" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
25
25
  react_1.default.createElement(modal_dialog_1.ModalDialog, { footer: react_1.default.createElement(react_1.default.Fragment, null,
26
26
  react_1.default.createElement(button_1.Button, { variant: "text" }, "Cancel"),
27
- react_1.default.createElement(button_1.Button, { color: "info" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "info", name: "circle-info" }), title: "Info dialog" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi.")));
27
+ react_1.default.createElement(button_1.Button, { color: "info" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "info", name: "circle-info" }), title: "Info dialog", width: "lg" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi.")));
28
28
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "11.49.0",
3
+ "version": "11.49.1",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"