@nuskin/foundation-ui-components 1.33.0-1253-feature.3 → 2.0.0

package/src/common/icon/icons/SuccessIcon.tsx

@@ -1,40 +0,0 @@
-import { ReactElement } from 'react';
-
-/* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-
-/**
- * pass fill = '#fff' and colorOverride ='#5BAC85'
- * @param props
- * @returns
- */
-const SuccessIcon = (props: SvgIconProps): ReactElement => {
-    return (
-        <SvgIcon
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            data-testid="success"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            {...props}
-        >
-            <g id="Check Circle">
-                <circle id="Ellipse 70" cx="10" cy="10" r="10" fill={props.color} />
-                <g id="check 12px">
-                    <g id="checkmark">
-                        <path
-                            id="Shape (Stroke)"
-                            fillRule="evenodd"
-                            clipRule="evenodd"
-                            d="M15.8051 5.79289C16.1956 6.18342 16.1956 6.81658 15.8051 7.20711L8.80508 14.2071C8.61742 14.3948 8.36287 14.5001 8.09748 14.5C7.8321 14.4999 7.57765 14.3943 7.39018 14.2064L3.79218 10.6014C3.40203 10.2105 3.40265 9.57735 3.79355 9.18721C4.18445 8.79706 4.81762 8.79768 5.20776 9.18858L8.09866 12.0851L14.3909 5.79289C14.7814 5.40237 15.4146 5.40237 15.8051 5.79289Z"
-                            fill={props.fill || '#fff'}
-                        />
-                    </g>
-                </g>
-            </g>
-        </SvgIcon>
-    );
-};
-
-export default SuccessIcon;

package/src/common/icon/icons/TrashIcon.tsx

@@ -1,32 +0,0 @@
-import { ReactElement } from 'react';
-
-/* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-
-/**
- *
- * @param props {fill: color of the trash icon}
- * @returns returns TrashIcon, used for marking delete symbol
- */
-const TrashIcon = (props: SvgIconProps): ReactElement => {
-    return (
-        <SvgIcon
-            width="20"
-            height="21"
-            viewBox="0 0 20 21"
-            data-testid="trash"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            {...props}
-        >
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M10 0C10.5523 0 11 0.447715 11 1V2.5H19C19.5523 2.5 20 2.94772 20 3.5C20 4.05228 19.5523 4.5 19 4.5H17.5V18C17.5 19.6569 16.1569 21 14.5 21H5.5C3.84315 21 2.5 19.6569 2.5 18V4.5H1C0.447715 4.5 0 4.05228 0 3.5C0 2.94772 0.447715 2.5 1 2.5H9V1C9 0.447715 9.44771 0 10 0ZM4.5 4.5V18C4.5 18.5523 4.94772 19 5.5 19H14.5C15.0523 19 15.5 18.5523 15.5 18V4.5H4.5ZM6.5 5.5C7.05228 5.5 7.5 5.94772 7.5 6.5V17C7.5 17.5523 7.05228 18 6.5 18C5.94772 18 5.5 17.5523 5.5 17V6.5C5.5 5.94772 5.94772 5.5 6.5 5.5ZM10 5.5C10.5523 5.5 11 5.94772 11 6.5V17C11 17.5523 10.5523 18 10 18C9.44771 18 9 17.5523 9 17V6.5C9 5.94772 9.44771 5.5 10 5.5ZM13.5 5.5C14.0523 5.5 14.5 5.94772 14.5 6.5V17C14.5 17.5523 14.0523 18 13.5 18C12.9477 18 12.5 17.5523 12.5 17V6.5C12.5 5.94772 12.9477 5.5 13.5 5.5Z"
-                fill={props.color}
-            />
-        </SvgIcon>
-    );
-};
-
-export default TrashIcon;

package/src/common/icon/icons/UserIcon.tsx

