@royaloperahouse/chord 2.2.3-chord-development → 2.2.3-d-chord-development

package/dist/components/organisms/ModalWindow/ModalWindow.d.ts

@@ -0,0 +1,68 @@
+import { FunctionComponent } from 'react';
+import { ModalWindowProps } from '../../../types';
+/**
+ * A ModalWindow component, leveraging React Modal for rendering modals with enhanced accessibility
+ * and styling customization. This component is designed to be flexible for various use cases, with
+ * support for mobile responsiveness, custom z-indexes, and a close button.
+ *
+ * # Usage
+ * This component is intended to be used in React applications where modal functionality is required.
+ * It supports a range of props for customization, including isOpen, setIsOpen, children, appElementId,
+ * and accepts all additional props supported by React Modal for further configuration.
+ *
+ * ## Basic Example
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import ModalWindow from './ModalWindow';
+ *
+ * const App = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   const toggleModal = () => setIsOpen(!isOpen);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={toggleModal}>Open Modal</button>
+ *       <ModalWindow
+ *         isOpen={isOpen}
+ *         setIsOpen={setIsOpen}
+ *         appElementId="root"
+ *       >
+ *         <div>Modal Content Here</div>
+ *       </ModalWindow>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * ## Advanced Usage
+ * You can further customize the modal by directly passing props supported by React Modal.
+ * This component adapts its z-index based on the device type (mobile or desktop) and allows for an
+ * accessible close functionality.
+ *
+ * ```tsx
+ * <ModalWindow
+ *   isOpen={isOpen}
+ *   setIsOpen={setIsOpen}
+ *   appElementId="root"
+ *   shouldCloseOnOverlayClick={true}
+ * >
+ *   <YourCustomComponent />
+ * </ModalWindow>
+ * ```
+ *
+ * # Props
+ * - `isOpen`: Boolean indicating if the modal is open.
+ * - `setIsOpen`: Function to set the open state of the modal.
+ * - `children`: Content to be displayed within the modal.
+ * - `appElementId`: ID of the app element to assist with accessibility.
+ * - All other props are passed directly to the underlying React Modal component, allowing for extensive customization.
+ *
+ * # Design and Accessibility
+ * This component automatically applies a `ScrollLock` when the modal is open to prevent background
+ * scrolling and sets appropriate z-index values to ensure the modal is layered correctly on the page.
+ * It also configures the modal for accessibility, including support for closing on ESC and setting
+ * `aria-modal` to true.
+ */
+declare const ModalWindow: FunctionComponent<ModalWindowProps>;
+export default ModalWindow;

package/dist/components/organisms/ModalWindow/ModalWindow.style.d.ts

@@ -0,0 +1,4 @@
+export declare const InnerModal: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/organisms/ModalWindow/index.d.ts

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

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

@@ -5,4 +5,5 @@ import TitleWithCTA from './TitleWithCTA';
 import UpsellSection from './UpsellSection';
 import { LiveChat } from './LiveChat';
 import StickyBar from './StickyBar';
-export { AnchorTabBar, Footer, LiveChat, Navigation, StickyBar, TitleWithCTA, UpsellSection };
+import ModalWindow from './ModalWindow';
+export { AnchorTabBar, Footer, LiveChat, ModalWindow, Navigation, StickyBar, TitleWithCTA, UpsellSection };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 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, 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 } from './types';
+import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, EditorialLink } from './types';
 import { MiniCard } from './components/molecules';
 import { BrandingStyle } from './types/impactHeader';
-export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AspectRatio, BodyText, BrandingStyle, breakpoints, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, ITimerProps, IntegratedTimerProps, LiveChat, MiniCard, 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, Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, zIndexes, };
+import { ModalWindow } from './components/organisms';
+export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, 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, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, RadioGroup, ReadMore, RotatorButtons, 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/index.d.ts

@@ -10,4 +10,5 @@ import { EditorialLink } from './editorial';
 import { IPageHeadingCompactProps } from './impactHeader';
 import { IntegratedTimerProps, ITimerProps } from './timer';
 import { ICreditListing } from './creditListing';
-export { AspectRatio, ButtonType, CarouselType, Colors, ICreditListing, EditorialLink, FooterData, IconNameType, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, };
+import { ModalWindowProps } from './modalWindow';
+export { AspectRatio, ButtonType, CarouselType, Colors, ICreditListing, EditorialLink, FooterData, IconNameType, IPageHeadingCompactProps, INavigationProps, INavTopProps, IntegratedTimerProps, ITimerProps, ModalWindowProps, TickboxMode, ThemeType, };

package/dist/types/modalWindow.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import Modal from 'react-modal';
+export interface ModalWindowProps extends Modal.Props {
+    /**
+     * Boolean indicating if the modal is open.
+     */
+    isOpen: boolean;
+    /**
+     * Function to set the open state of the modal.
+     */
+    setIsOpen: (isOpen: boolean) => void;
+    /**
+     * Content to be displayed within the modal.
+     */
+    children: ReactElement;
+    /**
+     * ID of the app element to assist with accessibility.
+     */
+    appElementId?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@royaloperahouse/chord",
-  "version": "2.2.3-chord-development",
+  "version": "2.2.3-d-chord-development",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
@@ -91,6 +91,7 @@
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11",
+    "@types/react-modal": "^3.16.3",
     "@types/react-test-renderer": "^17.0.1",
     "@types/styled-components": "^5.1.15",
     "@types/testing-library__jest-dom": "^5.14.1",
@@ -110,6 +111,8 @@
     "typescript": "^4.4.4"
   },
   "dependencies": {
-    "moment": "^2.29.4"
+    "moment": "^2.29.4",
+    "react-modal": "^3.16.1",
+    "react-scrolllock": "^5.0.1"
   }
 }