@designbasekorea/ui 0.4.0 → 0.4.1
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/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +20 -10
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +20 -10
- package/dist/index.js.map +1 -1
- package/dist/index.umd.css +1 -1
- package/dist/index.umd.css.map +1 -1
- package/dist/index.umd.js +20 -10
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
package/dist/index.umd.js
CHANGED
|
@@ -8339,22 +8339,26 @@
|
|
|
8339
8339
|
return (jsxRuntime.jsx("div", { className: classes, children: items.map((item, index) => renderItem(item, index)) }));
|
|
8340
8340
|
};
|
|
8341
8341
|
|
|
8342
|
-
const DesignBaseLogo = ({ width = 193, height = 40, color
|
|
8343
|
-
|
|
8342
|
+
const DesignBaseLogo = ({ width = 193, height = 40, color, className, }) => {
|
|
8343
|
+
// color가 전달되지 않으면 원본 색상(검정) 사용, 전달되면 해당 색상 사용
|
|
8344
|
+
const fillColor = color || '#000000';
|
|
8345
|
+
return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 386 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-label": "DesignBase Logo", children: jsxRuntime.jsxs("g", { fill: fillColor, children: [jsxRuntime.jsx("polygon", { points: "58.4,23.6 77.3,23.6 77.3,16.2 58.4,16.2 58.4,7.7 79.4,7.7 79.4,0.4 49.5,0.4 49.5,39.6 80,39.6 80,32.3 58.4,32.3" }), jsxRuntime.jsx("path", { d: "M95.6,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3c-4.5-2.8-9.6-4.2-14.9-4.2c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.2,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C116.5,13.9,95.6,18,95.6,10.8z" }), jsxRuntime.jsx("rect", { x: "122.7", y: "0.4", width: "8.8", height: "39.2" }), jsxRuntime.jsx("path", { d: "M158.8,7.8c4,0.1,7.8,1.7,10.8,4.4l5-6.3c-4.4-3.7-10-5.7-15.7-5.7c-12.2,0-21.4,8.5-21.4,19.9s9,20,20.9,20 c5.7-0.1,11.2-1.9,15.9-5.1V19.8h-7.6v10.3c-2.4,1.3-5,2-7.7,2.1h-0.4c-6.7-0.1-12.1-5.6-12-12.3v-0.4 C146.7,13,152.2,7.7,158.8,7.8z" }), jsxRuntime.jsx("polygon", { points: "209.1,25.6 190.1,0.4 182,0.4 182,39.6 190.5,39.6 190.5,14.5 209.5,39.6 217.5,39.6 217.5,0.4 209.1,0.4" }), jsxRuntime.jsx("path", { d: "M263.3,18.8c4-0.9,6.9-4.5,6.8-8.6c0-6-5.4-9.8-14-9.8h-24.5v6.5l6.4,1v31.8h18.7c9.1,0,14.8-4.2,14.8-10.9 C271.7,23.8,268.2,19.5,263.3,18.8z M246.9,7.6h8.7c3.4-0.1,5.4,1.5,5.4,4.2s-2,4.4-5.4,4.4h-8.7V7.6z M255.7,32.4h-8.7v-9.3h8.7 c4.1,0,6.7,1.7,6.7,4.5C262.4,30.6,259.8,32.4,255.7,32.4z" }), jsxRuntime.jsx("path", { d: "M290.5,0.4l-17,39.2h9.1l3.1-7.6h18.2l3,7.6h9.5L299.6,0.4H290.5z M288.6,24.9l6.2-15.2l6.2,15.2L288.6,24.9z" }), jsxRuntime.jsx("path", { d: "M328.9,10.8c0-2.1,2-3.2,5-3.2s8.1,1.6,12.2,4l3.4-7.3C345,1.4,339.9,0,334.6,0c-9.1,0-15.2,4.5-15.2,11.6 c0,13.9,20.9,9.6,20.9,17c0,2.4-2.2,3.8-5.8,3.8c-4.1,0-9.9-2.3-13.9-5.9l-3.5,7.2c4.9,4,11,6.2,17.3,6.2c8.7,0,15.4-4.1,15.4-11.8 C349.8,13.9,328.9,18,328.9,10.8z" }), jsxRuntime.jsx("polygon", { points: "364.4,32.3 364.4,23.6 383.3,23.6 383.3,16.2 364.4,16.2 364.4,7.7 385.4,7.7 385.4,0.4 355.5,0.4 355.5,39.6 386,39.6 386,32.3" }), jsxRuntime.jsx("path", { d: "M23.1,0.4H0v6.5l6.5,1v31.8h16.3c12.4,0,21-8.1,21-19.6S35.2,0.4,23.1,0.4z M34.7,20.1c0,7.2-4.8,12.1-11.4,12.1h-8V7.8H23 C29.8,7.8,34.8,12.8,34.7,20.1L34.7,20.1z" })] }) }));
|
|
8344
8346
|
};
|
|
8345
8347
|
DesignBaseLogo.displayName = 'DesignBaseLogo';
|
|
8346
8348
|
|
|
8347
|
-
const DesignBaseLogoMark = ({ size = 38, color
|
|
8349
|
+
const DesignBaseLogoMark = ({ size = 38, color, className, }) => {
|
|
8348
8350
|
// 원본 비율 유지: 95:100
|
|
8349
8351
|
const aspectRatio = 95 / 100;
|
|
8350
8352
|
const width = size * aspectRatio;
|
|
8351
8353
|
const height = size;
|
|
8352
|
-
|
|
8354
|
+
// color가 전달되지 않으면 원본 색상(검정) 사용, 전달되면 해당 색상 사용
|
|
8355
|
+
const fillColor = color || '#000000';
|
|
8356
|
+
return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 95 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-label": "DesignBase Mark", children: jsxRuntime.jsx("path", { fill: fillColor, d: "M45,0H0V8l10,2V90L0,92v8H45A50,50,0,0,0,45,0ZM43.12,90H20V10H38.33a15,15,0,0,1,0,30H30.11V50h13a20,20,0,0,1,0,40ZM71.4,80A30,30,0,0,0,55.83,42.83,24.93,24.93,0,0,0,60.27,13,40,40,0,0,1,71.4,80Z" }) }));
|
|
8353
8357
|
};
|
|
8354
8358
|
DesignBaseLogoMark.displayName = 'DesignBaseLogoMark';
|
|
8355
8359
|
|
|
8356
|
-
const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', variant = '
|
|
8357
|
-
const classes = clsx('designbase-logo', `designbase-logo--${size}`, `designbase-logo--${variant}`, {
|
|
8360
|
+
const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', variant = 'original', clickable = false, href, target = '_self', fullWidth = false, className, onClick, ...props }) => {
|
|
8361
|
+
const classes = clsx('designbase-logo', `designbase-logo--${size}`, variant && `designbase-logo--${variant}`, {
|
|
8358
8362
|
'designbase-logo--clickable': clickable || href,
|
|
8359
8363
|
'designbase-logo--full-width': fullWidth,
|
|
8360
8364
|
'designbase-logo--svg': type !== 'custom',
|
|
@@ -8380,12 +8384,18 @@
|
|
|
8380
8384
|
};
|
|
8381
8385
|
// variant별 색상 매핑
|
|
8382
8386
|
const getLogoColor = () => {
|
|
8387
|
+
// original일 때는 undefined를 반환하여 SVG 원본 색상(검정) 사용
|
|
8388
|
+
// color prop을 전달하지 않으면 SVG 로고 컴포넌트가 원본 색상을 사용
|
|
8389
|
+
if (variant === 'original') {
|
|
8390
|
+
return undefined;
|
|
8391
|
+
}
|
|
8383
8392
|
const colors = {
|
|
8393
|
+
light: '#ffffff', // 밝은 색상 (흰색)
|
|
8394
|
+
dark: '#000000', // 어두운 색상 (검정)
|
|
8384
8395
|
default: 'var(--db-text-primary)',
|
|
8385
8396
|
primary: 'var(--db-brand-primary)',
|
|
8386
8397
|
secondary: 'var(--db-text-secondary)',
|
|
8387
|
-
white: '
|
|
8388
|
-
dark: 'var(--db-text-primary)',
|
|
8398
|
+
white: '#ffffff', // white는 light와 동일하게 처리
|
|
8389
8399
|
};
|
|
8390
8400
|
return colors[variant];
|
|
8391
8401
|
};
|
|
@@ -8394,11 +8404,11 @@
|
|
|
8394
8404
|
const color = getLogoColor();
|
|
8395
8405
|
// DesignBase 풀 로고
|
|
8396
8406
|
if (type === 'designbase') {
|
|
8397
|
-
return (jsxRuntime.jsx(DesignBaseLogo, { width: width, height: height, color
|
|
8407
|
+
return (jsxRuntime.jsx(DesignBaseLogo, { width: width, height: height, ...(color !== undefined && { color }), className: "designbase-logo__svg" }));
|
|
8398
8408
|
}
|
|
8399
8409
|
// DesignBase 심볼 마크
|
|
8400
8410
|
if (type === 'designbase-mark') {
|
|
8401
|
-
return (jsxRuntime.jsx(DesignBaseLogoMark, { size: markSize, color
|
|
8411
|
+
return (jsxRuntime.jsx(DesignBaseLogoMark, { size: markSize, ...(color !== undefined && { color }), className: "designbase-logo__svg" }));
|
|
8402
8412
|
}
|
|
8403
8413
|
// 커스텀 로고
|
|
8404
8414
|
if (src) {
|