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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "learningtribes-studio-frontend",
-  "version": "1.4.2-alpha.1",
+  "version": "1.4.2-alpha.2",
   "description": "The frontend for the Open edX platform",
   "repository": "Learningtribes/studio-frontend",
   "scripts": {

package/src/components/AssetsDropZone/AssetsDropZone.scss

@@ -1,47 +1,33 @@
 @import 'edx-bootstrap';
 
+// Matches the shared upload widget used by the Uploads page and PDF editor.
+$upload-border: #ebebf1;
+$upload-brand: #5959eb;
+$upload-prompt-primary: #3535cd;
+$upload-prompt-secondary: #1f1f59;
+$upload-icon: #4c4c8e;
+
 .center-text {
   text-align: center !important;
 }
 
 .drop-zone-compact {
-  border: 1px dashed #e0e0e0;
+  border: 1px dashed $upload-border;
   border-radius: 8px;
   padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
   background-color: #fff;
   transition: all 0.3s ease;
-  cursor: pointer;
 
   &:hover {
-    border-color: #4a90d9;
+    border-color: $upload-brand;
     background-color: #fff;
   }
-
-  [data-identifier="asset-drop-zone-icon"] {
-    color: #9e9e9e;
-    margin-bottom: 8px;
-    
-    span {
-      font-size: 32px;
-    }
-  }
-
-  h2 {
-    display: none;
-  }
-
-  .label-or {
-    display: none;
-  }
-
-  button.btn {
-    display: none;
-  }
-
-  p {
-    font-size: 12px;
-    margin-bottom: 0;
-  }
 }
 
 .drop-zone {
@@ -50,49 +36,55 @@
 
 .drop-active {
   outline: none;
-  border: 2px dashed #4a90d9;
-  background-color: rgba(74, 144, 217, 0.05);
+  border-color: $upload-brand;
+  background-color: #fff;
+}
+
+.upload-icon {
+  font-size: 32px;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  color: $upload-icon;
+  margin-bottom: 8px;
 }
 
 .upload-prompt {
-  text-align: center;
-  margin-bottom: 4px;
   font-size: 16px;
   font-weight: 600;
+  margin-bottom: 4px;
 }
 
-.upload-link {
+.upload-prompt-primary {
   background: none;
   border: none;
-  color: #4a90d9;
+  color: $upload-prompt-primary;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   padding: 0;
-  text-decoration: none;
 
-  &:hover {
-    color: #4a90d9;
+  &:hover,
+  &:focus {
+    color: $upload-prompt-primary;
     text-decoration: none;
   }
 
   &:focus {
-    outline: 2px solid rgba(74, 144, 217, 0.5);
+    outline: 2px solid rgba(89, 89, 235, 0.5);
     outline-offset: 2px;
   }
 }
 
-.upload-text {
-  color: #666;
+.upload-prompt-secondary {
+  color: $upload-prompt-secondary;
   font-size: 16px;
-  font-weight: 400;
+  font-weight: 600;
 }
 
-.size-limit {
-  text-align: center;
-  color: #999;
+.upload-info {
   font-size: 14px;
-  margin-bottom: 0;
+  color: $upload-prompt-secondary;
 }
 
 .supported-files-types {

package/src/components/AssetsDropZone/AssetsDropZone.test.jsx

@@ -27,7 +27,7 @@ describe('<AssetsDropZone />', () => {
 
   describe('renders', () => {
     it('contains file browser button', () => {
-      expect(wrapper.find('button').text()).toEqual('Browse your computer');
+      expect(wrapper.find('button').text()).toEqual('Click to upload');
     });
     it('hides the icon & upload file size from screen readers', () => {
       expect(wrapper.find('[aria-hidden=true]').length).toBe(2);

package/src/components/AssetsDropZone/index.jsx

@@ -3,8 +3,6 @@ import classNames from 'classnames';
 import Dropzone from 'react-dropzone';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
-import FontAwesomeStyles from 'font-awesome/css/font-awesome.min.css';
 import WrappedMessage from '../../utils/i18n/formattedMessageWrapper';
 import messages from './displayMessages';
 import styles from './AssetsDropZone.scss';
@@ -57,31 +55,29 @@ export default class AssetsDropZone extends React.Component {
                 activeClassName={styles['drop-active']}
                 className={classNames([
                   this.props.compactStyle ? styles['drop-zone-compact'] : styles['drop-zone'],
-                  styles['center-text'],
                 ])}
                 data-identifier="asset-drop-zone"
-                disableClick
                 maxSize={this.dropZoneMaxFileSizeBytes}
                 onDrop={this.onDrop}
                 ref={this.setDropZoneRef}
               >
-                <div className={styles['center-text']} data-identifier="asset-drop-zone-icon">
-                  <span
-                    aria-hidden
-                    className={'far fa-images '+classNames(
-                      styles['center-text'],
-                      FontAwesomeStyles['fa-3x'])}
-                  />
-                </div>
+                <i
+                  aria-hidden="true"
+                  className={classNames('far', 'fa-images', styles['upload-icon'])}
+                  data-identifier="asset-drop-zone-icon"
+                />
                 <div className={styles['upload-prompt']}>
                   <WrappedMessage message={messages.assetsDropZoneBrowseLabel} >
                     { displayText => (
                       <button
                         type="button"
                         aria-describedby="asset-drop-zone-max-file-size-label"
-                        className={styles['upload-link']}
+                        className={styles['upload-prompt-primary']}
                         data-identifier="asset-drop-zone-browse-button"
-                        onClick={this.handleClick}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          this.handleClick();
+                        }}
                         ref={this.setUploadButtonRef}
                       >
                         {displayText}
@@ -90,7 +86,7 @@ export default class AssetsDropZone extends React.Component {
                   </WrappedMessage>
                   <WrappedMessage message={messages.assetsDropZoneHeader}>
                     { displayText => (
-                      <span className={styles['upload-text']} data-identifier="asset-drop-zone-header"> {displayText}</span>
+                      <span className={styles['upload-prompt-secondary']} data-identifier="asset-drop-zone-header"> {displayText}</span>
                     )}
                   </WrappedMessage>
                 </div>
@@ -101,14 +97,14 @@ export default class AssetsDropZone extends React.Component {
                   }}
                 >
                   { displayText => (
-                    <p
-                      aria-hidden
-                      className={styles['size-limit']}
+                    <div
+                      aria-hidden="true"
+                      className={styles['upload-info']}
                       data-identifier="asset-drop-zone-max-file-size-label"
                       id="asset-drop-zone-max-file-size-label"
                     >
                       {displayText}
-                    </p>
+                    </div>
                   )}
                 </WrappedMessage>
                 {this.props.supportedFileTypes !== undefined &&

package/src/components/AssetsList/AssetsList.scss

@@ -1,34 +1,41 @@
 @import 'edx-bootstrap';
 @import 'utils/scss/focus';
 
-// Horizontal scrollable grid
+// Horizontal strip. Card chrome matches the Uploads thumbnails;
+// selection and scrolling match the PDF editor file strip.
+$brand-primary: #5959eb;
+$neutral-fg: #09092d;
+$neutral-alt: #1f1f59;
+$preview-bg: #fafafa;
+$badge-bg: #ccccff;
+$badge-fg: #1717ab;
+
 .assets-grid {
   display: flex;
-  gap: 10px;
+  gap: 12px;
   overflow-x: auto;
   padding: 8px 0;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 
   &:focus {
     @include focus();
   }
 
-  // Custom scrollbar
   &::-webkit-scrollbar {
     height: 6px;
   }
 
   &::-webkit-scrollbar-track {
-    background: #f0f0f0;
+    background: #ebebf1;
     border-radius: 3px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #c0c0c0;
+    background: #c4c4d8;
     border-radius: 3px;
 
     &:hover {
-      background: #a0a0a0;
+      background: #b0b0cd;
     }
   }
 }
@@ -41,20 +48,18 @@
 
   &:hover {
     .asset-preview {
-      border-color: #c0c0c0;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     }
   }
 
   &.selected {
     .asset-preview {
-      border-color: #4a90d9;
-      border-width: 2px;
+      border-color: $brand-primary;
     }
 
     .asset-name {
-      color: #4a90d9;
-      background-color: rgba(74, 144, 217, 0.1);
-      padding: 2px 4px;
+      color: #fff;
+      background-color: $brand-primary;
       border-radius: 4px;
     }
   }
@@ -63,29 +68,30 @@
 .asset-preview {
   width: 100px;
   height: 100px;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  background-color: #fff;
+  border: 4px solid transparent;
+  border-radius: 4px;
+  background-color: $preview-bg;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: relative;
-  margin-bottom: 8px;
-  transition: border-color 0.2s ease;
   overflow: hidden;
+  box-sizing: content-box;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
 .file-type-badge {
   position: absolute;
-  top: 6px;
-  left: 6px;
-  background-color: #e8f4fd;
-  color: #1976d2;
-  font-size: 10px;
-  font-weight: 700;
-  padding: 2px 6px;
-  border-radius: 4px;
+  top: 4px;
+  left: 4px;
+  background-color: $badge-bg;
+  color: $badge-fg;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  padding: 4px;
+  border-radius: 2px;
   text-transform: lowercase;
   z-index: 1;
 }
@@ -94,11 +100,13 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  border-radius: 4px;
 }
 
 .asset-icon {
-  font-size: 36px;
-  color: #9e9e9e;
+  font-size: 35px;
+  color: $neutral-alt;
+  margin-top: 6px;
 
   i {
     display: block;
@@ -106,30 +114,29 @@
 }
 
 .asset-info {
-  text-align: center;
+  width: 100px;
+  margin-top: 8px;
 }
 
 .asset-name {
+  display: inline-block;
+  max-width: 100%;
+  box-sizing: border-box;
+  vertical-align: top;
   font-size: 12px;
   font-weight: 500;
-  color: #333;
+  color: $neutral-fg;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100px;
-  margin-bottom: 2px;
-
-  &.selected {
-    color: #4a90d9;
-    background-color: rgba(74, 144, 217, 0.1);
-    padding: 2px 4px;
-    border-radius: 4px;
-  }
+  padding: 2px 4px;
+  border-radius: 4px;
 }
 
 .asset-size {
-  font-size: 11px;
-  color: #666;
+  font-size: 12px;
+  font-weight: 400;
+  color: $neutral-alt;
 }
 
 // Old styles

package/src/components/AssetsList/index.jsx

@@ -94,7 +94,11 @@ export default class AssetsList extends React.Component {
     const isSelected = this.props.selectedAsset.id === asset.id;
     const baseUrl = this.props.courseDetails.base_url || '';
     const fileExt = this.getFileExtension(asset.display_name);
-    const fileSize = this.formatFileSize(asset.file_size);
+    const fileSize = this.formatFileSize(asset.file_size || asset.size);
+    const previewPath = asset.thumbnail || asset.url;
+    const previewSrc = previewPath
+      ? (previewPath.indexOf('http') === 0 ? previewPath : `${baseUrl}${previewPath}`)
+      : '';
 
     return (
       <div
@@ -102,16 +106,17 @@ export default class AssetsList extends React.Component {
         className={classNames(styles['asset-grid-item'], { [styles.selected]: isSelected })}
         id={`asset-list-option-${index}`}
         aria-selected={isSelected}
+        aria-label={asset.display_name}
         role="option"
         key={asset.id || asset.display_name}
         tabIndex="-1"
       >
         <div className={styles['asset-preview']}>
           <span className={styles['file-type-badge']}>{fileExt}</span>
-          {asset.thumbnail ? (
+          {previewSrc ? (
             <img
               className={styles['asset-thumbnail']}
-              src={`${baseUrl}${asset.thumbnail}`}
+              src={previewSrc}
               alt=""
             />
           ) : (
@@ -121,7 +126,7 @@ export default class AssetsList extends React.Component {
           )}
         </div>
         <div className={styles['asset-info']}>
-          <div className={classNames(styles['asset-name'], { [styles.selected]: isSelected })} title={asset.display_name}>
+          <div className={styles['asset-name']} title={asset.display_name}>
             {asset.display_name}
           </div>
           {fileSize && (

package/src/components/EditImageModal/EditImageModal.scss

@@ -85,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: #e0e0e0;
-          box-shadow: none;
+          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

@@ -109,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);
             });
           });
         });
@@ -320,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', () => {
@@ -506,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', () => {

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',