@comicrelief/storybook 1.30.1 → 1.30.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/build/index.js +13 -13
  2. package/package.json +1 -1
  3. package/src/components/SelectField/SelectField.js +5 -1
  4. package/src/components/SelectField/SelectField.scss +28 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/storybook",
3
3
  "description": "React components to build the Comic Relief front-end experience",
4
- "version": "1.30.1",
4
+ "version": "1.30.2",
5
5
  "dependencies": {
6
6
  "@comicrelief/pattern-lab": "*",
7
7
  "@storybook/addon-info": "3",
package/src/components/SelectField/SelectField.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import React, { Component } from 'react';
3
3
  import propTypes from 'prop-types';
4
4
  import browser from 'browser-detect';
5
-
5
+ import './SelectField.scss';
6
6
 
7
7
  class SelectField extends Component {
8
8
  constructor(props) {
@@ -178,6 +178,10 @@ class SelectField extends Component {
178
178
  >
179
179
  { this.createOptions() }
180
180
  </select>
181
+ {/* Gives us some markup to "re-add" the icon removed by the
182
+ strongarmed native browser styles when using autocomplete */}
183
+ <span className="autocomplete-icon" />
184
+
181
185
  { (this.state.valid === false && this.state.showErrorMessage === true && this.state.message !== '') &&
182
186
  <div
183
187
  id={`field-error--${this.props.id}`}
package/src/components/SelectField/SelectField.scss ADDED
@@ -0,0 +1,28 @@
1
+ .form__field-wrapper--select {
2
+ position: relative;
3
+ select {
4
+ // Only apply the styles for our autocompleted select, to allow
5
+ // us to "add back" in the background image removed
6
+ &:-internal-autofill-selected,
7
+ &:-webkit-autofill,
8
+ &:-webkit-autofill:hover,
9
+ &:-webkit-autofill:focus {
10
+ + .autocomplete-icon {
11
+ pointer-events: none;
12
+ z-index: 999;
13
+ content: "";
14
+ width: 26px;
15
+ height: 26px;
16
+ position: absolute;
17
+ top: 57px;
18
+ left: calc(100% - 41px);
19
+ background: transparent url(data:image/png;base64,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) -15px -61px no-repeat;
20
+
21
+ @media (min-width: 740px) {
22
+ left: calc(290px - 41px);
23
+ }
24
+
25
+ }
26
+ }
27
+ }
28
+ }