@nuskin/foundation-ui-components 2.2.1 → 3.0.0-fix-carousel.2

package/README.md

@@ -8,10 +8,6 @@
 
 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.
 
-## Releases
-
-### [CHANGELOG](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/-/blob/master/CHANGELOG.md)
-
 ## Installation Guide
 
 To integrate the NuSkin React Components Library into your NuSkin Pages project, follow these steps:

package/dist/index.d.mts

@@ -681,19 +681,36 @@ type NsAwardCardProps = {
 };
 declare function NsAwardCard({ title, awardName, mediaOutlet, backgroundImageDetail, className, fontColor, }: NsAwardCardProps): ReactElement;
 
-interface CarousalProps<T = any> {
+type NsCarouselProps<T = any> = {
     entries: T[];
+    // eslint-disable-next-line no-unused-vars
     renderEntry(entry: T, index: number): ReactNode;
     allEntryLink?: string;
     allEntryLabel?: string;
     settings: any;
     showControlButtons?: boolean;
-}
-declare function NsCarousal({ entries, renderEntry, allEntryLink, settings, allEntryLabel, showControlButtons, }: CarousalProps): ReactElement;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+};
+
+type NsScrollingCarouselProps<T = any> = {
+    slides: T;
+    // eslint-disable-next-line no-unused-vars
+    renderSlide(slide: T, index: number): ReactNode;
+    /* time it takes while scrolling */
+    scrollSeconds: number;
+    /* time for which slide stays still before scrolling */
+    stillSeconds: number;
+    settings: any;
+    /* value in number, specifying how much the dots should be from bottom of slides container */
+    dotsBottomPixel?: number;
+} & AdditionalProps;
 
-declare const NsScrollingCarousal: ({ slides, scrollSeconds, stillSeconds, renderSlide, settings, dotsBottomPixel, additionalProps, }: NsScrollingCarousalProps) => ReactElement;
+declare function NsCarousel<T = any>({ entries, renderEntry, allEntryLink, settings, allEntryLabel, showControlButtons, ariaLabel, ariaLabelledBy, }: NsCarouselProps<T>): ReactElement;
 
-declare const settings: {
+declare const NsScrollingCarousel: ({ slides, scrollSeconds, stillSeconds, renderSlide, settings, dotsBottomPixel, additionalProps, }: NsScrollingCarouselProps) => ReactElement;
+
+declare const defaultCarouselSettings: {
     dots: boolean;
     infinite: boolean;
     speed: number;
@@ -730,7 +747,7 @@ declare const settings: {
     })[];
 };
 