@@ -1,37 +0,0 @@
-import { ReactElement } from 'react';
-
-/* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-
-/**
- *
- * @param props {fill: color to be filled for icon, color: color of the tick icon}
- */
-const UserIcon = (props: SvgIconProps): ReactElement => {
-    return (
-        <SvgIcon
-            viewBox="0 0 24 24"
-            data-testid="userIcon"
-            xmlns="http://www.w3.org/2000/svg"
-            {...props}
-            fill="transparent"
-        >
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z"
-                stroke={props.color}
-                strokeWidth="2"
-            />
-            <path
-                d="M19 20C18.9425 19.3229 19 17.5669 17.3793 17.2226C14.7126 16.6144 13.931 16.4078 14.1034 14.2272C15.8046 13.0796 15.7816 11.0252 15.7471 8.74139C15.7471 6.67508 14.0695 5 12 5C9.93052 5 8.25287 6.67508 8.25287 8.74139C8.25287 11.0367 8.25287 13.137 9.89655 14.2272C10.0575 16.4078 9.28736 16.6144 6.62069 17.2226C5 17.5669 5.05747 19.3229 5 20"
-                stroke={props.color}
-                fill={props.color}
-                strokeWidth="2"
-                strokeLinecap="round"
-            />
-        </SvgIcon>
-    );
-};
-
-export default UserIcon;

package/src/common/icon/icons/UserOutline.tsx

@@ -1,29 +0,0 @@
-import { ReactElement } from 'react';
-
-/* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-
-/**
- *  * pass colorOverride = '#272525'
- */
-function UserOutline(props: SvgIconProps): ReactElement {
-    return (
-        <SvgIcon
-            data-testid="userOutline"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12C21.25 14.5514 20.217 16.8615 18.5465 18.535C18.5373 18.5053 18.5278 18.4757 18.5177 18.4462C18.2909 17.7811 17.7908 17.0816 16.7743 16.861C16.1976 16.7279 15.7597 16.6249 15.4126 16.5154C15.0619 16.4048 14.8722 16.3075 14.7621 16.2197C14.6519 16.1318 14.5229 15.9893 14.534 15.3824C15.2564 14.7722 15.6208 13.9828 15.7989 13.145C15.9917 12.2377 15.9765 11.218 15.9621 10.2575L15.9618 10.2367C15.9587 8.04108 14.1928 6.25 12 6.25C9.80523 6.25 8.03818 8.04427 8.03818 10.2425L8.03818 10.2902C8.03812 11.2492 8.03807 12.2685 8.23093 13.1685C8.40828 13.9961 8.76096 14.7856 9.46415 15.382C9.47219 15.9884 9.34391 16.1319 9.23338 16.2204C9.12398 16.3079 8.93522 16.4051 8.58559 16.5155C8.23946 16.6249 7.80232 16.728 7.22572 16.861C6.20921 17.0816 5.70909 17.7811 5.48226 18.4462C5.47222 18.4757 5.46266 18.5053 5.45354 18.535C3.78298 16.8615 2.75 14.5514 2.75 12ZM6.77658 19.6351C8.26295 20.6539 10.0619 21.25 12 21.25C13.9381 21.25 15.7371 20.6539 17.2234 19.6351C17.206 19.3999 17.1779 19.1646 17.098 18.9304C16.9903 18.6146 16.822 18.4054 16.4533 18.3262L16.4423 18.3239L16.4423 18.3238C15.8787 18.1938 15.3772 18.0771 14.9615 17.946C14.5483 17.8157 14.1512 17.6513 13.8266 17.3922C13.0849 16.8004 12.9768 15.9412 13.0552 14.9385L13.0833 14.58L13.3803 14.3774C13.9081 14.0173 14.1862 13.5172 14.3317 12.8331C14.4843 12.1148 14.477 11.265 14.4619 10.2537L14.4617 10.2425H14.4618C14.4618 8.8592 13.3529 7.75 12 7.75C10.6471 7.75 9.53818 8.8592 9.53818 10.2425C9.53818 11.259 9.54149 12.1256 9.69764 12.8542C9.84777 13.5548 10.1225 14.0439 10.6148 14.3741L10.9184 14.5777L10.9451 14.9423C11.0181 15.9429 10.9092 16.8005 10.1706 17.3915C9.84647 17.6509 9.45024 17.8154 9.03756 17.9458C8.62239 18.077 8.12144 18.1938 7.55771 18.3238L7.54669 18.3263L7.54667 18.3262C7.17801 18.4054 7.00968 18.6146 6.90197 18.9304C6.8221 19.1646 6.79403 19.3999 6.77658 19.6351Z"
-                fill={props.color}
-            />
-        </SvgIcon>
-    );
-}
-
-export default UserOutline;

package/src/common/icon/icons/WarningIcon.tsx

