@nuskin/foundation-ui-components 1.25.2 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.25.2",
+    "version": "1.26.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

package/src/common/autocomplete/NsAutocomplete.styled.tsx

@@ -1,5 +1,6 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { NsInputField } from '../input';
+import { Popper } from '@mui/material';
 const { getGenomeColor } = ColorUtils;
 
 export const StyledTextField = styled(NsInputField)`
@@ -11,6 +12,10 @@ export const StyledTextField = styled(NsInputField)`
         color: ${({ theme }) => getGenomeColor(theme, 'N100', 'light')};
     }
 `;
-// .muiautocomplete-popupindicator {
-//     display: none;
-// }
+
+export const StyledPopper = styled(Popper)`
+    width: 100% !important;
+    #custom_autocomplete_dropdown-listbox{
+        overflow-x:hidden;
+    }
+`

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -8,6 +8,7 @@ import React, {
 import {
     Autocomplete,
     AutocompleteRenderInputParams,
+    Popper,
 } from '@mui/material';
 
 import { LineLoader } from './helper/LineLoader';
@@ -18,7 +19,7 @@ import {
     renderOptionLabel,
 } from './helper/renderGroupName';
 import { SeeMoreButton } from './helper/SeeMoreButton';
-import { StyledTextField } from './NsAutocomplete.styled';
+import { StyledPopper, StyledTextField } from './NsAutocomplete.styled';
 import {
     ComponentBoxProps,
     NsAutocompleteProps,
@@ -44,6 +45,7 @@ const NsAutocomplete = ({
     inputValue,
     value,
     isFilterEnabled = true,
+    fullWidth
 }: PropsWithChildren<NsAutocompleteProps>) => {
     const [scrollTopPosition, setScrollTopPosition] = useState(0);
     const listboxRef = useRef<HTMLUListElement | null>(null);
@@ -120,6 +122,7 @@ const NsAutocomplete = ({
                 getOptionLabel={renderOptionLabel}
                 renderOption={renderOption as any}
                 renderInput={renderInput}
+                PopperComponent={fullWidth ? StyledPopper : Popper}
                 ListboxComponent={renderListBoxComponent as any}
                 renderGroup={renderGroupName}
                 onChange={onChange}

package/src/common/autocomplete/types.d.ts

@@ -47,6 +47,7 @@ export type NsAutocompleteProps = {
     inputValue: string;
     value: string | OptionsProps | null;
     isFilterEnabled?: boolean;
+    fullWidth?:boolean
 } & AdditionalProps;
 
 export type ListUiProps = {

package/src/common/button/NsButton.spec.tsx

@@ -7,6 +7,15 @@ import { NsButton } from '../';
 const { palette } = nuskinTheme;
 
 describe('<Button />', () => {
+    it('0. should match snapshot', () => {
+        const text = 'Click Me';
+        const { container } = render(
+            <NsButton color="primary" variant="contained">
+                {text}
+            </NsButton>
+        );
+        expect(container).toMatchSnapshot();
+    });
     it('1. should render default primary button styles ', () => {
         const text = 'Click Me';
         render(

package/src/common/button/__snapshots__/NsButton.spec.tsx.snap

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button /> 1. should match snapshot 1`] = `
+.emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  font-family: 'Inter',sans-serif;
+  min-width: 64px;
+  padding: 6px 16px;
+  border-radius: 4px;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  color: #FFFFFF;
+  background-color: #252525;
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
+  gap: 10px;
+  border-radius: 0;
+  background-color: #252525;
+  color: #FFFFFF!important;
+  text-transform: none;
+}
+
+.emotion-0::-moz-focus-inner {
+  border-style: none;
+}
+
+.emotion-0.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+@media print {
+  .emotion-0 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+}
+
+.emotion-0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
+}
+
+@media (hover: none) {
+  .emotion-0:hover {
+    background-color: #252525;
+  }
+}
+
+.emotion-0:active {
+  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+}
+
+.emotion-0.Mui-focusVisible {
+  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
+}
+
+.emotion-0.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
+  box-shadow: none;
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.emotion-0:focus {
+  background-color: #252525;
+}
+
+.emotion-0:hover {
+  background-color: #8C8C8C;
+}
+
+.emotion-0:active {
+  background-color: #F5F5F5;
+}
+
+<div>
+  <main
+    class="theme-wrapper light"
+  >
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium emotion-0"
+      tabindex="0"
+      type="button"
+    >
+      Click Me
+    </button>
+  </main>
+</div>
+`;

