@comicrelief/storybook 1.34.2 → 2.0.1

package/src/sass/base/components/form/_standard-form.scss

@@ -0,0 +1,361 @@
+
+/*
+/* = Generic form styles
+*/
+
+label,
+legend,
+.form__field-label{
+  display: block;
+  padding-top: 10px;
+  margin-bottom: 12px;
+  font-family: $body-font;
+  @include font-size($p-font-size);
+}
+
+fieldset {
+  padding: 0;
+  border-width: 0;
+}
+
+input[type="email"],
+input[type="number"],
+input[type="date"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+  textarea {
+  height: 50px;
+  padding-left:12px;
+  background-color: $colour-white;
+  border: 1px solid $colour-scorpion-grey;
+  border-radius: 0;
+  width: 100%;
+  font-family: $body-font;
+  box-shadow: none;
+  box-sizing: border-box;
+  appearance: none;
+  -webkit-appearance: none;
+  @include placeholder($colour-scorpion-grey, 18px , $font-regular);
+  @include font-size($p-font-size);
+}
+
+textarea {
+  min-height: 65px;
+  
+
+  @include breakpoint($screen-md) {
+    max-width: 100%;
+    height: 96px;
+  }
+}
+
+.form__textarea {
+  textarea {
+    padding: 6px 12px;
+  }
+}
+
+select {
+  position: relative;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  border-radius: 0px;
+  border: 1px solid $colour-scorpion-grey;
+  padding: 12px 50px 8px 10px;
+  width: 100%;
+  height: 50px;
+  @include font-size($p-font-size);
+  font-weight: 300;
+  font-family: $body-font;
+  background: transparent url($image-path + "CR__Chevron_D.svg") calc(100% - 15px) 11px/26px 26px no-repeat;
+  cursor: pointer;
+  margin-bottom: 0;
+}
+
+// hide native IE arrow
+select::-ms-expand {
+  display: none;
+}
+
+select:focus {
+  border: 1px solid $colour-scorpion-grey;
+  box-shadow: border-box;
+}
+/* Remove visually the number spinner */
+/* For Firefox */
+input[type='number'] {
+  -moz-appearance:textfield;
+}
+/* Webkit browsers like Safari and Chrome */
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  @extend .btn;
+}
+
+.disabled {
+  @include opacity(0.4);
+
+  input,
+  button {
+    transition: none;
+    cursor: initial;
+  }
+  button:hover,
+  input:hover {
+  background-color: $colour-red;
+  transition: none;
+  }
+}
+
+button:disabled, .disable-button:disabled {
+  background: rgba(0,0,0,0.5);
+  cursor: no-drop;
+
+  &:before {
+    background-image:none;
+  }
+
+  &:hover {
+    opacity: 1;
+    transform: translateY(0);
+    &:before {
+      background-image:none;
+    }
+  }
+}
+
+label {
+  font-family: $font-regular;
+  font-weight: 700;
+}
+
+.form-help-text {
+  @include font-size($p-font-size);
+}
+
+.form__field--wrapper {
+  margin-right: 0;
+  margin-left: 0;
+  margin-bottom: 3%;
+  width: 100%;
+}
+
+.form__fieldset--label {
+  @include font-size($p-font-size);
+  font-family: $body-font;
+  font-weight:bold;
+  margin-bottom: 12px;
+}
+
+/* 
+/* = Form validation 
+*/
+.form-error {
+  position: relative;
+  font-size: 16px;
+  font-family: $body-font;
+  margin-top: 10px;
+  display: inline-block;
+  vertical-align: top;
+  color: $colour-ribbon-red;
+  font-weight: bold;
+
+  &:before {
+    position: relative;
+    content: '';
+    display: inline-block;
+    top:-1px;
+    vertical-align: middle;
+    margin-right: 8px;
+    background: url($image-path + "error-alert-icon.png") left 0/100% no-repeat;
+    width:18px;
+    height:19px;
+  }
+}
+
+.form__field {
+
+  &.form__field--error-outline {
+    border: 1px solid $colour-ribbon-red;
+  }
+}
+
+/*
+/* = checkbox and radio button forms
+*/
+.form__checkbox,
+.form__field-wrapper--checkbox,
+.form__field-wrapper--radio,
+.form__radio {
+  position: relative;
+  padding-top: 5px;
+  @include clearfix;
+
+  &.form__checkbox--inline,
+  &.form__radio--inline {
+    width: span(12);
+    margin-bottom: 0;
+    &.form__checkbox--inline-2-horizontal {
+      display: inline-block;
+      width: span(6) ;
+    }
+  }
+
+  input[type="checkbox"]{
+    z-index: 1;
+    position: absolute;
+    top: 10px;
+    margin: 0;
+    width: 30px;
+    height: 30px;
+    opacity: 0;
+  }
+
+  input[type="checkbox"]:checked + span {
+    background: url($image-path + "checkbox-white-tick.png") center/50% no-repeat;
+    background-size: 100%;
+    background-color: $colour-persian-purple;
+    border: 1px solid transparent;
+  }
+
+  input[type="checkbox"] + span,
+  input[type="radio"] + span, {
+    position: absolute;
+    background-color: $colour-white;
+    top: 5px;
+    left: 0;
+    width: 30px;
+    height: 30px;
+    border: 1px solid $colour-scorpion-grey;
+  }
+
+  input[type="checkbox"]:focus+span {
+    border-color: $colour-scorpion-grey;
+    border-width: 3px;
+  }
+
+  .form__field--sub-field-wrapper label {
+    left: 0;
+  }
+
+  .form__field-label,
+  label.form__checkbox {
+    overflow: visible;
+    position: relative;
+    top: 0;
+    left: 45px;
+    width: calc(100% - 45px);
+    font-size: 18px;
+    font-family: $body-font;
+    word-break: break-word;
+  }
+
+  label.form__field-label,
+  label.form__checkbox {
+    font-weight: normal;
+  }
+}
+
+/* Checkbox with paragraph and label included */
+.form__field-wrapper--checkbox {
+    
+  &.form__checkbox-paragraph {
+
+      .form__checkbox--inline {
+          position: relative;
+          padding-top: 5px;
+          overflow: hidden;
+      }
+  }
+
+  /* Checkbox with background */
+  &.form__field-wrapper--background {
+      background: #F0F0F0;
+      padding: 18px 18px 8px;
+      label {
+        padding-top: 5px;
+      }
+
+      input[type="checkbox"] + span,
+      input[type="checkbox"] {
+        top: 18px;
+        left: 18px;
+      }
+  }
+}
+
+/* 
+/* = Radio button form 
+*/
+.form__radio.form__radio--inline {
+  position: relative;
+  padding-top: 5px;
+  @include clearfix;
+
+  input[type="radio"] {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    margin: 0;
+    width: 30px;
+    height: 30px;
+    opacity: 0;
+    left: 0;
+    right: 0;
+  }
+
+  input[type="radio"] + span {
+    left: 2px;
+    @include border-radius(30px);    
+  }
+
+  input[type="radio"]:checked + span {
+    background-color: $colour-persian-purple;
+    border: 1px solid $colour-persian-purple;
+  }
+
+  input[type="radio"]:checked + span:before {
+    position: absolute;
+    content: '';
+    top: 8px;
+    left: 0;
+    right: 0;
+    background-color: #fff;
+    border-radius:30px;
+    width: 12px;
+    height: 12px;
+    z-index: 1;
+    margin: 0 auto;
+  }
+
+  input[type="radio"]:focus + span:after {
+    position: absolute;
+    content: '';
+    height: 34px;
+    width: 34px;
+    left: -3px;
+    top: -3px;
+    border: 3px solid $colour-scorpion-grey;;
+    border-radius:30px;
+  }
+}
+
+.form__field-wrapper--radio {
+  .form__field-additional-text {
+    margin-bottom: 0;
+    p {
+      margin-left: 45px;
+    }  
+  }
+}

