@pie-lib/config-ui 11.9.24 → 11.11.0-beta.0

package/src/choice-configuration/index.jsx

@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
+import ActionDelete from '@material-ui/icons/Delete';
+import ArrowRight from '@material-ui/icons/SubdirectoryArrowRight';
+import IconButton from '@material-ui/core/IconButton';
 import classNames from 'classnames';
 import { InputContainer } from '@pie-lib/render-ui';
 import EditableHtml from '@pie-lib/editable-html';
 import { InputCheckbox, InputRadio } from '../inputs';
 import FeedbackMenu from './feedback-menu';
-import ActionDelete from '@material-ui/icons/Delete';
-import ArrowRight from '@material-ui/icons/SubdirectoryArrowRight';
-import IconButton from '@material-ui/core/IconButton';
 
 const EditableHtmlContainer = withStyles((theme) => ({
   labelContainer: {},
@@ -28,6 +28,7 @@ const EditableHtmlContainer = withStyles((theme) => ({
     disabled,
     spellCheck,
     nonEmpty,
+    pluginOpts,
     toolbarOpts,
     error,
     maxImageWidth,
@@ -49,6 +50,7 @@ const EditableHtmlContainer = withStyles((theme) => ({
             imageSupport={imageSupport}
             disableImageAlignmentButtons={disableImageAlignmentButtons}
             className={classes.editor}
+            pluginProps={pluginOpts || {}}
             toolbarOpts={toolbarOpts}
             error={error}
             maxImageWidth={maxImageWidth}
@@ -139,8 +141,11 @@ export class ChoiceConfiguration extends React.Component {
     allowDelete: PropTypes.bool,
     noCorrectAnswerError: PropTypes.string,
     spellCheck: PropTypes.bool,
+    pluginOpts: PropTypes.object,
     toolbarOpts: PropTypes.object,
     uploadSoundSupport: PropTypes.object,
+    maxImageWidth: PropTypes.number,
+    maxImageHeight: PropTypes.number,
   };
 
   static defaultProps = {
@@ -211,10 +216,13 @@ export class ChoiceConfiguration extends React.Component {
       nonEmpty,
       allowFeedBack,
       allowDelete,
+      pluginOpts,
       toolbarOpts,
       error,
       noCorrectAnswerError,
       uploadSoundSupport,
+      maxImageWidth,
+      maxImageHeight,
       mathMlOptions = {},
     } = this.props;
 
@@ -249,10 +257,13 @@ export class ChoiceConfiguration extends React.Component {
               disabled={disabled}
               spellCheck={spellCheck}
               nonEmpty={nonEmpty}
+              pluginOpts={pluginOpts}
               toolbarOpts={toolbarOpts}
               error={error}
               uploadSoundSupport={uploadSoundSupport}
               mathMlOptions={mathMlOptions}
+              maxImageWidth={maxImageWidth}
+              maxImageHeight={maxImageHeight}
             />
             {error && <div className={classes.errorText}>{error}</div>}
 

package/src/feedback-config/__tests__/__snapshots__/feedback-config.test.jsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FeedbackConfig render Feedback Config Component snapshot matches the snapshot 1`] = `
+<div>
+  <WithStyles(ExpansionPanel)>
+    <WithStyles(ExpansionPanelSummary)
+      expandIcon={<pure(ExpandMoreIcon) />}
+    >
+      <WithStyles(Typography)>
+        Feedback
+      </WithStyles(Typography)>
+    </WithStyles(ExpansionPanelSummary)>
+    <WithStyles(ExpansionPanelDetails)>
+      <div>
+        <WithStyles(FeedbackSelector)
+          label="If correct, show"
+          onChange={[Function]}
+        />
+        <WithStyles(FeedbackSelector)
+          label="If incorrect, show"
+          onChange={[Function]}
+        />
+      </div>
+    </WithStyles(ExpansionPanelDetails)>
+  </WithStyles(ExpansionPanel)>
+</div>
+`;

package/src/feedback-config/__tests__/__snapshots__/feedback-selector.test.jsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`feedback-selector snapshot renders 1`] = `
+<div>
+  <WithStyles(RawInputContainer)
+    extraClasses={
+      Object {
+        "label": undefined,
+      }
+    }
+    label="foo"
+  >
+    <WithStyles(Group)
+      feedbackLabels={
+        Object {
+          "custom": "Customized Feedback",
+          "default": "Simple Feedback",
+          "none": "No Feedback",
+        }
+      }
+      keys={
+        Array [
+          "default",
+          "none",
+          "custom",
+        ]
+      }
+      label="foo"
+      onChange={[Function]}
+      value="default"
+    />
+  </WithStyles(RawInputContainer)>
+  <div>
+     
+    hi
+  </div>
+</div>
+`;

package/src/feedback-config/__tests__/feedback-config.test.jsx

@@ -0,0 +1,71 @@
+import React, { PropTypes } from 'react';
+import Enzyme, { shallow, mount } from 'enzyme';
+import { FeedbackConfig } from '../index';
+import FeedbackSelector from '../feedback-selector';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('FeedbackConfig', () => {
+  describe('render', () => {
+    let component, selectors;
+    let feedback = {
+      correctFeedback: undefined,
+      correctFeedbackType: 'default',
+      incorrectFeedback: undefined,
+      incorrectFeedbackType: 'default',
+    };
+
+    let defaults = {
+      correct: 'Correct',
+      incorrect: 'Incorrect',
+      partial: 'Nearly',
+    };
+
+    describe('Feedback Config Component', () => {
+      it('should exist', () => {
+        component = shallow(
+          <FeedbackConfig feedback={feedback} defaults={defaults} onChange={jest.fn()} classes={{}} />,
+        );
+
+        selectors = component.find(FeedbackSelector);
+
+        expect(selectors.length).toEqual(3);
+      });
+
+      describe('props', () => {
+        it('should not render optionally correct if optional is not needed', () => {
+          component = shallow(
+            <FeedbackConfig
+              allowPartial={false}
+              feedback={feedback}
+              defaults={defaults}
+              onChange={jest.fn()}
+              classes={{}}
+            />,
+          );
+
+          selectors = component.find(FeedbackSelector);
+
+          expect(selectors.length).toEqual(2);
+        });
+      });
+
+      describe('snapshot', () => {
+        it('matches the snapshot', () => {
+          component = shallow(
+            <FeedbackConfig
+              allowPartial={false}
+              feedback={feedback}
+              defaults={defaults}
+              onChange={jest.fn()}
+              classes={{}}
+            />,
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});

package/src/feedback-config/__tests__/feedback-selector.test.jsx

@@ -0,0 +1,60 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { FeedbackSelector } from '../feedback-selector';
+
+describe('feedback-selector', () => {
+  let w, onChange;
+
+  const getWrapper = () => {
+    return shallow(
+      <FeedbackSelector
+        classes={{}}
+        label={'foo'}
+        onChange={onChange}
+        feedback={{
+          type: 'default',
+          default: 'hi',
+        }}
+      />,
+    );
+  };
+
+  beforeEach(() => {
+    onChange = jest.fn();
+    w = getWrapper();
+  });
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('changeCustom', () => {
+      it('calls onChange with text', () => {
+        w.instance().changeCustom('bar');
+        expect(onChange).toBeCalledWith({
+          type: 'custom',
+          custom: 'bar',
+          default: 'hi',
+        });
+      });
+    });
+
+    describe('changeType', () => {
+      it('calls onChange with default', () => {
+        w.instance().changeType('default');
+        expect(onChange).toBeCalledWith({ type: 'default', default: 'hi' });
+      });
+      it('calls onChange with custom', () => {
+        w.instance().changeType('custom');
+        expect(onChange).toBeCalledWith({ type: 'custom', default: 'hi' });
+      });
+      it('calls onChange with none', () => {
+        w.instance().changeType('none');
+        expect(onChange).toBeCalledWith({ type: 'none', default: 'hi' });
+      });
+    });
+  });
+});

package/src/inputs.jsx

@@ -6,6 +6,7 @@ import React from 'react';
 import Switch from '@material-ui/core/Switch';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
+import { color } from '@pie-lib/render-ui';
 
 const InputTypes = {
   classes: PropTypes.object.isRequired,
@@ -40,7 +41,7 @@ const RawInputCheckbox = (props) => {
   return (
     <InputContainer className={className} label={label}>
       <Checkbox
-        className={classNames(classes.checkboxRoot, error && classes.error)}
+        className={classNames(classes.checkboxRoot, classes.customColor, error && classes.error)}
         disabled={disabled}
         checked={checked}
         onChange={onChange}
@@ -58,7 +59,7 @@ const RawInputRadio = (props) => {
   return (
     <InputContainer className={className} label={label}>
       <Radio
-        className={classNames(classes.radioRoot, error && classes.error)}
+        className={classNames(classes.radioRoot, classes.customColor, error && classes.error)}
         disabled={disabled}
         checked={checked}
         onChange={onChange}
@@ -77,6 +78,9 @@ const InputCheckbox = withStyles((theme) => ({
   error: {
     color: theme.palette.error.main,
   },
+  customColor: {
+    color: `${color.tertiary()} !important`
+  },
 }))(RawInputCheckbox);
 
 const InputRadio = withStyles((theme) => ({
@@ -86,6 +90,9 @@ const InputRadio = withStyles((theme) => ({
   error: {
     color: theme.palette.error.main,
   },
+  customColor: {
+    color: `${color.tertiary()} !important`
+  },
 }))(RawInputRadio);
 
 export { InputSwitch, InputCheckbox, InputRadio };

package/src/layout/__tests__/__snapshots__/config.layout.test.jsx.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`layout - snapshot renders correctly with a side panel 1`] = `
+<WithContentRect
+  classes={
+    Object {
+      "extraCSSRules": "WithContentRect-extraCSSRules-1",
+    }
+  }
+  settings={
+    <div>
+      <div>
+        Foo
+      </div>
+      <div>
+        Bar
+      </div>
+    </div>
+  }
+>
+  <div>
+    <div>
+      Foo
+    </div>
+    <div>
+      Bar
+    </div>
+  </div>
+</WithContentRect>
+`;
+
+exports[`layout - snapshot renders correctly without a side panel 1`] = `
+<WithContentRect
+  classes={
+    Object {
+      "extraCSSRules": "WithContentRect-extraCSSRules-1",
+    }
+  }
+  settings={
+    <div>
+      <div>
+        Foo
+      </div>
+      <div>
+        Bar
+      </div>
+    </div>
+  }
+>
+  <div>
+    <div>
+      Foo
+    </div>
+    <div>
+      Bar
+    </div>
+  </div>
+</WithContentRect>
+`;

package/src/layout/__tests__/config.layout.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import ConfigLayout from '../config-layout';
+import { shallow } from 'enzyme';
+
+describe('layout - snapshot', () => {
+  it('renders correctly with a side panel', () => {
+    const tree = shallow(
+      <ConfigLayout
+        settings={
+          <div>
+            <div key={0}>Foo</div>
+            <div key={1}>Bar</div>
+          </div>
+        }
+      >
+        <div>
+          <div>Foo</div>
+          <div>Bar</div>
+        </div>
+      </ConfigLayout>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders correctly without a side panel', () => {
+    const tree = shallow(
+      <ConfigLayout
+        settings={
+          <div>
+            <div key={0}>Foo</div>
+            <div key={1}>Bar</div>
+          </div>
+        }
+      >
+        <div>
+          <div>Foo</div>
+          <div>Bar</div>
+        </div>
+      </ConfigLayout>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/layout/__tests__/layout-content.test.jsx

@@ -0,0 +1,3 @@
+describe('layout-content', () => {
+  it.todo('add tests!');
+});

package/src/layout/config-layout.jsx

@@ -1,11 +1,18 @@
 import React from 'react';
 import Measure from 'react-measure';
 import { withContentRect } from 'react-measure';
+import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import LayoutContents from './layout-contents';
 import SettingsBox from './settings-box';
+import { AppendCSSRules } from '@pie-lib/render-ui';
 
-class MeasuredConfigLayout extends React.Component {
+const styles = {
+  extraCSSRules: {},
+};
+
+class MeasuredConfigLayout extends AppendCSSRules {
   static propTypes = {
     children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
     className: PropTypes.string,
@@ -17,13 +24,13 @@ class MeasuredConfigLayout extends React.Component {
   };
 
   static defaultProps = {
-    sidePanelMinWidth: 950,
+    sidePanelMinWidth: 1135,
     hideSettings: false,
     dimensions: {},
   };
 
-  constructor(props) {
-    super(props);
+  constructor(...props) {
+    super(...props);
     this.state = { layoutMode: undefined };
   }
 
@@ -33,7 +40,7 @@ class MeasuredConfigLayout extends React.Component {
     const { maxWidth } = dimensions || {};
 
     const layoutMode =
-      bounds.width >= sidePanelMinWidth && (maxWidth ? maxWidth >= sidePanelMinWidth : true) ? 'inline' : 'tabbed';
+      bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';
 
     this.setState({ layoutMode });
   };
@@ -42,15 +49,16 @@ class MeasuredConfigLayout extends React.Component {
     return (
       <Measure bounds onResize={this.onResize}>
         {({ measureRef }) => {
-          const { children, settings, hideSettings, dimensions } = this.props;
+          const { children, settings, hideSettings, dimensions, classes } = this.props;
           const { layoutMode } = this.state;
 
           const settingsPanel =
             layoutMode === 'inline' ? <SettingsBox className="settings-box">{settings}</SettingsBox> : settings;
           const secondaryContent = hideSettings ? null : settingsPanel;
+          const finalClass = classNames('main-container', classes.extraCSSRules);
 
           return (
-            <div ref={measureRef} className="main-container">
+            <div ref={measureRef} className={finalClass}>
               <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>
                 {children}
               </LayoutContents>
@@ -62,6 +70,6 @@ class MeasuredConfigLayout extends React.Component {
   }
 }
 
-const ConfigLayout = withContentRect('bounds')(MeasuredConfigLayout);
+const ConfigLayout = withStyles(styles)(withContentRect('bounds')(MeasuredConfigLayout));
 
 export default ConfigLayout;