@skyscanner/backpack-web 37.10.0 → 37.11.0

package/bpk-component-panel/index.d.ts

@@ -0,0 +1,2 @@
+import BpkPanel from './src/BpkPanel';
+export default BpkPanel;

package/bpk-component-panel/src/BpkPanel.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    padded?: boolean;
+    fullWidth?: boolean;
+    className?: string | null;
+    keyline?: boolean;
+    [rest: string]: any;
+};
+declare const BpkPanel: ({ children, className, fullWidth, keyline, padded, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkPanel;

package/bpk-component-panel/src/BpkPanel.js

@@ -16,26 +16,32 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkPanel.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkPanel = props => {
+const BpkPanel = ({
+  children,
+  className = null,
+  fullWidth = false,
+  keyline = true,
+  padded = true,
+  ...rest
+}) => {
   const classNames = [getClassName('bpk-panel')];
-  const {
-    children,
-    className,
-    fullWidth,
-    padded,
-    ...rest
-  } = props;
   if (padded) {
     classNames.push(getClassName('bpk-panel--padded'));
   }
   if (fullWidth) {
     classNames.push(getClassName('bpk-panel--full-width'));
   }
+  if (keyline) {
+    if (fullWidth) {
+      classNames.push(getClassName('bpk-panel--full-width-keyline'));
+    } else {
+      classNames.push(getClassName('bpk-panel--keyline'));
+    }
+  }
   if (className) {
     classNames.push(className);
   }
@@ -45,15 +51,4 @@ const BpkPanel = props => {
     children: children
   });
 };
-BpkPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  padded: PropTypes.bool,
-  fullWidth: PropTypes.bool,
-  className: PropTypes.string
-};
-BpkPanel.defaultProps = {
-  padded: true,
-  fullWidth: false,
-  className: null
-};
 export default BpkPanel;

package/bpk-component-panel/src/BpkPanel.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-panel{display:block;background-color:#fff;box-shadow:0 0 0 1px #c1c7cf inset;border-radius:.75rem}.bpk-panel--padded{padding:1rem}.bpk-panel--full-width{border-radius:0;box-shadow:#c1c7cf 0 -0.0625rem 0 0 inset,#c1c7cf 0 .0625rem 0 0 inset}
+.bpk-panel{display:block;background-color:#fff;border-radius:.75rem}.bpk-panel--padded{padding:1rem}.bpk-panel--full-width{border-radius:0}.bpk-panel--keyline{box-shadow:0 0 0 1px #c1c7cf inset}.bpk-panel--full-width-keyline{box-shadow:#c1c7cf 0 -0.0625rem 0 0 inset,#c1c7cf 0 .0625rem 0 0 inset}

package/bpk-component-rating/src/BpkRating.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import type { ReactNode } from 'react';
 import { RATING_SIZES, RATING_SCALES } from './common-types';
 type ValueOf<T> = T[keyof T];
@@ -11,26 +10,7 @@ type Props = {
     subtitle?: string;
     title?: string | ReactNode;
     value: string | number;
+    [rest: string]: any;
 };
-declare const BpkRating: {
-    (props: Props): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        ariaLabel: PropTypes.Validator<string>;
-        value: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
-        className: PropTypes.Requireable<string>;
-        ratingScale: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string>;
-        subtitle: PropTypes.Requireable<string>;
-        showScale: PropTypes.Requireable<boolean>;
-        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    };
-    defaultProps: {
-        className: null;
-        ratingScale: "zeroToFive";
-        size: "base";
-        subtitle: null;
-        showScale: boolean;
-        title: null;
-    };
-};
+declare const BpkRating: ({ ariaLabel, className, ratingScale, showScale, size, subtitle, title, value, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkRating;

package/bpk-component-rating/src/BpkRating.js

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
@@ -37,18 +36,17 @@ const getMaxValue = ratingScale => {
       return 10;
   }
 };
-const BpkRating = props => {
-  const {
-    ariaLabel,
-    className,
-    ratingScale,
-    showScale,
-    size,
-    subtitle,
-    title,
-    value,
-    ...rest
-  } = props;
+const BpkRating = ({
+  ariaLabel,
+  className,
+  ratingScale = RATING_SCALES.zeroToFive,
+  showScale = true,
+  size = RATING_SIZES.base,
+  subtitle = undefined,
+  title = null,
+  value,
+  ...rest
+}) => {
   const classNames = getClassName('bpk-rating', className, size === RATING_SIZES.large && title && subtitle && 'bpk-rating--large');
   const valueStyles = getClassName('bpk-rating__value');
   const scaleStyles = getClassName('bpk-rating__scale');
@@ -96,42 +94,24 @@ const BpkRating = props => {
       })]
     }), /*#__PURE__*/_jsxs("div", {
       className: textWrapperStyles,
-      children: [title && /*#__PURE__*/_jsx(BpkText, {
-        textStyle: titleTextSize,
-        tagName: "span",
-        "aria-hidden": "true",
-        children: /*#__PURE__*/_jsx("span", {
-          className: titleStyles,
+      children: [title && /*#__PURE__*/_jsx("span", {
+        className: titleStyles,
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: titleTextSize,
+          tagName: "span",
+          "aria-hidden": "true",
           children: title
         })
-      }), subtitle && /*#__PURE__*/_jsx(BpkText, {
-        textStyle: subtitleTextSize,
-        tagName: "span",
-        "aria-hidden": "true",
-        children: /*#__PURE__*/_jsx("span", {
-          className: subtitleStyles,
+      }), subtitle && /*#__PURE__*/_jsx("span", {
+        className: subtitleStyles,
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: subtitleTextSize,
+          tagName: "span",
+          "aria-hidden": "true",
           children: subtitle
         })
       })]
     })]
   });
 };
