@design-system-rte/core 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @design-system-rte/core
 
+## 0.21.0
+
+### Minor Changes
+
+- f22d3ee: ## Changes
+  - (Docs) create subcomponent for pages
+
+- 8bca3e1: ## Changes
+  - (Card) mutualize testing common logic
+  - (Card) add card component
+
+- 4a444d4: ## Changes
+  - (Side Navigation) add Divider support for navItems & navMenus
+  - (Side Navigation) add Badge support
+  - (Side Navigation) add footer items
+  - (Side Navigation) add NavItem selection for SideNav
+  - (Tooltip) add customizable gap
+  - (Side Navigation) correct accesibility standards for ul and li items
+  - (Side Navigation) add Nested Menus to SideNav
+  - (Side Navigation) implement simple side nav from base side nav
+
 ## 0.20.0
 
 ### Minor Changes

package/components/card/card.constats.ts

@@ -0,0 +1,9 @@
+import { Size } from "../common/common-types";
+
+export const cardSize: Record<Size, number> = {
+  xs: 240,
+  s: 360,
+  m: 480,
+  l: 600,
+  xl: 720,
+};

package/components/card/card.interface.d.ts

@@ -0,0 +1,10 @@
+import { Size } from "../common/common-types";
+
+export type CardType = "default" | "outlined";
+
+export interface CardProps {
+  size?: Size;
+  cardType?: CardType;
+  clickable?: boolean;
+  disabled?: boolean;
+}

package/components/card/card.stories.shared.ts

@@ -0,0 +1,112 @@
+import type { Size } from "../common/common-types";
+
+import type { CardType } from "./card.interface";
+
+export interface CardStoryArgTypes {
+  size: {
+    control: "select";
+    options: Size[];
+    description: string;
+  };
+  cardType: {
+    control: "select";
+    options: CardType[];
+    description: string;
+  };
+  clickable: {
+    control: "boolean";
+    description: string;
+  };
+  disabled: {
+    control: "boolean";
+    description: string;
+  };
+}
+
+export const cardStoryArgTypes: CardStoryArgTypes = {
+  size: {
+    control: "select",
+    options: ["xs", "s", "m", "l", "xl"],
+    description: "Size of the card",
+  },
+  cardType: {
+    control: "select",
+    options: ["default", "outlined"],
+    description: "Type of card styling",
+  },
+  clickable: {
+    control: "boolean",
+    description: "Whether the card is clickable",
+  },
+  disabled: {
+    control: "boolean",
+    description: "Whether the card is disabled",
+  },
+};
+
+export interface SizeExample {
+  size: Size;
+  label: string;
+  width: string;
+}
+
+export const sizeExamples: SizeExample[] = [
+  { size: "xs", label: "Extra Small (xs)", width: "240px width" },
+  { size: "s", label: "Small (s)", width: "360px width" },
+  { size: "m", label: "Medium (m)", width: "480px width" },
+  { size: "l", label: "Large (l)", width: "600px width" },
+  { size: "xl", label: "Extra Large (xl)", width: "720px width" },
+];
+
+export interface CardTypeExample {
+  cardType: CardType;
+  title: string;
+  description: string;
+}
+
+export const cardTypeExamples: CardTypeExample[] = [
+  {
+    cardType: "default",
+    title: "Default Card",
+    description: "This card uses the default styling with elevation shadow.",
+  },
+  {
+    cardType: "outlined",
+    title: "Outlined Card",
+    description: "This card uses outlined styling with a border instead of shadow.",
+  },
+];
+
+export interface DefaultStoryArgs {
+  size: Size;
+  cardType: CardType;
+  clickable: boolean;
+  disabled: boolean;
+}
+
+export const defaultStoryArgs: DefaultStoryArgs = {
+  size: "m",
+  cardType: "default",
+  clickable: false,
+  disabled: false,
+};
+
+export interface ClickableStoryArgs extends DefaultStoryArgs {
+  clickable: true;
+}
+
+export const clickableStoryArgs: ClickableStoryArgs = {
+  ...defaultStoryArgs,
+  clickable: true,
+};
+
+export interface DisabledStoryArgs extends DefaultStoryArgs {
+  clickable: true;
+  disabled: true;
+}
+
+export const disabledStoryArgs: DisabledStoryArgs = {
+  ...defaultStoryArgs,
+  clickable: true,
+  disabled: true,
+};

package/components/divider/divider.interface.d.ts

@@ -1,5 +1,5 @@
 export type DividerThickness = "light" | "medium" | "bold";
