@selfdecode/sd-component-library 2.42.27 → 2.42.31

package/lib/269d4dbd2027234c18668478378a32a4.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <path id="Icon_material-language" data-name="Icon material-language" d="M12.99,3A10,10,0,1,0,23,13,10,10,0,0,0,12.99,3Zm6.93,6H16.97a15.649,15.649,0,0,0-1.38-3.56A8.03,8.03,0,0,1,19.92,9ZM13,5.04A14.087,14.087,0,0,1,14.91,9H11.09A14.087,14.087,0,0,1,13,5.04ZM5.26,15a7.822,7.822,0,0,1,0-4H8.64a16.515,16.515,0,0,0-.14,2,16.515,16.515,0,0,0,.14,2Zm.82,2H9.03a15.649,15.649,0,0,0,1.38,3.56A7.987,7.987,0,0,1,6.08,17ZM9.03,9H6.08a7.987,7.987,0,0,1,4.33-3.56A15.649,15.649,0,0,0,9.03,9ZM13,20.96A14.087,14.087,0,0,1,11.09,17h3.82A14.087,14.087,0,0,1,13,20.96ZM15.34,15H10.66a14.713,14.713,0,0,1-.16-2,14.585,14.585,0,0,1,.16-2h4.68a14.585,14.585,0,0,1,.16,2A14.713,14.713,0,0,1,15.34,15Zm.25,5.56A15.649,15.649,0,0,0,16.97,17h2.95a8.03,8.03,0,0,1-4.33,3.56ZM17.36,15a16.515,16.515,0,0,0,.14-2,16.515,16.515,0,0,0-.14-2h3.38a7.822,7.822,0,0,1,0,4Z" transform="translate(-3 -3)" />
+</svg>

package/lib/components/complex/navbar/partials/navbar-v2/partials/interfaces.d.ts

@@ -4,6 +4,10 @@ export declare type NavItem = {
      * The text to be shown in the link
      */
     title: string;
+    /**
+     * Optional mobile title
+     */
+    mobileTitle?: string;
     /**
      * The links that should be displayed when:
      *    - in desktop view, the user hovers this NavItem
@@ -22,6 +26,14 @@ export declare type NavItem = {
      * An SVG Component to be placed to the left of the title
      */
     Icon?: FC<SVGProps<SVGSVGElement>>;
+    /**
+     * Whether or not to hide arrow
+     */
+    hideArrow?: boolean;
+    /**
+     * Whether to include icon in mobile navbar menu
+     */
+    mobileShowIcon?: boolean;
 };
 export declare type NavMenuItem = {
     /**
@@ -59,4 +71,8 @@ export declare type NavMenuItem = {
      * What to do instead of redirecting to a url.
      */
     onClick?: () => void;
+    /**
+     * Whether item is currenly selected (and hence should be highlighted)
+     */
+    isSelected?: boolean;
 };

package/lib/components/complex/navbar/partials/navbar-v2/partials/navbar-mobile-v2/partials/navbar-mobile-unfolded-navigation/interfaces.d.ts

@@ -2,7 +2,7 @@ import { NavbarMobileV2PresentationalProps } from "../../presentational/interfac
 /**
  * Defines the NavigationUnfolded component's properties.
  */
-export declare type NavbarMobileUnfoldedNavigationProps = Pick<NavbarMobileV2PresentationalProps, "itemsInCart" | "onClickCartIcon" | "unsubscribedUser" | "accountNavItem" | "navItems" | "hideSearch"> & {
+export declare type NavbarMobileUnfoldedNavigationProps = Pick<NavbarMobileV2PresentationalProps, "itemsInCart" | "onClickCartIcon" | "unsubscribedUser" | "accountNavItem" | "navItems" | "hideSearch" | "languageNavItem"> & {
     /**
      * Callback function to be called when the X icon button is clicked
      */

package/lib/components/complex/navbar/partials/navbar-v2/presentational/interfaces.d.ts

@@ -18,4 +18,8 @@ export declare type NavbarV2PresentationalProps = Pick<NavbarProps, "history" |
      * rendered when hovering on the PersonalAreaItem component
      */
     accountNavItem: NavItem;
+    /**
+     * A language selector item
+     */
+    languageNavItem: NavItem;
 };

package/lib/components/complex/navbar/presentational/constants-v3.d.ts

@@ -2,3 +2,4 @@ import { NavItem } from "../partials/navbar-v2/partials/interfaces";
 export declare const geneticsNavItem: NavItem;
 export declare const labsNavItem: NavItem;
 export declare const getMyAccountNavItem: (isPractitioner: boolean, onLogout?: (() => void) | undefined) => NavItem;
+export declare const getLanguageNavItem: (selectedLangCode: string, langCodes: string[], onLanguageSwitch: (langCode: string) => void) => NavItem;

package/lib/components/complex/navbar/presentational/interfaces.d.ts

@@ -87,4 +87,16 @@ export declare type NavbarProps = {
      * }
      */
     onLogout?: () => void;
+    /**
+     * User current selected language code
+     */
+    selectedLangCode: string;
+    /**
+     * List of selectable language codes
+     */
+    langCodes: string[];
+    /**
+     * What to do on language switch
+     */
+    onLanguageSwitch: (langCode: string) => void;
 };

