@instructure/canvas-rce 5.6.0-beta.0 → 5.6.0

package/lib/translated/de/modules/rce/plugins/instructure_icon_maker/utils/__tests__/IconMakerFormHasChanges.test.js

@@ -0,0 +1,328 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { IconMakerFormHasChanges } from '../IconMakerFormHasChanges';
+import { Shape } from '../../svg/shape';
+import { Size } from '../../svg/constants';
+describe('detect if icon maker form has changes', () => {
+  let initialSettings, currentSettings;
+  let imFormHasChanges;
+  beforeEach(() => {
+    initialSettings = initializeSettings();
+    currentSettings = initializeSettings();
+  });
+  describe('hasNameChange', () => {
+    it('returns false if names match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasNameChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if names do not match exactly', () => {
+      currentSettings.name = 'new-file-name.svg';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasNameChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasAltChange', () => {
+    it('returns false if alt texts match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasAltChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if alt texts do not match exactly', () => {
+      currentSettings.alt = 'new alt text';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasAltChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasShapeNameChange', () => {
+    it('returns false if shape names match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasShapeNameChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if shape names do not match exactly', () => {
+      currentSettings.shape = Shape.Diamond;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasShapeNameChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasShapeSizeChange', () => {
+    it('returns false if shape sizes match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasShapeSizeChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if shape sizes do not match exactly', () => {
+      currentSettings.size = Size.ExtraLarge;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasShapeSizeChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasColorNameChange', () => {
+    it('returns false if color names match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasColorNameChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if color names do not match exactly', () => {
+      currentSettings.color = Color.Black;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasColorNameChange();
+      expect(result).toBe(true);
+    });
+    it('returns false if both color names are null', () => {
+      initialSettings.color = null;
+      currentSettings.color = null;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasColorNameChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if one color is null and the other is a valid color', () => {
+      initialSettings.color = null;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasColorNameChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasOutlineSizeChange', () => {
+    it('returns false if color outline sizes match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasOutlineSizeChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if color outline sizes do not match exactly', () => {
+      currentSettings.outlineSize = 'medium';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasOutlineSizeChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasOutlineColorChange', () => {
+    it('returns false if outline colors match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasOutlineColorChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if outline colors do not match exactly', () => {
+      currentSettings.outlineColor = Color.Green;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasOutlineColorChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasTextChange', () => {
+    it('returns false if text entries match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if text entries do not match exactly', () => {
+      currentSettings.text = 'text-has-changed';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasTextSizeChange', () => {
+    it('returns false if text sizes match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextSizeChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if text sizes do not match exactly', () => {
+      currentSettings.textSize = Size.ExtraLarge;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextSizeChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasTextColorChange', () => {
+    it('returns false if text colors match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextColorChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if text colors do not match exactly', () => {
+      currentSettings.textColor = Color.Red;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextColorChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasTextBackgroundColorChange', () => {
+    it('returns false if text background colors match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextBackgroundColorChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if text background colors do not match exactly', () => {
+      currentSettings.textBackgroundColor = Color.Green;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextBackgroundColorChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasTextPositionChange', () => {
+    it('returns false if text positions match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextPositionChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if text positions do not match exactly', () => {
+      currentSettings.textPosition = 'below';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextPositionChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasImageSettingsChange', () => {
+    it('returns false if image settings match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasImageSettingsChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if image settings do not match exactly', () => {
+      currentSettings.imageSettings.iconFillColor = Color.Black;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasImageSettingsChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasChanges', () => {
+    it('returns false if all properties match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(false);
+    });
+    it('returns true if imageSettings property is not an exact match', () => {
+      currentSettings.imageSettings.iconFillColor = Color.Black;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if textPosition property is not an exact match', () => {
+      currentSettings.textPosition = 'below';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if textBackgroundColor property is not an exact match', () => {
+      currentSettings.textBackgroundColor = Color.Yellow;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if textColor property is not an exact match', () => {
+      currentSettings.textColor = Color.Red;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if textSize property is not an exact match', () => {
+      currentSettings.textSize = Size.ExtraLarge;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if text property is not an exact match', () => {
+      currentSettings.text = 'text-has-changed';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if outlineColor property is not an exact match', () => {
+      currentSettings.outlineColor = Color.Green;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if outlineSize property is not an exact match', () => {
+      currentSettings.outlineSize = 'medium';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if color property is not an exact match', () => {
+      currentSettings.color = Color.Black;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if size property is not an exact match', () => {
+      currentSettings.size = Size.ExtraLarge;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if shape property is not an exact match', () => {
+      currentSettings.shape = Shape.Diamond;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if alt property is not an exact match', () => {
+      currentSettings.alt = 'new alt text';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if name property is not an exact match', () => {
+      currentSettings.name = 'new name';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+  });
+});
+const Color = {
+  Black: '#000000',
+  White: '#FFFFFF',
+  Yellow: '#FFFF00',
+  Green: '#00FF00',
+  Red: '#FF0000'
+};
+
+function initializeSettings() {
+  return {
+    name: 'file1',
+    alt: 'alt text',
+    size: Size.Medium,
+    shape: Shape.Circle,
+    color: Color.White,
+    outlineSize: 'none',
+    outlineColor: Color.Yellow,
+    text: '',
+    textSize: Size.Small,
+    textColor: Color.Green,
+    textBackgroundColor: Color.Red,
+    textPosition: 'middle',
+    imageSettings: {
+      cropperSettings: null,
+      icon: {
+        label: 'Art Icon'
+      },
+      iconFillColor: Color.White,
+      image: 'Art Icon',
+      mode: 'SingleColor'
+    }
+  };
+}

package/lib/translated/de/modules/rce/plugins/instructure_icon_maker/utils/__tests__/round.test.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import round from '../round';
+describe('round', () => {
+  it('rounds to the specified number of decimal places', () => {
+    expect(`${round(12.3456, 2)}`).toEqual('12.35');
+    expect(`${round(12.3456, 0)}`).toEqual('12');
+    expect(`${round(12.5, 0)}`).toEqual('13');
+    expect(`${round(12.34, 5)}`).toEqual('12.34');
+  });
+  it('throws when given a bad arguments', () => {
+    expect(() => round(12.34, -1)).toThrow();
+    expect(() => round('junk', 2)).toThrow();
+    expect(() => round(12.34, 'x')).toThrow();
+  });
+});

package/lib/translated/de/modules/rce/plugins/instructure_icon_maker/utils/round.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+export default function round(number) {
+  let decimalDigits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  if (decimalDigits < 0) throw new Error('decimal digits must be >= 0');
+  if (decimalDigits % 1 !== 0) throw new Error('decimal digits must be a whole number');
+  const val = Math.round(number * 10 ** decimalDigits) / 10 ** decimalDigits;
+  if (Number.isNaN(val)) throw new Error('the first arguments must be a number');
+  return val === 0 ? 0 : val; // prevent round(-0) from returning -0
+}

package/lib/translated/de/modules/rce/plugins/instructure_image/ImageList/Image.js

@@ -70,7 +70,7 @@ export default function Image(_ref) {
     constrain: "cover",
     draggable: true,
     height: "6rem",
-    inline: false,
+    display: "block",
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd,
     src: image.thumbnail_url,

package/lib/translated/de/modules/rce/plugins/instructure_image/ImageList/index.js

@@ -30,7 +30,7 @@ export default function ImageList(_ref) {
     height: "100%",
     margin: "xx-small",
     padding: "small",
-    wrapItems: true
+    wrap: "wrap"
   }, images.map((image, index) => {
     let focusRef = null;
 

package/lib/translated/de/modules/rce/plugins/instructure_image/ImageOptionsTray/index.js

@@ -162,10 +162,10 @@ export default function ImageOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, "Bildoptionen")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placemet: "static",
-    variant: "icon",
-    onClick: onRequestClose
-  }, "Schlie\xDFen")))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: onRequestClose,
+    screenReaderLabel: "Schlie\xDFen"
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
     grow: true,
     margin: "none",

package/lib/translated/de/modules/rce/plugins/instructure_links/components/Link.js

@@ -27,46 +27,9 @@ import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';
 import { Focusable } from '@instructure/ui-focusable';
-import { SVGIcon } from '@instructure/ui-svg-images';
-import { IconDragHandleLine, IconAssignmentLine, IconDiscussionLine, IconModuleLine, IconQuizLine, IconAnnouncementLine, IconPublishSolid, IconUnpublishedSolid, IconDocumentLine } from '@instructure/ui-icons';
-
-function IconBlank() {
-  return /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "IconBlank",
-    viewBox: "0 0 1920 1920"
-  }, /*#__PURE__*/React.createElement("g", {
-    role: "presentation"
-  }));
-}
-
-function getIcon(type) {
-  switch (type) {
-    case 'assignments':
-      return IconAssignmentLine;
-
-    case 'discussions':
-      return IconDiscussionLine;
-
-    case 'modules':
-      return IconModuleLine;
-
-    case 'quizzes':
-      return IconQuizLine;
-
-    case 'announcements':
-      return IconAnnouncementLine;
-
-    case 'wikiPages':
-      return IconDocumentLine;
-
-    case 'navigation':
-      return IconBlank;
-
-    default:
-      return IconDocumentLine;
-  }
-}
-
+import { IconDragHandleLine, IconPublishSolid, IconUnpublishedSolid } from '@instructure/ui-icons';
+import RCEGlobals from '../../../RCEGlobals';
+import { getIcon } from '../../shared/linkUtils';
 export default function Link(props) {
   const [isHovering, setIsHovering] = useState(false);
   const {
@@ -75,7 +38,8 @@ export default function Link(props) {
     date,
     date_type
   } = props.link;
-  const Icon = getIcon(props.type);
+  const type = props.type === 'quizzes' && props.link.quiz_type === 'quizzes.next' ? 'quizzes.next' : props.type;
+  const Icon = getIcon(type);
   const color = published ? 'success' : 'primary';
   let dateString = null;
 
@@ -83,8 +47,11 @@ export default function Link(props) {
     if (date === 'multiple') {
       dateString = "F\xE4llig: Mehrere Daten";
     } else {
+      var _RCEGlobals$getConfig;
+
       // Uses user locale and timezone
-      const when = formatMessage.date(applyTimezoneOffsetToDate(date, ENV.TIMEZONE), 'long');
+      const configuredTimezone = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.timezone;
+      const when = formatMessage.date(applyTimezoneOffsetToDate(date, configuredTimezone), 'long');
 
       switch (date_type) {
         case 'todo':
@@ -186,7 +153,8 @@ export default function Link(props) {
       color: color
     }, /*#__PURE__*/React.createElement(Icon, {
       size: "x-small",
-      inline: false
+      inline: false,
+      "data-type": type
     }))), /*#__PURE__*/React.createElement(Flex.Item, {
       padding: "0 x-small 0 0",
       grow: true,

package/lib/translated/de/modules/rce/plugins/instructure_links/components/LinkOptionsTray/index.js

@@ -160,10 +160,10 @@ export default function LinkOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, "Link-Optionen")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placement: "static",
-    variant: "icon",
-    onClick: props.onRequestClose
-  }, "Schlie\xDFen")))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: props.onRequestClose,
+    screenReaderLabel: "Schlie\xDFen"
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
     grow: true,
     margin: "none",

package/lib/translated/de/modules/rce/plugins/instructure_links/components/LinkSet.js

@@ -104,8 +104,7 @@ class LinkSet extends Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScreenReaderContent, {
       id: this.describedByID
     }, "Einf\xFCgen eines Links in den Editor"), /*#__PURE__*/React.createElement(List, {
-      variant: "unstyled",
-      as: "ul",
+      isUnstyled: true,
       margin: "0"
     }, this.props.collection.links.map((link, index, array) => /*#__PURE__*/React.createElement(List.Item, {
       key: link.href,

package/lib/translated/de/modules/rce/plugins/instructure_links/components/__tests__/Link.test.js

@@ -18,6 +18,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import Link from '../Link';
+import RCEGlobals from '../../../../RCEGlobals';
 
 function renderComponent(props) {
   return render( /*#__PURE__*/React.createElement(Link, Object.assign({
@@ -37,10 +38,13 @@ function queryIconByName(elem, name) {
 
 describe('RCE "Links" Plugin > Link', () => {
   beforeAll(() => {
-    ENV = {
-      // 	UTC/GMT -7 hours
-      TIMEZONE: 'America/Denver'
-    };
+    // UTC/GMT -7 hours
+    RCEGlobals.getConfig = jest.fn().mockReturnValue({
+      timezone: 'America/Denver'
+    });
+  });
+  afterAll(() => {
+    jest.resetAllMocks();
   });
   describe('object type variant', () => {
     const linkTypes = [{
@@ -54,7 +58,12 @@ describe('RCE "Links" Plugin > Link', () => {
       icon: 'IconModule'
     }, {
       type: 'quizzes',
-      icon: 'IconQuiz'
+      icon: 'IconQuiz',
+      quiz_type: 'assignment'
+    }, {
+      type: 'quizzes',
+      icon: 'IconQuiz',
+      quiz_type: 'quizzes.next'
     }, {
       type: 'announcements',
       icon: 'IconAnnouncement'
@@ -77,11 +86,15 @@ describe('RCE "Links" Plugin > Link', () => {
           getByText
         } = renderComponent({
           type: lt.type,
-          link
+          link: { ...link,
+            quiz_type: lt.quiz_type
+          }
         });
         expect(getByText(link.title)).toBeInTheDocument();
         expect(queryIconByName(container, 'IconPublish')).toBeInTheDocument();
-        expect(queryIconByName(container, lt.icon)).toBeInTheDocument();
+        const icon = queryIconByName(container, lt.icon);
+        expect(icon).toBeInTheDocument();
+        expect(icon.getAttribute('data-type')).toEqual(lt.type === 'quizzes' && lt.quiz_type === 'quizzes.next' ? 'quizzes.next' : lt.type);
       });
       it(`renders unpublished ${lt.type}`, () => {
         const link = {

package/lib/translated/de/modules/rce/plugins/instructure_media_embed/components/Embed.js

@@ -38,8 +38,9 @@ export function Embed(_ref) {
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onDismiss,
     offset: "medium",
-    placement: "end"
-  }, "Schlie\xDFen"), /*#__PURE__*/React.createElement(Heading, null, "Einbetten")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(TextArea, {
+    placement: "end",
+    screenReaderLabel: "Schlie\xDFen"
+  }), /*#__PURE__*/React.createElement(Heading, null, "Einbetten")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(TextArea, {
     maxHeight: "10rem",
     label: "Code einbetten",
     value: embedCode,

package/lib/translated/de/modules/rce/plugins/instructure_record/AudioOptionsTray/index.js

@@ -77,9 +77,10 @@ export default function AudioOptionsTray(_ref) {
     as: "h2"
   }, "Audiooptionen")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "static",
-    variant: "icon",
-    onClick: onDismiss
-  }, "Schlie\xDFen")))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: onDismiss,
+    screenReaderLabel: "Schlie\xDFen"
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
     grow: true,
     margin: "none",

package/lib/translated/de/modules/rce/plugins/instructure_record/VideoOptionsTray/index.js

@@ -17,8 +17,7 @@
  */
 import React, { useState } from 'react';
 import { arrayOf, bool, func, number, shape, string } from 'prop-types';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { Button, CloseButton } from '@instructure/ui-buttons';
+import { Button, CloseButton, IconButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
 import { SimpleSelect } from '@instructure/ui-simple-select';
@@ -129,16 +128,18 @@ export default function VideoOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Tooltip, {
     on: ['hover', 'focus'],
     placement: "top",
-    tip: /*#__PURE__*/React.createElement(View, {
+    renderTip: /*#__PURE__*/React.createElement(View, {
       display: "block",
       id: "alt-text-label-tooltip",
       maxWidth: "14rem"
     }, tooltipText)
-  }, /*#__PURE__*/React.createElement(Button, {
-    icon: IconQuestionLine,
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    renderIcon: IconQuestionLine,
     size: "small",
-    variant: "icon"
-  }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, tooltipText)))));
+    screenReaderLabel: tooltipText,
+    withBackground: false,
+    withBorder: false
+  }))));
   const messagesForSize = [];
 
   if (videoSize !== CUSTOM) {
@@ -176,10 +177,10 @@ export default function VideoOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, "Videooptionen")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placemet: "static",
-    variant: "icon",
-    onClick: onRequestClose
-  }, "Schlie\xDFen")))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: onRequestClose,
+    screenReaderLabel: "Schlie\xDFen"
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
     grow: true,
     margin: "none",