@dotss/tictoccroc 0.4.0 → 0.4.2

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 (3) hide show
  1. package/dist/parent/notification/components/NotificationCard/NotificationCard.d.ts +3 -1
  2. package/dist/parent/notification/components/NotificationCard/NotificationCard.mjs +47 -44
  3. package/package.json +17 -1
package/dist/parent/notification/components/NotificationCard/NotificationCard.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { MouseEvent } from 'react';
2
2
  import { ButtonProps } from '@dotss/ui/Button';
3
3
  import { CollapseProps } from '@dotss/ui/Collapse';
4
+ import { BoxProps } from 'node_modules/@dotss/ui/Box/Box';
4
5
  import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
5
6
  export interface NotificationCardProps {
6
7
  id: number;
@@ -12,8 +13,9 @@ export interface NotificationCardProps {
12
13
  collapseProps?: CollapseProps;
13
14
  wrapperProps?: FlexboxProps;
14
15
  buttonProps?: ButtonProps;
16
+ descriptionProps?: BoxProps;
15
17
  collapseDuration?: number;
16
18
  onClick: (e: MouseEvent<HTMLButtonElement>, id: number, isCollapsed: boolean) => void;
17
19
  }
18
- declare function NotificationCard({ id, collapsed, title, description, regDate, isNew, collapseProps, wrapperProps, buttonProps, onClick, collapseDuration }: NotificationCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
20
+ declare function NotificationCard({ id, collapsed, title, description, regDate, isNew, collapseProps, wrapperProps, buttonProps, descriptionProps, onClick, collapseDuration }: NotificationCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
19
21
  export default NotificationCard;
package/dist/parent/notification/components/NotificationCard/NotificationCard.mjs CHANGED
@@ -1,25 +1,26 @@
1
- import { jsxs as i, jsx as e } from "react/jsx-runtime";
2
- import { Badge as x, Typography as c, Icon as k, Collapse as v, Box as w } from "@dotss/ui";
3
- import H from "@dotss/ui/core/useTheme";
1
+ import { jsxs as r, jsx as e } from "react/jsx-runtime";
2
+ import { Badge as k, Typography as m, Icon as v, Collapse as H, Box as j } from "@dotss/ui";
3
+ import w from "@dotss/ui/core/useTheme";
4
4
  import n from "@dotss/ui/Flexbox";
5
- import { useCheckHoverPossible as j } from "@dotss/ui/hooks";
6
- import z from "dayjs";
7
- function M({
8
- id: s,
9
- collapsed: r,
10
- title: g,
11
- description: m,
12
- regDate: a,
13
- isNew: p,
14
- collapseProps: d,
15
- wrapperProps: h,
16
- buttonProps: f,
17
- onClick: u,
18
- collapseDuration: l = 400
5
+ import { useCheckHoverPossible as z } from "@dotss/ui/hooks";
6
+ import I from "dayjs";
7
+ function L({
8
+ id: c,
9
+ collapsed: t,
10
+ title: s,
11
+ description: h,
12
+ regDate: l,
13
+ isNew: d,
14
+ collapseProps: p,
15
+ wrapperProps: f,
16
+ buttonProps: u,
17
+ descriptionProps: i,
18
+ onClick: C,
19
+ collapseDuration: g = 400
19
20
  }) {
20
- const { palette: o, spacing: b, typography: t } = H(), { isHoverPossible: C } = j(), y = (S) => u(S, s, !r);
21
- return /* @__PURE__ */ i(n, { flexDirection: "column", inlineCSS: { width: "100%" }, ...h, children: [
22
- /* @__PURE__ */ i(
21
+ const { palette: o, spacing: b, typography: a } = w(), { isHoverPossible: S } = z(), x = (y) => C(y, c, !t);
22
+ return /* @__PURE__ */ r(n, { flexDirection: "column", inlineCSS: { width: "100%" }, ...f, children: [
23
+ /* @__PURE__ */ r(
23
24
  n,
24
25
  {
25
26
  tag: "button",
@@ -30,19 +31,19 @@ function M({
30
31
  "&:active": {
31
32
  backgroundColor: o.background.primary
32
33
  },
33
- ...C ? {
34
+ ...S ? {
34
35
  "&:hover": {
35
36
  backgroundColor: o.background.primary
36
37
  }
37
38
  } : {}
38
39
  },
39
- onClick: y,
40
- "aria-expanded": !r,
41
- ...f,
40
+ onClick: x,
41
+ "aria-expanded": !t,
42
+ ...u,
42
43
  children: [
43
- /* @__PURE__ */ i(n, { gap: 2, children: [
44
- p && /* @__PURE__ */ e(
45
- x,
44
+ /* @__PURE__ */ r(n, { gap: 2, children: [
45
+ d && /* @__PURE__ */ e(
46
+ k,
46
47
  {
47
48
  size: "large",
48
49
  color: "pink",
@@ -54,9 +55,9 @@ function M({
54
55
  }
55
56
  }
56
57
  ),
57
- /* @__PURE__ */ i(n, { flexDirection: "column", gap: 1, alignItems: "flex-start", children: [
58
- /* @__PURE__ */ e(c, { tag: "span", variant: "h4B", textAlign: "left", children: g }),
59
- a && /* @__PURE__ */ e(c, { tag: "span", variant: "b5R", color: "grey.50", children: z(a).format("YYYY.MM.DD") })
58
+ /* @__PURE__ */ r(n, { flexDirection: "column", gap: 1, alignItems: "flex-start", children: [
59
+ /* @__PURE__ */ e(m, { tag: "span", variant: "h4B", textAlign: "left", children: s }),
60
+ l && /* @__PURE__ */ e(m, { tag: "span", variant: "b5R", color: "grey.50", children: I(l).format("YYYY.MM.DD") })
60
61
  ] })
61
62
  ] }),
62
63
  /* @__PURE__ */ e(
@@ -65,36 +66,38 @@ function M({
65
66
  alignItems: "center",
66
67
  style: {
67
68
  willChange: "transform",
68
- transition: `transform ${l}ms ease-in-out`,
69
- transform: r ? "rotate(0deg)" : "rotate(180deg)"
69
+ transition: `transform ${g}ms ease-in-out`,
70
+ transform: t ? "rotate(0deg)" : "rotate(180deg)"
70
71
  },
71
- children: /* @__PURE__ */ e(k, { name: "ChevronDownLine", size: "xSmall", color: "grey.50" })
72
+ children: /* @__PURE__ */ e(v, { name: "ChevronDownLine", size: "xSmall", color: "grey.50" })
72
73
  }
73
74
  )
74
75
  ]
75
76
  }
76
77
  ),
77
78
  /* @__PURE__ */ e(
78
- v,
79
+ H,
79
80
  {
80
- isCollapsed: r,
81
- duration: l,
81
+ isCollapsed: t,
82
+ duration: g,
82
83
  role: "region",
83
- ...d,
84
+ ...p,
84
85
  children: /* @__PURE__ */ e(
85
- w,
86
+ j,
86
87
  {
87
88
  p: 4,
89
+ ...i,
88
90
  inlineCSS: {
89
91
  backgroundColor: o.background.primary,
90
92
  "& *": {
91
- fontSize: t.b3R.size,
92
- lineHeight: t.b3R.lineHeight,
93
- letterSpacing: t.b3R.letterSpacing
93
+ fontSize: a.b3R.size,
94
+ lineHeight: a.b3R.lineHeight,
95
+ letterSpacing: a.b3R.letterSpacing
94
96
  },
95
- "& img": { width: "100% !important" }
97
+ "& img": { maxWidth: "100% !important", height: "unset !important" },
98
+ ...(i == null ? void 0 : i.inlineCSS) || {}
96
99
  },
97
- dangerouslySetInnerHTML: { __html: m }
100
+ dangerouslySetInnerHTML: { __html: h }
98
101
  }
99
102
  )
100
103
  }
@@ -102,5 +105,5 @@ function M({
102
105
  ] });
103
106
  }
104
107
  export {
105
- M as default
108
+ L as default
106
109
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dotss/tictoccroc",
3
3
  "type": "module",
4
- "version": "0.4.0",
4
+ "version": "0.4.2",
5
5
  "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
6
6
  "main": "./dist/index.mjs",
7
7
  "module": "./dist/index.mjs",
@@ -98,6 +98,22 @@
98
98
  "./parent/b2b/utils/*": {
99
99
  "import": "./dist/parent/b2b/utils/*/index.mjs",
100
100
  "types": "./dist/parent/b2b/utils/*/index.d.ts"
101
+ },
102
+ "./parent/notification/components": {
103
+ "import": "./dist/parent/notification/components/index.mjs",
104
+ "types": "./dist/parent/notification/components/index.d.ts"
105
+ },
106
+ "./parent/notification/components/*": {
107
+ "import": "./dist/parent/notification/components/*/index.mjs",
108
+ "types": "./dist/parent/notification/components/*/index.d.ts"
109
+ },
110
+ "./parent/notification/utils": {
111
+ "import": "./dist/parent/notification/utils/index.mjs",
112
+ "types": "./dist/parent/notification/utils/index.d.ts"
113
+ },
114
+ "./parent/notification/utils/*": {
115
+ "import": "./dist/parent/notification/utils/*/index.mjs",
116
+ "types": "./dist/parent/notification/utils/*/index.d.ts"
101
117
  }
102
118
  },
103
119
  "devDependencies": {