package/lib/components/complex/navbar/presentational/language-mapping.d.ts

@@ -0,0 +1 @@
+export declare const getNativeLanguageName: (langCode: string) => string | undefined;

package/lib/components/icons/globe-icon/globe.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <path id="Icon_material-language" data-name="Icon material-language" d="M12.99,3A10,10,0,1,0,23,13,10,10,0,0,0,12.99,3Zm6.93,6H16.97a15.649,15.649,0,0,0-1.38-3.56A8.03,8.03,0,0,1,19.92,9ZM13,5.04A14.087,14.087,0,0,1,14.91,9H11.09A14.087,14.087,0,0,1,13,5.04ZM5.26,15a7.822,7.822,0,0,1,0-4H8.64a16.515,16.515,0,0,0-.14,2,16.515,16.515,0,0,0,.14,2Zm.82,2H9.03a15.649,15.649,0,0,0,1.38,3.56A7.987,7.987,0,0,1,6.08,17ZM9.03,9H6.08a7.987,7.987,0,0,1,4.33-3.56A15.649,15.649,0,0,0,9.03,9ZM13,20.96A14.087,14.087,0,0,1,11.09,17h3.82A14.087,14.087,0,0,1,13,20.96ZM15.34,15H10.66a14.713,14.713,0,0,1-.16-2,14.585,14.585,0,0,1,.16-2h4.68a14.585,14.585,0,0,1,.16,2A14.713,14.713,0,0,1,15.34,15Zm.25,5.56A15.649,15.649,0,0,0,16.97,17h2.95a8.03,8.03,0,0,1-4.33,3.56ZM17.36,15a16.515,16.515,0,0,0,.14-2,16.515,16.515,0,0,0-.14-2h3.38a7.822,7.822,0,0,1,0,4Z" transform="translate(-3 -3)" />
+</svg>

package/lib/components/icons/globe-icon/index.d.ts

@@ -0,0 +1 @@
+export { ReactComponent as GlobeIcon } from "./globe.svg";

package/lib/components/icons/index.d.ts

@@ -1,17 +1,18 @@
+export { BorderedPlainWarningCircleIcon } from "./bordered-plain-warning-circle-icon";
 export { CartIcon } from "./cart-icon";
 export { CrossIcon } from "./cross-icon";
 export { GeneticsIcon } from "./genetics-icon";
+export { GlobeIcon } from "./globe-icon";
 export { HamburgerIcon } from "./hamburger-icon";
+export { PlainWarningCircleIcon } from "./plain-warning-circle-icon";
 export { ProfileIcon } from "./profile-icon";
+export { RescanIcon } from "./rescan-icon";
+export { RoundBorderedStar } from "./round-bordered-star";
 export { SDLogoNoTextIcon } from "./sd-logo-no-text-icon";
 export { SDLogoWhiteIcon } from "./sd-logo-white-icon";
+export { SDNavbarIcon } from "./sd-navbar-icon";
 export { SearchIcon } from "./search-icon";
 export { ShortDownArrowIcon } from "./short-dropdown-arrow-icon";
-export { VialIcon } from "./vial-icon";
-export { RescanIcon } from "./rescan-icon";
-export { SDNavbarIcon } from "./sd-navbar-icon";
 export { StarIcon } from "./star-icon";
+export { VialIcon } from "./vial-icon";
 export { WarningCircleIcon } from "./warning-circle-icon";
-export { BorderedPlainWarningCircleIcon } from "./bordered-plain-warning-circle-icon";
-export { PlainWarningCircleIcon } from "./plain-warning-circle-icon";
-export { RoundBorderedStar } from "./round-bordered-star";

package/lib/components/tabs/tab-bar/partials/tab/interfaces.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export interface TabProps<T> {
     /**
      * Tab width.
@@ -56,4 +56,8 @@ export interface TabProps<T> {
      * Color of the ribbon in active state.
      */
     activeRibbonColor?: string;
+    /**
+     * Provide a custom component to render instead of label/icon
+     */
+    tabHeaderComponent?: React.ReactNode;
 }

package/lib/components/tabs/tab-bar/partials/tab/tab.d.ts

@@ -4,4 +4,4 @@ export declare const Ribbon: ({ active, activeColor }: {
     active?: boolean | undefined;
     activeColor?: string | undefined;
 }) => JSX.Element;
-export declare function Tab<T>({ width, label, secondaryText, icon, id, onClick, selected, activeColor, color, tabPadding, bg, activeBg, activeRibbonColor, borderRadius, }: TabProps<T>): JSX.Element;
+export declare function Tab<T>({ width, label, secondaryText, icon, id, onClick, selected, activeColor, color, tabPadding, bg, activeBg, activeRibbonColor, borderRadius, tabHeaderComponent, }: TabProps<T>): JSX.Element;

package/lib/components/tabs/tabbed-view/interfaces.d.ts

