@dotss/tictoccroc 0.0.19 → 0.0.21
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.
- package/dist/teacher/home/components/Carousel2Account/Carousel2Account.d.ts +1 -1
- package/dist/teacher/home/components/Carousel2Account/Carousel2Account.mjs +8 -8
- package/dist/teacher/home/components/TextAccount/TextAccount.fallback.mjs +5 -2
- package/dist/teacher/home/components/TextAccount/TextAccount.mjs +35 -30
- package/package.json +2 -2
|
@@ -7,7 +7,7 @@ export interface Carousel2AccountProps extends Omit<FlexboxProps, 'title'> {
|
|
|
7
7
|
title: ReactNode;
|
|
8
8
|
banners: Array<BannerProps & {
|
|
9
9
|
image?: string;
|
|
10
|
-
|
|
10
|
+
subTitle?: ReactNode;
|
|
11
11
|
}>;
|
|
12
12
|
onClickBanner?: (url: string, e: SyntheticEvent) => void;
|
|
13
13
|
bannerWidth?: number;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as a, jsx as
|
|
1
|
+
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import b from "@dotss/ui/core/useTheme";
|
|
3
3
|
import n from "@dotss/ui/Flexbox";
|
|
4
4
|
import l from "@dotss/ui/Typography";
|
|
@@ -10,15 +10,15 @@ function R({
|
|
|
10
10
|
id: p,
|
|
11
11
|
title: d,
|
|
12
12
|
banners: m,
|
|
13
|
-
onClickBanner:
|
|
13
|
+
onClickBanner: t,
|
|
14
14
|
imageProps: s,
|
|
15
15
|
...u
|
|
16
16
|
}) {
|
|
17
17
|
const { spacing: i } = b(), h = (o) => (e) => {
|
|
18
|
-
|
|
18
|
+
t && typeof t == "function" && (e.stopPropagation(), e.preventDefault(), t(o, e));
|
|
19
19
|
};
|
|
20
20
|
return /* @__PURE__ */ a(n, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...u, children: [
|
|
21
|
-
/* @__PURE__ */
|
|
21
|
+
/* @__PURE__ */ r(
|
|
22
22
|
l,
|
|
23
23
|
{
|
|
24
24
|
id: `banner-account-carousel2-${p}`,
|
|
@@ -33,7 +33,7 @@ function R({
|
|
|
33
33
|
children: d
|
|
34
34
|
}
|
|
35
35
|
),
|
|
36
|
-
/* @__PURE__ */
|
|
36
|
+
/* @__PURE__ */ r(C, { rowCount: 1, step: 1, spacing: 3, children: m.map(({ id: o, title: e, subTitle: g, url: c, image: f }) => /* @__PURE__ */ r(x, { children: /* @__PURE__ */ a(
|
|
37
37
|
n,
|
|
38
38
|
{
|
|
39
39
|
tag: "a",
|
|
@@ -44,7 +44,7 @@ function R({
|
|
|
44
44
|
onClick: h(c),
|
|
45
45
|
inlineCSS: { width: 240 },
|
|
46
46
|
children: [
|
|
47
|
-
/* @__PURE__ */
|
|
47
|
+
/* @__PURE__ */ r(
|
|
48
48
|
S,
|
|
49
49
|
{
|
|
50
50
|
src: f || "",
|
|
@@ -61,8 +61,8 @@ function R({
|
|
|
61
61
|
}
|
|
62
62
|
),
|
|
63
63
|
/* @__PURE__ */ a(n, { flexDirection: "column", gap: 1, children: [
|
|
64
|
-
/* @__PURE__ */
|
|
65
|
-
/* @__PURE__ */
|
|
64
|
+
/* @__PURE__ */ r(l, { tag: "p", variant: "h4B", lineClamp: 1, children: e }),
|
|
65
|
+
/* @__PURE__ */ r(l, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: g })
|
|
66
66
|
] })
|
|
67
67
|
]
|
|
68
68
|
}
|
|
@@ -29,13 +29,16 @@ function s() {
|
|
|
29
29
|
/* @__PURE__ */ e(
|
|
30
30
|
n,
|
|
31
31
|
{
|
|
32
|
-
|
|
32
|
+
pt: 3,
|
|
33
|
+
pl: 4,
|
|
34
|
+
pb: 3,
|
|
35
|
+
pr: 4,
|
|
33
36
|
gap: 3,
|
|
34
37
|
alignItems: "center",
|
|
35
38
|
justifyContent: "space-between",
|
|
36
39
|
inlineCSS: { width: "100%" },
|
|
37
40
|
children: [
|
|
38
|
-
/* @__PURE__ */ t(i, { width: 100, minWidth: 100, height:
|
|
41
|
+
/* @__PURE__ */ t(i, { width: 100, minWidth: 100, height: 70, borderRadius: 8 }),
|
|
39
42
|
/* @__PURE__ */ t(i, { width: "100%", height: 48 }),
|
|
40
43
|
/* @__PURE__ */ t(i, { width: 16, height: 16, minWidth: 16 })
|
|
41
44
|
]
|
|
@@ -1,47 +1,51 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { jsxs as d, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import S from "@dotss/ui/core/useTheme";
|
|
3
|
+
import r from "@dotss/ui/Flexbox";
|
|
4
4
|
import { useCheckHoverPossible as x } from "@dotss/ui/hooks";
|
|
5
5
|
import w from "@dotss/ui/Icon";
|
|
6
|
-
import
|
|
6
|
+
import h from "@dotss/ui/Typography";
|
|
7
7
|
import C from "../../../../shared/components/Image/Image.mjs";
|
|
8
8
|
import "@dotss/ui";
|
|
9
9
|
function P({
|
|
10
|
-
id:
|
|
11
|
-
title:
|
|
12
|
-
banners:
|
|
13
|
-
onClickBanner:
|
|
10
|
+
id: a,
|
|
11
|
+
title: s,
|
|
12
|
+
banners: m,
|
|
13
|
+
onClickBanner: i,
|
|
14
14
|
imageProps: g,
|
|
15
15
|
...f
|
|
16
16
|
}) {
|
|
17
|
-
const { spacing:
|
|
18
|
-
|
|
17
|
+
const { spacing: o, palette: c } = S(), { isHoverPossible: u } = x(), b = (l) => (t) => {
|
|
18
|
+
i && typeof i == "function" && (t.stopPropagation(), t.preventDefault(), i(l, t));
|
|
19
19
|
};
|
|
20
|
-
return /* @__PURE__ */
|
|
20
|
+
return /* @__PURE__ */ d(r, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...f, children: [
|
|
21
21
|
/* @__PURE__ */ e(
|
|
22
|
-
|
|
22
|
+
h,
|
|
23
23
|
{
|
|
24
|
-
id: `banner-account-text-${
|
|
24
|
+
id: `banner-account-text-${a}`,
|
|
25
25
|
variant: "h2B",
|
|
26
26
|
inlineCSS: {
|
|
27
27
|
whiteSpace: "pre-wrap",
|
|
28
28
|
wordBreak: "keep-all",
|
|
29
|
-
paddingLeft:
|
|
30
|
-
paddingRight:
|
|
31
|
-
marginBottom:
|
|
29
|
+
paddingLeft: o.content(4),
|
|
30
|
+
paddingRight: o.content(4),
|
|
31
|
+
marginBottom: o.content(2)
|
|
32
32
|
},
|
|
33
|
-
children:
|
|
33
|
+
children: s
|
|
34
34
|
}
|
|
35
35
|
),
|
|
36
|
-
/* @__PURE__ */ e(
|
|
37
|
-
|
|
36
|
+
/* @__PURE__ */ e(r, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${a}`, children: m.map(({ id: l, title: t, url: p, image: n }) => /* @__PURE__ */ e(r, { tag: "li", alignItems: "center", children: /* @__PURE__ */ d(
|
|
37
|
+
r,
|
|
38
38
|
{
|
|
39
39
|
tag: "a",
|
|
40
|
-
href:
|
|
41
|
-
|
|
40
|
+
href: p,
|
|
41
|
+
pt: n ? 3 : 4,
|
|
42
|
+
pl: 4,
|
|
43
|
+
pb: n ? 3 : 4,
|
|
44
|
+
pr: 4,
|
|
42
45
|
gap: 3,
|
|
43
46
|
alignItems: "center",
|
|
44
|
-
|
|
47
|
+
draggable: !1,
|
|
48
|
+
onClick: b(p),
|
|
45
49
|
inlineCSS: {
|
|
46
50
|
width: "100%",
|
|
47
51
|
"&:focus-within": {
|
|
@@ -54,8 +58,8 @@ function P({
|
|
|
54
58
|
} : {}
|
|
55
59
|
},
|
|
56
60
|
children: [
|
|
57
|
-
|
|
58
|
-
|
|
61
|
+
n && /* @__PURE__ */ e(
|
|
62
|
+
r,
|
|
59
63
|
{
|
|
60
64
|
inlineCSS: {
|
|
61
65
|
minWidth: 100,
|
|
@@ -66,9 +70,10 @@ function P({
|
|
|
66
70
|
C,
|
|
67
71
|
{
|
|
68
72
|
width: 100,
|
|
69
|
-
height:
|
|
70
|
-
src:
|
|
73
|
+
height: 70,
|
|
74
|
+
src: n,
|
|
71
75
|
alt: `${t} 이미지`,
|
|
76
|
+
draggable: !1,
|
|
72
77
|
enableFallback: !0,
|
|
73
78
|
enableErrorFallback: !0,
|
|
74
79
|
...g
|
|
@@ -77,11 +82,11 @@ function P({
|
|
|
77
82
|
}
|
|
78
83
|
),
|
|
79
84
|
/* @__PURE__ */ e(
|
|
80
|
-
|
|
85
|
+
h,
|
|
81
86
|
{
|
|
82
87
|
tag: "p",
|
|
83
88
|
variant: "b2R",
|
|
84
|
-
lineClamp:
|
|
89
|
+
lineClamp: n ? 2 : 1,
|
|
85
90
|
inlineCSS: {
|
|
86
91
|
flexGrow: 1
|
|
87
92
|
},
|
|
@@ -89,7 +94,7 @@ function P({
|
|
|
89
94
|
}
|
|
90
95
|
),
|
|
91
96
|
/* @__PURE__ */ e(
|
|
92
|
-
|
|
97
|
+
r,
|
|
93
98
|
{
|
|
94
99
|
inlineCSS: {
|
|
95
100
|
whiteSpace: "nowrap"
|
|
@@ -99,7 +104,7 @@ function P({
|
|
|
99
104
|
)
|
|
100
105
|
]
|
|
101
106
|
}
|
|
102
|
-
) }, `tictoccroc-story-${
|
|
107
|
+
) }, `tictoccroc-story-${l}`)) })
|
|
103
108
|
] });
|
|
104
109
|
}
|
|
105
110
|
export {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dotss/tictoccroc",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.21",
|
|
5
5
|
"description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
|
|
6
6
|
"main": "./dist/index.mjs",
|
|
7
7
|
"module": "./dist/index.mjs",
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
"vitest": "^1.6.0"
|
|
103
103
|
},
|
|
104
104
|
"peerDependencies": {
|
|
105
|
-
"@dotss/ui": ">=
|
|
105
|
+
"@dotss/ui": ">=1.0.3",
|
|
106
106
|
"@emotion/react": "^11.14.0",
|
|
107
107
|
"@emotion/styled": "^11.14.0",
|
|
108
108
|
"dayjs": "^1.11.13",
|