npm - @skyscanner/backpack-web - Versions diffs - 6.1.0 → 8.0.0 - Mend

@skyscanner/backpack-web 6.1.0 → 8.0.0

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 (95) hide show

package/bpk-component-datepicker/src/BpkDatepicker.js CHANGED Viewed

@@ -58,6 +58,7 @@ class BpkDatepicker extends Component {
     this.state = {
       isOpen: props.isOpen,
     };
+    this.inputRef = React.createRef();
   }
   componentDidUpdate(prevProps, prevState) {
@@ -221,20 +222,24 @@ class BpkDatepicker extends Component {
     delete rest.isOpen;
     const input = inputComponent || (
-      <Input
-        id={id}
-        name={`${id}_input`}
-        value={this.getValue(selectionConfiguration, formatDate)}
+      <div
         className={getClassName('bpk-datepicker__input')}
-        aria-live="assertive"
-        aria-atomic="true"
-        aria-label={this.getLabel(selectionConfiguration, formatDateFull)}
-        onChange={() => null}
-        onOpen={this.onOpen}
-        isOpen={this.state.isOpen}
-        valid={valid}
-        {...inputProps}
-      />
+        ref={this.inputRef}
+      >
+        <Input
+          id={id}
+          name={`${id}_input`}
+          value={this.getValue(selectionConfiguration, formatDate)}
+          aria-live="assertive"
+          aria-atomic="true"
+          aria-label={this.getLabel(selectionConfiguration, formatDateFull)}
+          onChange={() => null}
+          onOpen={this.onOpen}
+          isOpen={this.state.isOpen}
+          valid={valid}
+          {...inputProps}
+        />
+      </div>
     );
     const calendarProps = {

package/bpk-component-datepicker/src/BpkDatepicker.module.scss CHANGED Viewed

@@ -22,4 +22,9 @@
   &__calendar {
     margin: 0 auto;
   }
+  &__input {
+    display: inline-block;
+    width: 100%;
+  }
 }

package/bpk-component-description-list/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-description-list",
-  "version": "3.1.12",
+  "version": "3.2.1",
   "description": "Backpack description list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-description-list/src/BpkDescriptionList.module.css CHANGED Viewed

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-description-list{margin:0}.bpk-description-list__term{font-weight:700}.bpk-description-list__details{margin:0;margin-left:1.5rem}html[dir='rtl'] .bpk-description-list__details{margin-right:1.5rem;margin-left:0}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-description-list{margin:0}.bpk-description-list__term{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-description-list__details{margin:0;margin-left:1.5rem}html[dir='rtl'] .bpk-description-list__details{margin-right:1.5rem;margin-left:0}

package/bpk-component-description-list/src/BpkDescriptionList.module.scss CHANGED Viewed

@@ -22,7 +22,7 @@
   margin: 0;
   &__term {
-    font-weight: $bpk-font-weight-bold;
+    @include bpk-label-1;
   }
   &__details {

package/bpk-component-dialog/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-dialog",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Backpack dialog component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.13",
-    "bpk-component-flare": "^2.1.15",
+    "bpk-component-close-button": "^3.1.14",
+    "bpk-component-flare": "^2.1.16",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "bpk-scrim-utils": "^5.1.11",
+    "bpk-react-utils": "^6.0.1",
+    "bpk-scrim-utils": "^5.1.12",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-icon": "^9.2.13",
-    "bpk-component-text": "^7.0.6"
+    "bpk-component-button": "^6.2.8",
+    "bpk-component-icon": "^9.2.14",
+    "bpk-component-text": "^7.0.7"
   }
 }

package/bpk-component-drawer/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-drawer",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Backpack drawer component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,12 +15,12 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-close-button": "^3.1.13",
-    "bpk-component-icon": "^9.2.13",
-    "bpk-component-link": "^3.1.12",
+    "bpk-component-close-button": "^3.1.14",
+    "bpk-component-icon": "^9.2.14",
+    "bpk-component-link": "^3.1.13",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "bpk-scrim-utils": "^5.1.11",
+    "bpk-react-utils": "^6.0.1",
+    "bpk-scrim-utils": "^5.1.12",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -28,7 +28,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-text": "^7.0.6"
+    "bpk-component-button": "^6.2.8",
+    "bpk-component-text": "^7.0.7"
   }
 }

