@royaloperahouse/chord 2.2.5-b-select-test → 2.2.5-d-chord-development

package/dist/components/atoms/Icons/SvgIcons/Descriptors/Seat.svg.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+declare const _default: ({ color }: IconSVGProps) => React.ReactElement;
+export default _default;

package/dist/components/atoms/Icons/SvgIcons/Descriptors/Standing.svg.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+declare const _default: ({ color }: IconSVGProps) => React.ReactElement;
+export default _default;

package/dist/components/atoms/Icons/SvgIcons/Descriptors/Wheelchair.svg.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+declare const _default: ({ color }: IconSVGProps) => React.ReactElement;
+export default _default;

package/dist/components/atoms/Icons/SvgIcons/index.d.ts

@@ -53,10 +53,12 @@ export declare const IconLibrary: {
     Remove: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Restart: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Search: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
+    Seat: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Secure: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Settings: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Shift: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Space: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
+    Standing: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Star: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Subscribe: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Subtitles: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
@@ -69,6 +71,7 @@ export declare const IconLibrary: {
     UserSignedIn: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Volume: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Watch: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
+    Wheelchair: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     X: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Youtube: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
 };

package/dist/components/molecules/Card/Card.style.d.ts

@@ -12,6 +12,7 @@ export declare const ContentContainer: import("styled-components").StyledCompone
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TitleContainerMobile: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HighlightTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SubtitleContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const LabelContainer: import("styled-components").StyledComponent<"div", any, {
     isVisible: boolean;

package/dist/components/molecules/PageHeading/index.d.ts

@@ -4,4 +4,4 @@ import PageHeadingImpact from './Impact';
 import PageHeadingPanel from './Panel';
 import PageHeadingStream from './Stream';
 import PageHeadingCompact from './Compact/Compact';
-export { PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PageHeadingCompact, PageHeadingPanel, };
+export { PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PageHeadingCompact, };

package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts

@@ -3,3 +3,4 @@ export declare const CreditListingWrapper: import("styled-components").StyledCom
 export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RoleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CreditWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CreditBodyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/molecules/Select/Select.d.ts

@@ -1,3 +1,99 @@
 import { ISelectProps } from '../../../types/formTypes';
-declare function Select({ label, darkMode, width, error, isSearchable, ...selectProps }: ISelectProps): JSX.Element;
+/**
+ * A select component, created using <ul> and <li> elements, with bespoke accessibility
+ * logic.
+ *
+ * # Usage
+ * ## Defining a component that uses a typical Select element
+ * ```tsx
+ * const MyComponent = () => {
+ *   const handleSelect = (value: number, text: string) => {
+ *     console.log("Selected", value);
+ *   };
+ *
+ *   return <>
+ *     <Select
+ *       label="This is a label"
+ *       options={[
+ *         { text: "Option 1", value: 1 },
+ *         { text: "Option 2", value: 2 },
+ *       ]}
+ *       onSelect={handleSelect}
+ *     />
+ *   </>
+ * }
+ * ```
+ *
+ * ## Defining a component that uses a disabled Select element
+ * ```tsx
+ * const MyComponent = () => {
+ *   const handleSelect = (value: number, text: string) => {
+ *     console.log("Selected", value);
+ *   };
+ *
+ *   return <>
+ *     <Select
+ *       disabled // Select component disabled explicitely
+ *       label="This is a label"
+ *       options={[
+ *         { text: "Option 1", value: 1 },
+ *         { text: "Option 2", value: 2 },
+ *       ]}
+ *       onSelect={handleSelect}
+ *     />
+ *     <Select
+ *       label="This is a label"
+ *       options={[]} // Select component disabled implicitely by passing an empty array of options
+ *       onSelect={handleSelect}
+ *     />
+ *   </>
+ * }
+ * ```
+ *
+ * ## Defining a component with a non-labelled Select element
+ * ```tsx
+ * const MyComponent = () => {
+ *   const handleSelect = (value: number, text: string) => {
+ *     console.log("Selected", value);
+ *   };
+ *
+ *   return <>
+ *     <Select
+ *       label=""
+ *       options={[
+ *         { text: "Option 1", value: 1 },
+ *         { text: "Option 2", value: 2 },
+ *       ]}
+ *       onSelect={handleSelect}
+ *     />
+ *   </>
+ * }
+ * ```
+ *
+ * ## Changing the dimensions of a Select element (px)
+ * ```tsx
+ * const MyComponent = () => {
+ *   const handleSelect = (value: number, text: string) => {
+ *     console.log("Selected", value);
+ *   };
+ *
+ *   const selectWidthPx = 100;
+ *   const selectHeightPx = 27;
+ *
+ *   return <>
+ *     <Select
+ *       label="This is a label"
+ *       options={[
+ *         { text: "Option 1", value: 1 },
+ *         { text: "Option 2", value: 2 },
+ *       ]}
+ *       onSelect={handleSelect}
+ *       width={selectWidthPx}
+ *       height={selectHeightPx}
+ *     />
+ *   </>
+ * }
+ * ```
+ */
+declare function Select<T>({ label, options, onSelect, disabled, resetWhenOptionsUpdate, width, height, }: ISelectProps<T>): JSX.Element;
 export default Select;

package/dist/components/molecules/Select/Select.style.d.ts

@@ -1,5 +1,14 @@
+/// <reference types="react" />
 import { ISelectProps } from '../../../types/formTypes';
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, Pick<ISelectProps, "width" | "darkMode" | "error">, never>;
-export declare const TextLabel: import("styled-components").StyledComponent<"p", any, Pick<ISelectProps, "darkMode">, never>;
-export declare const ErrorLabel: import("styled-components").StyledComponent<"p", any, Pick<ISelectProps, "darkMode">, never>;
+export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ className, color, iconName, title, direction }: import("../../../types/iconTypes").IIconProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>>, any, {
+    iconName: "DropdownArrow";
+    color: string;
+    title: "Select Arrow";
+}, "title" | "color" | "iconName">;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Options: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Option: import("styled-components").StyledComponent<"li", any, {
+    hover: boolean;
+}, never>;
+export declare const SelectList: import("styled-components").StyledComponent<"ul", any, Pick<Required<ISelectProps<unknown>>, "height" | "width">, never>;

package/dist/components/molecules/index.d.ts

@@ -24,6 +24,6 @@ import ImageWithCaption from './ImageWithCaption';
 import Quote from './Quote';
 import MiniCard from './MiniCard';
 import ReadMore from './ReadMore';
-import AuxiliaryNav from './AuxiliaryNav';
 import PasswordStrength from './PasswordStrength';
+import AuxiliaryNav from './AuxiliaryNav';
 export { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, MiniCard, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, ReadMore, Quote, StatusBanner, SectionTitle, SearchBar, Select, Tabs, TextOnly, UpsellCard, };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-import { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, RadioGroup, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, Tab, TabLink, Tabs, TextArea, TextField, TextLink, Tickbox, Timer, TypeTags, UpsellCard, UpsellSection, Quote } from './components';
+import { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, RadioGroup, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, Tab, TabLink, Tabs, TextArea, TextField, TextLink, Tickbox, Timer, TypeTags, UpsellCard, UpsellSection, Quote } from './components';
 import { devices, breakpoints } from './styles/viewports';
 import zIndexes from './styles/zIndexes';
 import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, EditorialLink } from './types';
 import { MiniCard } from './components/molecules';