@@ -1,48 +0,0 @@
-import { ReactElement } from 'react';
-
-/* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-
-/**
- * pass colorOverride = '#FEBD00'
- * @param props { fill: color to be filled for icon, color: color of the tick icon}
- * @returns ErrorIcon, can be used in Input field, when input field is in error state
- */
-const WarningIcon = (props: SvgIconProps): ReactElement => {
-    return (
-        <SvgIcon
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            data-testid="warning"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            {...props}
-        >
-            <g id="💎-icon/alert/WarningFill-yellow" transform="translate(1.000000, 1.000000)">
-                <g id="Warning2" transform="translate(0.000000, 1.200000)">
-                    <path
-                        d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
-                    0.100809118 8.58923271,0.246687943 L0.0706452929,14.8670135 C-0.0142965839,15.0216954 -0.0118890438,15.2093943 0.0769925071,15.3618609 C0.165874058,
-                    15.5143276 0.328282319,15.6093523 0.505163987,15.6123832 L17.5120236,15.6123832 C17.6889052,15.6093523 17.8513135,15.5143276 17.940195,15.3618609 C18.0290766,
-                    15.2093943 18.0314841,15.0216954 17.9465423,14.8670135 Z"
-                        id="Shape"
-                        fill={props.color}
-                        fillRule="nonzero"
-                    ></path>
-                    <path
-                        d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
-                    12.0467652 9.37034806,12.1211477 9.52,12.265 C9.65709398,12.4241339 9.72701115,12.6303 9.715,12.84 C9.72048715,13.0522748 9.64341383,13.2584012 9.5,
-                    13.415 C9.35312473,13.5641498 9.1489517,13.6425377 8.94,13.63 C8.72997224,13.6424095 8.52401376,13.5683367 8.37,13.425 C8.23531653,13.2613056 8.17063593,
-                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z"
-                        id="Shape"
-                        fill="#FFFFFF"
-                        fillRule="nonzero"
-                    ></path>
-                </g>
-            </g>
-        </SvgIcon>
-    );
-};
-
-export default WarningIcon;

package/src/common/icon/icons/error.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.07 2.92999C15.4338 1.29429 13.2811 0.276523 10.9786 0.0501185C8.67611 -0.176286 6.36637 0.402675 4.44291 1.68835C2.51945 2.97403 1.1013 4.88687 0.430089 7.10094C-0.241121 9.31502 -0.123857 11.6933 0.761901 13.8306C1.64766 15.9679 3.24711 17.732 5.28771 18.8222C7.32831 19.9125 9.68381 20.2614 11.9528 19.8096C14.2219 19.3578 16.2641 18.1332 17.7314 16.3445C19.1988 14.5557 20.0005 12.3136 20 9.99999C19.9994 7.34804 18.9455 4.80491 17.07 2.92999ZM9 5.37999C9 5.11477 9.10536 4.86041 9.29289 4.67288C9.48043 4.48534 9.73478 4.37999 10 4.37999C10.2652 4.37999 10.5196 4.48534 10.7071 4.67288C10.8946 4.86041 11 5.11477 11 5.37999V10.6C11 10.8652 10.8946 11.1196 10.7071 11.3071C10.5196 11.4946 10.2652 11.6 10 11.6C9.73478 11.6 9.48043 11.4946 9.29289 11.3071C9.10536 11.1196 9 10.8652 9 10.6V5.37999ZM10 15.51C9.74684 15.51 9.49936 15.4349 9.28887 15.2943C9.07837 15.1536 8.91431 14.9537 8.81743 14.7198C8.72055 14.4859 8.6952 14.2286 8.74459 13.9803C8.79398 13.732 8.91589 13.5039 9.0949 13.3249C9.27391 13.1459 9.50199 13.024 9.75028 12.9746C9.99858 12.9252 10.2559 12.9505 10.4898 13.0474C10.7237 13.1443 10.9236 13.3084 11.0643 13.5189C11.2049 13.7294 11.28 13.9768 11.28 14.23C11.28 14.5695 11.1451 14.895 10.9051 15.1351C10.665 15.3751 10.3395 15.51 10 15.51Z" fill="#C81D1D"/>
-</svg>

package/src/common/icon/icons/home.tsx

