@skyscanner/backpack-web 42.10.0-dev-v24496611676.1 → 42.11.0

package/bpk-component-layout/src/resolveTextStyle.js

@@ -1,265 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * 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 only the specific tokens needed for text styles, rather than the
-// entire foundations module. This avoids pulling unused tokens (colors,
-// shadows, borders, etc.) into the layout bundle.
-import { fontSizeXs, fontSizeSm, fontSizeBase, fontSizeLg, fontSizeXl, fontSizeXxl, fontSizeXxxl, fontSizeXxxxl, fontSizeXxxxxl, fontSize6Xl, fontSize7Xl, fontSize8Xl, lineHeightXs, lineHeightSm, lineHeightBase, lineHeightBaseTight, lineHeightLg, lineHeightLgTight, lineHeightXl, lineHeightXlTight, lineHeightXxl, lineHeightXxxl, lineHeightXxxxl, lineHeightXxxxxl, lineHeight6Xl, lineHeight7Xl, lineHeight8Xl, fontWeightBook, fontWeightBold, fontWeightBlack, fontWeightLight, letterSpacingTight, letterSpacingHero, fontFamilyLarken } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { BpkBreakpointToChakraKey } from "./tokens";
-/**
- * Maps Backpack text style tokens to concrete CSS properties.
- *
- * This map is intentionally kept outside the Chakra theme config so that
- * layout-only consumers (who never use textStyle) do not pay for it.
- * Components that use textStyle expand it inline via `expandTextStyleProps`.
- */
-const TEXT_STYLE_MAP = {
-  xs: {
-    fontSize: fontSizeXs,
-    lineHeight: lineHeightXs,
-    fontWeight: fontWeightBook
-  },
-  sm: {
-    fontSize: fontSizeSm,
-    lineHeight: lineHeightSm,
-    fontWeight: fontWeightBook
-  },
-  base: {
-    fontSize: fontSizeBase,
-    lineHeight: lineHeightBase,
-    fontWeight: fontWeightBook
-  },
-  lg: {
-    fontSize: fontSizeLg,
-    lineHeight: lineHeightLg,
-    fontWeight: fontWeightBook
-  },
-  xl: {
-    fontSize: fontSizeXl,
-    lineHeight: lineHeightXl,
-    fontWeight: fontWeightBook
-  },
-  xxl: {
-    fontSize: fontSizeXxl,
-    lineHeight: lineHeightXxl,
-    fontWeight: fontWeightBold
-  },
-  xxxl: {
-    fontSize: fontSizeXxxl,
-    lineHeight: lineHeightXxxl,
-    fontWeight: fontWeightBold
-  },
-  xxxxl: {
-    fontSize: fontSizeXxxxl,
-    lineHeight: lineHeightXxxxl,
-    fontWeight: fontWeightBold,
-    letterSpacing: letterSpacingTight
-  },
-  xxxxxl: {
-    fontSize: fontSizeXxxxxl,
-    lineHeight: lineHeightXxxxxl,
-    fontWeight: fontWeightBold,
-    letterSpacing: letterSpacingTight
-  },
-  caption: {
-    fontSize: fontSizeXs,
-    lineHeight: lineHeightXs,
-    fontWeight: fontWeightBook
-  },
-  footnote: {
-    fontSize: fontSizeSm,
-    lineHeight: lineHeightSm,
-    fontWeight: fontWeightBook
-  },
-  'label-1': {
-    fontSize: fontSizeBase,
-    lineHeight: lineHeightBase,
-    fontWeight: fontWeightBold
-  },
-  'label-2': {
-    fontSize: fontSizeSm,
-    lineHeight: lineHeightSm,
-    fontWeight: fontWeightBold
-  },
-  'label-3': {
-    fontSize: fontSizeXs,
-    lineHeight: lineHeightXs,
-    fontWeight: fontWeightBold
-  },
-  'body-default': {
-    fontSize: fontSizeBase,
-    lineHeight: lineHeightBase,
-    fontWeight: fontWeightBook
-  },
-  'body-longform': {
-    fontSize: fontSizeLg,
-    lineHeight: lineHeightLg,
-    fontWeight: fontWeightBook
-  },
-  subheading: {
-    fontSize: fontSizeXl,
-    lineHeight: lineHeightXl,
-    fontWeight: fontWeightBook
-  },
-  'heading-1': {
-    fontSize: fontSizeXxxl,
-    lineHeight: lineHeightXxxl,
-    fontWeight: fontWeightBold
-  },
-  'heading-2': {
-    fontSize: fontSizeXxl,
-    lineHeight: lineHeightXxl,
-    fontWeight: fontWeightBold
-  },
-  'heading-3': {
-    fontSize: fontSizeXl,
-    lineHeight: lineHeightXlTight,
-    fontWeight: fontWeightBold
-  },
-  'heading-4': {
-    fontSize: fontSizeLg,
-    lineHeight: lineHeightLgTight,
-    fontWeight: fontWeightBold
-  },
-  'heading-5': {
-    fontSize: fontSizeBase,
-    lineHeight: lineHeightBaseTight,
-    fontWeight: fontWeightBold
-  },
-  'hero-1': {
-    fontSize: fontSize8Xl,
-    lineHeight: lineHeight8Xl,
-    fontWeight: fontWeightBlack,
-    letterSpacing: letterSpacingHero
-  },
-  'hero-2': {
-    fontSize: fontSize7Xl,
-    lineHeight: lineHeight7Xl,
-    fontWeight: fontWeightBlack,
-    letterSpacing: letterSpacingHero
-  },
-  'hero-3': {
-    fontSize: fontSize6Xl,
-    lineHeight: lineHeight6Xl,
-    fontWeight: fontWeightBlack,
-    letterSpacing: letterSpacingHero
-  },
-  'hero-4': {
-    fontSize: fontSizeXxxxxl,
-    lineHeight: lineHeightXxxxxl,
-    fontWeight: fontWeightBlack,
-    letterSpacing: letterSpacingHero
-  },
-  'hero-5': {
-    fontSize: fontSizeXxxxl,
-    lineHeight: lineHeightXxxl,
-    fontWeight: fontWeightBlack,
-    letterSpacing: letterSpacingHero
-  },
-  'hero-6': {
-    fontSize: fontSizeXxxl,
-    lineHeight: lineHeightXxl,
-    fontWeight: fontWeightBlack,
-    letterSpacing: letterSpacingHero
-  },
-  'editorial-1': {
-    fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
-    fontSize: fontSizeXxxxl,
-    lineHeight: lineHeightXxxxl,
-    fontWeight: fontWeightLight
-  },
-  'editorial-2': {
-    fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
-    fontSize: fontSizeXxl,
-    lineHeight: lineHeightXxl,
-    fontWeight: fontWeightLight
-  },
-  'editorial-3': {
-    fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
-    fontSize: fontSizeLg,
-    lineHeight: lineHeightLg,
-    fontWeight: fontWeightBook
-  }
-};
-
-/**
- * Expands a textStyle token (or responsive object of tokens) into concrete
- * CSS property values that can be spread directly onto a Chakra component.
- *
- * Supports:
- * - Static values:     `textStyle="heading-3"` → `{ fontSize, lineHeight, fontWeight }`
- * - Responsive objects: `textStyle={{ mobile: 'heading-5', desktop: 'heading-3' }}`
- *   → `{ fontSize: { md: '...', '2xl': '...' }, lineHeight: { ... }, ... }`
- *
- * @param {any} value - A textStyle token string, responsive object, or undefined/null.
- * @returns {Record<string, any>} An object of CSS props to spread, or an empty object if no match.
- */
-// eslint-disable-next-line import/prefer-default-export
-export function expandTextStyleProps(value) {
-  if (value == null) return {};
-
-  // Responsive object: { mobile: 'heading-5', desktop: 'heading-3' }
-  if (typeof value === 'object' && !Array.isArray(value)) {
-    // Normalise Backpack breakpoint keys to Chakra keys inline (avoids
-    // circular dependency on tokenUtils).
-    const normalized = {};
-    Object.entries(value).forEach(([key, val]) => {
-      if (key === 'base') {
-        normalized.base = val;
-      } else {
-        const chakraKey = BpkBreakpointToChakraKey[key];
-        if (chakraKey) {
-          normalized[chakraKey] = val;
-        }
-      }
-    });
-
-    // Pivot from { bp -> token } to { cssProp -> { bp -> cssValue } }
-    const result = {};
-    Object.entries(normalized).forEach(([bp, token]) => {
-      const style = TEXT_STYLE_MAP[String(token)];
-      if (!style) {
-        if (process.env.NODE_ENV !== 'production') {
-          // eslint-disable-next-line no-console
-          console.warn(`Unknown textStyle token "${String(token)}" at breakpoint "${bp}".`);
-        }
-        return;
-      }
-      Object.entries(style).forEach(([cssProp, cssValue]) => {
-        if (!result[cssProp]) {
-          result[cssProp] = {};
-        }
-        result[cssProp][bp] = cssValue;
-      });
-    });
-    return result;
-  }
-
-  // Static string value
-  const style = TEXT_STYLE_MAP[String(value)];
-  if (!style) {
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line no-console
-      console.warn(`Unknown textStyle token "${String(value)}".`);
-    }
-    return {};
-  }
-  return {
-    ...style
-  };
-}

