@royaloperahouse/chord 2.2.3 → 2.2.5

package/dist/components/atoms/TextField/TextField.d.ts

@@ -1,41 +1,42 @@
+import React from 'react';
 import { ITextFieldProps } from '../../../types/formTypes';
 /**
  * A text field component, that wraps around the native `<input />` element
- * and adds some extra information around it (i.e. a text label and an error label).
+ * and adds some extra states and information around it (i.e. a text and an error labels,
+ * error state, show/hide button for password field).
  *
- * # Labels
+ * # Label
  * You can use this component just like you would use a regular `<input />` element,
  * just with the extra `label` prop, to set the label of the content. For example:
  * ```tsx
  * <TextField label="This is a label" />
  * ```
  *
- * **IMPORTANT!** If you want to render a `<TextField />` without a label, you will
- * have to make the label an empty string:
- * ```tsx
- * <TextField label='' />
- * ```
+ * # Error state
+ * An error label will be shown below the text input field if the `error` prop exists.
+ * Also input will be rendered with a red border. An empty string can be passed to
+ * render only error state without error message.
  *
- * This is not recommended, as it makes the input non-accessible - all `<TextField />`s should
- * have a label.
+ * # Password mode
+ * If type `password` provided this will be rendered with the `Show/Hide` button over the input field.
+ * Clicking on that changes type to `text` and back to `password`.
  *
  * # 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.
  * ```tsx
  * <div>
- *     <WhiteBackgroundContainer>
- *         <TextField label="..." />
- *     </WhiteBackgroundContainer>
- *
- *     <BlackBackgroundContainer>
- *         <TextField darkMode label="..." />
- *     </BlackBackgroundContainer>
- *     <BlueBackgroundContainer>
- *         <TextField darkMode label="..." />
- *     </BlueBackgroundContainer>
+ *   <WhiteBackgroundContainer>
+ *     <TextField label="..." />
+ *   </WhiteBackgroundContainer>
+ *   <BlackBackgroundContainer>
+ *     <TextField darkMode label="..." />
+ *   </BlackBackgroundContainer>
+ *   <BlueBackgroundContainer>
+ *     <TextField darkMode label="..." />
+ *   </BlueBackgroundContainer>
  * </div>
  * ```
  */
-declare const TextField: ({ label, error, darkMode, width, ...inputProps }: ITextFieldProps) => JSX.Element;
+declare const TextField: React.ForwardRefExoticComponent<ITextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

package/dist/components/atoms/TextField/TextField.style.d.ts

@@ -1,5 +1,9 @@
 import { ITextFieldProps } from '../../../types/formTypes';
-export declare const TextFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Input: import("styled-components").StyledComponent<"input", any, Pick<ITextFieldProps, "error" | "darkMode">, never>;
-export declare const TextLabel: import("styled-components").StyledComponent<"p", any, Pick<ITextFieldProps, "darkMode">, never>;
-export declare const ErrorLabel: import("styled-components").StyledComponent<"p", any, Pick<ITextFieldProps, "darkMode">, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, Pick<ITextFieldProps, "width">, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", any, Pick<ITextFieldProps, "error" | "darkMode"> & {
+    isPasswordField: boolean;
+}, never>;
+export declare const ShowHideButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const TextLabel: import("styled-components").StyledComponent<"div", any, Pick<ITextFieldProps, "darkMode">, never>;
+export declare const ErrorLabel: import("styled-components").StyledComponent<"div", any, Pick<ITextFieldProps, "darkMode">, never>;

package/dist/components/index.d.ts

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

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

@@ -0,0 +1,21 @@
+import { FunctionComponent } from 'react';
+import { IAuxiliaryNavProps } from '../../../types/auxiliaryNav';
+/**
+ * Vertical menu component uses for navigation
+ * inside website chapter. It looks like a vertical
+ * list with clickable items on desktop and dropdown
+ * list on mobile.
+ *
+ * ## Menu items
+ * Menu items should be passed as `items` prop. This
+ * should be an array of objects. Each object should
+ * have `text` (text displayed as a menu item) and
+ * `onClick` (click handler function)
+ *
+ * ## Active menu item
+ * Active menu item should be passed as component `activeItem`
+ * prop. This indicates on which menu item should be highlighted
+ * as active one. Should be equal to `text` prop from one of the `items`
+ */
+declare const AuxiliaryNav: FunctionComponent<IAuxiliaryNavProps>;
+export default AuxiliaryNav;

package/dist/components/molecules/AuxiliaryNav/AuxiliaryNav.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const MenuContainer: import("styled-components").StyledComponent<"menu", any, {}, never>;
+export declare const MenuList: import("styled-components").StyledComponent<"ul", any, {
+    mobileOpen: boolean;
+}, never>;
+export declare const MenuItem: import("styled-components").StyledComponent<"button", any, {
+    active: boolean;
+}, never>;
+export declare const MobileButton: import("styled-components").StyledComponent<"button", any, {
+    mobileOpen: boolean;
+}, never>;

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

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

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

