@royaloperahouse/chord 0.1.0

package/src/types/navigation.ts

@@ -0,0 +1,149 @@
+import { MouseEvent } from 'react';
+import { IconNameType } from './iconTypes';
+import { IOptionItem } from './types';
+import { ReactNode } from 'react';
+
+export interface IAccountProps {
+  /**
+   * The text of the title
+   */
+  title?: string;
+  /**
+   * An Array of Option components
+   */
+  options?: IOptionItem[];
+  /**
+   * Function to be called when is clicked
+   */
+  onClick?: (e: string) => void;
+  /**
+   * The name of the icon
+   */
+  iconName?: IconNameType;
+  /**
+   * The linknk of the title
+   */
+  titleLink?: string;
+}
+
+export interface IBasketProps {
+  /**
+   * The value of the text
+   */
+  text?: string;
+  /**
+   * To keep selected the text of the Basket
+   */
+  selected?: boolean;
+  /**
+   * The number of items of the Basket
+   */
+  numItems?: number;
+  /**
+   * Function to be called when is clicked
+   */
+  onClick?: (e: string) => void;
+}
+
+export interface ISearchProps {
+  /**
+   * To keep selected the text of the Basket
+   */
+  selected?: boolean;
+  /**
+   * Function to be called when is clicked
+   */
+  onClick?: (e: MouseEvent) => void;
+}
+
+export interface INavTopProps {
+  children?: ReactNode;
+  /**
+   * The text of Account component
+   */
+  accountText?: string;
+  /**
+   * The icon of Account component
+   */
+  accountIcon?: IconNameType;
+  /**
+   * The options of Account component
+   */
+  accountOptions?: IOptionItem[];
+  /**
+   * The text of Basket component
+   */
+  basketText?: string;
+  /**
+   * The number of items of Basket component
+   */
+  basketNumItems?: number;
+  /**
+   * To know if search component is showed or not
+   */
+  isShowSearch?: boolean;
+  /**
+   * Function to be called when Search component is clicked
+   */
+  onClickSearch?: (e: MouseEvent) => void;
+  /**
+   * Function to be called when is clicked
+   */
+  onLink?: (e: string) => void;
+}
+
+export interface iMenuOptionProps {
+  /**
+   * The text of the title
+   */
+  title: string;
+  /**
+   * An Array of Option components
+   */
+  options: IOptionItem[];
+  /**
+   * The link of the title
+   */
+  titleLink?: string;
+}
+
+export interface IMenuProps {
+  /**
+   * An Array of menu items
+   */
+  items: iMenuOptionProps[];
+}
+
+export interface INavigationProps {
+  /**
+   * An Object to set NavTop data component
+   */
+  dataNavTop: INavTopProps;
+  /**
+   * Function to be called when is searched
+   */
+  onSearch: (e: string) => void;
+  /**
+   * Function to be called when is clicked
+   */
+  onLink: (e: string) => void;
+  /**
+   * A set of data to make a menu
+   */
+  menuData: IMenuProps;
+}
+
+export interface ISearchBarProps {
+  /**
+   * Function to be called when is clicked
+   */
+  onClick: (e: string) => void;
+  /**
+   * Function to be called when is closed
+   */
+  onClose: () => void;
+  /**
+   * Function to be called when is changed the data of the search
+   */
+  onChange: (e: boolean) => void;
+}

package/src/types/types.ts