package/src/sass/base/components/form/form.twig

@@ -0,0 +1,146 @@
+<form novalidate>
+	<div id="field-wrapper--standard" class="form__fieldset form__field--wrapper form__field-wrapper--text">
+		<label id="field-label--standard" for="field-input--standard" class="form__field-label required">Input required with paragraph text and hint</label>
+		<p class="form-help-text">This is support text, for example information on how long the password should be</p>
+		<input 
+			type="text" 
+			id="field-input--standard" 
+			name="standard" 
+			class="form__field form__field--text" 
+			required="required" 
+			placeholder="This is hint text" 
+			pattern="" 
+			aria-describedby="field-label--standard"
+		>
+	</div>
+	<div id="field-wrapper--standard-error" class="form__fieldset form__field--wrapper form__field-wrapper--text">
+		<label id="field-label--firstname" for="field-input--firstname" class="form__field-label required">Input with error mesaage</label>
+		<input 
+			type="text" 
+			id="field-input--standard-error" 
+			name="firstname" 
+			class="form__field form__field--text form__field--error-outline" 
+			required="" 
+			placeholder="Field completed incorrectly" 
+			pattern="" 
+			aria-describedby="field-label--standard"
+		>
+		<div id="field-error--standard-error" class="form__field-error-container form__field-error-container--text" aria-live="assertive" role="status">
+			<span class="form-error">This is an error message</span>
+		</div>
+	</div>
+	<div id="field-wrapper--standard-optional" class="form__fieldset form__field--wrapper form__field-wrapper--text">
+		<label id="field-wrapper--standard-optional" for="field-input--standard" class="form__field-label">Simple input <span>(optional)</span></label>
+		<input 
+			type="text" 
+			id="field-wrapper--standard-optional" 
+			name="standard" 
+			class="form__field form__field--text error-border" 
+			placeholder="" 
+			pattern="" 
+			aria-describedby="field-label--standard"
+		>
+	</div>
+	<div class="form__field--wrapper form__choice form__field--select">
+		<label class="form__field form__field--country form__choice required" for="field-input--select">Dropdown menu</label>
+		<select 
+			id="field-input--select" 
+			name="select-1" 
+			class="form__field form__field--select"
+		> 
+			<option >Please select</option>
+			<option value="GB">United Kingdom</option>
+			<option disabled="disabled">-------------------</option>
+		</select>
+	</div>
+
+	<div class="form__field--wrapper form__choice form__field--select">
+		<label class="form__field form__field--country form__choice required" for="field-input--select">Dropdown menu</label>
+		<select 
+			id="field-input--select" 
+			name="select-2" 
+			class="form__field form__field--country form__field--error-outline"
+		> 
+			<option >Please select</option>
+			<option value="GB">United Kingdom</option>
+			<option disabled="disabled">-------------------</option>
+		</select>
+		</select>
+		<div class="form__field--error" aria-live="assertive" role="status">
+			<span class="form-error">This is a error message</span>
+		</div>
+	</div>
+	<div class="form__field--wrapper form__textarea">
+        <label class="form__texarea required" for="comicrelief_payin_general_permissionEmail require">Long copy/Message field</label>
+        <textarea class="form__field">This is text area</textarea>
+    </div>
+	<div class="form__field--wrapper form__textarea">
+        <label class="form__texarea required" for="comicrelief_payin_general_permissionEmail">Long copy/Message field</label>
+        <textarea class="form__field form__field--error-outline">This is text area</textarea>
+		<div class="form__field--error" aria-live="assertive" role="status">
+			<span class="form-error">This is a error message</span>
+		</div>
+    </div>
+	<div class="form__row form__field--wrapper form__field-wrapper--radio">
+		<p class="form__fieldset--label"> List of radio buttons </p>
+		<div class="form__field--wrapper form__radio form__radio--inline">
+			<label class="form__field-label" for="radio-1">Option 1</label>
+			<input type="radio" id="radio-1" name="radio-group" value="1" checked/>
+			<span></span>
+		</div>
+		<div class="form__field--wrapper form__radio form__radio--inline">
+			<label class="form__field-label" for="radio-2">Option 2</label>
+			<input type="radio" id="radio-2" name="radio-group" value="2" />
+			<span>&nbsp;</span>
+			<div class="form__fieldset form__field--wrapper form__field-additional-text">
+			 <div>
+			 	<p>Here's some additional text </p>
+			 	</div>
+			</div>
+		</div>
+	</div>
+	<div class="form__row form__field--wrapper form__field-wrapper--checkbox">
+		<p class="form__fieldset--label"> List of checkboxes </p>
+		<div class="form__field--wrapper form__checkbox form__checkbox--inline">
+			<label class="form__field-label" for="checkbox-1">Option 1</label>
+			<input type="checkbox" id="checkbox-1" name="group-checkbox" value="1" checked />
+			<span></span>
+		</div>
+		<div class="form__field--wrapper form__checkbox form__checkbox--inline">
+			<label class="form__field-label" for="checkbox-2">Option 2</label>
+			<input type="checkbox" id="checkbx-2" name="group-checkbox" value="2" />
+			<span></span>
+		</div>
+	</div>
+	<div class="form__row form__field--wrapper form__field-wrapper--checkbox">
+		<p class="form__fieldset--label"> List of 2 checkboxes horizontally inline</p>
+		<div class="form__field--wrapper form__checkbox form__checkbox--inline form__checkbox--inline-2-horizontal">
+			<label class="form__field-label" for="checkbox-1">Option 1</label>
+			<input type="checkbox" id="checkbox-1" name="group-checkbox" value="1" checked />
+			<span></span>
+		</div>
+		<div class="form__field--wrapper form__checkbox form__checkbox--inline form__checkbox--inline-2-horizontal">
+			<label class="form__field-label" for="checkbox-2">Option 2</label>
+			<input type="checkbox" id="checkbx-2" name="group-checkbox" value="2" />
+			<span></span>
+		</div>
+	</div>
+	<div class="form__field--wrapper form__field-wrapper--checkbox form__checkbox-paragraph">
+		<p class="form__fieldset--label">Single checkbox with paragraph text (optional)</p>
+		<p>This block also reiterates that we don’t use asterisks but the (optional) indication for fields that are not mandatory.</p>
+		<div class="form__checkbox--inline">
+			<label class="form__field-label" for="singlecheckbox">Option 1</label>
+			<input type="checkbox" id="singlecheckbox" name="singlecheckbox" value="1" />
+			<span></span>
+		</div>
+    </div>
+    <div class="form__field--wrapper form__field-wrapper--checkbox form__field-wrapper--background">
+        <div class="form__checkbox--inline">
+            <label class="form__field-label" for="singlecheckbox1">Single checkbox with background colour</label>
+            <input type="checkbox" id="singlecheckbox1" name="singlecheckbox1" value="2" />
+            <span></span>
+        </div>
+    </div>
+</div>
+
+</form>