-interface CarousalControlProps {
+interface CarouselControlProps {
     next(): void;
     prev(): void;
     viewAllLabel: string;
@@ -738,28 +755,7 @@ interface CarousalControlProps {
     prevAriaLabel?: string;
     nextAriaLabel?: string;
 }
-declare const CarousalControl: ({ next, prev, viewAllUrl, viewAllLabel, prevAriaLabel, nextAriaLabel, }: CarousalControlProps) => ReactElement;
-
-type NsCarousalProps<T = any> = {
-    entries: T[];
-    // eslint-disable-next-line no-unused-vars
-    renderEntry(entry: T, index: number): ReactNode;
-    allEntryLink: string;
-    settings: any;
-};
-
-type NsScrollingCarousalProps<T = any> = {
-    slides: T;
-    // eslint-disable-next-line no-unused-vars
-    renderSlide(slide: T, index: number): ReactNode;
-    /* time it takes while scrolling */
-    scrollSeconds: number;
-    /* time for which slide stays still before scrolling */
-    stillSeconds: number;
-    settings: any;
-    /* value in number, specifying how much the dots should be from bottom of slides container */
-    dotsBottomPixel?: number;
-} & AdditionalProps;
+declare const CarouselControl: ({ next, prev, viewAllUrl, viewAllLabel, prevAriaLabel, nextAriaLabel, }: CarouselControlProps) => ReactElement;
 
 type NsCartIconProps = {
     itemCount?: number;
@@ -1259,4 +1255,4 @@ type NsVideoProps = {
 
 declare const NsVideo: (props: PropsWithChildren<NsVideoProps>) => ReactElement;
 
-export { type AccordionContentType, AccordionContentTypeObject, type AccordionItem, AccordionVariant, type AccordionVariantType, type AdditionalProps, type BynderImageDataType, Check, type ComponentBoxProps, type CslpTag, type DarkModeEnabledOption, type DropdownOptionProps, type DropdownProps, GlobalFontInter, type HtmlTagVariant, HtmlTagVariantMapping, IconWrapper, type ItemProps, type LabelValueType, LineLoader, type ListUiProps, type NavTabs, NsAccordion, NsAccordionHeader, type NsAccordionHeaderProps, NsAccordionItem, type NsAccordionItemProps, type NsAccordionProps, NsAlert, type NsAlertProps, NsAuthDropdown, type NsAuthDropdownProps, NsAutocomplete, type NsAutocompleteProps, NsAwardCard, NsBanner, type NsBannerProps, NsBgCard, NsBrandCard, NsBrandComponent, type NsBrandComponentProps, NsBrandLogo, NsBrandWrapper, NsBreadcrumb, type NsBreadcrumbProps, NsButton, type NsButtonProps, type NsCardButton, NsCarousal, type NsCarousalProps, CarousalControl as NsCarouselControl, NsCartIcon, type NsCartIconProps, NsCheckbox, type NsCheckboxProps, NsCheckoutCard, NsCollapse, type NsCollapseProps, NsColumnControl, type NsColumnControlProps, settings as NsDefaultCarousalSettings, NsDropdown, NsDropdownOption, NsEmailSimple, type NsEmailSimpleProps, type NsFfgCardProps, NsFlag, type NsFlagProps, type NsFlagSize, NsFlexColumns, NsGridColumns, NsHeroCardLevel1, NsHeroCardLevel2, NsIcon, type NsIconNameType, type NsIconProps, type NsIconSizeType, NsIconText, IconVariants as NsIconVariants, NsImage, NsInputField, type NsInputFieldProps, NsLabel, type NsLabelProps, NsLargeCard, NsLink, type NsLinkProps, NsMediumCard, NsModal, type NsModalProps, type NsModalVariant, NsNavProductCard, type NsNavProductCardProps, NsNavTabComponent as NsNavTab, type NsNavTabComponentProps, NsPost, NsProgress, type NsProgressProps, NsRadioGroup, type NsRadioGroupProps, NsScrollingCarousal, type NsScrollingCarousalProps, NsSelect, NsSelectOption, NsSmallFullCard, NsSpinner, type NsSpinnerProps, NsTable, type NsTableProps, NsTextStrip, type NsTextStripProps, NsToastProvider, NsToggleSection, type NsToggleSectionProps, NsTypography, type NsTypographyProps, NsVideo, type NsVideoProps, NsXLargeCard, type OptionsProps, type RenderSelectOptionArgType, type SelectOptionProps, type SelectProps, Show, type Themed, type ToastOptions, type Variants, getBasicDATWidthHeight, iconSize, useAccordionMap, useToast, useWindowSize };
+export { type AccordionContentType, AccordionContentTypeObject, type AccordionItem, AccordionVariant, type AccordionVariantType, type AdditionalProps, type BynderImageDataType, Check, type ComponentBoxProps, type CslpTag, type DarkModeEnabledOption, type DropdownOptionProps, type DropdownProps, GlobalFontInter, type HtmlTagVariant, HtmlTagVariantMapping, IconWrapper, type ItemProps, type LabelValueType, LineLoader, type ListUiProps, type NavTabs, NsAccordion, NsAccordionHeader, type NsAccordionHeaderProps, NsAccordionItem, type NsAccordionItemProps, type NsAccordionProps, NsAlert, type NsAlertProps, NsAuthDropdown, type NsAuthDropdownProps, NsAutocomplete, type NsAutocompleteProps, NsAwardCard, NsBanner, type NsBannerProps, NsBgCard, NsBrandCard, NsBrandComponent, type NsBrandComponentProps, NsBrandLogo, NsBrandWrapper, NsBreadcrumb, type NsBreadcrumbProps, NsButton, type NsButtonProps, type NsCardButton, NsCarousel, CarouselControl as NsCarouselControl, type NsCarouselProps, NsCartIcon, type NsCartIconProps, NsCheckbox, type NsCheckboxProps, NsCheckoutCard, NsCollapse, type NsCollapseProps, NsColumnControl, type NsColumnControlProps, defaultCarouselSettings as NsDefaultCarouselSettings, NsDropdown, NsDropdownOption, NsEmailSimple, type NsEmailSimpleProps, type NsFfgCardProps, NsFlag, type NsFlagProps, type NsFlagSize, NsFlexColumns, NsGridColumns, NsHeroCardLevel1, NsHeroCardLevel2, NsIcon, type NsIconNameType, type NsIconProps, type NsIconSizeType, NsIconText, IconVariants as NsIconVariants, NsImage, NsInputField, type NsInputFieldProps, NsLabel, type NsLabelProps, NsLargeCard, NsLink, type NsLinkProps, NsMediumCard, NsModal, type NsModalProps, type NsModalVariant, NsNavProductCard, type NsNavProductCardProps, NsNavTabComponent as NsNavTab, type NsNavTabComponentProps, NsPost, NsProgress, type NsProgressProps, NsRadioGroup, type NsRadioGroupProps, NsScrollingCarousel, type NsScrollingCarouselProps, NsSelect, NsSelectOption, NsSmallFullCard, NsSpinner, type NsSpinnerProps, NsTable, type NsTableProps, NsTextStrip, type NsTextStripProps, NsToastProvider, NsToggleSection, type NsToggleSectionProps, NsTypography, type NsTypographyProps, NsVideo, type NsVideoProps, NsXLargeCard, type OptionsProps, type RenderSelectOptionArgType, type SelectOptionProps, type SelectProps, Show, type Themed, type ToastOptions, type Variants, getBasicDATWidthHeight, iconSize, useAccordionMap, useToast, useWindowSize };

package/dist/index.d.ts

@@ -681,19 +681,36 @@ type NsAwardCardProps = {
 };
 declare function NsAwardCard({ title, awardName, mediaOutlet, backgroundImageDetail, className, fontColor, }: NsAwardCardProps): ReactElement;
 
-interface CarousalProps<T = any> {
+type NsCarouselProps<T = any> = {
     entries: T[];
+    // eslint-disable-next-line no-unused-vars
     renderEntry(entry: T, index: number): ReactNode;
     allEntryLink?: string;
     allEntryLabel?: string;
     settings: any;
     showControlButtons?: boolean;
-}
-declare function NsCarousal({ entries, renderEntry, allEntryLink, settings, allEntryLabel, showControlButtons, }: CarousalProps): ReactElement;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+};
+
+type NsScrollingCarouselProps<T = any> = {
+    slides: T;
+    // eslint-disable-next-line no-unused-vars
+    renderSlide(slide: T, index: number): ReactNode;
+    /* time it takes while scrolling */
+    scrollSeconds: number;
+    /* time for which slide stays still before scrolling */
+    stillSeconds: number;
+    settings: any;
+    /* value in number, specifying how much the dots should be from bottom of slides container */
+    dotsBottomPixel?: number;
+} & AdditionalProps;
 
-declare const NsScrollingCarousal: ({ slides, scrollSeconds, stillSeconds, renderSlide, settings, dotsBottomPixel, additionalProps, }: NsScrollingCarousalProps) => ReactElement;
+declare function NsCarousel<T = any>({ entries, renderEntry, allEntryLink, settings, allEntryLabel, showControlButtons, ariaLabel, ariaLabelledBy, }: NsCarouselProps<T>): ReactElement;
 
-declare const settings: {
+declare const NsScrollingCarousel: ({ slides, scrollSeconds, stillSeconds, renderSlide, settings, dotsBottomPixel, additionalProps, }: NsScrollingCarouselProps) => ReactElement;
+
+declare const defaultCarouselSettings: {
     dots: boolean;
     infinite: boolean;
     speed: number;
@@ -730,7 +747,7 @@ declare const settings: {
     })[];
 };
 
-interface CarousalControlProps {
+interface CarouselControlProps {
     next(): void;
     prev(): void;
     viewAllLabel: string;
@@ -738,28 +755,7 @@ interface CarousalControlProps {
     prevAriaLabel?: string;
     nextAriaLabel?: string;
 }
-declare const CarousalControl: ({ next, prev, viewAllUrl, viewAllLabel, prevAriaLabel, nextAriaLabel, }: CarousalControlProps) => ReactElement;
-
-type NsCarousalProps<T = any> = {
-    entries: T[];
-    // eslint-disable-next-line no-unused-vars
-    renderEntry(entry: T, index: number): ReactNode;
-    allEntryLink: string;
-    settings: any;
-};
-
-type NsScrollingCarousalProps<T = any> = {
-    slides: T;
-    // eslint-disable-next-line no-unused-vars
-    renderSlide(slide: T, index: number): ReactNode;
-    /* time it takes while scrolling */
-    scrollSeconds: number;
-    /* time for which slide stays still before scrolling */
-    stillSeconds: number;
-    settings: any;
-    /* value in number, specifying how much the dots should be from bottom of slides container */
-    dotsBottomPixel?: number;
-} & AdditionalProps;
+declare const CarouselControl: ({ next, prev, viewAllUrl, viewAllLabel, prevAriaLabel, nextAriaLabel, }: CarouselControlProps) => ReactElement;
 
 type NsCartIconProps = {
     itemCount?: number;
@@ -1259,4 +1255,4 @@ type NsVideoProps = {
 
 declare const NsVideo: (props: PropsWithChildren<NsVideoProps>) => ReactElement;
 
-export { type AccordionContentType, AccordionContentTypeObject, type AccordionItem, AccordionVariant, type AccordionVariantType, type AdditionalProps, type BynderImageDataType, Check, type ComponentBoxProps, type CslpTag, type DarkModeEnabledOption, type DropdownOptionProps, type DropdownProps, GlobalFontInter, type HtmlTagVariant, HtmlTagVariantMapping, IconWrapper, type ItemProps, type LabelValueType, LineLoader, type ListUiProps, type NavTabs, NsAccordion, NsAccordionHeader, type NsAccordionHeaderProps, NsAccordionItem, type NsAccordionItemProps, type NsAccordionProps, NsAlert, type NsAlertProps, NsAuthDropdown, type NsAuthDropdownProps, NsAutocomplete, type NsAutocompleteProps, NsAwardCard, NsBanner, type NsBannerProps, NsBgCard, NsBrandCard, NsBrandComponent, type NsBrandComponentProps, NsBrandLogo, NsBrandWrapper, NsBreadcrumb, type NsBreadcrumbProps, NsButton, type NsButtonProps, type NsCardButton, NsCarousal, type NsCarousalProps, CarousalControl as NsCarouselControl, NsCartIcon, type NsCartIconProps, NsCheckbox, type NsCheckboxProps, NsCheckoutCard, NsCollapse, type NsCollapseProps, NsColumnControl, type NsColumnControlProps, settings as NsDefaultCarousalSettings, NsDropdown, NsDropdownOption, NsEmailSimple, type NsEmailSimpleProps, type NsFfgCardProps, NsFlag, type NsFlagProps, type NsFlagSize, NsFlexColumns, NsGridColumns, NsHeroCardLevel1, NsHeroCardLevel2, NsIcon, type NsIconNameType, type NsIconProps, type NsIconSizeType, NsIconText, IconVariants as NsIconVariants, NsImage, NsInputField, type NsInputFieldProps, NsLabel, type NsLabelProps, NsLargeCard, NsLink, type NsLinkProps, NsMediumCard, NsModal, type NsModalProps, type NsModalVariant, NsNavProductCard, type NsNavProductCardProps, NsNavTabComponent as NsNavTab, type NsNavTabComponentProps, NsPost, NsProgress, type NsProgressProps, NsRadioGroup, type NsRadioGroupProps, NsScrollingCarousal, type NsScrollingCarousalProps, NsSelect, NsSelectOption, NsSmallFullCard, NsSpinner, type NsSpinnerProps, NsTable, type NsTableProps, NsTextStrip, type NsTextStripProps, NsToastProvider, NsToggleSection, type NsToggleSectionProps, NsTypography, type NsTypographyProps, NsVideo, type NsVideoProps, NsXLargeCard, type OptionsProps, type RenderSelectOptionArgType, type SelectOptionProps, type SelectProps, Show, type Themed, type ToastOptions, type Variants, getBasicDATWidthHeight, iconSize, useAccordionMap, useToast, useWindowSize };
+export { type AccordionContentType, AccordionContentTypeObject, type AccordionItem, AccordionVariant, type AccordionVariantType, type AdditionalProps, type BynderImageDataType, Check, type ComponentBoxProps, type CslpTag, type DarkModeEnabledOption, type DropdownOptionProps, type DropdownProps, GlobalFontInter, type HtmlTagVariant, HtmlTagVariantMapping, IconWrapper, type ItemProps, type LabelValueType, LineLoader, type ListUiProps, type NavTabs, NsAccordion, NsAccordionHeader, type NsAccordionHeaderProps, NsAccordionItem, type NsAccordionItemProps, type NsAccordionProps, NsAlert, type NsAlertProps, NsAuthDropdown, type NsAuthDropdownProps, NsAutocomplete, type NsAutocompleteProps, NsAwardCard, NsBanner, type NsBannerProps, NsBgCard, NsBrandCard, NsBrandComponent, type NsBrandComponentProps, NsBrandLogo, NsBrandWrapper, NsBreadcrumb, type NsBreadcrumbProps, NsButton, type NsButtonProps, type NsCardButton, NsCarousel, CarouselControl as NsCarouselControl, type NsCarouselProps, NsCartIcon, type NsCartIconProps, NsCheckbox, type NsCheckboxProps, NsCheckoutCard, NsCollapse, type NsCollapseProps, NsColumnControl, type NsColumnControlProps, defaultCarouselSettings as NsDefaultCarouselSettings, NsDropdown, NsDropdownOption, NsEmailSimple, type NsEmailSimpleProps, type NsFfgCardProps, NsFlag, type NsFlagProps, type NsFlagSize, NsFlexColumns, NsGridColumns, NsHeroCardLevel1, NsHeroCardLevel2, NsIcon, type NsIconNameType, type NsIconProps, type NsIconSizeType, NsIconText, IconVariants as NsIconVariants, NsImage, NsInputField, type NsInputFieldProps, NsLabel, type NsLabelProps, NsLargeCard, NsLink, type NsLinkProps, NsMediumCard, NsModal, type NsModalProps, type NsModalVariant, NsNavProductCard, type NsNavProductCardProps, NsNavTabComponent as NsNavTab, type NsNavTabComponentProps, NsPost, NsProgress, type NsProgressProps, NsRadioGroup, type NsRadioGroupProps, NsScrollingCarousel, type NsScrollingCarouselProps, NsSelect, NsSelectOption, NsSmallFullCard, NsSpinner, type NsSpinnerProps, NsTable, type NsTableProps, NsTextStrip, type NsTextStripProps, NsToastProvider, NsToggleSection, type NsToggleSectionProps, NsTypography, type NsTypographyProps, NsVideo, type NsVideoProps, NsXLargeCard, type OptionsProps, type RenderSelectOptionArgType, type SelectOptionProps, type SelectProps, Show, type Themed, type ToastOptions, type Variants, getBasicDATWidthHeight, iconSize, useAccordionMap, useToast, useWindowSize };