@spaziodati/atoka-design-system 10.5.0 → 10.7.0

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 (4) hide show
  1. package/DetailPage/DetailPageHeaderUI.d.ts +1 -0
  2. package/DetailPage/index.js +16 -14
  3. package/{atoka-design-system-10.5.0.min.css → atoka-design-system-10.7.0.min.css} +1 -1
  4. package/package.json +1 -1
package/DetailPage/DetailPageHeaderUI.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface DetailPageHeaderUIProps extends PropsWithClassName {
6
6
  isLoading?: true;
7
7
  hasError?: true;
8
8
  errorMessage?: string;
9
+ isCollapsed?: true;
9
10
  leftContent?: React.ReactNode;
10
11
  rightContent?: React.ReactNode;
11
12
  image?: React.ReactNode;
package/DetailPage/index.js CHANGED
@@ -25,14 +25,16 @@ const DetailPageBodyContainer = (props) => {
25
25
  };
26
26
  DetailPageBodyContainer.displayName = "DetailPageBodyContainer";
27
27
  const DetailPageHeaderUI = (props) => {
28
- const { isLoading, hasError, errorMessage, leftContent, rightContent, children } = props;
28
+ const { isLoading, hasError, errorMessage, isCollapsed, leftContent, rightContent, children } = props;
29
29
  function renderImage() {
30
30
  if (!props.image) {
31
31
  return null;
32
32
  }
33
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "me-4 d-none d-md-block", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemImage, { size: "md", children: props.image }) });
33
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "image-container me-4 d-none d-md-block", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemImage, { size: "md", children: props.image }) });
34
34
  }
35
- const baseClassNames = "detail-page-header-ui container ps-0 pe-0";
35
+ const baseClassNames = classnames("detail-page-header-ui container px-0", {
36
+ "is-collapsed": isCollapsed
37
+ });
36
38
  if (isLoading) {
37
39
  return (
38
40
  // !This className user-pages-spinner-container is used in atoka-revenge smoke tests.
@@ -42,7 +44,7 @@ const DetailPageHeaderUI = (props) => {
42
44
  role: "progressbar",
43
45
  className: classnames(
44
46
  baseClassNames,
45
- "user-pages-spinner-container d-flex h-100 justify-content-center align-items-center"
47
+ "user-pages-spinner-container d-flex h-100 py-5 justify-content-center align-items-center"
46
48
  ),
47
49
  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner, { size: SpinnerSize.small })
48
50
  }
@@ -50,25 +52,25 @@ const DetailPageHeaderUI = (props) => {
50
52
  );
51
53
  }
52
54
  if (hasError) {
53
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classnames(baseClassNames, "d-flex h-100 justify-content-center align-items-center"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { color: "red", children: errorMessage }) });
55
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classnames(baseClassNames, "d-flex h-100 py-5 justify-content-center align-items-center"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { color: "red", children: errorMessage }) });
54
56
  }
55
57
  function renderTitle() {
56
58
  if (typeof props.title === "string") {
57
- return /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { className: "title-ellipsis-container", size: "sm", children: props.title });
59
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { className: "line-clamp-1 mb-0", size: "sm", children: props.title });
58
60
  }
59
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "title-ellipsis-container", children: props.title });
61
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "line-clamp-1", children: props.title });
60
62
  }
61
63
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: classnames(baseClassNames, "d-grid"), children: [
62
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "left-content", children: leftContent }),
63
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "content-container h-100 align-items-center d-flex", children: [
64
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "left-content mb-2 mb-md-0", children: leftContent }),
65
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "d-flex align-items-center", children: [
64
66
  renderImage(),
65
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-100", children: [
67
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "d-flex flex-column justify-content-center h-100", children: [
66
68
  props.upperContent,
67
- props.title && renderTitle(),
68
- children && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "detail-page-header-ui-children d-flex flex-column", children })
69
+ props.title && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "title-wrapper", children: renderTitle() }),
70
+ children && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "center-content-children d-flex flex-column", children })
69
71
  ] })
70
- ] }),
71
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "actions-container", children: rightContent })
72
+ ] }) }),
73
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "d-none d-lg-flex flex-column row-gap-4 actions-container", children: rightContent })
72
74
  ] });
73
75
  };
74
76
  DetailPageHeaderUI.displayName = "DetailPageHeaderUI";