package/src/sass/base/components/fundraising-target/_fundraising-target.scss

@@ -0,0 +1,99 @@
+
+.userFrTarget {
+  @include clearfix();
+
+  .form__subcopy {
+    @include font-size($p-xsmall-font-size);
+  }
+  .pounds-typography {
+    font-family: $font-bold;
+    font-size: 55px;
+    color: $colour-blue;
+    position: relative;
+    top: 13px;
+  }
+  input {
+    width: 123px;
+    margin-left: 10px;
+  }
+  .amount,
+  .copy {
+    float: left;
+    margin-top: 30px;
+  }
+  .amount {
+    @include breakpoint($screen-md) {
+      width: 48%;
+    }
+  }
+  .copy {
+    position: relative;
+    min-height: 100px;
+
+    @include breakpoint($screen-md) {
+      width: 52%;
+    }
+  }
+  .digit {
+    position: absolute;
+    width: 35%;
+    height: 100%;
+    text-align: center;
+    padding-top: 45px;
+    border-right: 1px solid $colour-blue;
+    
+    @include breakpoint($screen-md) {
+      padding-top: 35px;
+    }
+  }
+  .digit-copy {
+    padding-left: 40%;
+    p {
+      @include font-size($p-xsmall-font-size);
+    }
+  }
+  .digit span {
+    font-size: 55px;
+    margin: 0px 2px;
+    font-family: $font-bold;
+    color: $colour-white;
+    text-shadow:
+      -1px -1px 0px $colour-blue,
+       0px -1px 0px $colour-blue,
+       1px -1px 0px $colour-blue,
+      -1px  0px 0px $colour-blue,
+       1px  0px 0px $colour-blue,
+      -1px  1px 0px $colour-blue,
+       0px  1px 0px $colour-blue,
+       1px  1px 0px $colour-blue,
+      -2px -2px 0px $colour-blue,
+      -1px -2px 0px $colour-blue,
+       0px -2px 0px $colour-blue,
+       1px -2px 0px $colour-blue,
+       2px -2px 0px $colour-blue,
+       2px -1px 0px $colour-blue,
+       2px  0px 0px $colour-blue,
+       2px  1px 0px $colour-blue,
+       2px  2px 0px $colour-blue,
+       1px  2px 0px $colour-blue,
+       0px  2px 0px $colour-blue,
+      -1px  2px 0px $colour-blue,
+      -2px  2px 0px $colour-blue,
+      -2px  1px 0px $colour-blue,
+      -2px  0px 0px $colour-blue,
+      -2px -1px 0px $colour-blue;
+  }
+  .digit-2 span {
+    font-size: 40px;
+  }
+  .digit-3 span {
+    font-size: 30px;
+  }
+  .digit-4 span {
+    font-size: 25px;
+  }
+  .digit-5 span {
+    font-size: 18px;
+    margin: 0px 1px;
+  }
+}

package/src/sass/base/components/fundraising-target/fundraising-target.twig

@@ -0,0 +1,23 @@
+<div class="userFrTarget">
+  <div class="amount">
+    <h6>Set a fundraising target</h6>
+    <p class="form__subcopy">Be ambitious.You can do it</p>
+    <div>
+      <span class="pounds-typography">£</span>
+      <input type="text" autocomplete="on" class="form__input extra" id="userFrTarget" name="userFrTarget" value="150" maxlength="6">
+    </div>
+  </div>
+  <div class="copy">
+    <div class="digit digit-1">
+      <span>3</span>
+    </div>
+    <div class="digit-copy">
+      <div>
+        <p>
+          Thanks to you, at least <strong>three</strong> children living and 
+          working on the streets of Liberia could go to school for an entire year.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>