@skyscanner/backpack-web 34.0.0-premajor.2 → 34.0.0

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-scrollable-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-scrollable-calendar-grid__title{margin-top:1.5rem}
+.bpk-scrollable-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-scrollable-calendar-grid__title{display:block;margin-top:1.5rem}

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts

@@ -1,21 +1,3 @@
-/*
- * 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 type { ElementType } from 'react';
 import type { BpkCalendarGridProps, SelectionConfiguration } from '../../bpk-component-calendar';
 type Props = Partial<BpkCalendarGridProps> & {
@@ -29,6 +11,9 @@ type Props = Partial<BpkCalendarGridProps> & {
     focusedDate?: Date | null;
     selectionConfiguration?: SelectionConfiguration;
     className?: string | null;
+    /**
+     * Sets the height of month rows in 'rem' units. If not specified, the default value of `2.75rem` will be used.
+     */
     customRowHeight?: number;
 };
 declare const BpkScrollableCalendarGridList: (props: Props) => JSX.Element;

package/bpk-component-scrollable-calendar/src/utils.d.ts

@@ -1,21 +1,3 @@
-/*
- * 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.
- */
-
 declare const getMonthsArray: (startDate: Date, count: number) => Date[];
 declare const getMonthItemHeights: (months: Date[], weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6, columnCount: number, rowHeight: number, baseMonthItemHeight: number) => number[];
 export { getMonthsArray, getMonthItemHeights };

package/bpk-component-section-header/index.d.ts

@@ -1,22 +1,3 @@
-/*
- * 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 BpkSectionHeader, { SECTION_TYPES } from './src/BpkSectionHeader';
-
 export default BpkSectionHeader;
 export { SECTION_TYPES };

package/bpk-component-section-header/src/BpkSectionHeader.d.ts

@@ -1,32 +1,14 @@
-/*
- * 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 type { ReactNode } from 'react';
 export declare const SECTION_TYPES: {
-  default: 'default',
-  onDark: 'onDark',
+    readonly default: "default";
+    readonly onDark: "on-dark";
 };
 export type SectionType = (typeof SECTION_TYPES)[keyof typeof SECTION_TYPES];
 type Props = {
-  title: string;
-  description?: string;
-  button?: ReactNode;
-  type?: SectionType;
+    title: string;
+    description?: string;
+    button?: ReactNode;
+    type?: SectionType;
 };
-declare const BpkSectionHeader: ({ title, description, button, type }: Props) => JSX.Element;
+declare const BpkSectionHeader: ({ button, description, title, type, }: Props) => JSX.Element;
 export default BpkSectionHeader;

package/bpk-component-section-header/src/BpkSectionHeader.js

@@ -34,19 +34,14 @@ const BpkSectionHeader = ({
   className: getClassName('bpk-section-header'),
   children: [/*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-section-header__title-description', `bpk-section-header__title-description--${type}`),
-    children: [/*#__PURE__*/_jsx(BpkText, {
-      tagName: "h2"
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      ,
+    children: [/*#__PURE__*/_jsx("h2", {
       className: getClassName('bpk-section-header__title'),
       children: title
-    }), description && /*#__PURE__*/_jsx(BpkText
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    , {
+    }), description && /*#__PURE__*/_jsx("span", {
       className: getClassName('bpk-section-header__description'),
-      children: description
+      children: /*#__PURE__*/_jsx(BpkText, {
+        children: description
+      })
     })]
   }), button]
 });