@@ -1,19 +0,0 @@
-import { ReactElement } from 'react';
-
-/* eslint-disable max-len */
-import { SvgIcon, SvgIconProps } from '@mui/material';
-
-const Home = (props: SvgIconProps): ReactElement => {
-    return (
-        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="home" {...props}>
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M23.77 12.4971C23.8226 12.577 23.8694 12.6606 23.91 12.7471C23.9626 12.8911 23.9864 13.044 23.98 13.1971C23.9839 13.3413 23.9566 13.4845 23.9 13.6171C23.8531 13.7514 23.7781 13.8741 23.68 13.9771C23.5815 14.0833 23.4624 14.1683 23.33 14.2271C23.206 14.2775 23.0738 14.3046 22.94 14.3071C22.7944 14.3048 22.651 14.2706 22.52 14.2071C22.3902 14.1445 22.2745 14.056 22.18 13.9471L12.28 3.33713C12.2277 3.27493 12.1581 3.22968 12.08 3.20713C12.0087 3.18275 11.9313 3.18275 11.86 3.20713C11.803 3.22861 11.7517 3.26281 11.71 3.30713L1.8 13.9271C1.70627 14.0302 1.59203 14.1126 1.46459 14.169C1.33716 14.2254 1.19935 14.2545 1.06 14.2545C0.920651 14.2545 0.78284 14.2254 0.655406 14.169C0.527971 14.1126 0.413727 14.0302 0.32 13.9271C0.217842 13.8273 0.136296 13.7084 0.08 13.5771C0.0284697 13.4396 0.00139518 13.294 0 13.1471C0.0013101 13.0035 0.0284068 12.8612 0.08 12.7271C0.136065 12.5928 0.217559 12.4705 0.32 12.3671L10.26 1.77713C10.6011 1.40957 11.0475 1.15652 11.538 1.05268C12.0286 0.94884 12.5393 0.999295 13 1.19713C13.2985 1.33692 13.5643 1.53794 13.78 1.78713L15.33 3.48713V3.10713C15.3302 2.82197 15.4372 2.54724 15.63 2.33713C15.7244 2.23535 15.8389 2.15434 15.9663 2.09925C16.0937 2.04415 16.2312 2.01619 16.37 2.01713H20C20.1486 2.0007 20.2989 2.01779 20.44 2.06713C20.5669 2.12598 20.6821 2.20728 20.78 2.30713C20.8776 2.41428 20.9525 2.54016 21 2.67713C21.0449 2.80898 21.0652 2.94794 21.06 3.08713V9.56713L23.77 12.4971ZM19 7.33713V4.17713H17.42V5.67713L19 7.33713ZM19.28 13.94C19.4773 13.7598 19.7329 13.6569 20 13.65C20.2667 13.6586 20.5217 13.7613 20.72 13.94C20.8169 14.0298 20.8951 14.1378 20.95 14.258C21.0049 14.3781 21.0355 14.508 21.04 14.64V22.02C21.0355 22.152 21.0049 22.2819 20.95 22.402C20.8951 22.5222 20.8169 22.6302 20.72 22.72C20.5232 22.8997 20.2665 22.9996 20 23H14.22C13.9504 23.0001 13.6903 22.9004 13.49 22.72C13.3949 22.6294 13.3185 22.5209 13.2653 22.4008C13.2121 22.2807 13.1831 22.1513 13.18 22.02V16.66C13.18 16.6134 13.1691 16.5675 13.1483 16.5258C13.1275 16.4842 13.0972 16.4479 13.06 16.42C13.0207 16.3807 12.9739 16.3498 12.9223 16.3292C12.8707 16.3086 12.8155 16.2986 12.76 16.3H11.3C11.2443 16.2974 11.1887 16.3068 11.137 16.3275C11.0852 16.3482 11.0385 16.3797 11 16.42C10.9597 16.4426 10.9252 16.4743 10.8992 16.5124C10.8732 16.5506 10.8564 16.5943 10.85 16.64V22.04C10.851 22.173 10.8229 22.3046 10.7676 22.4255C10.7123 22.5464 10.6312 22.6538 10.53 22.74C10.4345 22.8321 10.3217 22.9043 10.1981 22.9523C10.0745 23.0004 9.94256 23.0234 9.80997 23.02H3.99997C3.85815 23.0235 3.71703 22.9988 3.58484 22.9473C3.45265 22.8958 3.33202 22.8186 3.22997 22.72C3.13304 22.6302 3.05485 22.5222 2.99993 22.402C2.945 22.2819 2.91443 22.152 2.90997 22.02V14.64C2.91311 14.5063 2.94305 14.3745 2.99802 14.2526C3.05298 14.1306 3.13186 14.0209 3.22997 13.93C3.43312 13.7554 3.69211 13.6594 3.95997 13.6594C4.22783 13.6594 4.48683 13.7554 4.68997 13.93C4.78627 14.0218 4.86329 14.1318 4.91652 14.2538C4.96975 14.3757 4.99812 14.507 4.99997 14.64V21.09H8.76997V16.68C8.7711 16.3671 8.83749 16.0578 8.9649 15.772C9.09232 15.4861 9.27797 15.23 9.50997 15.02C9.74648 14.8043 10.0212 14.6348 10.32 14.52C10.622 14.4001 10.9451 14.3423 11.27 14.35H12.73C13.3796 14.3465 14.0071 14.5854 14.49 15.02C14.7181 15.2289 14.9014 15.482 15.0286 15.7639C15.1558 16.0459 15.2243 16.3507 15.23 16.66V21.07H18.96V14.64C18.9609 14.5073 18.9899 14.3764 19.045 14.2557C19.1002 14.1351 19.1803 14.0275 19.28 13.94Z"
-                fill={props?.color}
-            />
-        </SvgIcon>
-    );
-};
-
-export default Home;

