@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/AppContainer.js

@@ -1,96 +1,142 @@
-import React, { Dispatch, SetStateAction, RefObject, ComponentProps, ReactElement } from 'react';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { A as AppContainerContext } from './context.js';
+import styled from 'styled-components';
 import { A as AppSidePanelVariant } from './types.js';
-import { B as BreadcrumbItemProps } from './types3.js';
-import { V as ValueOf, C as Comp } from './helpers.js';
-import { T as Theme } from './colors.js';
+import { I as I18nProvider } from './context2.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
 
-declare const Product: {
-    readonly asm: "asm";
-    readonly 'brand-trust': "brand-trust";
-    readonly certificates: "certificates";
-    readonly ondmarc: "ondmarc";
-    readonly pulse: "pulse";
-    readonly radar: "radar";
-    readonly 'rojo-ds': "rojo-ds";
-    readonly 'vendor-secure': "vendor-secure";
-    readonly website: "website";
-};
-type Product = ValueOf<typeof Product>;
-declare const ProductName: {
-    readonly asm: "ASM";
-    readonly 'brand-trust': "Brand Trust";
-    readonly certificates: "Certificates";
-    readonly ondmarc: "OnDMARC";
-    readonly pulse: "Pulse";
-    readonly radar: "RADAR";
-    readonly 'rojo-ds': "ROJO DS";
-    readonly 'vendor-secure': "Vendor Secure";
-    readonly website: "Website";
-};
-type ProductName = ValueOf<typeof ProductName>;
-declare const ProductLogo: {
-    readonly asm: JSX.Element;
-    readonly 'brand-trust': JSX.Element;
-    readonly certificates: JSX.Element;
-    readonly ondmarc: JSX.Element;
-    readonly pulse: JSX.Element;
-    readonly radar: JSX.Element;
-    readonly 'rojo-ds': JSX.Element;
-    readonly 'vendor-secure': JSX.Element;
-    readonly website: JSX.Element;
-};
-type ProductLogo = ValueOf<typeof ProductLogo>;
-
-/**
- * Context props.
- */
-type AppContainerState = {
-    /** Collapses the side panel. */
-    collapseSidePanel(): void;
-    /** Expandes the side panel. */
-    expandSidePanel(): void;
-    /** Product theme. */
-    product?: AppContainerProps['product'];
-    /** Set breadcrumbs of the page. */
-    setBreadcrumbs(breadcrumbs?: Omit<BreadcrumbItemProps, 'ref'>[]): void;
-    /** Page breadcrumbs. */
-    readonly breadcrumbs?: Omit<BreadcrumbItemProps, 'ref'>[];
-    /** Side panel variant. */
-    sidePanelVariant: AppSidePanelVariant;
-    /** Change side panel variant. */
-    setSidePanelVariant: Dispatch<SetStateAction<AppSidePanelVariant>>;
-    /** AppContainer ref. */
-    appContainerRef: RefObject<HTMLDivElement>;
-    /** Whether the App takes the entire screen or not. */
-    isFullScreen?: boolean;
-};
 /**
- * Component props.
+ * Component style.
  */
-interface AppContainerProps extends ComponentProps<'div'> {
-    /** Whether the App takes the entire screen or not. */
-    isFullScreen?: boolean;
-    /** The locale to apply to the children. */
-    locale?: string;
-    /** Product theme to apply to everything within. This overrides the CSS variables automatically. */
-    product?: Product | {
-        name: string;
-        logo?: ReactElement;
-    };
-    /** Overall theme. */
-    theme?: Theme;
-}
-type StyledAppContainerProps = Omit<AppContainerProps, 'locale' | 'product'> & {
-    $theme: Theme;
-    $product?: AppContainerProps['product'];
-};
+const StyledAppContainer = styled.div`
+  box-sizing: content-box;
+
+  --redsift-color-text-primary: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return `var(--redsift-color-${$theme}-components-text-primary);`;
+}};
+  --redsift-color-text-secondary: ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return `var(--redsift-color-${$theme}-components-text-secondary);`;
+}};
+  color: ${_ref3 => {
+  let {
+    $theme
+  } = _ref3;
+  return `var(--redsift-color-${$theme}-components-text-primary)`;
+}};
+`;
 
