@royaloperahouse/chord 2.2.9-b-chord-development → 2.2.9-d-chord-development

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
 import { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, Progress, Radio, Radio2, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TextLogo, TextArea, TextField, TextLink, Tickbox, Tickbox2, Timer, TypeTags, VideoControls } from './atoms';
 import { AnchorTabBar, Footer, LiveChat, Navigation, StickyBar, TitleWithCTA, UpsellSection } from './organisms';
-import { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Tabs, TextOnly, UpsellCard, Quote } from './molecules';
+import { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Select2, Tabs, TextOnly, UpsellCard, Quote } from './molecules';
 import ThemeProvider from '../styles/ThemeProvider';
 import GlobalStyles from '../styles/GlobalStyles';
-export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Tabs, TextArea, TextField, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, LiveChat, VideoControls, };
+export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Select2, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Tabs, TextArea, TextField, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, LiveChat, VideoControls, };

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

@@ -18,7 +18,9 @@ export declare const LabelContainer: import("styled-components").StyledComponent
     isVisible: boolean;
     isGridCard: boolean;
 }, never>;
-export declare const ExtraActionsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ExtraActionsContainer: import("styled-components").StyledComponent<"div", any, {
+    fullWidth?: boolean | undefined;
+}, never>;
 export declare const LabelElements: import("styled-components").StyledComponent<"div", any, {
     bgColor?: Colors | undefined;
 }, never>;

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

@@ -1,5 +1,6 @@
 import { ISelectProps } from '../../../types/formTypes';
 /**
+ * DEPRECATED. Use Select2 instead.
  * A select component, created using <ul> and <li> elements, with bespoke accessibility
  * logic.
  *

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

@@ -0,0 +1,18 @@
+import { FunctionComponent } from 'react';
+import { ISelect2Props } from '../../../types/formTypes';
+/**
+ * A Select2 component wraps react-select with Chord styling and additional elements like
+ * text and error labels. This should be used just as usual react-select component.
+ * Note: using some advanced opportunities of react-select may require additional styling.
+ *
+ * # Error state
+ * An error label will be shown below the select if the `error` prop exists.
+ * Also select will be rendered with a red border. An empty string can be passed to
+ * render only error state without error message.
+ *
+ * # Light / Dark mode
+ * The component can also adapt its styles for light / dark mode. If you want this component
+ * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
+ */
+declare const SelectComponent: FunctionComponent<ISelect2Props>;
+export default SelectComponent;

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

@@ -0,0 +1,5 @@
+import { ISelect2Props } 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<ISelect2Props, "width" | "darkMode" | "error">, never>;
+export declare const TextLabel: import("styled-components").StyledComponent<"p", any, Pick<ISelect2Props, "darkMode">, never>;
+export declare const ErrorLabel: import("styled-components").StyledComponent<"p", any, Pick<ISelect2Props, "darkMode">, never>;

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

@@ -0,0 +1,2 @@
+import Select2 from './Select2';
+export default Select2;

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

@@ -18,6 +18,7 @@ import StatusBanner from './StatusBanner';
 import SearchBar from './SearchBar';
 import SectionTitle from './SectionTitle';
 import Select from './Select';
+import Select2 from './Select2';
 import Tabs from './Tabs';
 import TextOnly from './TextOnly';
 import UpsellCard from './UpsellCard';
@@ -27,4 +28,4 @@ import MiniCard from './MiniCard';
 import ReadMore from './ReadMore';
 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, RadioGroup2, ReadMore, Quote, StatusBanner, SectionTitle, SearchBar, Select, Tabs, TextOnly, UpsellCard, };
+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, RadioGroup2, ReadMore, Quote, StatusBanner, SectionTitle, SearchBar, Select, Select2, Tabs, TextOnly, UpsellCard, };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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, Radio2, RadioGroup, RadioGroup2, 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, Tickbox2, 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, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, Tab, TabLink, Tabs, TextArea, TextField, TextLink, Tickbox, Tickbox2, 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';
@@ -6,4 +6,4 @@ import { MiniCard } from './components/molecules';
 import { BrandingStyle } from './types/impactHeader';
 import { ModalWindow } from './components/organisms';
 import AuxiliaryButton from './components/atoms/Buttons/Auxiliary/AuxiliaryButton';
-export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, 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, Radio2, RadioGroup, RadioGroup2, 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, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, zIndexes, };
+export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, 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, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, zIndexes, };

package/dist/types/formTypes.d.ts

@@ -1,5 +1,6 @@
 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.
@@ -218,6 +219,32 @@ export interface ISelectProps<T = unknown> {
      */
     resetWhenOptionsUpdate?: boolean;
 }
+export interface ISelect2Props extends SelectProps {
+    /**
+     * A text label to be shown above the text input field.
+     */
+    label?: string;
+    /**
+     * 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.
+     */
+    error?: string;
+    /**
+     * Width in pixels.
+     * This will limit the maximum width of input element.
+     * By default it will take all available space.
+     */
+    width?: number;
+    /**
+     * 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;
+}
 export interface IStepperProps {
     /** The initial value to display in the center of the element */
     initialValue?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/chord",
-  "version": "2.2.9-b-chord-development",
+  "version": "2.2.9-d-chord-development",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -65,7 +65,6 @@
       "<rootDir>/src/jest.setup.ts"
     ],
     "moduleNameMapper": {
-      "^react$": "<rootDir>/node_modules/react",
       "\\.(png|jpg|jpeg)$": "<rootDir>/external/images/mock-image.js"
     },
     "modulePathIgnorePatterns": [
@@ -101,6 +100,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
+    "react-router-dom": "^6.22.3",
+    "react-test-renderer": "^17.0.2",
     "size-limit": "^6.0.4",
     "storybook-addon-designs": "^6.2.0",
     "storybook-addon-pseudo-states": "^1.0.0",
@@ -113,6 +114,7 @@
   "dependencies": {
     "moment": "^2.29.4",
     "react-modal": "^3.16.1",
-    "react-scrolllock": "^5.0.1"
+    "react-scrolllock": "^5.0.1",
+    "react-select": "^5.8.0"
   }
 }