@design-system-rte/core 0.21.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @design-system-rte/core
 
+## 1.1.0
+
+### Minor Changes
+
+- aa4024c: ## Changes
+  - (Core) add Nunito font to serve to react and angular package
+
+- ddb8b02: ## Changes
+  - (Core) add elevation mixins
+
+## 1.0.0
+
+### Major Changes
+
+- adc4eb6: ## Changes
+  - (Public Release) Public Release
+
+### Minor Changes
+
+- 90fd2b4: ## Changes
+  - (Toast) extract getToastPriority logic to core + use computed to display actionButton + add custom icon to input
+  - (Toast) add angular component
+  - (Toast) add spacing from viewport + handle warning case in priority + add leftIcon and action button display boolean
+  - (Toast) add priority queue management
+  - (Toast) add basic react component
+
+- 1b87a18: ## Changes
+  - (Button) set correct position to badge
+  - (Button) add badge
+
+- f3d1179: ## Changes
+  - (Banner) remove show icon props + remove top and left radius corner
+  - (Banner) update design
+
 ## 0.21.0
 
 ### Minor Changes

package/common/common-types.ts

@@ -1,2 +1,4 @@
 export type Position = "auto" | "top" | "bottom" | "left" | "right";
 export type Alignment = "start" | "center" | "end";
+export type Theme = "bleu_iceberg" | "violet" | "vert_foret";
+export type Mode = "light" | "dark";

package/components/banner/banner.interface.d.ts

@@ -4,12 +4,11 @@ export interface BannerProps {
   position?: BannerPosition;
   title?: string;
   closable?: boolean;
-  showIcon?: boolean;
   onClose?: () => void;
   actionCallback?: () => void;
   actionLabel?: string;
   isOpen?: boolean;
 }
 
-export type BannerType = "default" | "alert";
+export type BannerType = "info" | "error" | "success" | "warning";
 export type BannerPosition = "overlay" | "push";

package/components/button/button.interface.d.ts

@@ -7,4 +7,8 @@ export interface ButtonProps {
   size?: import("./common/common-button").ButtonSize;
   disabled?: boolean;
   iconPosition?: ButtonIconPosition;
+  badgeContent?: import("../../badge/badge.interface").BadgeContent;
+  badgeCount?: import("../../badge/badge.interface").BadgeCount;
+  badgeType?: import("../../badge/badge.interface").BadgeType;
+  badgeIcon?: import("../../badge/badge.interface").BadgeProps["icon"];
 }

package/components/button/common/common-button.constants.ts

@@ -1,7 +1,15 @@
+import { BadgeSize } from "../../badge/badge.interface";
+
 import { ButtonSize } from "./common-button";
 
