Updated iframe properties dialog

packages/app/obojobo-document-engine/__tests__/common/components/__snapshots__/switch.test.js.snap

@@ -4,11 +4,17 @@ exports[`Switch Switch renders correctly with all options set 1`] = `
 <div
   className="obojobo-draft--components--switch"
 >
-  <span
-    contentEditable={false}
+  <div
+    className="text-content"
   >
-    mocktitle
-  </span>
+    <span
+      contentEditable={false}
+    >
+      mocktitle
+    </span>
+    <br />
+    <small />
+  </div>
   <label
     className="switch"
   >
@@ -29,6 +35,12 @@ exports[`Switch Switch renders correctly with no options set 1`] = `
 <div
   className="obojobo-draft--components--switch"
 >
+  <div
+    className="text-content"
+  >
+    <br />
+    <small />
+  </div>
   <label
     className="switch"
   >

packages/app/obojobo-document-engine/__tests__/common/components/modal/__snapshots__/simple-dialog.test.js.snap

@@ -76,6 +76,82 @@ exports[`SimpleDialog SimpleDialog cancelOk 1`] = `
 </div>
 `;
 
+exports[`SimpleDialog SimpleDialog cancelOrCustomYes 1`] = `
+<div
+  className="obojobo-draft--components--modal--simple-dialog"
+>
+  <div
+    className="obojobo-draft--components--modal--dialog "
+    style={null}
+  >
+    <div
+      aria-labelledby="obojobo-draft--components--modal--modal--content"
+      className="obojobo-draft--components--modal--modal"
+      role="dialog"
+      tabIndex="-1"
+    >
+      <input
+        aria-label="Start of dialog"
+        className="first-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+      <div
+        className="content"
+        id="obojobo-draft--components--modal--modal--content"
+      >
+        <div
+          className="dialog-content"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
+        >
+          Content
+        </div>
+        <div
+          className="controls"
+        >
+          <div
+            className="obojobo-draft--components--button alt-action is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              Cancel
+            </button>
+          </div>
+          <div
+            className="obojobo-draft--components--button is-not-dangerous align-center"
+            contentEditable={false}
+          >
+            <button
+              className="button"
+              contentEditable={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-label="End of dialog"
+        className="last-tab"
+        onFocus={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`SimpleDialog SimpleDialog no type 1`] = `
 <div
   className="obojobo-draft--components--modal--simple-dialog"

packages/app/obojobo-document-engine/__tests__/common/components/modal/simple-dialog.test.js

@@ -52,6 +52,17 @@ describe('SimpleDialog', () => {
 		expect(tree).toMatchSnapshot()
 	})
 
+	test('SimpleDialog cancelOrCustomYes', () => {
+		const component = renderer.create(
+			<SimpleDialog cancelOrCustomYes onCancel={jest.fn()} onConfirm={jest.fn()}>
+				Content
+			</SimpleDialog>
+		)
+		const tree = component.toJSON()
+
+		expect(tree).toMatchSnapshot()
+	})
+
 	test('SimpleDialog no type', () => {
 		const component = renderer.create(
 			<SimpleDialog onCancel={jest.fn()} onConfirm={jest.fn()}>

packages/app/obojobo-document-engine/__tests__/common/components/switch.test.js

@@ -25,6 +25,15 @@ describe('Switch', () => {
 		expect(checkbox.children).toEqual(['mocktitle'])
 	})
 
+	test('Switch renders correctly with a description', () => {
+		const testRenderer = TestRenderer.create(
+			<Switch title="mocktitle" description="mockDescription" />
+		)
+		const testInstance = testRenderer.root
+		const small = testInstance.findByType('small')
+		expect(small.children).toEqual(['mockDescription'])
+	})
+
 	test('Switch renders when unchecked', () => {
 		const testRenderer = TestRenderer.create(<Switch checked={false} />)
 		const testInstance = testRenderer.root

packages/app/obojobo-document-engine/src/scripts/common/components/modal/simple-dialog.js

@@ -54,6 +54,19 @@ class SimpleDialog extends React.Component {
 					default: true
 				}
 			]
+		} else if (this.props.cancelOrCustomYes) {
+			buttons = [
+				{
+					value: 'Cancel',
+					altAction: true,
+					onClick: this.props.onCancel
+				},
+				{
+					value: this.props.customYes || 'OK',
+					onClick: this.props.onConfirm,
+					default: true
+				}
+			]
 		} else {
 			buttons = [
 				{

packages/app/obojobo-document-engine/src/scripts/common/components/switch.js

@@ -4,9 +4,13 @@ import './switch.scss'
 /* istanbul ignore next */
 const noOp = () => {}
 
-const SwitchCore = ({ checked = false, onChange = noOp, title, forwardedRef }) => (
+const SwitchCore = ({ checked = false, onChange = noOp, title, description, forwardedRef }) => (
 	<div className="obojobo-draft--components--switch">
-		{title ? <span contentEditable={false}>{title}</span> : null}
+		<div className="text-content">
+			{title ? <span contentEditable={false}>{title}</span> : null}
+			<br />
+			<small>{description && description}</small>
+		</div>
 		<label className="switch">
 			<input
 				className="switch-slider"

packages/app/obojobo-document-engine/src/scripts/common/components/switch.scss

@@ -2,7 +2,14 @@
 
 .obojobo-draft--components--switch {
 	position: relative;
-	height: 1.3em;
+
+	//@HACK: Fixes the .info dialog being blurry sometimes in CHROME
+	transform: translate3d(0, 0, 0);
+	z-index: 1;
+
+	.text-content {
+		width: 85%;
+	}
 
 	> span {
 		padding-right: 0.5em;
@@ -11,6 +18,7 @@
 
 	.switch {
 		position: absolute;
+		right: 0;
 		display: inline-block;
 		width: 2.6em;
 		height: 1em;
@@ -86,4 +94,10 @@
 			left: 37%;
 		}
 	}
+
+	small {
+		font-size: 0.8em;
+		color: $color-neutral-text;
+		margin-top: 0;
+	}
 }

packages/app/obojobo-document-engine/src/scss/_includes.scss

@@ -27,6 +27,8 @@ $color-reward: #ffe65d;
 $color-reward-text: #947d00;
 $color-obojobo-blue: #0d4fa7;
 $color-preview: #af1b5c;
+$color-neutral: #f3f3f3;
+$color-neutral-text: #b4b3b4;
 
 $box-shadow-focus: 0 0 3px 3px $color-browser-focus;
 $box-shadow-overlay: 0 2px 2px $color-shadow;