package/bpk-component-fieldset/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-fieldset",
-  "version": "4.1.19",
+  "version": "4.1.22",
   "description": "Backpack fieldset component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,23 +14,23 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-form-validation": "^4.2.17",
-    "bpk-component-label": "^5.1.12",
+    "bpk-component-form-validation": "^4.2.19",
+    "bpk-component-label": "^5.1.13",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-autosuggest": "^6.1.17",
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-calendar": "^11.1.19",
-    "bpk-component-checkbox": "^4.1.14",
-    "bpk-component-datepicker": "^16.0.0",
-    "bpk-component-input": "^6.1.17",
-    "bpk-component-select": "^5.1.12",
-    "bpk-component-textarea": "^4.2.12"
+    "bpk-component-autosuggest": "^6.1.19",
+    "bpk-component-button": "^6.2.8",
+    "bpk-component-calendar": "^11.2.2",
+    "bpk-component-checkbox": "^4.1.15",
+    "bpk-component-datepicker": "^17.0.0",
+    "bpk-component-input": "^6.1.19",
+    "bpk-component-select": "^5.1.13",
+    "bpk-component-textarea": "^4.2.13"
   }
 }

package/bpk-component-flare/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-flare",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "description": "Backpack FlareBar and ContentBubble component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,10 +17,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-label": "^5.1.12",
-    "bpk-component-text": "^7.0.6",
+    "bpk-component-label": "^5.1.13",
+    "bpk-component-text": "^7.0.7",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-floating-notification/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-floating-notification",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Backpack floating-notification component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,11 +13,11 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-aria-live": "^2.1.19",
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-text": "^7.0.6",
+    "bpk-component-aria-live": "^2.1.22",
+    "bpk-component-button": "^6.2.8",
+    "bpk-component-text": "^7.0.7",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-form-validation/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-form-validation",
-  "version": "4.2.17",
+  "version": "4.2.19",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^4.1.12",
+    "bpk-animate-height": "^4.1.13",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -24,11 +24,11 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-checkbox": "^4.1.14",
-    "bpk-component-icon": "^9.2.13",
-    "bpk-component-input": "^6.1.17",
-    "bpk-component-select": "^5.1.12",
-    "bpk-component-textarea": "^4.2.12"
+    "bpk-component-button": "^6.2.8",
+    "bpk-component-checkbox": "^4.1.15",
+    "bpk-component-icon": "^9.2.14",
+    "bpk-component-input": "^6.1.19",
+    "bpk-component-select": "^5.1.13",
+    "bpk-component-textarea": "^4.2.13"
   }
 }

package/bpk-component-graphic-promotion/README.md CHANGED Viewed

@@ -14,6 +14,7 @@ import BpkGraphicPromo from 'bpk-component-graphic-promotion';
 export default () => (
   <BpkGraphicPromo
+    contentId="graphic-promo-1"
     tagline="Tagline"
     headline="Ride your wave"
     subheading="Portugal and 6 more countries have just been added to the UK travel green list"
@@ -34,6 +35,7 @@ export default () => (
 | Property         | PropType          | Required | Default Value |
 | ---------------- | ----------------- | -------- | ------------- |
+| contentId        | string            | false    | null          |
 | buttonText       | string            | true     | -             |
 | headline         | string            | true     | -             |
 | invertVertically | bool              | true     | -             |

package/bpk-component-graphic-promotion/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-graphic-promotion",
-  "version": "3.1.2",
+  "version": "4.1.1",
   "description": "Backpack graphic-promotion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,10 +13,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-text": "^7.0.6",
+    "bpk-component-button": "^6.2.8",
+    "bpk-component-text": "^7.0.7",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js CHANGED Viewed

@@ -45,6 +45,7 @@ export const TEXT_ALIGN = {
 export type Props = {
   className: ?string,
+  contentId: ?string,
   tagline: ?string,
   headline: string,
   subheading: ?string,
@@ -87,6 +88,7 @@ const BpkGraphicPromo = (props: Props) => {
   const {
     buttonText,
     className,
+    contentId,
     headline,
     invertVertically,
     onClick,
@@ -128,7 +130,7 @@ const BpkGraphicPromo = (props: Props) => {
       onClick={onClickWrapper}
       onKeyDown={onKeyWrapper}
     >
-      <div className={containerClasses} aria-hidden>
+      <div id={contentId} className={containerClasses} aria-hidden>
         <div className={getTextClasses('bpk-graphic-promo__sponsor-content')}>
           {sponsor && (
             <>