@skyscanner/backpack-web 38.21.0 → 38.22.0

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

@@ -1,3 +1,3 @@
 import BpkSkeleton from "./src/BpkSkeleton";
-export { SIZE_TYPES, SKELETON_TYPES, IMAGE_SKELETON_STYLE } from './src/common-types';
+export { SIZE_TYPES, SKELETON_TYPES, IMAGE_SKELETON_STYLE, BACKGROUND_STYLE } from './src/common-types';
 export default BpkSkeleton;

package/bpk-component-skeleton/index.js

@@ -17,5 +17,5 @@
  */
 
 import BpkSkeleton from "./src/BpkSkeleton";
-export { SIZE_TYPES, SKELETON_TYPES, IMAGE_SKELETON_STYLE } from "./src/common-types";
+export { SIZE_TYPES, SKELETON_TYPES, IMAGE_SKELETON_STYLE, BACKGROUND_STYLE } from "./src/common-types";
 export default BpkSkeleton;

package/bpk-component-skeleton/src/BpkSkeleton.js

@@ -18,17 +18,18 @@
 
 import { cssModules } from "../../bpk-react-utils";
 import BpkBaseSkeleton from "./BpkBaseSkeleton";
-import { SKELETON_TYPES, IMAGE_SKELETON_STYLE, SIZE_TYPES } from "./common-types";
+import { SKELETON_TYPES, IMAGE_SKELETON_STYLE, SIZE_TYPES, BACKGROUND_STYLE } from "./common-types";
 import STYLES from "./BpkSkeleton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkSkeleton = props => {
   const {
+    backgroundStyle = BACKGROUND_STYLE.default,
     size = SIZE_TYPES.default,
     type
   } = props;
   const isImageRounded = type === SKELETON_TYPES.image && props.style === IMAGE_SKELETON_STYLE.rounded;
-  const classNames = getClassName(`bpk-skeleton__${type}`, typeof size !== 'object' && `bpk-skeleton__${type}--${size}`, isImageRounded && 'bpk-skeleton__image--rounded');
+  const classNames = getClassName(`bpk-skeleton__${type}`, typeof size !== 'object' && `bpk-skeleton__${type}--${size}`, isImageRounded && 'bpk-skeleton__image--rounded', `bpk-skeleton__${backgroundStyle}`);
   const styleObj = typeof size === 'object' ? size : undefined;
   return /*#__PURE__*/_jsx(BpkBaseSkeleton, {
     skeletonStyle: classNames,

package/bpk-component-skeleton/src/BpkSkeleton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-skeleton__image{width:6rem;height:6rem}.bpk-skeleton__image--rounded{border-radius:.5rem}.bpk-skeleton__headline{width:5rem;border-radius:.25rem}.bpk-skeleton__headline--small{height:.5rem;border-radius:.125rem}.bpk-skeleton__headline--default{height:1rem;border-radius:.25rem}.bpk-skeleton__headline--large{height:2rem;border-radius:.25rem}.bpk-skeleton__circle{border-radius:50%}.bpk-skeleton__circle--small{width:2rem;height:2rem}.bpk-skeleton__circle--default{width:3rem;height:3rem}.bpk-skeleton__bodyText{height:.5rem;border-radius:.125rem}.bpk-skeleton__bodyText--small{width:7.125rem}.bpk-skeleton__bodyText--default{width:10.6875rem}.bpk-skeleton__bodyText--large{width:12.5rem}
+.bpk-skeleton__image{width:6rem;height:6rem}.bpk-skeleton__image--rounded{border-radius:.5rem}.bpk-skeleton__headline{width:5rem;border-radius:.25rem}.bpk-skeleton__headline--small{height:.5rem;border-radius:.125rem}.bpk-skeleton__headline--default{height:1rem;border-radius:.25rem}.bpk-skeleton__headline--large{height:2rem;border-radius:.25rem}.bpk-skeleton__circle{border-radius:50%}.bpk-skeleton__circle--small{width:2rem;height:2rem}.bpk-skeleton__circle--default{width:3rem;height:3rem}.bpk-skeleton__bodyText{height:.5rem;border-radius:.125rem}.bpk-skeleton__bodyText--small{width:7.125rem}.bpk-skeleton__bodyText--default{width:10.6875rem}.bpk-skeleton__bodyText--large{width:12.5rem}.bpk-skeleton__onContrast{background-color:hsla(0,0%,100%,.1)}

package/bpk-component-skeleton/src/common-types.d.ts

@@ -20,6 +20,11 @@ export declare const IMAGE_SKELETON_STYLE: {
     readonly default: "default";
 };
 export type ImageSkeletonStyle = (typeof IMAGE_SKELETON_STYLE)[keyof typeof IMAGE_SKELETON_STYLE];
+export declare const BACKGROUND_STYLE: {
+    readonly default: "default";
+    readonly onContrast: "onContrast";
+};
+export type BackgroundStyle = (typeof BACKGROUND_STYLE)[keyof typeof BACKGROUND_STYLE];
 type SizeMap = {
     [SKELETON_TYPES.image]: (typeof SIZE_TYPES)['default'];
     [SKELETON_TYPES.bodyText]: (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES];
@@ -30,8 +35,10 @@ export type ComponentProps = {
     type: Extract<SkeletonType, 'image'>;
     size?: SizeMap['image'] | CUSTOM_SIZE_TYPE;
     style?: ImageSkeletonStyle;
+    backgroundStyle?: BackgroundStyle;
 } | {
     type: Exclude<keyof SizeMap, 'image'>;
     size?: SizeMap[keyof SizeMap] | CUSTOM_SIZE_TYPE;
+    backgroundStyle?: BackgroundStyle;
 };
 export {};

package/bpk-component-skeleton/src/common-types.js

@@ -30,4 +30,8 @@ export const SKELETON_TYPES = {
 export const IMAGE_SKELETON_STYLE = {
   rounded: 'rounded',
   default: 'default'
+};
+export const BACKGROUND_STYLE = {
+  default: 'default',
+  onContrast: 'onContrast'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "38.21.0",
+  "version": "38.22.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-slider": "1.3.5",
     "@react-google-maps/api": "^2.19.3",
-    "@skyscanner/bpk-foundations-web": "^22.3.0",
+    "@skyscanner/bpk-foundations-web": "^23.0.0",
     "@skyscanner/bpk-svgs": "^20.9.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",