package/src/common/icon/icons/search.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9.98777C0 4.47167 4.46598 0 9.97505 0C15.4841 0 19.9501 4.47167 19.9501 9.98777C19.9501 11.7568 19.49 13.4205 18.6829 14.8629L23.2366 19.4844C24.2593 20.5223 24.2537 22.1921 23.2241 23.2231C22.1755 24.273 20.4704 24.2567 19.442 23.1869L15.0315 18.5988C13.5485 19.4736 11.8192 19.9755 9.97505 19.9755C4.46598 19.9755 0 15.5039 0 9.98777ZM16.6388 17.42L20.8646 21.8159C21.1265 22.0884 21.5608 22.0926 21.8279 21.8251C22.0902 21.5625 22.0916 21.1372 21.8311 20.8728L17.5309 16.5087C17.2531 16.8311 16.9551 17.1355 16.6388 17.42ZM9.97505 1.97696C5.55644 1.97696 1.97444 5.56352 1.97444 9.98777C1.97444 14.412 5.55644 17.9986 9.97505 17.9986C11.7025 17.9986 13.2995 17.4515 14.6063 16.5208C15.3948 15.9594 16.0773 15.2583 16.6179 14.454C17.4753 13.1784 17.9757 11.6431 17.9757 9.98777C17.9757 5.56352 14.3937 1.97696 9.97505 1.97696Z" fill="#5F5F5F"/>
-</svg>

package/src/common/icon/icons/success.svg

@@ -1,10 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Check Circle">
-<circle id="Ellipse 70" cx="10" cy="10" r="10" fill="#5BAC85"/>
-<g id="check 12px">
-<g id="checkmark">
-<path id="Shape (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M15.8051 5.79289C16.1956 6.18342 16.1956 6.81658 15.8051 7.20711L8.80508 14.2071C8.61742 14.3948 8.36287 14.5001 8.09748 14.5C7.8321 14.4999 7.57765 14.3943 7.39018 14.2064L3.79218 10.6014C3.40203 10.2105 3.40265 9.57735 3.79355 9.18721C4.18445 8.79706 4.81762 8.79768 5.20776 9.18858L8.09866 12.0851L14.3909 5.79289C14.7814 5.40237 15.4146 5.40237 15.8051 5.79289Z" fill="white"/>
-</g>
-</g>
-</g>
-</svg>

package/src/common/icon/icons/trash.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C10.5523 0 11 0.447715 11 1V2.5H19C19.5523 2.5 20 2.94772 20 3.5C20 4.05228 19.5523 4.5 19 4.5H17.5V18C17.5 19.6569 16.1569 21 14.5 21H5.5C3.84315 21 2.5 19.6569 2.5 18V4.5H1C0.447715 4.5 0 4.05228 0 3.5C0 2.94772 0.447715 2.5 1 2.5H9V1C9 0.447715 9.44771 0 10 0ZM4.5 4.5V18C4.5 18.5523 4.94772 19 5.5 19H14.5C15.0523 19 15.5 18.5523 15.5 18V4.5H4.5ZM6.5 5.5C7.05228 5.5 7.5 5.94772 7.5 6.5V17C7.5 17.5523 7.05228 18 6.5 18C5.94772 18 5.5 17.5523 5.5 17V6.5C5.5 5.94772 5.94772 5.5 6.5 5.5ZM10 5.5C10.5523 5.5 11 5.94772 11 6.5V17C11 17.5523 10.5523 18 10 18C9.44771 18 9 17.5523 9 17V6.5C9 5.94772 9.44771 5.5 10 5.5ZM13.5 5.5C14.0523 5.5 14.5 5.94772 14.5 6.5V17C14.5 17.5523 14.0523 18 13.5 18C12.9477 18 12.5 17.5523 12.5 17V6.5C12.5 5.94772 12.9477 5.5 13.5 5.5Z" fill="#252525"/>
-</svg>

