@spaziodati/atoka-design-system 10.2.0 → 10.3.1-beta.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 (4) hide show
  1. package/DetailPage/DetailPageHeaderUI.d.ts +1 -0
  2. package/DetailPage/index.js +14 -12
  3. package/{atoka-design-system-10.2.0.min.css → atoka-design-system-10.3.1-beta.1.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, { 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 ps-0 pe-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.
@@ -54,21 +56,21 @@ const DetailPageHeaderUI = (props) => {
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-flex flex-column row-gap-4 actions-container", children: rightContent })
72
74
  ] });
73
75
  };
74
76
  DetailPageHeaderUI.displayName = "DetailPageHeaderUI";