@instructure/canvas-rce 5.1.2-alpha.7 → 5.2.0

package/lib/translated/pt/modules/rce/plugins/shared/DimensionsInput/__tests__/DimensionsInput.test.js

@@ -19,7 +19,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import DimensionsInput, { useDimensionsState } from "../index.js";
 import DimensionsInputDriver from "./DimensionsInputDriver.js";
-const NAN_ERROR = 'Width and height must be numbers';
+const W_AND_H_NAN_ERROR = 'Width and height must be numbers';
+const PERCENTAGE_NAN_ERROR = 'Percentage must be a number';
 const ASPECT_MESSAGE = 'Aspect ratio will be preserved';
 describe('RCE > Plugins > Shared > DimensionsInput', () => {
   let $container;
@@ -34,12 +35,15 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
     initialState = {
       appliedHeight: 300,
       appliedWidth: 150,
+      appliedPercentage: 70,
+      usePercentageUnits: false,
       naturalHeight: 200,
       naturalWidth: 100
     };
     props = {
       minWidth: 30,
-      minHeight: 60
+      minHeight: 60,
+      minPercentage: 10
     };
   });
   afterEach(() => {
@@ -50,10 +54,12 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
   function SpecComponent() {
     const _props = props,
           minHeight = _props.minHeight,
-          minWidth = _props.minWidth;
+          minWidth = _props.minWidth,
+          minPercentage = _props.minPercentage;
     dimensionsState = useDimensionsState(initialState, {
       minHeight,
-      minWidth
+      minWidth,
+      minPercentage
     });
     return /*#__PURE__*/React.createElement(DimensionsInput, Object.assign({
       dimensionsState: dimensionsState
@@ -64,18 +70,51 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
     component = render( /*#__PURE__*/React.createElement(SpecComponent, null), {
       container: $container
     });
-    dimensions = new DimensionsInputDriver($container.firstChild);
+    dimensions = new DimensionsInputDriver($container);
   }
 
   function buildMinDimensionsError() {
     return `Must be at least ${props.minWidth} x ${props.minHeight}px`;
   }
 
+  function buildMinPercentageError() {
+    return `Must be at least ${props.minPercentage}%`;
+  }
+
+  describe('"Pixels" radio button', () => {
+    beforeEach(() => {
+      initialState.usePercentageUnits = false;
+      renderComponent();
+    });
+    it('is selected', () => {
+      expect(dimensions.pixelsRadioButton.checked).toEqual(true);
+    });
+    it('is not selected', () => {
+      expect(dimensions.percentageRadioButton.checked).toEqual(false);
+    });
+  });
+  describe('"Percentage" radio button', () => {
+    beforeEach(() => {
+      initialState.usePercentageUnits = true;
+      renderComponent();
+    });
+    it('is selected', () => {
+      expect(dimensions.percentageRadioButton.checked).toEqual(true);
+    });
+    it('is not selected', () => {
+      expect(dimensions.pixelsRadioButton.checked).toEqual(false);
+    });
+  });
   describe('"Width" field', () => {
     it('is present', () => {
       renderComponent();
       expect(dimensions.width).not.toBeNull();
     });
+    it('is not present', () => {
+      initialState.usePercentageUnits = true;
+      renderComponent();
+      expect(dimensions.width).toBeNull();
+    });
     describe('when a width has been applied to the element', () => {
       it('uses the applied width as the field value', () => {
         renderComponent();
@@ -197,7 +236,7 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
           expect(dimensionsState.isValid).toEqual(false);
         });
         it('displays a validation error with the field', () => {
-          expect(dimensions.messageTexts).toEqual([NAN_ERROR]);
+          expect(dimensions.messageTexts).toEqual([W_AND_H_NAN_ERROR]);
         });
       });
       describe('when the value is less than the minimum', () => {
@@ -453,6 +492,11 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
       renderComponent();
       expect(dimensions.height).not.toBeNull();
     });
+    it('is not present', () => {
+      initialState.usePercentageUnits = true;
+      renderComponent();
+      expect(dimensions.height).toBeNull();
+    });
     describe('when a height has been applied to the element', () => {
       it('uses the applied height as the field value', () => {
         renderComponent();
@@ -573,7 +617,7 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
           expect(dimensionsState.isValid).toEqual(false);
         });
         it('displays a validation error with the field', () => {
-          expect(dimensions.messageTexts).toEqual([NAN_ERROR]);
+          expect(dimensions.messageTexts).toEqual([W_AND_H_NAN_ERROR]);
         });
       });
       describe('when the value is less than the minimum', () => {
@@ -832,4 +876,276 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
       });
     });
   });
+  describe('"Percentage" field', () => {
+    beforeEach(() => {
+      initialState.usePercentageUnits = true;
+    });
+    it('is present', () => {
+      renderComponent();
+      expect(dimensions.percentage).not.toBeNull();
+    });
+    it('is not present', () => {
+      initialState.usePercentageUnits = false;
+      renderComponent();
+      expect(dimensions.percentage).toBeNull();
+    });
+    describe('when the value changes', () => {
+      beforeEach(renderComponent);
+      it('updates the value in the field', () => {
+        dimensions.percentage.setValue('95');
+        expect(dimensions.percentage.value).toEqual('95');
+      });
+      describe('when the value includes whitespace', () => {
+        it('preserves the whitespace in the field', () => {
+          dimensions.percentage.setValue('  120  ');
+          expect(dimensions.percentage.value).toEqual('  120  ');
+        });
+        it('ignores whitespace in the dimensions state height', () => {
+          dimensions.percentage.setValue('  50  ');
+          expect(dimensionsState.percentage).toEqual(50);
+        });
+      });
+      describe('when the value is a decimal number', () => {
+        it('preserves the decimal value in the field', () => {
+          dimensions.percentage.setValue('19.51');
+          expect(dimensions.percentage.value).toEqual('19.51');
+        });
+        it('sets the dimensions state height with the rounded integer', () => {
+          dimensions.percentage.setValue('19.51');
+          expect(dimensionsState.percentage).toEqual(20);
+        });
+      });
+      describe('when the value is cleared', () => {
+        beforeEach(() => {
+          dimensions.percentage.setValue('');
+        });
+        it('sets the dimensions state percentage to null', () => {
+          expect(dimensionsState.percentage).toBeNull();
+        });
+        it('sets the dimensions state as invalid', () => {
+          expect(dimensionsState.isValid).toEqual(false);
+        });
+      });
+      describe('when the value is not a number', () => {
+        beforeEach(() => {
+          dimensions.percentage.setValue('twelve');
+        });
+        it('preserves the invalid value in the field', () => {
+          expect(dimensions.percentage.value).toEqual('twelve');
+        });
+        it('sets the dimensions state percentage to NaN', () => {
+          expect(dimensionsState.percentage).toBeNaN();
+        });
+      });
+      describe('when the value is not a finite number', () => {
+        beforeEach(() => {
+          dimensions.percentage.setValue('Infinity');
+        });
+        it('preserves the value in the field', () => {
+          expect(dimensions.percentage.value).toEqual('Infinity');
+        });
+        it('sets the dimensions state height to NaN', () => {
+          expect(dimensionsState.percentage).toBeNaN();
+        });
+        it('sets the dimensions state as invalid', () => {
+          expect(dimensionsState.isValid).toEqual(false);
+        });
+        it('displays a validation error with the field', () => {
+          expect(dimensions.messageTexts).toEqual([PERCENTAGE_NAN_ERROR]);
+        });
+      });
+      describe('when the value is less than the minimum', () => {
+        beforeEach(() => {
+          dimensions.percentage.setValue(props.minPercentage);
+          dimensions.percentage.setValue(props.minPercentage - 1);
+        });
+        it('displays a validation error with the field', () => {
+          expect(dimensions.messageTexts).toEqual([buildMinPercentageError()]);
+        });
+        it('sets the dimensions state as invalid', () => {
+          expect(dimensionsState.isValid).toEqual(false);
+        });
+      });
+      describe('when the value becomes valid', () => {
+        beforeEach(() => {
+          dimensions.percentage.setValue(props.minPercentage - 1);
+          dimensions.percentage.setValue(props.minPercentage);
+        });
+        it('removes the validation error from the field', () => {
+          expect(dimensions.messageTexts).toEqual([ASPECT_MESSAGE]);
+        });
+        it('sets the dimensions state as valid', () => {
+          expect(dimensionsState.isValid).toEqual(true);
+        });
+      });
+      describe('when the value remains invalid', () => {
+        beforeEach(() => {
+          dimensions.percentage.setValue('');
+          dimensions.percentage.setValue(1);
+        });
+        it('displays a validation error with the field', () => {
+          expect(dimensions.messageTexts).toEqual([buildMinPercentageError()]);
+        });
+        it('sets the dimensions state as invalid', () => {
+          expect(dimensionsState.isValid).toEqual(false);
+        });
+      });
+    });
+    describe('when decremented', () => {
+      describe('when a percentage has been applied to the element', () => {
+        beforeEach(() => {
+          renderComponent();
+          dimensions.percentage.decrement();
+        });
+        it('decrements the applied percentage for the field value', () => {
+          expect(dimensions.percentage.value).toEqual(`${initialState.appliedPercentage - 1}`);
+        });
+        it('decrements the applied percentage for the dimensions state percentage', () => {
+          expect(dimensionsState.percentage).toEqual(initialState.appliedPercentage - 1);
+        });
+      });
+      describe('when no percentage has been applied to the element', () => {
+        beforeEach(() => {
+          initialState.appliedPercentage = null;
+          renderComponent();
+          dimensions.percentage.decrement();
+        });
+        it('decrements the full percentage for the field value', () => {
+          expect(dimensions.percentage.value).toEqual('99');
+        });
+        it('decrements the full percentage for the dimensions state percentage', () => {
+          expect(dimensionsState.percentage).toEqual(99);
+        });
+      });
+      describe('when the applied percentage is less than the minimum percentage', () => {
+        beforeEach(() => {
+          initialState.appliedPercentage = props.minPercentage - 1;
+          renderComponent();
+          dimensions.percentage.decrement();
+        });
+        it('uses the minimum percentage for the field value', () => {
+          expect(dimensions.percentage.value).toEqual(`${props.minPercentage}`);
+        });
+        it('uses the minimum percentage for the dimensions state percentage', () => {
+          expect(dimensionsState.percentage).toEqual(props.minPercentage);
+        });
+        it('removes the validation error from the field', () => {
+          expect(dimensions.messageTexts).toEqual([ASPECT_MESSAGE]);
+        });
+        it('sets the dimensions state as valid', () => {
+          expect(dimensionsState.isValid).toEqual(true);
+        });
+      });
+      describe('when the value had been cleared', () => {
+        beforeEach(() => {
+          renderComponent();
+          dimensions.percentage.setValue('');
+          dimensions.percentage.decrement();
+        });
+        it('decrements the initial percentage for the field value', () => {
+          expect(dimensions.percentage.value).toEqual(`${initialState.appliedPercentage - 1}`);
+        });
+        it('decrements the initial percentage for the dimensions state percentage', () => {
+          expect(dimensionsState.percentage).toEqual(initialState.appliedPercentage - 1);
+        });
+        it('removes the validation error from the field', () => {
+          expect(dimensions.messageTexts).toEqual([ASPECT_MESSAGE]);
+        });
+        it('sets the dimensions state as valid', () => {
+          expect(dimensionsState.isValid).toEqual(true);
+        });
+      });
+      describe('when the value is not a number', () => {
+        beforeEach(() => {
+          renderComponent();
+          dimensions.percentage.setValue('twelve');
+          dimensions.percentage.decrement();
+        });
+        it('preserves the invalid value in the field', () => {
+          expect(dimensions.percentage.value).toEqual('twelve');
+        });
+        it('sets the dimensions state percentage to NaN', () => {
+          expect(dimensionsState.percentage).toBeNaN();
+        });
+      });
+    });
+    describe('when incremented', () => {
+      describe('when a percentage has been applied to the element', () => {
+        beforeEach(() => {
+          renderComponent();
+          dimensions.percentage.increment();
+        });
+        it('increments the applied height for the field value', () => {
+          expect(dimensions.percentage.value).toEqual(`${initialState.appliedPercentage + 1}`);
+        });
+        it('increments the applied height for the dimensions state height', () => {
+          expect(dimensionsState.percentage).toEqual(initialState.appliedPercentage + 1);
+        });
+      });
+      describe('when no percentage has been applied to the element', () => {
+        beforeEach(() => {
+          initialState.appliedPercentage = null;
+          renderComponent();
+          dimensions.percentage.increment();
+        });
+        it('increments the full percentage for the field value', () => {
+          expect(dimensions.percentage.value).toEqual('101');
+        });
+        it('increments the full percentage for the dimensions state percentage', () => {
+          expect(dimensionsState.percentage).toEqual(101);
+        });
+      });
+      describe('when the applied percentage is less than the minimum percentage', () => {
+        beforeEach(() => {
+          initialState.appliedPercentage = props.minPercentage - 2;
+          renderComponent();
+          dimensions.percentage.increment();
+        });
+        it('uses the minimum percentage for the field value', () => {
+          expect(dimensions.percentage.value).toEqual(`${props.minPercentage}`);
+        });
+        it('uses the minimum percentage for the dimensions state percentage', () => {
+          expect(dimensionsState.percentage).toEqual(props.minPercentage);
+        });
+        it('removes the validation error from the field', () => {
+          expect(dimensions.messageTexts).toEqual([ASPECT_MESSAGE]);
+        });
+        it('sets the dimensions state as valid', () => {
+          expect(dimensionsState.isValid).toEqual(true);
+        });
+      });
+      describe('when the value had been cleared', () => {
+        beforeEach(() => {
+          renderComponent();
+          dimensions.percentage.setValue('');
+          dimensions.percentage.increment();
+        });
+        it('increments the initial percentage for the field value', () => {
+          expect(dimensions.percentage.value).toEqual(`${initialState.appliedPercentage + 1}`);
+        });
+        it('increments the initial percentage for the dimensions state height', () => {
+          expect(dimensionsState.percentage).toEqual(initialState.appliedPercentage + 1);
+        });
+        it('removes the validation error from the field', () => {
+          expect(dimensions.messageTexts).toEqual([ASPECT_MESSAGE]);
+        });
+        it('sets the dimensions state as valid', () => {
+          expect(dimensionsState.isValid).toEqual(true);
+        });
+      });
+      describe('when the value is not a number', () => {
+        beforeEach(() => {
+          renderComponent();
+          dimensions.percentage.setValue('twelve');
+          dimensions.percentage.increment();
+        });
+        it('preserves the invalid value in the field', () => {
+          expect(dimensions.percentage.value).toEqual('twelve');
+        });
+        it('sets the dimensions state percentage to NaN', () => {
+          expect(dimensionsState.percentage).toBeNaN();
+        });
+      });
+    });
+  });
 });

package/lib/translated/pt/modules/rce/plugins/shared/DimensionsInput/__tests__/DimensionsInputDriver.js

@@ -16,6 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import NumberInputDriver from "./NumberInputDriver.js";
+import { queryByLabelText, getByTestId } from '@testing-library/react';
 export default class DimensionsInputDriver {
   static find($parent) {
     const $fieldset = [...$parent.querySelectorAll('fieldset')].find($element => $element.textContent.includes('Dimensions'));
@@ -27,26 +28,48 @@ export default class DimensionsInputDriver {
     return new DimensionsInputDriver($fieldset);
   }
 
-  constructor($element) {
-    this.$element = $element;
+  constructor($parent) {
+    this.$typeSelector = $parent.firstChild;
+    this.$dimensionsInput = $parent.lastChild;
   }
 
   get width() {
-    return NumberInputDriver.findByLabelText('Width', this.$element);
+    const $container = getByTestId(this.$dimensionsInput, 'input-number-container');
+    return NumberInputDriver.findByLabelText('Width', $container);
   }
 
   get height() {
-    return NumberInputDriver.findByLabelText('Height', this.$element);
+    const $container = getByTestId(this.$dimensionsInput, 'input-number-container');
+    return NumberInputDriver.findByLabelText('Height', $container);
+  }
+
+  get percentage() {
+    const $container = getByTestId(this.$dimensionsInput, 'input-number-container');
+    return NumberInputDriver.findByLabelText('Percentage', $container);
+  }
+
+  get pixelsRadioButton() {
+    const $parent = getByTestId(this.$typeSelector, 'dimension-type');
+    return queryByLabelText($parent, 'Pixels', {
+      exact: false
+    });
+  }
+
+  get percentageRadioButton() {
+    const $parent = getByTestId(this.$typeSelector, 'dimension-type');
+    return queryByLabelText($parent, 'Percentage', {
+      exact: false
+    });
   }
 
   get messageTexts() {
-    const messagesId = this.$element.getAttribute('aria-describedby');
+    const messagesId = this.$dimensionsInput.getAttribute('aria-describedby');
 
     if (messagesId == null) {
       return [];
     }
 
-    return [...this.$element.querySelectorAll(`#${messagesId} > *`)].map($message => $message.textContent.trim());
+    return [...this.$dimensionsInput.querySelectorAll(`#${messagesId} > *`)].map($message => $message.textContent.trim());
   }
 
 }

package/lib/translated/pt/modules/rce/plugins/shared/DimensionsInput/index.js

@@ -21,37 +21,84 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { FormFieldGroup } from '@instructure/ui-form-field';
 import { IconLockLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
+import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
 import formatMessage from "../../../../format-message.js";
 import DimensionInput from "./DimensionInput.js";
 export { default as useDimensionsState } from "./useDimensionsState.js";
-export default function DimensionsInput(props) {
-  const dimensionsState = props.dimensionsState,
-        minHeight = props.minHeight,
-        minWidth = props.minWidth;
-  let messages = [{
+
+const getMessage = (dimensionsState, minWidth, minHeight, minPercentage) => {
+  let result = {
     text: "A rela\xE7\xE3o de aspeto ser\xE1 preservada",
     type: 'hint'
-  }];
+  };
 
-  if (!dimensionsState.isNumeric) {
-    messages = [{
+  if (dimensionsState.usePercentageUnits) {
+    if (!dimensionsState.isNumeric) {
+      result = {
+        text: "Percentage must be a number",
+        type: 'error'
+      };
+    } else if (!dimensionsState.isAtLeastMinimums) {
+      result = {
+        text: "Deve ser pelo menos " + minPercentage + "%",
+        type: 'error'
+      };
+    }
+  } else if (!dimensionsState.isNumeric) {
+    result = {
       text: "Largura e altura devem ser n\xFAmeros",
       type: 'error'
-    }];
+    };
   } else if (!dimensionsState.isAtLeastMinimums) {
-    messages = [{
+    result = {
       text: "Deve ter pelo menos " + minWidth + " x " + minHeight + "px",
       type: 'error'
-    }];
+    };
   }
 
-  return /*#__PURE__*/React.createElement(FormFieldGroup, {
+  return result;
+};
+
+export default function DimensionsInput(props) {
+  const dimensionsState = props.dimensionsState,
+        minHeight = props.minHeight,
+        minWidth = props.minWidth,
+        minPercentage = props.minPercentage;
+  const message = getMessage(dimensionsState, minWidth, minHeight, minPercentage);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, {
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "small"
+  }, /*#__PURE__*/React.createElement(RadioInputGroup, {
+    "data-testid": "dimension-type",
+    name: "dimension-type",
+    description: "Tipo de dimens\xE3o",
+    onChange: e => {
+      dimensionsState.setUsePercentageUnits(e.target.value === 'percentage');
+    },
+    value: dimensionsState.usePercentageUnits ? 'percentage' : 'pixels'
+  }, /*#__PURE__*/React.createElement(RadioInput, {
+    label: "Pixels",
+    value: "pixels"
+  }), /*#__PURE__*/React.createElement(RadioInput, {
+    label: "Porcentagem",
+    value: "percentage"
+  })))), /*#__PURE__*/React.createElement(FormFieldGroup, {
     description: /*#__PURE__*/React.createElement(ScreenReaderContent, null, "Dimens\xF5es"),
-    messages: messages
+    messages: [message]
   }, /*#__PURE__*/React.createElement(Flex, {
     alignItems: "start",
-    direction: "row"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    direction: "row",
+    "data-testid": "input-number-container"
+  }, dimensionsState.usePercentageUnits ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldShrink: true,
+    shouldGrow: true
+  }, /*#__PURE__*/React.createElement(DimensionInput, {
+    dimensionState: dimensionsState.percentageState,
+    label: "Porcentagem"
+  })), /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "x-small small"
+  }, "%")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
     shrink: true
   }, /*#__PURE__*/React.createElement(DimensionInput, {
     dimensionState: dimensionsState.widthState,
@@ -65,7 +112,7 @@ export default function DimensionsInput(props) {
     dimensionState: dimensionsState.heightState,
     label: "Altura",
     minValue: minHeight
-  }))));
+  }))))));
 }
 DimensionsInput.propTypes = {
   dimensionsState: shape({
@@ -75,12 +122,20 @@ DimensionsInput.propTypes = {
       setInputValue: func.isRequired
     }).isRequired,
     isNumeric: bool.isRequired,
+    usePercentageUnits: bool.isRequired,
+    setUsePercentageUnits: func.isRequired,
     widthState: shape({
       addOffset: func.isRequired,
       inputValue: string.isRequired,
       setInputValue: func.isRequired
+    }).isRequired,
+    percentageState: shape({
+      addOffset: func.isRequired,
+      inputValue: string.isRequired,
+      setInputValue: func.isRequired
     }).isRequired
   }),
   minHeight: number.isRequired,
-  minWidth: number.isRequired
+  minWidth: number.isRequired,
+  minPercentage: number.isRequired
 };