@nuskin/foundation-ui-components 1.9.1 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.9.1",
+    "version": "1.9.2",
     "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/card/NsLargeCard.tsx

@@ -7,7 +7,7 @@ type NsLargeCardProps = {
     subtitle?: string;
     intro: string;
     icon?: NsIconNameType;
-    buttonVariant: 'text' | 'outlined' | 'contained';
+    buttonVariant?: 'text' | 'outlined' | 'contained';
     backgroundImageUrl: string;
     backgroundImageAlt: string;
     cardLink: { href: string; title: string };

package/src/common/card/NsMediumCard.tsx

@@ -9,7 +9,7 @@ type NsMediumCardProps = {
     icon?: NsIconNameType;
     backgroundImageUrl: string;
     backgroundImageAlt: string;
-    buttonVariant: 'text' | 'outlined' | 'contained';
+    buttonVariant?: 'text' | 'outlined' | 'contained';
     cardLink: { href: string; title: string };
 };
 

package/src/common/carousal/CarousalControl.tsx

@@ -5,6 +5,7 @@ import { NsTypography, NsLink, NsIcon } from '..';
 interface CarousalControlProps {
     next(): void;
     prev(): void;
+    viewAllLabel: string;
     viewAllUrl: string;
 }
 /*
@@ -14,21 +15,24 @@ const Wrapper = styled.div`
     display: flex;
     justify-content: flex-end;
     padding: 0 30px;
-    margin: 10px 20px;
+    margin: 30px 20px;
 `;
 const InnerWrapper = styled.div`
     display: flex;
-    width: 220px;
     gap: 20px;
     align-items: center;
 `;
-const CarousalControl = ({ next, prev, viewAllUrl }: CarousalControlProps) => {
+const CarousalControl = ({ next, prev, viewAllUrl, viewAllLabel }: CarousalControlProps) => {
     return (
         <Wrapper>
             <InnerWrapper>
-                <NsLink href={viewAllUrl}>
-                    <NsTypography variant={'h5'}>View All</NsTypography>
-                </NsLink>
+                {viewAllUrl ? (
+                    <NsLink href={viewAllUrl} underlineOnHover={false}>
+                        <NsTypography decoration="underline" variant={'h5'}>
+                            {viewAllLabel}
+                        </NsTypography>
+                    </NsLink>
+                ) : null}
                 <IconWrapper onClick={prev} className="carousal-prev-button">
                     <NsIcon name="arrowLeft" />
                 </IconWrapper>

package/src/common/carousal/NsCarousal.tsx

@@ -21,11 +21,20 @@ const SlickContainer = styled(Box)(() => {
 interface CarousalProps<T = any> {
     entries: T[];
     renderEntry(entry: T, index: number): ReactNode;
-    allEntryLink: string;
+    allEntryLink?: string;
+    allEntryLabel?: string;
     settings: any;
+    showControlButtons?: boolean;
 }
 
-export default function NsCarousal({ entries, renderEntry, allEntryLink, settings }: CarousalProps) {
+export default function NsCarousal({
+    entries,
+    renderEntry,
+    allEntryLink = '',
+    settings,
+    allEntryLabel = 'View All',
+    showControlButtons = true,
+}: CarousalProps) {
     const sliderRef = useRef();
     const prev = useCallback(() => {
         if (sliderRef.current) {
@@ -41,9 +50,12 @@ export default function NsCarousal({ entries, renderEntry, allEntryLink, setting
     }, [sliderRef]);
     return (
         <SlickContainer className="brand-carousal">
-            <CarousalControl prev={prev} next={next} viewAllUrl={allEntryLink} />
+            {showControlButtons ? (
+                <CarousalControl prev={prev} next={next} viewAllUrl={allEntryLink} viewAllLabel={allEntryLabel} />
+            ) : null}
             <Slider {...{ ...defaultCarousalSettings, ...settings }} ref={sliderRef as any}>
                 {entries.map((entry, index) => {
+                    
                     return renderEntry(entry, index);
                 })}
             </Slider>

package/src/common/carousal/stories/NSCarousal.stories.tsx

@@ -12,6 +12,13 @@ export default {
     title: 'Components/Containers/NsCarousal/Brand',
     component: NsCarousal,
     argTypes: {},
+    decorators: [
+        (Story) => (
+            <div style={{ width: 800 }}>
+                <Story />
+            </div>
+        ),
+    ],
 } as MetaStory;
 
 export const Default: Story = {