@nuskin/foundation-ui-components 1.13.0 → 1.15.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.
Files changed (5) hide show
  1. package/README.md +100 -17
  2. package/package.json +1 -1
  3. package/src/common/card/CardButton.tsx +9 -2
  4. package/src/common/card/NsMediumCard.tsx +3 -1
  5. package/src/common/card/types.d.ts +1 -0
package/README.md CHANGED
@@ -1,39 +1,122 @@
1
+ <div align="right">
2
+ <a href='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/badges/master/pipeline.svg'><img src='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/badges/master/pipeline.svg' alt='Pipeline Badge' /></a>
3
+ <a href='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/-/badges/release.svg'><img src='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/-/badges/release.svg' alt='Latest Release Badge' /></a>
4
+ <a href='https://img.shields.io/npm/dt/%40nuskin/foundation-ui-components'><img src='https://img.shields.io/npm/dt/%40nuskin/foundation-ui-components' alt='Downloads Badge' /></a>
5
+ </div>
6
+
1
7
  # @nuskin/foundation-ui-components
2
8
 
3
- This is a library that contains react components used in NuSkin Pages
9
+ This comprehensive library houses a collection of reusable React components specifically designed for NuSkin Pages. These components are meticulously crafted to ensure consistent UI/UX across all NuSkin digital properties, fostering a seamless user experience.
10
+
11
+ ## Releases
12
+
13
+ ### [CHANGELOG](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/-/blob/master/CHANGELOG.md)
14
+
15
+ ## Installation Guide
16
+
17
+ To integrate the NuSkin React Components Library into your NuSkin Pages project, follow these steps:
18
+
19
+ ### Clone the repository to your local machine
20
+
21
+ ```shell
22
+ git clone git@code.tls.nuskin.io:ns-am/content-foundation/foundation-ui-components.git
23
+ ```
4
24
 
5
- ## Installing
25
+ ## Running the project
6
26
 
7
- Usng npm:
27
+ ### Run the main application using yarn
8
28
 
9
- ```bash
10
- npm add @nuskin/foundation-ui-components
29
+ ```shell
30
+ yarn dev
11
31
  ```
12
32
 
13
- Usng yarn:
33
+ ### Storybook
34
+
35
+ See how React components look and behave in isolation using Storybook. To get started, follow these steps:
14
36
 
15
- ```bash
16
- yarn add @nuskin/foundation-ui-components
37
+ #### Run storybook using yarn.
38
+
39
+ ```shell
40
+ yarn storybook
17
41
  ```
18
42
 
19
- ## Example usage
43
+ #### To view the Storybook, use the following URLs
44
+
45
+ | Environment | URL |
46
+ | ----------- | ------------------------------------------------------- |
47
+ | Local | http://localhost:6007 |
48
+ | Test | https://test.nuskin.com/static/foundation-ui-components |
20
49
 
21
- ```ts
22
- import { Button } from "@nuskin/foundation-ui-components";
50
+ ## Usage
23
51
 
52
+ The following example illustrates how to use this project
53
+
54
+ ```shell
55
+ import { NsButton } from '@nuskin/foundation-ui-components';
24
56
  const Page = () => {
25
57
  return (
26
- <Button variant="contained" color="primary">
58
+ <NsButton variant="contained" color="primary">
27
59
  Sample
28
- </Button>
60
+ </NsButton>
29
61
  );
30
62
  };