-declare const AppContainerContext: React.Context<AppContainerState | null>;
+const _excluded = ["children", "className", "locale", "product", "theme", "isFullScreen"];
+const COMPONENT_NAME = 'AppContainer';
+const CLASSNAME = 'redsift-app-container';
+const RadarSvgLinearGradient = () => /*#__PURE__*/React__default.createElement("svg", {
+  width: "0",
+  height: "0"
+}, /*#__PURE__*/React__default.createElement("linearGradient", {
+  id: "radar-gradient-default",
+  x1: "100%",
+  y1: "100%",
+  x2: "0%",
+  y2: "0%"
+}, /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(81, 183, 164, 1)",
+  offset: "0%"
+}), /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(0, 129, 195, 1)",
+  offset: "100%"
+})), /*#__PURE__*/React__default.createElement("linearGradient", {
+  id: "radar-gradient-hover",
+  x1: "100%",
+  y1: "100%",
+  x2: "0%",
+  y2: "0%"
+}, /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(65, 146, 131, 1)",
+  offset: "0%"
+}), /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(3, 114, 171, 1)",
+  offset: "100%"
+})), /*#__PURE__*/React__default.createElement("linearGradient", {
+  id: "radar-gradient-active",
+  x1: "100%",
+  y1: "100%",
+  x2: "0%",
+  y2: "0%"
+}, /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(58, 122, 110, 1)",
+  offset: "0%"
+}), /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(0, 96, 145, 1)",
+  offset: "100%"
+})));
 
-declare const RadarSvgLinearGradient: React.FC;
 /**
  * The AppContainer component.
  */
-declare const AppContainer: Comp<AppContainerProps, HTMLDivElement>;
+const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
+  const _ref = useRef();
+  const divRef = ref || _ref;
+  const {
+      children,
+      className,
+      locale,
+      product,
+      theme: propsTheme,
+      isFullScreen = false
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const [sidePanelVariant, setSidePanelVariant] = useState(isFullScreen ? AppSidePanelVariant.hidden : AppSidePanelVariant.standard);
+  const [breadcrumbs, setBreadcrumbs] = useState();
+  useEffect(() => {
+    if (isFullScreen && sidePanelVariant !== AppSidePanelVariant.hidden) {
+      setSidePanelVariant(AppSidePanelVariant.hidden);
+    } else if (!isFullScreen && sidePanelVariant !== AppSidePanelVariant.standard) {
+      setSidePanelVariant(AppSidePanelVariant.standard);
+    }
+  }, [isFullScreen]);
+  const state = {
+    collapseSidePanel() {
+      setSidePanelVariant(AppSidePanelVariant.shrinked);
+    },
+    expandSidePanel() {
+      setSidePanelVariant(AppSidePanelVariant.standard);
+    },
+    setBreadcrumbs(breadcrumbs) {
+      setBreadcrumbs(breadcrumbs);
+    },
+    product,
+    breadcrumbs,
+    sidePanelVariant,
+    setSidePanelVariant,
+    appContainerRef: divRef,
+    isFullScreen
+  };
+  return /*#__PURE__*/React__default.createElement(StyledAppContainer, _extends({}, forwardedProps, {
+    id: "redsift-app-container",
+    $theme: theme,
+    $product: product,
+    className: classNames(AppContainer.className, className),
+    ref: divRef
+  }), /*#__PURE__*/React__default.createElement(AppContainerContext.Provider, {
+    value: state
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(I18nProvider, {
+    locale: locale
+  }, children))), /*#__PURE__*/React__default.createElement(RadarSvgLinearGradient, null));
+});
+AppContainer.className = CLASSNAME;
+AppContainer.displayName = COMPONENT_NAME;
 
-export { AppContainerContext as A, Product as P, RadarSvgLinearGradient as R, StyledAppContainerProps as S, ProductName as a, ProductLogo as b, AppContainerState as c, AppContainerProps as d, AppContainer as e };
+export { AppContainer as A, RadarSvgLinearGradient as R };
+//# sourceMappingURL=AppContainer.js.map

package/_internal/AppContent.js

@@ -1,25 +1,92 @@
-import { ComponentProps } from 'react';
-import { h as StylingProps, C as ContainerProps } from './styles2.js';
-import { T as Theme } from './colors.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext } from 'react';
+import classNames from 'classnames';
+import { A as AppContainerContext } from './context.js';
+import { u as useIsLoaded } from './useIsLoaded.js';
+import styled, { css } from 'styled-components';
+import { j as baseContainer } from './styles4.js';
+import { u as useTheme } from './useTheme.js';
+import { A as AppSidePanelVariant } from './types.js';
 
 /**
- * Component props.
+ * Component style.
  */