-export type DividerAppearance = "default" | "inverse" | "brand";
+export type DividerAppearance = "default" | "inverse" | "brand" | "brand-navigation";
 export type DividerEndPoint = "square" | "round";
 
 export interface DividerProps {

package/components/side-nav/nav-item/nav-item.interface.d.ts

@@ -0,0 +1,20 @@
+import { BadgeProps } from "../../badge/badge.interface";
+import { SideNavAppearance } from "../side-nav.interface";
+
+export interface NavItemProps {
+  id?: string;
+  appearance?: SideNavAppearance;
+  label: string;
+  icon?: string;
+  showIcon?: boolean;
+  showBadge?: boolean;
+  collapsed?: boolean;
+  link?: string;
+  onClick?: () => void;
+  items?: NavItemProps[];
+  active?: boolean;
+  isNested?: boolean;
+  parentMenuOpen?: boolean;
+  badge?: BadgeProps;
+  showDivider?: boolean;
+}

package/components/side-nav/nav-item/nav-item.utils.ts

@@ -0,0 +1,8 @@
+import { IconSize } from "../../icon/icon.constants";
+
+export function getNavItemLabelIconSize(isNested = false, collapsed = false): number {
+  if (isNested) {
+    return IconSize.s;
+  }
+  return collapsed ? IconSize.l : IconSize.m;
+}

package/components/side-nav/nav-menu/nav-menu.interface.d.ts

@@ -0,0 +1,7 @@
+import { NavItemProps } from "../nav-item/nav-item.interface";
+
+export interface NavMenuProps extends NavItemProps {
+  items: NavItemProps[];
+  open?: boolean;
+  showMenuIcon?: boolean;
+}

package/components/side-nav/side-nav.constants.ts

@@ -0,0 +1,16 @@
+import { DividerAppearance } from "../divider/divider.interface";
+
+import { SideNavAppearance, SideNavSize } from "./side-nav.interface";
+
+export const sideNavCollapsedSize: number = 64;
+
+export const sideNavPanelSize: Record<SideNavSize, number> = {
+  s: 224,
+  m: 320,
+  l: 504,
+};
+
+export const dividerAppearanceBySideNavAppearance: Record<SideNavAppearance, DividerAppearance> = {
+  neutral: "default",
+  brand: "brand-navigation",
+};

package/components/side-nav/side-nav.interface.d.ts

@@ -0,0 +1,34 @@
+import { NavItemProps } from "./nav-item/nav-item.interface";
+
+export type SideNavSize = "s" | "m" | "l";
+
+export type SideNavAppearance = "neutral" | "brand";
+
+export interface SideNavHeaderConfig {
+  icon?: string;
+  title: string;
+  version?: string;
+  identifier?: string;
+  link?: string | null;
+  onClick?: () => void;
+  ariaLabel?: string;
+}
+
+export interface SideNavProps extends BaseSideNavProps {
+  collapsible?: boolean;
+  items: NavItemProps[];
+  footerItems?: NavItemProps[];
+  activeItem?: string;
+  headerConfig: SideNavHeaderConfig;
+}
+
+export interface BaseSideNavProps {
+  appearance?: SideNavAppearance;
+  size?: SideNavSize;
+  collapsed?: boolean;
+  showHeader?: boolean;
+  showFooter?: boolean;
+  showScrollbar?: boolean;
+  autoCollapse?: boolean;
+  scrollable?: boolean;
+}

package/components/tooltip/tooltip.constants.ts

@@ -1,2 +1,4 @@
 export const TOOLTIP_GAP = 4;
-export const TOOLTIP_GAP_ARROW = 9;
+export const TOOLTIP_GAP_ARROW = 5;
+export const TOOLTIP_FADE_OUT_DURATION = 200;
+export const TOOLTIP_ANIMATION_DURATION = 150;

package/components/tooltip/tooltip.interface.d.ts

@@ -3,4 +3,5 @@ export interface TooltipProps {
   alignment?: import("../../common-types").Alignment;
   label?: string;
   arrow?: boolean;
+  gap?: number;
 }

package/components/tooltip/tooltip.utils.ts

@@ -0,0 +1,5 @@
+import { TOOLTIP_GAP, TOOLTIP_GAP_ARROW } from "./tooltip.constants";
+
+export function getTooltipGap(arrow: boolean, customGap: number = TOOLTIP_GAP): number {
+  return arrow ? TOOLTIP_GAP_ARROW + customGap : customGap;
+}

package/design-tokens/tokens/_mixins.scss

@@ -171,6 +171,15 @@
   font-style: normal;
 }
 
+@mixin typography-heading-xs {
+  @include typography-heading;
+  font-family: $heading-xs-semibold-font-family;
+  font-weight: $heading-xs-semibold-font-weight;
+  font-size: $heading-xs-semibold-font-size;
+  line-height: $heading-xs-semibold-line-height;
+  letter-spacing: $heading-xs-semibold-letter-spacing;
+}
+
 @mixin typography-heading-s {
   @include typography-heading;
   font-family: $heading-s-semibold-font-family;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-system-rte/core",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "main": "index.js",
   "scripts": {
     "lint": "eslint .",