@@ -0,0 +1,276 @@
+import { ReactNode, AnchorHTMLAttributes, MouseEventHandler } from 'react';
+import { StyledProps } from 'styled-components';
+import { IconNameType, DirectionType } from './iconTypes';
+
+export enum HeadingLevel {
+  H1 = 1,
+  H2 = 2,
+  H3 = 3,
+  H4 = 4,
+  H5 = 5,
+  H6 = 6,
+}
+
+export enum Colors {
+  White = 'white',
+  Black = 'black',
+  DarkGrey = 'darkgrey',
+  MidGrey = 'midgrey',
+  LightGrey = 'lightgrey',
+  Trasparent = 'transparent',
+  ErrorState = 'errorstate',
+  MediumState = 'mediumstate',
+  GoodState = 'goodstate',
+  Primary = 'primary',
+}
+export interface IHeadingProps {
+  level: HeadingLevel;
+  children: ReactNode;
+}
+
+export interface IHeadingWrapperProps extends StyledProps<any> {
+  level: HeadingLevel;
+}
+
+export enum ThemeType {
+  Core = 'core',
+  Stream = 'stream',
+  Cinema = 'cinema',
+}
+
+export interface IThemeProviderProps {
+  /**
+   * The theme to use for the child elements
+   */
+  theme: ThemeType;
+  children: ReactNode;
+}
+
+export interface ILogoProps {
+  /**
+   * The id value
+   */
+  id?: string;
+  /**
+   * The data-roh value
+   */
+  dataRoh?: string;
+  /**
+   * The anchor of the logo
+   */
+  anchor?: string;
+}
+
+export interface IOptionItem {
+  /**
+   * The text of the option
+   */
+  option: string;
+  /**
+   * The link of the option
+   */
+  optionLink: string;
+}
+
+export interface ITabProps {
+  children?: ReactNode;
+  /**
+   * The value of the title
+   */
+  title?: string;
+  /**
+   * The link of the title
+   */
+  titleLink?: string;
+  /**
+   * To keep selected the title of the Tab
+   */
+  selected?: boolean;
+  /**
+   * The name of the icon
+   */
+  iconName?: IconNameType;
+  /**
+   * If options are available in mobile devices
+   */
+  withOptionsInMobile?: boolean;
+  /**
+   * The orientation of the icon
+   */
+  withIcon?: 'right' | 'left' | 'none';
+  /**
+   * If show text in mobile devices
+   */
+  withTextInMobile?: boolean;
+  /**
+   * Function to be called when click
+   */
+  onClick?: (e: string) => void;
+}
+
+export interface ITabsProps {
+  /**
+   * An Array with Dropdown components
+   */
+  items?: IDropdownProps[];
+  /**
+   * Function to be called when click on showmenu
+   */
+  onShowMenu?: (e: boolean) => void;
+  /**
+   * Show menu in mobile devices
+   */
+  showMenu?: boolean;
+  /**
+   * Function to be called when click
+   */
+  onChange?: (e: string) => void;
+}
+
+export interface IDropdownProps {
+  /**
+   * The value of the title
+   */
+  title?: string;
+  /**
+   * The orientation of the icon
+   */
+  withIcon?: 'right' | 'left' | 'none';
+  /**
+   * The link of the title
+   */
+  titleLink?: string;
+  /**
+   * To keep selected the title of the Dropdown
+   */
+  selected?: boolean;
+  /**
+   * An Array with the options in the Dropdown
+   */
+  options?: IOptionItem[];
+  /**
+   * The name of the icon
+   */
+  iconName?: IconNameType;
+  /**
+   * Set if the behaviour of Dropdown change in mobile devices
+   */
+  isMobileBehaviour?: boolean;
+  /**
+   * If options are available in mobile devices
+   */
+  withOptionsInMobile?: boolean;
+  /**
+   * Function to be called when click
+   */
+  onChange?: (e: string) => void;
+}
+
+export interface IIndividualListing {
+  role: string;
+  name: string;
+  link?: string;
+  dataROH?: string;
+}
+
+export interface IPeopleListing {
+  people: IIndividualListing[];
+}
+
+export interface INodeProps {
+  /**
+   * The current object of Node
+   */
+  current: any;
+}
+
+export interface IGridItemProps extends StyledProps<any> {
+  /**
+   * The column in which to place the child elements
+   */
+  columnStartDesktop: number;
+  /**
+   * The number of columns over which the child elements will span
+   */
+  columnSpanDesktop?: number;
+  /**
+   * The column in which to place the child elements in mobile devices
+   */
+  columnStartDevice: number;
+  /**
+   * The number of columns over which the child elements will span in mobile devices
+   */
+  columnSpanDevice?: number;
+}
+
+export interface ISponsorshipProps {
+  /**
+   * Source URL for Sponsorship IFRAME.
+   */
+  src?: string;
+  /**
+   * Used for Analytics.
+   */
+  dataRoh?: string;
+  /**
+   * Used for Accessibility.
+   */
+  title?: string;
+}
+
+export interface ITextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: ReactNode;
+  /**
+   * Function to be called when a button is clicked
+   */
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  /**
+   * Name of the icon to be used in the button
+   */
+  iconName?: IconNameType;
+  /**
+   * Direction of the icon used in the button
+   */
+  iconDirection?: DirectionType;
+  /**
+   * Color of text and icon
+   */
+  color?: Colors;
+}
+
+export interface ISectionSplitterProps {
+  /**
+   * Set the width of the Section to full
+   */
+  fullWidth?: boolean;
+}
+export interface ITypeTagsProps {
+  /**
+   * List of Type Tags to display.
+   */
+  list: string[];
+}
+
+export interface ITextOnlyProps {
+  /**
+   * Text placed in the TextOnly component
+   */
+  text: string;
+}
+
+export type SectionTitleSize = 'small' | 'large';
+
+export interface ISectionTitleProps {
+  /**
+   * Title to display.
+   */
+  title: string;
+  /**
+   * Size of title to display - by default small, which renders as an H2 (and large is an H1).
+   */
+  size?: SectionTitleSize;
+  /**
+   * Optional description that can be rendered below the title.
+   */
+  description?: string;
+}