@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.1

package/src/components/Icon/SpritePathContext.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import React, { ReactNode } from "react";
+
+export const SpritePathContext = React.createContext("/sprite.svg");
+
+interface SpritePathProviderProps {
+  children: ReactNode;
+  value?: string;
+}
+
+export const SpritePathProvider: React.FC<SpritePathProviderProps> = ({
+  children,
+  value = "/sprite.svg",
+  ...other
+}) => {
+  return (
+    <SpritePathContext.Provider value={value} {...other}>
+      {React.Children.only(children)}
+    </SpritePathContext.Provider>
+  );
+};

package/src/components/Icon/iconSearchTags.ts

@@ -0,0 +1,437 @@
+export const iconsWithTags = {
+  '4g': ['other'],
+  '5g': ['other'],
+  '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'],
+  antenna: ['waves'],
+  'apartment-building': ['buildings'],
+  apps: ['other'],
+  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'],
+  'data-analytics': ['other'],
+  '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'],
+  'device-laptop-computer-connected': ['devices', 'waves'],
+  'device-laptop-computer': ['devices'],
+  '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'],
+  'file-document-compose': ['reading'],
+  'file-download': ['arrows'],
+  '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'],
+  'mobile-insurance': ['devices', 'shields'],
+  'mobile-network-coverage': ['common'],
+  'mobile-payment': ['devices', 'money'],
+  'mobile-security': ['devices'],
+  'mobile-setup': ['devices'],
+  modem: ['waves'],
+  'modifier-delete': ['other'],
+  'modifier-done': ['checks'],
+  'modifier-download': ['arrows'],
+  'modifier-upload': ['arrows'],
+  'money-box': ['money'],
+  'more-dots': ['common'],
+  'multi-sim': ['other'],
+  music: ['entertainment'],
+  'my-account': ['people'],
+  'my-orange': ['people'],
+  'my-skills': ['people'],
+  'my-vacation': ['entertainment'],
+  'network-dslam': ['arrows'],
+  'network-gatekeeper': ['other'],
+  'network-gateway': ['arrows'],
+  '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'],
+  'orange-detente': ['entertainment'],
+  'orange-dialler': ['handset'],
+  'orange-events': ['other'],
+  'orange-experts-expert': ['other'],
+  'orange-experts-insurance': ['shields'],
+  'orange-experts-orange-business-consultant': ['people'],
+  'orange-experts-recycle': ['arrows'],
+  'orange-experts-repair': ['other'],
+  'orange-football-club': ['entertainment'],
+  'orange-games': ['entertainment'],
+  'orange-messenger': ['reading'],
+  'orange-money-nfc': ['devices', 'waves'],
+  'orange-reflect': ['devices'],
+  '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'],
+  'smart-watch': ['time'],
+  'sms-alert': ['other'],
+  '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': ['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'],
+  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 = [
+  'arrows',
+  'buildings',
+  'checks',
+  'devices',
+  'handset',
+  'hearts',
+  'money',
+  'people',
+  'shields',
+  'time',
+  'vehicles',
+  'waves',
+  'reading',
+  'entertainment',
+  'common',
+  'other',
+];

package/src/components/Icon/index.ts

@@ -0,0 +1,5 @@
+import "./styles/style.scss";
+
+export { SpritePathContext } from "./SpritePathContext";
+
+export { Icon } from "./Icon";

package/src/components/Icon/styles/config.scss

@@ -0,0 +1,27 @@
+@use "sass:map" as sass-map;
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/color";
+
+$sizes: (
+  default: (
+    small: convert.to-rem(16px),
+    medium: convert.to-rem(24px),
+    large: convert.to-rem(32px),
+    xlarge: convert.to-rem(40px),
+    xxlarge: convert.to-rem(48px),
+    huge: convert.to-rem(56px),
+  ),
+  md: (
+    xlarge: convert.to-rem(48px),
+    xxlarge: convert.to-rem(64px),
+    huge: convert.to-rem(80px),
+  ),
+);
+
+$colors: (
+  info: sass-map.get(color.$colors-light, icon-information),
+  success: sass-map.get(color.$colors-light, icon-positive),
+  warning: sass-map.get(color.$colors-light, icon-warning),
+  danger: sass-map.get(color.$colors-light, icon-negative),
+  "orange": sass-map.get(color.$colors-light, icon-brand),
+);

package/src/components/Icon/styles/export/color.scss

@@ -0,0 +1,8 @@
+@use "sass:string";
+@use '../config';
+
+:export {
+  @each $key, $value in config.$colors {
+    #{string.unquote($key)}: $value;
+  }
+}

package/src/components/Icon/styles/export/size.scss

@@ -0,0 +1,13 @@
+@use "sass:string";
+@use 'sass:map' as sassmap;
+@use '../config';
+
+:export {
+  @each $key, $value in sassmap.get(config.$sizes, default) {
+    #{string.unquote($key)}: $value;
+  }
+
+  @each $key, $value in sassmap.get(config.$sizes, md) {
+    #{string.unquote($key)}-md: $value;
+  }
+}

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

@@ -0,0 +1,31 @@
+@use './config';
+@use '../../../styles/tokens/breakpoint';
+@use '../../../styles/tools/generate';
+
+@mixin base() {
+  fill: currentColor;
+  width: 1em;
+  height: 1em;
+  vertical-align: text-bottom;
+}
+
+@mixin sizes($sizes: config.$sizes) {
+  @each $breakpoint, $props in $sizes {
+    @include breakpoint.get($breakpoint) {
+      @each $variant, $size in $props {
+        &#{generate.variant-name($variant)} {
+          width: $size;
+          height: $size;
+        }
+      }
+    }
+  }
+}
+
+@mixin colors($colors: config.$colors) {
+  @each $variant, $color in $colors {
+    &#{generate.variant-name($variant)} {
+      color: $color;
+    }
+  }
+}

package/src/components/Icon/styles/style.scss

@@ -0,0 +1,13 @@
+@use './mixins';
+@use '../../../styles/tools/convert';
+@use '../../../styles/tokens/space';
+
+.icon {
+  @include mixins.base;
+  @include mixins.sizes;
+  @include mixins.colors;
+}
+
+use {
+  pointer-events: none;
+}

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Icon } from "../";
+
+const example = (
+  <>
+    <Icon name="accessibility" />
+    <Icon name="accessibility" alt="icon w alt text" />
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});