diff --git a/package-lock.json b/package-lock.json index 87110760c2..928a8195a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,8 +22,8 @@ "@babel/register": "^7.18.9", "@percy/cli": "^1.20.0", "@percy/storybook": "^4.3.6", - "@skyscanner/bpk-foundations-web": "^17.2.0", - "@skyscanner/bpk-svgs": "^18.1.2", + "@skyscanner/bpk-foundations-web": "^17.4.0", + "@skyscanner/bpk-svgs": "^19.0.0", "@skyscanner/stylelint-config-skyscanner": "^10.0.0", "@storybook/addon-a11y": "^7.1.1", "@storybook/addon-actions": "^7.1.1", @@ -4446,26 +4446,33 @@ } }, "node_modules/@skyscanner/bpk-foundations-common": { - "version": "6.4.0", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@skyscanner/bpk-foundations-common/-/bpk-foundations-common-6.5.0.tgz", + "integrity": "sha512-nOk8DspPlbcAtswcQFzwaS8eg55ObJIY/pHl6ZCS3JaCZliTdEp4hJFl1Bb841z7TyMx+JwBOjIwvAN3x7lquw==", "dev": true, - "license": "Apache-2.0", "dependencies": { "color": "^3.0.0" } }, "node_modules/@skyscanner/bpk-foundations-web": { - "version": "17.3.0", + "version": "17.4.0", + "resolved": "https://registry.npmjs.org/@skyscanner/bpk-foundations-web/-/bpk-foundations-web-17.4.0.tgz", + "integrity": "sha512-JA8SE0Bzw4XnPx7PC5qvOiy49gswg7nSA3T6FfjR4AGXNME9fbEI6Ii5JM/IjcU2aJySt0iJQiN26/HsowZguw==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "@skyscanner/bpk-foundations-common": "^6.4.0", + "@skyscanner/bpk-foundations-common": "^6.5.0", "color": "^3.0.0" } }, "node_modules/@skyscanner/bpk-svgs": { - "version": "18.1.3", + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/@skyscanner/bpk-svgs/-/bpk-svgs-19.0.0.tgz", + "integrity": "sha512-dg/XsraLVEjCa2SknqEmxMTuqf7AlRDHOVPMksLyUpHyNkEBKLcbjBOZoE0A646V9vYk8+7bzW4Znl1syZ2//A==", "dev": true, - "license": "Apache-2.0" + "engines": { + "node": "^18.16.0", + "npm": "^9.5.1" + } }, "node_modules/@skyscanner/eslint-config-skyscanner": { "version": "16.0.0", diff --git a/package.json b/package.json index a70d8b9efb..62b81c1a6d 100644 --- a/package.json +++ b/package.json @@ -121,8 +121,8 @@ "@babel/register": "^7.18.9", "@percy/cli": "^1.20.0", "@percy/storybook": "^4.3.6", - "@skyscanner/bpk-foundations-web": "^17.2.0", - "@skyscanner/bpk-svgs": "^18.1.2", + "@skyscanner/bpk-foundations-web": "^17.4.0", + "@skyscanner/bpk-svgs": "^19.0.0", "@skyscanner/stylelint-config-skyscanner": "^10.0.0", "@storybook/addon-a11y": "^7.1.1", "@storybook/addon-actions": "^7.1.1", diff --git a/packages/bpk-mixins/src/mixins/_svgs.scss b/packages/bpk-mixins/src/mixins/_svgs.scss index 6223a411c7..1d8bf652c8 100644 --- a/packages/bpk-mixins/src/mixins/_svgs.scss +++ b/packages/bpk-mixins/src/mixins/_svgs.scss @@ -16,7 +16,6 @@ * limitations under the License. */ -@import '~@skyscanner/bpk-svgs/index.scss'; @import '../bonds.scss'; @import './utils.scss'; @@ -30,34 +29,6 @@ /// @group svgs //// -/// Icon factory. -/// -/// @param {variable} $spacing -/// @param {key} $icon -/// -/// @access private - -@mixin _bpk-icon-factory($map, $size, $icon) { - @if map_has_key($map, $icon) != true { - $err: ( - 'Could not find "' + - $icon + - '" icon. Refer to ' + - 'https://skyscanner.design/latest/components/icon/overview.html' + - ' for the list of supported icons.' - ); - - @error $err; - } - - content: ''; - display: inline-block; - width: $size; - height: $size; - background: url(map-get($map, $icon)) no-repeat; - background-size: cover; -} - /// Button alignment utility. /// /// @access private @@ -75,70 +46,6 @@ vertical-align: top; } -/// Icon. -/// -/// > **Note:** You will need to pass the sassFunction `encodebase64` to your node-sass process to use this mixin: -/// > -/// > ```js -/// > var sass = require('node-sass'); -/// > var sassFunctions = require('bpk-mixins/sass-functions'); -/// > ... -/// > sass.render({ -/// > file: 'mysassfile.scss', -/// > functions: sassFunctions, -/// > }); -/// > ``` -/// -/// @param {key} $icon -/// @param {variable} $color -/// @param {key} $size -/// -/// @example scss -/// .selector { -/// @include bpk-icon(flight, $bpk-color-sky-gray-tint-02, large); -/// } - -@mixin bpk-icon($icon, $color, $size: small) { - @if function-exists(encodebase64) != true { - $err: ( - 'Could not find encodebase64 function. Refer to ' + - 'https://backpack.github.io/sassdoc/#svgs-mixin-bpk-icon' + - ' on how to provide it to node-sass.' - ); - - @error $err; - } - - $icon-map: if($size == large, $bpk-icons-no-color-lg, $bpk-icons-no-color-sm); - - @if map_has_key($icon-map, $icon) != true { - $err: ( - 'Could not find "' + - $icon + - '" icon. Refer to' + - 'https://skyscanner.design/latest/components/icon/overview.html' + - ' for the list of supported icons.' - ); - - @error $err; - } - - $icon-size: if($size == large, $bpk-icon-size-lg, $bpk-icon-size-sm); - - /* Disabling rule here as this method is for newer sass versions that we don't yet support */ - /* stylelint-disable-next-line scss/no-global-function-names */ - $raw-svg: map-get($icon-map, $icon); - $svg-string: str-replace($raw-svg, '$$COLOR$$', $color); - $datauri: 'data:image/svg+xml;base64,' + encodebase64($svg-string); - - content: ''; - display: inline-block; - width: $icon-size; - height: $icon-size; - background: url($datauri) no-repeat; - background-size: cover; -} - /// Align to button. Modifies the bpk-icon-sm mixin. /// /// @require {mixin} bpk-icon-sm diff --git a/packages/package-lock.json b/packages/package-lock.json index b86c254df9..0bd1103ec2 100644 --- a/packages/package-lock.json +++ b/packages/package-lock.json @@ -12,7 +12,7 @@ "@popperjs/core": "^2.11.5", "@react-google-maps/api": "^2.12.0", "@skyscanner/bpk-foundations-web": "^17.4.0", - "@skyscanner/bpk-svgs": "^18.1.2", + "@skyscanner/bpk-svgs": "^19.0.0", "a11y-focus-scope": "^1.1.3", "a11y-focus-store": "^1.0.0", "d3-path": "^2.0.0", @@ -236,9 +236,13 @@ } }, "node_modules/@skyscanner/bpk-svgs": { - "version": "18.1.2", - "resolved": "https://registry.npmjs.org/@skyscanner/bpk-svgs/-/bpk-svgs-18.1.2.tgz", - "integrity": "sha512-DEhd+WfINmKpUEyP3o4tgrnDXzlqDhKXaL8L31//t3Uptb9dVzk7y0drm4afKoezXWJg3GM7sduP/QxR3sNUZw==" + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/@skyscanner/bpk-svgs/-/bpk-svgs-19.0.0.tgz", + "integrity": "sha512-dg/XsraLVEjCa2SknqEmxMTuqf7AlRDHOVPMksLyUpHyNkEBKLcbjBOZoE0A646V9vYk8+7bzW4Znl1syZ2//A==", + "engines": { + "node": "^18.16.0", + "npm": "^9.5.1" + } }, "node_modules/@tootallnate/once": { "version": "2.0.0", diff --git a/packages/package.json b/packages/package.json index 5e0b17558d..9a52a5a9ca 100644 --- a/packages/package.json +++ b/packages/package.json @@ -25,7 +25,7 @@ "@popperjs/core": "^2.11.5", "@react-google-maps/api": "^2.12.0", "@skyscanner/bpk-foundations-web": "^17.4.0", - "@skyscanner/bpk-svgs": "^18.1.2", + "@skyscanner/bpk-svgs": "^19.0.0", "a11y-focus-scope": "^1.1.3", "a11y-focus-store": "^1.0.0", "d3-path": "^2.0.0",