-interface AppContentProps extends ComponentProps<'main'>, StylingProps, ContainerProps {
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledAppContentProps = Omit<AppContentProps, 'product'> & {
-    $isLoaded: boolean;
-    $isSidePanelCollapsed: boolean;
-    $isAppFullScreen: boolean;
-    $theme: AppContentProps['theme'];
-};
+const StyledAppContent = styled.main`
+  padding: 16px 64px;
+  ${baseContainer}
+
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return $theme ? css`
+          background-color: var(--redsift-color-${$theme}-components-page-background);
+        ` : '';
+}}
+  box-sizing: border-box;
+  min-height: calc(100vh - 92px);
+
+  @media screen and (max-width: 768px) {
+    padding: 0px;
+  }
+
+  ${_ref2 => {
+  let {
+    $isSidePanelCollapsed,
+    $isAppFullScreen
+  } = _ref2;
+  return $isAppFullScreen ? css`
+          transform: translate(0px);
+          width: calc(100%);
+        ` : !$isSidePanelCollapsed ? css`
+          transform: translate(254px);
+          width: calc(100% - 254px);
+        ` : css`
+          transform: translate(68px);
+          width: calc(100% - 68px);
+        `;
+}}
+
+  ${_ref3 => {
+  let {
+    $isLoaded
+  } = _ref3;
+  return $isLoaded ? css`
+          transition: transform 0.25s ease-out, width 0.25s ease-out;
+        ` : '';
+}}
+`;
+
+const _excluded = ["children", "className", "theme"];
+const COMPONENT_NAME = 'AppContent';
+const CLASSNAME = 'redsift-app-content';
 
 /**
  * The AppContent component.
  */
-declare const AppContent: Comp<AppContentProps, HTMLElement>;
+const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const {
+    isLoaded
+  } = useIsLoaded();
+  const appContainerState = useContext(AppContainerContext);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(StyledAppContent, _extends({}, forwardedProps, {
+    $isLoaded: isLoaded,
+    $isSidePanelCollapsed: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true,
+    $isAppFullScreen: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false,
+    $theme: theme,
+    className: classNames(AppContent.className, className),
+    ref: ref
+  }), children);
+});
+AppContent.className = CLASSNAME;
+AppContent.displayName = COMPONENT_NAME;
 
-export { AppContentProps as A, StyledAppContentProps as S, AppContent as a };
+export { AppContent as A };
+//# sourceMappingURL=AppContent.js.map

package/_internal/Badge2.js

@@ -1,9 +1,142 @@
-import { a as BadgeProps } from './types2.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { T as Theme, f as PresentationColorPalette, N as NotificationsColorPalette } from './colors.js';
+import { i as baseStyling } from './styles4.js';
+import { u as useTheme } from './useTheme.js';
+
+/**
+ * Component variant.
+ */
+const BadgeVariant = {
+  dot: 'dot',
+  standard: 'standard'
+};
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledBadge = styled.div`
+  ${baseStyling}
+  box-sizing: content-box;
+
+  ${_ref => {
+  let {
+    $color,
+    $isReversed,
+    $theme
+  } = _ref;
+  if ($isReversed) {
+    return css`
+        background-color: var(--redsift-color-neutral-${$theme === Theme.light ? 'white' : 'x-dark-grey'});
+
+        &,
+        .redsift-icon {
+          color: ${Object.keys(PresentationColorPalette).includes($color) ? `var(--redsift-color-presentation-${$color}-darker);` : Object.keys(NotificationsColorPalette).includes($color) ? `var(--redsift-color-notifications-${$color}-primary);` : css`var(--redsift-color-neutral-x-dark-grey);`};
+        }
+      `;
+  } else {
+    return css`
+        background-color: ${Object.keys(PresentationColorPalette).includes($color) ? `var(--redsift-color-presentation-${$color}-darker);` : Object.keys(NotificationsColorPalette).includes($color) ? `var(--redsift-color-notifications-${$color}-primary);` : css`var(--redsift-color-neutral-x-dark-grey);`};
+        &,
+        .redsift-icon {
+          color: var(--redsift-color-neutral-white);
+        }
+      `;
+  }
+}}
+
+  ${_ref2 => {
+  let {
+    $variant,
+    $autoBreak
+  } = _ref2;
+  switch ($variant) {
+    case BadgeVariant.dot:
+      return css`
+          border-radius: 50%;
+          height: 8px;
+          margin-bottom: 12px;
+          margin-right: 12px;
+          width: 8px;
+        `;
+    case BadgeVariant.standard:
+    default:
+      return css`
+          align-items: center;
+          border-radius: 64px;
+          display: inline-flex;
+          gap: 4px;
+          height: fit-content;
+          justify-content: center;
+          min-width: 8px;
+          padding: 4px 6px;
+          text-align: center;
+          width: fit-content;
+          word-break: ${$autoBreak ? 'break-word' : 'normal'};
+
+          &,
+          .redsift-icon,
+          .redsift-number,
+          .redsift-text {
+            font-family: var(--redsift-typography-badge-font-family);
+            font-size: var(--redsift-typography-badge-font-size);
+            font-weight: var(--redsift-typography-badge-font-weight);
+            line-height: var(--redsift-typography-badge-line-height);
+          }
+
+          .redsift-icon {
+            width: unset;
+            height: unset;
+
+            > svg {
+              width: 1em;
+              height: 1em;
+            }
+          }
+        `;
+  }
+}}
+`;
+
+const _excluded = ["autoBreak", "children", "className", "color", "isReversed", "theme", "variant"];
+const COMPONENT_NAME = 'Badge';
+const CLASSNAME = 'redsift-badge';
 
 /**
  * The Badge component.
  */
