@skyscanner/backpack-web 29.5.2 → 29.6.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 (9) hide show
  1. package/bpk-component-floating-notification/src/BpkFloatingNotification.js +3 -3
  2. package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css +1 -1
  3. package/bpk-component-map/src/BpkIconMarker.js +2 -7
  4. package/bpk-component-map/src/BpkIconMarker.module.css +1 -1
  5. package/bpk-component-map/src/BpkIconMarkerBackground.module.css +1 -1
  6. package/bpk-component-page-indicator/src/NavButton.js +3 -3
  7. package/bpk-component-pagination/src/BpkPaginationNudger.js +3 -3
  8. package/bpk-component-pagination/src/BpkPaginationPage.js +3 -3
  9. package/package.json +1 -1
package/bpk-component-floating-notification/src/BpkFloatingNotification.js CHANGED
@@ -18,7 +18,7 @@
18
18
  import { useEffect, useState, ReactElement } from 'react';
19
19
  import { CSSTransition } from 'react-transition-group';
20
20
  import BpkAriaLive from "../../bpk-component-aria-live";
21
- import BpkButton from "../../bpk-component-button";
21
+ import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
22
22
  import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
23
23
  import { cssModules } from "../../bpk-react-utils";
24
24
  import STYLES from "./BpkFloatingNotification.module.css";
