Merge pull request #81 from Financial-Times/origami-major-cascade

Origami major cascade
Financial-Times · Nov 28, 2019 · 4328fea · 4328fea
2 parents 6af5a64 + a10dd21
commit 4328fea
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 40 deletions.
diff --git a/bower.json b/bower.json
@@ -11,11 +11,13 @@
   ],
   "main": "index.js",
   "dependencies": {
-    "n-ui-foundations": "^3.0.0",
-    "o-overlay": "^2.7.5",
-    "o-buttons": "^5.11.6",
-    "o-forms": "^6.0.0",
-    "o-loading": "^3.0.0",
-    "o-typography": "^5.9.0"
+    "o-buttons": "^6.0.0",
+    "o-forms": "^8.0.0",
+    "o-loading": "^4.0.0",
+    "o-overlay": "^3.0.0",
+    "o-typography": "^6.0.0"
+  },
+  "devDependencies": {
+    "n-ui-foundations": "4.0.0-beta.2"
   }
 }
diff --git a/demos/src/demo.scss b/demos/src/demo.scss
@@ -1,2 +1,4 @@
+$system-code: n-feedback !default;
+
 @import 'n-ui-foundations/main';
 @import 'n-feedback/main'
diff --git a/index.js b/index.js
@@ -1,4 +1,4 @@
-const Overlay = require('o-overlay');
+const Overlay = require('o-overlay').default;
 const surveyBuilder = require('./src/survey-builder');
 const postResponse = require('./src/post-response');
 const getAdditionalInfo = require('./src/get-additional-info');

diff --git a/main.scss b/main.scss
@@ -1,13 +1,19 @@
 @import 'o-buttons/main';
 @import 'o-forms/main';
 @import 'o-overlay/main';
-@import "o-icons/main";
-@import "o-colors/main";
+@import 'o-icons/main';
+@import 'o-colors/main';
 @import 'o-typography/main';
 @import 'o-loading/main';
 
