learningtribes-studio-frontend 1.4.2-alpha.0 → 1.4.2-alpha.2

package/src/components/EditImageModal/EditImageModal.scss

@@ -7,6 +7,7 @@
 
 .modal-dialog {
   max-width: $modal-lg;
+  margin: 40px auto;
 }
 
 // --- Copied from: https://github.com/edx/paragon/blob/master/src/Fieldset/Fieldset.scss
@@ -17,6 +18,12 @@
     width: auto;
     margin-bottom: 0;
   }
+
+  fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
 }
 
 .form-control.is-invalid.is-invalid-nodanger {
@@ -78,71 +85,88 @@
 }
 
 .modal-body {
-  // Form fields
-  form {
+  form.image-fields {
+    fieldset {
+      border: 0;
+      padding: 0;
+      margin: 0;
+    }
+
+    fieldset legend {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      border: 0;
+    }
+
     .paragon-fieldset {
       margin-bottom: 1.5rem;
-      
-      fieldset {
-        legend {
-          font-size: 14px;
-          font-weight: 500;
-          color: #333;
-          margin-bottom: 0.5rem;
-        }
-      }
     }
 
     .form-group {
-      margin-bottom: 1rem;
+      margin-bottom: 0;
 
       label {
+        display: block;
         font-size: 14px;
         font-weight: 500;
-        color: #333;
+        color: #09092d;
+        margin-bottom: 8px;
       }
 
       .form-control {
-        border-radius: 8px;
-        border: 1px solid #e0e0e0;
-        padding: 10px 14px;
+        border-radius: 4px;
+        border: 1px solid #d7d7e4;
+        padding: 12px 16px;
         font-size: 14px;
+        color: #09092d;
+        width: 100%;
 
         &:focus {
-          border-color: #4a90d9;
-          box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.1);
+          border-color: #5959eb;
+          box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5959eb;
         }
       }
 
-      .form-text {
+      .form-text,
+      small {
+        display: block;
         font-size: 12px;
-        color: #666;
+        color: #1f1f59;
         margin-top: 4px;
       }
     }
   }
 
-  // Dimensions row
-  .form-row {
-    .col {
-      .form-group {
-        label {
-          font-size: 14px;
-          font-weight: 500;
-        }
-      }
-    }
+  .dimensions-row {
+    display: flex;
+    align-items: flex-end;
+    gap: 12px;
+    margin-top: 20px;
+  }
+
+  .dimension-field {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .dimensions-separator {
+    flex-shrink: 0;
+    padding-bottom: 10px;
+    color: #1f1f59;
+    font-size: 14px;
   }
 }
 
-// Checkbox
 .form-check {
-  .form-check-input {
-    margin-top: 0.25rem;
-  }
+  margin-top: 16px;
 
   .form-check-label {
     font-size: 14px;
-    color: #333;
+    color: #09092d;
   }
 }

package/src/components/EditImageModal/EditImageModal.test.jsx

@@ -47,9 +47,6 @@ const getImageDescriptionFieldset = editImageModal =>
   (getFormContainer(editImageModal).find(Fieldset).at(0));
 const getImageDescriptionInput = editImageModal =>
   (getImageDescriptionFieldset(editImageModal).find(InputText));
-const getImageDescriptionInputCheckBox = editImageModal =>
-  (getImageDescriptionFieldset(editImageModal).find(CheckBox));
-
 const getImageDimensionsFieldset = editImageModal =>
   (getFormContainer(editImageModal).find(Fieldset).at(1));
 const getImageDimensionsWidthInput = editImageModal =>
@@ -112,31 +109,31 @@ describe('EditImageModal', () => {
               });
             });
 
-            it('a Next page button', () => {
+            it('a Save button', () => {
               expect(getNextPageButton(editImageModal)).toHaveLength(1);
             });
 
-            it('a Next page button with correct label', () => {
-              const nextPageButton = getNextPageButton(editImageModal);
+            it('a Save button with correct label', () => {
+              const saveButton = getNextPageButton(editImageModal);
 
-              const nextPageButtonText = shallowWithIntl(nextPageButton.prop('label'));
-              expect(nextPageButtonText.prop('message')).toEqual(messages.editImageModalNextPageButton);
+              const saveButtonText = shallowWithIntl(saveButton.prop('label'));
+              expect(saveButtonText.prop('message')).toEqual(messages.editImageModalInsertImageButton);
             });
 
-            it('a disabled Next page button', () => {
-              const nextPageButton = getNextPageButton(editImageModal);
+            it('a disabled Save button', () => {
+              const saveButton = getNextPageButton(editImageModal);
 
-              expect(nextPageButton.prop('disabled')).toEqual(true);
+              expect(saveButton.prop('disabled')).toEqual(true);
             });
 
-            it('a not disabled Next page button when asset selected', () => {
+            it('a not disabled Save button when asset selected', () => {
               editImageModal.setProps({
                 selectedAsset: testAssetsList[0],
               });
 
-              const nextPageButton = getNextPageButton(editImageModal);
+              const saveButton = getNextPageButton(editImageModal);
 
-              expect(nextPageButton.prop('disabled')).toEqual(false);
+              expect(saveButton.prop('disabled')).toEqual(false);
             });
           });
         });
@@ -323,9 +320,11 @@ describe('EditImageModal', () => {
               expect(header.prop('message')).toEqual(messages.editImageModalInsertHeader);
             });
 
-            it('a no assets message', () => {
-              expect(getModalBody(editImageModal).find(WrappedMessage).filterWhere(message => message.prop('tagName') === 'h3').at(1)
-                .prop('message')).toEqual(messages.editImageModalAssetsListNoAssetsMessage);
+            it('no empty-state message', () => {
+              const emptyMessage = getModalBody(editImageModal).find(WrappedMessage).filterWhere(
+                message => message.prop('message') === messages.editImageModalAssetsListNoAssetsMessage,
+              );
+              expect(emptyMessage).toHaveLength(0);
             });
 
             it('no AssetsList component', () => {
@@ -488,36 +487,6 @@ describe('EditImageModal', () => {
                 });
               });
 
-              describe('a image description CheckBox with', () => {
-                it('a CheckBox', () => {
-                  expect(getImageDescriptionInputCheckBox(editImageModal)).toHaveLength(1);
-                });
-
-                it('correct initial props', () => {
-                  const imageDescriptionInputCheckbox =
-                    getImageDescriptionInputCheckBox(editImageModal);
-
-                  expect(imageDescriptionInputCheckbox.prop('id')).toEqual('isDecorative');
-                  expect(imageDescriptionInputCheckbox.prop('id')).toEqual('isDecorative');
-
-                  expect(shallowWithIntl(imageDescriptionInputCheckbox.prop('label')).prop('message'))
-                    .toEqual(messages.editImageModalImageIsDecorativeCheckboxLabel);
-
-                  expect(imageDescriptionInputCheckbox.prop('checked')).toEqual(false);
-                });
-
-                it('a Learn More link in description', () => {
-                  /*
-                    Due to Enzyme issue #1213, we must wrap React Fragments in a div in order
-                    to succesfully shallow them. Once Enzyme introduces support for React Fragments,
-                    we can remove the extraneous div.
-                  */
-                  const imageDescriptionInputCheckBoxDescriptionMessages = shallowWithIntl(<div>{getImageDescriptionInputCheckBox(editImageModal).prop('description')}</div>).find(WrappedMessage);
-                  expect(imageDescriptionInputCheckBoxDescriptionMessages.at(1).prop('children')().type).toEqual('a');
-                  expect(imageDescriptionInputCheckBoxDescriptionMessages.at(1).prop('message'))
-                    .toEqual(messages.editImageModalLearnMore);
-                });
-              });
             });
 
             describe('an imageDimensions Fieldset with', () => {
@@ -539,8 +508,8 @@ describe('EditImageModal', () => {
                 });
               });
 
-              it('a form-row', () => {
-                expect(getImageDimensionsFieldset(editImageModal).find('div.form-row')).toHaveLength(1);
+              it('a dimensions row', () => {
+                expect(getImageDimensionsFieldset(editImageModal).find('div.dimensions-row')).toHaveLength(1);
               });
 
               describe('an imageDimensions width InputText with', () => {
@@ -620,7 +589,6 @@ describe('EditImageModal', () => {
         expect(editImageModal.state('imageDimensions')).toEqual({});
         expect(editImageModal.state('imageSource')).toEqual('');
         expect(editImageModal.state('imageStyle')).toEqual('');
-        expect(editImageModal.state('isImageDecorative')).toEqual(false);
         expect(editImageModal.state('isImageDescriptionValid')).toEqual(true);
         expect(editImageModal.state('isImageLoaded')).toEqual(false);
         expect(editImageModal.state('isImageLoading')).toEqual(false);
@@ -648,7 +616,6 @@ describe('EditImageModal', () => {
         expect(editImageModal.state('imageDimensions')).toEqual({});
         expect(editImageModal.state('imageSource')).toEqual('');
         expect(editImageModal.state('imageStyle')).toEqual('');
-        expect(editImageModal.state('isImageDecorative')).toEqual(false);
         expect(editImageModal.state('isImageDescriptionValid')).toEqual(true);
         expect(editImageModal.state('isImageLoaded')).toEqual(false);
         expect(editImageModal.state('isImageLoading')).toEqual(false);
@@ -672,7 +639,6 @@ describe('EditImageModal', () => {
         expect(editImageModal.state('imageDimensions')).toEqual({});
         expect(editImageModal.state('imageSource')).toEqual('');
         expect(editImageModal.state('imageStyle')).toEqual('');
-        expect(editImageModal.state('isImageDecorative')).toEqual(false);
         expect(editImageModal.state('isImageDescriptionValid')).toEqual(true);
         expect(editImageModal.state('isImageLoaded')).toEqual(false);
         expect(editImageModal.state('isImageLoading')).toEqual(false);
@@ -712,7 +678,6 @@ describe('EditImageModal', () => {
         });
         expect(editImageModal.state('imageStyle')).toEqual(sampleText);
         expect(editImageModal.state('imageSource')).toEqual(sampleText);
-        expect(editImageModal.state('isImageDecorative')).toEqual(false);
         expect(editImageModal.state('isImageDescriptionValid')).toEqual(true);
         expect(editImageModal.state('isImageLoaded')).toEqual(true);
         expect(editImageModal.state('isImageLoading')).toEqual(false);
@@ -956,23 +921,6 @@ describe('EditImageModal', () => {
         expect(editImageModal.state('currentValidationMessages')).toEqual({});
       });
 
-      it('this.state.currentValidationMessages has correct validation messages when invalid form submitted', () => {
-        getInsertImageButton(editImageModal).simulate('click');
-
-        expect(editImageModal.state('currentValidationMessages').imageDescription.props.message).toEqual(messages.editImageModalFormValidImageDescription);
-      });
-
-      it('this.state.currentValidationMessages has correct validation message when invalid image description submitted', () => {
-        editImageModal.setState({
-          imageSource: sampleText,
-        });
-
-        getInsertImageButton(editImageModal).simulate('click');
-
-        expect(editImageModal.state('currentValidationMessages')).not.toHaveProperty('imageDimensions');
-        expect(editImageModal.state('currentValidationMessages').imageDescription.props.message).toEqual(messages.editImageModalFormValidImageDescription);
-      });
-
       it('this.state.currentValidationMessages has correct validation message when invalid image dimensions submitted', () => {
         editImageModal.setState({
           imageSource: sampleText,
@@ -1008,7 +956,7 @@ describe('EditImageModal', () => {
         expect(editImageModal.state('currentValidationMessages')).not.toHaveProperty('imageDescription');
       });
 
-      it('status alert has correct validation messages when invalid form submitted', () => {
+      it('status alert has correct validation message when invalid dimensions submitted', () => {
         editImageModal.setState({
           imageDimensions: {
             height: (-1 * sampleImgData.naturalHeight),
@@ -1021,9 +969,8 @@ describe('EditImageModal', () => {
         editImageModal.update();
 
         const statusAlertListItems = shallowWithIntl(getStatusAlert(editImageModal).prop('dialog')).find('div ul.bullet-list li a');
-        expect(statusAlertListItems).toHaveLength(2);
-        expect(statusAlertListItems.at(0).find(WrappedMessage).prop('message')).toEqual(messages.editImageModalFormValidImageDescription);
-        expect(statusAlertListItems.at(1).find(WrappedMessage).prop('message')).toEqual(messages.editImageModalFormValidImageDimensions);
+        expect(statusAlertListItems).toHaveLength(1);
+        expect(statusAlertListItems.at(0).find(WrappedMessage).prop('message')).toEqual(messages.editImageModalFormValidImageDimensions);
       });
 
       it('validation messages are hyperlinks that navigate to appropriate form elements', () => {
@@ -1040,32 +987,8 @@ describe('EditImageModal', () => {
         editImageModal.update();
 
         const statusAlertListItems = shallowWithIntl(getStatusAlert(editImageModal).prop('dialog')).find('div ul.bullet-list li a');
-        expect(statusAlertListItems).toHaveLength(2);
-        expect(statusAlertListItems.at(0).prop('href')).toEqual('#imageDescription');
-        expect(statusAlertListItems.at(1).prop('href')).toEqual('#imageWidth');
-      });
-
-      it('status alert has correct validation message when invalid image description submitted', () => {
-        editImageModal.setState({
-          imageSource: sampleText,
-        });
-
-        getModalBody(editImageModal).find('img').simulate('load', { target: { ...sampleImgData } });
-
-        getInsertImageButton(editImageModal).simulate('click');
-
-        editImageModal.update();
-
-        const statusAlert = getStatusAlert(editImageModal);
-
-        const validationMessages = shallowWithIntl(statusAlert.prop('dialog')).find(WrappedMessage);
-        expect(validationMessages).toHaveLength(2);
-        expect(validationMessages.at(0).prop('message')).toEqual(messages.editImageModalFormErrorMissingFields);
-        expect(validationMessages.at(1).prop('message')).toEqual(messages.editImageModalFormValidImageDescription);
-
-        const statusAlertListItems = shallowWithIntl(statusAlert.prop('dialog')).find('div ul.bullet-list li a');
         expect(statusAlertListItems).toHaveLength(1);
-        expect(statusAlertListItems.at(0).find(WrappedMessage).prop('message')).toEqual(messages.editImageModalFormValidImageDescription);
+        expect(statusAlertListItems.at(0).prop('href')).toEqual('#imageWidth');
       });
 
       it('status alert has correct validation message when invalid image dimensions submitted', () => {
@@ -1340,79 +1263,6 @@ describe('EditImageModal', () => {
         expect(editImageModal.state('imageDescription')).toEqual(sampleText);
       });
 
-      it('sets this.state.isImageDecorative with value on checkbox onChange', () => {
-        const isImageDecoractiveCheckBox = getImageDescriptionInputCheckBox(editImageModal);
-
-        isImageDecoractiveCheckBox.simulate('change', true);
-
-        expect(editImageModal.state('isImageDecorative')).toEqual(true);
-
-        isImageDecoractiveCheckBox.simulate('change', false);
-
-        expect(editImageModal.state('isImageDecorative')).toEqual(false);
-      });
-
-      it('sends this.state.isImageDecorative as checkbox checked prop to image description checkbox', () => {
-        editImageModal.setState({
-          isImageDecorative: true,
-        });
-
-        expect(getImageDescriptionInputCheckBox(editImageModal).prop('checked')).toEqual(true);
-
-        editImageModal.setState({
-          isImageDecorative: false,
-        });
-
-        expect(getImageDescriptionInputCheckBox(editImageModal).prop('checked')).toEqual(false);
-      });
-
-      it('toggles image description input disabled prop via checkbox', () => {
-        getImageDescriptionInputCheckBox(editImageModal).simulate('change', true);
-
-        editImageModal.update();
-
-        expect(getImageDescriptionInput(editImageModal).prop('disabled')).toEqual(true);
-
-        getImageDescriptionInputCheckBox(editImageModal).simulate('change', false);
-
-        editImageModal.update();
-
-        expect(getImageDescriptionInput(editImageModal).prop('disabled')).toEqual(false);
-      });
-
-      it('returns correct feedback for invalid description (uses initial state)', () => {
-        const feedback = editImageModal.instance().validateImageDescription();
-
-        expect(feedback.isValid).toEqual(false);
-        expect(shallowWithIntl(feedback.validationMessage).prop('message'))
-          .toEqual(messages.editImageModalFormValidImageDescription);
-        expect(shallowWithIntl(feedback.dangerIconDescription).prop('message'))
-          .toEqual(messages.editImageModalFormError);
-      });
-
-      it('returns correct feedback for valid description (with non-empty description)', () => {
-        editImageModal.setState({
-          imageDescription: sampleText,
-        });
-
-        const feedback = editImageModal.instance().validateImageDescription();
-
-        expect(feedback.isValid).toEqual(true);
-        expect(feedback.validationMessage).toBeUndefined();
-        expect(feedback.dangerIconDescription).toBeUndefined();
-      });
-
-      it('returns correct feedback for valid description (with checked checkbox)', () => {
-        editImageModal.setState({
-          isImageDecorative: true,
-        });
-
-        const feedback = editImageModal.instance().validateImageDescription();
-
-        expect(feedback.isValid).toEqual(true);
-        expect(feedback.validationMessage).toBeUndefined();
-        expect(feedback.dangerIconDescription).toBeUndefined();
-      });
     });
 
     describe('Image Dimensions Fieldset', () => {
@@ -1789,10 +1639,11 @@ describe('EditImageModal', () => {
         expect(dispatchEventSpy.mock.calls[0][0].detail.alt).toEqual(sampleText);
       });
 
-      it('sends empty string in submitForm event if this.state.imageIsDecorative', () => {
-        getImageDescriptionInput(editImageModal).simulate('blur', sampleText);
-
-        getImageDescriptionInputCheckBox(editImageModal).simulate('change', true);
+      it('sends empty string in submitForm event when description is empty', () => {
+        editImageModal.setState({
+          imageDescription: '',
+          imageSource: sampleText,
+        });
 
         getInsertImageButton(editImageModal).simulate('click');
 

package/src/components/EditImageModal/displayMessages.jsx

@@ -48,9 +48,14 @@ const messages = defineMessages({
   },
   editImageModalImageDescriptionLabel: {
     id: 'editImageModalImageDescriptionLabel',
-    defaultMessage: 'Image Description (Alt Text)',
+    defaultMessage: 'Image Description',
     description: 'Label for the text input box for an image\'s description',
   },
+  editImageModalImageDecorativeDescription: {
+    id: 'editImageModalImageDecorativeDescription',
+    defaultMessage: 'If this image is purely decorative, it does not require alternative text.',
+    description: 'Help text shown under the image description when alternative text is optional',
+  },
   editImageModalImageDescriptionLegend: {
     id: 'editImageModalImageDescriptionLegend',
     defaultMessage: 'Image Description',
@@ -66,16 +71,6 @@ const messages = defineMessages({
     defaultMessage: 'Height',
     description: 'Label for the text input box for an image\'s height,',
   },
-  editImageModalImageIsDecorativeCheckboxDescription: {
-    id: 'editImageModalImageIsDecorativeCheckboxDescription',
-    defaultMessage: 'This image is a background or other image that does not require alternative text.',
-    description: 'Description for a checkbox that explains what it means for an image to be decorative',
-  },
-  editImageModalImageIsDecorativeCheckboxLabel: {
-    id: 'editImageModalImageIsDecorativeCheckboxLabel',
-    defaultMessage: 'This image is decorative only',
-    description: 'Label for a checkbox that denotes that an image is decorative',
-  },
   editImageModalImagePreviewText: {
     id: 'editImageModalImagePreviewText',
     defaultMessage: 'Image Preview',
@@ -116,11 +111,6 @@ const messages = defineMessages({
     defaultMessage: 'Edit Image Settings',
     description: 'Title of the modal used for editing image settings',
   },
-  editImageModalImageOrFields: {
-    id: 'editImageModalImageOrFields',
-    defaultMessage: 'or',
-    description: 'Describes two choices,',
-  },
   editImageModalNextPageButton: {
     id: 'editImageModalNextPageButton',
     defaultMessage: 'Next',