@skyscanner/backpack-web 31.5.0 → 31.6.0

package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.js

@@ -20,7 +20,7 @@ import STYLES from "./BpkAutosuggest.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkSuggestion = props => {
+const BpkAutosuggestSuggestion = props => {
   const classNames = [getClassName('bpk-autosuggest__suggestion')];
   const {
     className,
@@ -67,7 +67,7 @@ const BpkSuggestion = props => {
     })
   );
 };
-BpkSuggestion.propTypes = {
+BpkAutosuggestSuggestion.propTypes = {
   value: PropTypes.node.isRequired,
   subHeading: PropTypes.node,
   tertiaryLabel: PropTypes.string,
@@ -75,11 +75,11 @@ BpkSuggestion.propTypes = {
   indent: PropTypes.bool,
   className: PropTypes.string
 };
-BpkSuggestion.defaultProps = {
+BpkAutosuggestSuggestion.defaultProps = {
   subHeading: null,
   tertiaryLabel: null,
   icon: null,
   indent: false,
   className: null
 };
-export default BpkSuggestion;
+export default BpkAutosuggestSuggestion;

package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.js

@@ -23,7 +23,6 @@ import CSSTransition from 'react-transition-group/CSSTransition';
 import { BpkButtonLink } from "../../bpk-component-link";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkNavigationBar from "../../bpk-component-navigation-bar";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkBottomSheetInner.module.css";

package/bpk-component-modal/src/BpkModalInner.js

@@ -20,7 +20,6 @@
 import { BpkButtonLink } from "../../bpk-component-link";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkNavigationBar from "../../bpk-component-navigation-bar";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkModalInner.module.css";

package/bpk-component-navigation-bar/index.js

@@ -14,9 +14,11 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import BpkNavigationBar from "./src/BpkNavigationBar";
+ */
+
+import BpkNavigationBar, { BAR_STYLES } from "./src/BpkNavigationBar";
 import BpkNavigationBarIconButton from "./src/BpkNavigationBarIconButton";
 import BpkNavigationBarButtonLink from "./src/BpkNavigationBarButtonLink";
 import themeAttributes from "./src/themeAttributes";
-export { BpkNavigationBarIconButton, BpkNavigationBarButtonLink, themeAttributes };
+export { BpkNavigationBarIconButton, BpkNavigationBarButtonLink, themeAttributes, BAR_STYLES };
 export default BpkNavigationBar;

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -14,7 +14,9 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import { cloneElement } from 'react';
+ */
+
+import { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
@@ -22,8 +24,12 @@ import STYLES from "./BpkNavigationBar.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassNames = cssModules(STYLES);
-const cloneWithClass = (elem, newStyle) => {
-  const className = getClassNames(elem.props.className, newStyle);
+export const BAR_STYLES = {
+  'default': 'default',
+  onDark: 'on-dark'
+};
+const cloneWithClasses = (elem, ...newStyles) => {
+  const className = getClassNames(elem.props.className, ...newStyles);
   return /*#__PURE__*/cloneElement(elem, {
     ...elem.props,
     className
@@ -31,10 +37,11 @@ const cloneWithClass = (elem, newStyle) => {
 };
 const BpkNavigationBar = props => {
   const {
+    barStyle = BAR_STYLES.default,
     className,
     id,
     leadingButton,
-    sticky,
+    sticky = false,
     title,
     trailingButton,
     ...rest
@@ -43,21 +50,17 @@ const BpkNavigationBar = props => {
   // If the title is a component that sets its own id we want the aria-labelledby on the nav to match this so it can find the element
   // Otherwise if its just a string we set the id on the title component.
   const titleId = typeof title === 'string' ? `${id}-bpk-navigation-bar-title` : id;
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsxs("nav", {
-      "aria-labelledby": titleId,
-      className: getClassNames('bpk-navigation-bar', sticky && 'bpk-navigation-bar__sticky', className),
-      ...rest,
-      children: [leadingButton && cloneWithClass(leadingButton, 'bpk-navigation-bar__leading-item'), typeof title === 'string' ? /*#__PURE__*/_jsx(BpkText, {
-        id: titleId,
-        textStyle: TEXT_STYLES.heading5,
-        className: getClassNames('bpk-navigation-bar__title'),
-        children: title
-      }) : title, trailingButton && cloneWithClass(trailingButton, 'bpk-navigation-bar__trailing-item')]
-    })
-  );
+  return /*#__PURE__*/_jsxs("nav", {
+    "aria-labelledby": titleId,
+    className: getClassNames('bpk-navigation-bar', `bpk-navigation-bar--${barStyle}`, sticky && 'bpk-navigation-bar__sticky', className),
+    ...rest,
+    children: [leadingButton && cloneWithClasses(leadingButton, 'bpk-navigation-bar__leading-item', `bpk-navigation-bar__leading-item--${barStyle}`), typeof title === 'string' ? /*#__PURE__*/_jsx(BpkText, {
+      id: titleId,
+      textStyle: TEXT_STYLES.heading5,
+      className: getClassNames('bpk-navigation-bar__title', `bpk-navigation-bar__title--${barStyle}`),
+      children: title
+    }) : title, trailingButton && cloneWithClasses(trailingButton, 'bpk-navigation-bar__trailing-item', `bpk-navigation-bar__trailing-item--${barStyle}`)]
+  });
 };
 BpkNavigationBar.propTypes = {
   id: PropTypes.string.isRequired,
@@ -65,12 +68,7 @@ BpkNavigationBar.propTypes = {
   className: PropTypes.string,
   leadingButton: PropTypes.element,
   trailingButton: PropTypes.element,
-  sticky: PropTypes.bool
-};
-BpkNavigationBar.defaultProps = {
-  className: null,
-  leadingButton: null,
-  trailingButton: null,
-  sticky: false
+  sticky: PropTypes.bool,
+  barStyle: PropTypes.oneOf(Object.values(BAR_STYLES))
 };
 export default BpkNavigationBar;

package/bpk-component-navigation-bar/src/BpkNavigationBar.module.css

@@ -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-navigation-bar{position:relative;display:flex;min-height:3.5rem;padding:1rem;flex-direction:row;justify-content:center;align-items:center;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, #fff)}.bpk-navigation-bar__title{color:#161616;color:var(--bpk-navigation-bar-title-color, #161616)}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{position:absolute;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{left:1rem}html[dir='rtl'] .bpk-navigation-bar__leading-item{right:1rem;left:auto}.bpk-navigation-bar__trailing-item{right:1rem}html[dir='rtl'] .bpk-navigation-bar__trailing-item{right:auto;left:1rem}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar{position:relative;display:flex;min-height:3.5rem;padding:1rem;flex-direction:row;justify-content:center;align-items:center;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, #fff)}.bpk-navigation-bar--on-dark{background-color:#05203c}.bpk-navigation-bar__title{color:#161616;color:var(--bpk-navigation-bar-title-color, #161616)}.bpk-navigation-bar__title--on-dark{color:#fff}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{position:absolute;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{left:1rem}html[dir='rtl'] .bpk-navigation-bar__leading-item{right:1rem;left:auto}.bpk-navigation-bar__trailing-item{right:1rem}html[dir='rtl'] .bpk-navigation-bar__trailing-item{right:auto;left:1rem}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3)}

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js

@@ -14,32 +14,31 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
 
-// TODO: close button is not really only a close button, we should rename and update the import here
+import PropTypes from 'prop-types';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkButtonLink } from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkNavigationBarButtonLink.module.css";
+import { BAR_STYLES } from "./BpkNavigationBar";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkNavigationBarButtonLink = ({
+  barStyle = BAR_STYLES.default,
   children,
   className,
   ...rest
-}) =>
-/*#__PURE__*/
-// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-_jsx(BpkButtonLink, {
-  className: getClassName('bpk-navigation-bar-button-link', className),
+}) => /*#__PURE__*/_jsx(BpkButtonLink, {
+  className: getClassName('bpk-navigation-bar-button-link', `bpk-navigation-bar-button-link--${barStyle}`, className),
   ...rest,
   children: children
 });
 BpkNavigationBarButtonLink.propTypes = {
   children: PropTypes.node.isRequired,
   onClick: PropTypes.func.isRequired,
-  className: PropTypes.string
-};
-BpkNavigationBarButtonLink.defaultProps = {
-  className: null
+  className: PropTypes.string,
+  barStyle: PropTypes.oneOf(Object.values(BAR_STYLES))
 };
 export default BpkNavigationBarButtonLink;

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.css

@@ -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-navigation-bar-button-link{color:#161616;color:var(--bpk-navigation-bar-button-link-color, #161616)}.bpk-no-touch-support .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, #161616)}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, #161616)}.bpk-navigation-bar-button-link:active{color:#161616;color:var(--bpk-navigation-bar-button-link-active-color, #161616)}.bpk-navigation-bar-button-link:visited{color:#161616;color:var(--bpk-navigation-bar-button-link-visited-color, #161616)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar-button-link{color:#161616;color:var(--bpk-navigation-bar-button-link-color, #161616)}.bpk-no-touch-support .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, #161616)}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, #161616)}.bpk-navigation-bar-button-link:active{color:#161616;color:var(--bpk-navigation-bar-button-link-active-color, #161616)}.bpk-navigation-bar-button-link:visited{color:#161616;color:var(--bpk-navigation-bar-button-link-visited-color, #161616)}.bpk-navigation-bar-button-link--on-dark{color:#fff}.bpk-no-touch-support .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}.bpk-navigation-bar-button-link--on-dark:active{color:#fff}.bpk-navigation-bar-button-link--on-dark:visited{color:#fff}

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js

@@ -14,33 +14,32 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
 
-// TODO: close button is not really only a close button, we should rename and update the import here
+import PropTypes from 'prop-types';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkIconButton from "../../bpk-component-close-button";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkNavigationBarIconButton.module.css";
+import { BAR_STYLES } from "./BpkNavigationBar";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkNavigationBarIconButton = ({
+  barStyle = BAR_STYLES.default,
   className,
   icon,
   ...rest
-}) =>
-/*#__PURE__*/
-// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-_jsx(BpkIconButton, {
+}) => /*#__PURE__*/_jsx(BpkIconButton, {
   customIcon: icon,
-  className: getClassName('bpk-navigation-bar-icon-button', className),
+  className: getClassName('bpk-navigation-bar-icon-button', `bpk-navigation-bar-icon-button--${barStyle}`, className),
   ...rest
 });
 BpkNavigationBarIconButton.propTypes = {
   icon: PropTypes.func.isRequired,
   label: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
-  className: PropTypes.string
-};
-BpkNavigationBarIconButton.defaultProps = {
-  className: null
+  className: PropTypes.string,
+  barStyle: PropTypes.oneOf(Object.values(BAR_STYLES))
 };
 export default BpkNavigationBarIconButton;

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.css

@@ -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-navigation-bar-icon-button{color:#161616;color:var(--bpk-navigation-bar-icon-button-color, #161616)}.bpk-no-touch-support .bpk-navigation-bar-icon-button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-icon-button-hover-color, #161616)}:global(.bpk-no-touch-support) .bpk-navigation-bar-icon-button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-icon-button-hover-color, #161616)}.bpk-navigation-bar-icon-button:active{color:#161616;color:var(--bpk-navigation-bar-icon-button-active-color, #161616)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-bar-icon-button{color:#161616;color:var(--bpk-navigation-bar-icon-button-color, #161616)}.bpk-no-touch-support .bpk-navigation-bar-icon-button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-icon-button-hover-color, #161616)}:global(.bpk-no-touch-support) .bpk-navigation-bar-icon-button:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-icon-button-hover-color, #161616)}.bpk-navigation-bar-icon-button:active{color:#161616;color:var(--bpk-navigation-bar-icon-button-active-color, #161616)}.bpk-navigation-bar-icon-button--on-dark{color:#fff}.bpk-no-touch-support .bpk-navigation-bar-icon-button--on-dark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-navigation-bar-icon-button--on-dark:hover:not(:active):not(:disabled){color:#fff}.bpk-navigation-bar-icon-button--on-dark:active{color:#fff}

package/bpk-component-navigation-bar/src/themeAttributes.js

@@ -14,4 +14,6 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */export default ['navigationBarBackgroundColor', 'navigationBarTitleColor', 'navigationBarButtonLinkColor', 'navigationBarButtonLinkActiveColor', 'navigationBarButtonLinkHoverColor', 'navigationBarButtonLinkVisitedColor', 'navigationBarIconButtonColor', 'navigationBarIconButtonActiveColor', 'navigationBarIconButtonHoverColor'];
+ */
+
+export default ['navigationBarBackgroundColor', 'navigationBarTitleColor', 'navigationBarButtonLinkColor', 'navigationBarButtonLinkActiveColor', 'navigationBarButtonLinkHoverColor', 'navigationBarButtonLinkVisitedColor', 'navigationBarIconButtonColor', 'navigationBarIconButtonActiveColor', 'navigationBarIconButtonHoverColor'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "31.5.0",
+  "version": "31.6.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",