package/bpk-component-section-header/src/BpkSectionHeader.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-section-header{display:flex;justify-content:space-between;align-items:flex-start;background-color:rgba(0,0,0,0)}.bpk-section-header__title-description{display:flex;flex-direction:column}.bpk-section-header__title-description--default{color:#161616}.bpk-section-header__title-description--on-dark{color:#fff}.bpk-section-header__title{font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-section-header__title{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-section-header__description{padding-top:.25rem}
+.bpk-section-header{display:flex;justify-content:space-between;align-items:flex-start;background-color:rgba(0,0,0,0)}.bpk-section-header__title-description{display:flex;flex-direction:column}.bpk-section-header__title-description--default{color:#161616}.bpk-section-header__title-description--on-dark{color:#fff}.bpk-section-header__title{margin:0;font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-section-header__title{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-section-header__description{padding-top:.25rem}

package/bpk-component-section-list/src/BpkSectionListItem.js

@@ -43,11 +43,9 @@ const BpkSectionListItem = props => {
         onClick: onClick,
         className: classNames.join(' '),
         ...rest,
-        children: [children, /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        , {
-          className: getClassName('bpk-section-list-item__chevron')
+        children: [children, /*#__PURE__*/_jsx("span", {
+          className: getClassName('bpk-section-list-item__chevron'),
+          children: /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport, {})
         })]
       })
     );
@@ -61,11 +59,9 @@ const BpkSectionListItem = props => {
         onClick: onClick,
         className: classNames.join(' '),
         ...rest,
-        children: [children, /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        , {
-          className: getClassName('bpk-section-list-item__chevron')
+        children: [children, /*#__PURE__*/_jsx("span", {
+          className: getClassName('bpk-section-list-item__chevron'),
+          children: /*#__PURE__*/_jsx(BpkLargeChevronRightIconWithRtlSupport, {})
         })]
       })
     );

package/bpk-component-section-list/src/BpkSectionListItem.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-section-list-item{display:flex;width:100%;min-height:4rem;padding:.5rem 1rem;justify-content:space-between;align-items:center;border:none;background-color:#fff;color:#161616;text-decoration:none;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-section-list-item--interactive{cursor:pointer}.bpk-section-list-item__chevron{fill:#626971}.bpk-section-list-item:hover .bpk-section-list-item__chevron{fill:#161616}.bpk-section-list-item:active .bpk-section-list-item__chevron{fill:#161616}
+.bpk-section-list-item{display:flex;width:100%;min-height:4rem;padding:.5rem 1rem;justify-content:space-between;align-items:center;border:none;background-color:#fff;color:#161616;text-decoration:none;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-section-list-item--interactive{cursor:pointer}.bpk-section-list-item__chevron{display:contents;fill:#626971}.bpk-section-list-item:hover .bpk-section-list-item__chevron{fill:#161616}.bpk-section-list-item:active .bpk-section-list-item__chevron{fill:#161616}

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

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

package/{bpk-component-datepicker/src/BpkDatepicker.module.css → bpk-component-skeleton/index.js}

@@ -1,18 +1,21 @@
 /*
  * 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.
  */
-.bpk-datepicker__calendar{margin:0 auto}.bpk-datepicker__input{display:inline-block;width:100%}
+
+import BpkSkeleton from "./src/BpkSkeleton";
+export { SIZE_TYPES, SKELETON_TYPES, IMAGE_SKELETON_STYLE } from "./src/common-types";
+export default BpkSkeleton;

package/bpk-component-skeleton/src/BpkBaseSkeleton.d.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+type Props = {
+    skeletonStyle: string;
+    styleObj?: {
+        width: string;
+        height: string;
+    };
+};
+declare const BpkBaseSkeleton: ({ skeletonStyle, styleObj }: Props) => JSX.Element;
+export default BpkBaseSkeleton;

package/bpk-component-skeleton/src/BpkBaseSkeleton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CUSTOM_SIZE_TYPE } from './common-types';
+type Props = {
+    skeletonStyle: string;
+    styleObj?: CUSTOM_SIZE_TYPE;
+};
+declare const BpkBaseSkeleton: ({ skeletonStyle, styleObj, }: Props) => JSX.Element;
+export default BpkBaseSkeleton;

package/{bpk-component-input/src/BpkClearButton.module.css → bpk-component-skeleton/src/BpkBaseSkeleton.js}

@@ -1,18 +1,30 @@
 /*
  * 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.
  */
-.bpk-clear-button{padding:0;border:0;background-color:rgba(0,0,0,0);color:#626971;cursor:pointer;appearance:none}.bpk-no-touch-support .bpk-clear-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-clear-button:hover:not(:active):not(:disabled){color:#161616}.bpk-clear-button:active{color:#161616}.bpk-clear-button__icon{fill:currentcolor}
+
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkBaseSkeleton.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkBaseSkeleton = ({
+  skeletonStyle,
+  styleObj = undefined
+}) => /*#__PURE__*/_jsx("div", {
+  className: getClassName('bpk-skeleton', skeletonStyle),
+  style: styleObj
+});
+export default BpkBaseSkeleton;

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+.bpk-skeleton{width:6rem;height:6rem;background:#e0e4e9;background-image:linear-gradient(to right, rgba(255, 255, 255, 0) 7.08%, rgba(255, 255, 255, 0.6) 49.22%, rgba(255, 255, 255, 0) 100%);background-repeat:no-repeat;animation:shimmer-animation 1600ms infinite linear;animation-direction:normal}html[dir=rtl] .bpk-skeleton{animation-direction:reverse}@keyframes shimmer-animation{0%{background-position:-24rem 0}100%{background-position:24rem 0}}

package/bpk-component-skeleton/src/BpkSkeleton.d.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ComponentProps } from './common-types';
+declare const BpkSkeleton: (props: ComponentProps) => JSX.Element;
+export default BpkSkeleton;

package/bpk-component-skeleton/src/BpkSkeleton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ComponentProps } from './common-types';
+declare const BpkSkeleton: (props: ComponentProps) => JSX.Element;
+export default BpkSkeleton;

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

@@ -0,0 +1,38 @@
+/*
+ * 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 { cssModules } from "../../bpk-react-utils";
+import BpkBaseSkeleton from "./BpkBaseSkeleton";
+import { SKELETON_TYPES, IMAGE_SKELETON_STYLE, SIZE_TYPES } 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 {
+    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 styleObj = typeof size === 'object' ? size : undefined;
+  return /*#__PURE__*/_jsx(BpkBaseSkeleton, {
+    skeletonStyle: classNames,
+    styleObj: styleObj
+  });
+};
+export default BpkSkeleton;

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+.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}

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

