@nuskin/foundation-ui-components 1.9.2 → 1.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.9.2",
+    "version": "1.9.4",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -42,12 +42,12 @@
     "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
-        "@mui/icons-material": "^5.14.14",
-        "@mui/material": "5.14.14",
-        "@mui/utils": "^5.14.14",
+        "@mui/icons-material": "^5.14.16",
+        "@mui/material": "5.14.16",
+        "@mui/utils": "^5.14.16",
         "@next/font": "13.5.6",
         "@nuskin/foundation-theme": "1.2.0",
-        "@types/react": "^18.2.30",
+        "@types/react": "^18.2.34",
         "@types/react-dom": "^18.2.14",
         "cliui": "^8.0.1",
         "framer-motion": "^10.16.4",
@@ -79,7 +79,7 @@
         "@testing-library/jest-dom": "^6.1.4",
         "@testing-library/react": "^14.0.0",
         "@testing-library/react-hooks": "^8.0.1",
-        "@types/jest": "^29.5.6",
+        "@types/jest": "^29.5.7",
         "@types/lodash": "^4.14.200",
         "@types/node": "^20.8.7",
         "@types/ramda": "^0.29.7",

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

@@ -2,9 +2,9 @@ import { render, screen, waitFor } from '@/test-utils/index';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { AutocompleteMockList } from './mock/MockData';
-import { OptionUiComponent } from './mock/MockUI';
-import NsAutocomplete from './NsAutocomplete';
+import { AutocompleteMockList } from '../autocomplete/mock/MockData';
+import { OptionUiComponent } from '../autocomplete/mock/MockUI';
+import NsAutocomplete from '../autocomplete/NsAutocomplete';
 
 const commonProps = {
     value: '',
@@ -14,6 +14,7 @@ const commonProps = {
     options: AutocompleteMockList,
     placeholder: 'autocomplete-input',
     OptionsUI: OptionUiComponent,
+    // renderOption: (props: any) => <li {...props}>{props.value}</li>,
 };
 describe('CustomAutocomplete', () => {
     it('1. should render autocomplete component', () => {
@@ -47,7 +48,7 @@ describe('CustomAutocomplete', () => {
     it('4. selects an option when clicking on it', async () => {
         const onChangeMock = jest.fn();
         render(<NsAutocomplete {...commonProps} onChange={onChangeMock} />);
-        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
+        const autocompleteInput = screen.getByPlaceholderText(commonProps.placeholder);
         await userEvent.type(autocompleteInput, 'GS Facial');
         await waitFor(async () => {
             const optionLi = screen.getByText('GS Facial Spa');
@@ -57,39 +58,32 @@ describe('CustomAutocomplete', () => {
     }, 40000);
 
     it('5. should load more options when clicking load more button', async () => {
-        render(
-            <NsAutocomplete
-                seeMore={{
-                    text: '',
-                    show: true,
-                    onSeeMore: () => ({}),
-                }}
-                {...commonProps}
-            />
-        );
-        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
+        const seeMore = {
+            text: 'See More',
+            show: true,
+            onSeeMore: jest.fn(),
+        };
+        render(<NsAutocomplete seeMore={seeMore} {...commonProps} />);
+        const autocompleteInput = screen.getByPlaceholderText(commonProps.placeholder);
         await userEvent.type(autocompleteInput, 'GS Facial');
         await waitFor(async () => {
-            const loadMoreButton = screen.getByTestId('autocomplete-loadmore-id');
+            const loadMoreButton = screen.getByText(seeMore.text);
             await userEvent.click(loadMoreButton);
         });
+        expect(seeMore.onSeeMore).toHaveBeenCalled();
     }, 40000);
 
     it('6. should clear options when clicking clear button', async () => {
-        render(
-            <NsAutocomplete
-                clear={{
-                    text: '',
-                    show: true,
-                    onClear: () => ({}),
-                }}
-                {...commonProps}
-            />
-        );
-        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
+        const clear = {
+            text: 'Clear All',
+            show: true,
+            onClear: jest.fn(),
+        };
+        render(<NsAutocomplete clear={clear} {...commonProps} />);
+        const autocompleteInput = screen.getByPlaceholderText(commonProps.placeholder);
         await userEvent.type(autocompleteInput, 'GS Facial');
         await waitFor(async () => {
-            const clearButton = screen.getByTestId('autocomplete-clear-id');
+            const clearButton = screen.getByText(clear.text);
             await userEvent.click(clearButton);
         });
     }, 40000);

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

@@ -1,18 +1,16 @@
-import { styled } from '@nuskin/foundation-theme';
-
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { NsInputField } from '../input';
+const { getGenomeColor } = ColorUtils;
 
-// TODO: why is .muiautocomplete-popupindicator added?
-// TODO: ${({ theme }) => getGenomeColor(theme, 'N100')}; use forceMode light
 export const StyledTextField = styled(NsInputField)`
     .MuiAutocomplete-inputRoot {
         padding-right: 10px !important;
     }
-    .muiautocomplete-popupindicator {
-        display: none;
-    }
     .styled-text-field.MuiOutlinedInput-root input#custom_autocomplete_dropdown::placeholder {
         opacity: 1;
-        color: #252525;
+        color: ${({ theme }) => getGenomeColor(theme, 'N100', 'light')};
     }
 `;
+// .muiautocomplete-popupindicator {
+//     display: none;
+// }

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,7 +1,8 @@
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
 
-import { AutoCompleteButton } from './helper/AutoCompleteButton';
+import { LineLoader } from './helper/LineLoader';
+import { RecentClearAll } from './helper/RecentClearAll';
 import { renderGroupBy, renderGroupName, renderOptionLabel } from './helper/renderGroupName';
 import { SeeMoreButton } from './helper/SeeMoreButton';
 import { StyledTextField } from './NsAutocomplete.styled';
@@ -48,11 +49,14 @@ const NsAutocomplete = ({
         />
     );
 
-    const renderOption = (props: ComponentBoxProps, option: OptionsProps) => (
-        <li {...props} key={props.id}>
-            {OptionsUI ? <OptionsUI {...props} option={option} /> : null}
-        </li>
-    );
+    const renderOption = (props: ComponentBoxProps, option: OptionsProps) =>
+        OptionsUI ? (
+            <OptionsUI {...props} option={option} key={props.id} />
+        ) : (
+            <li {...props} key={props.id}>
+                {option.value}
+            </li>
+        );
 
     const renderListBoxComponent = ({ children, ...rest }: ComponentBoxProps) => {
         return (
@@ -64,11 +68,12 @@ const NsAutocomplete = ({
                 className={rest.className}
                 ref={listboxRef}
             >
-                <AutoCompleteButton
+                <RecentClearAll
                     show={clear?.show ?? false}
                     text={clear?.text ?? 'Clear All'}
                     onClick={clear?.onClear ?? noop}
                     testId="autocomplete-clear-id"
+                    recentSearchText={clear?.recentSearchText ?? 'Your Recent Searches'}
                 />
                 {children}
                 <SeeMoreButton
@@ -82,10 +87,11 @@ const NsAutocomplete = ({
             </ul>
         );
     };
-
     return (
         <>
+            <LineLoader show={loading ?? false} />
             <Autocomplete
+                openOnFocus
                 id={id}
                 disablePortal
                 className={className}

package/src/common/autocomplete/helper/LineLoader.tsx

@@ -0,0 +1,37 @@
+import { styled } from '@nuskin/foundation-theme';
+
+const StyledLine = styled.div`
+    position: fixed;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: #fff;
+    z-index: 99999;
+    overflow: hidden;
+    .dot {
+        position: absolute;
+        height: 100%;
+        width: 150px;
+        background: #f00;
+        animation: dotleft 1s cubic-bezier(0.72, 0.03, 0.75, 0.54) infinite;
+    }
+    @keyframes dotleft {
+        0% {
+            left: 0%;
+            width: 150px;
+        }
+        100% {
+            left: 100%;
+            width: 900px;
+        }
+    }
+`;
+
+export const LineLoader = ({ show }: { show: boolean }) => {
+    return (
+        <StyledLine className={`${show ? '' : 'hidden '} line`}>
+            <div className="dot">{show}</div>
+        </StyledLine>
+    );
+};

package/src/common/autocomplete/helper/RecentClearAll.tsx

@@ -0,0 +1,36 @@
+import { styled } from '@nuskin/foundation-theme';
+import { NsTypography } from '../../typography';
+
+type AutoCompleteButtonProps = {
+    text: string;
+    show: boolean;
+    onClick(): void;
+    testId?: string;
+    recentSearchText: string;
+};
+export const StyledClear = styled(NsTypography)`
+    :hover {
+        opacity: 0.5;
+    }
+`;
+export const RecentClearAll = (props: AutoCompleteButtonProps) => {
+    const { show, onClick, text, testId, recentSearchText } = props;
+    if (!show) {
+        return null;
+    }
+    return (
+        <li className="justify-between flex p-3" onClick={onClick}>
+            <NsTypography data-testid={testId} variant="body-m" weight="bold">
+                {recentSearchText}
+            </NsTypography>
+            <StyledClear
+                data-testid={testId}
+                variant="body-m"
+                weight="bold"
+                className="cursor-pointer hover:opacity-40"
+            >
+                {text}
+            </StyledClear>
+        </li>
+    );
+};

package/src/common/autocomplete/helper/SeeMoreButton.tsx

@@ -1,7 +1,20 @@
 import { Dispatch, MutableRefObject, SetStateAction, useCallback } from 'react';
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
 
-import { OptionsProps } from '../..';
-import { AutoCompleteButton } from './AutoCompleteButton';
+import { NsTypography, OptionsProps } from '../..';
+const { getGenomeColor } = ColorUtils;
+export const ListStyled = styled.div`
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    padding: 4px 12px;
+    cursor: pointer;
+    &:hover {
+        background: ${({ theme }) => getGenomeColor(theme, 'A10')};
+    }
+`;
 
 type SeeMoreButtonProps = {
     text?: string;
@@ -30,9 +43,23 @@ export const SeeMoreButton = (props: SeeMoreButtonProps) => {
                 setScrollTopPosition(lastScrollPosition);
             }
         }
-        if (onSeeMore && typeof onSeeMore === 'function') {
+        if (typeof onSeeMore === 'function') {
             onSeeMore();
         }
     }, [listboxRef, onSeeMore, options?.length, setScrollTopPosition]);
-    return <AutoCompleteButton show={show} text={text} onClick={handleSeeMore} testId="autocomplete-loadmore-id" />;
+    if (!show) {
+        return null;
+    }
+    return (
+        <ListStyled className="text-left p-3" onClick={handleSeeMore}>
+            <NsTypography
+                data-testid="autocomplete-loadmore-id"
+                variant="body-m"
+                decoration="underline"
+                className="cursor-pointer"
+            >
+                {text}
+            </NsTypography>
+        </ListStyled>
+    );
 };

package/src/common/autocomplete/helper/index.ts

@@ -0,0 +1,4 @@
+export { LineLoader } from './LineLoader';
+export { RecentClearAll } from './RecentClearAll';
+export * from './renderGroupName';
+export {} from './SeeMoreButton';

package/src/common/autocomplete/helper/renderGroupName.tsx

@@ -1,5 +1,4 @@
 import { AutocompleteRenderGroupParams } from '@mui/material';
-
 import { NsTypography, OptionsProps } from '../..';
 
 export const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams) => (

package/src/common/autocomplete/mock/MockData.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import { OptionsProps } from '../types';
 
 export const AutocompleteMockList: OptionsProps[] = [
@@ -6,19 +5,19 @@ export const AutocompleteMockList: OptionsProps[] = [
         id: '1',
         value: 'GS Facial Gels 2pk Subscription',
         group: 'Popular Searches',
-        image: 'https://www.nuskin.com/content/products/86/99/01/86990168/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        image: 'https://www.nuskin.com/content/products/86/99/01/86990168/_jcr_content/fullImage.img.160.160.png.64.64.png'
     },
     {
         id: '2',
         value: 'GS Facial',
         group: 'Popular Searches',
-        image: 'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        image: 'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png'
     },
     {
         id: '3',
         value: 'GS Facial Spa',
         group: 'Popular Searches',
-        image: 'https://www.nuskin.com/content/products/01/10/12/01101251/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        image: 'https://www.nuskin.com/content/products/01/10/12/01101251/_jcr_content/fullImage.img.160.160.png.64.64.png'
     },
     {
         id: '4',
@@ -26,7 +25,7 @@ export const AutocompleteMockList: OptionsProps[] = [
         group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/01/55/00/01550013/_jcr_content/fullImage.img.160.160.png.64.64.png',
         icon: 'cart',
-        groupBgColor: '#000',
+        groupBgColor: '#000'
     },
     {
         id: '5',
@@ -34,7 +33,7 @@ export const AutocompleteMockList: OptionsProps[] = [
         group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/86/99/01/86990100/_jcr_content/fullImage.img.160.160.png.64.64.png',
         icon: 'cart',
-        groupBgColor: '#000',
+        groupBgColor: '#000'
     },
     {
         id: '6',
@@ -42,26 +41,26 @@ export const AutocompleteMockList: OptionsProps[] = [
         group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/01/00/16/01001647/jcr:content/fullImage.img.160.160.png/1611763135883-cache.png.64.64.png',
         icon: 'cart',
-        groupBgColor: '#000',
+        groupBgColor: '#000'
     },
 
     {
         id: '7',
         value: 'Rejuvenating Cream',
         group: 'Popular Searches',
-        image: 'https://www.nuskin.com/content/products/86/99/01/86990168/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        image: 'https://www.nuskin.com/content/products/86/99/01/86990168/_jcr_content/fullImage.img.160.160.png.64.64.png'
     },
     {
         id: '8',
         value: 'Epoch® Firewalker® Foot Cream',
         group: 'Popular Searches',
-        image: 'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        image: 'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png'
     },
     {
         id: '9',
         value: 'Tri-Phasic White® Night Cream',
         group: 'Popular Searches',
-        image: 'https://www.nuskin.com/content/products/01/10/12/01101251/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        image: 'https://www.nuskin.com/content/products/01/10/12/01101251/_jcr_content/fullImage.img.160.160.png.64.64.png'
     },
     {
         id: '10',
@@ -69,7 +68,7 @@ export const AutocompleteMockList: OptionsProps[] = [
         group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/01/55/00/01550013/_jcr_content/fullImage.img.160.160.png.64.64.png',
         icon: 'cart',
-        groupBgColor: '#000',
+        groupBgColor: '#000'
     },
     {
         id: '11',
@@ -77,7 +76,7 @@ export const AutocompleteMockList: OptionsProps[] = [
         group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/86/99/01/86990100/_jcr_content/fullImage.img.160.160.png.64.64.png',
         icon: 'cart',
-        groupBgColor: '#000',
+        groupBgColor: '#000'
     },
     {
         id: '12',
@@ -85,6 +84,6 @@ export const AutocompleteMockList: OptionsProps[] = [
         group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/01/00/16/01001647/jcr:content/fullImage.img.160.160.png/1611763135883-cache.png.64.64.png',
         icon: 'cart',
-        groupBgColor: '#000',
-    },
+        groupBgColor: '#000'
+    }
 ];

package/src/common/autocomplete/mock/MockUI.tsx

@@ -1,12 +1,11 @@
 /* eslint-disable @next/next/no-img-element */
+import { ListUiProps, NsIcon, NsTypography } from '../..';
 import { ListStyled } from './Mock.styled';
-import { NsTypography } from '../../typography';
-import { NsIcon } from '../../icon';
-import { ListUiProps } from '../types';
 
-const OptionUiComponent = ({ option }: ListUiProps) => {
+const OptionUiComponent = (props: ListUiProps) => {
+    const { option } = props;
     return (
-        <ListStyled>
+        <ListStyled {...props}>
             <div className="item-description" role="link" tabIndex={0}>
                 <NsTypography aria-label="Nu Skin Tumbler" variant="body-m" colorOverride="#63666A">
                     <img src={option.image} alt="No-image" />

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

@@ -32,6 +32,7 @@ export type NsAutocompleteProps = {
         text?: string;
         show?: boolean; //default to false
         onClear: () => void;
+        recentSearchText?: string;
     };
     seeMore?: {
         text?: string;

package/src/common/card/CardButton.tsx

@@ -0,0 +1,31 @@
+import { NsButton, NsIcon } from '..';
+import { NsCardButton } from './types';
+
+const CardButton = ({
+    url,
+    endIcon,
+    buttonText,
+    showButton = true,
+    buttonVariant = 'outlined',
+    buttonColor = 'primary',
+    fullWidth = false,
+}: NsCardButton) => {
+    if (showButton && url) {
+        return (
+            <div className="cta">
+                <NsButton
+                    href={url}
+                    color={buttonColor}
+                    variant={buttonVariant}
+                    fullWidth={fullWidth}
+                    endIcon={endIcon ? <NsIcon name={endIcon} color={buttonColor} /> : null}
+                >
+                    {buttonText}
+                </NsButton>
+            </div>
+        );
+    }
+    return null;
+};
+
+export default CardButton;

package/src/common/card/NsAwardCard.tsx

@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { NsImage } from '..';
+import { NsImage } from '../';
 
 type NsAwardCardProps = {
     title: string;
@@ -8,6 +8,7 @@ type NsAwardCardProps = {
     mediaOutlet: string;
     backgroundImageUrl: string;
     backgroundImageAlt: string;
+    className?: string;
 };
 
 const CardContainer = styled(Box)(() => {
@@ -15,17 +16,18 @@ const CardContainer = styled(Box)(() => {
         display: 'flex',
         flexDirection: 'column',
         position: 'relative',
-        backgroundColor: '#fff',
         alignItems: 'center',
+        width: '160px',
+        height: 'auto',
         '.image': {
-            width: '150px',
+            width: '160px',
             height: 'auto',
             objectFit: 'cover',
-            backgroundColor: 'red',
         },
         '.content': {
             display: 'flex',
             flexDirection: 'column',
+            textAlign: 'center',
             alignItems: 'center',
         },
         '.title': {
@@ -57,9 +59,10 @@ export default function NsAwardCard({
     mediaOutlet,
     backgroundImageUrl,
     backgroundImageAlt,
+    className,
 }: NsAwardCardProps) {
     return (
-        <CardContainer role="award-card" component="div" data-testid="award-card">
+        <CardContainer className={className} role="award-card" component="div" data-testid="award-card">
             <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
             <div className="content">
                 <article className="title">{title}</article>

package/src/common/card/NsBrandCard.tsx

@@ -1,20 +1,20 @@
-import { ShoppingCart } from '@mui/icons-material';
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
 import { NsTypography } from '../';
 import NsBrandWrapper from './NsBrandWrapper';
 import NsBrandLogo from './NsBrandLogo';
 import NsBgCard from './NsBgCard';
-import NsButton from '../button/NsButton';
 import cardSizes from './cardSizes';
+import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsBrandCardProps = {
     title?: string;
     brandImageUrl: string;
     backgroundImageUrl: string;
     size?: 'small' | 'large';
-    button?: boolean;
-    onClick?: () => void;
+    button?: NsCardButton;
+    className?: string;
 };
 
 const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
@@ -49,6 +49,7 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
         },
         '.cta': {
             marginTop: '15px',
+            width: '100%',
         },
         '.image': {
             width,
@@ -64,10 +65,10 @@ export default function NsBrandCard({
     backgroundImageUrl,
     button,
     size,
-    onClick,
+    className,
 }: NsBrandCardProps) {
     return (
-        <CardContainer role="brand-card" component="div" data-testid="brand-card" size={size} onClick={onClick}>
+        <CardContainer className={className} role="brand-card" component="div" data-testid="brand-card" size={size}>
             <NsBgCard backgroundImageUrl={backgroundImageUrl} className="image">
                 <NsBrandWrapper>
                     <NsBrandLogo component="img" image={brandImageUrl} />
@@ -78,17 +79,7 @@ export default function NsBrandCard({
                     {title}
                 </NsTypography>
             ) : null}
-            {button ? (
-                <NsButton
-                    className="cta"
-                    darkModeEnabled={false}
-                    variant="outlined"
-                    fullWidth={true}
-                    endIcon={<ShoppingCart />}
-                >
-                    Add to Cart
-                </NsButton>
-            ) : null}
+            {button ? <CardButton {...button} /> : null}
         </CardContainer>
     );
 }

package/src/common/card/NsCheckoutCard.tsx

@@ -6,8 +6,9 @@ import { useState } from 'react';
 type NsCheckoutCardProps = {
     icon: NsIconNameType;
     title: string;
-    address: string;
-    onClick: () => void;
+    linkText: string;
+    url: string;
+    className?: string;
 };
 
 const CardContainer = styled(Box)(() => {
@@ -58,14 +59,14 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-export default function NsCheckoutCard({ title, address, icon, onClick }: NsCheckoutCardProps) {
+export default function NsCheckoutCard({ title, icon, linkText, url, className }: NsCheckoutCardProps) {
     const [dropdownIcon, setDropdownIcon] = useState(false);
     const handleClick = () => {
         setDropdownIcon(!dropdownIcon);
     };
 
     return (
-        <CardContainer role="checkout-card" component="div" data-testid="checkout-card" onClick={onClick}>
+        <CardContainer className={className} role="checkout-card" component="div" data-testid="checkout-card">
             <div className="left-bar"></div>
             <div className="content">
                 <span>
@@ -73,9 +74,9 @@ export default function NsCheckoutCard({ title, address, icon, onClick }: NsChec
                 </span>
                 <div className="text-content">
                     <article className="title">{title}</article>
-                    <article className="address">{address}</article>
-                    <NsLink className="action-link" href={''}>
-                        CHANGE
+                    <article className="address">Address</article>
+                    <NsLink className="action-link" href={url}>
+                        {linkText}
                     </NsLink>
                 </div>
                 <span className="icon-right">