chore: adds default drawer header

src/admin/components/elements/DocumentDrawer/index.tsx

@@ -59,6 +59,8 @@ export const DocumentDrawer: React.FC<DocumentDrawerProps> = (props) => {
     <Drawer
       slug={drawerSlug}
       className={baseClass}
+      header={false}
+      gutter={false}
     >
       <DocumentDrawerContent {...props} />
     </Drawer>

src/admin/components/elements/Drawer/index.scss

@@ -72,8 +72,46 @@
     }
   }
 
+  &__header {
+    display: flex;
+    margin-top: base(2.5);
+    margin-bottom: base(1);
+    width: 100%;
+
+    &__title {
+      margin: 0;
+      flex-grow: 1;
+    }
+
+    &__close {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      overflow: hidden;
+      width: base(1);
+      height: base(1);
+
+      svg {
+        width: base(2.75);
+        height: base(2.75);
+        position: relative;
+        left: base(-.825);
+        top: base(-.825);
+
+        .stroke {
+          stroke-width: 2px;
+          vector-effect: non-scaling-stroke;
+        }
+      }
+    }
+  }
 
   @include mid-break {
+    &__header {
+      margin-top: base(1.5);
+    }
+
     &__close {
       width: base(1);
     }

src/admin/components/elements/Drawer/index.tsx

@@ -4,7 +4,9 @@ import { useWindowInfo } from '@faceless-ui/window-info';
 import { useTranslation } from 'react-i18next';
 import { Props, TogglerProps } from './types';
 import { EditDepthContext, useEditDepth } from '../../utilities/EditDepth';
+import { Gutter } from '../Gutter';
 import './index.scss';
+import X from '../../icons/X';
 
 const baseClass = 'drawer';
 
@@ -50,6 +52,9 @@ export const Drawer: React.FC<Props> = ({
   slug,
   children,
   className,
+  header,
+  title,
+  gutter = true,
 }) => {
   const { t } = useTranslation('general');
   const { closeModal, modalState } = useModal();
@@ -95,11 +100,32 @@ export const Drawer: React.FC<Props> = ({
           aria-label={t('close')}
         />
         <div className={`${baseClass}__content`}>
-          <div className={`${baseClass}__content-children`}>
+          <Gutter
+            className={`${baseClass}__content-children`}
+            right={gutter}
+            left={gutter}
+          >
             <EditDepthContext.Provider value={drawerDepth + 1}>
+              {header && header}
+              {header === undefined && (
+                <div className={`${baseClass}__header`}>
+                  <h2 className={`${baseClass}__header__title`}>
+                    {title}
+                  </h2>
+                  <button
+                    className={`${baseClass}__header__close`}
+                    id={`close-drawer__${slug}`}
+                    type="button"
+                    onClick={() => closeModal(slug)}
+                    aria-label={t('close')}
+                  >
+                    <X />
+                  </button>
+                </div>
+              )}
               {children}
             </EditDepthContext.Provider>
-          </div>
+          </Gutter>
         </div>
       </Modal>
     );

src/admin/components/elements/Drawer/types.ts

@@ -4,6 +4,9 @@ export type Props = {
   slug: string
   children: React.ReactNode
   className?: string
+  title?: string
+  header?: React.ReactNode
+  gutter?: boolean
 }
 
 export type TogglerProps = HTMLAttributes<HTMLButtonElement> & {

src/admin/components/elements/ListDrawer/DrawerContent.tsx

@@ -252,13 +252,13 @@ const DrawerContent: React.FC<ListDrawerProps & {
                       {!customHeader ? getTranslation(selectedCollectionConfig?.labels?.plural, i18n) : customHeader}
                     </h2>
                     {hasCreatePermission && (
-                    <DocumentDrawerToggler
-                      className={`${baseClass}__create-new-button`}
-                    >
-                      <Pill>
-                        {t('general:createNew')}
-                      </Pill>
-                    </DocumentDrawerToggler>
+                      <DocumentDrawerToggler
+                        className={`${baseClass}__create-new-button`}
+                      >
+                        <Pill>
+                          {t('general:createNew')}
+                        </Pill>
+                      </DocumentDrawerToggler>
                     )}
                   </div>
                   <button
@@ -272,20 +272,20 @@ const DrawerContent: React.FC<ListDrawerProps & {
                   </button>
                 </div>
                 {selectedCollectionConfig?.admin?.description && (
-                <div className={`${baseClass}__sub-header`}>
-                  <ViewDescription description={selectedCollectionConfig.admin.description} />
-                </div>
+                  <div className={`${baseClass}__sub-header`}>
+                    <ViewDescription description={selectedCollectionConfig.admin.description} />
+                  </div>
                 )}
                 {moreThanOneAvailableCollection && (
-                <div className={`${baseClass}__select-collection-wrap`}>
-                  <Label label={t('selectCollectionToBrowse')} />
-                  <ReactSelect
-                    className={`${baseClass}__select-collection`}
-                    value={selectedOption}
-                    onChange={setSelectedOption} // this is only changing the options which is not rerunning my effect
-                    options={enabledCollectionConfigs.map((coll) => ({ label: getTranslation(coll.labels.singular, i18n), value: coll.slug }))}
-                  />
-                </div>
+                  <div className={`${baseClass}__select-collection-wrap`}>
+                    <Label label={t('selectCollectionToBrowse')} />
+                    <ReactSelect
+                      className={`${baseClass}__select-collection`}
+                      value={selectedOption}
+                      onChange={setSelectedOption} // this is only changing the options which is not rerunning my effect
+                      options={enabledCollectionConfigs.map((coll) => ({ label: getTranslation(coll.labels.singular, i18n), value: coll.slug }))}
+                    />
+                  </div>
                 )}
               </header>
             ),

src/admin/components/elements/ListDrawer/index.tsx

@@ -46,6 +46,8 @@ export const ListDrawer: React.FC<ListDrawerProps> = (props) => {
     <Drawer
       slug={drawerSlug}
       className={baseClass}
+      header={false}
+      gutter={false}
     >
       <ListDrawerContent {...props} />
     </Drawer>

src/admin/components/forms/field-types/Blocks/BlocksDrawer/index.scss

@@ -1,11 +1,6 @@
 @import '../../../../../scss/styles.scss';
 
 .blocks-drawer {
-  &__wrapper {
-    margin-top: base(2.5);
-    width: 100%;
-  }
-
   &__blocks-wrapper {
     padding: base(0.5);
     margin-top: base(1.5);
@@ -32,10 +27,6 @@
   }
 
   @include mid-break {
-    &__wrapper {
-      margin-top: base(1.5);
-    }
-
     &__blocks-wrapper {
       padding: base(0.25);
     }

src/admin/components/forms/field-types/Blocks/BlocksDrawer/index.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import BlockSearch from './BlockSearch';
 import { Props } from './types';
 import { Drawer } from '../../../../elements/Drawer';
-import { Gutter } from '../../../../elements/Gutter';
 import { getTranslation } from '../../../../../../utilities/getTranslation';
 import { ThumbnailCard } from '../../../../elements/ThumbnailCard';
 import DefaultBlockImage from '../../../../graphics/DefaultBlockImage';
@@ -37,51 +36,49 @@ export const BlocksDrawer: React.FC<Props> = (props) => {
   }, [searchTerm, blocks]);
 
   return (
-    <Drawer slug={drawerSlug}>
-      <Gutter className={`${baseClass}__wrapper`}>
-        <h2>
-          {t('addLabel', { label: getTranslation(labels.singular, i18n) })}
-        </h2>
-        <BlockSearch setSearchTerm={setSearchTerm} />
-        <div className={`${baseClass}__blocks-wrapper`}>
-          <ul className={`${baseClass}__blocks`}>
-            {filteredBlocks?.map((block, index) => {
-              const {
-                labels: blockLabels,
-                slug,
-                imageURL,
-                imageAltText,
-              } = block;
+    <Drawer
+      slug={drawerSlug}
+      title={t('addLabel', { label: getTranslation(labels.singular, i18n) })}
+    >
+      <BlockSearch setSearchTerm={setSearchTerm} />
+      <div className={`${baseClass}__blocks-wrapper`}>
+        <ul className={`${baseClass}__blocks`}>
+          {filteredBlocks?.map((block, index) => {
+            const {
+              labels: blockLabels,
+              slug,
+              imageURL,
+              imageAltText,
+            } = block;
 
-              return (
-                <li
-                  key={index}
-                  className={`${baseClass}__block`}
-                >
-                  <ThumbnailCard
-                    onClick={() => {
-                      addRow(addRowIndex, slug);
-                      closeModal(drawerSlug);
-                    }}
-                    thumbnail={imageURL ? (
-                      <img
-                        src={imageURL}
-                        alt={imageAltText}
-                      />
-                    ) : (
-                      <div className={`${baseClass}__default-image`}>
-                        <DefaultBlockImage />
-                      </div>
-                    )}
-                    label={getTranslation(blockLabels.singular, i18n)}
-                    alignLabel="center"
-                  />
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      </Gutter>
+            return (
+              <li
+                key={index}
+                className={`${baseClass}__block`}
+              >
+                <ThumbnailCard
+                  onClick={() => {
+                    addRow(addRowIndex, slug);
+                    closeModal(drawerSlug);
+                  }}
+                  thumbnail={imageURL ? (
+                    <img
+                      src={imageURL}
+                      alt={imageAltText}
+                    />
+                  ) : (
+                    <div className={`${baseClass}__default-image`}>
+                      <DefaultBlockImage />
+                    </div>
+                  )}
+                  label={getTranslation(blockLabels.singular, i18n)}
+                  alignLabel="center"
+                />
+              </li>
+            );
+          })}
+        </ul>
+      </div>
     </Drawer>
   );
 };