@comicrelief/storybook 1.34.2 → 2.0.1

package/src/sass/themes/donate/components/form/_form.scss

@@ -0,0 +1,287 @@
+// Form Layout
+.form__step {
+	position: relative;
+	margin: 0 auto;
+}
+
+// Layout
+.form__row {
+	margin: 0 auto;
+	padding: 15px 0;
+	background-color: transparent;
+
+	&:after {
+		@include clearfix;
+	}
+
+	&.form__row--your--address {
+		.form__field--postcode {
+			display: flex;
+			flex-direction: column;
+
+			.form__field--text {
+				width: 100%;
+			}
+
+			.form__btn {
+				width: 100%;
+			}
+		}
+	}
+}
+
+.form__fieldset,
+.card-list {
+	float: none;
+	margin: 0 auto;
+	padding: 0;
+	width: 100%;
+}
+
+.form__fieldset {
+	h1 {
+		text-transform: inherit;
+		color: $colour--white;
+	}
+}
+
+.form__field--wrapper {
+	margin-bottom: 3%;
+	width: 100%;
+}
+
+// cr-donate specific form styling overrides
+form,
+form a,
+input {
+	font-family: $body-font;
+	color: $colour--white;
+	@include font-size($field-font-size);
+	font-weight: 500;
+}
+
+form a {
+	color: $colour--white;
+}
+
+input[type="email"],
+input[type="number"],
+input[type="text"],
+input[type="tel"],
+select,
+textarea {
+	border: 1px solid $colour--field-border;
+	@include placeholder($colour--placeholder, 18px, $body-font, 22px, 700, 20px, 24px);
+}
+
+
+// hide and show when js is enabled
+.js-enabled {
+	.form__row--section,
+	#giftaid-text-percentage {
+		display: none;
+		&.show {
+			display: block;
+		}
+	}
+}
+// when js is not enabled the (functioning) form fields should be visible
+.no-js {
+	.form__next,
+	.form__back,
+	#giftaid-text-calculated,
+	#comicrelief_payinbundle_payment_paypal,
+	.search-box-button,
+	.form__subcopy--bfpo,
+	.form__address-detail-toggle,
+	#address-detail {
+		display: none;
+	}
+	.giftaid-text--percentage {
+		display: block;
+	}
+}
+
+// Remove large space between billing address row and keep in touch row
+.form__row--your-detail,
+.form__row--billing-detail {
+	padding-bottom: 0;
+}
+.form__row--payment-buttons,
+.form__row--billing-detail,
+.form__row--keep-touch {
+	padding-top: 0;
+}
+
+// Back button
+.form__back {
+	display: block;
+	text-indent: -9999px;
+
+	&:before {
+		content: "";
+		position: absolute;
+		top: -6px;
+		left: 0;
+		width: 0.5em;
+		height: 0.5em;
+		background: transparent url($image-path + "CR__Arrow_L--white.svg") 0 0/30px 30px no-repeat;
+	  width: 30px;
+	  height: 30px;
+	}
+
+	@include breakpoint($screen-md){
+		text-indent: 0;
+		position: relative;
+		margin-bottom: 30px;
+		padding-left: 45px;
+		font-weight: bold;
+		text-align: left;
+		cursor: pointer;
+	}
+}
+
+// text styling
+h2,
+h3 {
+	margin: 15px 0 30px;
+	font-family: $font-bold;
+}
+h1,
+h2 {
+	@include font-size($h3-font-size);
+}
+.form__row--giftaid p {
+	text-align: center;
+	@include font-size($field-font-size);
+	font-weight: 500;
+}
+.form__subcopy--bfpo {
+	font-size: 16px;
+}
+
+// buttons
+button,
+button.payment-button {
+	@extend .btn;
+	@extend .btn--fixed-width;
+}
+
+button.payment-button {
+	border-radius: 5px;
+	height: 55px;
+	padding: 18px 30px;
+}
+
+// Apple Pay button only shows when supported
+#comicrelief_payinbundle_payment_apple_pay {
+	display: none;
+	// fallback if apple pay styling doesn't come through
+	// making sure this doesn't stick out if apple styling does come through
+	height: 55px;
+	@extend button, .cta;
+	// apple pay styling
+	&:after {
+		margin-top: -1px;
+		height: 55px;
+		-webkit-appearance: -apple-pay-button;
+		-apple-pay-button-style: white;
+	}
+}
+// PayPal fallback styling
+#comicrelief_payinbundle_payment_paypal:after {
+	border-radius: 30px;
+	background-color: $colour-grey;
+	background-image: url($image-path+"paypal.svg");
+}
+
+.form__row--giftaid {
+	.giftaid-title {
+    width: 220px;
+    margin: 15px auto;
+		height: 105px;
+		background: url($image-path+"gift_aid_logo--white.png") no-repeat center;
+		background-size: contain;
+
+		@include breakpoint($screen-lg) {
+    	margin: 15px auto 15px;
+		}
+	}
+}
+
+label, legend, .form__field-label {
+	@include font-size($field-label-font-size);
+	margin-bottom: 10px;
+	font-weight: 700;
+}
+
+#field-label--giftaid {
+	font-weight: 500;
+}
+
+.form__field-additional-text {
+	font-family: $montserrat;
+	@include font-size($form-error-font-size);
+	font-weight: 500;
+
+	a {
+		font-family: inherit;
+		font-size: inherit;
+		line-height: inherit;
+		font-weight: inherit;
+		border-bottom: 1px solid $colour--white;
+	}
+}
+
+.form-error {
+	padding: 6px;
+  width: 100%;
+	background-color: $colour--error-msg-bg;
+	@include border-radius(8px);
+	@include font-size($form-error-font-size);
+  font-weight: 500;
+
+  &:before {
+ 		width: 16px;
+    height: 16px;
+  }
+}
+
+#field-wrapper--accountHolder {
+	.form__field-wrapper--checkbox {
+		min-height: 45px;
+	}
+	.form__field.form__field--checkbox {
+		height: 40px;
+    width: 40px;
+		top: 0;
+		left: 0;
+
+		& + span {
+			top: 0;
+			left: 0;
+		}
+
+		@include breakpoint($screen-md) {
+			top: 3px;
+			& + span {
+				top: 3px;
+			}
+		}
+	}
+	#field-label--accountHolder {
+		padding-left: 5px;
+
+		@include breakpoint($screen-md) {
+			padding-left: 10px;
+		}
+	}
+}
+
+#address-detail {
+	.form__fieldset.form__field--wrapper {
+		label.form__field-label span {
+			font-weight: 500 !important;
+		}
+	}
+}

