fix: warpify modal (#36)

warp-ds · May 24, 2023 · 5d0b084 · 5d0b084
1 parent ca2660e
commit 5d0b084
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 161 deletions.
diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
     "@typescript-eslint/parser": "^4.14.1",
     "@unocss/webpack": "^0.50.6",
     "@vitejs/plugin-react-refresh": "^1.1.3",
-    "@warp-ds/uno": "^1.0.0-alpha.23",
+    "@warp-ds/uno": "^1.0.0-alpha.26",
     "babel-eslint": "^10.1.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-webpack": "^7.1.0",
@@ -106,7 +106,7 @@
   },
   "dependencies": {
     "@chbphone55/classnames": "^2.0.0",
-    "@warp-ds/component-classes": "^1.0.0-alpha.73",
+    "@warp-ds/component-classes": "^1.0.0-alpha.81",
     "@warp-ds/core": "^1.0.0",
     "react-focus-lock": "^2.5.2",
     "resize-observer-polyfill": "^1.5.1",

diff --git a/packages/index.ts b/packages/index.ts
@@ -5,6 +5,7 @@ export * from './breadcrumbs/src';
 export * from './button/src';
 export * from './card/src';
 export * from './expandable/src';
+export * from './modal/src';
 export * from './pill/src';
 export * from './select/src';
 export * from './slider/src';
@@ -16,6 +17,5 @@ export * from './toggle/src';
 /* export * from './box/src';
 export * from './attention/src';
 export * from './combobox/src';
-export * from './modal/src';
 export * from './switch/src';
 */
diff --git a/packages/modal/src/component.tsx b/packages/modal/src/component.tsx
@@ -1,5 +1,5 @@
 import { classNames } from '@chbphone55/classnames';
-import { modal as c } from '@warp-ds/component-classes';
+import { modal as ccModal } from '@warp-ds/component-classes';
 import React, { useEffect, useRef } from 'react';
 import { useId } from '../../utils/src';
 import FocusLock from 'react-focus-lock';
@@ -16,7 +16,7 @@ export const Modal = ({
 }: ModalProps) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const id = useId(props.id);
-
+  
   useEffect(() => {
     teardown();
     if (!contentRef.current) return;
@@ -34,7 +34,7 @@ export const Modal = ({
     <FocusLock>
       <div
         onClick={props.onDismiss}
-        className={classNames(props.className, c.backdrop)}
+        className={classNames(props.className, ccModal.backdrop, ccModal.transparentBg)}
         style={{ ...props.style }}
       >
         <div
@@ -55,27 +55,26 @@ export const Modal = ({
               props.onDismiss();
             }
           }}
-          className={c.modal}
+          className={ccModal.modal}
           tabIndex={-1}
         >
-          <div className={c.title}>
+          <div className={ccModal.title}>
             {typeof props.left === 'boolean' && props.left ? (
               <button
                 type="button"
                 aria-label="Tilbake"
-                className={classNames([
-                  c.transitionTitle,
-                  c.titleButton,
-                  c.titleButtonLeft,
-                  'justify-self-start',
-                ])}
+                className={classNames(
+                  ccModal.transitionTitle,
+                  ccModal.titleButton,
+                  ccModal.titleButtonLeft,
+                )}
                 onClick={props.onDismiss}
               >
                 <svg
-                  className={classNames([
-                    c.titleButtonIcon,
-                    'transform rotate-90',
-                  ])}
+                  className={classNames(
+                    ccModal.titleButtonIcon,
+                    ccModal.titleButtonIconRotated,
+                  )}
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 16 16"
                 >
@@ -92,14 +91,13 @@ export const Modal = ({
 
             <div
               id={`${id}__title`}
-              className={classNames({
-                [c.transitionTitle]: true,
-                'justify-self-center': !!props.left,
-                'col-span-2': !!!props.left,
-              })}
+              className={classNames(
+                ccModal.transitionTitle,
+                !!props.left ? ccModal.transitionTitleCenter : ccModal.transitionTitleColSpan
+              )}
             >
               {typeof props.title === 'string' ? (
-                <p className={c.titleText}>{props.title}</p>
+                <p className={ccModal.titleText}>{props.title}</p>
               ) : (
                 props.title
               )}
@@ -110,15 +108,14 @@ export const Modal = ({
                 type="button"
                 aria-label="Lukk"
                 onClick={props.onDismiss}
-                className={classNames([
-                  c.transitionTitle,
-                  c.titleButton,
-                  c.titleButtonRight,
-                  'justify-self-end',
-                ])}
+                className={classNames(
+                  ccModal.transitionTitle,
+                  ccModal.titleButton,
+                  ccModal.titleButtonRight,
+                )}
               >
                 <svg
-                  className={c.titleButtonIcon}
+                  className={ccModal.titleButtonIcon}
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
                 >
@@ -136,11 +133,11 @@ export const Modal = ({
               props.right
             )}
           </div>
-          <div ref={contentRef} className={c.content}>
+          <div ref={contentRef} className={ccModal.content}>
             {props.children}
           </div>
 
-          {!!props.footer && <div className={c.footer}>{props.footer}</div>}
+          {!!props.footer && <div className={ccModal.footer}>{props.footer}</div>}
         </div>
       </div>
     </FocusLock>