@@ -0,0 +1,33 @@
+import { FunctionComponent } from 'react';
+import { IPasswordStrengthProps } from '../../../types/passwordStrength';
+/**
+ * Password strength indicator component.
+ * This renders some number of lines (6 by default)
+ * which should become active when the user improves
+ * the strength of the entered password.
+ *
+ * ## Sections
+ * To set number of sections it should be passed
+ * as `sections` prop.
+ *
+ * ## Active section
+ * To set number of active sections it should be passed
+ * as `activeSections` prop.
+ *
+ * ## Colors
+ * Color of every element can be controlled by properties:
+ * `sectionsColor`, `activeSectionsColor`,
+ * `textColor`, `strengthLabelColor`.
+ *
+ * ## Text
+ * `text` prop is used to render some message.
+ * For example error (together with proper red color)
+ * or some password requirement. It can be empty.
+ *
+ * ## Strength label
+ * `strengthLabel` prop is used to render strength characteristic
+ * of entered password. For example: `weak`, `normal`, `strong`, etc.
+ * It can be empty.
+ */
+declare const PasswordStrength: FunctionComponent<IPasswordStrengthProps>;
+export default PasswordStrength;

package/dist/components/molecules/PasswordStrength/PasswordStrength.styles.d.ts

@@ -0,0 +1,13 @@
+import { Colors } from '../../../types/types';
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Sections: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Section: import("styled-components").StyledComponent<"div", any, {
+    color: Colors;
+}, never>;
+export declare const BottomLine: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<"div", any, {
+    color: Colors;
+}, never>;
+export declare const LabelText: import("styled-components").StyledComponent<"div", any, {
+    color: Colors;
+}, never>;

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

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

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

@@ -0,0 +1,4 @@
+import { FunctionComponent } from 'react';
+import { IStatusBannerProps } from '../../../types/types';
+declare const StatusBanner: FunctionComponent<IStatusBannerProps>;
+export default StatusBanner;

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

@@ -0,0 +1,3 @@
+export declare const StatusBannerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SvgContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

@@ -13,6 +13,7 @@ import { PeopleListing, CreditListing } from './PeopleListing';
 import PromoWithTags from './PromoWithTags';
 import PromoWithTitle from './PromoWithTitle';
 import RadioGroup from './RadioGroup';
+import StatusBanner from './StatusBanner';
 import SearchBar from './SearchBar';
 import SectionTitle from './SectionTitle';
 import Select from './Select';
@@ -23,4 +24,6 @@ import ImageWithCaption from './ImageWithCaption';
 import Quote from './Quote';
 import MiniCard from './MiniCard';
 import ReadMore from './ReadMore';
-export { Accordion, Accordions, AnnouncementBanner, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, MiniCard, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, ReadMore, Quote, SectionTitle, SearchBar, Select, Tabs, TextOnly, UpsellCard, };
+import AuxiliaryNav from './AuxiliaryNav';
+import PasswordStrength from './PasswordStrength';
+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,7 @@
-import { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, 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, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, RadioGroup, ReadMore, RotatorButtons, 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, StickyBar, Stepper, 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 { ModalWindow } from './components/organisms';
-export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, 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, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, RadioGroup, ReadMore, RotatorButtons, 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, 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, };

package/dist/types/auxiliaryNav.d.ts

@@ -0,0 +1,21 @@
+export interface IAuxiliaryNavProps {
+    /**
+     * Menu items
+     */
+    items: IItem[];
+    /**
+     * Item will be marked as active.
+     * Should be equal to text prop from one of the items
+     */
+    activeItem: string;
+}
+export interface IItem {
+    /**
+     * Item text
+     */
+    text: string;
+    /**
+     * Item on click action
+     */
+    onClick: () => void;
+}

package/dist/types/formTypes.d.ts

@@ -33,15 +33,28 @@ export interface ITextAreaProps extends Partial<IGridItemProps>, InputHTMLAttrib
      */
     darkMode?: boolean;
 }
+export declare type ITextFieldType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
 export interface ITextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
     /**
      * A text label to be shown above the text input field.
      */
-    label: string;
+    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;
+    /**
+     * Type of text field.
+     * It can be one of: `text`, `email`, `password`,
+     * `number`, `search`, `tel`, `url`.
+     * `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
      * use for light or dark mode (e.g. text color, border color, etc...)
@@ -52,9 +65,8 @@ export interface ITextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
     darkMode?: boolean;
     /**
      * Width in pixels.
-     *
-     * Default: `196px`
-     *
+     * This will limit the maximum width of input element.
+     * By default it will take all available space.
      */
     width?: number;
 }

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

@@ -531,4 +531,14 @@ export interface IReadMoreProps {
      */
     truncate?: boolean;
 }
+export interface IStatusBannerProps {
+    /**
+     * Status banner text
+     */
+    statusText: string;
+    /**
+     * Set init visibility
+     */
+    visibility: boolean;
+}
 export declare type Image = Pick<HTMLImageElement, 'alt' | 'src'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/chord",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",