@@ -0,0 +1,37 @@
+export type CUSTOM_SIZE_TYPE = {
+    width: string;
+    height: string;
+};
+export declare const SIZE_TYPES: {
+    small: 'small';
+    default: 'default';
+    large: 'large';
+};
+export type SizeType = (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES] | CUSTOM_SIZE_TYPE;
+export declare const SKELETON_TYPES: {
+    image: 'image';
+    bodyText: 'bodyText';
+    circle: 'circle';
+    headline: 'headline';
+};
+export type SkeletonType = (typeof SKELETON_TYPES)[keyof typeof SKELETON_TYPES];
+export declare const IMAGE_SKELETON_STYLE: {
+    rounded: 'rounded';
+    default: 'default';
+};
+export type ImageSkeletonStyle = (typeof IMAGE_SKELETON_STYLE)[keyof typeof IMAGE_SKELETON_STYLE];
+type SizeMap = {
+    [SKELETON_TYPES.image]: (typeof SIZE_TYPES)['default'];
+    [SKELETON_TYPES.bodyText]: (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES];
+    [SKELETON_TYPES.circle]: Exclude<(typeof SIZE_TYPES)[keyof typeof SIZE_TYPES], 'large'>;
+    [SKELETON_TYPES.headline]: (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES];
+};
+export type ComponentProps = {
+    type: Extract<SkeletonType, 'image'>;
+    size?: SizeMap['image'] | CUSTOM_SIZE_TYPE;
+    style?: ImageSkeletonStyle;
+} | {
+    type: Exclude<keyof SizeMap, 'image'>;
+    size?: SizeMap[keyof SizeMap] | CUSTOM_SIZE_TYPE;
+};
+export {};

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

