@pie-lib/rubric 0.28.3-next.2 → 0.28.3-next.203

package/src/__tests__/rubric.test.jsx

@@ -1,18 +1,41 @@
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { RawAuthoring } from '../authoring';
-import { Draggable } from 'react-beautiful-dnd';
 import _ from 'lodash';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 
-jest.mock('@pie-lib/editable-html', () => () => <div />);
+// Mock dependencies
+jest.mock('@pie-lib/editable-html-tip-tap', () => {
+  return function EditableHtml(props) {
+    return <div data-testid="editable-html" data-markup={props.markup} />;
+  };
+});
 
-describe('Rubric', () => {
-  let w;
+jest.mock('@pie-lib/config-ui', () => ({
+  FeedbackConfig: ({ feedback }) => <div data-testid="feedback-config">{JSON.stringify(feedback)}</div>,
+}));
 
+jest.mock('@hello-pangea/dnd', () => ({
+  DragDropContext: ({ children }) => <div data-testid="drag-drop-context">{children}</div>,
+  Droppable: ({ children }) => children({ droppableProps: {}, innerRef: () => {} }, {}),
+  Draggable: ({ children, index }) =>
+    children(
+      {
+        innerRef: () => {},
+        draggableProps: { 'data-draggable-index': index },
+        dragHandleProps: {},
+      },
+      {},
+    ),
+}));
+
+describe('Rubric', () => {
   const points = ['nothing right', 'a teeny bit right', 'mostly right', 'bingo'];
   const sampleAnswers = [null, 'just right', 'not left', null];
-  const wrapper = (value, opts) => {
-    const props = {
+  const theme = createTheme();
+
+  const renderComponent = (value = {}, props = {}) => {
+    const defaultProps = {
       classes: {},
       onChange: jest.fn(),
       className: 'className',
@@ -22,38 +45,93 @@ describe('Rubric', () => {
         sampleAnswers,
         ...value,
       },
+      ...props,
+    };
+
+    return {
+      ...render(
+        <ThemeProvider theme={theme}>
+          <RawAuthoring {...defaultProps} />
+        </ThemeProvider>,
+      ),
+      onChange: defaultProps.onChange,
+      props: defaultProps,
     };
-    const fn = opts && opts.mount ? mount : shallow;
-    return fn(<RawAuthoring {...props} />, opts);
   };
 
   describe('render', () => {
-    it('snapshot', () => {
-      w = wrapper();
-      expect(w).toMatchSnapshot();
+    it('renders rubric title and main structure', () => {
+      renderComponent();
+      expect(screen.getByText('Rubric')).toBeInTheDocument();
+      expect(screen.getByLabelText('Max Points')).toBeInTheDocument();
+      expect(screen.getByLabelText('Exclude zeros')).toBeInTheDocument();
+    });
+
+    it('renders all point configurations', () => {
+      const { container } = renderComponent();
+      // Verify DragDropContext is rendered
+      expect(container.querySelector('[data-testid="drag-drop-context"]')).toBeInTheDocument();
+
+      // Check that point labels are rendered (4 points = "3 pts", "2 pts", "1 pt", "0 pt")
+      // Note: The PointConfig component uses singular "pt" for 0 and 1, plural "pts" for 2+
+      expect(screen.getByText('3 pts')).toBeInTheDocument();
+      expect(screen.getByText('2 pts')).toBeInTheDocument();
+      expect(screen.getByText('1 pt')).toBeInTheDocument();
+      expect(screen.getByText('0 pt')).toBeInTheDocument();
     });
 
     describe('draggable', () => {
-      it('renders correctly for excluded zeroes', () => {
-        let w = wrapper({ excludeZero: true }, { mount: true });
-        expect(w.find(Draggable).length).toEqual(3);
+      it('renders 3 draggable items when excludeZero is true', () => {
+        const { container } = renderComponent({ excludeZero: true });
+
+        // When excludeZero is true, the last point (0 pts) should not be rendered
+        // So we should have 3 draggable items
+        const draggableItems = container.querySelectorAll('[data-draggable-index]');
+        expect(draggableItems.length).toEqual(3);
+
+        // Verify the 0 pt label is not rendered
+        expect(screen.queryByText('0 pt')).not.toBeInTheDocument();
       });
-      it('renders correctly for excluded zeroes', () => {
-        let w = wrapper({ excludeZero: false }, { mount: true });
-        expect(w.find(Draggable).length).toEqual(4);
+
+      it('renders 4 draggable items when excludeZero is false', () => {
+        const { container } = renderComponent({ excludeZero: false });
+
+        // When excludeZero is false, all points including 0 should be rendered
+        const draggableItems = container.querySelectorAll('[data-draggable-index]');
+        expect(draggableItems.length).toEqual(4);
+
+        // Verify all point labels are rendered
+        expect(screen.getByText('3 pts')).toBeInTheDocument();
+        expect(screen.getByText('2 pts')).toBeInTheDocument();
+        expect(screen.getByText('1 pt')).toBeInTheDocument();
+        expect(screen.getByText('0 pt')).toBeInTheDocument();
       });
     });
   });
 
   describe('logic', () => {
-    describe('rendering', () => {});
-
     describe('changeMaxPoints', () => {
-      const assertChangeMax = (points, excludeZero, expectedPoints, expectedSampleAnswers) => {
-        it(`${points} calls onChange with: ${expectedPoints} and ${expectedSampleAnswers}`, () => {
-          let w = wrapper({ excludeZero });
-          w.instance().changeMaxPoints(points);
-          expect(w.instance().props.onChange).toHaveBeenCalledWith({
+      const testChangeMaxPoints = (maxPoints, excludeZero, expectedPoints, expectedSampleAnswers) => {
+        it(`maxPoints=${maxPoints}, excludeZero=${excludeZero} calls onChange correctly`, () => {
+          const { onChange, container } = renderComponent({ excludeZero });
+
+          // Get the component instance through the container
+          // We need to call the method directly since we're testing internal behavior
+          const instance = container.querySelector('[class*="MuiBox-root"]')?._owner;
+
+          // Since we can't easily access instance methods in RTL, we'll test the behavior
+          // by verifying the onChange prop receives the correct values
+          // For now, we'll directly test the logic
+          const component = new RawAuthoring({
+            value: { excludeZero, points, sampleAnswers },
+            onChange,
+            classes: {},
+            className: 'className',
+          });
+
+          component.changeMaxPoints(maxPoints);
+
+          expect(onChange).toHaveBeenCalledWith({
             excludeZero,
             points: expectedPoints,
             sampleAnswers: expectedSampleAnswers,
@@ -62,19 +140,29 @@ describe('Rubric', () => {
         });
       };
 
-      assertChangeMax(1, false, _.takeRight(points, 2), _.takeRight(sampleAnswers, 2));
-      assertChangeMax(1, true, _.takeRight(points, 2), _.takeRight(sampleAnswers, 2));
-      assertChangeMax(2, true, _.takeRight(points, 3), _.takeRight(sampleAnswers, 3));
-      assertChangeMax(2, false, _.takeRight(points, 3), _.takeRight(sampleAnswers, 3));
-      assertChangeMax(5, false, ['', ''].concat(points), [null, null].concat(sampleAnswers));
+      testChangeMaxPoints(1, false, _.takeRight(points, 2), _.takeRight(sampleAnswers, 2));
+      testChangeMaxPoints(1, true, _.takeRight(points, 2), _.takeRight(sampleAnswers, 2));
+      testChangeMaxPoints(2, true, _.takeRight(points, 3), _.takeRight(sampleAnswers, 3));
+      testChangeMaxPoints(2, false, _.takeRight(points, 3), _.takeRight(sampleAnswers, 3));
+      testChangeMaxPoints(5, false, ['', ''].concat(points), [null, null].concat(sampleAnswers));
     });
 
     describe('changeSampleResponse', () => {
-      const assertChangeSample = (index, clickedItem, excludeZero, expectedPoints, expectedSampleAnswers) => {
-        it(`Point ${index} calls onChange with: ${expectedPoints} and ${expectedSampleAnswers}`, () => {
-          let w = wrapper({ excludeZero });
-          w.instance().onPointMenuChange(index, clickedItem);
-          expect(w.instance().props.onChange).toHaveBeenCalledWith({
+      const testChangeSampleResponse = (index, clickedItem, excludeZero, expectedPoints, expectedSampleAnswers) => {
+        it(`Point ${index} with clickedItem="${clickedItem}" calls onChange correctly`, () => {
+          const { onChange } = renderComponent({ excludeZero });
+
+          // Test the logic by creating a component instance and calling the method
+          const component = new RawAuthoring({
+            value: { excludeZero, points, sampleAnswers },
+            onChange,
+            classes: {},
+            className: 'className',
+          });
+
+          component.onPointMenuChange(index, clickedItem);
+
+          expect(onChange).toHaveBeenCalledWith({
             excludeZero,
             points: expectedPoints,
             sampleAnswers: expectedSampleAnswers,
@@ -82,10 +170,10 @@ describe('Rubric', () => {
         });
       };
 
-      assertChangeSample(0, 'sample', false, points, ['', 'just right', 'not left', null]);
-      assertChangeSample(3, 'sample', false, points, [null, 'just right', 'not left', '']);
-      assertChangeSample(1, 'sample', true, points, [null, null, 'not left', null]);
-      assertChangeSample(3, 'sample', true, points, [null, 'just right', 'not left', '']);
+      testChangeSampleResponse(0, 'sample', false, points, ['', 'just right', 'not left', null]);
+      testChangeSampleResponse(3, 'sample', false, points, [null, 'just right', 'not left', '']);
+      testChangeSampleResponse(1, 'sample', true, points, [null, null, 'not left', null]);
+      testChangeSampleResponse(3, 'sample', true, points, [null, 'just right', 'not left', '']);
     });
   });
 });

package/src/authoring.jsx

@@ -1,27 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
-import InputLabel from '@material-ui/core/InputLabel';
-import Select from '@material-ui/core/Select';
-import FormControl from '@material-ui/core/FormControl';
-import MenuItem from '@material-ui/core/MenuItem';
+import { styled } from '@mui/material/styles';
+
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import FormControl from '@mui/material/FormControl';
+import MenuItem from '@mui/material/MenuItem';
 import times from 'lodash/times';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import grey from '@material-ui/core/colors/grey';
-import Typography from '@material-ui/core/Typography';
-import DragIndicator from '@material-ui/icons/DragIndicator';
-import EditableHtml from '@pie-lib/editable-html';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import Checkbox from '@mui/material/Checkbox';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Typography from '@mui/material/Typography';
+import DragIndicator from '@mui/icons-material/DragIndicator';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import debug from 'debug';
 import takeRight from 'lodash/takeRight';
 import PointMenu from './point-menu';
-
 import range from 'lodash/range';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
 import { InputContainer } from '@pie-lib/config-ui';
+import { grey } from '@mui/material/colors';
 
 const log = debug('pie-lib:rubric:authoring');
 
@@ -42,20 +41,21 @@ export const RubricType = PropTypes.shape({
   rubriclessInstruction: PropTypes.string,
 });
 
-const MaxPoints = withStyles((theme) => ({
-  formControl: {
-    minWidth: '120px',
-    margin: theme.spacing.unit,
-  },
-}))((props) => {
-  const { value, onChange, max, classes } = props;
+const MaxPoints = (props) => {
+  const { value, onChange, max } = props;
+  const labelId = 'max-points-label';
 
   return (
-    <FormControl className={classes.formControl} variant="outlined">
-      <InputLabel width={100} htmlFor="...">
-        Max Points
-      </InputLabel>
-      <Select value={value} onChange={(e) => onChange(e.target.value)} input={<OutlinedInput labelWidth={80} />}>
+    <FormControl sx={{ minWidth: 120, m: 1 }} variant="outlined">
+      <InputLabel id={labelId}>Max Points</InputLabel>
+      <Select
+        labelId={labelId}
+        label="Max Points"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        input={<OutlinedInput label="Max Points" />}
+        MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}
+      >
         {range(1, max + 1).map((v) => (
           <MenuItem key={`${v}`} value={v}>
             {v}
@@ -64,97 +64,98 @@ const MaxPoints = withStyles((theme) => ({
       </Select>
     </FormControl>
   );
-});
+};
 
 // if the value is null or 'null', the Sample Answer input field for that point will not be dispalyed
 // if the value is '', the Sample Answer input field will be empty
 const checkSampleAnswer = (sampleAnswer) => sampleAnswer === null || sampleAnswer === 'null';
 
-export const PointConfig = withStyles((theme) => ({
-  pointConfig: {},
-  row: {
-    display: 'flex',
-    width: '100%',
-    position: 'relative',
-  },
-  editor: {
-    width: '100%',
-    backgroundColor: `${theme.palette.common.white} !important`,
-  },
-  dragIndicator: {
-    paddingTop: theme.spacing.unit,
-    color: grey[500],
-  },
-  pointsLabel: {
-    color: grey[500],
-    paddingBottom: theme.spacing.unit,
-    textTransform: 'uppercase',
-  },
-  sampleAnswersEditor: {
-    paddingLeft: theme.spacing.unit * 3,
-  },
-  pointMenu: {
-    position: 'absolute',
-    right: 0,
-  },
-  errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-    paddingLeft: theme.spacing.unit * 3,
-    paddingTop: theme.spacing.unit,
-  },
-}))((props) => {
-  const { points, content, classes, sampleAnswer, mathMlOptions = {}, error, pluginOpts = {} } = props;
+const Row = styled('div')(() => ({ display: 'flex', width: '100%', position: 'relative' }));
+
+const EditorDiv = styled('div')(({ theme }) => ({ width: '100%', backgroundColor: `${theme.palette.common.white}` }));
+
+const DragIndicatorStyled = styled(DragIndicator)(({ theme }) => ({ paddingTop: theme.spacing(1), color: grey[500] }));
+
+const PointsLabel = styled(Typography)(({ theme }) => ({
+  color: grey[500],
+  paddingBottom: theme.spacing(1),
+  textTransform: 'uppercase',
+}));
+
+const SampleAnswersEditor = styled('div')(({ theme }) => ({ paddingLeft: theme.spacing(3) }));
+
+const ErrorText = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingLeft: theme.spacing(3),
+  paddingTop: theme.spacing(1),
+}));
+
+const PointMenuWrapper = styled('div')(() => ({ position: 'absolute', right: 0 }));
+
+export const PointConfig = (props) => {
+  const { points, content, sampleAnswer, mathMlOptions = {}, error, pluginOpts = {} } = props;
   const pointsLabel = `${points} ${points <= 1 ? 'pt' : 'pts'}`;
   const showSampleAnswer = checkSampleAnswer(sampleAnswer);
 
   return (
-    <div className={classes.pointConfig}>
-      <Typography variant="overline" className={classes.pointsLabel}>
-        {pointsLabel}
-      </Typography>
-
-      <div className={classes.row}>
-        <DragIndicator className={classes.dragIndicator} />
-        <EditableHtml
-          className={classes.editor}
-          error={error}
-          pluginProps={pluginOpts}
-          markup={content}
-          onChange={props.onChange}
-          mathMlOptions={mathMlOptions}
-        />
-        <PointMenu
-          classes={{
-            icon: classes.pointMenu,
-          }}
-          showSampleAnswer={showSampleAnswer}
-          onChange={props.onMenuChange}
-        />
-      </div>
-      {error && <div className={classes.errorText}>{error}</div>}
-      {!showSampleAnswer && (
-        <div className={classes.sampleAnswersEditor}>
-          <Typography variant="overline" className={classes.dragIndicator}>
-            Sample Response
-          </Typography>
+    <div>
+      <PointsLabel variant="overline">{pointsLabel}</PointsLabel>
+      <Row>
+        <DragIndicatorStyled />
+        <EditorDiv>
           <EditableHtml
-            className={classes.editor}
-            markup={sampleAnswer}
+            error={error}
             pluginProps={pluginOpts}
-            onChange={props.onSampleChange}
+            markup={content}
+            onChange={props.onChange}
             mathMlOptions={mathMlOptions}
           />
-        </div>
+        </EditorDiv>
+        <PointMenuWrapper>
+          <PointMenu showSampleAnswer={showSampleAnswer} onChange={props.onMenuChange} />
+        </PointMenuWrapper>
+      </Row>
+      {error && <ErrorText>{error}</ErrorText>}
+      {!showSampleAnswer && (
+        <SampleAnswersEditor>
+          <DragIndicatorStyled as={Typography} variant="overline">
+            Sample Response
+          </DragIndicatorStyled>
+          <EditorDiv>
+            <EditableHtml
+              markup={sampleAnswer}
+              pluginProps={pluginOpts}
+              onChange={props.onSampleChange}
+              mathMlOptions={mathMlOptions}
+            />
+          </EditorDiv>
+        </SampleAnswersEditor>
       )}
     </div>
   );
-});
+};
+
+const Container = styled('div')(({ theme }) => ({
+  backgroundColor: grey[200],
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderColor: grey[300],
+  padding: theme.spacing(2),
+  margin: theme.spacing(1),
+}));
+const InputContainerWrapper = styled('div')(({ theme }) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  '& MuiFormControl-root': { width: '100%' },
+}));
+const Rubricless = styled('div')(() => ({ display: 'none' }));
+const ConfigHolder = styled('div')(({ theme }) => ({ paddingTop: theme.spacing(1), paddingBottom: theme.spacing(1) }));
+const RubricTitle = styled(Typography)(({ theme }) => ({ paddingLeft: theme.spacing(1), margin: theme.spacing(1) }));
 
 export class RawAuthoring extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
     value: RubricType,
     config: PropTypes.object,
     pluginOpts: PropTypes.object,
@@ -264,15 +265,7 @@ export class RawAuthoring extends React.Component {
   };
 
   render() {
-    const {
-      classes,
-      className,
-      value,
-      mathMlOptions = {},
-      config = {},
-      rubricless = false,
-      pluginOpts = {},
-    } = this.props;
+    const { value, mathMlOptions = {}, config = {}, rubricless = false, pluginOpts = {} } = this.props;
     let {
       excludeZeroEnabled = true,
       maxPointsEnabled = true,
@@ -292,10 +285,8 @@ export class RawAuthoring extends React.Component {
     const maxPointsValue = !rubricless ? value.points.length - 1 : maxPoints;
 
     return (
-      <div className={classNames(classes.class, className)}>
-        <Typography variant="h5" className={classes.rubricTitle}>
-          Rubric
-        </Typography>
+      <div>
+        <RubricTitle variant="h5">Rubric</RubricTitle>
         <FormGroup row>
           {maxPointsEnabled && (
             <MaxPoints
@@ -314,93 +305,73 @@ export class RawAuthoring extends React.Component {
         </FormGroup>
 
         {rubriclessInstructionEnabled && rubricless && (
-          <InputContainer label={rubriclessInstruction.label} className={classes.inputContainer}>
-            <EditableHtml
-              className={classes.input}
-              markup={value.rubriclessInstruction || ''}
-              onChange={this.changeRubriclessInstruction}
-              pluginProps={pluginOpts}
-              nonEmpty={false}
-              disableUnderline
-              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-              mathMlOptions={mathMlOptions}
-            />
-          </InputContainer>
+          <InputContainerWrapper>
+            <InputContainer label={rubriclessInstruction.label}>
+              <EditableHtml
+                markup={value.rubriclessInstruction || ''}
+                onChange={this.changeRubriclessInstruction}
+                pluginProps={pluginOpts}
+                nonEmpty={false}
+                disableUnderline
+                languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+                mathMlOptions={mathMlOptions}
+              />
+            </InputContainer>
+          </InputContainerWrapper>
         )}
 
-        <div className={rubricless ? classes.rubricless : classes.container}>
-          <DragDropContext onDragEnd={this.dragEnd}>
-            <Droppable droppableId="droppable">
-              {(provided) => (
-                <div {...provided.droppableProps} ref={provided.innerRef}>
-                  {value.points.map(
-                    (p, index) =>
-                      this.shouldRenderPoint(index, value) && (
-                        <Draggable key={`${p.points}-${index}`} index={index} draggableId={index.toString()}>
-                          {(provided) => (
-                            <div
-                              className={classes.configHolder}
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                            >
-                              <PointConfig
-                                points={value.points.length - 1 - index}
-                                content={p}
-                                error={
-                                  pointsDescriptorsErrors && pointsDescriptorsErrors[value.points.length - 1 - index]
-                                }
-                                sampleAnswer={value.sampleAnswers && value.sampleAnswers[index]}
-                                onChange={(content) => this.changeContent(index, content, 'points')}
-                                onSampleChange={(content) => this.changeContent(index, content, 'sampleAnswers')}
-                                onMenuChange={(clickedItem) => this.onPointMenuChange(index, clickedItem)}
-                                mathMlOptions={mathMlOptions}
-                                pluginOpts={pluginOpts}
-                              />
-                            </div>
-                          )}
-                        </Draggable>
-                      ),
+        <div>
+          {rubricless ? (
+            <Rubricless />
+          ) : (
+            <Container>
+              <DragDropContext onDragEnd={this.dragEnd}>
+                <Droppable droppableId="droppable">
+                  {(provided) => (
+                    <div {...provided.droppableProps} ref={provided.innerRef}>
+                      {value.points.map(
+                        (p, index) =>
+                          this.shouldRenderPoint(index, value) && (
+                            <Draggable key={`${p.points}-${index}`} index={index} draggableId={index.toString()}>
+                              {(provided) => (
+                                <ConfigHolder
+                                  ref={provided.innerRef}
+                                  {...provided.draggableProps}
+                                  {...provided.dragHandleProps}
+                                >
+                                  <PointConfig
+                                    points={value.points.length - 1 - index}
+                                    content={p}
+                                    error={
+                                      pointsDescriptorsErrors &&
+                                      pointsDescriptorsErrors[value.points.length - 1 - index]
+                                    }
+                                    sampleAnswer={value.sampleAnswers && value.sampleAnswers[index]}
+                                    onChange={(content) => this.changeContent(index, content, 'points')}
+                                    onSampleChange={(content) => this.changeContent(index, content, 'sampleAnswers')}
+                                    onMenuChange={(clickedItem) => this.onPointMenuChange(index, clickedItem)}
+                                    mathMlOptions={mathMlOptions}
+                                    pluginOpts={pluginOpts}
+                                  />
+                                </ConfigHolder>
+                              )}
+                            </Draggable>
+                          ),
+                      )}
+                      {provided.placeholder}
+                    </div>
                   )}
-                  {provided.placeholder}
-                </div>
-              )}
-            </Droppable>
-          </DragDropContext>
+                </Droppable>
+              </DragDropContext>
+            </Container>
+          )}
         </div>
       </div>
     );
   }
 }
 
-const styles = (theme) => ({
-  container: {
-    backgroundColor: grey[200],
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: grey[300],
-    padding: theme.spacing.unit * 2,
-    margin: theme.spacing.unit,
-  },
-  inputContainer: {
-    width: '100%',
-    paddingTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-  },
-  rubricless: {
-    display: 'none',
-  },
-  configHolder: {
-    paddingTop: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
-  },
-  rubricTitle: {
-    paddingLeft: theme.spacing.unit,
-    margin: theme.spacing.unit,
-  },
-});
-
-const StyledRawAuthoring = withStyles(styles)(RawAuthoring);
+// styles migrated to styled-components above
 
 const Reverse = (props) => {
   const { rubricless = false, config = {}, pluginOpts = {} } = props || {};
@@ -424,13 +395,7 @@ const Reverse = (props) => {
   };
 
   return (
-    <StyledRawAuthoring
-      value={value}
-      config={config}
-      onChange={onChange}
-      rubricless={rubricless}
-      pluginOpts={pluginOpts}
-    />
+    <RawAuthoring value={value} config={config} onChange={onChange} rubricless={rubricless} pluginOpts={pluginOpts} />
   );
 };