+import { BrandingStyle } from './types/impactHeader';
 import { ModalWindow } from './components/organisms';
-export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, AspectRatio, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, ITimerProps, IntegratedTimerProps, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, RadioGroup, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, StickyBar, Stepper, StreamBadge, Subtitle, Tab, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, zIndexes, };
+export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, AspectRatio, BodyText, BrandingStyle, breakpoints, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, ITimerProps, IntegratedTimerProps, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, RadioGroup, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, zIndexes, };

package/dist/types/card.d.ts

@@ -33,6 +33,10 @@ export interface ICardProps {
      * Text placed in the Card component
      */
     text?: string;
+    /**
+     * Highlighted small text
+     */
+    highlightText?: string;
     /**
      * List of Type Tags to display.
      */

package/dist/types/formTypes.d.ts

@@ -1,6 +1,5 @@
 import { InputHTMLAttributes } from 'react';
 import { IGridItemProps } from './types';
-import { Props as SelectProps } from 'react-select';
 export interface ITextAreaProps extends Partial<IGridItemProps>, InputHTMLAttributes<HTMLTextAreaElement> {
     /**
      * A text label to be shown above the text area input box.
@@ -54,7 +53,7 @@ export interface ITextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
      * `password` type adds `Show/Hide` button over the input element.
      * Any other types don't change the view of the element, just change
      * accessibility stuff
-     */
+    */
     type?: ITextFieldType;
     /**
      * A style prop that allows us to change what colours to
@@ -71,31 +70,41 @@ export interface ITextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
      */
     width?: number;
 }
-export interface ISelectProps extends SelectProps {
+export interface IOption<T> {
+    text: string;
+    readonly value: T;
+}
+export interface ISelectProps<T = unknown> {
+    /** The text label to be shown above the select component. */
+    label: string;
     /**
-     * A text label to be shown above the text input field.
+     * The options of the select component.
+     * If not provided OR provided an empty array,
+     * the component will be disabled.
      */
-    label?: string;
+    options: readonly IOption<T>[];
     /**
-     * An error label to be shown below the text input field.
-     * Input will be rendered with a red border if this prop exist.
-     * Empty string can be passed to render only error state without
-     * error message.
+     * Function to be ran when an option is selected.
      */
-    error?: string;
+    onSelect: (value: IOption<T>['value'], text: IOption<T>['text']) => void;
     /**
-     * Width in pixels.
-     * This will limit the maximum width of input element.
-     * By default it will take all available space.
+     * Disables the select component
      */
-    width?: number;
+    disabled?: boolean;
     /**
-    * Specify whether or not the containing element has a dark background.
-    * This property affects the border colours for focused and error states.
-    *
-    * Default: `false`
-    */
-    darkMode?: boolean;
+     * Style prop - sets the width of the select component in px.
+     */
+    width?: number | 'default';
+    /**
+     * Style prop - sets the height of the select component in px.
+     */
+    height?: number | 'default';
+    /**
+     * Opt-in to resetting the selected value to the first option,
+     * when the options change.
+     * Defaults to `false`;
+     */
+    resetWhenOptionsUpdate?: boolean;
 }
 export interface IStepperProps {
     /** The initial value to display in the center of the element */
@@ -114,17 +123,8 @@ export interface IStepperProps {
     step?: number;
     /** An error message to be shown below the stepper.
      *
-     * Default: `undefined`
      */
     error?: string;
-    /**
-     * A style prop that allows us to change what colours to
-     * use for light or dark mode (e.g. text color, border color, etc...)
-     * based on the background color.
-     *
-     * Defaults to `false`.
-     */
-    darkMode?: boolean;
     /**
      * Set disapled state
      */
@@ -133,6 +133,18 @@ export interface IStepperProps {
      * Minimum value allowed in the stepper
      */
     min?: number;
+    /**
+     * A style prop that allows us to change what colours to
+     * use for light or dark mode (e.g. text color, border color, etc...)
+     * based on the background color.
+     *
+     * Defaults to `false`.
+     * Specify whether or not the containing element has a dark background.
+     * This property affects the border colours for focused and error states.
+     *
+     * Default: `false`
+     */
+    darkMode?: boolean;
     /**
      * Maximum value allowed in the stepper
      */

package/dist/types/passwordStrength.d.ts

@@ -19,10 +19,10 @@ export interface IPasswordStrengthProps {
      */
     sectionsColor?: Colors;
     /**
-     * Color of active sections
-     *
-     * Default: Colors.Black
-     */
+    * Color of active sections
+    *
+    * Default: Colors.Black
+    */
     activeSectionsColor?: Colors;
     /**
      * Text
@@ -40,12 +40,12 @@ export interface IPasswordStrengthProps {
      * Strength label text
      *
      * Default: ""
-     */
+    */
     strengthLabel?: string;
     /**
      * Strength label text
      *
      * Default: Colors.Black
-     */
+    */
     strengthLabelColor?: Colors;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/chord",
-  "version": "2.2.5-b-select-test",
+  "version": "2.2.5-d-chord-development",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -113,7 +113,6 @@
   "dependencies": {
     "moment": "^2.29.4",
     "react-modal": "^3.16.1",
-    "react-scrolllock": "^5.0.1",
-    "react-select": "^5.8.0"
+    "react-scrolllock": "^5.0.1"
   }
-}
+}