@orangesk/orange-design-system 2.0.0-beta.19 → 2.0.0-beta.20

package/src/components/Icon/iconSearchTags.ts

@@ -4,84 +4,52 @@ export const iconsWithTags = {
   "accessibility-mobility": ["people"],
   "accessibility-motor": ["other"],
   "accessibility-vision": ["other"],
-  accessibility: ["people"],
-  add: ["common"],
-  advertising: ["other"],
-  aeroplane: ["vehicles"],
   "age-rating-3": ["other"],
   "airbox-auto": ["vehicles", "waves"],
   "alias-numbers": ["people"],
   "android-manage": ["other"],
-  ai: ["other", "devices"],
-  antenna: ["waves"],
   "apartment-building": ["buildings"],
-  apps: ["other"],
-  article: ["reading"],
-  assistent: ["other"],
-  assistance: ["other"],
-  at: ["common"],
-  avatar: ["common", "people"],
   "backup-internet": ["waves"],
-  bank: ["buildings"],
   "battery-charging": ["other"],
   "battery-full": ["other"],
   "battery-status-1-3": ["other"],
   "battery-status-charging": ["other"],
   "battery-status-full": ["other"],
-  bed: ["other"],
-  birth: ["other"],
-  birthday: ["time"],
-  bluetooth: ["common"],
   "boarding-pass": ["vehicles"],
   "book-award": ["reading", "entertainment"],
-  book: ["reading", "entertainment"],
-  boxes: ["other"],
-  briefcase: ["other"],
   "browser-plug-in": ["other"],
   "business-advisor": ["people"],
   "business-consultant": ["people"],
   "business-lounge": ["people"],
-  buy: ["common"],
   "calendar-30": ["time"],
   "calendar-alarm": ["time"],
   "calendar-day": ["time"],
   "calendar-month": ["time"],
   "call-in": ["arrows", "handset"],
   "call-out": ["arrows", "handset"],
-  call: ["handset"],
-  camera: ["other"],
   "car-park": ["other"],
-  car: ["vehicles"],
   "card-reader": ["other"],
-  casting: ["entertainment"],
   "cest-ici": ["arrows"],
-  charger: ["other"],
-  chatbot: ["other"],
   "check-your-balance": ["arrows"],
-  checked: ["checks"],
   "chevron-down": ["common", "arrows"],
   "chevron-end": ["common", "arrows"],
   "chevron-left": ["common", "arrows"],
   "chevron-right": ["common", "arrows"],
   "chevron-start": ["common", "arrows"],
   "chevron-up": ["common", "arrows"],
-  child: ["people"],
   "children-channel": ["entertainment"],
   "childrens-content": ["entertainment"],
   "christmas-tree": ["other"],
   "cinema-ticket-2-for-1": ["entertainment"],
   "cle-pc": ["devices"],
-  clock: ["common", "time"],
   "closed-captions": ["other"],
   "cloud-backup": ["arrows"],
   "cloud-security": ["other"],
   "collective-class-training": ["people"],
   "community-sms": ["people"],
   "company-structure": ["other"],
-  connections: ["devices", "waves"],
   "control-centre": ["people"],
   "control-my-data": ["arrows"],
-  cpu: ["other"],
   "currency-euro": ["money"],
   "cyber-shield": ["shields"],
   "dashboard-display": ["devices"],
@@ -89,8 +57,6 @@ export const iconsWithTags = {
   "data-centre": ["other"],
   "data-services": ["arrows"],
   "data-traffic": ["arrows"],
-  data: ["arrows"],
-  delete: ["common"],
   "desk-phone": ["devices", "handset"],
   "desktop-pc": ["devices"],
   "device-fixed-line-phone": ["devices"],
@@ -99,33 +65,16 @@ export const iconsWithTags = {
   "device-smart-phone": ["devices"],
   "device-tablet": ["devices"],
   "device-tv": ["devices"],
-  diagnostic: ["reading"],
   "digital-frame": ["other"],
   "discussion-more": ["other"],
-  doctor: ["people"],
-  documentary: ["entertainment"],
-  donation: ["money"],
-  download: ["common", "arrows"],
   "e-reader": ["reading"],
   "e-shop": ["common"],
   "easy-internet": ["devices"],
   "eco-mode": ["other"],
-  edit: ["common"],
-  electrcar: ["vehicles"],
-  email: ["common"],
-  employees: ["people"],
   "empty-trash": ["common"],
-  entertainment: ["entertainment"],
-  epg: ["devices"],
   "error-severe": ["common"],
-  ethenet: ["other"],
-  euro: ["common", "money"],
-  exit: ["arrows"],
   "facebook-2": ["common"],
-  facebook: ["common"],
-  factory: ["buildings"],
   "family-place": ["people"],
-  fashion: ["entertainment"],
   "fast-delivery": ["vehicles"],
   "file-compressed": ["reading"],
   "file-copy": ["reading"],
@@ -134,91 +83,50 @@ export const iconsWithTags = {
   "file-draft-edit": ["reading"],
   "file-pdf": ["common", "reading"],
   "file-terms-and-conditions": ["reading"],
-  files: ["reading"],
-  film: ["entertainment"],
-  filter: ["common"],
-  finance: ["money"],
-  firewall: ["other"],
-  flag: ["other"],
-  flashlight: ["other"],
   "flexible-storage": ["other"],
-  folder: ["common"],
   "football-match": ["people", "entertainment"],
   "football-quiz": ["entertainment"],
-  football: ["entertainment"],
   "form-tick": ["common", "checks"],
   "front-end-dashboard": ["devices", "reading"],
-  funny: ["other"],
   "futher-education": ["other"],
-  games: ["entertainment"],
   "garage-closed": ["buildings"],
   "gauge-rate": ["arrows"],
-  gears: ["other"],
-  geolocation: ["arrows"],
   "guide-info": ["reading"],
-  hammer: ["other"],
   "hand-shake": ["hearts"],
   "hard-drive": ["other"],
   "hdmi-key": ["other"],
-  headphones: ["entertainment"],
   "health-app": ["devices", "hearts"],
   "health-monitor": ["hearts"],
   "health-patient": ["people", "hearts"],
-  heart: ["hearts"],
   "home-appliance": ["other"],
-  home: ["buildings"],
-  homelive: ["buildings"],
-  hourglass: ["time"],
-  house: ["buildings"],
   "id-card": ["people", "reading"],
-  image: ["common"],
-  important: ["common"],
-  improvement: ["arrows"],
-  inbox: ["common", "arrows"],
-  info: ["common"],
   "information-data": ["other"],
-  instagram: ["common"],
   "international-globe": ["other"],
   "internet-browser": ["arrows"],
   "internet-security-desktop": ["devices"],
   "internet-security-mobile": ["devices"],
   "internet-security-password": ["other"],
   "internet-usage": ["arrows"],
-  internet: ["common"],
   "invoice-euro": ["reading", "money"],
   "invoices-euro": ["reading", "money"],
-  iso: ["other"],
   "it-infrastructure": ["devices"],
-  keyboard: ["other"],
   "la-cle-tv": ["devices"],
   "laptop-connected": ["devices", "waves"],
-  laptop: ["devices"],
   "le-vote": ["checks"],
-  link: ["common"],
   "linkedin-2": ["common"],
-  linkedin: ["common"],
   "location-on-map": ["other"],
   "location-pin": ["common", "arrows"],
   "lock-open": ["common"],
-  lock: ["common"],
-  logistics: ["vehicles"],
   "love-logo": ["other"],
-  mahali: ["buildings", "arrows"],
   "maintenance-man": ["people"],
   "map-pin": ["common", "arrows"],
-  map: ["other"],
-  medal: ["other"],
   "medical-app": ["devices", "hearts"],
   "medical-chart": ["reading"],
-  medicine: ["other"],
   "menu-arrow": ["common", "arrows"],
   "menu-grid": ["common"],
-  menu: ["common"],
   "message-alert": ["other"],
-  messages: ["reading"],
   "micro-sd-card": ["other"],
   "microphone-mute": ["common"],
-  microphone: ["common"],
   "mini-games": ["entertainment"],
   "mobile-applications": ["devices"],
   "mobile-data-toggle": ["arrows"],
@@ -227,7 +135,6 @@ export const iconsWithTags = {
   "mobile-payment": ["devices", "money"],
   "mobile-security": ["devices"],
   "mobile-setup": ["devices"],
-  modem: ["waves"],
   "modifier-delete": ["other"],
   "modifier-done": ["checks"],
   "modifier-download": ["arrows"],
@@ -235,7 +142,6 @@ export const iconsWithTags = {
   "money-box": ["money"],
   "more-dots": ["common"],
   "multi-sim": ["other"],
-  music: ["entertainment"],
   "my-account": ["people"],
   "my-orange": ["people"],
   "my-skills": ["people"],
@@ -246,11 +152,8 @@ export const iconsWithTags = {
   "network-optical-amplifier": ["arrows"],
   "network-optical-transport": ["arrows"],
   "network-wan-optimisation-engine": ["arrows"],
-  networks: ["waves"],
-  newspaper: ["reading"],
   "not-checked": ["common"],
   "notification-alert": ["common"],
-  office: ["buildings"],
   "online-help": ["devices"],
   "orange-assistant": ["other"],
   "orange-cash": ["devices", "waves", "money"],
@@ -270,72 +173,35 @@ export const iconsWithTags = {
   "orange-rewards": ["other"],
   "orange-tv": ["devices"],
   "orange-vr-experience": ["entertainment"],
-  outbox: ["arrows"],
   "package-content": ["entertainment", "people"],
   "package-services": ["other"],
-  package: ["arrows"],
   "packaging-icon-hd": ["other"],
   "parabole-tv": ["other"],
   "parental-control": ["people", "shields"],
-  pause: ["common"],
   "payment-card": ["money"],
   "payment-euro": ["money"],
-  pda: ["devices"],
-  pencil: ["other"],
   "personal-hotspot": ["devices", "waves"],
   "personal-smartphone-trainer": ["devices", "people"],
   "phone-advisor": ["devices"],
   "play-and-win": ["entertainment"],
-  play: ["common", "arrows"],
   "plug-socket": ["other"],
-  power: ["common"],
-  powerstation: ["buildings"],
-  presentation: ["devices"],
-  print: ["common"],
-  printer: ["other"],
   "real-time": ["time"],
   "recycle-device": ["devices", "arrows"],
-  recycle: ["common", "arrows"],
-  reduction: ["arrows"],
-  reload: ["common", "arrows"],
-  reminders: ["reading"],
   "remote-desktop-protocol": ["devices", "arrows"],
-  remove: ["common"],
-  repair: ["common"],
-  reseau: ["other"],
-  restaurant: ["entertainment"],
-  rewards: ["other"],
-  running: ["people", "entertainment"],
-  safety: ["shields", "checks"],
-  satallite: ["other"],
-  save: ["common"],
-  school: ["buildings"],
-  science: ["other"],
   "sd-card": ["other"],
-  search: ["common"],
   "security-status-good": ["shields"],
-  send: ["common", "arrows"],
   "senior-person": ["people"],
   "server-storage-array": ["other"],
   "server-tower": ["other"],
   "session-enter": ["arrows"],
   "session-leave": ["arrows"],
-  settings: ["common"],
-  share: ["other"],
   "shop-pin": ["arrows", "checks"],
-  shop: ["buildings"],
   "showroom-mobile-pro": ["devices"],
   "signal-5-5": ["common"],
-  silence: ["common"],
   "sim-e": ["other"],
-  sim: ["other"],
   "simple-mode": ["devices"],
-  simplicity: ["other"],
-  siren: ["other"],
-  skiing: ["people", "entertainment"],
   "skip-to-end": ["common", "arrows"],
   "skip-to-start": ["common", "arrows"],
-  sleep: ["other"],
   "smart-care": ["devices"],
   "smart-home": ["buildings", "waves"],
   "smart-tap": ["other"],
@@ -344,79 +210,214 @@ export const iconsWithTags = {
   "sms-message-compose": ["reading"],
   "sms-message": ["reading"],
   "social-network": ["people"],
-  sofa: ["other"],
-  sort: ["common", "arrows"],
-  stadium: ["buildings", "entertainment"],
-  "star-favourite-half": ["common"],
   "star-empty": ["common"],
+  "star-favourite-half": ["common"],
   "star-favourite": ["common"],
-  startover: ["common", "arrows"],
-  statistics: ["other"],
   "stop-secret": ["shields", "handset"],
   "storage-cloud": ["other"],
   "store-locator": ["arrows"],
-  street: ["buildings"],
   "subscription-package": ["other"],
-  suitcase: ["other"],
-  support: ["people"],
   "surveillance-camera": ["other"],
-  syncronise: ["arrows"],
   "tag-advertising": ["other"],
-  tag: ["other"],
   "target-location": ["common"],
-  tarif: ["other"],
   "task-list": ["reading"],
   "team-connect": ["people"],
   "thumb-up": ["other"],
-  tick: ["checks"],
-  ticket: ["entertainment"],
   "top-up-card-euro": ["money"],
   "top-up-euro": ["arrows", "money"],
   "top-up-time": ["arrows", "money", "time"],
-  town: ["buildings"],
-  townhall: ["buildings"],
-  train: ["vehicles"],
   "training-session": ["people"],
-  tranquility: ["other"],
   "transfer-data": ["devices", "arrows"],
-  transfers: ["common", "arrows"],
-  trash: ["common"],
   "tv-channel-list": ["devices"],
   "tv-commande": ["other"],
   "unlimited-calls": ["handset"],
-  upload: ["common", "arrows"],
   "usb-hard-drive": ["other"],
   "usb-key": ["other"],
   "user-manual": ["reading"],
-  user: ["common", "people"],
   "video-call": ["devices", "people"],
   "video-live": ["common"],
   "video-phone": ["devices"],
   "video-record": ["common"],
-  video: ["entertainment"],
   "vip-contact": ["people", "reading"],
   "virtual-gamepad": ["devices", "entertainment"],
   "vod-portrait": ["arrows"],
-  volte: ["waves", "handset"],
   "volume-status-4-4": ["common", "waves"],
+  "warning-important": ["common"],
+  "web-browser": ["other"],
+  "web-camera": ["other"],
+  "weighing-scales": ["other"],
+  "wifi-home": ["waves"],
+  "your-balance": ["arrows"],
+  "zoom-in": ["common"],
+  "zoom-out": ["common"],
+  accessibility: ["people"],
+  add: ["common"],
+  advertising: ["other"],
+  aeroplane: ["vehicles"],
+  ai: ["other", "devices"],
+  antenna: ["waves"],
+  apps: ["other"],
+  article: ["reading"],
+  assistance: ["other"],
+  assistent: ["other"],
+  at: ["common"],
+  avatar: ["common", "people"],
+  bank: ["buildings"],
+  bed: ["other"],
+  birth: ["other"],
+  birthday: ["time"],
+  bluetooth: ["common"],
+  book: ["reading", "entertainment"],
+  boxes: ["other"],
+  briefcase: ["other"],
+  buy: ["common"],
+  call: ["handset"],
+  camera: ["other"],
+  car: ["vehicles"],
+  casting: ["entertainment"],
+  charger: ["other"],
+  chatbot: ["other"],
+  checked: ["checks"],
+  child: ["people"],
+  clock: ["common", "time"],
+  connections: ["devices", "waves"],
+  cpu: ["other"],
+  data: ["arrows"],
+  delete: ["common"],
+  diagnostic: ["reading"],
+  doctor: ["people"],
+  documentary: ["entertainment"],
+  donation: ["money"],
+  download: ["common", "arrows"],
+  edit: ["common"],
+  electrcar: ["vehicles"],
+  email: ["common"],
+  employees: ["people"],
+  entertainment: ["entertainment"],
+  epg: ["devices"],
+  ethenet: ["other"],
+  euro: ["common", "money"],
+  exit: ["arrows"],
+  facebook: ["common"],
+  factory: ["buildings"],
+  fashion: ["entertainment"],
+  files: ["reading"],
+  film: ["entertainment"],
+  filter: ["common"],
+  finance: ["money"],
+  firewall: ["other"],
+  flag: ["other"],
+  flashlight: ["other"],
+  folder: ["common"],
+  football: ["entertainment"],
+  funny: ["other"],
+  games: ["entertainment"],
+  gears: ["other"],
+  geolocation: ["arrows"],
+  hammer: ["other"],
+  headphones: ["entertainment"],
+  heart: ["hearts"],
+  home: ["buildings"],
+  homelive: ["buildings"],
+  hourglass: ["time"],
+  house: ["buildings"],
+  image: ["common"],
+  important: ["common"],
+  improvement: ["arrows"],
+  inbox: ["common", "arrows"],
+  info: ["common"],
+  instagram: ["common"],
+  internet: ["common"],
+  iso: ["other"],
+  keyboard: ["other"],
+  laptop: ["devices"],
+  link: ["common"],
+  linkedin: ["common"],
+  lock: ["common"],
+  logistics: ["vehicles"],
+  mahali: ["buildings", "arrows"],
+  map: ["other"],
+  medal: ["other"],
+  medicine: ["other"],
+  menu: ["common"],
+  messages: ["reading"],
+  microphone: ["common"],
+  modem: ["waves"],
+  music: ["entertainment"],
+  networks: ["waves"],
+  newspaper: ["reading"],
+  office: ["buildings"],
+  outbox: ["arrows"],
+  package: ["arrows"],
+  pause: ["common"],
+  pda: ["devices"],
+  pencil: ["other"],
+  play: ["common", "arrows"],
+  power: ["common"],
+  powerstation: ["buildings"],
+  presentation: ["devices"],
+  print: ["common"],
+  printer: ["other"],
+  quote: ["reading"],
+  recycle: ["common", "arrows"],
+  reduction: ["arrows"],
+  reload: ["common", "arrows"],
+  reminders: ["reading"],
+  remove: ["common"],
+  repair: ["common"],
+  reseau: ["other"],
+  restaurant: ["entertainment"],
+  rewards: ["other"],
+  running: ["people", "entertainment"],
+  safety: ["shields", "checks"],
+  satallite: ["other"],
+  save: ["common"],
+  school: ["buildings"],
+  science: ["other"],
+  search: ["common"],
+  send: ["common", "arrows"],
+  settings: ["common"],
+  share: ["other"],
+  shop: ["buildings"],
+  silence: ["common"],
+  sim: ["other"],
+  simplicity: ["other"],
+  siren: ["other"],
+  skiing: ["people", "entertainment"],
+  sleep: ["other"],
+  sofa: ["other"],
+  sort: ["common", "arrows"],
+  stadium: ["buildings", "entertainment"],
+  startover: ["common", "arrows"],
+  statistics: ["other"],
+  street: ["buildings"],
+  suitcase: ["other"],
+  support: ["people"],
+  syncronise: ["arrows"],
+  tag: ["other"],
+  tarif: ["other"],
+  tick: ["checks"],
+  ticket: ["entertainment"],
+  town: ["buildings"],
+  townhall: ["buildings"],
+  train: ["vehicles"],
+  tranquility: ["other"],
+  transfers: ["common", "arrows"],
+  trash: ["common"],
+  upload: ["common", "arrows"],
+  user: ["common", "people"],
+  video: ["entertainment"],
+  volte: ["waves", "handset"],
   vowifi: ["waves", "handset"],
   wallet: ["money"],
-  "warning-important": ["common"],
   washroom: ["other"],
   watch: ["time"],
   water: ["other"],
   weather: ["other"],
-  "web-browser": ["other"],
-  "web-camera": ["other"],
-  "weighing-scales": ["other"],
   widget: ["other"],
-  "wifi-home": ["waves"],
   wifi: ["waves", "common"],
   x: ["common"],
-  "your-balance": ["arrows"],
   youtube: ["common"],
-  "zoom-in": ["common"],
-  "zoom-out": ["common"],
 };
 
 export const tags = [

package/src/components/Link/Link.tsx

@@ -12,8 +12,6 @@ export interface LinkProps {
   className?: string;
   /** link content */
   children?: React.ReactNode;
-  /** color scheme for link: dark (white text) or light (black text) */
-  colorScheme?: "dark" | "light";
   /** whether the link should be underlined */
   isUnderline?: boolean;
   /** whether the link should have normal font weight */
@@ -25,7 +23,6 @@ export interface LinkProps {
 export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
   className,
   children,
-  colorScheme,
   isUnderline,
   isNormal,
   noAccent,
@@ -36,8 +33,6 @@ export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
   const classes = cx(
     CLASS_ROOT,
     {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
       underline: isUnderline,
       normal: isNormal,
       "no-accent": noAccent,

package/src/components/Link/tests/Link.conformance.test.js

@@ -50,15 +50,9 @@ describe("Link Conformance Tests", () => {
       );
       expect(container).toHTMLValidate();
     });
-    it("is valid HTML with colorScheme variants and underline", () => {
+    it("is valid HTML with underline", () => {
       const { container } = render(
         <>
-          <Link href="#" colorScheme="dark">
-            Dark link
-          </Link>
-          <Link href="#" colorScheme="light">
-            Light link
-          </Link>
           <Link href="#" isUnderline>
             Underlined link
           </Link>

package/src/components/Link/tests/Link.unit.test.js

@@ -100,26 +100,6 @@ describe("Link Component", () => {
   });
 
   describe("Color Scheme", () => {
-    it("applies is-dark class for colorScheme dark", () => {
-      render(
-        <Link href="/" colorScheme="dark" data-testid="link">
-          Dark link
-        </Link>,
-      );
-      const link = screen.getByTestId("link");
-      expect(link).toHaveClass("is-dark");
-    });
-
-    it("applies is-light class for colorScheme light", () => {
-      render(
-        <Link href="/" colorScheme="light" data-testid="link">
-          Light link
-        </Link>,
-      );
-      const link = screen.getByTestId("link");
-      expect(link).toHaveClass("is-light");
-    });
-
     it("applies underline class when isUnderline is true", () => {
       render(
         <Link href="/" isUnderline data-testid="link">

package/src/components/Megamenu/static.ts

@@ -22,8 +22,11 @@ declare global {
       instances: Megamenu[];
       init: () => void;
       destroy: () => void;
-      initModulesWithin: typeof initModulesWithin;
-      destroyModulesWithin: typeof destroyModulesWithin;
+      initModulesWithin: (container: any) => {};
+      destroyModulesWithin: (
+        container: any,
+        removeOrphanedNodes?: boolean | undefined,
+      ) => {};
     };
   }
 }

package/src/components/Modal/Modal.tsx

@@ -49,8 +49,6 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional CSS classes */
   className?: string;
-  /** Color scheme for the modal */
-  colorScheme?: "dark" | "light";
   /** Disables header paddings */
   disableHeaderSpacing?: boolean;
   /** Disables footer paddings */
@@ -81,7 +79,6 @@ const Modal: React.FC<ModalProps> = ({
   renderTitle,
   renderFooter,
   fullHeight,
-  colorScheme,
   disableHeaderSpacing,
   disableFooterSpacing,
   ...other
@@ -99,8 +96,6 @@ const Modal: React.FC<ModalProps> = ({
     {
       [`${CLASS_ROOT}__dialog--${size}`]: size,
       [`${CLASS_ROOT}__dialog--full-height`]: fullHeight,
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
     },
     className,
   );

package/src/components/Modal/styles/mixins.scss

@@ -292,4 +292,11 @@
   object-fit: cover;
   object-position: left;
   max-width: convert.to-rem(125px);
+  width: auto;
+  height: auto;
+  aspect-ratio: auto;
+
+  @include breakpoint.get("sm", "down") {
+    max-width: convert.to-rem(62.5px);
+  }
 }