@nuskin/foundation-ui-components 1.0.2 → 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/package.json +101 -101
- package/src/common/accordion/stories/NsAccordion.stories.tsx +1 -1
- package/src/common/accordion/stories/NsAccordionHeader.stories.tsx +1 -1
- package/src/common/accordion/stories/NsAccordionItem.stories.tsx +1 -1
- package/src/common/accordion/stories/NsCollapse.stories.tsx +1 -1
- package/src/common/accordion/stories/NsToggleSection.stories.tsx +1 -1
- package/src/common/alert/NsAlert.stories.tsx +2 -2
- package/src/common/auth-dropdown/NsAuthDropdown.stories.tsx +1 -1
- package/src/common/auth-dropdown/NsAuthDropdown.styled.ts +4 -7
- package/src/common/autocomplete/NsAutocomplete.stories.tsx +1 -1
- package/src/common/banner/NsBanner.stories.tsx +1 -1
- package/src/common/brand-components/NsBrand.stories.tsx +1 -1
- package/src/common/breadcrumb/NsBreadcrumb.stories.tsx +1 -1
- package/src/common/button/NsButton.stories.tsx +22 -1
- package/src/common/button/types.d.ts +2 -0
- package/src/common/card/stories/NsBgCard.stories.tsx +1 -1
- package/src/common/card/stories/NsBrandProductCard.stories.tsx +1 -1
- package/src/common/card/stories/NsFfgCard.stories.tsx +1 -1
- package/src/common/carousal/stories/NSCarousal.stories.tsx +1 -1
- package/src/common/carousal/stories/NsScrollingCarousal.stories.tsx +1 -1
- package/src/common/cart-icon/NsCartIcon.stories.tsx +1 -1
- package/src/common/checkbox/NsCheckbox.stories.tsx +1 -1
- package/src/common/column-control/stories/DivArray.stories.tsx +1 -1
- package/src/common/column-control/stories/NsColumnControl.stories.tsx +1 -1
- package/src/common/column-control/stories/NsFlexColumns.stories.tsx +1 -1
- package/src/common/column-control/stories/NsGridColumns.stories.tsx +1 -1
- package/src/common/dropdown/stories/NsDropdown.stories.tsx +1 -1
- package/src/common/dropdown/stories/NsDropdownCountry.stories.tsx +1 -1
- package/src/common/flag/NsFlag.stories.tsx +1 -1
- package/src/common/icon/NsIcon.stories.tsx +1 -1
- package/src/common/image/NsImage.stories.tsx +1 -1
- package/src/common/image/NsNextImage.stories.tsx +1 -1
- package/src/common/label/NsLabel.stories.tsx +1 -1
- package/src/common/link/NsLink.stories.tsx +1 -1
- package/src/common/nav-product-card/NsNavProductCard.stories.tsx +1 -1
- package/src/common/nav-tab/NsNavTab.stories.tsx +1 -1
- package/src/common/radiogroup/NsRadioGroup.stories.tsx +1 -1
- package/src/common/select/stories/NsSelect.stories.tsx +1 -1
- package/src/common/table/NsTable.stories.tsx +1 -1
- package/src/common/text-strip/NsTextStrip.stories.tsx +1 -1
- package/src/common/typography/NsTypography.stories.tsx +1 -1
- package/src/common/videos/NsVideo.stories.tsx +1 -1
package/package.json
CHANGED
|
@@ -1,103 +1,103 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
2
|
+
"name": "@nuskin/foundation-ui-components",
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "It is a foundation library written in react, that provides common components to all UI pages",
|
|
5
|
+
"private": false,
|
|
6
|
+
"main": "src/common/index.ts",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git@code.tls.nuskin.io:ns-am/content-foundation/foundation-ui-components.git"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/blob/master/README.md",
|
|
12
|
+
"author": {
|
|
13
|
+
"name": "Josh Porter"
|
|
14
|
+
},
|
|
15
|
+
"publishConfig": {
|
|
16
|
+
"access": "public"
|
|
17
|
+
},
|
|
18
|
+
"keywords": [
|
|
19
|
+
"react",
|
|
20
|
+
"foundation-ui",
|
|
21
|
+
"foundation-ui-components"
|
|
22
|
+
],
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"scripts": {
|
|
25
|
+
"dev": "next dev",
|
|
26
|
+
"start": "next start",
|
|
27
|
+
"lint": "next lint",
|
|
28
|
+
"test": "next build && jest --coverage",
|
|
29
|
+
"test:watch": "jest --watch",
|
|
30
|
+
"storybook": "storybook dev -p 6007",
|
|
31
|
+
"sb": "yarn storybook",
|
|
32
|
+
"build-dev": "yarn build-storybook",
|
|
33
|
+
"build-prod": "yarn build-storybook --mode=production",
|
|
34
|
+
"build-test": "yarn build-storybook",
|
|
35
|
+
"build-storybook": "storybook build -o dist",
|
|
36
|
+
"export": "next export",
|
|
37
|
+
"prepare": "husky install",
|
|
38
|
+
"types:check": "tsc --pretty --noEmit"
|
|
39
|
+
},
|
|
40
|
+
"dependencies": {
|
|
41
|
+
"@emotion/react": "^11.10.6",
|
|
42
|
+
"@emotion/styled": "^11.10.6",
|
|
43
|
+
"@mui/icons-material": "^5.11.11",
|
|
44
|
+
"@mui/material": "5.4.2",
|
|
45
|
+
"@next/font": "13.2.4",
|
|
46
|
+
"@nuskin/foundation-theme": "1.0.0-develop.5",
|
|
47
|
+
"framer-motion": "^10.8.5",
|
|
48
|
+
"next": "13.2.4",
|
|
49
|
+
"react": "18.2.0",
|
|
50
|
+
"react-dom": "18.2.0",
|
|
51
|
+
"react-material-ui-carousel": "^3.4.2",
|
|
52
|
+
"react-slick": "^0.29.0",
|
|
53
|
+
"slick-carousel": "^1.8.1",
|
|
54
|
+
"typescript": "4.9.5"
|
|
55
|
+
},
|
|
56
|
+
"devDependencies": {
|
|
57
|
+
"@babel/core": "^7.21.0",
|
|
58
|
+
"@babel/preset-env": "^7.20.2",
|
|
59
|
+
"@babel/preset-react": "^7.18.6",
|
|
60
|
+
"@babel/preset-typescript": "^7.21.0",
|
|
61
|
+
"@emotion/jest": "^11.10.5",
|
|
62
|
+
"@nuskin/eslint-config": "^1.0.0-setup.1",
|
|
63
|
+
"@storybook/addon-actions": "^7.0.7",
|
|
64
|
+
"@storybook/addon-essentials": "^7.0.7",
|
|
65
|
+
"@storybook/addon-interactions": "^7.0.7",
|
|
66
|
+
"@storybook/addon-links": "^7.0.7",
|
|
67
|
+
"@storybook/addon-mdx-gfm": "^7.0.7",
|
|
68
|
+
"@storybook/jest": "^0.1.0",
|
|
69
|
+
"@storybook/nextjs": "^7.0.7",
|
|
70
|
+
"@storybook/react": "^7.0.7",
|
|
71
|
+
"@storybook/test-runner": "^0.10.0",
|
|
72
|
+
"@storybook/testing-library": "^0.1.0",
|
|
73
|
+
"@testing-library/jest-dom": "^5.16.5",
|
|
74
|
+
"@testing-library/react": "^14.0.0",
|
|
75
|
+
"@types/jest": "^29.5.0",
|
|
76
|
+
"@types/lodash": "^4.14.191",
|
|
77
|
+
"@types/node": "18.15.0",
|
|
78
|
+
"@types/ramda": "^0.29.3",
|
|
79
|
+
"@types/react": "18.0.28",
|
|
80
|
+
"@types/react-dom": "18.0.11",
|
|
81
|
+
"@types/react-slick": "^0.23.10",
|
|
82
|
+
"@types/react-test-renderer": "^18.0.0",
|
|
83
|
+
"@types/testing-library__jest-dom": "^5.14.5",
|
|
84
|
+
"babel-jest": "^29.5.0",
|
|
85
|
+
"babel-loader": "^9.1.2",
|
|
86
|
+
"babel-plugin-emotion": "^11.0.0",
|
|
87
|
+
"chromatic": "^6.17.3",
|
|
88
|
+
"eslint": "8.36.0",
|
|
89
|
+
"eslint-config-next": "13.2.4",
|
|
90
|
+
"eslint-config-prettier": "^8.7.0",
|
|
91
|
+
"eslint-plugin-json": "^3.1.0",
|
|
92
|
+
"eslint-plugin-prettier": "^4.2.1",
|
|
93
|
+
"eslint-plugin-storybook": "^0.6.11",
|
|
94
|
+
"husky": "^8.0.0",
|
|
95
|
+
"jest": "^29.5.0",
|
|
96
|
+
"jest-environment-jsdom": "^29.5.0",
|
|
97
|
+
"storybook": "^7.0.7"
|
|
98
|
+
},
|
|
99
|
+
"files": [
|
|
100
|
+
"src/common"
|
|
101
|
+
],
|
|
102
|
+
"readme": "./README.md"
|
|
103
103
|
}
|
|
@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
9
9
|
type MetaStory = Meta<ComponentType>;
|
|
10
10
|
|
|
11
11
|
export default {
|
|
12
|
-
title: 'Components/Accordion
|
|
12
|
+
title: 'Components/Containers/Accordion',
|
|
13
13
|
component: NsAccordion,
|
|
14
14
|
decorators: [withCenterDecorator],
|
|
15
15
|
argTypes: {
|
|
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
7
7
|
type MetaStory = Meta<ComponentType>;
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
|
-
title: 'Components/Accordion/NsAccordionHeader',
|
|
10
|
+
title: 'Components/Containers/Accordion/NsAccordionHeader',
|
|
11
11
|
component: NsAccordionHeader,
|
|
12
12
|
decorators: [withCenterDecorator],
|
|
13
13
|
argTypes: {
|
|
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
7
7
|
type MetaStory = Meta<ComponentType>;
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
|
-
title: 'Components/Accordion/NsAccordionItem',
|
|
10
|
+
title: 'Components/Containers/Accordion/NsAccordionItem',
|
|
11
11
|
component: NsAccordionItem,
|
|
12
12
|
decorators: [withCenterDecorator],
|
|
13
13
|
argTypes: {
|
|
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
7
7
|
type MetaStory = Meta<ComponentType>;
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
|
-
title: 'Components/Accordion/NsCollapse',
|
|
10
|
+
title: 'Components/Containers/Accordion/NsCollapse',
|
|
11
11
|
component: NsCollapse,
|
|
12
12
|
decorators: [withCenterDecorator],
|
|
13
13
|
argTypes: {
|
|
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
7
7
|
type MetaStory = Meta<ComponentType>;
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
|
-
title: 'Components/Accordion/NsToggleSection',
|
|
10
|
+
title: 'Components/Containers/Accordion/NsToggleSection',
|
|
11
11
|
component: NsToggleSection,
|
|
12
12
|
decorators: [withCenterDecorator],
|
|
13
13
|
argTypes: {
|
|
@@ -8,7 +8,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
8
8
|
type MetaStory = Meta<ComponentType>;
|
|
9
9
|
|
|
10
10
|
export default {
|
|
11
|
-
title: 'Components/NsAlert',
|
|
11
|
+
title: 'Components/Feedback/NsAlert',
|
|
12
12
|
component: NsAlert,
|
|
13
13
|
decorators: [withCenterDecorator],
|
|
14
14
|
argTypes: {
|
|
@@ -40,4 +40,4 @@ export default {
|
|
|
40
40
|
},
|
|
41
41
|
} as MetaStory;
|
|
42
42
|
|
|
43
|
-
export const
|
|
43
|
+
export const Alert: Story = {};
|
|
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
7
7
|
type MetaStory = Meta<ComponentType>;
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
|
-
title: 'Components/NsAuthDropdown',
|
|
10
|
+
title: 'Components/Data Display/NsAuthDropdown',
|
|
11
11
|
component: NsAuthDropdown,
|
|
12
12
|
decorators: [withCenterDecorator],
|
|
13
13
|
argTypes: {},
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { styled, ColorUtils } from '@nuskin/foundation-theme';
|
|
2
2
|
|
|
3
|
-
//[TODO-Arun] - Use from custom color variables
|
|
4
|
-
const MAGENTA_COLOR = '#bb29bb';
|
|
5
|
-
|
|
6
3
|
const { color, paletteColor } = ColorUtils;
|
|
7
4
|
|
|
8
5
|
export const AuthDropdownContainer = styled.div`
|
|
@@ -69,7 +66,7 @@ export const SignInButton = styled(Link)`
|
|
|
69
66
|
display: block;
|
|
70
67
|
padding: 13px;
|
|
71
68
|
width: 100%;
|
|
72
|
-
background-color: ${
|
|
69
|
+
background-color: ${color('primary', 'black')};
|
|
73
70
|
color: ${color('primary', 'white')};
|
|
74
71
|
border: 0;
|
|
75
72
|
font-size: 16px;
|
|
@@ -80,7 +77,7 @@ export const SignInButton = styled(Link)`
|
|
|
80
77
|
|
|
81
78
|
export const SignUpLinkContainer = styled.div`
|
|
82
79
|
margin-top: 15px;
|
|
83
|
-
color: ${color('primary', '
|
|
80
|
+
color: ${color('primary', 'black')};
|
|
84
81
|
font-size: 13px;
|
|
85
82
|
line-height: 16px;
|
|
86
83
|
text-align: left;
|
|
@@ -92,7 +89,7 @@ export const SignUpLink = styled(Link)`
|
|
|
92
89
|
font-size: 13px;
|
|
93
90
|
line-height: 16px;
|
|
94
91
|
text-decoration: none;
|
|
95
|
-
color: ${
|
|
92
|
+
color: ${color('primary', 'black')};
|
|
96
93
|
position: relative;
|
|
97
94
|
transition: all 0.15s ease-in-out;
|
|
98
95
|
&:hover {
|
|
@@ -111,7 +108,7 @@ export const SignUpLink = styled(Link)`
|
|
|
111
108
|
right: 0;
|
|
112
109
|
width: 100%;
|
|
113
110
|
height: 1px;
|
|
114
|
-
background-color: ${
|
|
111
|
+
background-color: ${color('primary', 'black')};
|
|
115
112
|
transition: all 0.15s ease-in-out;
|
|
116
113
|
opacity: 0;
|
|
117
114
|
visibility: hidden;
|
|
@@ -20,7 +20,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
20
20
|
type MetaStory = Meta<ComponentType>;
|
|
21
21
|
|
|
22
22
|
export default {
|
|
23
|
-
title: 'Components/NsAutocomplete',
|
|
23
|
+
title: 'Components/Inputs/NsAutocomplete',
|
|
24
24
|
component: NsAutocomplete,
|
|
25
25
|
decorators: [withCenterDecorator],
|
|
26
26
|
argTypes: {
|
|
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
7
7
|
type MetaStory = Meta<ComponentType>;
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
|
-
title: 'Components/NsBrandComponent',
|
|
10
|
+
title: 'Components/Data Display/NsBrandComponent',
|
|
11
11
|
component: NsBrandComponent,
|
|
12
12
|
decorators: [withCenterDecorator],
|
|
13
13
|
argTypes: {
|
|
@@ -13,7 +13,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
13
13
|
type MetaStory = Meta<ComponentType>;
|
|
14
14
|
|
|
15
15
|
export default {
|
|
16
|
-
title: 'Components/NsBreadcrumb',
|
|
16
|
+
title: 'Components/Navigation/NsBreadcrumb',
|
|
17
17
|
component: NsBreadcrumb,
|
|
18
18
|
decorators: [withCenterDecorator],
|
|
19
19
|
argTypes: {
|
|
@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
9
9
|
type MetaStory = Meta<ComponentType>;
|
|
10
10
|
|
|
11
11
|
export default {
|
|
12
|
-
title: 'Components/NsButton',
|
|
12
|
+
title: 'Components/Inputs/NsButton',
|
|
13
13
|
component: NsButton,
|
|
14
14
|
decorators: [withCenterDecorator],
|
|
15
15
|
argTypes: {
|
|
@@ -21,6 +21,7 @@ export default {
|
|
|
21
21
|
color: { name: 'Color Variants' },
|
|
22
22
|
disabled: { control: 'boolean' },
|
|
23
23
|
fullWidth: { control: 'boolean' },
|
|
24
|
+
|
|
24
25
|
iconOnly: { control: 'hide' },
|
|
25
26
|
},
|
|
26
27
|
args: {
|
|
@@ -30,6 +31,8 @@ export default {
|
|
|
30
31
|
disabled: false,
|
|
31
32
|
variant: 'contained',
|
|
32
33
|
fullWidth: false,
|
|
34
|
+
startIcon: '',
|
|
35
|
+
endIcon: '',
|
|
33
36
|
},
|
|
34
37
|
} as MetaStory;
|
|
35
38
|
|
|
@@ -53,3 +56,21 @@ export const IconOnlyButton: Story = {
|
|
|
53
56
|
iconOnly: { control: 'hide' },
|
|
54
57
|
},
|
|
55
58
|
};
|
|
59
|
+
export const ButtonWithIcon: Story = {
|
|
60
|
+
render: (args) => (
|
|
61
|
+
<NsButton {...args} darkModeEnabled={false} startIcon={<ShoppingCart />}>
|
|
62
|
+
|
|
63
|
+
Add to Cart
|
|
64
|
+
</NsButton>
|
|
65
|
+
),
|
|
66
|
+
argTypes: {
|
|
67
|
+
children: {
|
|
68
|
+
control: 'hide',
|
|
69
|
+
},
|
|
70
|
+
color: { name: 'Color Variants' },
|
|
71
|
+
disabled: { control: 'boolean' },
|
|
72
|
+
fullWidth: { control: 'boolean' },
|
|
73
|
+
iconOnly: { control: 'hide' },
|
|
74
|
+
},
|
|
75
|
+
};
|
|
76
|
+
|
|
@@ -8,7 +8,7 @@ type MetaStory = Meta<ComponentType>;
|
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
10
|
component: NsBrandProductCard,
|
|
11
|
-
title: 'Components/
|
|
11
|
+
title: 'Components/Containers/Card/NsBrandProductCard',
|
|
12
12
|
argTypes: {},
|
|
13
13
|
decorators: [withCenterDecorator],
|
|
14
14
|
} as MetaStory;
|
|
@@ -34,7 +34,7 @@ export const slides = [
|
|
|
34
34
|
},
|
|
35
35
|
];
|
|
36
36
|
export default {
|
|
37
|
-
title: 'Components/NsCarousal/NsScrollingCarousal',
|
|
37
|
+
title: 'Components/Containers/NsCarousal/NsScrollingCarousal',
|
|
38
38
|
component: NsScrollingCarousal,
|
|
39
39
|
decorators: [withCenterDecorator],
|
|
40
40
|
argTypes: {},
|
|
@@ -13,7 +13,7 @@ type MetaStory = Meta<ComponentType>;
|
|
|
13
13
|
const labelText = 'Checkbox Label';
|
|
14
14
|
// In this case, we're only passing the label prop.
|
|
15
15
|
export default {
|
|
16
|
-
title: 'Components/NsCheckbox',
|
|
16
|
+
title: 'Components/Inputs/NsCheckbox',
|
|
17
17
|
component: NsCheckbox,
|
|
18
18
|
decorators: [withCenterDecorator],
|
|
19
19
|
argTypes: {
|
|
@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
9
9
|
type MetaStory = Meta<ComponentType>;
|
|
10
10
|
|
|
11
11
|
export default {
|
|
12
|
-
title: 'Components/Column/NsColumnControl',
|
|
12
|
+
title: 'Components/Data Display/Column/NsColumnControl',
|
|
13
13
|
component: NsColumnControl,
|
|
14
14
|
decorators: [withCenterDecorator],
|
|
15
15
|
argTypes: {
|
|
@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
9
9
|
type MetaStory = Meta<ComponentType>;
|
|
10
10
|
|
|
11
11
|
export default {
|
|
12
|
-
title: 'Components/Column/NsFlexColumns',
|
|
12
|
+
title: 'Components/Data Display/Column/NsFlexColumns',
|
|
13
13
|
component: NsFlexColumns,
|
|
14
14
|
decorators: [withCenterDecorator],
|
|
15
15
|
argTypes: {
|
|
@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
9
9
|
type MetaStory = Meta<ComponentType>;
|
|
10
10
|
|
|
11
11
|
export default {
|
|
12
|
-
title: 'Components/Column/NsGridColumns',
|
|
12
|
+
title: 'Components/Data Display/Column/NsGridColumns',
|
|
13
13
|
component: NsGridColumns,
|
|
14
14
|
decorators: [withCenterDecorator],
|
|
15
15
|
argTypes: {
|
|
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
7
7
|
type MetaStory = Meta<ComponentType>;
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
|
-
title: 'Components/NsNextImage',
|
|
10
|
+
title: 'Components/Data Display/NsNextImage',
|
|
11
11
|
component: NsNextImage,
|
|
12
12
|
decorators: [withCenterDecorator],
|
|
13
13
|
} as MetaStory;
|
|
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
7
7
|
type MetaStory = Meta<ComponentType>;
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
|
-
title: 'Components/NsNavProductCard',
|
|
10
|
+
title: 'Components/Navigation/NsNavProductCard',
|
|
11
11
|
component: NsNavProductCard,
|
|
12
12
|
decorators: [withCenterDecorator],
|
|
13
13
|
args: {
|
|
@@ -4,7 +4,7 @@ import NsSelect from '../NsSelect';
|
|
|
4
4
|
import NsSelectOption from '../NsSelectOption';
|
|
5
5
|
|
|
6
6
|
export default {
|
|
7
|
-
title: 'Components/NsSelect',
|
|
7
|
+
title: 'Components/Inputs/NsSelect',
|
|
8
8
|
decorators: [
|
|
9
9
|
(story) => <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{story()}</div>,
|
|
10
10
|
],
|
|
@@ -12,7 +12,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
12
12
|
type MetaStory = Meta<ComponentType>;
|
|
13
13
|
|
|
14
14
|
export default {
|
|
15
|
-
title: 'Components/NsTextStrip',
|
|
15
|
+
title: 'Components/Data Display/NsTextStrip',
|
|
16
16
|
component: NsTextStrip,
|
|
17
17
|
decorators: [withCenterDecorator],
|
|
18
18
|
argTypes: {
|
|
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
|
|
|
7
7
|
type MetaStory = Meta<ComponentType>;
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
|
-
title: 'Components/NsTypography',
|
|
10
|
+
title: 'Components/Data Display/NsTypography',
|
|
11
11
|
component: NsTypography,
|
|
12
12
|
decorators: [withCenterDecorator],
|
|
13
13
|
argTypes: {
|