package/src/common/icon/index.ts

@@ -1,3 +0,0 @@
-export { default as NsIcon } from './NsIcon';
-export { default as NsIconVariants } from './NsIconVariants';
-export type { NsIconProps, NsIconNameType, NsIconSizeType } from './types.d';

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

@@ -1,53 +0,0 @@
-import { FoundationTheme } from '@nuskin/foundation-theme';
-import { HTMLProps } from 'react';
-
-import { NsIconVariants } from '.';
-
-export type NsIconSizeType = 'small' | 'medium' | 'large' | 'xLarge';
-
-export type NsIconNameType = keyof typeof NsIconVariants;
-
-export type NsIconProps = HTMLProps & {
-    name: NsIconNameType;
-    size?: NsIconSizeType;
-    color?: FoundationTheme.PaletteColors;
-    testId?: string;
-    colorOverride?: string;
-    cursor?:
-        | 'auto'
-        | 'default'
-        | 'none'
-        | 'context-menu'
-        | 'help'
-        | 'pointer'
-        | 'progress'
-        | 'wait'
-        | 'cell'
-        | 'crosshair'
-        | 'text'
-        | 'vertical-text'
-        | 'alias'
-        | 'copy'
-        | 'move'
-        | 'no-drop'
-        | 'not-allowed'
-        | 'grab'
-        | 'grabbing'
-        | 'e-resize'
-        | 'n-resize'
-        | 'ne-resize'
-        | 'nw-resize'
-        | 's-resize'
-        | 'se-resize'
-        | 'sw-resize'
-        | 'w-resize'
-        | 'ew-resize'
-        | 'ns-resize'
-        | 'nesw-resize'
-        | 'nwse-resize'
-        | 'col-resize'
-        | 'row-resize'
-        | 'all-scroll'
-        | 'zoom-in'
-        | 'zoom-out';
-};

package/src/common/image/BynderMedia.spec.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { BynderMedia } from './BynderMedia';
-import { ImageData1 } from '../card/fixtures/ImageData1';
-
-describe('BynderMedia', () => {
-    const imageDetail = ImageData1;
-    const suffix = 'mockSuffix';
-    const className = 'mockClassName';
-    const testId = 'mockTestId';
-    const liveTag = { 'data-cslp': 'cslp' };
-
-    it('1. renders video element for type VIDEO', () => {
-        const selected = { url: 'mockVideoUrl', type: 'VIDEO' };
-        const previewUrls = ['mockPreviewUrl1', 'mockPreviewUrl2'];
-        const isPublic = true;
-        const { container } = render(
-            <BynderMedia
-                imageDetail={{ ...imageDetail, files: {}, selected: selected as any, previewUrls, isPublic }}
-                suffix={suffix}
-                className={className}
-                testId={testId}
-                liveTag={liveTag}
-            />
-        );
-        expect(container.querySelector('video')).toBeInTheDocument();
-    });
-
-    it('2. renders default element for non-VIDEO type', () => {
-        const { container } = render(
-            <BynderMedia
-                imageDetail={imageDetail}
-                suffix={suffix}
-                className={className}
-                testId={testId}
-                liveTag={liveTag}
-            />
-        );
-        expect(container.querySelector('video')).not.toBeInTheDocument();
-        expect(container.querySelector('img')).toBeInTheDocument();
-    });
-});

package/src/common/image/BynderMedia.tsx