package/bpk-component-layout/src/responsiveStyleBuilder.d.ts

@@ -1,22 +0,0 @@
-import type { CSSProperties } from 'react';
-export type LayoutStyleOutput = {
-    /** Inline styles (all values resolved for the current breakpoint) */
-    style: CSSProperties & Record<string, string>;
-    /** Non-style props to spread on the DOM element */
-    passthrough: Record<string, any>;
-};
-/**
- * Converts processed layout props into an output suitable for a plain DOM element.
- *
- * - Scalar values → inline `style` properties
- * - Responsive objects → resolved to the current breakpoint's value via fill-forward,
- *   then set as inline `style` properties
- * - Non-style props (id, role, aria-*, data-*, event handlers) → `passthrough`
- *
- * @param {Record<string, any>} processedProps - Props after token conversion and validation
- *   by `processBpkComponentProps`. Values are already resolved to CSS values (e.g. '.5rem').
- *   Responsive values are objects keyed by Chakra breakpoint keys (base, sm, md, lg, xl, 2xl).
- * @param {string} currentBreakpoint - The currently active breakpoint key from useCurrentBreakpoint
- * @returns {LayoutStyleOutput} Style and passthrough props.
- */
-export declare function buildLayoutOutput(processedProps: Record<string, any>, currentBreakpoint: string): LayoutStyleOutput;

