chore(modal): apply sb guidelines to modal

packages/components/src/modal/modal.tsx

@@ -7,7 +7,6 @@ import { Container } from '../content'
 /**
  * Modal containers allow users to view content that demands attention through an overlay window that opens on top of the current page.
  *
- * @playground
  * @example
  * ```jsx
  * function Example() {

packages/components/src/modal/stories/examples/modal-size.stories.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+
+import {
+  Modal,
+  ModalContent,
+  ModalDismiss,
+  ModalFooter,
+  ModalHeader,
+  ModalHeading,
+} from '../../index'
+
+import '../stories.css'
+import { Button } from '../../../button'
+import { Slot } from '../../../slot'
+
+export default {
+  title: 'components/modal/examples',
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+}
+
+export function Size() {
+  const [modal, setModal] = useState({ open: false, size: 'medium' })
+
+  return (
+    <>
+      <Button onClick={() => setModal({ open: true, size: 'small' })}>
+        Open modal small
+      </Button>
+      <Button onClick={() => setModal({ open: true, size: 'medium' })}>
+        Open modal medium
+      </Button>
+      <Button onClick={() => setModal({ open: true, size: 'large' })}>
+        Open modal large
+      </Button>
+      <Modal
+        size={modal.size as any}
+        open={modal.open}
+        onClose={() => setModal((prev) => ({ ...prev, open: false }))}
+      >
+        <ModalHeader>
+          <ModalHeading>Confirm action</ModalHeading>
+          <Slot>
+            <Button variant="tertiary" size="large">
+              Action
+            </Button>
+            <ModalDismiss />
+          </Slot>
+        </ModalHeader>
+        <ModalContent>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. In nulla
+          posuere sollicitudin aliquam ultrices sagittis orci. Vel risus commodo
+          viverra maecenas. Montes nascetur ridiculus mus mauris vitae ultricies
+          leo. Nibh cras pulvinar mattis nunc. Mattis aliquam faucibus purus in
+          massa tempor nec. Cursus mattis molestie a iaculis at. Dolor sed
+          viverra ipsum nunc aliquet bibendum. In eu mi bibendum neque egestas
+          congue. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras
+          fermentum odio. At tellus at urna condimentum mattis pellentesque id.
+        </ModalContent>
+        <ModalFooter>
+          <Button
+            onClick={() => setModal((prev) => ({ ...prev, open: false }))}
+            size="large"
+          >
+            Close
+          </Button>
+          <Button
+            variant="primary"
+            onClick={() => setModal((prev) => ({ ...prev, open: false }))}
+            size="large"
+          >
+            Ok
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  )
+}

packages/components/src/modal/stories/modal.play.stories.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react'
+
+import {
+  Modal,
+  ModalContent,
+  ModalDismiss,
+  ModalFooter,
+  ModalHeader,
+  ModalHeading,
+} from '../index'
+
+import './stories.css'
+import { Button } from '../../button'
+import { Text } from '../../text'
+
+export default {
+  title: 'components/modal',
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Modal size',
+    },
+    heading: {
+      control: 'text',
+      description: 'Represents the modal heading',
+    },
+    content: {
+      control: 'text',
+      description: 'Content to be displayed in the modal',
+    },
+    withFooter: {
+      control: 'boolean',
+      description: 'Whether should render modal footer or not',
+    },
+    cancelText: {
+      control: 'text',
+      description: 'Modal cancel text',
+    },
+    confirmText: {
+      control: 'text',
+      description: 'Modal confirmation text',
+    },
+  },
+  args: {
+    size: 'medium',
+    heading: 'Modal heading',
+    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. In nulla
+    posuere sollicitudin aliquam ultrices sagittis orci.`,
+    withFooter: true,
+    cancelText: 'Close',
+    confirmText: 'Ok',
+  },
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+}
+
+interface StoryArgs {
+  size: 'small' | 'medium' | 'large'
+  content: string
+  heading: string
+  cancelText: string
+  confirmText: string
+  withFooter: boolean
+}
+
+export function Play(args: StoryArgs) {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open modal</Button>
+      <Modal
+        size={args.size}
+        open={open}
+        onClose={() => {
+          setOpen(false)
+        }}
+      >
+        <ModalHeader>
+          <ModalHeading>{args.heading}</ModalHeading>
+          <ModalDismiss />
+        </ModalHeader>
+        <ModalContent>
+          <Text>{args.content}</Text>
+        </ModalContent>
+        {args.withFooter && (
+          <ModalFooter>
+            <Button onClick={() => setOpen(false)} size="large">
+              {args.cancelText}
+            </Button>
+            <Button
+              variant="primary"
+              onClick={() => setOpen(false)}
+              size="large"
+            >
+              {args.confirmText}
+            </Button>
+          </ModalFooter>
+        )}
+      </Modal>
+    </>
+  )
+}

packages/components/src/modal/stories/modal.show.stories.tsx

@@ -0,0 +1,133 @@
+import React from 'react'
+
+import {
+  Modal,
+  ModalContent,
+  ModalDismiss,
+  ModalFooter,
+  ModalHeader,
+  ModalHeading,
+} from '../index'
+
+import './stories.css'
+import { Button } from '../../button'
+import { Slot } from '../../slot'
+import { Bleed } from '../../bleed'
+import { IconImageSquareFill } from '@vtex/shoreline-icons'
+import { Tag } from '../../tag'
+
+export default {
+  title: 'components/modal',
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+}
+
+export function Show() {
+  return (
+    <Modal open size="large" onClose={() => null}>
+      <ModalHeader>
+        <Slot>
+          <Bleed start="$space-1">
+            <div className="image-placeholder">
+              <IconImageSquareFill />
+            </div>
+          </Bleed>
+          <ModalHeading>Confirm action</ModalHeading>
+          <Tag>Short text</Tag>
+        </Slot>
+        <Slot>
+          <Button variant="tertiary">Action</Button>
+          <ModalDismiss />
+        </Slot>
+      </ModalHeader>
+      <ModalContent>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Elit scelerisque
+        mauris pellentesque pulvinar pellentesque habitant morbi tristique
+        senectus. Morbi tristique senectus et netus et. Nec tincidunt praesent
+        semper feugiat nibh sed pulvinar proin gravida. Morbi tristique senectus
+        et netus et malesuada fames ac. Ultricies leo integer malesuada nunc vel
+        risus commodo viverra maecenas. Nunc congue nisi vitae suscipit tellus
+        mauris a diam maecenas. Dui accumsan sit amet nulla facilisi morbi
+        tempus. Venenatis lectus magna fringilla urna. Mus mauris vitae
+        ultricies leo integer malesuada nunc. Ac ut consequat semper viverra.
+        Fusce id velit ut tortor pretium viverra. Ut etiam sit amet nisl purus
+        in mollis nunc. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Ac
+        ut consequat semper viverra nam libero. Sed id semper risus in hendrerit
+        gravida rutrum quisque non. Quis commodo odio aenean sed adipiscing diam
+        donec adipiscing. Urna et pharetra pharetra massa massa ultricies mi
+        quis. Amet purus gravida quis blandit. Nunc lobortis mattis aliquam
+        faucibus purus in. Vulputate sapien nec sagittis aliquam malesuada
+        bibendum arcu vitae elementum. Risus sed vulputate odio ut. Elementum
+        curabitur vitae nunc sed velit. Tristique et egestas quis ipsum
+        suspendisse. Aliquet sagittis id consectetur purus ut. Sit amet mattis
+        vulputate enim nulla. Morbi non arcu risus quis varius quam quisque. Non
+        quam lacus suspendisse faucibus interdum posuere lorem. Ut ornare lectus
+        sit amet est. Aliquet enim tortor at auctor urna nunc id cursus. Non
+        pulvinar neque laoreet suspendisse interdum consectetur. Pulvinar neque
+        laoreet suspendisse interdum consectetur libero. At quis risus sed
+        vulputate odio ut. Egestas dui id ornare arcu odio ut. Dictum sit amet
+        justo donec enim diam. Egestas integer eget aliquet nibh praesent
+        tristique magna sit. Nulla posuere sollicitudin aliquam ultrices
+        sagittis. Vestibulum lorem sed risus ultricies tristique nulla aliquet
+        enim. Ut porttitor leo a diam sollicitudin tempor id. Cum sociis natoque
+        penatibus et magnis dis parturient montes nascetur. Enim ut sem viverra
+        aliquet. Et netus et malesuada fames ac. Orci dapibus ultrices in
+        iaculis nunc sed augue. Gravida arcu ac tortor dignissim convallis
+        aenean. Nunc vel risus commodo viverra maecenas. Sagittis vitae et leo
+        duis ut. Sit amet nisl suscipit adipiscing bibendum est ultricies
+        integer quis. Donec enim diam vulputate ut pharetra. Pretium fusce id
+        velit ut. Elementum pulvinar etiam non quam lacus suspendisse faucibus
+        interdum posuere. Ac tortor dignissim convallis aenean et tortor at.
+        Molestie nunc non blandit massa enim nec dui nunc. Odio pellentesque
+        diam volutpat commodo. Sit amet consectetur adipiscing elit ut aliquam
+        purus. Turpis tincidunt id aliquet risus feugiat in ante metus dictum.
+        Sit amet volutpat consequat mauris nunc congue nisi. Orci phasellus
+        egestas tellus rutrum tellus pellentesque. Est velit egestas dui id.
+        Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Lorem dolor
+        sed viverra ipsum nunc aliquet bibendum enim. Semper auctor neque vitae
+        tempus quam pellentesque nec nam aliquam. Volutpat diam ut venenatis
+        tellus in metus vulputate eu. Facilisi nullam vehicula ipsum a arcu
+        cursus vitae congue. Feugiat in fermentum posuere urna nec tincidunt.
+        Donec massa sapien faucibus et. Ac placerat vestibulum lectus mauris
+        ultrices eros. Volutpat lacus laoreet non curabitur gravida. Vitae
+        aliquet nec ullamcorper sit amet risus nullam. Et malesuada fames ac
+        turpis egestas maecenas pharetra convallis posuere. Erat pellentesque
+        adipiscing commodo elit at imperdiet. Ultricies integer quis auctor elit
+        sed vulputate. Nisi porta lorem mollis aliquam ut porttitor leo a. Urna
+        id volutpat lacus laoreet. Sagittis purus sit amet volutpat consequat.
+        Nibh venenatis cras sed felis. Amet consectetur adipiscing elit
+        pellentesque. Montes nascetur ridiculus mus mauris vitae ultricies leo
+        integer malesuada. Montes nascetur ridiculus mus mauris vitae ultricies.
+        Arcu dictum varius duis at. Quam elementum pulvinar etiam non. Purus
+        viverra accumsan in nisl nisi scelerisque eu ultrices. Congue mauris
+        rhoncus aenean vel elit scelerisque mauris. Pharetra sit amet aliquam id
+        diam maecenas. Sed odio morbi quis commodo odio aenean sed. Sed odio
+        morbi quis commodo odio aenean sed adipiscing diam. Eu non diam
+        phasellus vestibulum lorem sed risus ultricies. Aliquet enim tortor at
+        auctor. Id diam maecenas ultricies mi eget mauris pharetra et ultrices.
+        Risus ultricies tristique nulla aliquet enim. Pharetra massa massa
+        ultricies mi quis hendrerit. Vitae suscipit tellus mauris a diam
+        maecenas sed enim. Euismod nisi porta lorem mollis aliquam ut porttitor
+        leo. Suscipit adipiscing bibendum est ultricies integer quis auctor elit
+        sed. Ut faucibus pulvinar elementum integer. Fames ac turpis egestas
+        maecenas pharetra convallis posuere morbi. Varius duis at consectetur
+        lorem donec massa sapien. Montes nascetur ridiculus mus mauris.
+        Sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Non
+        arcu risus quis varius quam quisque. Ut tristique et egestas quis ipsum
+        suspendisse ultrices.
+      </ModalContent>
+      <ModalFooter>
+        <Button onClick={() => null} size="large">
+          Close
+        </Button>
+        <Button variant="primary" onClick={() => null} size="large">
+          Ok
+        </Button>
+      </ModalFooter>
+    </Modal>
+  )
+}