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

package/src/components/Icon/IconSearch.js

@@ -1,234 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import cx from 'classnames';
-
-import {
-  Bar,
-  BarItem,
-  Button,
-  Container,
-  Field,
-  Grid,
-  Icon,
-  GridCol,
-  Fieldset,
-  Label,
-} from '..';
-
-import { tags, iconsWithTags } from './iconSearchTags';
-
-export const iconNames = require
-  .context('../../assets/icons', false, /\.svg$/)
-  .keys()
-  .sort()
-  .map(icon => icon.substring(2).replace('.svg', ''))
-  .filter(e => !e.includes('-file'));
-
-const handleClick = async svgElement => {
-  const useElement = svgElement.querySelector('use');
-  const href = useElement.getAttribute('xlink:href');
-  const spriteUrl = href.split('#')[0];
-  const iconId = href.split('#')[1];
-
-  const response = await fetch(spriteUrl);
-  const spriteText = await response.text();
-  const parser = new DOMParser();
-  const spriteDoc = parser.parseFromString(spriteText, 'image/svg+xml');
-  const iconSymbol = spriteDoc.getElementById(iconId);
-
-  // Create a new SVG element and copy attributes from the symbol
-  const svgElementCopy = document.createElementNS(
-    'http://www.w3.org/2000/svg',
-    'svg'
-  );
-  Array.from(iconSymbol.attributes).forEach(attr => {
-    svgElementCopy.setAttribute(attr.name, attr.value);
-  });
-
-  // Copy the inner HTML from the symbol to the new SVG element
-  svgElementCopy.innerHTML = iconSymbol.innerHTML;
-
-  const svgHTML = svgElementCopy.outerHTML;
-  navigator.clipboard.writeText(svgHTML).then(() => {
-    window.alert('Icon copied to clipboard');
-  });
-};
-
-export const IconList = ({ icons, isWide = true }) => (
-  <ul className={cx('sg-icon-list', { 'sg-icon-list--wide': isWide })}>
-    {icons.map(
-      ({ name, description, tags = [], size = 'medium', ...other }, i) => {
-        return (
-          <li
-            className="sg-icon-list__item"
-            key={i.toString()}
-            id={name + '_' + tags.join('-')}
-          >
-            <Icon
-              name={name}
-              size={size}
-              onClick={e => handleClick(e.currentTarget)}
-              {...other}
-            />
-            <br />
-            <abbr title={description || name}>{description || name}</abbr>
-          </li>
-        );
-      }
-    )}
-  </ul>
-);
-
-export default props => {
-  const [searchOption, setSearchOption] = useState('includes');
-  const [searchValue, setSearchValue] = useState('');
-  const [icons, setIcons] = useState([]);
-  const searchTags = useRef([]);
-
-  useEffect(() => {
-    setIcons(document.querySelectorAll('.sg-icon-list__item'));
-  }, []);
-
-  useEffect(() => {
-    searchTags.current.forEach(tag => {
-      const checkbox = document.getElementById(tag);
-      checkbox && checkbox.setAttribute('checked', 'checked');
-    });
-  }, [searchValue, searchOption]);
-
-  const isIconsTagChecked = id => {
-    let isChecked = 0;
-    searchTags.current.forEach(check => {
-      if (id.includes(check)) {
-        isChecked += 1;
-      }
-    });
-    return isChecked === searchTags.current.length;
-  };
-
-  const handleInputChange = value => {
-    setSearchValue(value);
-    if (searchOption === 'startswith') {
-      icons.forEach(icon => {
-        icon.id.startsWith(value)
-          ? isIconsTagChecked(icon.id) && icon.classList.remove('hide')
-          : icon.classList.add('hide');
-      });
-    } else {
-      icons.forEach(icon => {
-        icon.id.substring(0, icon.id.indexOf('_')).includes(value)
-          ? isIconsTagChecked(icon.id) && icon.classList.remove('hide')
-          : icon.classList.add('hide');
-      });
-    }
-  };
-
-  const handleSearchOptionChange = id => {
-    setSearchOption(id);
-    handleInputChange('');
-  };
-
-  const handleTagChange = (e, tag) => {
-    if (e.target.checked) {
-      searchTags.current.push(tag);
-      icons.forEach(icon => {
-        if (!icon.id.includes(tag)) {
-          icon.classList.add('hide');
-        }
-      });
-    } else {
-      searchTags.current.splice(searchTags.current.indexOf(tag), 1);
-      icons.forEach(icon => {
-        const showIcon = isIconsTagChecked(icon.id);
-        if (!searchValue) {
-          showIcon && icon.classList.remove('hide');
-        } else {
-          if (searchOption === 'startswith') {
-            showIcon &&
-              icon.id.startsWith(searchValue) &&
-              icon.classList.remove('hide');
-          } else {
-            showIcon &&
-              icon.id
-                .substring(0, icon.id.indexOf('_'))
-                .includes(searchValue) &&
-              icon.classList.remove('hide');
-          }
-        }
-      });
-    }
-  };
-
-  return (
-    <Container>
-      <Bar space="small" className="align-items-end">
-        <BarItem>
-          <div className="form-field">
-            <Label htmlFor={'search-input'}>
-              <h3 className="mb-xsmall">Search input</h3>
-            </Label>
-            <input
-              className="text-input"
-              onChange={e => handleInputChange(e.target?.value)}
-              id="search-input"
-              value={searchValue}
-            />
-          </div>
-        </BarItem>
-        <BarItem isFilling>
-          <Button
-            type="primary"
-            onClick={() => handleInputChange('')}
-            isDisabled={!searchValue}
-          >
-            Clear
-          </Button>
-        </BarItem>
-      </Bar>
-      <Fieldset legend="Search input options" className="mb-small">
-        {[
-          { label: 'show icons that include string', id: 'includes' },
-          {
-            label: 'show icons that start with string',
-            id: 'startswith',
-          },
-        ].map(({ label, id }) => (
-          <Field
-            control={{
-              name: 'search',
-              type: 'radio',
-              onClick: () => handleSearchOptionChange(id),
-              isChecked: searchOption === id,
-              id: id,
-            }}
-            key={id}
-            label={label}
-          />
-        ))}
-      </Fieldset>
-      <h3>Or search icons using categories</h3>
-      <Grid className="mb-large">
-        {tags.map(tag => (
-          <GridCol key={tag} size={{ xs: 12, sm: 6, md: 4 }}>
-            <Field
-              control={{
-                type: 'checkbox',
-                onClick: e => handleTagChange(e, tag),
-                id: tag,
-              }}
-              label={tag}
-            />
-          </GridCol>
-        ))}
-      </Grid>
-      <div className="results">
-        <IconList
-          icons={iconNames.map(name => ({
-            size: 'large',
-            name,
-            tags: iconsWithTags[name],
-          }))}
-        />
-      </div>
-    </Container>
-  );
-};

package/src/components/Icon/SpritePathContext.js

@@ -1,3 +0,0 @@
-import React from 'react';
-
-export default React.createContext();

package/src/components/Icon/iconSearchTags.js

@@ -1,437 +0,0 @@
-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/icons.js

@@ -1 +0,0 @@
-require.context('./../../assets/icons', false, /\.svg$/);

package/src/components/Icon/index.js

@@ -1,6 +0,0 @@
-import Icon from './Icon';
-
-import './styles/style.scss';
-
-export default Icon;
-export { default as SpritePathContext } from './SpritePathContext';