diff --git a/packages/orbit-components/src/Modal/Modal.ct-story.tsx b/packages/orbit-components/src/Modal/Modal.ct-story.tsx index b29ce24d9d..53dfc88a9d 100644 --- a/packages/orbit-components/src/Modal/Modal.ct-story.tsx +++ b/packages/orbit-components/src/Modal/Modal.ct-story.tsx @@ -66,3 +66,15 @@ export function ModalVisualNoHeaderNoFooter({ isMobileFullPage = false }) { ); } + +export function ModalVisualHeaderOnly({ isMobileFullPage = false }) { + return ( + {}} size={SIZES.NORMAL} isMobileFullPage={isMobileFullPage}> + } + description="Lorem ispum dolor sit amet" + /> + + ); +} diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx b/packages/orbit-components/src/Modal/Modal.ct.tsx index ba44490bb3..556e819d2d 100644 --- a/packages/orbit-components/src/Modal/Modal.ct.tsx +++ b/packages/orbit-components/src/Modal/Modal.ct.tsx @@ -5,6 +5,7 @@ import { ModalVisualDefaultStory, ModalVisualMobileHeader, ModalVisualNoHeaderNoFooter, + ModalVisualHeaderOnly, } from "./Modal.ct-story"; import { SIZES } from "./consts"; @@ -43,4 +44,16 @@ test.describe("visual Modal", () => { await expect(component).toHaveScreenshot(); }); + + test("ModalVisualHeaderOnly", async ({ mount }) => { + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); + + test("ModalVisualHeaderOnly isMobileFullPage", async ({ mount }) => { + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); }); diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Desktop-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Desktop-darwin.png new file mode 100644 index 0000000000..f3831c57db Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Desktop-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Desktop-linux.png new file mode 100644 index 0000000000..c0052d4a81 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Desktop-linux.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Desktop-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Desktop-darwin.png new file mode 100644 index 0000000000..8d3901364f Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Desktop-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Desktop-linux.png new file mode 100644 index 0000000000..2fdb03d4e0 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Desktop-linux.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Mobile-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Mobile-darwin.png new file mode 100644 index 0000000000..20a3579658 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Mobile-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Mobile-linux.png new file mode 100644 index 0000000000..c5d25563e5 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Large-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Medium-Mobile-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Medium-Mobile-darwin.png new file mode 100644 index 0000000000..790c889af3 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Medium-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Medium-Mobile-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Medium-Mobile-linux.png new file mode 100644 index 0000000000..d65810d694 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Medium-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Small-Mobile-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Small-Mobile-darwin.png new file mode 100644 index 0000000000..2dfc94523b Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Small-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Small-Mobile-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Small-Mobile-linux.png new file mode 100644 index 0000000000..d6efa07477 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Small-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Tablet-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Tablet-darwin.png new file mode 100644 index 0000000000..1c08a8c1f5 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Tablet-darwin.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Tablet-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Tablet-linux.png new file mode 100644 index 0000000000..39deee87f6 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-1-Tablet-linux.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Desktop-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Desktop-darwin.png new file mode 100644 index 0000000000..f3831c57db Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Desktop-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Desktop-linux.png new file mode 100644 index 0000000000..c0052d4a81 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Desktop-linux.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Desktop-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Desktop-darwin.png new file mode 100644 index 0000000000..8d3901364f Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Desktop-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Desktop-linux.png new file mode 100644 index 0000000000..2fdb03d4e0 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Desktop-linux.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Mobile-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Mobile-darwin.png new file mode 100644 index 0000000000..20a3579658 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Mobile-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Mobile-linux.png new file mode 100644 index 0000000000..c5d25563e5 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Large-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Medium-Mobile-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Medium-Mobile-darwin.png new file mode 100644 index 0000000000..c6207f1901 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Medium-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Medium-Mobile-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Medium-Mobile-linux.png new file mode 100644 index 0000000000..598a1d84ba Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Medium-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Small-Mobile-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Small-Mobile-darwin.png new file mode 100644 index 0000000000..8d3536fac3 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Small-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Small-Mobile-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Small-Mobile-linux.png new file mode 100644 index 0000000000..2211ee8146 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Small-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Tablet-darwin.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Tablet-darwin.png new file mode 100644 index 0000000000..1c08a8c1f5 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Tablet-darwin.png differ diff --git a/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Tablet-linux.png b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Tablet-linux.png new file mode 100644 index 0000000000..39deee87f6 Binary files /dev/null and b/packages/orbit-components/src/Modal/Modal.ct.tsx-snapshots/visual-Modal-ModalVisualHeaderOnly-isMobileFullPage-1-Tablet-linux.png differ diff --git a/packages/orbit-components/src/Modal/Modal.stories.tsx b/packages/orbit-components/src/Modal/Modal.stories.tsx index 77e19df94a..d1385ecfc0 100644 --- a/packages/orbit-components/src/Modal/Modal.stories.tsx +++ b/packages/orbit-components/src/Modal/Modal.stories.tsx @@ -459,6 +459,45 @@ export const WithItinerary: Story = { }, }; +export const WithModalHeaderOnly: Story = { + render: args => { + const { Container, onClose } = useModal(); + return ( + + + } + description="Select a flight below to see the menu (where available)" + /> + + + ); + }, + + args: { + mobileHeader: true, + }, + + parameters: { + info: "An example of a modal with a header only. Check Orbit.Kiwi for more detailed design guidelines.", + controls: { + exclude: [ + "size", + "fixedFooter", + "title", + "autoFocus", + "isMobileFullPage", + "preventOverlayClose", + "hasCloseButton", + "disableAnimation", + "labelClose", + "lockScrolling", + ], + }, + }, +}; + type PlaygroundStoryProps = ModalPropsAndCustomArgs & { header: boolean; footer: boolean }; export const Playground: StoryObj = { render: ({ diff --git a/packages/orbit-components/src/Modal/index.tsx b/packages/orbit-components/src/Modal/index.tsx index a99461c798..c305441885 100644 --- a/packages/orbit-components/src/Modal/index.tsx +++ b/packages/orbit-components/src/Modal/index.tsx @@ -440,6 +440,7 @@ const Modal = React.forwardRef( "lm:relative lm:bottom-auto lm:pb-0", "lm:[&_.orbit-modal-section:last-of-type]:pb-1000 lm:[&_.orbit-modal-section:last-of-type:after]:content-none lm:[&_.orbit-modal-section:last-of-type]:mb-[var(--orbit-modal-footer-height,0px)]", "lm:[&_.orbit-modal-mobile-header]:w-[calc(var(--orbit-modal-width)-48px-theme(spacing.1000))]", + "lm:[&:has(.orbit-modal-header-container:last-child)]:pb-1000", footerHeight && "lm:[&_.orbit-modal-section]:rounded-b-none", !hasModalSection && "[&_.orbit-modal-header-container]:mb-800 lm:[&_.orbit-modal-header-container]:mb-[var(--orbit-modal-footer-height,0px)]",