@databiosphere/findable-ui 11.0.0 → 12.0.0

package/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero.d.ts

@@ -5,10 +5,11 @@ import { CallToAction } from "../../../../../common/Button/components/CallToActi
  * Back page hero component comprising breadcrumbs, title, status and tabs.
  */
 export interface BackPageHeroProps {
+    actions?: ReactNode;
     breadcrumbs?: Breadcrumb[];
     callToAction?: CallToAction;
     children?: ReactNode;
     subTitle?: ReactNode;
     title?: ReactNode;
 }
-export declare const BackPageHero: ({ breadcrumbs, callToAction, children, subTitle, title, }: BackPageHeroProps) => JSX.Element;
+export declare const BackPageHero: ({ actions, breadcrumbs, callToAction, children, subTitle, title, }: BackPageHeroProps) => JSX.Element;

package/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero.js

@@ -3,14 +3,15 @@ import { Breadcrumbs, } from "../../../../../common/Breadcrumbs/breadcrumbs";
 import { Title } from "../../../../../common/Title/title";
 import { BackPageHeroHeadline, CallToActionButton, HeroHeader, } from "./backPageHero.styles";
 import { SubTitle } from "./components/SubTitle/subTitle";
-export const BackPageHero = ({ breadcrumbs, callToAction, children, subTitle, title, }) => {
-    const HeroHeadline = callToAction ? BackPageHeroHeadline : Fragment;
+export const BackPageHero = ({ actions, breadcrumbs, callToAction, children, subTitle, title, }) => {
+    const HeroHeadline = actions || callToAction ? BackPageHeroHeadline : Fragment;
     return (React.createElement(React.Fragment, null,
         (breadcrumbs || title) && (React.createElement(HeroHeadline, null,
             React.createElement(HeroHeader, { gap: 1 },
                 breadcrumbs && React.createElement(Breadcrumbs, { breadcrumbs: breadcrumbs }),
                 title && React.createElement(Title, { title: title }),
                 React.createElement(SubTitle, { subTitle: subTitle })),
+            actions,
             callToAction && React.createElement(CallToActionButton, { callToAction: callToAction }))),
         children));
 };

package/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.js

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Stack } from "@mui/material";
-import { TABLET } from "../../../../../../theme/common/breakpoints";
+import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
 import { CallToActionButton as CTAButton } from "../../../../../common/Button/components/CallToActionButton/callToActionButton";
 export const BackPageHeroHeadline = styled.div `
   display: contents;
@@ -9,7 +9,7 @@ export const BackPageHeroHeadline = styled.div `
     grid-column: 1 / -1; // Title and breadcrumbs consume full width of available grid.
   }
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${mediaTabletUp} {
     display: flex;
     flex: 1;
     gap: 88px;
@@ -26,7 +26,7 @@ export const CallToActionButton = styled(CTAButton) `
   align-self: center;
   justify-self: flex-start;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${mediaTabletUp} {
     justify-self: flex-end;
   }
 `;

package/lib/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface ActionsProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const Actions: ({ children, className }: ActionsProps) => JSX.Element;

package/lib/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { BackPageHeroActions } from "./actions.styles";
+export const Actions = ({ children, className }) => {
+    return (React.createElement(BackPageHeroActions, { className: className }, children));
+};

package/lib/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const BackPageHeroActions: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles.js

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { mediaTabletUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+export const BackPageHeroActions = styled.div `
+  align-items: center;
+  align-self: center;
+  display: flex;
+  gap: 16px;
+  justify-self: flex-start;
+
+  ${mediaTabletUp} {
+    justify-self: flex-end;
+  }
+`;

package/lib/components/Layout/components/Header/common/entities.d.ts

@@ -13,4 +13,5 @@ export declare enum SELECTED_MATCH {
 }
 export interface SocialMedia {
     socials: Social[];
+    visible?: Partial<Record<BreakpointKey, boolean>>;
 }

package/lib/components/Layout/components/Header/common/utils.d.ts

@@ -1,6 +1,7 @@
 import { Breakpoint } from "@mui/material";
+import { UseBreakpoint } from "../../../../../hooks/useBreakpoint";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
-import { Navigation } from "./entities";
+import { Navigation, SocialMedia } from "./entities";
 /**
  * Returns the configured menu navigation links.
  * @param navigation - Navigation links.
@@ -14,3 +15,10 @@ export declare function getMenuNavigationLinks(navigation?: Navigation): NavLink
  * @returns navigation links.
  */
 export declare function getNavigationLinks(navigationLinks?: NavLinkItem[], breakpoint?: Breakpoint): NavLinkItem[];
+/**
+ * Returns true if the social media is visible at the current breakpoint.
+ * @param bp - Breakpoint.
+ * @param socialMedia - Social media.
+ * @returns true.
+ */
+export declare function isSocialsVisible(bp: Pick<UseBreakpoint, "breakpoint" | "lgUp">, socialMedia?: SocialMedia): boolean;

package/lib/components/Layout/components/Header/common/utils.js

@@ -1,5 +1,5 @@
 import { isClientSideNavigation } from "../../../../Links/common/utils";
-import { SELECTED_MATCH } from "./entities";
+import { SELECTED_MATCH, } from "./entities";
 /**
  * Adds to the set of selected patterns, for the navigation link, at the current breakpoint.
  * @param setOfPatterns - Set of selected patterns.
@@ -126,6 +126,21 @@ function isLinkVisible(navLinkItem, breakpoint) {
         return true; // Default is visible.
     return navLinkItem.visible[breakpoint] !== false;
 }
+/**
+ * Returns true if the social media is visible at the current breakpoint.
+ * @param bp - Breakpoint.
+ * @param socialMedia - Social media.
+ * @returns true.
+ */
+export function isSocialsVisible(bp, socialMedia) {
+    if (!socialMedia)
+        return false;
+    if (!bp.breakpoint)
+        return false;
+    if (!socialMedia.visible)
+        return bp.lgUp;
+    return socialMedia.visible[bp.breakpoint] !== false;
+}
 /**
  * Returns the navigation link with the selected matches, for the current breakpoint.
  * @param navLinkItem - Navigation link.

package/lib/components/Layout/components/Header/hooks/useHeaderVisibility.js

@@ -1,4 +1,5 @@
 import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
+import { isSocialsVisible } from "../common/utils";
 /**
  * Returns header component visibility for header related rendering logic.
  * @param headerProps - Header component props.
@@ -25,7 +26,7 @@ export const useHeaderVisibility = (headerProps) => {
     const isNavigationIn = smUp;
     const isMenuIn = hasMenu;
     const isSloganIn = hasSlogan && mdUp;
-    const isSocialsIn = hasSocials && lgUp;
+    const isSocialsIn = hasSocials && isSocialsVisible({ breakpoint, lgUp }, socialMedia);
     // Determines navigation visibility.
     const isCenterNavigationIn = isNavigationIn && hasNavItemsC;
     const isLeftNavigationIn = isNavigationIn && hasNavItemsL;

package/lib/components/common/Button/components/CallToActionButton/callToActionButton.d.ts

@@ -1,3 +1,4 @@
+import { ButtonProps } from "@mui/material";
 import { ElementType } from "react";
 import { ANCHOR_TARGET } from "../../../../Links/common/entities";
 export interface CallToAction {
@@ -7,8 +8,9 @@ export interface CallToAction {
 }
 export interface CallToActionButtonProps {
     ButtonElType?: ElementType;
+    buttonProps?: Partial<ButtonProps>;
     callToAction: CallToAction;
     className?: string;
     disabled?: boolean;
 }
-export declare const CallToActionButton: ({ ButtonElType: Button, callToAction, className, disabled, }: CallToActionButtonProps) => JSX.Element;
+export declare const CallToActionButton: ({ ButtonElType: Button, buttonProps, callToAction, className, disabled, }: CallToActionButtonProps) => JSX.Element;

package/lib/components/common/Button/components/CallToActionButton/callToActionButton.js

@@ -3,9 +3,9 @@ import React from "react";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../Links/common/utils";
 import { ButtonPrimary } from "../ButtonPrimary/buttonPrimary";
-export const CallToActionButton = ({ ButtonElType: Button = ButtonPrimary, callToAction, className, disabled = false, }) => {
+export const CallToActionButton = ({ ButtonElType: Button = ButtonPrimary, buttonProps, callToAction, className, disabled = false, }) => {
     const { label, target, url } = callToAction;
     const isInternal = isClientSideNavigation(url);
     return isInternal ? (React.createElement(NLink, { href: url, legacyBehavior: true, passHref: true },
-        React.createElement(Button, { className: className, disabled: disabled, href: "passHref", rel: REL_ATTRIBUTE.NO_OPENER, target: target || ANCHOR_TARGET.SELF }, label))) : (React.createElement(Button, { className: className, disabled: disabled, href: url, rel: REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, target: target || ANCHOR_TARGET.BLANK }, label));
+        React.createElement(Button, { className: className, disabled: disabled, href: "passHref", rel: REL_ATTRIBUTE.NO_OPENER, target: target || ANCHOR_TARGET.SELF, ...buttonProps }, label))) : (React.createElement(Button, { className: className, disabled: disabled, href: url, rel: REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, target: target || ANCHOR_TARGET.BLANK, ...buttonProps }, label));
 };

package/lib/components/common/Markdown/markdown.d.ts

@@ -1,4 +1,6 @@
+import { BoxProps as MBoxProps } from "@mui/material";
 export interface MarkdownProps {
     content: string;
+    sx?: MBoxProps["sx"];
 }
-export declare const Markdown: ({ content }: MarkdownProps) => JSX.Element;
+export declare const Markdown: ({ content, sx }: MarkdownProps) => JSX.Element;

package/lib/components/common/Markdown/markdown.js

@@ -1,6 +1,7 @@
 // TODO deprecate component if possible (see MDXMarkdown)
+import { Box as MBox } from "@mui/material";
 import DOMPurify from "isomorphic-dompurify";
 import React from "react";
-export const Markdown = ({ content }) => {
-    return (React.createElement("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(content) } }));
+export const Markdown = ({ content, sx }) => {
+    return (React.createElement(MBox, { component: "div", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(content) }, sx: { minWidth: 0, wordBreak: "break-word", ...sx } }));
 };

package/lib/theme/common/palette.d.ts

@@ -1,142 +1,49 @@
 import { PaletteColorOptions } from "@mui/material";
 import { CommonColors, TypeBackground, TypeText } from "@mui/material/styles";
-/**
- * Palette "Alert"
- */
-declare enum ALERT {
-    LIGHT = "#FED3D1",
-    LIGHTEST = "#FFF4F4",
-    MAIN = "#B42318"
-}
-/**
- * Palette "Background"
- */
-declare enum BACKGROUND {
-    DEFAULT = "#F6F6F7"
-}
-/**
- * Palette "Info"
- */
-declare enum INFO {
-    CONTRAST_TEXT = "#00729C",
-    LIGHT = "#97D6EA",
-    LIGHTEST = "#F2FAFC",
-    MAIN = "#00729C"
-}
-/**
- * Palette "Ink"
- */
-declare enum INK {
-    LIGHT = "#637381",
-    MAIN = "#212B36"
-}
-/**
- * Palette "Primary"
- */
-declare enum PRIMARY {
-    DARK = "#005EA9",
-    LIGHTEST = "#E6EFF6",
-    MAIN = "#1C7CC7"
-}
-/**
- * Palette "Smoke"
- */
-declare enum SMOKE {
-    DARK = "#C4CDD5",
-    LIGHT = "#F6F6F7",
-    LIGHTEST = "#FAFBFB",
-    MAIN = "#E1E3E5"
-}
-/**
- * Palette "Success"
- */
-declare enum SUCCESS {
-    LIGHT = "#AEE9D1",
-    LIGHTEST = "#F1F8F5",
-    MAIN = "#287555"
-}
-/**
- * Palette "Text"
- */
-declare enum TEXT {
-    PRIMARY = "#212B36"
-}
-/**
- * Palette "Warning"
- */
-declare enum WARNING {
-    CONTRAST_TEXT = "#B54708",
-    LIGHT = "#FFD79D",
-    LIGHTEST = "#FFFAEB",
-    MAIN = "#B54708"
-}
-/**
- * Default "Black"
- */
-declare enum BLACK {
-    DEFAULT = "#000000"
-}
-/**
- * Default "White"
- */
-declare enum WHITE {
-    DEFAULT = "#ffffff"
-}
-/**
- * Color alpha
- */
-declare enum ALPHA {
-    A04 = "0a",
-    A08 = "14",
-    A32 = "52",
-    A60 = "99",
-    A64 = "a3",
-    A80 = "cc"
-}
 /**
  * Color constants
  */
-export declare const alertLight = ALERT.LIGHT;
-export declare const alertLightest = ALERT.LIGHTEST;
-export declare const alertMain = ALERT.MAIN;
-export declare const backgroundDefault = BACKGROUND.DEFAULT;
-export declare const infoContrastText = INFO.CONTRAST_TEXT;
-export declare const infoLight = INFO.LIGHT;
-export declare const infoLightest = INFO.LIGHTEST;
-export declare const infoMain = INFO.CONTRAST_TEXT;
-export declare const inkLight = INK.LIGHT;
-export declare const inkMain = INK.MAIN;
-export declare const primaryDark = PRIMARY.DARK;
-export declare const primaryLightest = PRIMARY.LIGHTEST;
-export declare const primaryMain = PRIMARY.MAIN;
-export declare const smokeDark = SMOKE.DARK;
-export declare const smokeLight = SMOKE.LIGHT;
-export declare const smokeLightest = SMOKE.LIGHTEST;
-export declare const smokeMain = SMOKE.MAIN;
-export declare const successLight = SUCCESS.LIGHT;
-export declare const successLightest = SUCCESS.LIGHTEST;
-export declare const successMain = SUCCESS.MAIN;
-export declare const textPrimary = TEXT.PRIMARY;
-export declare const warningContrastText = WARNING.CONTRAST_TEXT;
-export declare const warningLight = WARNING.LIGHT;
-export declare const warningLightest = WARNING.LIGHTEST;
-export declare const warningMain = WARNING.CONTRAST_TEXT;
-export declare const black = BLACK.DEFAULT;
-export declare const white = WHITE.DEFAULT;
+export declare const alertLight: string;
+export declare const alertLightest: string;
+export declare const alertMain: string;
+export declare const backgroundDefault: string;
+export declare const infoContrastText: string;
+export declare const infoLight: string;
+export declare const infoLightest: string;
+export declare const infoMain: string;
+export declare const inkLight: string;
+export declare const inkMain: string;
+export declare const primaryDark: string;
+export declare const primaryLightest: string;
+export declare const primaryMain: string;
+export declare const smokeDark: string;
+export declare const smokeLight: string;
+export declare const smokeLightest: string;
+export declare const smokeMain: string;
+export declare const successLight: string;
+export declare const successLightest: string;
+export declare const successMain: string;
+export declare const textPrimary: string;
+export declare const warningContrastText: string;
+export declare const warningLight: string;
+export declare const warningLightest: string;
+export declare const warningMain: string;
+export declare const black: string;
+export declare const white: string;
 /**
  * Color alpha constants
  */
-export declare const alpha04 = ALPHA.A04;
-export declare const alpha08 = ALPHA.A08;
-export declare const alpha32 = ALPHA.A32;
-export declare const alpha60 = ALPHA.A60;
-export declare const alpha64 = ALPHA.A64;
-export declare const alpha80 = ALPHA.A80;
+export declare const alpha04: string;
+export declare const alpha08: string;
+export declare const alpha32: string;
+export declare const alpha60: string;
+export declare const alpha64: string;
+export declare const alpha80: string;
 /**
  * Shades
  */
-export declare const black04 = "#0000000a";
-export declare const black08 = "#00000014";
+export declare const black04: string;
+export declare const black08: string;
 /**
  * Palette Option "Alert"
  */
@@ -177,4 +84,3 @@ export declare const text: Pick<TypeText, "primary">;
  * Palette Option "Warning"
  */
 export declare const warning: PaletteColorOptions;
-export {};

package/lib/theme/common/palette.js

@@ -1,108 +1,96 @@
 /**
  * Palette "Alert"
  */
-var ALERT;
-(function (ALERT) {
-    ALERT["LIGHT"] = "#FED3D1";
-    ALERT["LIGHTEST"] = "#FFF4F4";
-    ALERT["MAIN"] = "#B42318";
-})(ALERT || (ALERT = {}));
+const ALERT = {
+    LIGHT: "#FED3D1",
+    LIGHTEST: "#FFF4F4",
+    MAIN: "#B42318",
+};
 /**
  * Palette "Background"
  */
-var BACKGROUND;
-(function (BACKGROUND) {
-    BACKGROUND["DEFAULT"] = "#F6F6F7";
-})(BACKGROUND || (BACKGROUND = {}));
+const BACKGROUND = {
+    DEFAULT: "#F6F6F7",
+};
 /**
  * Palette "Info"
  */
-var INFO;
-(function (INFO) {
-    INFO["CONTRAST_TEXT"] = "#00729C";
-    INFO["LIGHT"] = "#97D6EA";
-    INFO["LIGHTEST"] = "#F2FAFC";
-    INFO["MAIN"] = "#00729C";
-})(INFO || (INFO = {}));
+const INFO = {
+    CONTRAST_TEXT: "#00729C",
+    LIGHT: "#97D6EA",
+    LIGHTEST: "#F2FAFC",
+    MAIN: "#00729C",
+};
 /**
  * Palette "Ink"
  */
-var INK;
-(function (INK) {
-    INK["LIGHT"] = "#637381";
-    INK["MAIN"] = "#212B36";
-})(INK || (INK = {}));
+const INK = {
+    LIGHT: "#637381",
+    MAIN: "#212B36",
+};
 /**
  * Palette "Primary"
  */
-var PRIMARY;
-(function (PRIMARY) {
-    PRIMARY["DARK"] = "#005EA9";
-    PRIMARY["LIGHTEST"] = "#E6EFF6";
-    PRIMARY["MAIN"] = "#1C7CC7";
-})(PRIMARY || (PRIMARY = {}));
+const PRIMARY = {
+    DARK: "#005EA9",
+    LIGHTEST: "#E6EFF6",
+    MAIN: "#1C7CC7",
+};
 /**
  * Palette "Smoke"
  */
-var SMOKE;
-(function (SMOKE) {
-    SMOKE["DARK"] = "#C4CDD5";
-    SMOKE["LIGHT"] = "#F6F6F7";
-    SMOKE["LIGHTEST"] = "#FAFBFB";
-    SMOKE["MAIN"] = "#E1E3E5";
-})(SMOKE || (SMOKE = {}));
+const SMOKE = {
+    DARK: "#C4CDD5",
+    LIGHT: "#F6F6F7",
+    LIGHTEST: "#FAFBFB",
+    MAIN: "#E1E3E5",
+};
 /**
  * Palette "Success"
  */
-var SUCCESS;
-(function (SUCCESS) {
-    SUCCESS["LIGHT"] = "#AEE9D1";
-    SUCCESS["LIGHTEST"] = "#F1F8F5";
-    SUCCESS["MAIN"] = "#287555";
-})(SUCCESS || (SUCCESS = {}));
+const SUCCESS = {
+    LIGHT: "#AEE9D1",
+    LIGHTEST: "#F1F8F5",
+    MAIN: "#287555",
+};
 /**
  * Palette "Text"
  */
-var TEXT;
-(function (TEXT) {
-    TEXT["PRIMARY"] = "#212B36";
-})(TEXT || (TEXT = {}));
+const TEXT = {
+    PRIMARY: "#212B36",
+};
 /**
  * Palette "Warning"
  */
-var WARNING;
-(function (WARNING) {
-    WARNING["CONTRAST_TEXT"] = "#B54708";
-    WARNING["LIGHT"] = "#FFD79D";
-    WARNING["LIGHTEST"] = "#FFFAEB";
-    WARNING["MAIN"] = "#B54708";
-})(WARNING || (WARNING = {}));
+const WARNING = {
+    CONTRAST_TEXT: "#B54708",
+    LIGHT: "#FFD79D",
+    LIGHTEST: "#FFFAEB",
+    MAIN: "#B54708",
+};
 /**
  * Default "Black"
  */
-var BLACK;
-(function (BLACK) {
-    BLACK["DEFAULT"] = "#000000";
-})(BLACK || (BLACK = {}));
+const BLACK = {
+    DEFAULT: "#000000",
+};
 /**
  * Default "White"
  */
-var WHITE;
-(function (WHITE) {
-    WHITE["DEFAULT"] = "#ffffff";
-})(WHITE || (WHITE = {}));
+const WHITE = {
+    DEFAULT: "#ffffff",
+};
 /**
  * Color alpha
  */
-var ALPHA;
-(function (ALPHA) {
-    ALPHA["A04"] = "0a";
-    ALPHA["A08"] = "14";
-    ALPHA["A32"] = "52";
-    ALPHA["A60"] = "99";
-    ALPHA["A64"] = "a3";
-    ALPHA["A80"] = "cc";
-})(ALPHA || (ALPHA = {}));
+const ALPHA = {
+    A04: "0a",
+    A08: "14",
+    A32: "52",
+    A60: "99",
+    A64: "a3",
+    A80: "cc",
+};
 /**
  * Color constants
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "11.0.0",
+  "version": "12.0.0",
   "description": "",
   "scripts": {
     "test": "jest",
@@ -42,9 +42,9 @@
     "@types/react-gtm-module": "^2.0.1",
     "@types/react-window": "^1.8.5",
     "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
     "eslint": "^8.33.0",
-    "eslint-config-next": "^14.1.0",
+    "eslint-config-next": "^14.2.13",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-jsdoc": "^48.1.0",
@@ -53,14 +53,14 @@
     "eslint-plugin-sonarjs": "^0.18.0",
     "eslint-plugin-sort-destructure-keys": "^1.4.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-typescript-sort-keys": "^2.3.0",
+    "eslint-plugin-typescript-sort-keys": "^3.2.0",
     "husky": "^8.0.3",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
     "prettier": "^2.8.3",
     "prettier-plugin-organize-imports": "^3.2.2",
     "storybook": "^7.6.17",
-    "ts-jest": "^29.0.5",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.5.4"
   },
   "peerDependencies": {

package/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Stack } from "@mui/material";
-import { TABLET } from "../../../../../../theme/common/breakpoints";
+import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
 import { CallToActionButton as CTAButton } from "../../../../../common/Button/components/CallToActionButton/callToActionButton";
 
 export const BackPageHeroHeadline = styled.div`
@@ -10,7 +10,7 @@ export const BackPageHeroHeadline = styled.div`
     grid-column: 1 / -1; // Title and breadcrumbs consume full width of available grid.
   }
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${mediaTabletUp} {
     display: flex;
     flex: 1;
     gap: 88px;
@@ -29,7 +29,7 @@ export const CallToActionButton = styled(CTAButton)`
   align-self: center;
   justify-self: flex-start;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${mediaTabletUp} {
     justify-self: flex-end;
   }
 `;

package/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.tsx

@@ -17,6 +17,7 @@ import { SubTitle } from "./components/SubTitle/subTitle";
  */
 
 export interface BackPageHeroProps {
+  actions?: ReactNode;
   breadcrumbs?: Breadcrumb[];
   callToAction?: CallToAction;
   children?: ReactNode;
@@ -25,13 +26,15 @@ export interface BackPageHeroProps {
 }
 
 export const BackPageHero = ({
+  actions,
   breadcrumbs,
   callToAction,
   children,
   subTitle,
   title,
 }: BackPageHeroProps): JSX.Element => {
-  const HeroHeadline = callToAction ? BackPageHeroHeadline : Fragment;
+  const HeroHeadline =
+    actions || callToAction ? BackPageHeroHeadline : Fragment;
   return (
     <>
       {(breadcrumbs || title) && (
@@ -41,6 +44,7 @@ export const BackPageHero = ({
             {title && <Title title={title} />}
             <SubTitle subTitle={subTitle} />
           </HeroHeader>
+          {actions}
           {callToAction && <CallToActionButton callToAction={callToAction} />}
         </HeroHeadline>
       )}

package/src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles.ts

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { mediaTabletUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+
+export const BackPageHeroActions = styled.div`
+  align-items: center;
+  align-self: center;
+  display: flex;
+  gap: 16px;
+  justify-self: flex-start;
+
+  ${mediaTabletUp} {
+    justify-self: flex-end;
+  }
+`;

package/src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+import { BackPageHeroActions } from "./actions.styles";
+
+export interface ActionsProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const Actions = ({ children, className }: ActionsProps): JSX.Element => {
+  return (
+    <BackPageHeroActions className={className}>{children}</BackPageHeroActions>
+  );
+};

package/src/components/Layout/components/Header/common/entities.ts

@@ -19,4 +19,5 @@ export enum SELECTED_MATCH {
 
 export interface SocialMedia {
   socials: Social[];
+  visible?: Partial<Record<BreakpointKey, boolean>>;
 }

package/src/components/Layout/components/Header/common/utils.ts

@@ -1,7 +1,13 @@
 import { Breakpoint } from "@mui/material";
+import { UseBreakpoint } from "../../../../../hooks/useBreakpoint";
 import { isClientSideNavigation } from "../../../../Links/common/utils";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
-import { Navigation, SELECTED_MATCH, SelectedMatch } from "./entities";
+import {
+  Navigation,
+  SELECTED_MATCH,
+  SelectedMatch,
+  SocialMedia,
+} from "./entities";
 
 /**
  * Adds to the set of selected patterns, for the navigation link, at the current breakpoint.
@@ -141,6 +147,22 @@ function isLinkVisible(
   return navLinkItem.visible[breakpoint] !== false;
 }
 
+/**
+ * Returns true if the social media is visible at the current breakpoint.
+ * @param bp - Breakpoint.
+ * @param socialMedia - Social media.
+ * @returns true.
+ */
+export function isSocialsVisible(
+  bp: Pick<UseBreakpoint, "breakpoint" | "lgUp">,
+  socialMedia?: SocialMedia
+): boolean {
+  if (!socialMedia) return false;
+  if (!bp.breakpoint) return false;
+  if (!socialMedia.visible) return bp.lgUp;
+  return socialMedia.visible[bp.breakpoint] !== false;
+}
+
 /**
  * Returns the navigation link with the selected matches, for the current breakpoint.
  * @param navLinkItem - Navigation link.

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.tsx

@@ -46,7 +46,7 @@ export const NavigationMenu = ({
   const MenuItem = isSubMenu ? StyledMenuItem : Fragment;
 
   useEffect(() => {
-    return () => {
+    return (): void => {
       if (isSubMenu || !open) return;
       onDisableScrollLock();
     };

package/src/components/Layout/components/Header/hooks/useHeaderVisibility.ts

@@ -1,4 +1,5 @@
 import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
+import { isSocialsVisible } from "../common/utils";
 import { HeaderProps } from "../header";
 
 export interface UseHeaderVisibility {
@@ -53,7 +54,8 @@ export const useHeaderVisibility = (
   const isNavigationIn = smUp;
   const isMenuIn = hasMenu;
   const isSloganIn = hasSlogan && mdUp;
-  const isSocialsIn = hasSocials && lgUp;
+  const isSocialsIn =
+    hasSocials && isSocialsVisible({ breakpoint, lgUp }, socialMedia);
   // Determines navigation visibility.
   const isCenterNavigationIn = isNavigationIn && hasNavItemsC;
   const isLeftNavigationIn = isNavigationIn && hasNavItemsL;

package/src/components/common/Button/components/CallToActionButton/callToActionButton.tsx

@@ -1,3 +1,4 @@
+import { ButtonProps } from "@mui/material";
 import NLink from "next/link";
 import React, { ElementType } from "react";
 import {
@@ -15,6 +16,7 @@ export interface CallToAction {
 
 export interface CallToActionButtonProps {
   ButtonElType?: ElementType;
+  buttonProps?: Partial<ButtonProps>;
   callToAction: CallToAction;
   className?: string;
   disabled?: boolean;
@@ -22,6 +24,7 @@ export interface CallToActionButtonProps {
 
 export const CallToActionButton = ({
   ButtonElType: Button = ButtonPrimary,
+  buttonProps,
   callToAction,
   className,
   disabled = false,
@@ -36,6 +39,7 @@ export const CallToActionButton = ({
         href="passHref"
         rel={REL_ATTRIBUTE.NO_OPENER}
         target={target || ANCHOR_TARGET.SELF}
+        {...buttonProps}
       >
         {label}
       </Button>
@@ -47,6 +51,7 @@ export const CallToActionButton = ({
       href={url}
       rel={REL_ATTRIBUTE.NO_OPENER_NO_REFERRER}
       target={target || ANCHOR_TARGET.BLANK}
+      {...buttonProps}
     >
       {label}
     </Button>

package/src/components/common/Code/code.tsx

@@ -22,7 +22,7 @@ export const Code = ({ className, code }: CodeProps): JSX.Element => {
       const copiedTimeout = setTimeout(() => {
         setCopied(false);
       }, 2000);
-      return () => clearTimeout(copiedTimeout);
+      return (): void => clearTimeout(copiedTimeout);
     }
   }, [copied]);
 

package/src/components/common/CopyToClipboard/copyToClipboard.tsx

@@ -27,7 +27,7 @@ export const CopyToClipboard = ({
       const tooltipTimeout = setTimeout(() => {
         setShowTooltip(false);
       }, 2000);
-      return () => clearTimeout(tooltipTimeout);
+      return (): void => clearTimeout(tooltipTimeout);
     }
   }, [showTooltip]);
 

package/src/components/common/Markdown/markdown.tsx

@@ -1,13 +1,19 @@
 // TODO deprecate component if possible (see MDXMarkdown)
+import { Box as MBox, BoxProps as MBoxProps } from "@mui/material";
 import DOMPurify from "isomorphic-dompurify";
 import React from "react";
 
 export interface MarkdownProps {
   content: string;
+  sx?: MBoxProps["sx"];
 }
 
-export const Markdown = ({ content }: MarkdownProps): JSX.Element => {
+export const Markdown = ({ content, sx }: MarkdownProps): JSX.Element => {
   return (
-    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content) }} />
+    <MBox
+      component="div"
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content) }}
+      sx={{ minWidth: 0, wordBreak: "break-word", ...sx }}
+    />
   );
 };

package/src/components/common/Section/components/CollapsableSection/collapsableSection.tsx

@@ -54,7 +54,7 @@ export const CollapsableSection = ({
       const duration = setTimeout(() => {
         setTransitionDuration("auto");
       }, 100);
-      return () => {
+      return (): void => {
         clearTimeout(duration);
       };
     } else {

package/src/hooks/useFileManifest/useRequestFileManifest.ts

@@ -31,7 +31,7 @@ export const useRequestFileManifest = (
       },
       type: FileManifestActionKind.FetchFileManifest,
     });
-    return () => {
+    return (): void => {
       fileManifestDispatch({
         payload: undefined,
         type: FileManifestActionKind.ClearFileManifest,

package/src/hooks/useRequestFileLocation.ts

@@ -140,7 +140,7 @@ export const useRequestFileLocation = (
 
   useEffect(() => {
     active.current = true;
-    return () => {
+    return (): void => {
       active.current = false;
     };
   }, []);

package/src/hooks/useResizeObserver.ts

@@ -42,7 +42,7 @@ export function useResizeObserver(
     const observer = observerRef.current;
     const observedEl = ref.current;
     observer.observe(observedEl);
-    return () => {
+    return (): void => {
       observer.unobserve(observedEl);
     };
   }, [onResize, ref]);

package/src/hooks/useWindowResize.ts

@@ -26,7 +26,7 @@ export const useWindowResize = (timeout = 200): WindowSize => {
     };
     // Add resize event listener.
     window.addEventListener("resize", onResize);
-    return () => {
+    return (): void => {
       // Remove resize event listener.
       window.removeEventListener("resize", onResize);
       // Clear timeout.

package/src/theme/common/palette.ts

@@ -4,107 +4,107 @@ import { CommonColors, TypeBackground, TypeText } from "@mui/material/styles";
 /**
  * Palette "Alert"
  */
-enum ALERT {
-  LIGHT = "#FED3D1",
-  LIGHTEST = "#FFF4F4",
-  MAIN = "#B42318",
-}
+const ALERT = {
+  LIGHT: "#FED3D1",
+  LIGHTEST: "#FFF4F4",
+  MAIN: "#B42318",
+};
 
 /**
  * Palette "Background"
  */
-enum BACKGROUND {
-  DEFAULT = "#F6F6F7",
-}
+const BACKGROUND = {
+  DEFAULT: "#F6F6F7",
+};
 
 /**
  * Palette "Info"
  */
-enum INFO {
-  CONTRAST_TEXT = "#00729C",
-  LIGHT = "#97D6EA",
-  LIGHTEST = "#F2FAFC",
-  MAIN = "#00729C",
-}
+const INFO = {
+  CONTRAST_TEXT: "#00729C",
+  LIGHT: "#97D6EA",
+  LIGHTEST: "#F2FAFC",
+  MAIN: "#00729C",
+};
 
 /**
  * Palette "Ink"
  */
-enum INK {
-  LIGHT = "#637381",
-  MAIN = "#212B36",
-}
+const INK = {
+  LIGHT: "#637381",
+  MAIN: "#212B36",
+};
 
 /**
  * Palette "Primary"
  */
-enum PRIMARY {
-  DARK = "#005EA9",
-  LIGHTEST = "#E6EFF6",
-  MAIN = "#1C7CC7",
-}
+const PRIMARY = {
+  DARK: "#005EA9",
+  LIGHTEST: "#E6EFF6",
+  MAIN: "#1C7CC7",
+};
 
 /**
  * Palette "Smoke"
  */
-enum SMOKE {
-  DARK = "#C4CDD5",
-  LIGHT = "#F6F6F7",
-  LIGHTEST = "#FAFBFB",
-  MAIN = "#E1E3E5",
-}
+const SMOKE = {
+  DARK: "#C4CDD5",
+  LIGHT: "#F6F6F7",
+  LIGHTEST: "#FAFBFB",
+  MAIN: "#E1E3E5",
+};
 
 /**
  * Palette "Success"
  */
-enum SUCCESS {
-  LIGHT = "#AEE9D1",
-  LIGHTEST = "#F1F8F5",
-  MAIN = "#287555",
-}
+const SUCCESS = {
+  LIGHT: "#AEE9D1",
+  LIGHTEST: "#F1F8F5",
+  MAIN: "#287555",
+};
 
 /**
  * Palette "Text"
  */
-enum TEXT {
-  PRIMARY = "#212B36",
-}
+const TEXT = {
+  PRIMARY: "#212B36",
+};
 
 /**
  * Palette "Warning"
  */
-enum WARNING {
-  CONTRAST_TEXT = "#B54708",
-  LIGHT = "#FFD79D",
-  LIGHTEST = "#FFFAEB",
-  MAIN = "#B54708",
-}
+const WARNING = {
+  CONTRAST_TEXT: "#B54708",
+  LIGHT: "#FFD79D",
+  LIGHTEST: "#FFFAEB",
+  MAIN: "#B54708",
+};
 
 /**
  * Default "Black"
  */
-enum BLACK {
-  DEFAULT = "#000000",
-}
+const BLACK = {
+  DEFAULT: "#000000",
+};
 
 /**
  * Default "White"
  */
-enum WHITE {
-  DEFAULT = "#ffffff",
-}
+const WHITE = {
+  DEFAULT: "#ffffff",
+};
 
 /**
  * Color alpha
  */
-enum ALPHA {
-  A04 = "0a",
-  A08 = "14",
-  A32 = "52",
-  A60 = "99",
-  A64 = "a3",
-  A80 = "cc",
-}
+const ALPHA = {
+  A04: "0a",
+  A08: "14",
+  A32: "52",
+  A60: "99",
+  A64: "a3",
+  A80: "cc",
+};
 
 /**
  * Color constants