@design-system-rte/core 0.10.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @design-system-rte/core
 
+## 0.13.0
+
+### Minor Changes
+
+- 89289e7: ## Changes
+
+  - (textarea) simplify required and optional appearence
+  - (textarea) set better props handling + handle resizing logic on angular comp
+  - (textarea) add auto scroll to top on blur event
+  - add angular textarea component
+  - extract constants in core
+  - add react textarea component
+
+- f6bb90d: ## Changes
+
+  - update Tag component to use computed properties for icon name and validation
+  - correct casing of compactSpacing property in Tag component and stories
+  - improve formatting and consistency in Tag component and interface
+  - add Tag component with status and decorative types, including styles and stories
+
+## 0.12.0
+
+### Minor Changes
+
+- b824254: ## Changes
+
+  - enhance Badge component with improved class bindings and styling options
+  - implement Badge component in Angular
+  - add Badge interface
+
+## 0.11.0
+
+### Minor Changes
+
+- ae703ee: ## Changes
+
+  - add keyboard test constants file
+  - add type to aria role mapping constant
+  - add keyboard event handling for backspace and delete keys
+  - add id property to text input component to get better accessibility
+  - update keyboard event handling in stories to use correct syntax
+  - extract chip props in interface
+
+## 0.10.1
+
+### Patch Changes
+
+- 9fcc804: ## Changes
+
+  - add correct behaviour on click
+
 ## 0.10.0
 
 ### Minor Changes

package/components/badge/badge.interface.d.ts

@@ -0,0 +1,10 @@
+export type BadgeType = "brand" | "neutral" | "indicator";
+export type BadgeSize = "xs" | "s" | "m" | "l";
+export type BadgeAppearance = "text" | "icon" | "empty";
+
+export interface BadgeProps {
+  badgeType?: BadgeType;
+  size?: BadgeSize;
+  appearance?: BadgeAppearance;
+  count?: number;
+}

package/components/badge/badge.utils.ts

@@ -0,0 +1,56 @@
+import { BadgeAppearance, BadgeSize } from "./badge.interface";
+
+const COUNT_THRESHOLD = 100;
+const COUNT_THRESHOLD_LABEL = "99+";
+
+interface ShowIconProps {
+  size: BadgeSize;
+  appearance: BadgeAppearance;
+  iconSize?: number;
+}
+
+interface ShowTextProps {
+  size: BadgeSize;
+  appearance: BadgeAppearance;
+  count?: number;
+}
+
+type ShowBadgeProps = ShowIconProps & ShowTextProps;
+
+const badgeIconSize: Record<BadgeSize, number | null> = {
+  xs: null,
+  s: null,
+  m: 12,
+  l: 20,
+};
+
+export function getBadgeIconSize(size: BadgeSize): number | undefined {
+  return badgeIconSize[size] ?? undefined;
+}
+
+export function getShowIcon({ size, appearance, iconSize }: ShowIconProps): boolean {
+  return !["xs", "s"].includes(size) && appearance === "icon" && !!iconSize;
+}
+
+export function getShowText({ size, appearance, count }: ShowTextProps): boolean {
+  return !["xs", "s"].includes(size) && appearance === "text" && typeof count === "number" && count > 0;
+}
+
+export function getShowBadge({ size, appearance, count, iconSize }: ShowBadgeProps): boolean {
+  switch (appearance) {
+    case "icon":
+      return getShowIcon({ size, appearance, iconSize });
+    case "text":
+      return getShowText({ size, appearance, count });
+    default:
+      return true;
+  }
+}
+
+export function getDisplayCount(count?: number): string {
+  if (typeof count !== "number") {
+    return "";
+  }
+
+  return count < COUNT_THRESHOLD ? count.toString() : COUNT_THRESHOLD_LABEL;
+}

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

