@dotss/tictoccroc 0.0.17 → 0.0.18
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/Carousel1Account/Carousel1Account.d.ts +1 -1
- package/dist/teacher/home/components/Carousel1Account/Carousel1Account.mjs +33 -31
- package/dist/teacher/home/components/Carousel2Account/Carousel2Account.d.ts +1 -1
- package/dist/teacher/home/components/Carousel2Account/Carousel2Account.mjs +18 -16
- package/dist/teacher/home/components/TextAccount/TextAccount.d.ts +1 -1
- package/dist/teacher/home/components/TextAccount/TextAccount.mjs +25 -23
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode, SyntheticEvent } from 'react';
|
|
2
|
-
import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
|
|
3
2
|
import { ImageProps } from '../../../../shared/components/Image';
|
|
3
|
+
import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
|
|
4
4
|
import { BannerProps } from '..';
|
|
5
5
|
export interface Carousel1AccountProps extends Omit<FlexboxProps, 'title'> {
|
|
6
6
|
id: string;
|
|
@@ -1,54 +1,56 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as r, Fragment as f, jsxs as n } from "react/jsx-runtime";
|
|
2
2
|
import b from "@dotss/ui/core/useTheme";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
3
|
+
import l from "@dotss/ui/Flexbox";
|
|
4
|
+
import c from "@dotss/ui/Typography";
|
|
5
5
|
import C from "../../../../shared/components/Carousel/Carousel.mjs";
|
|
6
6
|
import S from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
|
|
7
|
-
import
|
|
7
|
+
import w from "../../../../shared/components/Image/Image.mjs";
|
|
8
8
|
import "@dotss/ui";
|
|
9
|
-
function
|
|
10
|
-
id:
|
|
11
|
-
title:
|
|
12
|
-
banners:
|
|
13
|
-
onClickBanner:
|
|
9
|
+
function D({
|
|
10
|
+
id: p,
|
|
11
|
+
title: d,
|
|
12
|
+
banners: m,
|
|
13
|
+
onClickBanner: t,
|
|
14
14
|
imageProps: s,
|
|
15
|
-
...
|
|
15
|
+
...h
|
|
16
16
|
}) {
|
|
17
|
-
const { spacing:
|
|
18
|
-
|
|
17
|
+
const { spacing: a } = b(), u = (i) => (e) => {
|
|
18
|
+
t && typeof t == "function" && (e.stopPropagation(), e.preventDefault(), t(i, e));
|
|
19
19
|
};
|
|
20
|
-
return /* @__PURE__ */
|
|
21
|
-
/* @__PURE__ */
|
|
22
|
-
|
|
20
|
+
return /* @__PURE__ */ r(f, { children: /* @__PURE__ */ n(l, { flexDirection: "column", inlineCSS: { width: "100%" }, ...h, children: [
|
|
21
|
+
/* @__PURE__ */ r(
|
|
22
|
+
c,
|
|
23
23
|
{
|
|
24
|
-
id: `banner-account-carousel1-${
|
|
24
|
+
id: `banner-account-carousel1-${p}`,
|
|
25
25
|
variant: "h2B",
|
|
26
26
|
inlineCSS: {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
whiteSpace: "pre-wrap",
|
|
28
|
+
wordBreak: "keep-all",
|
|
29
|
+
paddingLeft: a.content(4),
|
|
30
|
+
paddingRight: a.content(4),
|
|
31
|
+
marginBottom: a.content(3)
|
|
30
32
|
},
|
|
31
|
-
children:
|
|
33
|
+
children: d
|
|
32
34
|
}
|
|
33
35
|
),
|
|
34
|
-
/* @__PURE__ */
|
|
35
|
-
|
|
36
|
+
/* @__PURE__ */ r(C, { rowCount: 2, step: 1, spacing: 5, children: m.map(({ id: i, title: e, url: o, image: g }) => /* @__PURE__ */ r(S, { children: /* @__PURE__ */ n(
|
|
37
|
+
l,
|
|
36
38
|
{
|
|
37
39
|
tag: "a",
|
|
38
|
-
href:
|
|
40
|
+
href: o,
|
|
39
41
|
alignItems: "center",
|
|
40
42
|
gap: 4,
|
|
41
43
|
draggable: !1,
|
|
42
|
-
onClick:
|
|
44
|
+
onClick: u(o),
|
|
43
45
|
inlineCSS: { width: 264 },
|
|
44
46
|
children: [
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
|
|
47
|
+
/* @__PURE__ */ r(
|
|
48
|
+
w,
|
|
47
49
|
{
|
|
48
|
-
src:
|
|
50
|
+
src: g || "",
|
|
49
51
|
width: 140,
|
|
50
52
|
height: 98,
|
|
51
|
-
alt: `${
|
|
53
|
+
alt: `${e} 이미지`,
|
|
52
54
|
"aria-hidden": !0,
|
|
53
55
|
draggable: !1,
|
|
54
56
|
borderRadius: 12,
|
|
@@ -58,12 +60,12 @@ function I({
|
|
|
58
60
|
...s
|
|
59
61
|
}
|
|
60
62
|
),
|
|
61
|
-
/* @__PURE__ */
|
|
63
|
+
/* @__PURE__ */ r(c, { tag: "p", variant: "b2M", lineClamp: 2, children: e })
|
|
62
64
|
]
|
|
63
65
|
}
|
|
64
|
-
) }, `tictoccroc-carousel1-account-${
|
|
66
|
+
) }, `tictoccroc-carousel1-account-${i}`)) })
|
|
65
67
|
] }) });
|
|
66
68
|
}
|
|
67
69
|
export {
|
|
68
|
-
|
|
70
|
+
D as default
|
|
69
71
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode, SyntheticEvent } from 'react';
|
|
2
|
-
import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
|
|
3
2
|
import { ImageProps } from '../../../../shared/components/Image';
|
|
3
|
+
import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
|
|
4
4
|
import { BannerProps } from '..';
|
|
5
5
|
export interface Carousel2AccountProps extends Omit<FlexboxProps, 'title'> {
|
|
6
6
|
id: string;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as a, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import b from "@dotss/ui/core/useTheme";
|
|
3
|
-
import
|
|
3
|
+
import n from "@dotss/ui/Flexbox";
|
|
4
4
|
import l from "@dotss/ui/Typography";
|
|
5
5
|
import C from "../../../../shared/components/Carousel/Carousel.mjs";
|
|
6
6
|
import x from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
|
|
7
7
|
import S from "../../../../shared/components/Image/Image.mjs";
|
|
8
8
|
import "@dotss/ui";
|
|
9
|
-
function
|
|
9
|
+
function R({
|
|
10
10
|
id: p,
|
|
11
11
|
title: d,
|
|
12
12
|
banners: m,
|
|
@@ -14,16 +14,18 @@ function k({
|
|
|
14
14
|
imageProps: s,
|
|
15
15
|
...u
|
|
16
16
|
}) {
|
|
17
|
-
const { spacing: i } = b(),
|
|
18
|
-
r && typeof r == "function" && (
|
|
17
|
+
const { spacing: i } = b(), h = (o) => (e) => {
|
|
18
|
+
r && typeof r == "function" && (e.stopPropagation(), e.preventDefault(), r(o, e));
|
|
19
19
|
};
|
|
20
|
-
return /* @__PURE__ */ n
|
|
21
|
-
/* @__PURE__ */
|
|
20
|
+
return /* @__PURE__ */ a(n, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...u, children: [
|
|
21
|
+
/* @__PURE__ */ t(
|
|
22
22
|
l,
|
|
23
23
|
{
|
|
24
24
|
id: `banner-account-carousel2-${p}`,
|
|
25
25
|
variant: "h2B",
|
|
26
26
|
inlineCSS: {
|
|
27
|
+
whiteSpace: "pre-wrap",
|
|
28
|
+
wordBreak: "keep-all",
|
|
27
29
|
paddingLeft: i.content(4),
|
|
28
30
|
paddingRight: i.content(4),
|
|
29
31
|
marginBottom: i.content(4)
|
|
@@ -31,24 +33,24 @@ function k({
|
|
|
31
33
|
children: d
|
|
32
34
|
}
|
|
33
35
|
),
|
|
34
|
-
/* @__PURE__ */
|
|
35
|
-
|
|
36
|
+
/* @__PURE__ */ t(C, { rowCount: 1, step: 1, spacing: 3, children: m.map(({ id: o, title: e, subtitle: g, url: c, image: f }) => /* @__PURE__ */ t(x, { children: /* @__PURE__ */ a(
|
|
37
|
+
n,
|
|
36
38
|
{
|
|
37
39
|
tag: "a",
|
|
38
40
|
href: c,
|
|
39
41
|
flexDirection: "column",
|
|
40
42
|
gap: 3,
|
|
41
43
|
draggable: !1,
|
|
42
|
-
onClick:
|
|
44
|
+
onClick: h(c),
|
|
43
45
|
inlineCSS: { width: 240 },
|
|
44
46
|
children: [
|
|
45
|
-
/* @__PURE__ */
|
|
47
|
+
/* @__PURE__ */ t(
|
|
46
48
|
S,
|
|
47
49
|
{
|
|
48
50
|
src: f || "",
|
|
49
51
|
width: 240,
|
|
50
52
|
height: 168,
|
|
51
|
-
alt: `${
|
|
53
|
+
alt: `${e} 이미지`,
|
|
52
54
|
"aria-hidden": !0,
|
|
53
55
|
draggable: !1,
|
|
54
56
|
borderRadius: 12,
|
|
@@ -58,9 +60,9 @@ function k({
|
|
|
58
60
|
...s
|
|
59
61
|
}
|
|
60
62
|
),
|
|
61
|
-
/* @__PURE__ */ n
|
|
62
|
-
/* @__PURE__ */
|
|
63
|
-
/* @__PURE__ */
|
|
63
|
+
/* @__PURE__ */ a(n, { flexDirection: "column", gap: 1, children: [
|
|
64
|
+
/* @__PURE__ */ t(l, { tag: "p", variant: "h4B", lineClamp: 1, children: e }),
|
|
65
|
+
/* @__PURE__ */ t(l, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: g })
|
|
64
66
|
] })
|
|
65
67
|
]
|
|
66
68
|
}
|
|
@@ -68,5 +70,5 @@ function k({
|
|
|
68
70
|
] });
|
|
69
71
|
}
|
|
70
72
|
export {
|
|
71
|
-
|
|
73
|
+
R as default
|
|
72
74
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode, SyntheticEvent } from 'react';
|
|
2
|
-
import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
|
|
3
2
|
import { ImageProps } from '../../../../shared/components/Image';
|
|
3
|
+
import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
|
|
4
4
|
import { BannerProps } from '..';
|
|
5
5
|
export interface TextAccountProps extends Omit<FlexboxProps, 'title'> {
|
|
6
6
|
id: string;
|
|
@@ -1,45 +1,47 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
1
|
+
import { jsxs as h, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import b from "@dotss/ui/core/useTheme";
|
|
3
3
|
import i from "@dotss/ui/Flexbox";
|
|
4
4
|
import { useCheckHoverPossible as x } from "@dotss/ui/hooks";
|
|
5
|
-
import
|
|
5
|
+
import w from "@dotss/ui/Icon";
|
|
6
6
|
import d from "@dotss/ui/Typography";
|
|
7
|
-
import
|
|
7
|
+
import C from "../../../../shared/components/Image/Image.mjs";
|
|
8
8
|
import "@dotss/ui";
|
|
9
9
|
function P({
|
|
10
|
-
id:
|
|
11
|
-
title:
|
|
10
|
+
id: l,
|
|
11
|
+
title: m,
|
|
12
12
|
banners: s,
|
|
13
13
|
onClickBanner: n,
|
|
14
14
|
imageProps: g,
|
|
15
15
|
...f
|
|
16
16
|
}) {
|
|
17
|
-
const { spacing:
|
|
18
|
-
n && typeof n == "function" && (t.stopPropagation(), t.preventDefault(), n(
|
|
17
|
+
const { spacing: r, palette: c } = b(), { isHoverPossible: u } = x(), S = (o) => (t) => {
|
|
18
|
+
n && typeof n == "function" && (t.stopPropagation(), t.preventDefault(), n(o, t));
|
|
19
19
|
};
|
|
20
|
-
return /* @__PURE__ */
|
|
20
|
+
return /* @__PURE__ */ h(i, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...f, children: [
|
|
21
21
|
/* @__PURE__ */ e(
|
|
22
22
|
d,
|
|
23
23
|
{
|
|
24
|
-
id: `banner-account-text-${
|
|
24
|
+
id: `banner-account-text-${l}`,
|
|
25
25
|
variant: "h2B",
|
|
26
26
|
inlineCSS: {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
whiteSpace: "pre-wrap",
|
|
28
|
+
wordBreak: "keep-all",
|
|
29
|
+
paddingLeft: r.content(4),
|
|
30
|
+
paddingRight: r.content(4),
|
|
31
|
+
marginBottom: r.content(2)
|
|
30
32
|
},
|
|
31
|
-
children:
|
|
33
|
+
children: m
|
|
32
34
|
}
|
|
33
35
|
),
|
|
34
|
-
/* @__PURE__ */ e(i, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${
|
|
36
|
+
/* @__PURE__ */ e(i, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${l}`, children: s.map(({ id: o, title: t, url: a, image: p }) => /* @__PURE__ */ e(i, { tag: "li", alignItems: "center", children: /* @__PURE__ */ h(
|
|
35
37
|
i,
|
|
36
38
|
{
|
|
37
39
|
tag: "a",
|
|
38
|
-
href:
|
|
40
|
+
href: a,
|
|
39
41
|
p: 4,
|
|
40
42
|
gap: 3,
|
|
41
43
|
alignItems: "center",
|
|
42
|
-
onClick:
|
|
44
|
+
onClick: S(a),
|
|
43
45
|
inlineCSS: {
|
|
44
46
|
width: "100%",
|
|
45
47
|
"&:focus-within": {
|
|
@@ -52,7 +54,7 @@ function P({
|
|
|
52
54
|
} : {}
|
|
53
55
|
},
|
|
54
56
|
children: [
|
|
55
|
-
|
|
57
|
+
p && /* @__PURE__ */ e(
|
|
56
58
|
i,
|
|
57
59
|
{
|
|
58
60
|
inlineCSS: {
|
|
@@ -61,11 +63,11 @@ function P({
|
|
|
61
63
|
overflow: "hidden"
|
|
62
64
|
},
|
|
63
65
|
children: /* @__PURE__ */ e(
|
|
64
|
-
|
|
66
|
+
C,
|
|
65
67
|
{
|
|
66
68
|
width: 100,
|
|
67
69
|
height: 78,
|
|
68
|
-
src:
|
|
70
|
+
src: p,
|
|
69
71
|
alt: `${t} 이미지`,
|
|
70
72
|
enableFallback: !0,
|
|
71
73
|
enableErrorFallback: !0,
|
|
@@ -79,7 +81,7 @@ function P({
|
|
|
79
81
|
{
|
|
80
82
|
tag: "p",
|
|
81
83
|
variant: "b2R",
|
|
82
|
-
lineClamp:
|
|
84
|
+
lineClamp: a ? 2 : 1,
|
|
83
85
|
inlineCSS: {
|
|
84
86
|
flexGrow: 1
|
|
85
87
|
},
|
|
@@ -92,12 +94,12 @@ function P({
|
|
|
92
94
|
inlineCSS: {
|
|
93
95
|
whiteSpace: "nowrap"
|
|
94
96
|
},
|
|
95
|
-
children: /* @__PURE__ */ e(
|
|
97
|
+
children: /* @__PURE__ */ e(w, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
|
|
96
98
|
}
|
|
97
99
|
)
|
|
98
100
|
]
|
|
99
101
|
}
|
|
100
|
-
) }, `tictoccroc-story-${
|
|
102
|
+
) }, `tictoccroc-story-${o}`)) })
|
|
101
103
|
] });
|
|
102
104
|
}
|
|
103
105
|
export {
|
package/package.json
CHANGED