package/src/sass/themes/donate/components/full-height-single-image-single-copy/_full-height-single-image-single-copy.scss

@@ -0,0 +1,234 @@
+main .paragraph--full-height-single-image-single-copy {
+	padding: 0;
+
+	fieldset#giving_type_selector {
+		.form__giving-type {
+			.form__field--wrapper {
+				@include breakpoint($screen-md) {
+					&:first-child {
+						@include border-radius(8px 0 0 8px);
+						label {
+							@include border-radius(8px 0 0 8px);
+						}
+					}
+					&:last-child {
+						@include border-radius(0 8px 8px 0);
+						label {
+							@include border-radius(0 8px 8px 0);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.fhsisc {
+		&__image-wrapper {
+
+			img {
+				min-height: auto;
+				height: auto;
+				max-height: none;
+			}
+		}
+
+		&__text-wrapper {
+			padding: 20px 5vw;
+			justify-content: inherit;
+
+			.gift-aid-form {
+				max-width: 750px;
+				margin: 0 auto;
+			}
+
+			&.inner-content.failure {
+				padding: 30px 5vw;
+			}
+
+			#field-input--giftaid {
+				height: 40px;
+				width: 40px;
+			}
+
+			input,
+			select {
+				height: 50px;
+				border: 1px solid #999999;
+				background-color: $colour-white;
+				color: $colour-deep-violet;
+				padding: 8px 50px 8px 10px;
+				@include font-size($field-font-size);
+				font-weight: 700;
+			}
+
+			// Checkbox label
+			label.form__field-label {
+				text-transform: inherit;
+				font-weight: 700;
+				@include font-size($field-font-size);
+				height: auto;
+			}
+
+			// Address
+			#postcode_button {
+				height: 50px;
+				@extend button, .cta-2;
+				margin: 30px 0 0 !important;
+				display: block;
+				font-size: 16px;
+			}
+
+			// Checkbox
+			.form__field-wrapper--checkbox input[type='checkbox'] {
+				top: 26px;
+    		left: 10px;
+
+				& + span {
+					@include border-radius(4px);
+					width: 40px;
+					height: 40px;
+					top: 26px;
+    			left: 10px;
+				}
+
+				&:checked + span {
+					background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTkyIDE5MiIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0iIiBzdHJva2UtZGFzaG9mZnNldD0iMCIgZm9udC1mYW1pbHk9Im5vbmUiIGZvbnQtd2VpZ2h0PSJub25lIiBmb250LXNpemU9Im5vbmUiIHRleHQtYW5jaG9yPSJub25lIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6IG5vcm1hbCI+PHBhdGggZD0iTTAsMTkydi0xOTJoMTkydjE5MnoiIGZpbGw9Im5vbmUiLz48ZyBmaWxsPSIjMzQ5OGRiIj48ZyBpZD0ic3VyZmFjZTEiPjxwYXRoIGQ9Ik0xNjYuNjQ0MjMsMzQuOTMyNjlsLTEzLjI0MDM4LC05Yy0zLjY2MzQ2LC0yLjQ4MDc3IC04LjY4MjcsLTEuNTI4ODQgLTExLjEzNDYyLDIuMTA1NzdsLTY0LjkwMzg0LDk1LjcxMTU0bC0yOS44MjY5MywtMjkuODI2OTNjLTMuMTE1MzgsLTMuMTE1MzggLTguMTkyMzEsLTMuMTE1MzggLTExLjMwNzY5LDBsLTExLjMzNjU0LDExLjMzNjU0Yy0zLjExNTM4LDMuMTE1MzggLTMuMTE1MzgsOC4xOTIzMSAwLDExLjMzNjU0bDQ1Ljg2NTM4LDQ1Ljg2NTM4YzIuNTY3MzEsMi41NjczMSA2LjYwNTc3LDQuNTI4ODQgMTAuMjQwMzksNC41Mjg4NGMzLjYzNDYyLDAgNy4yOTgwOCwtMi4yNzg4NCA5LjY2MzQ2LC01LjcxMTUzbDc4LjExNTM4LC0xMTUuMjQwMzljMi40ODA3NywtMy42MzQ2MSAxLjUyODg0LC04LjYyNSAtMi4xMzQ2MiwtMTEuMTA1Nzd6Ii8+PC9nPjwvZz48L2c+PC9zdmc+Cg==)
+						no-repeat center;
+					background-color: $colour-white;
+					background-size: 75% 75%;
+				}
+			}
+
+			// Marketing pref
+			.has-validation-callback.marketing-pref-form
+				.form__checkbox.form__checkbox--inline.form__checkbox--inline-2-horizontal {
+				width: 100%;
+			}
+
+			.form__step .form__fieldset {
+				.text--body-small {
+					font-weight: 400;
+					font-size: 16px;
+				}
+
+				.form__field--error-outline#field-input--amount {
+					border-color: $colour-red;
+				}
+
+				/* Giftaid form */
+				.form__field-wrapper--checkbox.form__field-wrapper--background {
+					padding: 18px;
+				}
+
+				#field-wrapper--giftaid .form__field-additional-text div {
+					font-size: 15px;
+					line-height: 24px;
+				}
+			}
+
+			// Donation from
+			#field-input--amount,
+			#comicrelief_payinbundle_payment_currency {
+				height: 50px;
+			}
+
+			#field-input--amount {
+				@include breakpoint($screen-lg) {
+					outline-offset: -3px;
+				}
+			}
+
+			#comicrelief_payinbundle_payment_currency {
+				@include border-radius(8px 0 0 8px);
+			}
+
+			.has-validation-callback.marketing-pref-form {
+				.form__row.form__row--marketing-consent {
+					margin-bottom: 0;
+				}
+
+				.form__step--marketing-pref--bottom {
+					margin-top: 5px;
+
+					button {
+						margin-bottom: 1%;
+						width: 100%;
+						@include breakpoint($screen-lg) {
+							width: auto;
+						}
+					}
+				}
+
+				.form__field--wrapper.form__field-wrapper--background {
+					padding: 8px 16px;
+
+					#field-wrapper {
+						&--Email,
+						&--Phone,
+						&--SMS,
+						&--Post {
+							display: flex;
+							margin-top: 3%;
+						}
+					}
+				}
+			}
+		}
+
+		.fhsisc__thank-you-text {
+			padding: 0;
+		}
+	}
+
+	// Breakpoint
+	@include breakpoint($screen-md) {
+		.fhsisc {
+			&__text-wrapper {
+				padding: 30px 5vw;
+
+				form {
+					.form__row {
+						.form__fieldset {
+							.form__field--postcode {
+								display: flex;
+
+								.form__btn {
+									width: auto;
+
+									#postcode_button {
+										width: auto;
+										letter-spacing: 0;
+									}
+								}
+
+								+ .form__field--wrapper {
+									text-align: center;
+								}
+							}
+
+							h1.form__subtitle.text--subtitle--small {
+								text-transform: inherit;
+							}
+
+							fieldset#giving_type_selector {
+								.form__giving-type {
+									display: flex;
+									max-height: 80px;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+// Target 'manual address' link
+#field-wrapper--postcode + .form__field--wrapper {
+	margin: 0 auto 10px;
+
+	&#field-wrapper--addressSelect {
+		text-align: left;
+	}
+}

package/src/sass/themes/donate/components/giving-type-selector/_giving-type-selector.scss

@@ -0,0 +1,120 @@
+#giving_type_selector {
+  margin: 2em 0;
+ .form__field--wrapper {
+   position: relative;
+   margin-bottom: 0;
+   display: inline-block;
+   width: 50%;
+   cursor: pointer;
+   z-index: 3;
+
+   &.selected {
+    z-index:4;
+  }
+
+   &:hover {
+    + .label {
+      background-color: $colour--btn-hover;
+      color: $colour--white;
+    }
+   }
+
+   &:after {
+     @include clearfix();
+   }
+
+   input {
+     position: absolute;
+     top: 0;
+     left: 0;
+     width: 100%;
+     height: 100%;
+     opacity: 0;
+     cursor: pointer;
+
+      + label {
+        background-color: $colour--btn-light;
+        box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 16px;
+        color: $colour--black;
+        
+        span {
+          color: inherit;
+          @include breakpoint($screen-md) {
+            display: block;
+          }
+          @include breakpoint($screen-lg) {
+            display: inline;
+          }
+        }
+      }
+
+      &.selected,
+      &:checked {
+        & + label {
+          color: $colour--white;
+        }
+      }
+      
+      &:hover,
+      &:focus {
+          & + label { 
+            background-color: $colour--btn-hover;
+            color: $colour--white;
+          }
+        };
+
+        &:active {
+          & + label {
+            box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 16px;
+          }
+        }
+      
+      &:checked {
+        &,
+        &:focus,
+        &:hover,
+        &:active {
+          & + label {
+            background-color: $colour--btn-selected;
+            box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 16px;
+          }
+        }
+      }
+   }
+
+   label {
+    font-size: 16px;
+    text-transform: inherit;
+     margin: 0;
+     padding: 14px 0;
+     width: 100%;
+     height: 100%;
+     line-height: 18px;
+     font-weight: 700;
+     text-align: center;
+     cursor: pointer;
+
+     @include breakpoint($screen-sm) {
+       span:before {
+         content: "\A";
+         white-space: pre;
+       }
+     }
+
+     @include breakpoint($screen-md) {
+       span:before {
+         display: none;
+       }
+     }
+   }
+   
+   input:focus + label {
+     // IE, FF etc.
+     outline: 1px dotted black;
+     // Chrome etc.
+     outline: -webkit-focus-ring-color auto 5px;
+     outline-offset: 0px;
+
+   }
+ }
+}

package/src/sass/themes/donate/components/header/_header.scss

@@ -0,0 +1,41 @@
+header[role=banner] {
+
+  &.header {
+    min-height: 50px;
+    padding: 9px 0;
+    border-width: 2px;
+  
+    @include breakpoint($screen-md) {
+      height: 109px;
+      padding: 14px 0;
+    }
+
+    .header__inner-wrapper {
+      cursor: auto;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+
+.block-branding {
+
+  .site-logo {
+    float: none;
+    min-width: auto;
+    height: auto;
+    width: 50px;
+    margin:0 auto;
+    z-index: auto;
+    overflow: visible;
+
+    @include breakpoint($screen-md) {
+      width: 80px;
+    }
+
+    img {
+      max-width:100%;
+      display: block;
+    }
+  }
+}