Skip to content

Commit

Permalink
docs(Modal): migrate "Story of" to "Canvas of" in "Sizes" story (#2559)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aarifkhan7
aarifkhan7 authored Oct 27, 2024
1 parent eff27e1 commit b19996b
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 144 deletions.
6 changes: 1 addition & 5 deletions packages/core/src/components/Modal/__stories__/Modal.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,7 @@ Use modal for short and non-frequent tasks. For common tasks consider using the

### Sizes

<Canvas>
<Story of={ModalStories.WidthVariantsNormal} />
<Story of={ModalStories.WidthVariantsFull} />
<Story of={ModalStories.WidthVariantsCustom} />
</Canvas>
<Canvas of={ModalStories.Sizes} />

### Modal header with an icon

Expand Down
236 changes: 97 additions & 139 deletions packages/core/src/components/Modal/__stories__/Modal.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,145 +70,103 @@ export const Overview = {
name: "Overview"
};

export const WidthVariantsNormal = {
// Boilerplate for creating a modal, not relevant for this example
render:
// Internal helper, not part of the API
// internal helper, not part of the API
// Modal with default width variant
// Width prop effects on the modal width
() => {
const [show, setShow] = useState(false);
const openModalButtonRef = useRef(null);
const closeModal = useCallback(() => {
setShow(false);
}, []);

const openModalButton = useHelperOpenModalButton({
title: "Default",
setShow,
openModalButtonRef
});

return (
<>
{openModalButton}
<Modal
id="story-book-modal"
title="Modal title"
triggerElement={openModalButtonRef.current}
show={show}
onClose={closeModal}
width={Modal.width.DEFAULT}
contentSpacing
>
<ModalContent>Modal content goes here</ModalContent>
<ModalFooterButtons
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
onPrimaryButtonClick={closeModal}
onSecondaryButtonClick={closeModal}
/>
</Modal>
</>
);
},

name: "Width variants - Normal"
};

export const WidthVariantsFull = {
// Boilerplate for creating a modal, not relevant for this example
render:
// Internal helper, not part of the API
// Modal with full width variant
// Width prop effects on the modal width
() => {
const [show, setShow] = useState(false);
const openModalButtonRef = useRef(null);

const closeModal = useCallback(() => {
setShow(false);
}, []);

const openModalButton = useHelperOpenModalButton({
title: "Full size",
setShow,
openModalButtonRef
});

return (
<>
{openModalButton}
<Modal
id="story-book-modal"
title="Modal title"
triggerElement={openModalButtonRef.current}
show={show}
onClose={closeModal}
width={Modal.width.FULL_WIDTH}
contentSpacing
>
<ModalContent>Modal content goes here</ModalContent>
<ModalFooterButtons
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
onPrimaryButtonClick={closeModal}
onSecondaryButtonClick={closeModal}
/>
</Modal>
</>
);
},

name: "Width variants - Full"
};

export const WidthVariantsCustom = {
// Boilerplate for creating a modal, not relevant for this example
render:
// Internal helper, not part of the API
// Modal with full width variant
// Width prop effects on the modal width
() => {
const [show, setShow] = useState(false);
const openModalButtonRef = useRef(null);

const closeModal = useCallback(() => {
setShow(false);
}, []);

const openModalButton = useHelperOpenModalButton({
title: "Custom size (i.e. 720px)",
setShow,
openModalButtonRef
});

return (
<>
{openModalButton}
<Modal
id="story-book-modal"
title="Modal title"
triggerElement={openModalButtonRef.current}
show={show}
onClose={closeModal}
width={"720px"}
contentSpacing
>
<ModalContent>Modal content goes here</ModalContent>
<ModalFooterButtons
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
onPrimaryButtonClick={closeModal}
onSecondaryButtonClick={closeModal}
/>
</Modal>
</>
);
},

name: "Width variants - custom"
export const Sizes = {
render: () => {
const [showNormal, setShowNormal] = useState(false);
const [showFull, setShowFull] = useState(false);
const [showCustom, setShowCustom] = useState(false);

const openModalButtonRefNormal = useRef(null);
const openModalButtonRefFull = useRef(null);
const openModalButtonRefCustom = useRef(null);

const closeModalNormal = useCallback(() => setShowNormal(false), []);
const closeModalFull = useCallback(() => setShowFull(false), []);
const closeModalCustom = useCallback(() => setShowCustom(false), []);

const openModalButtonNormal = useHelperOpenModalButton({
title: "Default",
setShow: setShowNormal,
openModalButtonRef: openModalButtonRefNormal
});

const openModalButtonFull = useHelperOpenModalButton({
title: "Full size",
setShow: setShowFull,
openModalButtonRef: openModalButtonRefFull
});

const openModalButtonCustom = useHelperOpenModalButton({
title: "Custom size (720px)",
setShow: setShowCustom,
openModalButtonRef: openModalButtonRefCustom
});

return (
<>
{/* Default Width Modal */}
{openModalButtonNormal}
<Modal
id="storybook-modal-normal"
title="Modal title"
triggerElement={openModalButtonRefNormal.current}
show={showNormal}
onClose={closeModalNormal}
width={Modal.width.DEFAULT}
contentSpacing
>
<ModalContent>Modal content goes here</ModalContent>
<ModalFooterButtons
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
onPrimaryButtonClick={closeModalNormal}
onSecondaryButtonClick={closeModalNormal}
/>
</Modal>

{/* Full Width Modal */}
{openModalButtonFull}
<Modal
id="storybook-modal-full"
title="Modal title"
triggerElement={openModalButtonRefFull.current}
show={showFull}
onClose={closeModalFull}
width={Modal.width.FULL_WIDTH}
contentSpacing
>
<ModalContent>Modal content goes here</ModalContent>
<ModalFooterButtons
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
onPrimaryButtonClick={closeModalFull}
onSecondaryButtonClick={closeModalFull}
/>
</Modal>

{/* Custom Width Modal */}
{openModalButtonCustom}
<Modal
id="storybook-modal-custom"
title="Modal title"
triggerElement={openModalButtonRefCustom.current}
show={showCustom}
onClose={closeModalCustom}
width="720px"
contentSpacing
>
<ModalContent>Modal content goes here</ModalContent>
<ModalFooterButtons
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
onPrimaryButtonClick={closeModalCustom}
onSecondaryButtonClick={closeModalCustom}
/>
</Modal>
</>
);
},
name: "Sizes"
};

export const ModalWithIcon = {
Expand Down

0 comments on commit b19996b

Please sign in to comment.