@royaloperahouse/chord 1.2.0 → 1.2.1-a-chord-development

package/dist/types/navigation.d.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
+import React, { AnchorHTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
 import { DirectionType, IconNameType } from './iconTypes';
 import { Colors, IOptionItem } from './types';
 import { ReactNode } from 'react';
@@ -20,7 +20,7 @@ export interface IAccountProps {
      */
     iconName?: IconNameType;
     /**
-     * The linknk of the title
+     * The link of the title
      */
     titleLink?: string;
     /**
@@ -33,6 +33,10 @@ export interface IBasketProps {
      * The value of the text
      */
     text?: string;
+    /**
+     * The unix timestamp when basket items will be released.
+     */
+    expiryTime?: number;
     /**
      * The value of the link
      */
@@ -42,9 +46,14 @@ export interface IBasketProps {
      */
     selected?: boolean;
     /**
-     * The number of items of the Basket
+     * The number of items of the Basket (eg. Tickets)
      */
     numItems?: number;
+    /**
+     * The number of 'virtual' items of the Basket (eg. Stream subscription)
+     * These items remain in the basket after expiryTime is reached
+     */
+    numVirtualItems?: number;
     /**
      * Function to be called when is clicked
      */
@@ -53,6 +62,10 @@ export interface IBasketProps {
      * The primary color
      */
     colorPrimary?: string;
+    /**
+     * For changing the color of the basket icon & text (when not in hover state)
+     */
+    isActive?: boolean;
 }
 export interface ISearchProps {
     /**
@@ -96,6 +109,10 @@ export interface INavTopProps {
      * The text of Basket component
      */
     basketText?: string;
+    /**
+     * The unix timestamp when basket items will be released.
+     */
+    basketExpiryUnixTimestamp?: number;
     /**
      * The link of Basket component
      */
@@ -104,6 +121,15 @@ export interface INavTopProps {
      * The number of items of Basket component
      */
     basketNumItems?: number;
+    /**
+     * The number of 'virtual' items of the Basket (eg. Stream subscription)
+     * These items remain in the basket after expiryTime is reached
+     */
+    basketNumVirtualItems?: number;
+    /**
+     * For changing the color of the basket icon & text (when not in hover state)
+     */
+    basketIsActive?: boolean;
     /**
      * To know if search component is showed or not
      */
@@ -179,7 +205,7 @@ export interface ISearchBarProps {
     /**
      * Function to be called when is closed
      */
-    onClose: () => void;
+    onClose?: (e?: React.MouseEvent) => void;
 }
 export declare type TitleCTALink = AnchorHTMLAttributes<HTMLAnchorElement> & {
     /**
@@ -218,6 +244,16 @@ export declare type AnchorBarTab = AnchorHTMLAttributes<HTMLAnchorElement> & {
      */
     color?: Colors;
 };
+export interface IAnchorBarAbsolutePositionParams {
+    /**
+     * Navigation height that we need to calculate AnchorTabBar position properly
+     */
+    navigationHeight: number;
+    /**
+     * Height of the content that is located in place before AnchorTabBar
+     */
+    topOffset: number;
+}
 export interface IAnchorBarProps {
     /**
      * Tabs displayed in the anchor bar
@@ -231,6 +267,14 @@ export interface IAnchorBarProps {
      * Set the id of the tab actived
      */
     activeTab?: string;
+    /**
+     * Only for IOS devices that do not fully support sticky position, in case a keyboard is opened on the device
+     */
+    absolutePositionParams?: IAnchorBarAbsolutePositionParams;
+    /**
+     * Boolean to set bottom border
+     */
+    bottomBorder?: boolean;
 }
 export interface ITitleCTAProps {
     /**
@@ -261,6 +305,22 @@ export interface IAnchorTabsListProps {
      * Boolean to determine that the list tab is overflowed
      */
     tabsOverflow: boolean;
+    /**
+     * Boolean to determine if there are two arrows displayed
+     */
+    hasTwoArrows: boolean;
+}
+export interface IAnchorTabBarBorderProps {
+    /**
+     * Boolean to set bottom border
+     */
+    bottomBorder: boolean;
+}
+export interface IAnchorTabArrowsBoxProps {
+    /**
+     * Boolean to determine width of the arrows container
+     */
+    fullWidth: boolean;
 }
 export interface ITabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     children: ReactNode;
@@ -307,4 +367,8 @@ export interface IStickyBarProps {
      * Set columnSpam in Device
      */
     columnSpanDevice?: number;
+    /**
+     * Hide bottom border line
+     */
+    hideBottomBorder?: boolean;
 }

package/dist/types/passwordStrength.d.ts

@@ -0,0 +1,51 @@
+import { Colors } from './types';
+export interface IPasswordStrengthProps {
+    /**
+     * Number of sections to show
+     *
+     * Default: 6
+     */
+    sections?: number;
+    /**
+     * Number of active sections
+     *
+     * Default: 0
+     */
+    activeSections?: number;
+    /**
+     * Color of non-active sections
+     *
+     * Default: Colors.MidGrey
+     */
+    sectionsColor?: Colors;
+    /**
+     * Color of active sections
+     *
+     * Default: Colors.Black
+     */
+    activeSectionsColor?: Colors;
+    /**
+     * Text
+     *
+     * Default: ""
+     */
+    text?: string;
+    /**
+     * Text color
+     *
+     * Default: Colors.Black
+     */
+    textColor?: Colors;
+    /**
+     * Strength label text
+     *
+     * Default: ""
+     */
+    strengthLabel?: string;
+    /**
+     * Strength label text
+     *
+     * Default: Colors.Black
+     */
+    strengthLabelColor?: Colors;
+}

package/dist/types/progress.d.ts

@@ -0,0 +1,33 @@
+import { Colors } from './types';
+export interface IProgressSteps {
+    /**
+     * Number of the steps
+     */
+    quantity: number;
+    /**
+     * Current step
+     */
+    current: number;
+}
+export interface IProgressProps {
+    /**
+     * The progress percentage
+     */
+    progress?: number;
+    /**
+     * The progress bar height
+     */
+    height?: number;
+    /**
+     * Color of the elapsed line
+     */
+    elapsedLineColor?: Colors;
+    /**
+     * Color of the pending line
+     */
+    pendingLineColor?: Colors;
+    /**
+     * Number of the steps
+     */
+    steps?: IProgressSteps;
+}

package/dist/types/promoWithTags.d.ts

@@ -0,0 +1,81 @@
+import { ReactElement } from 'react';
+import { EditorialLink, PromoLinks } from './editorial';
+import { IntegratedTimerProps } from './timer';
+import { Image } from './types';
+export interface IPromoWithTagsProps {
+    /**
+     * Text placed in the editorial component
+     */
+    text?: string;
+    /**
+     * Title placed in the editorial component
+     */
+    title: string;
+    /**
+     * Title size
+     */
+    titleSize?: 'small' | 'large';
+    /**
+     * Subtitle placed in the editorial component
+     */
+    subtitle?: string;
+    /**
+     * Position of the image in the editorial component
+     */
+    imagePosition?: 'left' | 'right';
+    /**
+     * Image to be displayed in the editorial component with aspect ratio 4:3
+     */
+    image?: Image;
+    /**
+     * Component to be displayed instead of the image after clicking on the button
+     */
+    children?: ReactElement<HTMLElement>;
+    /**
+     * Array of buttons props. First one should have PrimaryButton attributes, second one Tertiary button attributes
+     */
+    links?: PromoLinks;
+    /**
+     * Array of buttons props that will be displayed above the main buttons
+     */
+    textLinks?: EditorialLink[];
+    /**
+    /**
+     * Array of tags in the editorial component
+     */
+    aboveTitleTags?: string[];
+    /**
+     * Array of tags in the editorial component
+     */
+    belowTitleTags?: string[];
+    /**
+     * Text in the middle
+     */
+    middleText?: string;
+    /**
+     * Text in the bottom
+     */
+    bottomText?: string;
+    /**
+     * Display with reduced height & font size for use as card
+     */
+    asCard?: boolean;
+    /**
+     * Make CTA appear disabled
+     */
+    disableCTA?: boolean;
+    /**
+     * Copy to show on disabled CTA
+     */
+    disabledCTACopy?: string;
+    /**
+     * Params for Timer component
+     */
+    timerParams?: IntegratedTimerProps;
+}
+export interface IPromoWithTagsStyledProps {
+    /**
+     * Sets margin for the tags container
+     */
+    marginBottom?: number;
+}

package/dist/types/tableTypes.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { Colors } from './types';
+export interface ContentProps {
+    content: string | ReactNode;
+}
+export interface CellProps {
+    cell: ReactNode;
+    cellIndex: number;
+    columns: number;
+    lineColor: Colors;
+}
+export interface RowProps {
+    row: any[];
+    rowIndex: number;
+    columns: number;
+    lineColor: Colors;
+}
+export interface ITableProps {
+    /**
+     * Number of columns in table
+     */
+    columns: number;
+    /**
+     * Headings array
+     */
+    headings?: string[];
+    /**
+     * Table content
+     */
+    children: ReactNode;
+    /**
+     * Line divider color
+     */
+    lineColors?: Colors;
+    /**
+     * Rows in table per page for pagination
+     */
+    rowsPerPage: number;
+    /**
+     * Pagination
+     */
+    pagination?: boolean;
+    /**
+     * Description - for Accessibility, aria-describedby prop
+     */
+    description?: string;
+}

package/dist/types/tickbox.d.ts

@@ -15,6 +15,12 @@ export interface ITickboxProps {
      * Mode to determine colors of text and checkmark
      */
     mode?: TickboxMode;
+    /**
+     * Use a white background and black checkmark for the tickbox,
+     * regardless of mode?
+     * PREFERRED in new components, but not default
+     */
+    whiteBox?: boolean;
     /**
      * Callback called when tickbox change
      */
@@ -23,22 +29,51 @@ export interface ITickboxProps {
      * Data label for tickbox
      */
     dataLabel?: string;
+    /**
+     * Element is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Error message, default is undefined. To show the tickbox
+     * in an error state without any text, pass in an empty string.
+     */
+    error?: string;
 }
 export interface TickboxLabelProps {
     /**
      * Dark mode or not
      */
     dark: boolean;
+    /**
+     * Element is disabled
+     */
+    disabled?: boolean;
 }
 export interface TickboxInputProps {
     /**
      * Dark mode or not
      */
     dark: boolean;
+    /**
+     * Use a white background for the tickbox (regardless of mode)
+     */
+    whiteBox?: boolean;
+    /**
+     * Element is disabled
+     */
+    disabled?: boolean;
 }
 export interface TickboxCheckmarkProps {
     /**
      * Dark mode or not
      */
     dark: boolean;
+    /**
+     * Element is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Display the border of the tickbox in errorstate style
+     */
+    error?: boolean;
 }

package/dist/types/timer.d.ts

@@ -0,0 +1,37 @@
+import { Colors } from './types';
+export interface IntegratedTimerProps {
+    /**
+     * End date
+     */
+    endDate: string;
+    /**
+     * Text that appears once end date is reached
+     */
+    endDateText?: string;
+    /**
+     * Title that is diplayed when timer is active
+     */
+    title?: string;
+}
+export interface ITimerProps {
+    /**
+     * Timer title
+     */
+    title?: string;
+    /**
+     * Timer bottom border
+     */
+    bottomLine?: boolean;
+    /**
+     * End date
+     */
+    endDate: string;
+    /**
+     * Timer color theme
+     */
+    color?: Colors;
+    /**
+     * Function to fire once end date is reached
+     */
+    endDateHandler?: VoidFunction;
+}