@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.
Files changed (112) hide show
  1. package/package.json +17 -12
  2. package/src/common/accordion/NsAccordion.tsx +29 -39
  3. package/src/common/accordion/NsAccordionHeader.tsx +32 -17
  4. package/src/common/accordion/NsAccordionItem.tsx +16 -4
  5. package/src/common/accordion/NsCollapse.tsx +73 -35
  6. package/src/common/accordion/NsToggleSection.tsx +14 -3
  7. package/src/common/accordion/ToggleSection.styled.tsx +8 -7
  8. package/src/common/accordion/colorMap.ts +117 -0
  9. package/src/common/accordion/enums.ts +15 -0
  10. package/src/common/accordion/index.ts +1 -0
  11. package/src/common/accordion/specs/NsAccordion.spec.tsx +100 -31
  12. package/src/common/accordion/specs/NsAccordionHeader.spec.tsx +77 -10
  13. package/src/common/accordion/specs/NsAccordionItem.spec.tsx +23 -10
  14. package/src/common/accordion/specs/NsCollapse.spec.tsx +106 -17
  15. package/src/common/accordion/specs/NsToggleSection.spec.tsx +46 -14
  16. package/src/common/accordion/stories/NsAccordion.stories.tsx +27 -14
  17. package/src/common/accordion/stories/NsAccordionHeader.stories.tsx +4 -1
  18. package/src/common/accordion/stories/NsAccordionItem.stories.tsx +3 -3
  19. package/src/common/accordion/stories/NsCollapse.stories.tsx +3 -3
  20. package/src/common/accordion/stories/NsToggleSection.stories.tsx +2 -3
  21. package/src/common/accordion/stories/data.tsx +157 -19
  22. package/src/common/accordion/types.d.ts +56 -49
  23. package/src/common/alert/Header.tsx +29 -0
  24. package/src/common/alert/NsAlert.spec.tsx +46 -13
  25. package/src/common/alert/NsAlert.stories.tsx +3 -3
  26. package/src/common/alert/{NsAlert.styled.ts → NsAlert.styled.tsx} +22 -22
  27. package/src/common/alert/NsAlert.tsx +22 -87
  28. package/src/common/alert/types.d.ts +7 -7
  29. package/src/common/auth-dropdown/NsAuthDropdown.spec.tsx +23 -5
  30. package/src/common/auth-dropdown/NsAuthDropdown.stories.tsx +1 -1
  31. package/src/common/auth-dropdown/NsAuthDropdown.styled.ts +11 -7
  32. package/src/common/auth-dropdown/NsAuthDropdown.tsx +4 -4
  33. package/src/common/autocomplete/NsAutocomplete.spec.tsx +29 -6
  34. package/src/common/autocomplete/NsAutocomplete.stories.tsx +1 -1
  35. package/src/common/autocomplete/NsAutocomplete.tsx +18 -8
  36. package/src/common/autocomplete/mock/MockUI.tsx +1 -0
  37. package/src/common/banner/NsBanner.spec.tsx +12 -3
  38. package/src/common/banner/NsBanner.stories.tsx +1 -1
  39. package/src/common/brand-components/NsBrand.stories.tsx +1 -1
  40. package/src/common/brand-components/NsBrandComponent.tsx +2 -2
  41. package/src/common/breadcrumb/NsBreadcrumb.spec.tsx +8 -3
  42. package/src/common/breadcrumb/NsBreadcrumb.stories.tsx +1 -1
  43. package/src/common/breadcrumb/data.ts +8 -5
  44. package/src/common/button/NsButton.spec.tsx +65 -49
  45. package/src/common/button/NsButton.stories.tsx +59 -2
  46. package/src/common/button/NsButton.styled.tsx +49 -66
  47. package/src/common/button/NsButton.tsx +1 -2
  48. package/src/common/button/helper.ts +82 -0
  49. package/src/common/button/types.d.ts +2 -0
  50. package/src/common/card/stories/NsBgCard.stories.tsx +1 -1
  51. package/src/common/card/stories/NsBrandProductCard.stories.tsx +1 -1
  52. package/src/common/card/stories/NsFfgCard.stories.tsx +5 -2
  53. package/src/common/card/styled/NsFfgStyled.tsx +1 -1
  54. package/src/common/carousal/stories/NSCarousal.stories.tsx +1 -1
  55. package/src/common/carousal/stories/NsScrollingCarousal.stories.tsx +1 -1
  56. package/src/common/cart-icon/NsCartIcon.stories.tsx +1 -1
  57. package/src/common/checkbox/NsCheckbox.stories.tsx +1 -1
  58. package/src/common/checkbox/NsCheckbox.styled.tsx +15 -16
  59. package/src/common/checkbox/NsCheckbox.tsx +1 -1
  60. package/src/common/column-control/stories/DivArray.stories.tsx +1 -1
  61. package/src/common/column-control/stories/NsColumnControl.stories.tsx +1 -1
  62. package/src/common/column-control/stories/NsFlexColumns.stories.tsx +1 -1
  63. package/src/common/column-control/stories/NsGridColumns.stories.tsx +1 -1
  64. package/src/common/column-control/styled/common.ts +1 -1
  65. package/src/common/column-control/utils.ts +4 -4
  66. package/src/common/common.types.d.ts +11 -1
  67. package/src/common/dropdown/NsDropdown.styled.tsx +23 -18
  68. package/src/common/dropdown/stories/NsDropdown.stories.tsx +1 -1
  69. package/src/common/dropdown/stories/NsDropdownCountry.stories.tsx +1 -1
  70. package/src/common/flag/NsFlag.stories.tsx +1 -1
  71. package/src/common/hooks/index.ts +2 -0
  72. package/src/common/hooks/specs/useWindowSize.spec.tsx +19 -0
  73. package/src/common/hooks/useAccordionMap.tsx +39 -0
  74. package/src/common/hooks/useWindowSize.tsx +30 -0
  75. package/src/common/icon/NsIcon.stories.tsx +1 -1
  76. package/src/common/icon/NsIconVariants.ts +1 -0
  77. package/src/common/image/NsImage.spec.tsx +56 -6
  78. package/src/common/image/NsImage.stories.tsx +1 -1
  79. package/src/common/image/NsImage.tsx +23 -11
  80. package/src/common/image/NsNextImage.stories.tsx +1 -1
  81. package/src/common/index.ts +2 -0
  82. package/src/common/input/InputWrapper.tsx +12 -7
  83. package/src/common/input/NsInputField.tsx +1 -1
  84. package/src/common/label/NsLabel.stories.tsx +1 -1
  85. package/src/common/link/NsLink.stories.tsx +1 -1
  86. package/src/common/nav-product-card/NsNavProductCard.stories.tsx +1 -1
  87. package/src/common/nav-tab/NsNavTab.stories.tsx +1 -1
  88. package/src/common/radiogroup/NsRadioGroup.spec.tsx +24 -25
  89. package/src/common/radiogroup/NsRadioGroup.stories.tsx +14 -32
  90. package/src/common/radiogroup/NsRadioGroup.styled.tsx +17 -15
  91. package/src/common/radiogroup/NsRadioGroup.tsx +6 -5
  92. package/src/common/search-bar/NsSearchBar.tsx +1 -3
  93. package/src/common/select/NsSelect.spec.tsx +10 -17
  94. package/src/common/select/NsSelect.styled.tsx +53 -34
  95. package/src/common/select/stories/NsSelect.stories.tsx +11 -11
  96. package/src/common/select/types.d.ts +3 -3
  97. package/src/common/spinner/NsSpinner.spec.tsx +21 -0
  98. package/src/common/spinner/NsSpinner.stories.tsx +26 -0
  99. package/src/common/spinner/NsSpinner.styled.tsx +344 -0
  100. package/src/common/spinner/NsSpinner.tsx +14 -0
  101. package/src/common/spinner/icons/Spinner.tsx +161 -0
  102. package/src/common/spinner/index.ts +2 -0
  103. package/src/common/spinner/types.ts +5 -0
  104. package/src/common/table/NsTable.stories.tsx +1 -1
  105. package/src/common/table/NsTable.tsx +32 -49
  106. package/src/common/table/NsTableHeader.tsx +30 -51
  107. package/src/common/text-strip/NsTextStrip.stories.tsx +1 -1
  108. package/src/common/typography/NsTypography.stories.tsx +1 -1
  109. package/src/common/util.ts +1 -0
  110. package/src/common/videos/NsVideo.stories.tsx +1 -1
  111. package/src/common/videos/types.d.ts +1 -1
  112. /package/src/common/brand-components/{NsBrandContanier.styled.tsx → NsBrandContainer.styled.tsx} +0 -0
