@liner-fe/design-library 1.2.10 → 1.2.12
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 +31 -1
- package/lib/index.js +201 -3
- package/package.json +4 -4
package/lib/index.d.ts
CHANGED
|
@@ -58,4 +58,34 @@ 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 BaseType {
|
|
71
|
+
onClick: () => void;
|
|
72
|
+
onCloseClick?: () => void;
|
|
73
|
+
mountEffectCallback?: () => void;
|
|
74
|
+
content: string;
|
|
75
|
+
}
|
|
76
|
+
interface NewsType extends BaseType {
|
|
77
|
+
type: 'news';
|
|
78
|
+
tag?: string;
|
|
79
|
+
}
|
|
80
|
+
interface AlertType extends BaseType {
|
|
81
|
+
type: 'alert';
|
|
82
|
+
}
|
|
83
|
+
interface PromotionType extends BaseType {
|
|
84
|
+
type: 'promotion';
|
|
85
|
+
tag?: string;
|
|
86
|
+
tagColor?: string;
|
|
87
|
+
}
|
|
88
|
+
type TopBannerType = NewsType | AlertType | PromotionType;
|
|
89
|
+
declare const TopBanner: ({ type, ...rest }: TopBannerType) => react_jsx_runtime.JSX.Element;
|
|
90
|
+
|
|
91
|
+
export { type AlertType, type NewsType, type PromotionType, SideBanner, type SideBannerProps, TemplateDialog, TemplateIllustDialog, TopBanner, type TopBannerType };
|
package/lib/index.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
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';
|
|
6
6
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
7
|
+
import { useEffect } from 'react';
|
|
7
8
|
|
|
8
9
|
// src/template-dialog/index.tsx
|
|
9
10
|
var tw = (...args) => twMerge(clsx(args));
|
|
@@ -181,5 +182,202 @@ TemplateIllustDialog.Buttons = ({
|
|
|
181
182
|
);
|
|
182
183
|
TemplateIllustDialog.Button = ({ children, className, ...props }) => /* @__PURE__ */ jsx(Button, { ...props, className: tw("w-full!", className), children });
|
|
183
184
|
TemplateIllustDialog.TextButton = ({ children, className, ...props }) => /* @__PURE__ */ jsx(TextButton, { ...props, className: tw(className), children });
|
|
185
|
+
var SideBanner = ({ button, onCloseClick }) => {
|
|
186
|
+
return /* @__PURE__ */ jsxs(
|
|
187
|
+
"div",
|
|
188
|
+
{
|
|
189
|
+
className: "border-neutral-border-opaque-subtle bg-neutral-container-low flex h-[152px] w-[236px] flex-col justify-between rounded-[8px] border",
|
|
190
|
+
children: [
|
|
191
|
+
/* @__PURE__ */ jsx("div", { className: "pt-component-150 pr-component-150 flex w-full items-start justify-end", children: /* @__PURE__ */ jsx(
|
|
192
|
+
IconButton,
|
|
193
|
+
{
|
|
194
|
+
icon: {
|
|
195
|
+
icon: IconClose
|
|
196
|
+
},
|
|
197
|
+
level: "primary",
|
|
198
|
+
fill: false,
|
|
199
|
+
size: "xs",
|
|
200
|
+
onClick: onCloseClick
|
|
201
|
+
}
|
|
202
|
+
) }),
|
|
203
|
+
/* @__PURE__ */ jsx(
|
|
204
|
+
"div",
|
|
205
|
+
{
|
|
206
|
+
className: "px-component-400 flex w-full flex-col items-center justify-center pb-[20px]",
|
|
207
|
+
children: /* @__PURE__ */ jsx(
|
|
208
|
+
"button",
|
|
209
|
+
{
|
|
210
|
+
className: "bg-inverse-container-lowest flex h-[28px] flex-col items-center justify-center rounded-s",
|
|
211
|
+
onClick: button.onClick,
|
|
212
|
+
type: "button",
|
|
213
|
+
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 }) }) })
|
|
214
|
+
}
|
|
215
|
+
)
|
|
216
|
+
}
|
|
217
|
+
)
|
|
218
|
+
]
|
|
219
|
+
}
|
|
220
|
+
);
|
|
221
|
+
};
|
|
222
|
+
var NewsBanner = ({ tag, onClick, onCloseClick, content }) => {
|
|
223
|
+
return /* @__PURE__ */ jsxs(
|
|
224
|
+
"div",
|
|
225
|
+
{
|
|
226
|
+
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 cursor-pointer",
|
|
227
|
+
onClick,
|
|
228
|
+
children: [
|
|
229
|
+
/* @__PURE__ */ jsx("div", { className: "flex w-full grow flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex items-center", children: [
|
|
230
|
+
tag && /* @__PURE__ */ jsxs("div", { className: "gap-positive-150 flex items-center", children: [
|
|
231
|
+
/* @__PURE__ */ jsx(Paragraph, { color: "brand-label-primary", size: 4, weight: "medium", type: "normal", children: tag }),
|
|
232
|
+
/* @__PURE__ */ jsx("div", { className: "bg-neutral-border-overlay-normal h-[12px] w-px" })
|
|
233
|
+
] }),
|
|
234
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
235
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
|
|
236
|
+
Paragraph,
|
|
237
|
+
{
|
|
238
|
+
color: "neutral-label-primary",
|
|
239
|
+
size: 4,
|
|
240
|
+
weight: "regular",
|
|
241
|
+
type: "normal",
|
|
242
|
+
children: content
|
|
243
|
+
}
|
|
244
|
+
) }),
|
|
245
|
+
/* @__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" }) }) })
|
|
246
|
+
] })
|
|
247
|
+
] }) }),
|
|
248
|
+
onCloseClick && /* @__PURE__ */ jsx(
|
|
249
|
+
IconButton,
|
|
250
|
+
{
|
|
251
|
+
onClick: onCloseClick,
|
|
252
|
+
icon: {
|
|
253
|
+
icon: IconClose
|
|
254
|
+
},
|
|
255
|
+
level: "primary",
|
|
256
|
+
fill: false,
|
|
257
|
+
size: "s"
|
|
258
|
+
}
|
|
259
|
+
)
|
|
260
|
+
]
|
|
261
|
+
}
|
|
262
|
+
);
|
|
263
|
+
};
|
|
264
|
+
var AlertBanner = ({ onClick, onCloseClick, content }) => {
|
|
265
|
+
return /* @__PURE__ */ jsxs(
|
|
266
|
+
"div",
|
|
267
|
+
{
|
|
268
|
+
onClick,
|
|
269
|
+
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)] cursor-pointer",
|
|
270
|
+
children: [
|
|
271
|
+
/* @__PURE__ */ jsx("div", { className: "flex w-full grow flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex items-center", children: [
|
|
272
|
+
/* @__PURE__ */ jsx("div", { className: "flex h-[16px] w-[16px] items-center justify-center", children: /* @__PURE__ */ jsx(IconExclamationmarkFill, { size: "xs", fill: true }) }),
|
|
273
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
274
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
|
|
275
|
+
Paragraph,
|
|
276
|
+
{
|
|
277
|
+
color: "neutral-label-primary",
|
|
278
|
+
size: 4,
|
|
279
|
+
weight: "regular",
|
|
280
|
+
type: "normal",
|
|
281
|
+
children: content
|
|
282
|
+
}
|
|
283
|
+
) }),
|
|
284
|
+
/* @__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(
|
|
285
|
+
"div",
|
|
286
|
+
{
|
|
287
|
+
className: "border-neutral-border-opaque-strong bg-neutral-fill-overlay-lowest flex h-[24px] flex-col items-end justify-center rounded-xs border",
|
|
288
|
+
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(
|
|
289
|
+
Caption,
|
|
290
|
+
{
|
|
291
|
+
color: "neutral-label-primary",
|
|
292
|
+
size: 1,
|
|
293
|
+
weight: "regular",
|
|
294
|
+
type: "normal",
|
|
295
|
+
children: "Label"
|
|
296
|
+
}
|
|
297
|
+
) }) })
|
|
298
|
+
}
|
|
299
|
+
) }) })
|
|
300
|
+
] })
|
|
301
|
+
] }) }),
|
|
302
|
+
onCloseClick && /* @__PURE__ */ jsx(
|
|
303
|
+
IconButton,
|
|
304
|
+
{
|
|
305
|
+
icon: {
|
|
306
|
+
icon: IconClose
|
|
307
|
+
},
|
|
308
|
+
level: "primary",
|
|
309
|
+
fill: false,
|
|
310
|
+
size: "s",
|
|
311
|
+
onClick: onCloseClick
|
|
312
|
+
}
|
|
313
|
+
)
|
|
314
|
+
]
|
|
315
|
+
}
|
|
316
|
+
);
|
|
317
|
+
};
|
|
318
|
+
var PromotionBanner = ({
|
|
319
|
+
onClick,
|
|
320
|
+
onCloseClick,
|
|
321
|
+
content,
|
|
322
|
+
tag,
|
|
323
|
+
tagColor,
|
|
324
|
+
mountEffectCallback
|
|
325
|
+
}) => {
|
|
326
|
+
useEffect(() => {
|
|
327
|
+
if (mountEffectCallback) {
|
|
328
|
+
mountEffectCallback();
|
|
329
|
+
}
|
|
330
|
+
}, []);
|
|
331
|
+
return /* @__PURE__ */ jsxs(
|
|
332
|
+
"div",
|
|
333
|
+
{
|
|
334
|
+
onClick,
|
|
335
|
+
className: "px-positive-600 m: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 cursor-pointer",
|
|
336
|
+
children: [
|
|
337
|
+
/* @__PURE__ */ jsx("div", { className: "flex w-full grow flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex items-center", children: [
|
|
338
|
+
tag && /* @__PURE__ */ jsxs("div", { className: "gap-positive-150 s:flex items-center hidden", children: [
|
|
339
|
+
/* @__PURE__ */ jsx(Paragraph, { size: 4, weight: "medium", type: "normal", style: { color: tagColor }, children: tag }),
|
|
340
|
+
/* @__PURE__ */ jsx("div", { className: "bg-inverse-label-static-secondary h-[12px] w-px" })
|
|
341
|
+
] }),
|
|
342
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
|
|
343
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
|
|
344
|
+
Paragraph,
|
|
345
|
+
{
|
|
346
|
+
color: "inverse-label-static-primary",
|
|
347
|
+
size: 4,
|
|
348
|
+
weight: "regular",
|
|
349
|
+
type: "normal",
|
|
350
|
+
children: content
|
|
351
|
+
}
|
|
352
|
+
) }),
|
|
353
|
+
/* @__PURE__ */ jsx("div", { className: "flex-col s:flex items-start justify-center hidden", children: /* @__PURE__ */ jsx("div", { className: "pl-component-100 flex items-center", children: /* @__PURE__ */ jsx(IconArrowRight, { type: "inverse-label-static-primary", size: "xs" }) }) })
|
|
354
|
+
] })
|
|
355
|
+
] }) }),
|
|
356
|
+
onCloseClick && /* @__PURE__ */ jsx(
|
|
357
|
+
IconButton,
|
|
358
|
+
{
|
|
359
|
+
onClick: onCloseClick,
|
|
360
|
+
icon: {
|
|
361
|
+
icon: IconClose
|
|
362
|
+
},
|
|
363
|
+
level: "inverse-static",
|
|
364
|
+
fill: false,
|
|
365
|
+
size: "s"
|
|
366
|
+
}
|
|
367
|
+
)
|
|
368
|
+
]
|
|
369
|
+
}
|
|
370
|
+
);
|
|
371
|
+
};
|
|
372
|
+
var TopBanner = ({ type, ...rest }) => {
|
|
373
|
+
switch (type) {
|
|
374
|
+
case "news":
|
|
375
|
+
return /* @__PURE__ */ jsx(NewsBanner, { ...rest });
|
|
376
|
+
case "alert":
|
|
377
|
+
return /* @__PURE__ */ jsx(AlertBanner, { ...rest });
|
|
378
|
+
case "promotion":
|
|
379
|
+
return /* @__PURE__ */ jsx(PromotionBanner, { ...rest });
|
|
380
|
+
}
|
|
381
|
+
};
|
|
184
382
|
|
|
185
|
-
export { TemplateDialog, TemplateIllustDialog };
|
|
383
|
+
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.12",
|
|
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/
|
|
15
|
-
"@liner-fe/
|
|
13
|
+
"@liner-fe/design-token": "^2.5.44",
|
|
14
|
+
"@liner-fe/prism": "^2.11.15",
|
|
15
|
+
"@liner-fe/icon": "^0.2.68"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
18
|
"@chromatic-com/storybook": "^4.1.1",
|