decap-cms-core 3.14.0 → 3.15.0

package/src/components/MediaLibrary/MediaLibraryButtons.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { isAbsolutePath } from 'decap-cms-lib-util';
-import { buttons, shadows, zIndex } from 'decap-cms-ui-default';
+import { buttons, Icon, shadows, zIndex } from 'decap-cms-ui-default';
 
 import { FileUploadButton } from '../UI';
 
@@ -11,15 +11,25 @@ const styles = {
   button: css`
     ${buttons.button};
     ${buttons.default};
-    display: inline-block;
-    margin-left: 15px;
-    margin-right: 2px;
+    display: inline-flex;
+    align-items: center;
 
     &[disabled] {
       ${buttons.disabled};
       cursor: default;
     }
   `,
+  // Hides an element without removing it from the accessibility tree.
+  visuallyHidden: css`
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  `,
 };
 
 export const UploadButton = styled(FileUploadButton)`
@@ -68,7 +78,27 @@ const ActionButton = styled.button`
     `}
 `;
 
-export const DownloadButton = ActionButton;
+function ResponsiveActionButton({ children, icon, ...props }) {
+  return (
+    <ActionButton {...props}>
+      <Icon
+        type={icon}
+        size="small"
+        aria-hidden="true"
+        css={{ '@media (min-width: 600px)': styles.visuallyHidden }}
+      />
+      <span css={{ '@media (max-width: 599px)': styles.visuallyHidden }}>{children}</span>
+    </ActionButton>
+  );
+}
+
+export function DownloadButton({ children, ...props }) {
+  return (
+    <ResponsiveActionButton {...props} icon="download">
+      {children}
+    </ResponsiveActionButton>
+  );
+}
 
 export class CopyToClipBoardButton extends React.Component {
   mounted = false;
@@ -115,13 +145,15 @@ export class CopyToClipBoardButton extends React.Component {
     return t('mediaLibrary.mediaLibraryCard.copyPath');
   };
 
+  getIcon = () => (this.state.copied ? 'check' : 'copy');
+
   render() {
     const { disabled } = this.props;
 
     return (
-      <ActionButton disabled={disabled} onClick={this.handleCopy}>
+      <ResponsiveActionButton disabled={disabled} onClick={this.handleCopy} icon={this.getIcon()}>
         {this.getTitle()}
-      </ActionButton>
+      </ResponsiveActionButton>
     );
   }
 }

package/src/components/MediaLibrary/MediaLibraryCard.js

