feat(vara-ui): add Modal maxWidth and headerAddon props (#1709)

gear-tech · Dec 19, 2024 · e5b2f8c · e5b2f8c
1 parent 5ed96cf
commit e5b2f8c
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 11 deletions.
diff --git a/utils/vara-ui/package-lock.json b/utils/vara-ui/package-lock.json
diff --git a/utils/vara-ui/package.json b/utils/vara-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/vara-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "React UI components used across Vara applications",
   "author": "Gear Technologies",

diff --git a/utils/vara-ui/src/components/modal/modal.module.scss b/utils/vara-ui/src/components/modal/modal.module.scss
@@ -60,7 +60,6 @@
   flex-direction: column;
   gap: 20px;
   width: 100%;
-  max-width: 400px;
   padding: 30px 0;
   background-color: rgba(246, 248, 248, 1);
   border-radius: 4px;
@@ -86,12 +85,30 @@
 }
 
 .heading {
-  margin: 0 16px 0 0;
-
   font-size: 24px;
   font-weight: 500;
   line-height: 24px;
   letter-spacing: 0;
 
   color: #000;
+
+  &Container {
+    margin-right: 16px;
+
+    display: flex;
+    align-items: center;
+    gap: 24px;
+  }
+}
+
+.small {
+  max-width: 460px;
+}
+
+.medium {
+  max-width: 560px;
+}
+
+.large {
+  max-width: 660px;
 }
diff --git a/...-ui/src/components/modal/modal.stories.ts → ...ui/src/components/modal/modal.stories.tsx b/...-ui/src/components/modal/modal.stories.ts → ...ui/src/components/modal/modal.stories.tsx
@@ -1,4 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../button';
 import { Modal } from './modal';
 
 type Type = typeof Modal;
@@ -46,5 +48,60 @@ const MobileScroll: Story = {
   parameters: { viewport: { defaultViewport: 'mobile1' } },
 };
 
+const SmallMaxWidth: Story = {
+  args: {
+    heading: 'Heading',
+    children: 'Some modal text',
+    close: () => {},
+    maxWidth: 'small',
+  },
+};
+
+const MediumMaxWidth: Story = {
+  args: {
+    heading: 'Heading',
+    children: 'Some modal text',
+    close: () => {},
+    maxWidth: 'medium',
+  },
+};
+
+const LargeMaxWidth: Story = {
+  args: {
+    heading: 'Heading',
+    children: 'Some modal text',
+    close: () => {},
+    maxWidth: 'large',
+  },
+};
+
+const CustomMaxWidth: Story = {
+  args: {
+    heading: 'Heading',
+    children: 'Some modal text',
+    close: () => {},
+    maxWidth: '768px',
+  },
+};
+
+const WithHeaderAddon: Story = {
+  args: {
+    heading: 'Heading',
+    headerAddon: <Button text="Click" size="small" />,
+    children: 'Some modal text',
+    close: () => {},
+  },
+};
+
 export default meta;
-export { Default, Scroll, Mobile, MobileScroll };
+export {
+  Default,
+  Scroll,
+  Mobile,
+  MobileScroll,
+  SmallMaxWidth,
+  MediumMaxWidth,
+  LargeMaxWidth,
+  CustomMaxWidth,
+  WithHeaderAddon,
+};
diff --git a/utils/vara-ui/src/components/modal/modal.tsx b/utils/vara-ui/src/components/modal/modal.tsx
@@ -11,7 +11,9 @@ type Props = {
   close: () => void;
   children?: ReactNode;
   className?: string;
+  headerAddon?: ReactNode;
   footer?: ReactNode;
+  maxWidth?: 'small' | 'medium' | 'large' | (string & NonNullable<unknown>);
 };
 
 // TODO: same as in gear-js/ui
@@ -35,7 +37,7 @@ function useMaxHeight() {
   return { bodyStyle, modalRef, bodyRef };
 }
 
-const Modal = ({ heading, close, children, className, footer }: Props) => {
+const Modal = ({ heading, close, children, className, headerAddon, footer, maxWidth = 'small' }: Props) => {
   const [root, setRoot] = useState<HTMLDivElement>();
   const { bodyStyle, modalRef, bodyRef } = useMaxHeight();
 
@@ -54,11 +56,19 @@ const Modal = ({ heading, close, children, className, footer }: Props) => {
     };
   }, []);
 
+  const isCustomMaxWidth = !['small', 'medium', 'large'].includes(maxWidth);
+
   const component = (
     <div className={styles.overlay} onClick={handleOverlayClick}>
-      <div className={styles.modal} ref={modalRef}>
+      <div
+        className={cx(styles.modal, !isCustomMaxWidth && styles[maxWidth])}
+        style={isCustomMaxWidth ? { maxWidth } : undefined}
+        ref={modalRef}>
         <header className={styles.header}>
-          <h3 className={styles.heading}>{heading}</h3>
+          <div className={styles.headingContainer}>
+            <h3 className={styles.heading}>{heading}</h3>
+            {headerAddon}
+          </div>
 
           <Button icon={CrossSVG} color="transparent" onClick={close} className={styles.button} />
         </header>

diff --git a/utils/vara-ui/src/components/select/select.module.scss b/utils/vara-ui/src/components/select/select.module.scss
@@ -35,7 +35,7 @@
   font: inherit;
 
   width: 100%;
-  padding: 8px 14px;
+  padding: 8px 32px 8px 14px;
   background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.616 5.54a.5.5 0 0 0 .768 0L9.317.82A.5.5 0 0 0 8.932 0H1.068a.5.5 0 0 0-.385.82l3.933 4.72Z' fill='%230C0C0D' fill-opacity='.5'/%3E%3C/svg%3E");
   background-position: right 14px center;
   background-repeat: no-repeat;