-BpkRating.propTypes = {
-  ariaLabel: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  className: PropTypes.string,
-  ratingScale: PropTypes.oneOf(Object.keys(RATING_SCALES)),
-  size: PropTypes.oneOf(Object.keys(RATING_SIZES)),
-  subtitle: PropTypes.string,
-  showScale: PropTypes.bool,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-};
-BpkRating.defaultProps = {
-  className: null,
-  ratingScale: RATING_SCALES.zeroToFive,
-  size: RATING_SIZES.base,
-  subtitle: null,
-  showScale: true,
-  title: null
-};
 export default BpkRating;

package/bpk-component-rating/src/BpkRating.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-rating{display:flex;flex-flow:row nowrap;align-items:baseline}.bpk-rating--large{align-items:center}.bpk-rating__value{padding-inline-end:.5rem}.bpk-rating__text-wrapper{display:flex;flex-direction:row;align-items:baseline;white-space:nowrap}.bpk-rating__text-wrapper--large{padding-top:.0625rem;flex-direction:column;align-items:flex-start}.bpk-rating__scale{color:#626971}.bpk-rating__title--with-subtitle{padding-right:.5rem}html[dir=rtl] .bpk-rating__title--with-subtitle{padding-right:0;padding-left:.5rem}.bpk-rating__subtitle{color:#626971}
+.bpk-rating{display:flex;flex-flow:row nowrap;align-items:baseline}.bpk-rating--large{align-items:center}.bpk-rating__value{padding-inline-end:.5rem}.bpk-rating__text-wrapper{display:flex;min-width:0;flex-direction:row;align-items:baseline;white-space:nowrap}.bpk-rating__text-wrapper--large{padding-top:.0625rem;flex-direction:column;align-items:flex-start}.bpk-rating__scale{color:#626971}.bpk-rating__title--with-subtitle{padding-right:.5rem}html[dir=rtl] .bpk-rating__title--with-subtitle{padding-right:0;padding-left:.5rem}.bpk-rating__subtitle{min-width:0;max-width:100%;flex:1 1 auto;color:#626971;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}

package/bpk-component-text/src/BpkText.d.ts

@@ -39,8 +39,9 @@ type Props = {
     textStyle?: TextStyle;
     tagName?: Tag;
     className?: string | null;
+    color?: string | null;
     id?: string;
     [rest: string]: any;
 };
-declare const BpkText: ({ children, className, tagName: TagName, textStyle, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkText: ({ children, className, color, tagName: TagName, textStyle, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkText;

package/bpk-component-text/src/BpkText.js

@@ -56,18 +56,30 @@ export const TEXT_STYLES = {
 const BpkText = ({
   children,
   className = null,
+  color = null,
   tagName: TagName = 'span',
   textStyle = TEXT_STYLES.bodyDefault,
   ...rest
 }) => {
   const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, className);
+  const {
+    style,
+    ...otherProps
+  } = rest;
+  const computedStyles = {
+    ...style,
+    ...(color ? {
+      color
+    } : {})
+  };
   return (
     /*#__PURE__*/
     // Allowed, TagName is always a dom element.
     // eslint-disable-next-line @skyscanner/rules/forbid-component-props
     _jsx(TagName, {
       className: classNames,
-      ...rest,
+      style: computedStyles,
+      ...otherProps,
       children: children
     })
   );

package/bpk-mixins/_panels.scss

@@ -36,7 +36,6 @@
   display: block;
   background-color: $bpk-card-background-color;
 
-  @include bpk-border-sm($bpk-panel-border-color);
   @include bpk-border-radius-md;
 }
 
@@ -53,7 +52,21 @@
   padding: $bpk-card-padding;
 }
 
-/// Makes panel full width by removing left and right border.
+/// Controls if we have a keyline or not on the panel
+/// Modifies the bpk-panel mixin.
+///
+/// @require {mixin} bpk-panel
+///
+/// @example scss
+///   .selector {
+///     @include bpk-panel();
+///     @include bpk-panel--keyline();
+///   }
+@mixin bpk-panel--keyline {
+  @include bpk-border-sm($bpk-panel-border-color);
+}
+
+/// Makes panel full width by removing the border radius
 /// Modifies the bpk-panel mixin.
 ///
 /// @require {mixin} bpk-panel
@@ -65,6 +78,18 @@
 ///   }
 @mixin bpk-panel--full-width {
   border-radius: 0;
+}
+
+/// Sets the keyline to only show on the top and bottom when full
+///
+/// @require {mixin} bpk-panel
+///
+/// @example scss
+///   .selector {
+///     @include bpk-panel();
+///     @include bpk-panel--full-width-keyline();
+///   }
+@mixin bpk-panel--full-width-keyline {
   box-shadow:
     $bpk-panel-border-color 0 -1 * $bpk-one-pixel-rem 0 0 inset,
     $bpk-panel-border-color 0 $bpk-one-pixel-rem 0 0 inset;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "37.10.0",
+  "version": "37.11.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -31,9 +31,9 @@
     "@skyscanner/bpk-svgs": "^20.6.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "d3-path": "^2.0.0",
+    "d3-path": "^3.1.0",
     "d3-scale": "^4.0.2",
-    "intersection-observer": "^0.7.0",
+    "intersection-observer": "^0.12.2",
     "lodash": "^4.17.20",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",

package/unstable__bpk-mixins/_panels.scss

@@ -36,7 +36,6 @@
   display: block;
   background-color: tokens.$bpk-card-background-color;
 
-  @include borders.bpk-border-sm(tokens.$bpk-panel-border-color);
   @include radii.bpk-border-radius-md;
 }
 
@@ -53,7 +52,21 @@
   padding: tokens.$bpk-card-padding;
 }
 
-/// Makes panel full width by removing left and right border.
+/// Controls if we have a keyline or not on the panel
+/// Modifies the bpk-panel mixin.
+///
+/// @require {mixin} bpk-panel
+///
+/// @example scss
+///   .selector {
+///     @include bpk-panel();
+///     @include bpk-panel--keyline();
+///   }
+@mixin bpk-panel--keyline {
+  @include borders.bpk-border-sm(tokens.$bpk-panel-border-color);
+}
+
+/// Makes panel full width by removing the border radius
 /// Modifies the bpk-panel mixin.
 ///
 /// @require {mixin} bpk-panel
@@ -65,6 +78,18 @@
 ///   }
 @mixin bpk-panel--full-width {
   border-radius: 0;
+}
+
+/// Sets the keyline to only show on the top and bottom when full
+///
+/// @require {mixin} bpk-panel
+///
+/// @example scss
+///   .selector {
+///     @include bpk-panel();
+///     @include bpk-panel--full-width-keyline();
+///   }
+@mixin bpk-panel--full-width-keyline {
   box-shadow:
     tokens.$bpk-panel-border-color 0 -1 * tokens.$bpk-one-pixel-rem 0 0 inset,
     tokens.$bpk-panel-border-color 0 tokens.$bpk-one-pixel-rem 0 0 inset;