@@ -1,49 +0,0 @@
-import { ReactElement } from 'react';
-
-import { CslpTag } from '../common.types';
-/* eslint-disable @next/next/no-img-element */
-import { getImageType, getMediaUrl, getUrlBasedOnDerivative } from './bynder-util';
-import { BynderImageDataType } from './types';
-
-type BynderMediaProps = {
-    imageDetail: BynderImageDataType;
-    suffix?: string;
-    className?: string;
-    testId?: string;
-    liveTag?: CslpTag;
-};
-export const BynderMedia = ({ imageDetail, suffix, className, testId, liveTag }: BynderMediaProps): ReactElement => {
-    const { files, name, selected, previewUrls, isPublic } = imageDetail;
-    const { url = '', fit, position, altText = '', bgColor, type } = selected ?? {};
-    const imageDerivativeType = getImageType(url, name, files);
-    const mediaUrl = getMediaUrl(selected, isPublic, previewUrls);
-    let transformedMediaUrl = getUrlBasedOnDerivative(mediaUrl, imageDerivativeType, suffix ?? '');
-    if (type === 'VIDEO') {
-        return (
-            <div {...liveTag}>
-                <video
-                    loop
-                    autoPlay
-                    muted
-                    width="100%"
-                    style={{ backgroundColor: bgColor, objectFit: fit, objectPosition: position }}
-                    className={`${className || ''} bynder-image`}
-                    data-testid={testId || 'test-bynder-video'}
-                >
-                    <source src={transformedMediaUrl} type="video/mp4" />
-                    <source src={transformedMediaUrl} type="video/ogg" />
-                </video>
-            </div>
-        );
-    }
-    return (
-        <img
-            {...liveTag}
-            data-testid={testId || 'test-bynder-image'}
-            className={`${className || ''} bynder-image`}
-            src={transformedMediaUrl}
-            alt={altText}
-            style={{ backgroundColor: bgColor, objectFit: fit, objectPosition: position }}
-        />
-    );
-};

package/src/common/image/NsImage.spec.tsx

@@ -1,60 +0,0 @@
-import { render, screen } from '@/test-utils/index';
-import { NsImage } from '../';
-
-describe('NsImage component', () => {
-    it('1. renders', () => {
-        const alt = 'test image';
-        render(<NsImage src="image.jpg" width={300} height={300} alt={alt} />);
-        const imgElement = screen.getByAltText(alt);
-        expect(imgElement).toBeInTheDocument();
-    });
-
-    it('2. renders with correct src and alt attributes', () => {
-        const src = 'image.jpg';
-        const alt = 'test image';
-        const { getByAltText } = render(<NsImage src={src} alt={alt} />);
-        const image = getByAltText(alt);
-        expect(image).toHaveAttribute('src', src);
-    });
-
-    it('3. renders with width and height if variant is not provided', () => {
-        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" width={300} height={300} />);
-        const image = getByAltText('test image');
-        expect(image).toHaveAttribute('width', '300');
-        expect(image).toHaveAttribute('height', '300');
-    });
-
-    it('4. renders with correct width and height based on variant', () => {
-        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="icon" />);
-        const image = getByAltText('test image');
-        expect(image).toHaveAttribute('width', '60');
-        expect(image).toHaveAttribute('height', '60');
-    });
-
-    it('5. renders with correct width and height if variant is "fill"', () => {
-        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="fill" />);
-        const image = getByAltText('test image');
-        expect(image).toHaveAttribute('width', '100%');
-        expect(image).toHaveAttribute('height', 'auto');
-    });
-
-    it('6. renders with correct width and height if variant is "award"', () => {
-        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="award" />);
-        const image = getByAltText('test image');
-        expect(image).toHaveAttribute('width', '130');
-        expect(image).toHaveAttribute('height', '130');
-    });
-
-    it('7. renders with correct width and height if variant is "product"', () => {
-        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="product" />);
-        const image = getByAltText('test image');
-        expect(image).toHaveAttribute('width', '300');
-        expect(image).toHaveAttribute('height', '300');
-    });
-
-    it('8. renders with additional props', () => {
-        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" className="custom-image" />);
-        const image = getByAltText('test image');
-        expect(image).toHaveClass('custom-image');
-    });
-});

package/src/common/image/NsImage.stories.tsx

