@royaloperahouse/harmonic 0.1.0

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/quote.d.ts

@@ -0,0 +1,17 @@
+import { StyledProps } from 'styled-components';
+export interface IQuoteProps {
+    /**
+     * Text placed in the Quote component
+     */
+    text: string;
+    /**
+     * Attribution under the main text
+     */
+    attribution?: string;
+}
+export interface IQuoteAttributionBlockProps extends StyledProps<any> {
+    /**
+     * Set visibility of the attribution block
+     */
+    displayAttribution: boolean;
+}

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

@@ -0,0 +1,79 @@
+export declare enum TickboxMode {
+    Dark = "dark",
+    Light = "light"
+}
+export interface ITickboxProps {
+    /**
+     * The text of tickbox
+     */
+    children: string;
+    /**
+     * Tickbox is checked or not initially
+     */
+    checked?: boolean;
+    /**
+     * 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
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * 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;
+}