-export const buttonIconSize: Record<ButtonSize, number> = {
+export const ButtonIconSize: Record<ButtonSize, number> = {
   s: 16,
   m: 20,
   l: 24,
 };
+
+export const ButtonBadgeSizeMapping: Record<ButtonSize, BadgeSize> = {
+  s: "m",
+  m: "m",
+  l: "l",
+};

package/components/grid/grid.scss

@@ -1,4 +1,5 @@
-@use '@design-system-rte/core/design-tokens/main.scss' as *;
+@use '../../design-tokens/tokens/_spacing.scss' as *;
+@use '../../design-tokens/tokens/_layout.scss' as *;
 
 $grid-max-width-narrow: 864px;
 $grid-max-width-wide: 1296px;

package/components/grid/grid.stories.scss

@@ -1,5 +1,6 @@
-@use '@design-system-rte/core/design-tokens/main.scss' as *;
 @use '@design-system-rte/core/design-tokens/primitives/_colors.scss' as *;
+@use '../../design-tokens/tokens/_spacing.scss' as *;
+@use '../../design-tokens/tokens/_mixins.scss' as *;
 
 .sb-css-grid-container {
   background-color: $jaune-indications-200;

package/components/icon/icon.constants.ts

@@ -6,3 +6,10 @@ export const IconSize: Record<Exclude<Size, "xs">, number> = {
   l: 24,
   xl: 32,
 };
+
+export const IconTypeMap: Record<string, string> = {
+  info: "info",
+  error: "dangerous",
+  success: "check-circle",
+  warning: "warning",
+};

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

@@ -1,4 +1,4 @@
-import { IconSize } from "../../icon/icon.constants";
+import { IconSize } from "@design-system-rte/core/components/icon/icon.constants";
 
 export function getNavItemLabelIconSize(isNested = false, collapsed = false): number {
   if (isNested) {

package/components/toast/toast.constants.ts

@@ -0,0 +1,9 @@
+const TOAST_DURATION_SMALL = 3000;
+const TOAST_DURATION_MEDIUM = 5000;
+const TOAST_DURATION_LARGE = 8000;
+
+export const ToastDurationMap = {
+  short: TOAST_DURATION_SMALL,
+  medium: TOAST_DURATION_MEDIUM,
+  long: TOAST_DURATION_LARGE,
+};

package/components/toast/toast.interface.d.ts

@@ -0,0 +1,21 @@
+export type ToastType = "info" | "success" | "warning" | "error" | "neutral";
+
+export type ToastDuration = "short" | "medium" | "long";
+
+export type ToastPlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "bottom-center";
+
+export interface ToastProps {
+  message: string;
+  isOpen?: boolean;
+  type?: ToastType;
+  duration?: ToastDuration;
+  onClose?: () => void;
+  placement?: ToastPlacement;
+  closable?: boolean;
+  autoDismiss?: boolean;
+  iconName?: string;
+  showLeftIcon?: boolean;
+  showActionButton?: boolean;
+  actionButtonLabel?: string;
+  onActionButtonClick?: () => void;
+}

package/components/toast/toast.utils.ts

@@ -0,0 +1,33 @@
+export const getToastPriority = (toast: {
+  hasActionButton: boolean;
+  type: "info" | "success" | "warning" | "error" | "neutral";
+}) => {
+  const { hasActionButton: hasButtonAction, type } = toast;
+  if (hasButtonAction) {
+    switch (type) {
+      case "error":
+        return 1;
+      case "warning":
+        return 3;
+      case "success":
+        return 5;
+      case "info":
+        return 6;
+      default:
+        return 7;
+    }
+  } else {
+    switch (type) {
+      case "error":
+        return 2;
+      case "warning":
+        return 4;
+      case "success":
+        return 8;
+      case "info":
+        return 9;
+      default:
+        return 10;
+    }
+  }
+};

package/components/tooltip/tooltip.utils.ts

@@ -1,4 +1,4 @@
-import { TOOLTIP_GAP, TOOLTIP_GAP_ARROW } from "./tooltip.constants";
+import { TOOLTIP_GAP, TOOLTIP_GAP_ARROW } from "@design-system-rte/core/components/tooltip/tooltip.constants";
 
 export function getTooltipGap(arrow: boolean, customGap: number = TOOLTIP_GAP): number {
   return arrow ? TOOLTIP_GAP_ARROW + customGap : customGap;

package/css/rte-fonts.css

@@ -0,0 +1 @@
+@font-face{font-display:swap;font-family:"Nunito";font-style:normal;font-weight:300;src:url("@design-system-rte/core/assets/fonts/nunito-light-300.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Nunito";font-style:normal;font-weight:400;src:url("@design-system-rte/core/assets/fonts/nunito-regular-400.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Nunito";font-style:normal;font-weight:600;src:url("@design-system-rte/core/assets/fonts/nunito-semi-bold-600.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Nunito";font-style:normal;font-weight:700;src:url("@design-system-rte/core/assets/fonts/nunito-bold-700.woff2") format("woff2")}

package/css-font-generator.ts

@@ -0,0 +1,51 @@
+import fs from "fs";
+import path from "path";
+
+import sass from "sass";
+
+const outputDir = path.resolve(__dirname, "css");
+
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir);
+}
+
+const fontFile = `
+    @font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 300;
+  src: url('@design-system-rte/core/assets/fonts/nunito-light-300.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 400;
+  src: url('@design-system-rte/core/assets/fonts/nunito-regular-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 600;
+  src: url('@design-system-rte/core/assets/fonts/nunito-semi-bold-600.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 700;
+  src: url('@design-system-rte/core/assets/fonts/nunito-bold-700.woff2') format('woff2');
+}
+`;
+
+const fontResult = sass.compileString(fontFile, {
+  loadPaths: [path.resolve(__dirname)],
+  style: "compressed",
+});
+
+fs.writeFileSync(path.join(outputDir, "rte-fonts.css"), fontResult.css);

package/design-tokens/fonts.scss

@@ -0,0 +1,31 @@
+@font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 300;
+  src: url('/assets/fonts/nunito-light-300.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/assets/fonts/nunito-regular-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/assets/fonts/nunito-semi-bold-600.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/assets/fonts/nunito-bold-700.woff2') format('woff2');
+}

package/design-tokens/main-internal.scss

@@ -1,4 +1,5 @@
 @forward "main";
 @forward "tokens/gradient";
 @forward 'primitives/colors';
-@forward 'tokens/zindex';
+@forward 'tokens/zindex';
+@forward 'tokens/shadows';

package/design-tokens/main.scss

@@ -5,7 +5,4 @@
 @forward "tokens/opacity";
 @forward "tokens/mixins";
 @forward "tokens/themes";
-@forward "tokens/elevation";
-
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap");
-@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+@forward "tokens/elevation";

package/design-tokens/tokens/_elevation.scss

@@ -29,6 +29,16 @@
   background: linear-gradient(0deg, var(--elevation-surface-shadow-2) 0%, var(--elevation-surface-shadow-2) 100%);
 }
 
+@mixin neutral-drop-shadow-2 {
+  filter:
+    drop-shadow($shadow-2-key-position-x $shadow-2-key-position-y $shadow-2-key-blur var(--elevation-shadow-key)) drop-shadow($ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur var(--elevation-shadow-ambient));
+}
+
+@mixin elevation-neutral-drop-shadow-2 {
+  @include neutral-drop-shadow-2;
+  background: linear-gradient(0deg, var(--elevation-surface-shadow-2) 0%, var(--elevation-surface-shadow-2) 100%);
+}
+
 @mixin neutral-shadow-3 {
   box-shadow: $shadow-3-key-position-x $shadow-3-key-position-y $shadow-3-key-blur $shadow-3-key-spread var(--elevation-shadow-key),
     $ambient-shadow-position-x $ambient-shadow-position-y $ambient-shadow-blur $ambient-shadow-spread var(--elevation-shadow-ambient);

package/design-tokens/tokens/_mixins.scss

@@ -198,6 +198,24 @@
   letter-spacing: $heading-m-semibold-letter-spacing;
 }
 
+@mixin typography-heading-l {
+  @include typography-heading;
+  font-family: $heading-l-semibold-font-family;
+  font-weight: $heading-l-semibold-font-weight;
+  font-size: $heading-l-semibold-font-size;
+  line-height: $heading-l-semibold-line-height;
+  letter-spacing: $heading-l-semibold-letter-spacing;
+}
+
+@mixin typography-heading-xl {
+  @include typography-heading;
+  font-family: $heading-xl-semibold-font-family;
+  font-weight: $heading-xl-semibold-font-weight;
+  font-size: $heading-xl-semibold-font-size;
+  line-height: $heading-xl-semibold-line-height;
+  letter-spacing: $heading-xl-semibold-letter-spacing;
+}
+
 @mixin typography-checkbox-error {
   @include typography-text-s;
   font-weight: $text-s-bold-font-weight;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@design-system-rte/core",
-  "version": "0.21.0",
+  "version": "1.1.0",
   "main": "index.js",
   "scripts": {
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
-    "build": "npm run build:css-themes",
+    "build": "npm run build:css-themes && npm run build:css-fonts",
     "build:css-themes": "ts-node css-theme-generator.ts",
+    "build:css-fonts": "ts-node css-font-generator.ts",
     "generate:tokens": "ts-node ./design-tokens/generator.ts",
     "prepublishOnly": "npm run build"
   },