Merge pull request #1495 from Kajabi/SAGE-545_qj-modalcontent-gap

[SAGE-545] Modal - add gap property
Kajabi · Jul 7, 2022 · b0abee5 · b0abee5
2 parents c6c5790 + 0d4e568
commit b0abee5
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 2 deletions.
diff --git a/docs/app/views/examples/components/themes/next/modal/_preview.html.erb b/docs/app/views/examples/components/themes/next/modal/_preview.html.erb
@@ -237,6 +237,7 @@
   } do %>
     <%= sage_component SageModalContent, {
       title: "Example Spaced Modal",
+      gap: "lg",
       spacing: "panel",
     } do %>
       <% content_for :sage_header_aside do %>

diff --git a/docs/lib/sage_rails/app/sage_components/sage_modal_content.rb b/docs/lib/sage_rails/app/sage_components/sage_modal_content.rb
@@ -1,5 +1,6 @@
 class SageModalContent < SageComponent
   set_attribute_schema({
+    gap: [:optional, NilClass, SageSchemas::GRID_GAP_OPTION],
     header_icon: [:optional, {
       color: [:optional, SageSchemas::COLOR_SLIDER],
       name: SageSchemas::ICON,

diff --git a/docs/lib/sage_rails/app/views/sage_components/themes/next/_sage_modal_content.html.erb b/docs/lib/sage_rails/app/views/sage_components/themes/next/_sage_modal_content.html.erb
@@ -77,6 +77,7 @@
 <div
   class="
     sage-modal__content
+    <%= "sage-grid-gap-#{component.gap}" if component.gap %>
     <%= "sage-modal__content--spacing-#{component.spacing}" if component.spacing.present? %>
     <%= component.generated_css_classes %>"
   <%= component.generated_html_attributes.html_safe %>

diff --git a/packages/sage-react/lib/themes/next/Modal/Modal.story.jsx b/packages/sage-react/lib/themes/next/Modal/Modal.story.jsx
@@ -30,7 +30,12 @@ const DefaultBody = ({ onExit }) => (
         </Button>
       )}
     />
-    <Modal.Body>
+    <Modal.Body gap={Modal.Body.GAP_OPTIONS.LG}>
+      <p className={SageClassnames.TYPE.BODY}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </p>
       <p className={SageClassnames.TYPE.BODY}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
         sed do eiusmod tempor incididunt ut labore et dolore

diff --git a/packages/sage-react/lib/themes/next/Modal/ModalBody.jsx b/packages/sage-react/lib/themes/next/Modal/ModalBody.jsx
@@ -1,18 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { MODAL_CONTENT_SPACINGS } from './configs';
+import { MODAL_CONTENT_GAP_OPTIONS, MODAL_CONTENT_SPACINGS } from './configs';
 
 export const ModalBody = ({
   children,
   className,
+  gap,
   spacing,
   ...rest
 }) => {
   const classNames = classnames(
     'sage-modal__content',
     className,
     {
+      [`sage-grid-gap-${gap}`]: gap,
       [`sage-modal__content--spacing-${spacing}`]: spacing,
     }
   );
@@ -24,16 +26,19 @@ export const ModalBody = ({
   );
 };
 
+ModalBody.GAP_OPTIONS = MODAL_CONTENT_GAP_OPTIONS;
 ModalBody.SPACINGS = MODAL_CONTENT_SPACINGS;
 
 ModalBody.defaultProps = {
   children: null,
   className: '',
+  gap: MODAL_CONTENT_GAP_OPTIONS.DEFAULT,
   spacing: ModalBody.SPACINGS.DEFAULT,
 };
 
 ModalBody.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  gap: PropTypes.oneOf(Object.values(ModalBody.GAP_OPTIONS)),
   spacing: PropTypes.oneOf(Object.values(ModalBody.SPACINGS)),
 };
diff --git a/packages/sage-react/lib/themes/next/Modal/configs.js b/packages/sage-react/lib/themes/next/Modal/configs.js
@@ -1,3 +1,11 @@
+export const MODAL_CONTENT_GAP_OPTIONS = {
+  DEFAULT: null,
+  XS: 'xs',
+  SM: 'sm',
+  MD: 'md',
+  LG: 'lg',
+};
+
 export const MODAL_CONTENT_SPACINGS = {
   CARD: 'card',
   DEFAULT: null,