@@ -70,7 +70,6 @@ class MediaLibraryCard extends React.Component {
       text,
       onClick,
       draftText,
-      width,
       height,
       margin,
       isPrivate,
@@ -83,7 +82,7 @@ class MediaLibraryCard extends React.Component {
       <Card
         isSelected={isSelected}
         onClick={onClick}
-        width={width}
+        width="100%"
         height={height}
         margin={margin}
         tabIndex="-1"
@@ -115,7 +114,6 @@ MediaLibraryCard.propTypes = {
   text: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   draftText: PropTypes.string.isRequired,
-  width: PropTypes.string.isRequired,
   height: PropTypes.string.isRequired,
   margin: PropTypes.string.isRequired,
   isPrivate: PropTypes.bool,

package/src/components/MediaLibrary/MediaLibraryCardGrid.js

@@ -75,9 +75,9 @@ function VirtualizedGrid(props) {
           const cardWidth = parseInt(props.cardWidth, 10);
           const cardHeight = parseInt(props.cardHeight, 10);
           const gutter = parseInt(props.cardMargin, 10);
-          const columnWidth = cardWidth + gutter;
+          const columnWidth = Math.min(width, cardWidth + gutter);
           const rowHeight = cardHeight + gutter;
-          const columnCount = Math.floor(width / columnWidth);
+          const columnCount = Math.max(1, Math.floor(width / columnWidth));
           const rowCount = Math.ceil(mediaItems.length / columnCount);
           return (
             <Grid

package/src/components/MediaLibrary/MediaLibraryHeader.js

@@ -3,39 +3,54 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Icon, shadows, colors, buttons } from 'decap-cms-ui-default';
 
+const HeaderContainer = styled.div`
+  @media (max-width: 499px) {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+  }
+`;
+
 const CloseButton = styled.button`
   ${buttons.button};
-  ${shadows.dropMiddle};
-  position: absolute;
-  margin-right: -40px;
-  left: -40px;
-  top: -40px;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
   background-color: white;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  @media (min-width: 500px) {
+    ${shadows.dropMiddle};
+    position: absolute;
+    margin-right: -40px;
+    left: -40px;
+    top: -40px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 `;
 
 const LibraryTitle = styled.h1`
-  line-height: 36px;
-  font-size: 22px;
+  font-size: 18px;
+  line-height: 28px;
   text-align: left;
-  margin-bottom: 25px;
+  @media (min-width: 500px) {
+    font-size: 22px;
+    line-height: 36px;
+  }
+  margin-bottom: 0;
   color: ${props => props.isPrivate && colors.textFieldBorder};
 `;
 
 function MediaLibraryHeader({ onClose, title, isPrivate, t }) {
   return (
-    <div>
+    <HeaderContainer>
       <CloseButton aria-label={t('mediaLibrary.mediaLibraryModal.close')} onClick={onClose}>
         <Icon type="close" />
       </CloseButton>
       <LibraryTitle isPrivate={isPrivate}>{title}</LibraryTitle>
-    </div>
+    </HeaderContainer>
   );
 }
 

package/src/components/MediaLibrary/MediaLibraryModal.js

@@ -25,14 +25,18 @@ const cardMargin = `10px`;
  */
 const cardOutsideWidth = `300px`;
 
+/** Calculated to be as wide as possible without cutting off the 40px-wide close button. */
+const minimumCardWidth = `calc(100% - 40px)`;
+
 const StyledModal = styled(Modal)`
   display: grid;
-  grid-template-rows: 120px auto;
-  width: calc(${cardOutsideWidth} + 20px);
+  width: 100%;
+  grid-template-rows: auto 1fr;
+  gap: 20px;
   background-color: ${props => props.isPrivate && colors.grayDark};
 
-  @media (min-width: 800px) {
-    width: calc(${cardOutsideWidth} * 2 + 20px);
+  @media (min-width: 500px) {
+    width: min(${minimumCardWidth}, calc(${cardOutsideWidth} * 2 + 20px));
   }
 
   @media (min-width: 1120px) {

package/src/components/MediaLibrary/MediaLibrarySearch.js

@@ -8,7 +8,8 @@ const SearchContainer = styled.div`
   display: flex;
   align-items: center;
   position: relative;
-  width: 400px;
+  flex: 1 1 150px;
+  max-width: 460px;
 `;
 
 const SearchInput = styled.input`
@@ -33,6 +34,7 @@ const SearchIcon = styled(Icon)`
   left: 6px;
   z-index: ${zIndex.zIndex2};
   transform: translate(0, -50%);
+  pointer-events: none;
 `;
 
 function MediaLibrarySearch({ value, onChange, onKeyDown, placeholder, disabled }) {

package/src/components/MediaLibrary/MediaLibraryTop.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import MediaLibrarySearch from './MediaLibrarySearch';
@@ -12,19 +13,36 @@ import {
   InsertButton,
 } from './MediaLibraryButtons';
 
+const styles = {
+  flexSpacing: css`
+    gap: 8px;
+    @media (min-width: 500px) {
+      gap: 15px;
+    }
+  `,
+};
+
 const LibraryTop = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
+  ${styles.flexSpacing};
 `;
 
 const RowContainer = styled.div`
   display: flex;
+  align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
+  ${styles.flexSpacing};
 `;
 
 const ButtonsContainer = styled.div`
-  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  flex-wrap: wrap;
+  ${styles.flexSpacing};
 `;
 
 function MediaLibraryTop({

package/src/components/MediaLibrary/__tests__/__snapshots__/MediaLibraryCard.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`MediaLibraryCard should match snapshot for draft image 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  width: 100px;
+  width: 100%;
   height: 240px;
   margin: 10px;
   border: solid 2px #dfdfe3;
@@ -70,7 +70,7 @@ exports[`MediaLibraryCard should match snapshot for draft image 1`] = `
     class="emotion-0 emotion-1"
     height="240px"
     tabindex="-1"
-    width="100px"
+    width="100%"
   >
     <div
       class="emotion-2 emotion-3"
@@ -99,7 +99,7 @@ exports[`MediaLibraryCard should match snapshot for draft image 1`] = `
 exports[`MediaLibraryCard should match snapshot for non draft image 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  width: 100px;
+  width: 100%;
   height: 240px;
   margin: 10px;
   border: solid 2px #dfdfe3;
@@ -158,7 +158,7 @@ exports[`MediaLibraryCard should match snapshot for non draft image 1`] = `
     class="emotion-0 emotion-1"
     height="240px"
     tabindex="-1"
-    width="100px"
+    width="100%"
   >
     <div
       class="emotion-2 emotion-3"
@@ -181,7 +181,7 @@ exports[`MediaLibraryCard should match snapshot for non draft image 1`] = `
 exports[`MediaLibraryCard should match snapshot for non viewable image 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  width: 100px;
+  width: 100%;
   height: 240px;
   margin: 10px;
   border: solid 2px #dfdfe3;
@@ -242,7 +242,7 @@ exports[`MediaLibraryCard should match snapshot for non viewable image 1`] = `
     class="emotion-0 emotion-1"
     height="240px"
     tabindex="-1"
-    width="100px"
+    width="100%"
   >
     <div
       class="emotion-2 emotion-3"

package/src/components/UI/Modal.js

@@ -20,8 +20,12 @@ const styleStrings = {
   modalBody: `
     ${shadows.dropDeep};
     background-color: #fff;
-    border-radius: ${lengths.borderRadius};
-    height: 80%;
+    border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
+    height: 90%;
+    @media (min-width: 500px) {
+      border-radius: ${lengths.borderRadius};
+      height: 80%;
+    }
     text-align: center;
     max-width: 2200px;
     padding: 20px;
@@ -39,7 +43,10 @@ const styleStrings = {
     bottom: 0;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: flex-end;
+    @media (min-width: 500px) {
+      align-items: center;
+    }
     opacity: 0;
     background-color: rgba(0, 0, 0, 0);
     transition: background-color ${transitions.main}, opacity ${transitions.main};

package/src/components/Workflow/Workflow.js

@@ -27,8 +27,11 @@ import { EDITORIAL_WORKFLOW, status } from '../../constants/publishModes';
 import WorkflowList from './WorkflowList';
 
 const WorkflowContainer = styled.div`
-  padding: ${lengths.pageMargin} 0;
   height: 100vh;
+  margin: ${lengths.pageMarginMobile};
+  @media (min-width: 500px) {
+    margin: ${lengths.pageMargin};
+  }
 `;
 
 const WorkflowTop = styled.div`
@@ -37,6 +40,9 @@ const WorkflowTop = styled.div`
 
 const WorkflowTopRow = styled.div`
   display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
   justify-content: space-between;
 
   span[role='button'] {

package/src/components/Workflow/WorkflowCard.js

@@ -17,30 +17,46 @@ const styles = {
     width: auto;
     flex: 1 0 0;
     font-size: 13px;
-    padding: 6px 0;
+    padding: 6px;
   `,
 };
 
 const WorkflowLink = styled(Link)`
   display: block;
-  padding: 0 18px 18px;
-  height: 200px;
+  padding: 8px;
+  height: 140px;
   overflow: hidden;
+
+  @media (min-width: 800px) {
+    height: 200px;
+    padding: 12px 18px 18px;
+  }
 `;
 
 const CardCollection = styled.div`
-  font-size: 14px;
+  font-size: 12px;
   color: ${colors.textLead};
   text-transform: uppercase;
-  margin-top: 12px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  @media (min-width: 800px) {
+    font-size: 14px;
+  }
 `;
 
 const CardTitle = styled.h2`
-  margin: 28px 0 0;
+  font-size: 14px;
+  line-height: 17px;
+  margin: 10px 0 0;
   color: ${colors.textLead};
+  word-break: break-word;
+
+  @media (min-width: 800px) {
+    font-size: 15px;
+    line-height: 18px;
+    margin-top: 28px;
+  }
 `;
 
 const CardDateContainer = styled.div`
@@ -49,11 +65,16 @@ const CardDateContainer = styled.div`
 
 const CardBody = styled.p`
   ${styles.text};
+  line-height: 17px;
   color: ${colors.text};
-  margin: 24px 0 0;
+  margin: 10px 0 0;
   overflow-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
+
+  @media (min-width: 800px) {
+    margin-top: 24px;
+  }
 `;
 
 const CardButtonContainer = styled.div`
@@ -61,25 +82,38 @@ const CardButtonContainer = styled.div`
   position: absolute;
   bottom: 0;
   width: 100%;
-  padding: 12px 18px;
-  display: flex;
-  opacity: 0;
+  display: none;
+  padding: 8px;
+  flex-direction: column;
+  gap: 6px;
   transition: opacity ${transitions.main};
   cursor: pointer;
+
+  @media (min-width: 500px) {
+    display: flex;
+  }
+
+  @media (min-width: 800px) {
+    padding: 12px 18px;
+    flex-direction: row;
+    gap: 12px;
+  }
+
+  @media (hover: hover) {
+    opacity: 0;
+  }
 `;
 
 const DeleteButton = styled.button`
   ${styles.button};
   background-color: ${colorsRaw.redLight};
   color: ${colorsRaw.red};
-  margin-right: 6px;
 `;
 
 const PublishButton = styled.button`
   ${styles.button};
   background-color: ${colorsRaw.teal};
   color: ${colors.textLight};
-  margin-left: 6px;
 
   &[disabled] {
     ${buttons.disabled};
@@ -88,13 +122,17 @@ const PublishButton = styled.button`
 
 const WorkflowCardContainer = styled.div`
   ${components.card};
-  margin-bottom: 24px;
+  margin-bottom: 10px;
   position: relative;
   overflow: hidden;
 
-  &:hover ${CardButtonContainer} {
+  &:hover ${CardButtonContainer}, &:has(:focus-visible) ${CardButtonContainer} {
     opacity: 1;
   }
+
+  @media (min-width: 800px) {
+    margin-bottom: 24px;
+  }
 `;
 
 function lastChangePhraseKey(date, author) {

package/src/components/Workflow/WorkflowList.js

@@ -15,47 +15,57 @@ import { selectEntryCollectionTitle } from '../../reducers/collections';
 const WorkflowListContainer = styled.div`
   min-height: 60%;
   display: grid;
-  grid-template-columns: 33.3% 33.3% 33.3%;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  @media (min-width: 500px) {
+    gap: 14px;
+  }
+  @media (min-width: 800px) {
+    gap: 40px;
+  }
 `;
 
 const WorkflowListContainerOpenAuthoring = styled.div`
   min-height: 60%;
   display: grid;
-  grid-template-columns: 50% 50% 0%;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  @media (min-width: 500px) {
+    gap: 14px;
+  }
+  @media (min-width: 800px) {
+    gap: 40px;
+  }
 `;
 
 const styles = {
   columnPosition: idx =>
-    (idx === 0 &&
-      css`
-        margin-left: 0;
-      `) ||
-    (idx === 2 &&
-      css`
-        margin-right: 0;
-      `) ||
+    idx > 0 &&
     css`
-      &:before,
-      &:after {
+      &:before {
         content: '';
         display: block;
         position: absolute;
         width: 2px;
         height: 80%;
-        top: 76px;
+        top: 36px;
         background-color: ${colors.textFieldBorder};
+        @media (min-width: 800px) {
+          top: 76px;
+        }
       }
 
       &:before {
-        left: -23px;
-      }
-
-      &:after {
-        right: -23px;
+        left: -7px;
+        @media (min-width: 500px) {
+          left: -10px;
+        }
+        @media (min-width: 800px) {
+          left: -23px;
+        }
       }
     `,
   column: css`
-    margin: 0 20px;
     transition: background-color 0.5s ease;
     border: 2px dashed transparent;
     border-radius: 4px;
@@ -68,21 +78,21 @@ const styles = {
   hiddenColumn: css`
     display: none;
   `,
-  hiddenRightBorder: css`
-    &:not(:first-child):not(:last-child) {
-      &:after {
-        display: none;
-      }
-    }
-  `,
 };
 
 const ColumnHeader = styled.h2`
-  font-size: 20px;
+  font-size: 16px;
   font-weight: normal;
-  padding: 4px 14px;
+  padding: 2px 6px;
   border-radius: ${lengths.borderRadius};
-  margin-bottom: 28px;
+  white-space: nowrap;
+  margin-bottom: 6px;
+
+  @media (min-width: 800px) {
+    font-size: 20px;
+    padding: 4px 12px;
+    margin-bottom: 28px;
+  }
 
   ${props =>
     props.name === 'draft' &&
@@ -107,11 +117,21 @@ const ColumnHeader = styled.h2`
 `;
 
 const ColumnCount = styled.p`
-  font-size: 13px;
+  font-size: 11px;
   font-weight: 500;
   color: ${colors.text};
   text-transform: uppercase;
   margin-bottom: 6px;
+  padding-inline: 6px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  min-width: 0;
+
+  @media (min-width: 800px) {
+    font-size: 13px;
+    padding-inline: 12px;
+  }
 `;
 
 // This is a namespace so that we can only drop these elements on a DropTarget with the same
@@ -188,7 +208,6 @@ class WorkflowList extends React.Component {
                     styles.columnPosition(idx),
                     isHovered && styles.columnHovered,
                     isOpenAuthoring && currColumn === 'pending_publish' && styles.hiddenColumn,
-                    isOpenAuthoring && currColumn === 'pending_review' && styles.hiddenRightBorder,
                   ]}
                 >
                   <ColumnHeader name={currColumn}>

package/src/constants/configSchema.js

@@ -6,7 +6,6 @@ import {
   prohibited,
 } from 'ajv-keywords/dist/keywords';
 import ajvErrors from 'ajv-errors';
-import { v4 as uuid } from 'uuid';
 
 import { frontmatterFormats, extensionFormatters } from '../formats/formats';
 import { getWidgets } from '../lib/registry';
@@ -45,7 +44,7 @@ const i18nField = {
  * Config for fields in both file and folder collections.
  */
 function fieldsConfig() {
-  const id = uuid();
+  const id = crypto.randomUUID();
   return {
     $id: `fields_${id}`,
     type: 'array',

package/src/reducers/__tests__/entryDraft.spec.js

@@ -3,7 +3,7 @@ import { Map, fromJS } from 'immutable';
 import * as actions from '../../actions/entries';
 import reducer from '../entryDraft';
 
-jest.mock('uuid', () => ({ v4: jest.fn(() => '1') }));
+global.crypto.randomUUID = jest.fn(() => '1');
 
 const initialState = Map({
   entry: Map(),

package/src/reducers/__tests__/mediaLibrary.spec.js

@@ -7,7 +7,6 @@ import mediaLibrary, {
   selectMediaDisplayURL,
 } from '../mediaLibrary';
 
-jest.mock('uuid');
 jest.mock('../entries');
 jest.mock('../');