@@ -9,4 +9,5 @@ export interface IconButtonProps {
 
 export interface IconButtonToggleProps extends Omit<IconButtonProps, "appearance"> {
   selected?: boolean;
+  defaultSelected?: boolean;
 }

package/components/chip/chip.constants.ts

@@ -0,0 +1,5 @@
+export const CHIP_TYPE_TO_ARIA_ROLE_MAP = {
+  single: "radio",
+  multi: "checkbox",
+  input: "option",
+};

package/components/chip/chip.interface.d.ts

@@ -0,0 +1,12 @@
+type ChipType = "single" | "multi" | "input";
+
+export interface ChipProps {
+  id: string;
+  label: string;
+  selected?: boolean;
+  onClick?: (event: MouseEvent | KeyboardEvent) => void;
+  onClose?: (event: MouseEvent | KeyboardEvent) => void;
+  disabled?: boolean;
+  type?: ChipType;
+  compactSpacing?: boolean;
+}

package/components/tag/tag.interface.d.ts

@@ -0,0 +1,34 @@
+export type TagType = "status" | "decorative";
+export type TagStatus = "success" | "information" | "warning" | "alert";
+export type TagColor =
+  | "brand"
+  | "neutral"
+  | "azur"
+  | "jade"
+  | "lavande"
+  | "ciel"
+  | "nuage"
+  | "givre"
+  | "brume"
+  | "glacier"
+  | "turquoise"
+  | "anis"
+  | "menthe"
+  | "citronnelle"
+  | "sable"
+  | "abricot"
+  | "coral"
+  | "rose"
+  | "petale"
+  | "quartz"
+  | "cendre";
+
+export interface TagProps {
+  tagType?: TagType;
+  status?: TagStatus;
+  color?: TagColor;
+  compactSpacing?: boolean;
+  label?: string;
+  showLeftIcon?: boolean;
+  iconName?: string;
+}

package/components/text-input/text-input.interface.d.ts

@@ -4,6 +4,7 @@ export type RightIconName = "close" | "visibility-show" | "visibility-hide";
 export type AssistiveAppearance = "description" | "error" | "success" | "link";
 
 export interface TextInputProps {
+  id: string;
   label?: string;
   labelPosition?: LabelPosition;
   showCounter?: boolean;

package/components/textarea/textarea.constants.ts

@@ -0,0 +1,9 @@
+import { TextareaRequirementIndicator } from "./textarea.interface";
+
+export const TEXTAREA_ICON_SIZE = 16;
+
+export const TEXTAREA_REQUIREMENT_INDICATOR_VALUE: Record<TextareaRequirementIndicator, string> = {
+  required: "(obligatoire)",
+  requiredIcon: "*",
+  optional: "(facultatif)",
+};

package/components/textarea/textarea.interface.d.ts

@@ -0,0 +1,20 @@
+export type TextareaLabelPosition = "top" | "side";
+export type TextareaAssistiveTextAppearance = "description" | "error" | "success" | "link";
+export type TextareaRequirementIndicator = "required" | "requiredIcon" | "optional";
+
+export interface TextareaProps {
+  label?: string;
+  labelId?: string;
+  labelPosition?: TextareaLabelPosition;
+  required?: boolean;
+  showLabelRequirement?: boolean;
+  resizeable?: boolean;
+  showCounter?: boolean;
+  value?: string;
+  defaultValue?: string;
+  assistiveTextLabel?: string;
+  assistiveTextAppearance?: TextareaAssistiveTextAppearance;
+  assistiveTextLink?: string;
+  showHandleIcon?: boolean;
+  showScrollBar?: boolean;
+}

package/constants/keyboard/keyboard-test.constants.ts

@@ -0,0 +1,7 @@
+import { SPACE_KEY, ENTER_KEY, DOWN_KEY, BACKSPACE_KEY, DELETE_KEY } from "./keyboard.constants";
+
+export const TESTING_SPACE_KEY = `{${SPACE_KEY}}`;
+export const TESTING_ENTER_KEY = `{${ENTER_KEY}}`;
+export const TESTING_DOWN_KEY = `{${DOWN_KEY}}`;
+export const TESTING_BACKSPACE_KEY = `{${BACKSPACE_KEY}}`;
+export const TESTING_DELETE_KEY = `{${DELETE_KEY}}`;

package/constants/keyboard/keyboard.constants.ts

@@ -0,0 +1,6 @@
+export const SPACE_KEY = " ";
+export const ENTER_KEY = "Enter";
+export const TAB_KEY = "Tab";
+export const DOWN_KEY = "ArrowDown";
+export const BACKSPACE_KEY = "Backspace";
+export const DELETE_KEY = "Delete";

package/design-tokens/tokens/_mixins.scss

@@ -92,6 +92,24 @@
   letter-spacing: $text-s-regular-letter-spacing;
 }
 
+@mixin typography-text-s-bold {
+  @include typography-text;
+  font-family: $text-s-bold-font-family;
+  font-weight: $text-s-bold-font-weight;
+  font-size: $text-s-bold-font-size;
+  line-height: $text-s-bold-line-height;
+  letter-spacing: $text-s-bold-letter-spacing;
+}
+
+@mixin typography-text-m {
+  @include typography-text;
+  font-family: $text-m-regular-font-family;
+  font-weight: $text-m-regular-font-weight;
+  font-size: $text-m-regular-font-size;
+  line-height: $text-m-regular-line-height;
+  letter-spacing: $text-m-regular-letter-spacing;
+}
+
 @mixin typography-text-l {
   @include typography-text;
   font-family: $text-l-regular-font-family;
@@ -101,6 +119,15 @@
   letter-spacing: $text-l-regular-letter-spacing;
 }
 
+@mixin typography-text-l-bold {
+  @include typography-text;
+  font-family: $text-l-bold-font-family;
+  font-weight: $text-l-bold-font-weight;
+  font-size: $text-l-bold-font-size;
+  line-height: $text-l-bold-line-height;
+  letter-spacing: $text-l-bold-letter-spacing;
+}
+
 @mixin typography-link {
   font-feature-settings: 'liga' off, 'clig' off;
   font-style: normal;

package/package.json

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

package/constants/keyboard.constants.ts

@@ -1,4 +0,0 @@
-export const SPACE_KEY = "{ }";
-export const ENTER_KEY = "{Enter}";
-export const TAB_KEY = "{Tab}";
-export const DOWN_KEY = "{ArrowDown}";