@comicrelief/storybook 1.29.0 → 1.30.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/storybook",
   "description": "React components to build the Comic Relief front-end experience",
-  "version": "1.29.0",
+  "version": "1.30.2",
   "dependencies": {
     "@comicrelief/pattern-lab": "*",
     "@storybook/addon-info": "3",

package/src/components/InputField/validation.js

@@ -107,7 +107,8 @@ function getMessage(input, props, type, value) {
         break;
       }
       case 'tel':
-        message = input === 'empty' ? `Please fill in your ${fieldName}` : `Please fill in a valid ${fieldName}, with no spaces`;
+        // Make the fact that this is for UK only clearer, as Donate is currently accepting worldwide payments
+        message = input === 'empty' ? `Please fill in your ${fieldName}` : `Please fill in a valid UK ${fieldName}, with no spaces`;
         break;
       case 'email':
         message = input === 'empty' ? `Please fill in your ${fieldName}` : `Please fill in a valid ${fieldName}`;

package/src/components/PostcodeLookup/PostcodeLookup.js

@@ -355,7 +355,7 @@ class PostcodeLookup extends Component {
       type: 'text',
       placeholder: this.props.placeholder,
       buttonText: this.props.buttonText,
-      pattern: '^[a-zA-Z]{1,2}\\d[a-zA-Z\\d]?\\s*\\d[a-zA-Z]{2}$',
+      pattern: '^(?!\s*$).+', // Temporarily to allow non-UK postcodes on Donate for CWG
       invalidErrorText: 'Please enter a valid postcode',
       emptyFieldErrorText: 'Please enter your postcode',
       extraClass: 'search-box',
@@ -481,7 +481,7 @@ PostcodeLookup.defaultProps = {
   valuesFromParent: null,
   forceManualInput: false,
   plusURL: 'https://lookups.sls.comicrelief.com/postcode/lookup?query=',
-  buttonText: 'FIND ADDRESS',
+  buttonText: 'FIND UK ADDRESS',
   placeholder: 'SE1 7TP',
 };
 PostcodeLookup.propTypes = {

package/src/components/SelectField/SelectField.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import propTypes from 'prop-types';
 import browser from 'browser-detect';
-
+import './SelectField.scss';
 
 class SelectField extends Component {
   constructor(props) {
@@ -178,6 +178,10 @@ class SelectField extends Component {
         >
           { this.createOptions() }
         </select>
+        {/* Gives us some markup to "re-add" the icon removed by the
+        strongarmed native browser styles when using autocomplete */}
+        <span className="autocomplete-icon" />
+
         { (this.state.valid === false && this.state.showErrorMessage === true && this.state.message !== '') &&
         <div
           id={`field-error--${this.props.id}`}

package/src/components/SelectField/SelectField.scss

@@ -0,0 +1,28 @@
+.form__field-wrapper--select {
+    position: relative;
+    select {
+        // Only apply the styles for our autocompleted select, to allow
+        // us to "add back" in the background image removed
+        &:-internal-autofill-selected,
+        &:-webkit-autofill,
+        &:-webkit-autofill:hover,
+        &:-webkit-autofill:focus {
+            + .autocomplete-icon {
+                pointer-events: none;
+                z-index: 999;
+                content: "";
+                width: 26px;
+                height: 26px;
+                position: absolute;
+                top: 57px;
+                left: calc(100% - 41px);
+                background: transparent url(data:image/png;base64,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) -15px -61px no-repeat;
+                
+                @media (min-width: 740px) {
+                    left: calc(290px - 41px);
+                }
+            
+            }
+        }   
+    }
+}