Playground for the drawer component - docs (#3513)

* feat(drawer component docs): playground example for drawer component

* feat(drawer component docs): add changeset

* feat(drawer component docs): fix text case

* feat(drawer component docs): modify hide controls props to string

---------

Co-authored-by: Ddouglasz <douglas.egiemeh@gmail.com>

.changeset/poor-wolves-burn.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-website/components-playground': minor
+---
+
+Add a playground example for drawer component to be used for drawer documentation.

website-components-playground/src/application.tsx

@@ -17,6 +17,8 @@ const FormDetailPage = lazy(() => import('./pages/form-detail-page'));
 const FormMainPage = lazy(() => import('./pages/form-main-page'));
 const FormModalPage = lazy(() => import('./pages/form-modal-page'));
 
+const Drawer = lazy(() => import('./pages/drawer'));
+
 const CustomFormDetailPage = lazy(
   () => import('./pages/custom-form-detail-page')
 );
@@ -79,6 +81,9 @@ const Application = () => (
       <Route path="/tabular-modal-page">
         <TabularModalPage />
       </Route>
+      <Route path="/drawer">
+        <Drawer />
+      </Route>
       <Route>
         <IndexPage />
       </Route>

website-components-playground/src/pages/drawer.tsx

@@ -0,0 +1,83 @@
+import { Drawer } from '@commercetools-frontend/application-components';
+import Spacings from '@commercetools-uikit/spacings';
+import Text from '@commercetools-uikit/text';
+import ModalController from '../components/modal-controller';
+import PlaygroundController from '../components/playground-controller';
+import LayoutApp from '../layouts/layout-app';
+
+const DrawerExample = () => (
+  <LayoutApp>
+    <PlaygroundController
+      knobs={[
+        {
+          kind: 'text',
+          name: 'title',
+          label: 'Title',
+          initialValue: 'Lorem ipsum',
+        },
+        {
+          kind: 'text',
+          name: 'subtitle',
+          label: 'Subtitle',
+          initialValue: 'Lorem ipsum dolor sit amet',
+        },
+        {
+          kind: 'text-multi',
+          name: 'content',
+          label: 'Content',
+          initialValue: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec turpis in risus elementum fringilla. Vestibulum nec vulputate metus, fringilla luctus nisl. Vestibulum mattis ultricies augue sagittis vestibulum. Nulla facilisi. Quisque tempor pulvinar efficitur. Praesent interdum ultrices leo. Vivamus non ex maximus justo egestas suscipit eget sed purus. Aliquam ut venenatis nulla. Fusce ac ligula viverra, blandit augue eget, congue turpis. Curabitur a sagittis leo. Nunc sed quam dictum, placerat nunc quis, luctus erat.\nNam id orci ut risus accumsan pellentesque. Quisque efficitur eu arcu ut tristique. Praesent ornare varius leo, ut consequat lacus rutrum vel. Donec mollis leo id lectus vehicula tempor. Nulla facilisi. Fusce fringilla tellus ac ligula consequat suscipit. Sed consectetur molestie quam eu pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst.`,
+        },
+        {
+          kind: 'select',
+          name: 'size',
+          label: 'Size',
+          valueOptions: [
+            { value: '10', label: '10' },
+            { value: '20', label: '20' },
+            { value: '30', label: '30' },
+          ],
+          initialValue: '10',
+        },
+        {
+          kind: 'select',
+          name: 'hideControls',
+          label: 'Hide controls',
+          valueOptions: [
+            { value: 'true', label: 'true' },
+            { value: 'false', label: 'false' },
+          ],
+          initialValue: 'false',
+        },
+      ]}
+    >
+      {({ values }) => (
+        <ModalController
+          title="Open the Drawer component by clicking on the button"
+          buttonLabel="Open Drawer"
+        >
+          {({ isOpen, setIsOpen }) => (
+            <Drawer
+              title={values.title as string}
+              subtitle={values.subtitle as string}
+              isOpen={isOpen}
+              size={values.size as 10 | 20 | 30}
+              onClose={() => setIsOpen(false)}
+              hideControls={values.hideControls === 'true'}
+              onPrimaryButtonClick={() => setIsOpen(false)}
+              onSecondaryButtonClick={() => setIsOpen(false)}
+            >
+              <Spacings.Stack scale="m">
+                {(values.content as string).split('\n').map((text, index) => (
+                  <Text.Body key={index}>{text}</Text.Body>
+                ))}
+              </Spacings.Stack>
+            </Drawer>
+          )}
+        </ModalController>
+      )}
+    </PlaygroundController>
+  </LayoutApp>
+);
+DrawerExample.displayName = 'DrawerExample';
+
+export default DrawerExample;

website-components-playground/src/pages/index.tsx

@@ -40,6 +40,9 @@ const Application = () => (
       <li>
         <Link to="/form-detail-page">{'<FormDetailPage>'}</Link>
       </li>
+      <li>
+        <Link to="/drawer">{'<Drawer>'}</Link>
+      </li>
     </ul>
   </div>
 );