-@include oFormsBaseFeatures();
-@include oFormsRadioCheckboxFeatures();
+@include oForms($opts: (
+	'elements': (
+		'text-area',
+		'radio-round'
+	)
+));
+
+@include oOverlay();
 
 @mixin centerForm {
 	max-width: 380px;
@@ -27,13 +33,13 @@
 			bottom: 200px;
 			margin-right: -39px;
 			padding-top: 2px;
-			color: oColorsGetPaletteColor('white');
-			background-color: oColorsGetPaletteColor('teal');
-			border: 1px solid oColorsGetPaletteColor('teal');
+			color: oColorsByName('white');
+			background-color: oColorsByName('teal');
+			border: 1px solid oColorsByName('teal');
 			// Forcing GPU acceleration to get the button working properly on IPad
 			// caused by a bug using fixed positioning along with safari web layer in App
 			transform: translate3d(0,0,0) rotate(-90deg);
-			@include oTypographySansBold(0);
+			@include oTypographySans($scale: 0, $weight: 'semibold');
 
 			span {
 				display: block;
@@ -71,13 +77,15 @@
 
 	.n-feedback__container {
 		display: block;
-		background: oColorsGetPaletteColor('white');
+		background: oColorsByName('white');
 		text-align: center;
 		padding: 1em;
 		margin: 0 10px;
 
 		.n-feedback__survey-trigger {
-			@include oButtons(default, primary);
+			@include oButtonsContent($opts: (
+				'type': 'primary'
+			));
 
 			span {
 				text-transform: lowercase;
@@ -91,8 +99,8 @@
 	}
 
 	.n-feedback__desktop__prompt {
-		@include oTypographySansBold(0);
-		margin-bottom: oTypographySpacingSize($units: 3);
+		@include oTypographySans($weight: 'semibold');
+		margin-bottom: oSpacingByName('s3');
 	}
 
 	.n-feedback__center-block {
@@ -112,9 +120,15 @@
 .feedback-overlay .o-overlay__content {
 	@include oTypographySans(0);
 	height: 100%;
+	// o-overlay v2.7.11 styles .o-overlay__content with `padding: 20px;`,
+	// o-overlay v3.0.0 styles .o-overlay__content with `oSpacingByName('s4')`, which evaluates to 16px,
+	// and so needs to be overwritten with below line to maintain padding of 20px.
+	padding: oSpacingByIncrement(5);
 
 	.n-feedback__primary-button {
-		@include oButtons(default, primary);
+		@include oButtonsContent($opts: (
+			'type': 'primary'
+		));
 	}
 
 	// Visually hide the feedback buttons (i.e. submit/back) when they are inactive.
@@ -133,6 +147,10 @@
 		}
 	}
 
+	.n-feedback__survey__wrapper-form {
+		margin: 0;
+	}
+
 	.n-feedback__question-header {
 		@include oTypographySans(0);
 		margin: 0 0 1em 0;
@@ -143,15 +161,25 @@
 	}
 
 	.n-feedback__question-text-entry {
-		textarea {
-			min-height: 126px;
-			resize: none;
+		padding-left: 10px;
+		padding-right: 10px;
+
+		.o-forms-field {
+			margin-bottom: 20px;
+			display: block;
+
+			textarea {
+				width: 100%;
+				min-height: 126px;
+				resize: none;
+				margin-top: 12px;
+			}
 		}
 	}
 
 	.n-feedback__question-radio {
-		border-top: 1px solid oColorsGetPaletteColor('slate');
-		border-bottom: 1px solid oColorsGetPaletteColor('slate');
+		border-top: 1px solid oColorsByName('slate');
+		border-bottom: 1px solid oColorsByName('slate');
 		border-left: none;
 		border-right: none;
 		padding: 1em 0 0.4em 0;
@@ -161,11 +189,8 @@
 		}
 
 		.n-feedback__question-radio__container {
-			@include oFormsGroup();
 			display: flex;
-			margin-top: 0;
-			margin-bottom: 0;
-			padding: 0 0 10px 10px;
+			padding: 0 10px 10px;
 
 			@include oGridRespondTo($until: M){
 				@include centerForm;
@@ -175,6 +200,14 @@
 		.n-feedback__question-radio__choice-container {
 			flex-grow: 1;
 			text-align: center;
+
+			.o-forms-field {
+				margin-bottom: 0;
+
+				.o-forms-input {
+					margin-top: 0;
+				}
+			}
 		}
 
 		label {
@@ -210,7 +243,7 @@
 
 .n-feedback__survey-block-finished {
 	.n-feedback__question-header::before {
-		@include oIconsGetIcon('tick', oColorsGetPaletteColor('black'), 48);
+		@include oIconsContent('tick', oColorsByName('black'), $size: 48);
 		content: '';
 		vertical-align: middle;
 	}

diff --git a/src/survey-builder.js b/src/survey-builder.js
@@ -52,10 +52,14 @@ function buildMultipleChoiceQuestion (question) {
 
 		html.push(
 			`<div class="n-feedback__question-radio__choice-container">
-				<input type="radio" id="${fieldId}" class="o-forms__radio" name="${question.questionId}" value="${choiceId}" />
-				<label for="${fieldId}" class="o-forms__label ${textVisibility}">
-					<span class="n-feedback__question-radio-text">${choice.choiceText}</span>
-				</label>
+				<div class="o-forms-field">
+					<div class="o-forms-input o-forms-input--radio-round o-forms-input--inline">
+						<input type="radio" id="${fieldId}" name="${question.questionId}" value="${choiceId}" />
+						<label for="${fieldId}" class="o-forms-input__label ${textVisibility}">
+							<span class="n-feedback__question-radio-text">${choice.choiceText}</span>
+						</label>
+					</div>
+				</div>
 			</div>`
 		);
 	});
@@ -68,10 +72,20 @@ function buildTextEntryQuestion (question) {
 	const fieldId = `text-${question.questionId}-${~~(Math.random()*0xffff)}`;
 
 	const html =
-		`<div class="n-feedback__center-block"><p class="n-feedback__question-text-entry o-forms">
-			<label for="${fieldId}" class="o-forms__label">${question.questionText}</label>
-			<textarea id="${fieldId}" name="${question.questionId}" class="o-forms__textarea"></textarea>
-		</p></div>`;
+		`<div class="n-feedback__center-block">
+			<div class="n-feedback__question-text-entry o-forms">
+				<div class="o-forms-field">
+					<label for="${fieldId}" class="o-forms-label">
+						<span class="o-forms-title">
+							<span class="o-forms-title__main">${question.questionText}</span>
+						</span>
+						<span class="o-forms-input o-forms-input--textarea">
+							<textarea id="${fieldId}" name="${question.questionId}"></textarea>
+						</span>
+					</label>
+				</div>
+			</div>
+		</div>`;
 
 	return html;
 }

diff --git a/test/survey-builder.spec.js b/test/survey-builder.spec.js
@@ -41,8 +41,8 @@ describe('surveyBuilder()', () => {
 		const document = getFixtureDOM('only-textarea.json');
 
 		it('should be rendered', () => {
-			expect(document.querySelector('.n-feedback__survey-block p.n-feedback__question-text-entry label.o-forms__label')).to.exist;
-			expect(document.querySelector('.n-feedback__survey-block p.n-feedback__question-text-entry textarea.o-forms__textarea')).to.exist;
+			expect(document.querySelector('.n-feedback__survey-block div.n-feedback__question-text-entry.o-forms .o-forms-field label.o-forms-label span.o-forms-title span.o-forms-title__main')).to.exist;
+			expect(document.querySelector('.n-feedback__survey-block div.n-feedback__question-text-entry.o-forms .o-forms-field label.o-forms-label span.o-forms-input.o-forms-input--textarea textarea')).to.exist;
 		});
 	});