@akinon/ui-layout 1.0.0 → 1.1.0
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/cjs/NavCard/__tests__/navcard.test.d.ts +2 -0
- package/dist/cjs/NavCard/__tests__/navcard.test.d.ts.map +1 -0
- package/dist/cjs/NavCard/__tests__/navcard.test.js +40 -0
- package/dist/cjs/NavCard/__tests__/navcard.test.tsx +92 -0
- package/dist/cjs/NavCard/index.d.ts +3 -10
- package/dist/cjs/NavCard/index.d.ts.map +1 -1
- package/dist/cjs/NavCard/index.js +62 -15
- package/dist/cjs/NavCard/types.d.ts +15 -11
- package/dist/esm/NavCard/__tests__/navcard.test.d.ts +2 -0
- package/dist/esm/NavCard/__tests__/navcard.test.d.ts.map +1 -0
- package/dist/esm/NavCard/__tests__/navcard.test.js +38 -0
- package/dist/esm/NavCard/__tests__/navcard.test.tsx +92 -0
- package/dist/esm/NavCard/index.d.ts +3 -10
- package/dist/esm/NavCard/index.d.ts.map +1 -1
- package/dist/esm/NavCard/index.js +62 -15
- package/dist/esm/NavCard/types.d.ts +15 -11
- package/package.json +6 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"navcard.test.d.ts","sourceRoot":"","sources":["../../../../src/NavCard/__tests__/navcard.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const utils_1 = require("@akinon/utils");
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const vitest_1 = require("vitest");
|
|
6
|
+
const __1 = require("..");
|
|
7
|
+
(0, vitest_1.describe)('NavCard', () => {
|
|
8
|
+
(0, vitest_1.it)('renders with required props', () => {
|
|
9
|
+
(0, utils_1.render)(React.createElement(__1.NavCard, { title: "Test Title", description: "Test Description", icon: "search" }));
|
|
10
|
+
(0, vitest_1.expect)(utils_1.screen.getByText('Test Title')).toBeInTheDocument();
|
|
11
|
+
(0, vitest_1.expect)(utils_1.screen.getByText('Test Description')).toBeInTheDocument();
|
|
12
|
+
});
|
|
13
|
+
(0, vitest_1.it)('renders with default variant', () => {
|
|
14
|
+
(0, utils_1.render)(React.createElement(__1.NavCard, { title: "Test Title", description: "Test Description", icon: "search", variant: "default" }));
|
|
15
|
+
const iconContainer = utils_1.screen.getByTestId('icon-container');
|
|
16
|
+
(0, vitest_1.expect)(iconContainer).toHaveClass('akinon-navcard-icon-default');
|
|
17
|
+
});
|
|
18
|
+
(0, vitest_1.it)('renders with akinon variant', () => {
|
|
19
|
+
(0, utils_1.render)(React.createElement(__1.NavCard, { title: "Test Title", description: "Test Description", icon: "search", variant: "akinon" }));
|
|
20
|
+
const iconContainer = utils_1.screen.getByTestId('icon-container');
|
|
21
|
+
(0, vitest_1.expect)(iconContainer).toHaveClass('akinon-navcard-icon-akinon');
|
|
22
|
+
});
|
|
23
|
+
(0, vitest_1.it)('applies custom background color', () => {
|
|
24
|
+
const customBackground = '#ff0000';
|
|
25
|
+
(0, utils_1.render)(React.createElement(__1.NavCard, { title: "Test Title", description: "Test Description", icon: "search", background: customBackground }));
|
|
26
|
+
const iconContainer = utils_1.screen.getByTestId('icon-container');
|
|
27
|
+
(0, vitest_1.expect)(iconContainer).toHaveStyle({ background: customBackground });
|
|
28
|
+
});
|
|
29
|
+
(0, vitest_1.it)('applies custom icon color', () => {
|
|
30
|
+
(0, utils_1.render)(React.createElement(__1.NavCard, { title: "Test Title", description: "Test Description", icon: "search", iconColor: "red" }));
|
|
31
|
+
const icon = utils_1.screen.getByTestId('icon');
|
|
32
|
+
(0, vitest_1.expect)(icon).toHaveStyle({ fill: 'red' });
|
|
33
|
+
});
|
|
34
|
+
(0, vitest_1.it)('applies custom className', () => {
|
|
35
|
+
const customClass = 'custom-nav-card';
|
|
36
|
+
(0, utils_1.render)(React.createElement(__1.NavCard, { title: "Test Title", description: "Test Description", icon: "search", className: customClass }));
|
|
37
|
+
const navCard = utils_1.screen.getByTestId('nav-card');
|
|
38
|
+
(0, vitest_1.expect)(navCard).toHaveClass(customClass);
|
|
39
|
+
});
|
|
40
|
+
});
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { render, screen } from '@akinon/utils';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { describe, expect, it } from 'vitest';
|
|
4
|
+
|
|
5
|
+
import { NavCard } from '..';
|
|
6
|
+
|
|
7
|
+
describe('NavCard', () => {
|
|
8
|
+
it('renders with required props', () => {
|
|
9
|
+
render(
|
|
10
|
+
<NavCard
|
|
11
|
+
title="Test Title"
|
|
12
|
+
description="Test Description"
|
|
13
|
+
icon="search"
|
|
14
|
+
/>
|
|
15
|
+
);
|
|
16
|
+
|
|
17
|
+
expect(screen.getByText('Test Title')).toBeInTheDocument();
|
|
18
|
+
expect(screen.getByText('Test Description')).toBeInTheDocument();
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
it('renders with default variant', () => {
|
|
22
|
+
render(
|
|
23
|
+
<NavCard
|
|
24
|
+
title="Test Title"
|
|
25
|
+
description="Test Description"
|
|
26
|
+
icon="search"
|
|
27
|
+
variant="default"
|
|
28
|
+
/>
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
const iconContainer = screen.getByTestId('icon-container');
|
|
32
|
+
expect(iconContainer).toHaveClass('akinon-navcard-icon-default');
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
it('renders with akinon variant', () => {
|
|
36
|
+
render(
|
|
37
|
+
<NavCard
|
|
38
|
+
title="Test Title"
|
|
39
|
+
description="Test Description"
|
|
40
|
+
icon="search"
|
|
41
|
+
variant="akinon"
|
|
42
|
+
/>
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
const iconContainer = screen.getByTestId('icon-container');
|
|
46
|
+
expect(iconContainer).toHaveClass('akinon-navcard-icon-akinon');
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
it('applies custom background color', () => {
|
|
50
|
+
const customBackground = '#ff0000';
|
|
51
|
+
render(
|
|
52
|
+
<NavCard
|
|
53
|
+
title="Test Title"
|
|
54
|
+
description="Test Description"
|
|
55
|
+
icon="search"
|
|
56
|
+
background={customBackground}
|
|
57
|
+
/>
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
const iconContainer = screen.getByTestId('icon-container');
|
|
61
|
+
expect(iconContainer).toHaveStyle({ background: customBackground });
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
it('applies custom icon color', () => {
|
|
65
|
+
render(
|
|
66
|
+
<NavCard
|
|
67
|
+
title="Test Title"
|
|
68
|
+
description="Test Description"
|
|
69
|
+
icon="search"
|
|
70
|
+
iconColor="red"
|
|
71
|
+
/>
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
const icon = screen.getByTestId('icon');
|
|
75
|
+
expect(icon).toHaveStyle({ fill: 'red' });
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
it('applies custom className', () => {
|
|
79
|
+
const customClass = 'custom-nav-card';
|
|
80
|
+
render(
|
|
81
|
+
<NavCard
|
|
82
|
+
title="Test Title"
|
|
83
|
+
description="Test Description"
|
|
84
|
+
icon="search"
|
|
85
|
+
className={customClass}
|
|
86
|
+
/>
|
|
87
|
+
);
|
|
88
|
+
|
|
89
|
+
const navCard = screen.getByTestId('nav-card');
|
|
90
|
+
expect(navCard).toHaveClass(customClass);
|
|
91
|
+
});
|
|
92
|
+
});
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import './index.css';
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import type { NavCardProps } from './types';
|
|
4
|
-
export type
|
|
3
|
+
export type * from './types';
|
|
5
4
|
/**
|
|
6
5
|
* NavCard component for navigation or highlighting sections in the interface.
|
|
7
6
|
*
|
|
@@ -13,18 +12,12 @@ export type { NavCardProps } from './types';
|
|
|
13
12
|
* - **Description**: A short description to elaborate on the title or purpose of the card.
|
|
14
13
|
* - **Icon**: Optionally display an icon to visually represent the NavCard's content or functionality.
|
|
15
14
|
* - **Color Variants**: Offers a range of predefined color options for theming, including:
|
|
15
|
+
* - `default`
|
|
16
16
|
* - `akinon`
|
|
17
|
-
* - `azure`
|
|
18
|
-
* - `blue`
|
|
19
|
-
* - `orange`
|
|
20
|
-
* - `red`
|
|
21
|
-
* - `green`
|
|
22
|
-
* - `pink`
|
|
23
|
-
* - `purple`
|
|
24
17
|
* - **Custom Styling**: Allows additional customizations via the `className` prop.
|
|
25
18
|
*
|
|
26
19
|
* Ideal for use in dashboards, navigation menus, or any scenario where visually distinct
|
|
27
20
|
* and thematically consistent navigation elements are required.
|
|
28
21
|
*/
|
|
29
|
-
export declare const NavCard: ({ title, description, icon, variant, className }: NavCardProps) => React.JSX.Element;
|
|
22
|
+
export declare const NavCard: ({ title, description, icon, variant, className, background, iconColor }: NavCardProps) => React.JSX.Element;
|
|
30
23
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/NavCard/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/NavCard/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,mBAAmB,SAAS,CAAC;AAE7B;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,OAAO,4EAQjB,YAAY,sBAwFd,CAAC"}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.NavCard = void 0;
|
|
4
|
-
require("
|
|
4
|
+
const icons_1 = require("@akinon/icons");
|
|
5
|
+
const ui_theme_1 = require("@akinon/ui-theme");
|
|
6
|
+
const ui_typography_1 = require("@akinon/ui-typography");
|
|
7
|
+
const cssinjs_1 = require("@ant-design/cssinjs");
|
|
8
|
+
const antd_1 = require("antd");
|
|
5
9
|
const clsx_1 = require("clsx");
|
|
6
10
|
const React = require("react");
|
|
11
|
+
const Flex_1 = require("../Flex");
|
|
7
12
|
/**
|
|
8
13
|
* NavCard component for navigation or highlighting sections in the interface.
|
|
9
14
|
*
|
|
@@ -15,25 +20,67 @@ const React = require("react");
|
|
|
15
20
|
* - **Description**: A short description to elaborate on the title or purpose of the card.
|
|
16
21
|
* - **Icon**: Optionally display an icon to visually represent the NavCard's content or functionality.
|
|
17
22
|
* - **Color Variants**: Offers a range of predefined color options for theming, including:
|
|
23
|
+
* - `default`
|
|
18
24
|
* - `akinon`
|
|
19
|
-
* - `azure`
|
|
20
|
-
* - `blue`
|
|
21
|
-
* - `orange`
|
|
22
|
-
* - `red`
|
|
23
|
-
* - `green`
|
|
24
|
-
* - `pink`
|
|
25
|
-
* - `purple`
|
|
26
25
|
* - **Custom Styling**: Allows additional customizations via the `className` prop.
|
|
27
26
|
*
|
|
28
27
|
* Ideal for use in dashboards, navigation menus, or any scenario where visually distinct
|
|
29
28
|
* and thematically consistent navigation elements are required.
|
|
30
29
|
*/
|
|
31
|
-
const NavCard = ({ title, description, icon, variant, className }) => {
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
30
|
+
const NavCard = ({ title, description, icon, variant = 'default', className, background, iconColor = 'white' }) => {
|
|
31
|
+
const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
|
|
32
|
+
const { token, hashId } = (0, ui_theme_1.useToken)();
|
|
33
|
+
const navCardToken = theme.NavCardTokens;
|
|
34
|
+
const customTokens = theme.CustomTokens || {};
|
|
35
|
+
const prefixClsWithoutHash = `.${getPrefixCls()}-navcard`;
|
|
36
|
+
const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
|
|
37
|
+
(0, cssinjs_1.useStyleRegister)({
|
|
38
|
+
token: token,
|
|
39
|
+
path: ['NavCard'],
|
|
40
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
41
|
+
theme: theme
|
|
42
|
+
}, () => {
|
|
43
|
+
return {
|
|
44
|
+
[prefixCls]: {
|
|
45
|
+
overflow: customTokens.overflow.overflowHidden,
|
|
46
|
+
borderRadius: customTokens.border.borderRadiusSm,
|
|
47
|
+
boxShadow: navCardToken.shadow,
|
|
48
|
+
background: 'white',
|
|
49
|
+
[`${prefixClsWithoutHash}-icon`]: {
|
|
50
|
+
padding: '1.5rem',
|
|
51
|
+
display: customTokens.layout.displayFlex,
|
|
52
|
+
justifyContent: customTokens.layout.flexCenter,
|
|
53
|
+
alignItems: customTokens.layout.flexCenter,
|
|
54
|
+
[`&${prefixClsWithoutHash}-icon-default`]: {
|
|
55
|
+
background: 'var(--color-gray-500)'
|
|
56
|
+
},
|
|
57
|
+
[`&${prefixClsWithoutHash}-icon-akinon`]: {
|
|
58
|
+
background: 'var(--color-akinon-500)'
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
[`${prefixClsWithoutHash}-content`]: {
|
|
62
|
+
padding: '1.5rem'
|
|
63
|
+
},
|
|
64
|
+
[`${prefixClsWithoutHash}-title`]: {
|
|
65
|
+
color: 'var(--color-blue-955)',
|
|
66
|
+
margin: 0
|
|
67
|
+
},
|
|
68
|
+
[`${prefixClsWithoutHash}-description`]: {
|
|
69
|
+
color: 'var(--color-blue-955)'
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
});
|
|
74
|
+
return (React.createElement(React.Fragment, null,
|
|
75
|
+
React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)(`${getPrefixCls()}-navcard`, className), "data-testid": "nav-card" },
|
|
76
|
+
React.createElement("div", { className: (0, clsx_1.default)(`${getPrefixCls()}-navcard-icon`, {
|
|
77
|
+
[`${getPrefixCls()}-navcard-icon-${variant}`]: variant
|
|
78
|
+
}), style: {
|
|
79
|
+
background
|
|
80
|
+
}, "data-testid": "icon-container" },
|
|
81
|
+
React.createElement(icons_1.Icon, { icon: icon, size: "28", color: iconColor, "data-testid": "icon" })),
|
|
82
|
+
React.createElement("div", { className: (0, clsx_1.default)(`${getPrefixCls()}-navcard-content`) },
|
|
83
|
+
React.createElement(ui_typography_1.Title, { level: 3, className: `${getPrefixCls()}-navcard-title` }, title),
|
|
84
|
+
React.createElement("div", { className: `${getPrefixCls()}-navcard-description` }, description)))));
|
|
38
85
|
};
|
|
39
86
|
exports.NavCard = NavCard;
|
|
@@ -1,12 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
| 'blue'
|
|
5
|
-
| 'orange'
|
|
6
|
-
| 'red'
|
|
7
|
-
| 'green'
|
|
8
|
-
| 'pink'
|
|
9
|
-
| 'purple';
|
|
1
|
+
import { IconName } from '@akinon/icons';
|
|
2
|
+
|
|
3
|
+
export type NavCardColorVariant = 'akinon' | 'default';
|
|
10
4
|
|
|
11
5
|
export interface NavCardProps {
|
|
12
6
|
/**
|
|
@@ -17,18 +11,28 @@ export interface NavCardProps {
|
|
|
17
11
|
/**
|
|
18
12
|
* The description of the NavCard.
|
|
19
13
|
*/
|
|
20
|
-
description:
|
|
14
|
+
description: React.ReactNode;
|
|
21
15
|
|
|
22
16
|
/**
|
|
23
17
|
* The icon of the NavCard.
|
|
24
18
|
*/
|
|
25
|
-
icon
|
|
19
|
+
icon: IconName;
|
|
26
20
|
|
|
27
21
|
/**
|
|
28
22
|
* The color variant of the NavCard.
|
|
29
23
|
*/
|
|
30
24
|
variant?: NavCardColorVariant;
|
|
31
25
|
|
|
26
|
+
/**
|
|
27
|
+
* Custom background for the NavCard.
|
|
28
|
+
*/
|
|
29
|
+
background?: React.CSSProperties['background'];
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Custom icon color for the NavCard.
|
|
33
|
+
*/
|
|
34
|
+
iconColor?: React.CSSProperties['color'];
|
|
35
|
+
|
|
32
36
|
/**
|
|
33
37
|
* The additional css class
|
|
34
38
|
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"navcard.test.d.ts","sourceRoot":"","sources":["../../../../src/NavCard/__tests__/navcard.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { render, screen } from '@akinon/utils';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { describe, expect, it } from 'vitest';
|
|
4
|
+
import { NavCard } from '..';
|
|
5
|
+
describe('NavCard', () => {
|
|
6
|
+
it('renders with required props', () => {
|
|
7
|
+
render(React.createElement(NavCard, { title: "Test Title", description: "Test Description", icon: "search" }));
|
|
8
|
+
expect(screen.getByText('Test Title')).toBeInTheDocument();
|
|
9
|
+
expect(screen.getByText('Test Description')).toBeInTheDocument();
|
|
10
|
+
});
|
|
11
|
+
it('renders with default variant', () => {
|
|
12
|
+
render(React.createElement(NavCard, { title: "Test Title", description: "Test Description", icon: "search", variant: "default" }));
|
|
13
|
+
const iconContainer = screen.getByTestId('icon-container');
|
|
14
|
+
expect(iconContainer).toHaveClass('akinon-navcard-icon-default');
|
|
15
|
+
});
|
|
16
|
+
it('renders with akinon variant', () => {
|
|
17
|
+
render(React.createElement(NavCard, { title: "Test Title", description: "Test Description", icon: "search", variant: "akinon" }));
|
|
18
|
+
const iconContainer = screen.getByTestId('icon-container');
|
|
19
|
+
expect(iconContainer).toHaveClass('akinon-navcard-icon-akinon');
|
|
20
|
+
});
|
|
21
|
+
it('applies custom background color', () => {
|
|
22
|
+
const customBackground = '#ff0000';
|
|
23
|
+
render(React.createElement(NavCard, { title: "Test Title", description: "Test Description", icon: "search", background: customBackground }));
|
|
24
|
+
const iconContainer = screen.getByTestId('icon-container');
|
|
25
|
+
expect(iconContainer).toHaveStyle({ background: customBackground });
|
|
26
|
+
});
|
|
27
|
+
it('applies custom icon color', () => {
|
|
28
|
+
render(React.createElement(NavCard, { title: "Test Title", description: "Test Description", icon: "search", iconColor: "red" }));
|
|
29
|
+
const icon = screen.getByTestId('icon');
|
|
30
|
+
expect(icon).toHaveStyle({ fill: 'red' });
|
|
31
|
+
});
|
|
32
|
+
it('applies custom className', () => {
|
|
33
|
+
const customClass = 'custom-nav-card';
|
|
34
|
+
render(React.createElement(NavCard, { title: "Test Title", description: "Test Description", icon: "search", className: customClass }));
|
|
35
|
+
const navCard = screen.getByTestId('nav-card');
|
|
36
|
+
expect(navCard).toHaveClass(customClass);
|
|
37
|
+
});
|
|
38
|
+
});
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { render, screen } from '@akinon/utils';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { describe, expect, it } from 'vitest';
|
|
4
|
+
|
|
5
|
+
import { NavCard } from '..';
|
|
6
|
+
|
|
7
|
+
describe('NavCard', () => {
|
|
8
|
+
it('renders with required props', () => {
|
|
9
|
+
render(
|
|
10
|
+
<NavCard
|
|
11
|
+
title="Test Title"
|
|
12
|
+
description="Test Description"
|
|
13
|
+
icon="search"
|
|
14
|
+
/>
|
|
15
|
+
);
|
|
16
|
+
|
|
17
|
+
expect(screen.getByText('Test Title')).toBeInTheDocument();
|
|
18
|
+
expect(screen.getByText('Test Description')).toBeInTheDocument();
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
it('renders with default variant', () => {
|
|
22
|
+
render(
|
|
23
|
+
<NavCard
|
|
24
|
+
title="Test Title"
|
|
25
|
+
description="Test Description"
|
|
26
|
+
icon="search"
|
|
27
|
+
variant="default"
|
|
28
|
+
/>
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
const iconContainer = screen.getByTestId('icon-container');
|
|
32
|
+
expect(iconContainer).toHaveClass('akinon-navcard-icon-default');
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
it('renders with akinon variant', () => {
|
|
36
|
+
render(
|
|
37
|
+
<NavCard
|
|
38
|
+
title="Test Title"
|
|
39
|
+
description="Test Description"
|
|
40
|
+
icon="search"
|
|
41
|
+
variant="akinon"
|
|
42
|
+
/>
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
const iconContainer = screen.getByTestId('icon-container');
|
|
46
|
+
expect(iconContainer).toHaveClass('akinon-navcard-icon-akinon');
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
it('applies custom background color', () => {
|
|
50
|
+
const customBackground = '#ff0000';
|
|
51
|
+
render(
|
|
52
|
+
<NavCard
|
|
53
|
+
title="Test Title"
|
|
54
|
+
description="Test Description"
|
|
55
|
+
icon="search"
|
|
56
|
+
background={customBackground}
|
|
57
|
+
/>
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
const iconContainer = screen.getByTestId('icon-container');
|
|
61
|
+
expect(iconContainer).toHaveStyle({ background: customBackground });
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
it('applies custom icon color', () => {
|
|
65
|
+
render(
|
|
66
|
+
<NavCard
|
|
67
|
+
title="Test Title"
|
|
68
|
+
description="Test Description"
|
|
69
|
+
icon="search"
|
|
70
|
+
iconColor="red"
|
|
71
|
+
/>
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
const icon = screen.getByTestId('icon');
|
|
75
|
+
expect(icon).toHaveStyle({ fill: 'red' });
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
it('applies custom className', () => {
|
|
79
|
+
const customClass = 'custom-nav-card';
|
|
80
|
+
render(
|
|
81
|
+
<NavCard
|
|
82
|
+
title="Test Title"
|
|
83
|
+
description="Test Description"
|
|
84
|
+
icon="search"
|
|
85
|
+
className={customClass}
|
|
86
|
+
/>
|
|
87
|
+
);
|
|
88
|
+
|
|
89
|
+
const navCard = screen.getByTestId('nav-card');
|
|
90
|
+
expect(navCard).toHaveClass(customClass);
|
|
91
|
+
});
|
|
92
|
+
});
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import './index.css';
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import type { NavCardProps } from './types';
|
|
4
|
-
export type
|
|
3
|
+
export type * from './types';
|
|
5
4
|
/**
|
|
6
5
|
* NavCard component for navigation or highlighting sections in the interface.
|
|
7
6
|
*
|
|
@@ -13,18 +12,12 @@ export type { NavCardProps } from './types';
|
|
|
13
12
|
* - **Description**: A short description to elaborate on the title or purpose of the card.
|
|
14
13
|
* - **Icon**: Optionally display an icon to visually represent the NavCard's content or functionality.
|
|
15
14
|
* - **Color Variants**: Offers a range of predefined color options for theming, including:
|
|
15
|
+
* - `default`
|
|
16
16
|
* - `akinon`
|
|
17
|
-
* - `azure`
|
|
18
|
-
* - `blue`
|
|
19
|
-
* - `orange`
|
|
20
|
-
* - `red`
|
|
21
|
-
* - `green`
|
|
22
|
-
* - `pink`
|
|
23
|
-
* - `purple`
|
|
24
17
|
* - **Custom Styling**: Allows additional customizations via the `className` prop.
|
|
25
18
|
*
|
|
26
19
|
* Ideal for use in dashboards, navigation menus, or any scenario where visually distinct
|
|
27
20
|
* and thematically consistent navigation elements are required.
|
|
28
21
|
*/
|
|
29
|
-
export declare const NavCard: ({ title, description, icon, variant, className }: NavCardProps) => React.JSX.Element;
|
|
22
|
+
export declare const NavCard: ({ title, description, icon, variant, className, background, iconColor }: NavCardProps) => React.JSX.Element;
|
|
30
23
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/NavCard/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/NavCard/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,mBAAmB,SAAS,CAAC;AAE7B;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,OAAO,4EAQjB,YAAY,sBAwFd,CAAC"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
import '
|
|
1
|
+
import { Icon } from '@akinon/icons';
|
|
2
|
+
import { useToken } from '@akinon/ui-theme';
|
|
3
|
+
import { Title } from '@akinon/ui-typography';
|
|
4
|
+
import { useStyleRegister } from '@ant-design/cssinjs';
|
|
5
|
+
import { ConfigProvider } from 'antd';
|
|
2
6
|
import clsx from 'clsx';
|
|
3
7
|
import * as React from 'react';
|
|
8
|
+
import { Flex } from '../Flex';
|
|
4
9
|
/**
|
|
5
10
|
* NavCard component for navigation or highlighting sections in the interface.
|
|
6
11
|
*
|
|
@@ -12,24 +17,66 @@ import * as React from 'react';
|
|
|
12
17
|
* - **Description**: A short description to elaborate on the title or purpose of the card.
|
|
13
18
|
* - **Icon**: Optionally display an icon to visually represent the NavCard's content or functionality.
|
|
14
19
|
* - **Color Variants**: Offers a range of predefined color options for theming, including:
|
|
20
|
+
* - `default`
|
|
15
21
|
* - `akinon`
|
|
16
|
-
* - `azure`
|
|
17
|
-
* - `blue`
|
|
18
|
-
* - `orange`
|
|
19
|
-
* - `red`
|
|
20
|
-
* - `green`
|
|
21
|
-
* - `pink`
|
|
22
|
-
* - `purple`
|
|
23
22
|
* - **Custom Styling**: Allows additional customizations via the `className` prop.
|
|
24
23
|
*
|
|
25
24
|
* Ideal for use in dashboards, navigation menus, or any scenario where visually distinct
|
|
26
25
|
* and thematically consistent navigation elements are required.
|
|
27
26
|
*/
|
|
28
|
-
export const NavCard = ({ title, description, icon, variant, className }) => {
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
export const NavCard = ({ title, description, icon, variant = 'default', className, background, iconColor = 'white' }) => {
|
|
28
|
+
const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
|
|
29
|
+
const { token, hashId } = useToken();
|
|
30
|
+
const navCardToken = theme.NavCardTokens;
|
|
31
|
+
const customTokens = theme.CustomTokens || {};
|
|
32
|
+
const prefixClsWithoutHash = `.${getPrefixCls()}-navcard`;
|
|
33
|
+
const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
|
|
34
|
+
useStyleRegister({
|
|
35
|
+
token: token,
|
|
36
|
+
path: ['NavCard'],
|
|
37
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
38
|
+
theme: theme
|
|
39
|
+
}, () => {
|
|
40
|
+
return {
|
|
41
|
+
[prefixCls]: {
|
|
42
|
+
overflow: customTokens.overflow.overflowHidden,
|
|
43
|
+
borderRadius: customTokens.border.borderRadiusSm,
|
|
44
|
+
boxShadow: navCardToken.shadow,
|
|
45
|
+
background: 'white',
|
|
46
|
+
[`${prefixClsWithoutHash}-icon`]: {
|
|
47
|
+
padding: '1.5rem',
|
|
48
|
+
display: customTokens.layout.displayFlex,
|
|
49
|
+
justifyContent: customTokens.layout.flexCenter,
|
|
50
|
+
alignItems: customTokens.layout.flexCenter,
|
|
51
|
+
[`&${prefixClsWithoutHash}-icon-default`]: {
|
|
52
|
+
background: 'var(--color-gray-500)'
|
|
53
|
+
},
|
|
54
|
+
[`&${prefixClsWithoutHash}-icon-akinon`]: {
|
|
55
|
+
background: 'var(--color-akinon-500)'
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
[`${prefixClsWithoutHash}-content`]: {
|
|
59
|
+
padding: '1.5rem'
|
|
60
|
+
},
|
|
61
|
+
[`${prefixClsWithoutHash}-title`]: {
|
|
62
|
+
color: 'var(--color-blue-955)',
|
|
63
|
+
margin: 0
|
|
64
|
+
},
|
|
65
|
+
[`${prefixClsWithoutHash}-description`]: {
|
|
66
|
+
color: 'var(--color-blue-955)'
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
});
|
|
71
|
+
return (React.createElement(React.Fragment, null,
|
|
72
|
+
React.createElement(Flex, { className: clsx(`${getPrefixCls()}-navcard`, className), "data-testid": "nav-card" },
|
|
73
|
+
React.createElement("div", { className: clsx(`${getPrefixCls()}-navcard-icon`, {
|
|
74
|
+
[`${getPrefixCls()}-navcard-icon-${variant}`]: variant
|
|
75
|
+
}), style: {
|
|
76
|
+
background
|
|
77
|
+
}, "data-testid": "icon-container" },
|
|
78
|
+
React.createElement(Icon, { icon: icon, size: "28", color: iconColor, "data-testid": "icon" })),
|
|
79
|
+
React.createElement("div", { className: clsx(`${getPrefixCls()}-navcard-content`) },
|
|
80
|
+
React.createElement(Title, { level: 3, className: `${getPrefixCls()}-navcard-title` }, title),
|
|
81
|
+
React.createElement("div", { className: `${getPrefixCls()}-navcard-description` }, description)))));
|
|
35
82
|
};
|
|
@@ -1,12 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
| 'blue'
|
|
5
|
-
| 'orange'
|
|
6
|
-
| 'red'
|
|
7
|
-
| 'green'
|
|
8
|
-
| 'pink'
|
|
9
|
-
| 'purple';
|
|
1
|
+
import { IconName } from '@akinon/icons';
|
|
2
|
+
|
|
3
|
+
export type NavCardColorVariant = 'akinon' | 'default';
|
|
10
4
|
|
|
11
5
|
export interface NavCardProps {
|
|
12
6
|
/**
|
|
@@ -17,18 +11,28 @@ export interface NavCardProps {
|
|
|
17
11
|
/**
|
|
18
12
|
* The description of the NavCard.
|
|
19
13
|
*/
|
|
20
|
-
description:
|
|
14
|
+
description: React.ReactNode;
|
|
21
15
|
|
|
22
16
|
/**
|
|
23
17
|
* The icon of the NavCard.
|
|
24
18
|
*/
|
|
25
|
-
icon
|
|
19
|
+
icon: IconName;
|
|
26
20
|
|
|
27
21
|
/**
|
|
28
22
|
* The color variant of the NavCard.
|
|
29
23
|
*/
|
|
30
24
|
variant?: NavCardColorVariant;
|
|
31
25
|
|
|
26
|
+
/**
|
|
27
|
+
* Custom background for the NavCard.
|
|
28
|
+
*/
|
|
29
|
+
background?: React.CSSProperties['background'];
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Custom icon color for the NavCard.
|
|
33
|
+
*/
|
|
34
|
+
iconColor?: React.CSSProperties['color'];
|
|
35
|
+
|
|
32
36
|
/**
|
|
33
37
|
* The additional css class
|
|
34
38
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/ui-layout",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -17,8 +17,11 @@
|
|
|
17
17
|
"copyfiles": "^2.4.1",
|
|
18
18
|
"rimraf": "^5.0.5",
|
|
19
19
|
"typescript": "*",
|
|
20
|
-
"@akinon/
|
|
21
|
-
"@akinon/ui-
|
|
20
|
+
"@akinon/icons": "1.0.1",
|
|
21
|
+
"@akinon/ui-typography": "1.0.1",
|
|
22
|
+
"@akinon/typescript-config": "1.0.1",
|
|
23
|
+
"@akinon/ui-theme": "1.0.1",
|
|
24
|
+
"@akinon/utils": "1.0.1"
|
|
22
25
|
},
|
|
23
26
|
"peerDependencies": {
|
|
24
27
|
"react": ">=18",
|