package/bpk-component-layout/src/responsiveStyleBuilder.js

@@ -1,152 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * 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.
- */
-
-/**
- * All style props that participate in the layout system.
- * These are recognised as CSS-settable properties and will be
- * placed into the inline `style` object.
- */
-const STYLE_PROPS = new Set([
-// Spacing
-'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingStart', 'paddingEnd', 'paddingInline', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginStart', 'marginEnd', 'marginInline', 'gap', 'spacing', 'rowGap', 'columnGap',
-// Size
-'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
-// Position offsets
-'top', 'right', 'bottom', 'left',
-// Display & position
-'display', 'position', 'overflow', 'overflowX', 'overflowY',
-// Flex container
-'flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'alignContent',
-// Flex item
-'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'order', 'alignSelf', 'justifySelf',
-// Grid container
-'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns',
-// Grid item
-'gridColumn', 'gridRow',
-// Typography
-'fontSize', 'lineHeight', 'fontWeight', 'letterSpacing', 'fontFamily', 'textAlign', 'whiteSpace',
-// Visual
-'cursor', 'opacity', 'visibility', 'pointerEvents', 'userSelect']);
-
-/**
- * Maps camelCase JS prop names to their CSS property equivalents.
- * Used for setting inline styles on props whose JS name differs from CSS.
- */
-const PROP_TO_CSS_PROPERTY = {
-  paddingStart: 'paddingInlineStart',
-  paddingEnd: 'paddingInlineEnd',
-  marginStart: 'marginInlineStart',
-  marginEnd: 'marginInlineEnd',
-  spacing: 'gap' // Chakra Stack alias
-};
-
-/**
- * Props that are passed through to the DOM element as-is (not style props).
- */
-const PASSTHROUGH_KEYS = new Set(['id', 'role', 'tabIndex', 'onClick', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseEnter', 'onMouseLeave', 'onMouseOver', 'onMouseOut', 'onMouseDown', 'onMouseUp', 'onKeyUp', 'onKeyPress', 'children']);
-const PASSTHROUGH_PREFIXES = ['aria-', 'data-'];
-function isPassthroughProp(key) {
-  if (PASSTHROUGH_KEYS.has(key)) return true;
-  return PASSTHROUGH_PREFIXES.some(prefix => key.startsWith(prefix));
-}
-
-/**
- * Props that are handled separately by components (not style, not passthrough).
- * These are stripped from the style output and handled in the component layer.
- */
-const COMPONENT_HANDLED_KEYS = new Set(['color', 'backgroundColor', 'className', 'style', 'zIndex']);
-
-/**
- * Breakpoint order (ascending, mobile-first).
- * Used by the fill-forward resolution to determine which value applies
- * at the current breakpoint.
- */
-const BP_ORDER = ['sm', 'md', 'lg', 'xl', '2xl'];
-
-/**
- * Resolves a responsive value object to the effective value for a given breakpoint.
- * Uses fill-forward: the most recently specified value at or below the current
- * breakpoint wins.
- *
- * @param {Record<string, string>} responsive - Object keyed by breakpoint (base, sm, md, lg, xl, 2xl)
- * @param {string} currentBp - The currently active breakpoint key
- * @returns {string | undefined} The resolved value, or undefined if no value applies
- */
-function resolveResponsive(responsive, currentBp) {
-  let result = responsive.base !== undefined ? String(responsive.base) : undefined;
-  for (const bp of BP_ORDER) {
-    if (responsive[bp] !== undefined) {
-      result = String(responsive[bp]);
-    }
-    if (bp === currentBp) break;
-  }
-  return result;
-}
-/**
- * Converts processed layout props into an output suitable for a plain DOM element.
- *
- * - Scalar values → inline `style` properties
- * - Responsive objects → resolved to the current breakpoint's value via fill-forward,
- *   then set as inline `style` properties
- * - Non-style props (id, role, aria-*, data-*, event handlers) → `passthrough`
- *
- * @param {Record<string, any>} processedProps - Props after token conversion and validation
- *   by `processBpkComponentProps`. Values are already resolved to CSS values (e.g. '.5rem').
- *   Responsive values are objects keyed by Chakra breakpoint keys (base, sm, md, lg, xl, 2xl).
- * @param {string} currentBreakpoint - The currently active breakpoint key from useCurrentBreakpoint
- * @returns {LayoutStyleOutput} Style and passthrough props.
- */
-export function buildLayoutOutput(processedProps, currentBreakpoint) {
-  const style = {};
-  const passthrough = {};
-  Object.entries(processedProps).forEach(([key, value]) => {
-    if (value === undefined || value === null) return;
-
-    // Passthrough props go directly to the DOM element
-    if (isPassthroughProp(key)) {
-      passthrough[key] = value;
-      return;
-    }
-
-    // Component-handled props are skipped (handled by the component)
-    if (COMPONENT_HANDLED_KEYS.has(key)) return;
-
-    // Not a known style prop — pass through
-    if (!STYLE_PROPS.has(key)) {
-      passthrough[key] = value;
-      return;
-    }
-    const cssPropName = PROP_TO_CSS_PROPERTY[key] || key;
-
-    // Responsive object → resolve to current breakpoint value
-    if (typeof value === 'object' && !Array.isArray(value)) {
-      const resolved = resolveResponsive(value, currentBreakpoint);
-      if (resolved !== undefined) {
-        style[cssPropName] = resolved;
-      }
-      return;
-    }
-
-    // Scalar value → inline style
-    style[cssPropName] = String(value);
-  });
-  return {
-    style: style,
-    passthrough
-  };
-}

package/bpk-component-layout/src/useCurrentBreakpoint.d.ts

@@ -1,9 +0,0 @@
-/**
- * Returns the current active breakpoint key based on viewport width.
- * Uses `window.matchMedia` listeners to re-render when breakpoints change.
- * SSR-safe: returns `'base'` when `window` is unavailable.
- *
- * @returns {string} The active breakpoint key ('base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl')
- */
-declare const useCurrentBreakpoint: () => string;
-export default useCurrentBreakpoint;

package/bpk-component-layout/src/useCurrentBreakpoint.js

@@ -1,89 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * 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 { useEffect, useState } from 'react';
-
-/**
- * Breakpoint min-widths in ascending order (mobile-first).
- * Must match the breakpoint definitions in tokens.ts
- * and the breakpoint mapping in tokens.ts.
- */
-const BREAKPOINTS = [{
-  key: 'sm',
-  query: '(min-width: 20rem)'
-},
-// 320px — small-mobile
-{
-  key: 'md',
-  query: '(min-width: 22.5rem)'
-},
-// 360px — mobile
-{
-  key: 'lg',
-  query: '(min-width: 32.0625rem)'
-},
-// 513px — small-tablet
-{
-  key: 'xl',
-  query: '(min-width: 48.0625rem)'
-},
-// 769px — tablet
-{
-  key: '2xl',
-  query: '(min-width: 64.0625rem)'
-} // 1025px — desktop
-];
-function getCurrentBreakpoint() {
-  if (typeof window === 'undefined' || !window.matchMedia) return 'base';
-  let active = 'base';
-  for (const {
-    key,
-    query
-  } of BREAKPOINTS) {
-    if (window.matchMedia(query).matches) active = key;
-  }
-  return active;
-}
-
-/**
- * Returns the current active breakpoint key based on viewport width.
- * Uses `window.matchMedia` listeners to re-render when breakpoints change.
- * SSR-safe: returns `'base'` when `window` is unavailable.
- *
- * @returns {string} The active breakpoint key ('base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl')
- */
-const useCurrentBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState(getCurrentBreakpoint);
-  useEffect(() => {
-    if (typeof window === 'undefined' || !window.matchMedia) {
-      return undefined;
-    }
-    const mqls = BREAKPOINTS.map(({
-      query
-    }) => window.matchMedia(query));
-    const update = () => {
-      setBreakpoint(getCurrentBreakpoint());
-    };
-    mqls.forEach(mql => mql.addEventListener('change', update));
-    return () => {
-      mqls.forEach(mql => mql.removeEventListener('change', update));
-    };
-  }, []);
-  return breakpoint;
-};
-export default useCurrentBreakpoint;