@@ -0,0 +1,37 @@
+export type CUSTOM_SIZE_TYPE = {
+    width: string;
+    height: string;
+};
+export declare const SIZE_TYPES: {
+    readonly small: "small";
+    readonly default: "default";
+    readonly large: "large";
+};
+export type SizeType = (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES] | CUSTOM_SIZE_TYPE;
+export declare const SKELETON_TYPES: {
+    readonly image: "image";
+    readonly bodyText: "bodyText";
+    readonly circle: "circle";
+    readonly headline: "headline";
+};
+export type SkeletonType = (typeof SKELETON_TYPES)[keyof typeof SKELETON_TYPES];
+export declare const IMAGE_SKELETON_STYLE: {
+    readonly rounded: "rounded";
+    readonly default: "default";
+};
+export type ImageSkeletonStyle = (typeof IMAGE_SKELETON_STYLE)[keyof typeof IMAGE_SKELETON_STYLE];
+type SizeMap = {
+    [SKELETON_TYPES.image]: (typeof SIZE_TYPES)['default'];
+    [SKELETON_TYPES.bodyText]: (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES];
+    [SKELETON_TYPES.circle]: Exclude<(typeof SIZE_TYPES)[keyof typeof SIZE_TYPES], 'large'>;
+    [SKELETON_TYPES.headline]: (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES];
+};
+export type ComponentProps = {
+    type: Extract<SkeletonType, 'image'>;
+    size?: SizeMap['image'] | CUSTOM_SIZE_TYPE;
+    style?: ImageSkeletonStyle;
+} | {
+    type: Exclude<keyof SizeMap, 'image'>;
+    size?: SizeMap[keyof SizeMap] | CUSTOM_SIZE_TYPE;
+};
+export {};

package/{bpk-component-input/src/BpkClearButton.d.ts → bpk-component-skeleton/src/common-types.js}

@@ -16,9 +16,18 @@
  * limitations under the License.
  */
 
-import type { ComponentProps } from 'react';
-interface Props extends ComponentProps<'button'> {
-    label: string;
-}
-declare const BpkClearButton: ({ className, label, onClick, ...rest }: Props) => JSX.Element;
-export default BpkClearButton;
+export const SIZE_TYPES = {
+  small: 'small',
+  default: 'default',
+  large: 'large'
+};
+export const SKELETON_TYPES = {
+  image: 'image',
+  bodyText: 'bodyText',
+  circle: 'circle',
+  headline: 'headline'
+};
+export const IMAGE_SKELETON_STYLE = {
+  rounded: 'rounded',
+  default: 'default'
+};

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

@@ -0,0 +1,4 @@
+import BpkSlider from './src/BpkSlider';
+import themeAttributes from './src/themeAttributes';
+export default BpkSlider;
+export { themeAttributes };

package/bpk-component-slider/src/BpkSlider.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export type Props = {
+    max: number;
+    min: number;
+    minDistance?: number;
+    step?: number;
+    onChange: (value: number[] | number) => void;
+    onAfterChange?: (value: number[] | number) => void;
+    value: number[] | number;
+    ariaLabel: string[];
+    ariaValuetext?: string[];
+    [rest: string]: any;
+};
+declare const BpkSlider: ({ ariaLabel, ariaValuetext, max, min, minDistance, onAfterChange, onChange, step, value, ...rest }: Props) => JSX.Element;
+export default BpkSlider;

package/bpk-component-slider/src/BpkSlider.js

@@ -16,48 +16,59 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import Slider from 'react-slider';
+import * as Slider from '@radix-ui/react-slider';
 import { cssModules, isRTL } from "../../bpk-react-utils";
 import STYLES from "./BpkSlider.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkSlider = props => {
