Atomic Design with Storybook Dynamic elements

Question

I am working on a project that is using Atomic Design along with Storybook. I am a little confused as how to add atoms to molecules. ie if I had a base Modal with a header body and footer area how would I add atoms dynamically to them.

So the first wants to use the modal and have 3 buttons in the header and nothing else but then the next only wants a title.

There are going to be (n)different usages of the modal.

My component looks like this -

export default function ModalMolecule({  test, ...props }) {
    return (
        <>
            <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
                <div className="relative w-auto my-6 mx-auto max-w-3xl">
                    {/*content*/}
                    <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                        {/*header*/}
                        {test}
                        <div className="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t"></div>
                        {/*body*/}
                        <div className="relative p-6 flex-auto"></div>
                        {/*footer*/}
                        <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b"></div>
                    </div>
                </div>
            </div>
            <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
        </>
    );
}

My story looks like this -

export default {
    title: "Molecules/Modal",
    component: ModalMolecule,
};

const Template = (args) => <ModalMolecule {...args} />;

export const Basic = Template.bind({});
Basic.args = {
    label: "Basic",
    size: "md",
    onClick: () => {},
    test:{<div>Dynamicly pass Components from here</div>}
    
};

So then when I use the Modal I can dynamically pass the elements in like this -

const dynamicElement=()=>{
       return <><buttonAtom/></>
}


<ModalMolecule test={dynamicElement} />

I have looked around online but cant find anything on doing this.

As always any help is greatly appreciated!

Answer 1

I solved this by just having the props.children render and chain the components inside and render the children as needed.