-declare const Badge: Comp<BadgeProps, HTMLDivElement>;
+const Badge = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      autoBreak,
+      children,
+      className,
+      color: propsColor,
+      isReversed,
+      theme: propsTheme,
+      variant: propsVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const color = [...Object.values(NotificationsColorPalette), ...Object.values(PresentationColorPalette)].includes(propsColor) ? propsColor : 'question';
+  const variant = Object.values(BadgeVariant).includes(propsVariant) ? propsVariant : 'dot';
+  return /*#__PURE__*/React__default.createElement(StyledBadge, _extends({}, forwardedProps, {
+    $autoBreak: autoBreak,
+    $color: color,
+    $isReversed: isReversed,
+    $theme: theme,
+    $variant: variant,
+    className: classNames(Badge.className, `${Badge.className}-${variant}`, className),
+    ref: ref
+  }), variant === BadgeVariant.standard ? children : null);
+});
+Badge.className = CLASSNAME;
+Badge.displayName = COMPONENT_NAME;
 
-export { Badge as B };
+export { BadgeVariant as B, Badge as a };
+//# sourceMappingURL=Badge2.js.map

package/_internal/BreadcrumbItem.js

@@ -1,9 +1,91 @@
-import { B as BreadcrumbItemProps } from './types3.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import styled, { css } from 'styled-components';
+import { u as useTheme } from './useTheme.js';
+
+/**
+ * Component style.
+ */
+const StyledBreadcrumbItem = styled.a`
+  background: none;
+  border: none;
+  cursor: unset;
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
+  padding: 4px;
+  text-decoration: none;
+
+  ${_ref => {
+  let {
+    $isDisabled,
+    $isCurrent
+  } = _ref;
+  return css`
+    ${$isDisabled ? `
+        color: var(--redsift-color-neutral-mid-grey);
+      ` : $isCurrent ? `
+        color: var(--redsift-color-primary-n);
+      ` : `
+        color: var(--redsift-redsift-color-text-primary);
+      `}
+
+    ${!$isDisabled && !$isCurrent && css`
+      &:hover,
+      &:focus-visible {
+        // cursor: pointer;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+      }
+    `}
+  `;
+}}
+
+  &:focus-visible {
+    outline: 2px solid var(--redsift-redsift-color-text-primary);
+  }
+`;
+
+const _excluded = ["as", "children", "className", "href", "isCurrent", "isDisabled", "theme"];
+const COMPONENT_NAME = 'BreadcrumbItem';
+const CLASSNAME = 'redsift-breadcrumb-item';
 
 /**
  * The BreadcrumbItem components is a list of links to the parent pages of the current page in hierarchical order.
  */
-declare const BreadcrumbItem: Comp<BreadcrumbItemProps, HTMLAnchorElement>;
+const BreadcrumbItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      href,
+      isCurrent,
+      isDisabled,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  warnIfNoAccessibleLabelFound(props, [children], 'BreadcrumbItem');
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(StyledBreadcrumbItem, _extends({
+    as: as || 'a',
+    role: !isCurrent ? 'link' : undefined,
+    tabIndex: !isDisabled && !isCurrent ? 0 : undefined
+  }, forwardedProps, {
+    $isCurrent: isCurrent,
+    $isDisabled: isDisabled,
+    $theme: theme,
+    "aria-current": isCurrent ? 'page' : undefined,
+    "aria-disabled": isDisabled || isCurrent,
+    className: classNames(BreadcrumbItem.className, className),
+    href: !isDisabled && !isCurrent ? href : undefined,
+    ref: ref
+  }), children);
+});
+BreadcrumbItem.className = CLASSNAME;
+BreadcrumbItem.displayName = COMPONENT_NAME;
 
 export { BreadcrumbItem as B };
+//# sourceMappingURL=BreadcrumbItem.js.map