-  const {
-    className,
-    ...rest
-  } = props;
+const BpkSlider = ({
+  ariaLabel,
+  ariaValuetext,
+  max,
+  min,
+  minDistance,
+  onAfterChange,
+  onChange,
+  step,
+  value,
+  ...rest
+}) => {
   const invert = isRTL();
-  const classNames = [getClassName('bpk-slider')];
-  const thumbClassNames = [getClassName('bpk-slider__handle')];
-  const trackClassNames = [getClassName('bpk-slider__bar')];
-  const isRange = (rest.value || rest.defaultValue || []).length > 1;
-  if (isRange) {
-    classNames.push(getClassName('bpk-slider--range'));
-  }
-  if (className) {
-    classNames.push(getClassName(className));
-  }
-  return /*#__PURE__*/_jsx(Slider, {
+  const currentValue = Array.isArray(value) ? value : [value];
+  const processSliderValues = (sliderValues, callback) => {
+    const val = sliderValues.length === 1 ? sliderValues[0] : sliderValues;
+    if (callback) {
+      callback(val);
+    }
+  };
+  const handleOnChange = sliderValues => {
+    processSliderValues(sliderValues, onChange);
+  };
+  const handleOnAfterChange = sliderValues => {
+    processSliderValues(sliderValues, onAfterChange);
+  };
+  return /*#__PURE__*/_jsxs(Slider.Root, {
+    className: getClassName('bpk-slider'),
+    defaultValue: currentValue,
+    min: min,
+    max: max,
+    step: step || 1,
+    onValueChange: handleOnChange,
+    onValueCommit: handleOnAfterChange,
+    inverted: invert,
+    minStepsBetweenThumbs: minDistance,
     ...rest,
-    withTracks: true,
-    snapDragDisabled: false,
-    invert: invert
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    ,
-    className: classNames.join(' '),
-    thumbClassName: thumbClassNames.join(' '),
-    thumbActiveClassName: getClassName('bpk-slider__handle--active'),
-    trackClassName: trackClassNames.join(' ')
+    children: [/*#__PURE__*/_jsx(Slider.Track, {
+      className: getClassName('bpk-slider__track'),
+      children: /*#__PURE__*/_jsx(Slider.Range, {
+        className: getClassName('bpk-slider__range')
+      })
+    }), currentValue.map((val, index) => /*#__PURE__*/_jsx(Slider.Thumb, {
+      "aria-label": ariaLabel[index],
+      "aria-valuetext": ariaValuetext ? ariaValuetext[index] : val.toString(),
+      className: getClassName('bpk-slider__thumb'),
+      "aria-valuenow": currentValue[index]
+    }, ariaLabel[index]))]
   });
 };
-BpkSlider.propTypes = {
-  className: PropTypes.string
-};
-BpkSlider.defaultProps = {
-  className: null
-};
 export default BpkSlider;

package/bpk-component-slider/src/BpkSlider.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-slider{height:1.25rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bpk-slider__handle{display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border-radius:50%;background-color:#0062e3;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-slider__handle::after{position:absolute;content:"";width:2.5rem;height:2.5rem;border-radius:50%}.bpk-slider__handle--active{transform:scale(1.2) translate3d(0, 0, 0);background-color:#154679}.bpk-slider__bar{top:calc(50% - 0.125rem);height:.25rem;border-radius:.5rem;background-color:#c1c7cf}.bpk-slider>div[class$="0"]{background-color:#0062e3;background-color:var(--bpk-slider-bar-color, rgb(0, 98, 227))}.bpk-slider--range>div[class$="0"]{background-color:#c1c7cf}.bpk-slider--range>div[class$="1"]{background-color:#0062e3;background-color:var(--bpk-slider-bar-color, rgb(0, 98, 227))}
+.bpk-slider{position:relative;display:flex;height:1.25rem;align-items:center;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;user-select:none}.bpk-slider__track{position:relative;height:.25rem;flex-grow:1;background-color:#c1c7cf}.bpk-slider__range{position:absolute;height:100%;background-color:#0062e3}.bpk-slider__thumb{display:block;width:1.25rem;height:1.25rem;border-radius:50%;background-color:#0062e3;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-slider__thumb::after{position:absolute;content:"";width:2.5rem;height:2.5rem;border-radius:50%}.bpk-slider__thumb:active{transform:scale(1.2) translate3d(0, 0, 0);background-color:#154679}

package/bpk-component-slider/src/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

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

@@ -0,0 +1,6 @@
+import BpkExtraLargeSpinner from './src/BpkExtraLargeSpinner';
+import BpkLargeSpinner from './src/BpkLargeSpinner';
+import BpkSpinner from './src/BpkSpinner';
+import SPINNER_TYPES from './src/spinnerTypes';
+import themeAttributes from './src/themeAttributes';
+export { BpkSpinner, BpkLargeSpinner, BpkExtraLargeSpinner, SPINNER_TYPES, themeAttributes, };

package/bpk-component-spinner/index.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 BpkExtraLargeSpinner from "./src/BpkExtraLargeSpinner";
+ */
+
+import BpkExtraLargeSpinner from "./src/BpkExtraLargeSpinner";
 import BpkLargeSpinner from "./src/BpkLargeSpinner";
 import BpkSpinner from "./src/BpkSpinner";
 import SPINNER_TYPES from "./src/spinnerTypes";