@@ -1,61 +1,40 @@
1
- import type { NsTableHeaderProps, Item} from './types'
2
- import React from 'react'
3
- import {
4
- TableHead,
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
- order,
18
- orderBy,
19
- headCells,
20
- onRequestSort,
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
- headCells.map((headCell) => (
30
- headCell.sortable ? (
31
- <TableCell
32
- key={headCell.id}
33
- sortDirection={orderBy == headCell.id ? order : false}
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
- <StyledTableSortLabel
36
- active={orderBy == headCell.id}
37
- direction={orderBy == headCell.id ? order : 'asc'}
38
- onClick={createSortHandler(headCell.id)}
39
- >
40
- {headCell.label}
41
- {orderBy === headCell.id ? (
42
- <Box component="span" sx={visuallyHidden}>
43
- {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
44
- </Box>
45
- ) : null}
46
- </StyledTableSortLabel>
47
- </TableCell>)
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';
@@ -14,7 +14,7 @@ type Story = StoryObj<ComponentType>;
14
14
  type MetaStory = Meta<ComponentType>;
15
15
 
16
16
  export default {
17
- title: 'Components/NsVideo',
17
+ title: 'Components/Data Display/NsVideo',
18
18
  component: NsVideo,
19
19
  decorators: [withCenterDecorator],
20
20
  argTypes: {
@@ -1,4 +1,4 @@
1
- import { AdditionalProps } from '@/common/common.types';
1
+ import { AdditionalProps } from '../common.types';
2
2
 
3
3
  export type NsVideoProps = {
4
4
  src: string;