@@ -1,46 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsImage } from './';
-
-type ComponentType = typeof NsImage;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Data Display/NsImage',
-    component: NsImage,
-    decorators: [withCenterDecorator],
-    args: {
-        src: 'https://media.nuskin.com/m/42911c8b05600476/webimage-brand-ageloc-optweb.png',
-        width: 300,
-        height: 300,
-        alt: 'pharmanex-brand image',
-    },
-} as MetaStory;
-
-export const NavigationImage: Story = {
-    args: {
-        src: 'https://www.nuskin.com/content/dam/global/library/aug2022/01130171-lumispa-io-norm-combo.jpg',
-        width: 200,
-        height: 200,
-        alt: 'lumispa-combo',
-    },
-};
-
-export const NavigationBannerImage: Story = {
-    args: {
-        src: 'https://www.nuskin.com/content/dam/global/library/feb2020/Navigation-images-Skin-Carev2.jpg',
-        width: 340,
-        height: 610,
-        alt: 'lumispa-combo',
-    },
-};
-
-export const AwardImage: Story = {
-    args: {
-        src: 'https://media.nuskin.com/m/5a9a99eccfde58c6/webimage-winner-global-makeup-awards-2022.png',
-        width: 130,
-        height: 130,
-        alt: 'global-makeup-award',
-    },
-};

package/src/common/image/NsImage.tsx

@@ -1,33 +0,0 @@
-import { ReactElement } from 'react';
-
-import { NsImageProps } from './types';
-
-// eslint-disable-next-line no-unused-vars
-const NsImage = ({ src, width, height, alt, variant, ...rest }: NsImageProps): ReactElement => {
-    let cHeight, cWidth;
-    switch (variant) {
-        case 'product':
-            cHeight = 300;
-            cWidth = 300;
-            break;
-        case 'icon':
-            cHeight = 60;
-            cWidth = 60;
-            break;
-        case 'award':
-            cHeight = 130;
-            cWidth = 130;
-            break;
-        case 'fill':
-            cHeight = 'auto';
-            cWidth = '100%';
-            break;
-        default:
-            cHeight = height;
-            cWidth = width;
-            break;
-    }
-    // eslint-disable-next-line @next/next/no-img-element
-    return <img src={src} alt={alt} height={cHeight} width={cWidth} {...rest} />;
-};
-export default NsImage;

package/src/common/image/NsNextImage.spec.tsx

@@ -1,10 +0,0 @@
-import { render, screen } from '@/test-utils/index';
-import NsNextImage from './NsNextImage';
-describe('NsNextImage', () => {
-    it('test image element renders', () => {
-        const altText = 'dummy image';
-        render(<NsNextImage src="https://www.google.com" width="300" height="300" alt={altText} />);
-        const imgElement = screen.getByAltText(altText);
-        expect(imgElement).toBeInTheDocument();
-    });
-});

package/src/common/image/NsNextImage.stories.tsx

@@ -1,51 +0,0 @@
-import { NsNextImage } from '.';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { StoryObj, Meta } from '@storybook/react';
-
-type ComponentType = typeof NsNextImage;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Data Display/NsNextImage',
-    component: NsNextImage,
-    decorators: [withCenterDecorator],
-} as MetaStory;
-
-export const BrandImage: Story = {
-    args: {
-        src: 'https://media.nuskin.com/m/42911c8b05600476/webimage-brand-ageloc-optweb.png',
-        width: 300,
-        height: 300,
-        unoptimized: true,
-    },
-};
-export const NavigationImage: Story = {
-    args: {
-        src: 'https://www.nuskin.com/content/dam/global/library/aug2022/01130171-lumispa-io-norm-combo.jpg',
-        width: 200,
-        height: 200,
-        alt: 'lumispa-combo',
-        unoptimized: true,
-    },
-};
-
-export const NavigationBannerImage: Story = {
-    args: {
-        src: 'https://www.nuskin.com/content/dam/global/library/feb2020/Navigation-images-Skin-Carev2.jpg',
-        width: 340,
-        height: 610,
-        alt: 'lumispa-combo',
-        unoptimized: true,
-    },
-};
-
-export const AwardImage: Story = {
-    args: {
-        src: 'https://media.nuskin.com/m/5a9a99eccfde58c6/webimage-winner-global-makeup-awards-2022.png',
-        width: 130,
-        height: 130,
-        alt: 'global-makeup-award',
-        unoptimized: true,
-    },
-};

package/src/common/image/NsNextImage.tsx

@@ -1,11 +0,0 @@
-import { ReactElement } from 'react';
-
-import Image from 'next/image';
-
-import { NsNextImageProps } from './types';
-
-const NsNextImage = ({ src, width, height, alt, fill, priority, ...props }: NsNextImageProps): ReactElement => {
-    return <Image src={src} width={width} height={height} alt={alt} fill={fill} priority={priority} {...props} />;
-};
-
-export default NsNextImage;