@@ -4,7 +4,7 @@ import { TabProps } from "../tab-bar/partials/tab/interfaces";
 /**
  * Configuration for each tab and the corresponding view
  */
-export interface TabViewConfig extends Pick<TabProps<string>, "label" | "width" | "color" | "activeColor" | "bg" | "activeBg" | "borderRadius" | "activeRibbonColor"> {
+export interface TabViewConfig extends Pick<TabProps<string>, "label" | "width" | "color" | "activeColor" | "bg" | "activeBg" | "borderRadius" | "activeRibbonColor" | "tabHeaderComponent"> {
     /**
      * Component to be rendered when the tab is active
      */
@@ -30,4 +30,8 @@ export interface TabbedViewProps<ThemeType extends Theme = RequiredTheme> {
      * Padding around the content
      */
     contentPadding?: ResponsiveValue<number | string, ThemeType>;
+    /**
+     * Padding of each tab to be set up externally
+     */
+    tabPadding?: string[];
 }

package/lib/components/tabs/tabbed-view/tabbed-view.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TabbedViewProps } from "./interfaces";
-export declare function TabbedView({ tabs, color, activeColor, contentPadding, }: TabbedViewProps): JSX.Element;
+export declare function TabbedView({ tabs, color, activeColor, contentPadding, tabPadding, }: TabbedViewProps): JSX.Element;

package/lib/components/texts/base-text/index.d.ts

@@ -1,3 +1,2 @@
-import { BaseTextProps as Props } from "./interfaces";
 export { BaseText } from "./base-text";
-export declare type BaseTextProps = Props;
+export type { BaseTextProps } from "./interfaces";

package/lib/components/texts/base-text/interfaces.d.ts

@@ -12,7 +12,11 @@ interface CommonBaseTextProps extends Pick<BaseComponentProps, "m" | "mt" | "mr"
     /**
      * The width of the text component
      */
-    width?: Array<string>;
+    width?: string | string[];
+    /**
+     * The height of the text component
+     */
+    height?: string | string[];
     /**
      * The color of the text
      */

package/lib/components/texts/no-translate/index.d.ts

@@ -0,0 +1 @@
+export { NoTranslate } from "./no-translate";

package/lib/components/texts/no-translate/no-translate.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TextProps } from "rebass";
+export declare const NoTranslate: (props: TextProps) => JSX.Element;

package/lib/components/texts/responsive-text/interfaces.d.ts

@@ -2,7 +2,7 @@ import { BaseTextProps } from "../base-text";
 /**
  * Props we want from the base text.
  */
-declare type PropsFromBaseText = Pick<BaseTextProps, "children" | "color" | "display" | "cursor" | "textAlign" | "textDecoration" | "textTransform" | "letterSpacing" | "lineHeight" | "backgroundColor" | "width" | "onClick" | "m" | "mt" | "mr" | "mb" | "ml">;
+declare type PropsFromBaseText = Pick<BaseTextProps, "children" | "color" | "display" | "cursor" | "textAlign" | "textDecoration" | "textTransform" | "letterSpacing" | "lineHeight" | "backgroundColor" | "width" | "height" | "onClick" | "m" | "mt" | "mr" | "mb" | "ml">;
 /**
  * SelfDecode's combinations of fontSize and fontWeight.
  */

package/lib/components/tooltips/react-element-tooltip/index.d.ts

@@ -0,0 +1 @@
+export { ReactElementTooltip } from "./react-element-tooltip";

package/lib/components/tooltips/react-element-tooltip/interfaces.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { BaseInfoTooltipProps } from "../base-info-tooltip";
+/**
+ * Additional props we want to add
+ */
+declare type SameProps = Partial<BaseInfoTooltipProps>;
+export interface ReactElementTooltipProps extends SameProps {
+    /**
+     * Only this prop is required
+     */
+    children: React.ReactNode;
+    /**
+     * Limit the width, if it overflows
+     */
+    maxWidth?: string;
+}
+export {};

package/lib/components/tooltips/react-element-tooltip/react-element-tooltip.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { BoxProps } from "rebass";
+import { ReactElementTooltipProps } from "./interfaces";
+/**
+ * PrimaryInfoTooltip component.
+ */
+export declare const ReactElementTooltip: React.ForwardRefExoticComponent<ReactElementTooltipProps & React.RefAttributes<React.FC<BoxProps>>>;

package/lib/index.d.ts

@@ -173,6 +173,7 @@ export { BaseInfoTooltip } from "./components/tooltips/base-info-tooltip";
 export { PrimaryInfoTooltip } from "./components/tooltips/primary-info-tooltip";
 export { StarTooltip } from "./components/tooltips/star-tooltip";
 export { RadioInfoButtonTooltip } from "./components/tooltips/radio-info-button-tooltip";
+export { ReactElementTooltip } from "./components/tooltips/react-element-tooltip";
 export { Footer } from "./components/complex/footer";
 export { Navbar } from "./components/complex/navbar";
 export { Anchor } from "./components/utils/anchor";