31
63
  ```
32
64
 
33
- ## Resources
65
+ ## Dependencies
66
+
67
+ This project relies on the following dependencies:
68
+
69
+ **Emotion UI Libraries**
70
+
71
+ - `@emotion/react@^11.11.1`
72
+ - `@emotion/styled@^11.11.0`
73
+
74
+ **Material-UI Libraries**
75
+
76
+ - `@mui/material@5.14.16`
77
+ - `@mui/icons-material@^5.14.16`
78
+ - `@mui/utils@^5.14.16`
79
+
80
+ **NuSkin Foundation Theme**
81
+
82
+ - `@nuskin/foundation-theme@1.2.0`
83
+
84
+ **Carousel Libraries**
85
+
86
+ - `react-material-ui-carousel@^3.4.2`
87
+ - `react-slick@^0.29.0`
88
+ - `slick-carousel@^1.8.1`
89
+
90
+ **Other Libraries**
91
+
92
+ - `cliui@^8.0.1`
93
+ - `framer-motion@^10.16.4`
94
+
95
+ ## Testing
96
+
97
+ We use Jest for testing our project. Below are the available test scripts:
98
+
99
+ - Run all tests and generate coverage report:\*\*
100
+ ```bash
101
+ yarn test
102
+ ```
103
+ - Run tests for a specific pattern (e.g., accordion/\*):
104
+ ```bash
105
+ yarn run test:pattern
106
+ ```
107
+ - Run only failed tests from the last test run:
108
+ ```bash
109
+ yarn run test:failed
110
+ ```
111
+ - Generate and view code coverage report:
112
+
113
+ ```bash
114
+ yarn run test:coverage
115
+ ```
34
116
 
35
- - 0.1.0 - Initial commit
117
+ - The yarn test script builds the project using Next.js before running Jest tests.
118
+ - Feel free to customize the test patterns or add additional options as needed.
36
119
 
37
- ## License
120
+ ### Coverage Report:
38
121
 
39
- [MIT](https://opensource.org/licenses/MIT)
122
+ After running tests, open the `index.html` file in the `coverage` directory to view the coverage report.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuskin/foundation-ui-components",
3
- "version": "1.13.0",
3
+ "version": "1.15.0",
4
4
  "description": "It is a foundation library written in react, that provides common components to all UI pages",
5
5
  "main": "src/common/index.ts",
6
6
  "repository": {
package/src/common/card/CardButton.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { NsButton, NsIcon } from '..';
1
+ import { NsButton, NsIcon } from '../';
2
2
  import { NsCardButton } from './types';
3
3
 
4
4
  const CardButton = ({
@@ -9,6 +9,7 @@ const CardButton = ({
9
9
  buttonVariant = 'outlined',
10
10
  buttonColor = 'primary',
11
11
  fullWidth = false,
12
+ showArrowWithText = false,
12
13
  }: NsCardButton) => {
13
14
  if (showButton && url) {
14
15
  return (
@@ -18,7 +19,13 @@ const CardButton = ({
18
19
  color={buttonColor}
19
20
  variant={buttonVariant}
20
21
  fullWidth={fullWidth}
21
- endIcon={endIcon ? <NsIcon name={endIcon} color={buttonColor} /> : null}
22
+ endIcon={
23
+ showArrowWithText && buttonVariant === 'text' ? (
24
+ <NsIcon name="arrowRight" size="small" color="primary" />
25
+ ) : endIcon ? (
26
+ <NsIcon name={endIcon} color={buttonColor} />
27
+ ) : null
28
+ }
22
29
  >
23
30
  {buttonText}
24
31
  </NsButton>
package/src/common/card/NsMediumCard.tsx CHANGED
@@ -14,6 +14,7 @@ type NsMediumCardProps = {
14
14
  button?: NsCardButton;
15
15
  className?: string;
16
16
  fluid?: boolean;
17
+ showArrowWithButtonText?: boolean;
17
18
  };
18
19
  const textVariantButton = {
19
20
  padding: '0 0 4px',
@@ -76,6 +77,7 @@ export default function NsMediumCard({
76
77
  button,
77
78
  className,
78
79
  fluid,
80
+ showArrowWithButtonText = false,
79
81
  }: NsMediumCardProps) {
80
82
  return (
81
83
  <CardContainer
@@ -92,7 +94,7 @@ export default function NsMediumCard({
92
94
  {title}
93
95
  </NsTypography>
94
96
  <article className="subtitle">{subtitle}</article>
95
- {button ? <CardButton {...button} /> : null}
97
+ {button ? <CardButton {...button} showArrowWithText={showArrowWithButtonText} /> : null}
96
98
  </div>
97
99
  </CardContainer>
98
100
  );
package/src/common/card/types.d.ts CHANGED
@@ -21,4 +21,5 @@ export type NsCardButton = {
21
21
  buttonText: string;
22
22
  buttonVariant?: 'text' | 'outlined' | 'contained';
23
23
  buttonColor?: 'secondary' | 'primary';
24
+ showArrowWithText?: boolean;
24
25
  };