@nuskin/foundation-ui-components 1.0.0-develop.6 → 1.0.0-develop.7
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 +17 -12
- package/src/common/accordion/NsAccordion.tsx +29 -39
- package/src/common/accordion/NsAccordionHeader.tsx +32 -17
- package/src/common/accordion/NsAccordionItem.tsx +16 -4
- package/src/common/accordion/NsCollapse.tsx +73 -35
- package/src/common/accordion/NsToggleSection.tsx +14 -3
- package/src/common/accordion/ToggleSection.styled.tsx +8 -7
- package/src/common/accordion/colorMap.ts +117 -0
- package/src/common/accordion/enums.ts +15 -0
- package/src/common/accordion/index.ts +1 -0
- package/src/common/accordion/specs/NsAccordion.spec.tsx +100 -31
- package/src/common/accordion/specs/NsAccordionHeader.spec.tsx +77 -10
- package/src/common/accordion/specs/NsAccordionItem.spec.tsx +23 -10
- package/src/common/accordion/specs/NsCollapse.spec.tsx +106 -17
- package/src/common/accordion/specs/NsToggleSection.spec.tsx +46 -14
- package/src/common/accordion/stories/NsAccordion.stories.tsx +27 -14
- package/src/common/accordion/stories/NsAccordionHeader.stories.tsx +4 -1
- package/src/common/accordion/stories/NsAccordionItem.stories.tsx +3 -3
- package/src/common/accordion/stories/NsCollapse.stories.tsx +3 -3
- package/src/common/accordion/stories/NsToggleSection.stories.tsx +2 -3
- package/src/common/accordion/stories/data.tsx +157 -19
- package/src/common/accordion/types.d.ts +56 -49
- package/src/common/alert/Header.tsx +29 -0
- package/src/common/alert/NsAlert.spec.tsx +46 -13
- package/src/common/alert/NsAlert.stories.tsx +3 -3
- package/src/common/alert/{NsAlert.styled.ts → NsAlert.styled.tsx} +22 -22
- package/src/common/alert/NsAlert.tsx +22 -87
- package/src/common/alert/types.d.ts +7 -7
- package/src/common/auth-dropdown/NsAuthDropdown.spec.tsx +23 -5
- package/src/common/auth-dropdown/NsAuthDropdown.stories.tsx +1 -1
- package/src/common/auth-dropdown/NsAuthDropdown.styled.ts +11 -7
- package/src/common/auth-dropdown/NsAuthDropdown.tsx +4 -4
- package/src/common/autocomplete/NsAutocomplete.spec.tsx +29 -6
- package/src/common/autocomplete/NsAutocomplete.stories.tsx +1 -1
- package/src/common/autocomplete/NsAutocomplete.tsx +18 -8
- package/src/common/autocomplete/mock/MockUI.tsx +1 -0
- package/src/common/banner/NsBanner.spec.tsx +12 -3
- package/src/common/banner/NsBanner.stories.tsx +1 -1
- package/src/common/brand-components/NsBrand.stories.tsx +1 -1
- package/src/common/brand-components/NsBrandComponent.tsx +2 -2
- package/src/common/breadcrumb/NsBreadcrumb.spec.tsx +8 -3
- package/src/common/breadcrumb/NsBreadcrumb.stories.tsx +1 -1
- package/src/common/breadcrumb/data.ts +8 -5
- package/src/common/button/NsButton.spec.tsx +65 -49
- package/src/common/button/NsButton.stories.tsx +59 -2
- package/src/common/button/NsButton.styled.tsx +49 -66
- package/src/common/button/NsButton.tsx +1 -2
- package/src/common/button/helper.ts +82 -0
- 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 +5 -2
- package/src/common/card/styled/NsFfgStyled.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/checkbox/NsCheckbox.styled.tsx +15 -16
- package/src/common/checkbox/NsCheckbox.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/column-control/styled/common.ts +1 -1
- package/src/common/column-control/utils.ts +4 -4
- package/src/common/common.types.d.ts +11 -1
- package/src/common/dropdown/NsDropdown.styled.tsx +23 -18
- 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/hooks/index.ts +2 -0
- package/src/common/hooks/specs/useWindowSize.spec.tsx +19 -0
- package/src/common/hooks/useAccordionMap.tsx +39 -0
- package/src/common/hooks/useWindowSize.tsx +30 -0
- package/src/common/icon/NsIcon.stories.tsx +1 -1
- package/src/common/icon/NsIconVariants.ts +1 -0
- package/src/common/image/NsImage.spec.tsx +56 -6
- package/src/common/image/NsImage.stories.tsx +1 -1
- package/src/common/image/NsImage.tsx +23 -11
- package/src/common/image/NsNextImage.stories.tsx +1 -1
- package/src/common/index.ts +2 -0
- package/src/common/input/InputWrapper.tsx +12 -7
- package/src/common/input/NsInputField.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.spec.tsx +24 -25
- package/src/common/radiogroup/NsRadioGroup.stories.tsx +14 -32
- package/src/common/radiogroup/NsRadioGroup.styled.tsx +17 -15
- package/src/common/radiogroup/NsRadioGroup.tsx +6 -5
- package/src/common/search-bar/NsSearchBar.tsx +1 -3
- package/src/common/select/NsSelect.spec.tsx +10 -17
- package/src/common/select/NsSelect.styled.tsx +53 -34
- package/src/common/select/stories/NsSelect.stories.tsx +11 -11
- package/src/common/select/types.d.ts +3 -3
- package/src/common/spinner/NsSpinner.spec.tsx +21 -0
- package/src/common/spinner/NsSpinner.stories.tsx +26 -0
- package/src/common/spinner/NsSpinner.styled.tsx +344 -0
- package/src/common/spinner/NsSpinner.tsx +14 -0
- package/src/common/spinner/icons/Spinner.tsx +161 -0
- package/src/common/spinner/index.ts +2 -0
- package/src/common/spinner/types.ts +5 -0
- package/src/common/table/NsTable.stories.tsx +1 -1
- package/src/common/table/NsTable.tsx +32 -49
- package/src/common/table/NsTableHeader.tsx +30 -51
- package/src/common/text-strip/NsTextStrip.stories.tsx +1 -1
- package/src/common/typography/NsTypography.stories.tsx +1 -1
- package/src/common/util.ts +1 -0
- package/src/common/videos/NsVideo.stories.tsx +1 -1
- package/src/common/videos/types.d.ts +1 -1
- /package/src/common/brand-components/{NsBrandContanier.styled.tsx → NsBrandContainer.styled.tsx} +0 -0
|
@@ -1,61 +1,40 @@
|
|
|
1
|
-
import type { NsTableHeaderProps,
|
|
2
|
-
import React from 'react'
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
TableRow,
|
|
6
|
-
Box,
|
|
7
|
-
TableCell
|
|
8
|
-
} from '@mui/material';
|
|
9
|
-
import {
|
|
10
|
-
StyledTableSortLabel,
|
|
11
|
-
StyledTableLabel
|
|
12
|
-
} from './NsTable.styled'
|
|
1
|
+
import type { NsTableHeaderProps, Item } from './types';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { TableHead, TableRow, Box, TableCell } from '@mui/material';
|
|
4
|
+
import { StyledTableSortLabel, StyledTableLabel } from './NsTable.styled';
|
|
13
5
|
import { visuallyHidden } from '@mui/utils';
|
|
14
6
|
|
|
15
7
|
export default function NsTableHeader(props: NsTableHeaderProps) {
|
|
16
|
-
const {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
} = props;
|
|
22
|
-
const createSortHandler =
|
|
23
|
-
(property: keyof Item) => (event: React.MouseEvent<unknown>) => { onRequestSort(event, property);};
|
|
24
|
-
|
|
8
|
+
const { order, orderBy, headCells, onRequestSort } = props;
|
|
9
|
+
const createSortHandler = (property: keyof Item) => (event: React.MouseEvent<unknown>) => {
|
|
10
|
+
onRequestSort(event, property);
|
|
11
|
+
};
|
|
12
|
+
|
|
25
13
|
return (
|
|
26
14
|
<TableHead>
|
|
27
15
|
<TableRow>
|
|
28
|
-
{
|
|
29
|
-
|
|
30
|
-
headCell.
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
16
|
+
{headCells.map((headCell) =>
|
|
17
|
+
headCell.sortable ? (
|
|
18
|
+
<TableCell key={headCell.id} sortDirection={orderBy === headCell.id ? order : false}>
|
|
19
|
+
<StyledTableSortLabel
|
|
20
|
+
active={orderBy === headCell.id}
|
|
21
|
+
direction={orderBy === headCell.id ? order : 'asc'}
|
|
22
|
+
onClick={createSortHandler(headCell.id)}
|
|
34
23
|
>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<TableCell
|
|
50
|
-
key={headCell.id}
|
|
51
|
-
sortDirection={false}
|
|
52
|
-
>
|
|
53
|
-
<StyledTableLabel>
|
|
54
|
-
{headCell.label}
|
|
55
|
-
</StyledTableLabel>
|
|
56
|
-
</TableCell>
|
|
57
|
-
)
|
|
58
|
-
))}
|
|
24
|
+
{headCell.label}
|
|
25
|
+
{orderBy === headCell.id ? (
|
|
26
|
+
<Box component="span" sx={visuallyHidden}>
|
|
27
|
+
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
|
|
28
|
+
</Box>
|
|
29
|
+
) : null}
|
|
30
|
+
</StyledTableSortLabel>
|
|
31
|
+
</TableCell>
|
|
32
|
+
) : (
|
|
33
|
+
<TableCell key={headCell.id} sortDirection={false}>
|
|
34
|
+
<StyledTableLabel>{headCell.label}</StyledTableLabel>
|
|
35
|
+
</TableCell>
|
|
36
|
+
)
|
|
37
|
+
)}
|
|
59
38
|
</TableRow>
|
|
60
39
|
</TableHead>
|
|
61
40
|
);
|
|
@@ -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: {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const skipDarkModeEnabled = (key: string) => key !== 'darkModeEnabled';
|
/package/src/common/brand-components/{NsBrandContanier.styled.tsx → NsBrandContainer.styled.tsx}
RENAMED
|
File without changes
|