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

package/build/components/types/src/components/Icon/iconSearchTags.d.ts

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

package/build/components/types/src/components/IconList/IconList.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface IconListItem {
+    icon: string;
+    content: React.ReactNode;
+    tooltip?: React.ReactNode;
+}
+interface IconListProps {
+    items: IconListItem[];
+    className?: string;
+    [key: string]: any;
+}
+export declare const IconList: React.FC<IconListProps>;
+export {};

package/build/components/types/src/components/IconList/Item.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ItemProps {
+    icon: string;
+    children: React.ReactNode;
+    tooltip?: React.ReactNode;
+    [key: string]: any;
+}
+export declare const Item: React.FC<ItemProps>;
+export {};

package/build/components/types/src/components/IconList/index.d.ts

@@ -0,0 +1,3 @@
+import './styles/style.scss';
+export { IconList } from './IconList';
+export { Item } from './Item';

package/build/components/types/src/components/Image/Image.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+interface ImageSrcObject {
+    default: string;
+    xxxl?: string;
+    xxl?: string;
+    xl?: string;
+    lg?: string;
+    md?: string;
+    sm?: string;
+    xs?: string;
+    [key: string]: string | undefined;
+}
+interface ImageProps {
+    alt: string;
+    src: string | ImageSrcObject;
+    className?: string;
+    [key: string]: any;
+}
+declare const Image: React.FC<ImageProps>;
+export { Image };

package/build/components/types/src/components/Image/index.d.ts

@@ -0,0 +1,2 @@
+import "./styles/style.scss";
+export { Image } from "./Image";

package/build/components/types/src/components/Link/Link.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface LinkProps {
+    /** destination address */
+    href?: string;
+    /** rendered HTML element */
+    tag?: "a" | "button";
+    /** additional CSS classes */
+    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 */
+    isNormal?: boolean;
+}
+export declare const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>>;

package/build/components/types/src/components/Link/index.d.ts

@@ -0,0 +1,2 @@
+import "./styles/style.scss";
+export { Link } from "./Link";

package/build/components/types/src/components/List/ClickableControl.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ClickableControlProps {
+    href?: string;
+    className?: string;
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+export declare const ClickableControl: React.FC<ClickableControlProps>;
+export {};

package/build/components/types/src/components/List/List.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ListProps {
+    /** Size determines color of list items and color of their borders*/
+    color?: 'gray';
+    /** Spacious lists have horizontal spacing */
+    isEnclosed?: boolean;
+    /** Size determines vertical spacing */
+    size?: 'small';
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const List: React.FC<ListProps>;
+export {};

package/build/components/types/src/components/List/ListItem.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface ControlProps {
+    href?: string;
+    className?: string;
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+interface ListItemProps {
+    /** Item with control props automatically creates a clickable item and renders an interactive element. If the object contains a href property, it renders an anchor element. If not, it renders a button of type="button" instead. */
+    controlProps?: ControlProps;
+    className?: string;
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+export declare const ListItem: React.FC<ListItemProps>;
+export {};

package/build/components/types/src/components/List/index.d.ts

@@ -0,0 +1,3 @@
+import './styles/style.scss';
+export { List } from './List';
+export { ListItem } from './ListItem';

package/build/components/types/src/components/Loader/Loader.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+interface LoaderProps {
+    colour?: "default" | "inverse";
+    isDelayed?: boolean;
+    /** Messages that the loader will cycle until done */
+    messages?: string[];
+    /** Size variants */
+    size?: "default" | "large";
+    className?: string;
+    children?: ReactNode;
+    [key: string]: any;
+}
+declare const Loader: React.FC<LoaderProps>;
+export { Loader };

package/build/components/types/src/components/Loader/Loader.static.d.ts

@@ -0,0 +1,19 @@
+interface LoaderConfig {
+    cycleDuration?: number;
+    delay?: number;
+}
+export default class Loader {
+    element: HTMLElement;
+    config: LoaderConfig;
+    interval: number | null;
+    delay: number | null;
+    currentMessageIndex: number;
+    messages: string[];
+    constructor(element: HTMLElement, config?: LoaderConfig);
+    initBody(): void;
+    init(): void;
+    destroy(): void;
+    cycleMessages(): void;
+    static getInstance(el: HTMLElement): Loader | null;
+}
+export {};

package/build/components/types/src/components/Loader/index.d.ts

@@ -0,0 +1,2 @@
+import "./styles/style.scss";
+export { Loader } from "./Loader";

package/build/components/types/{components → src/components}/Modal/Modal.d.ts

@@ -28,6 +28,8 @@ interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
+    /** Color scheme for the modal */
+    colorScheme?: "dark" | "light";
 }
 declare const Modal: React.FC<ModalProps>;
 export { Modal };

package/build/components/types/src/components/Pagination/Pagination.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { PaginationItem } from './PaginationItem';
+interface PaginationItem {
+    /** Page link href */
+    href: string;
+    /** Text label inside page item */
+    label: string;
+    /** Active state. */
+    isActive?: boolean;
+    /** aria-label of page item */
+    ariaLabel?: string;
+}
+interface PaginationProps {
+    /** Collapsed version */
+    isCompact?: boolean;
+    /** Dark theme */
+    colorScheme?: "light" | "dark";
+    /** All pagination items - buttons & numbers */
+    items: PaginationItem[];
+    /** Accessibility label */
+    label?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional props */
+    [key: string]: any;
+}
+export declare const Pagination: React.FC<PaginationProps>;
+export {};

package/build/components/types/src/components/Pagination/PaginationItem.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+interface PaginationItemProps {
+    /** aria-label of page item */
+    ariaLabel?: string;
+    /** Text label inside page item */
+    label?: string;
+    /** Show icon as label */
+    hasIcon?: boolean;
+    /** Link href */
+    href?: string;
+    /** Active state */
+    isActive?: boolean;
+    /** Is first item */
+    isFirst?: boolean;
+    /** Is last item */
+    isLast?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const PaginationItem: React.FC<PaginationItemProps>;
+export {};

package/build/components/types/src/components/Pagination/Separator.d.ts

@@ -0,0 +1,6 @@
+import React, { HTMLAttributes } from "react";
+declare const Separator: {
+    (props: HTMLAttributes<HTMLLIElement>): React.JSX.Element;
+    displayName: string;
+};
+export default Separator;

package/build/components/types/src/components/Pagination/helpers.d.ts

@@ -0,0 +1,23 @@
+interface PaginationItem {
+    href: string;
+    label: string;
+    isActive?: boolean;
+    ariaLabel?: string;
+}
+interface GetItemStateParams {
+    activeIndex: number;
+    items: PaginationItem[];
+    isCompact: boolean;
+    index: number;
+}
+interface ItemState {
+    isFirst: boolean;
+    isHidden: boolean;
+    isLast: boolean;
+    isSecond: boolean;
+    isSecondFromEnd: boolean;
+    hasIcon: boolean;
+    showSeparator: boolean;
+}
+export declare function getItemState({ activeIndex, items, isCompact, index }: GetItemStateParams): ItemState;
+export {};

package/build/components/types/src/components/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+import "./styles/style.scss";
+export { Pagination } from "./Pagination";
+export { PaginationItem } from "./PaginationItem";
+export { default as Separator } from "./Separator";