@@ -77,8 +77,8 @@ const BpkFloatingNotification = props => {
77
77
  }), /*#__PURE__*/_jsx(BpkAriaLive, {
78
78
  "aria-hidden": true,
79
79
  children: text
80
- }), ctaText && /*#__PURE__*/_jsx(BpkButton, {
81
- link: true,
80
+ }), ctaText && /*#__PURE__*/_jsx(BpkButtonV2, {
81
+ type: BUTTON_TYPES.linkOnDark,
82
82
  onClick: onClick,
83
83
  className: getClassName('bpk-floating-notification__button'),
84
84
  children: ctaText
package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25),0px 4px 14px 0px rgba(37,32,31,0.25)}@media (max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-height:0;padding:0;color:#fff;margin-inline-start:auto}.bpk-floating-notification__icon{margin-right:0.5rem;margin-left:0.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:0.5rem}
18
+ @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25),0px 4px 14px 0px rgba(37,32,31,0.25)}@media (max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-width:fit-content;min-height:0;padding:0;color:#fff;margin-inline-start:auto}.bpk-floating-notification__icon{margin-right:0.5rem;margin-left:0.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:0.5rem}
package/bpk-component-map/src/BpkIconMarker.js CHANGED
@@ -27,7 +27,6 @@ const BpkIconMarker = props => {
27
27
  const {
28
28
  buttonProps,
29
29
  className,
30
- disabled,
31
30
  icon,
32
31
  onClick,
33
32
  position,
@@ -35,7 +34,7 @@ const BpkIconMarker = props => {
35
34
  ...rest
36
35
  } = props;
37
36
  const wrapperClassNames = getClassName('bpk-icon-marker__wrapper', selected && 'bpk-icon-marker__wrapper--selected', className);
38
- const iconClassNames = getClassName('bpk-icon-marker__icon', onClick && !disabled && 'bpk-icon-marker__icon--interactive', disabled && 'bpk-icon-marker__icon--disabled', selected && 'bpk-icon-marker__icon--selected');
37
+ const iconClassNames = getClassName('bpk-icon-marker__icon', onClick && 'bpk-icon-marker__icon--interactive', selected && 'bpk-icon-marker__icon--selected');
39
38
  return (
40
39
  /*#__PURE__*/
41
40
  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
@@ -46,11 +45,9 @@ const BpkIconMarker = props => {
46
45
  type: "button",
47
46
  className: wrapperClassNames,
48
47
  onClick: onClick,
49
- disabled: disabled,
50
48
  ...buttonProps,
51
49
  children: [/*#__PURE__*/_jsx(BpkIconMarkerBackground, {
52
- disabled: disabled,
53
- interactive: onClick !== null && !disabled,
50
+ interactive: onClick !== null,
54
51
  selected: selected
55
52
  }), /*#__PURE__*/_jsx("div", {
56
53
  className: iconClassNames,
@@ -64,7 +61,6 @@ BpkIconMarker.propTypes = {
64
61
  icon: PropTypes.node.isRequired,
65
62
  position: LatLongPropType.isRequired,
66
63
  className: PropTypes.string,
67
- disabled: PropTypes.bool,
68
64
  onClick: PropTypes.func,
69
65
  selected: PropTypes.bool,
70
66
  buttonProps: PropTypes.object // eslint-disable-line react/forbid-prop-types
@@ -72,7 +68,6 @@ BpkIconMarker.propTypes = {
72
68
 
73
69
  BpkIconMarker.defaultProps = {
74
70
  className: null,
75
- disabled: false,
76
71
  onClick: null,
77
72
  selected: false,
78
73
  buttonProps: null
package/bpk-component-map/src/BpkIconMarker.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker__wrapper{position:absolute;top:-32px;left:-13px;z-index:1;padding:16px 13px;border:none;background:none}.bpk-icon-marker__wrapper--selected{top:-40px;left:-16px;z-index:2;padding:20px 16px}.bpk-icon-marker__icon{position:absolute;top:4.8px;left:5px;color:#fff}.bpk-icon-marker__icon>svg{position:absolute;width:16px !important;height:16px !important;fill:currentcolor}.bpk-icon-marker__icon--interactive{cursor:pointer}.bpk-icon-marker__icon--disabled{color:#0c838a;color:var(--bpk-icon-marker-default-disabled-color, #0c838a)}.bpk-icon-marker__icon--selected{top:8px;left:8px;color:#0c838a;color:var(--bpk-icon-marker-default-selected-color, #0c838a)}
18
+ @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker__wrapper{position:absolute;top:-32px;left:-13px;z-index:1;padding:16px 13px;border:none;background:none}.bpk-icon-marker__wrapper--selected{top:-40px;left:-16px;z-index:2;padding:20px 16px}.bpk-icon-marker__icon{position:absolute;top:4.8px;left:5px;color:#fff}.bpk-icon-marker__icon>svg{position:absolute;width:16px !important;height:16px !important;fill:currentcolor}.bpk-icon-marker__icon--interactive{cursor:pointer}.bpk-icon-marker__icon--selected{top:8px;left:8px;color:#fff;color:var(--bpk-icon-marker-default-selected-color, #fff)}
package/bpk-component-map/src/BpkIconMarkerBackground.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker-background{position:absolute;top:0;left:0;fill:#0c838a;fill:var(--bpk-icon-marker-default-background-color, #0c838a)}.bpk-icon-marker-background--interactive{cursor:pointer}.bpk-icon-marker-background--disabled{fill:#d4fff2;fill:var(--bpk-icon-marker-default-disabled-background-color, #d4fff2)}.bpk-icon-marker-background--selected{fill:#fff;stroke:#0c838a;stroke:var(--bpk-icon-marker-default-selected-color, #0c838a)}
18
+ @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker-background{position:absolute;top:0;left:0;fill:#8e47ba;fill:var(--bpk-icon-marker-default-background-color, #8e47ba)}.bpk-icon-marker-background--interactive{cursor:pointer}.bpk-icon-marker-background--disabled{fill:#d4fff2;fill:var(--bpk-icon-marker-default-disabled-background-color, #d4fff2)}.bpk-icon-marker-background--selected{fill:#05203c;stroke:#05203c;stroke:var(--bpk-icon-marker-default-selected-color, #05203c)}
package/bpk-component-page-indicator/src/NavButton.js CHANGED
@@ -16,7 +16,7 @@
16
16
  * limitations under the License.
17
17
  */import PropTypes from 'prop-types';
18
18
  import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
19
- import BpkButton from "../../bpk-component-button";
19
+ import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
20
20
  import LeftArrowIcon from "../../bpk-component-icon/lg/chevron-left";
21
21
  import RightArrowIcon from "../../bpk-component-icon/lg/chevron-right";
22
22
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -35,9 +35,9 @@ const NavButton = props => {
35
35
  disabled,
36
36
  onClick
37
37
  } = props;
38
- return /*#__PURE__*/_jsx(BpkButton, {
38
+ return /*#__PURE__*/_jsx(BpkButtonV2, {
39
39
  iconOnly: true,
40
- link: true,
40
+ type: BUTTON_TYPES.link,
41
41
  onClick: e => {
42
42
  if (direction === DIRECTIONS.PREV) {
43
43
  onClick(e, currentIndex - 1, direction);
package/bpk-component-pagination/src/BpkPaginationNudger.js CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  import PropTypes from 'prop-types';
20
20
  import { cssModules } from "../../bpk-react-utils";
21
- import BpkButton from "../../bpk-component-button";
21
+ import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
22
22
  import { withRtlSupport } from "../../bpk-component-icon";
23
23
  import ArrowLeftIcon from "../../bpk-component-icon/sm/arrow-left";
24
24
  import ArrowRightIcon from "../../bpk-component-icon/sm/arrow-right";
@@ -40,8 +40,8 @@ const BpkPaginationNudger = props => {
40
40
  label,
41
41
  onNudge
42
42
  } = props;
43
- return /*#__PURE__*/_jsxs(BpkButton, {
44
- link: true,
43
+ return /*#__PURE__*/_jsxs(BpkButtonV2, {
44
+ type: BUTTON_TYPES.link,
45
45
  onClick: onNudge,
46
46
  disabled: disabled,
47
47
  className: getClassName('bpk-pagination-nudger'),
package/bpk-component-pagination/src/BpkPaginationPage.js CHANGED
@@ -17,7 +17,7 @@
17
17
  */
18
18
 
19
19
  import PropTypes from 'prop-types';
20
- import BpkButton from "../../bpk-component-button";
20
+ import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
21
21
  import { cssModules } from "../../bpk-react-utils";
22
22
  import STYLES from "./BpkPaginationPage.module.css";
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -33,8 +33,8 @@ const BpkPaginationPage = props => {
33
33
  if (isSelected) {
34
34
  classNames.push(getClassName('bpk-pagination-page--selected'));
35
35
  }
36
- return /*#__PURE__*/_jsx(BpkButton, {
37
- primaryOnDark: !isSelected,
36
+ return /*#__PURE__*/_jsx(BpkButtonV2, {
37
+ type: !isSelected ? BUTTON_TYPES.primaryOnDark : BUTTON_TYPES.primary,
38
38
  onClick: onSelect,
39
39
  className: classNames.join(' '),
40
40
  "aria-label": pageLabel(page, isSelected),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "29.5.2",
3
+ "version": "29.6.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",