@liner-fe/design-library 1.2.9 → 1.2.11
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/lib/index.d.ts +33 -1
- package/lib/index.js +190 -5
- package/package.json +4 -4
package/lib/index.d.ts
CHANGED
|
@@ -58,4 +58,36 @@ declare const TemplateIllustDialog: {
|
|
|
58
58
|
TextButton({ children, className, ...props }: TextButtonProps): react_jsx_runtime.JSX.Element;
|
|
59
59
|
};
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
interface SideBannerProps {
|
|
62
|
+
button: {
|
|
63
|
+
onClick: () => void;
|
|
64
|
+
label: string;
|
|
65
|
+
};
|
|
66
|
+
onCloseClick: () => void;
|
|
67
|
+
}
|
|
68
|
+
declare const SideBanner: ({ button, onCloseClick }: SideBannerProps) => react_jsx_runtime.JSX.Element;
|
|
69
|
+
|
|
70
|
+
interface NewsType {
|
|
71
|
+
type: 'news';
|
|
72
|
+
tag?: string;
|
|
73
|
+
onClick: () => void;
|
|
74
|
+
onCloseClick: () => void;
|
|
75
|
+
content: string;
|
|
76
|
+
}
|
|
77
|
+
interface AlertType {
|
|
78
|
+
type: 'alert';
|
|
79
|
+
onClick: () => void;
|
|
80
|
+
onCloseClick: () => void;
|
|
81
|
+
content: string;
|
|
82
|
+
}
|
|
83
|
+
interface PromotionType {
|
|
84
|
+
type: 'promotion';
|
|
85
|
+
tag?: string;
|
|
86
|
+
onClick: () => void;
|
|
87
|
+
onCloseClick: () => void;
|
|
88
|
+
content: string;
|
|
89
|
+
}
|
|
90
|
+
type TopBannerType = NewsType | AlertType | PromotionType;
|
|
91
|
+
declare const TopBanner: ({ type, ...rest }: TopBannerType) => react_jsx_runtime.JSX.Element;
|
|
92
|
+
|
|
93
|
+
export { type AlertType, type NewsType, type PromotionType, SideBanner, type SideBannerProps, TemplateDialog, TemplateIllustDialog, TopBanner, type TopBannerType };
|
package/lib/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { IconClose } from '@liner-fe/icon';
|
|
2
|
-
import { IconButton, Title, Paragraph, Button, TextButton } from '@liner-fe/prism';
|
|
1
|
+
import { IconClose, IconArrowRight, IconExclamationmarkFill } from '@liner-fe/icon';
|
|
2
|
+
import { IconButton, Title, Paragraph, Button, TextButton, Caption } from '@liner-fe/prism';
|
|
3
3
|
import { Dialog } from 'radix-ui';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { twMerge } from 'tailwind-merge';
|
|
@@ -58,7 +58,7 @@ TemplateDialog.Close = ({ onClose }) => /* @__PURE__ */ jsx(
|
|
|
58
58
|
TemplateDialog.Title = ({
|
|
59
59
|
children,
|
|
60
60
|
className
|
|
61
|
-
}) => /* @__PURE__ */ jsx(Dialog.Title, { asChild: true, children: /* @__PURE__ */ jsx(Title, { type: "accent", weight: "bold", size: 4, className: tw(className), children }) });
|
|
61
|
+
}) => /* @__PURE__ */ jsx(Dialog.Title, { asChild: true, children: /* @__PURE__ */ jsx(Title, { type: "accent", weight: "bold", size: 4, className: tw("max-s:text-center", className), children }) });
|
|
62
62
|
TemplateDialog.Description = ({
|
|
63
63
|
children,
|
|
64
64
|
className
|
|
@@ -68,7 +68,7 @@ TemplateDialog.Description = ({
|
|
|
68
68
|
type: "normal",
|
|
69
69
|
weight: "regular",
|
|
70
70
|
size: 4,
|
|
71
|
-
className: tw("mt-component-200 text-neutral-label-primary/90!", className),
|
|
71
|
+
className: tw("mt-component-200 text-neutral-label-primary/90! max-s:text-center", className),
|
|
72
72
|
children
|
|
73
73
|
}
|
|
74
74
|
) });
|
|
@@ -181,5 +181,190 @@ TemplateIllustDialog.Buttons = ({
|
|
|
181
181
|
);
|
|
182
182
|
TemplateIllustDialog.Button = ({ children, className, ...props }) => /* @__PURE__ */ jsx(Button, { ...props, className: tw("w-full!", className), children });
|
|
183
183
|
TemplateIllustDialog.TextButton = ({ children, className, ...props }) => /* @__PURE__ */ jsx(TextButton, { ...props, className: tw(className), children });
|
|
184
|
+
var SideBanner = ({ button, onCloseClick }) => {
|
|
185
|
+
return /* @__PURE__ */ jsxs(
|
|
186
|
+
"div",
|
|
187
|
+
{
|
|
188
|
+
className: "border-neutral-border-opaque-subtle bg-neutral-container-low flex h-[152px] w-[236px] flex-col justify-between rounded-[8px] border",
|
|
189
|
+
children: [
|
|
190
|
+
/* @__PURE__ */ jsx("div", { className: "pt-component-150 pr-component-150 flex w-full items-start justify-end", children: /* @__PURE__ */ jsx(
|
|
191
|
+
IconButton,
|
|
192
|
+
{
|
|
193
|
+
icon: {
|
|
194
|
+
icon: IconClose
|
|
195
|
+
},
|
|
196
|
+
level: "primary",
|
|
197
|
+
fill: false,
|
|
198
|
+
size: "xs",
|
|
199
|
+
onClick: onCloseClick
|
|
200
|
+
}
|
|
201
|
+
) }),
|
|
202
|
+
/* @__PURE__ */ jsx(
|
|
203
|
+
"div",
|
|
204
|
+
{
|
|
205
|
+
className: "px-component-400 flex w-full flex-col items-center justify-center pb-[20px]",
|
|
206
|
+
children: /* @__PURE__ */ jsx(
|
|
207
|
+
"button",
|
|
208
|
+
{
|
|
209
|
+
className: "bg-inverse-container-lowest flex h-[28px] flex-col items-center justify-center rounded-s",
|
|
210
|
+
onClick: button.onClick,
|
|
211
|
+
type: "button",
|
|
212
|
+
children: /* @__PURE__ */ jsx("div", { className: "px-component-150 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "px-component-100 flex items-start", children: /* @__PURE__ */ jsx(Caption, { color: "inverse-label-primary", size: 1, weight: "medium", type: "normal", children: button.label }) }) })
|
|
213
|
+
}
|
|
214
|
+
)
|
|
215
|
+
}
|
|
216
|
+
)
|
|
217
|
+
]
|
|
218
|
+
}
|
|
219
|
+
);
|
|
220
|
+
};
|
|
221
|
+
var NewsBanner = ({ tag, onClick, onCloseClick, content }) => {
|
|
222
|
+
return /* @__PURE__ */ jsxs(
|
|
223
|
+
"div",
|
|
224
|
+
{
|
|
225
|
+
className: "px-positive-400 py-component-200 hover:bg-brand-fill-low-hover bg-brand-fill-low flex h-[44px] w-full items-center justify-between",
|
|
226
|
+
onClick,
|
|
227
|
+
children: [
|
|
228
|
+
/* @__PURE__ */ jsx("div", { className: "flex w-full grow flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex items-center", children: [
|
|
229
|
+
tag && /* @__PURE__ */ jsxs("div", { className: "gap-positive-150 flex items-center", children: [
|
|
230
|
+
/* @__PURE__ */ jsx(Paragraph, { color: "brand-label-primary", size: 4, weight: "medium", type: "normal", children: tag }),
|
|
231
|
+
/* @__PURE__ */ jsx("div", { className: "bg-neutral-border-overlay-normal h-[12px] w-px" })
|
|
232
|
+
] }),
|
|
233
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
234
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
|
|
235
|
+
Paragraph,
|
|
236
|
+
{
|
|
237
|
+
color: "neutral-label-primary",
|
|
238
|
+
size: 4,
|
|
239
|
+
weight: "regular",
|
|
240
|
+
type: "normal",
|
|
241
|
+
children: content
|
|
242
|
+
}
|
|
243
|
+
) }),
|
|
244
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col items-start justify-center", children: /* @__PURE__ */ jsx("div", { className: "pl-component-100 flex items-center", children: /* @__PURE__ */ jsx(IconArrowRight, { type: "neutral-label-primary", size: "xs" }) }) })
|
|
245
|
+
] })
|
|
246
|
+
] }) }),
|
|
247
|
+
/* @__PURE__ */ jsx(
|
|
248
|
+
IconButton,
|
|
249
|
+
{
|
|
250
|
+
onClick: onCloseClick,
|
|
251
|
+
icon: {
|
|
252
|
+
icon: IconClose
|
|
253
|
+
},
|
|
254
|
+
level: "primary",
|
|
255
|
+
fill: false,
|
|
256
|
+
size: "s"
|
|
257
|
+
}
|
|
258
|
+
)
|
|
259
|
+
]
|
|
260
|
+
}
|
|
261
|
+
);
|
|
262
|
+
};
|
|
263
|
+
var AlertBanner = ({ onClick, onCloseClick, content }) => {
|
|
264
|
+
return /* @__PURE__ */ jsxs(
|
|
265
|
+
"div",
|
|
266
|
+
{
|
|
267
|
+
onClick,
|
|
268
|
+
className: "py-component-200 pl-gap-positive-600 pr-gap-positive-400 flex h-[44px] w-full items-center justify-between bg-[rgba(254,143,22,0.45)] hover:bg-[rgba(254,143,22,0.48)]",
|
|
269
|
+
children: [
|
|
270
|
+
/* @__PURE__ */ jsx("div", { className: "flex w-full grow flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex items-center", children: [
|
|
271
|
+
/* @__PURE__ */ jsx("div", { className: "flex h-[16px] w-[16px] items-center justify-center", children: /* @__PURE__ */ jsx(IconExclamationmarkFill, { size: "xs", fill: true }) }),
|
|
272
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
273
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
|
|
274
|
+
Paragraph,
|
|
275
|
+
{
|
|
276
|
+
color: "neutral-label-primary",
|
|
277
|
+
size: 4,
|
|
278
|
+
weight: "regular",
|
|
279
|
+
type: "normal",
|
|
280
|
+
children: content
|
|
281
|
+
}
|
|
282
|
+
) }),
|
|
283
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col items-start justify-center", children: /* @__PURE__ */ jsx("div", { className: "pl-component-200 flex flex-col items-start", children: /* @__PURE__ */ jsx(
|
|
284
|
+
"div",
|
|
285
|
+
{
|
|
286
|
+
className: "border-neutral-border-opaque-strong bg-neutral-fill-overlay-lowest flex h-[24px] flex-col items-end justify-center rounded-xs border",
|
|
287
|
+
children: /* @__PURE__ */ jsx("div", { className: "px-component-50 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "px-component-100 flex items-start", children: /* @__PURE__ */ jsx(
|
|
288
|
+
Caption,
|
|
289
|
+
{
|
|
290
|
+
color: "neutral-label-primary",
|
|
291
|
+
size: 1,
|
|
292
|
+
weight: "regular",
|
|
293
|
+
type: "normal",
|
|
294
|
+
children: "Label"
|
|
295
|
+
}
|
|
296
|
+
) }) })
|
|
297
|
+
}
|
|
298
|
+
) }) })
|
|
299
|
+
] })
|
|
300
|
+
] }) }),
|
|
301
|
+
/* @__PURE__ */ jsx(
|
|
302
|
+
IconButton,
|
|
303
|
+
{
|
|
304
|
+
icon: {
|
|
305
|
+
icon: IconClose
|
|
306
|
+
},
|
|
307
|
+
level: "primary",
|
|
308
|
+
fill: false,
|
|
309
|
+
size: "s",
|
|
310
|
+
onClick: onCloseClick
|
|
311
|
+
}
|
|
312
|
+
)
|
|
313
|
+
]
|
|
314
|
+
}
|
|
315
|
+
);
|
|
316
|
+
};
|
|
317
|
+
var PromotionBanner = ({ onClick, onCloseClick, content, tag }) => {
|
|
318
|
+
return /* @__PURE__ */ jsxs(
|
|
319
|
+
"div",
|
|
320
|
+
{
|
|
321
|
+
onClick,
|
|
322
|
+
className: "px-positive-400 py-component-200 bg-inverse-container-static-high hover:bg-inverse-container-static-high-hover flex h-[44px] w-full items-center justify-between",
|
|
323
|
+
children: [
|
|
324
|
+
/* @__PURE__ */ jsx("div", { className: "flex w-full grow flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex items-center", children: [
|
|
325
|
+
tag && /* @__PURE__ */ jsxs("div", { className: "gap-positive-150 flex items-center", children: [
|
|
326
|
+
/* @__PURE__ */ jsx(Paragraph, { color: "brand-label-primary", size: 4, weight: "medium", type: "normal", children: tag }),
|
|
327
|
+
/* @__PURE__ */ jsx("div", { className: "bg-neutral-border-overlay-normal h-[12px] w-px" })
|
|
328
|
+
] }),
|
|
329
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
330
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
|
|
331
|
+
Paragraph,
|
|
332
|
+
{
|
|
333
|
+
color: "inverse-label-static-primary",
|
|
334
|
+
size: 4,
|
|
335
|
+
weight: "regular",
|
|
336
|
+
type: "normal",
|
|
337
|
+
children: content
|
|
338
|
+
}
|
|
339
|
+
) }),
|
|
340
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col items-start justify-center", children: /* @__PURE__ */ jsx("div", { className: "pl-component-100 flex items-center", children: /* @__PURE__ */ jsx(IconArrowRight, { type: "inverse-label-static-primary", size: "xs" }) }) })
|
|
341
|
+
] })
|
|
342
|
+
] }) }),
|
|
343
|
+
/* @__PURE__ */ jsx(
|
|
344
|
+
IconButton,
|
|
345
|
+
{
|
|
346
|
+
onClick: onCloseClick,
|
|
347
|
+
icon: {
|
|
348
|
+
icon: IconClose
|
|
349
|
+
},
|
|
350
|
+
level: "inverse-static",
|
|
351
|
+
fill: false,
|
|
352
|
+
size: "s"
|
|
353
|
+
}
|
|
354
|
+
)
|
|
355
|
+
]
|
|
356
|
+
}
|
|
357
|
+
);
|
|
358
|
+
};
|
|
359
|
+
var TopBanner = ({ type, ...rest }) => {
|
|
360
|
+
switch (type) {
|
|
361
|
+
case "news":
|
|
362
|
+
return /* @__PURE__ */ jsx(NewsBanner, { ...rest });
|
|
363
|
+
case "alert":
|
|
364
|
+
return /* @__PURE__ */ jsx(AlertBanner, { ...rest });
|
|
365
|
+
case "promotion":
|
|
366
|
+
return /* @__PURE__ */ jsx(PromotionBanner, { ...rest });
|
|
367
|
+
}
|
|
368
|
+
};
|
|
184
369
|
|
|
185
|
-
export { TemplateDialog, TemplateIllustDialog };
|
|
370
|
+
export { SideBanner, TemplateDialog, TemplateIllustDialog, TopBanner };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@liner-fe/design-library",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.11",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@tailwindcss/vite": "^4.1.14",
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"react-dom": "18.2.0",
|
|
11
11
|
"tailwind-merge": "^3.3.1",
|
|
12
12
|
"tailwindcss": "^4.1.14",
|
|
13
|
-
"@liner-fe/design-token": "^2.5.
|
|
14
|
-
"@liner-fe/icon": "^0.2.
|
|
15
|
-
"@liner-fe/prism": "^2.11.
|
|
13
|
+
"@liner-fe/design-token": "^2.5.43",
|
|
14
|
+
"@liner-fe/icon": "^0.2.68",
|
|
15
|
+
"@liner-fe/prism": "^2.11.15"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
18
|
"@chromatic-com/storybook": "^4.1.1",
|