package/src/common/toast/ToastProvider.tsx

@@ -10,9 +10,20 @@ const ToastNotification = styled(MaterialDesignContent)`
     height: 46px;
     box-shadow: none;
     padding: 0 20px;
+    
+    .toast-message-wrapper {
+        width: 440px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
 
     @media (max-width: ${ScreenSize.md}px) {
         width: 343px;
+
+        .toast-message-wrapper {
+            width: 190px;
+        }
     }
 
     #notistack-snackbar svg {

package/src/common/toast/useToast.tsx

@@ -41,8 +41,9 @@ const useToast = () => {
         return actionButtons?.length ? actionButtons : null;
     };
     const showToast = (variant: VariantType = 'default', message?: string, options?: ToastOptions) => {
+
         try {
-            return enqueueSnackbar(message, {
+            return enqueueSnackbar(<div className='toast-message-wrapper'>{message}</div>, {
                 variant,
                 ...options,
                 anchorOrigin: { horizontal: 'center', vertical: 'bottom' },

package/src/common/typography/NsTypography.spec.tsx

@@ -1,9 +1,14 @@
-import React from 'react';
 import { render } from '@testing-library/react';
+import React from 'react';
 
 import NsTypography from './NsTypography';
 
 describe('GlobalFontInter', () => {
+    it('0. should match snapshot', () => {
+        const text = 'Hello Typo!';
+        const { container } = render(<NsTypography variant={'h1'}>{text}</NsTypography>);
+        expect(container).toMatchSnapshot();
+    });
     it('1. renders without crashing', () => {
         const text = 'Hello Typo!';
         const { getByText } = render(<NsTypography variant={'h1'}>{text}</NsTypography>);
@@ -13,14 +18,7 @@ describe('GlobalFontInter', () => {
     it('2. renders without crashing with p-l variant', () => {
         const text = 'Hello Typo!';
         const { getByText } = render(
-            <NsTypography
-                variant="h4"
-                weight="bold"
-                className="mt-2"
-                decoration="underline"
-                
-                color="primary"
-            >
+            <NsTypography variant="h4" weight="bold" className="mt-2" decoration="underline" color="primary">
                 {text}
             </NsTypography>
         );
@@ -30,13 +28,7 @@ describe('GlobalFontInter', () => {
     it('3. should not render with default color primary when color is passed', () => {
         const text = 'Hello Typo!';
         const { getByText } = render(
-            <NsTypography
-                variant="h4"
-                weight="bold"
-                className="mt-2"
-                decoration="underline"
-                color="accentColorA"
-            >
+            <NsTypography variant="h4" weight="bold" className="mt-2" decoration="underline" color="accentColorA">
                 {text}
             </NsTypography>
         );

package/src/common/typography/Typography.styled.tsx

@@ -13,7 +13,7 @@ type TypographyConfig = {
     fontWeight?: number;
 };
 
-const defaultFont = 'Roboto';
+const defaultFont = 'Inter';
 const defaultTypographyStyles = {
     h1: {
         fontFamily: defaultFont,

package/src/common/typography/__snapshots__/NsTypography.spec.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GlobalFontInter 0. should match snapshot 1`] = `
+.emotion-0 {
+  font-family: Inter;
+  font-size: 42px;
+  line-height: 48px;
+  margin: 0;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-decoration-line: none;
+}
+
+<div>
+  <div
+    class=" emotion-0"
+    color="primary"
+  >
+    Hello Typo!
+  </div>
+</div>
+`;