@skyscanner/backpack-web 42.16.0 → 42.18.0

package/bpk-component-radio/src/BpkRadio.js

@@ -14,7 +14,8 @@
  * 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';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkRadio.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -40,7 +41,7 @@ const BpkRadio = ({
       className: getClassName('bpk-radio__input'),
       name: name,
       disabled: disabled,
-      "aria-label": ariaLabel || label,
+      "aria-label": ariaLabel || (typeof label === 'string' ? label : undefined),
       "aria-invalid": isInvalid,
       ...rest
     }), /*#__PURE__*/_jsx("div", {
@@ -51,13 +52,4 @@ const BpkRadio = ({
     })]
   });
 };
-BpkRadio.propTypes = {
-  name: PropTypes.string.isRequired,
-  label: PropTypes.node.isRequired,
-  ariaLabel: PropTypes.string,
-  disabled: PropTypes.bool,
-  white: PropTypes.bool,
-  className: PropTypes.string,
-  valid: PropTypes.bool
-};
 export default BpkRadio;

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

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

package/bpk-component-radio/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 ['radioCheckedColor'];
+ */
+
+export default ['radioCheckedColor'];

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

@@ -1,5 +1,5 @@
-import BpkSwitch, { type Props as BpkSwitchProps } from './src/BpkSwitch';
+import BpkSwitch, { SWITCH_VARIANTS, type Props as BpkSwitchProps, type SwitchVariant } from './src/BpkSwitch';
 import themeAttributes from './src/themeAttributes';
-export type { BpkSwitchProps };
-export { themeAttributes };
+export type { BpkSwitchProps, SwitchVariant };
+export { SWITCH_VARIANTS, themeAttributes };
 export default BpkSwitch;

package/bpk-component-switch/index.js

@@ -14,7 +14,7 @@
  * 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 BpkSwitch from "./src/BpkSwitch";
+ */import BpkSwitch, { SWITCH_VARIANTS } from "./src/BpkSwitch";
 import themeAttributes from "./src/themeAttributes";
-export { themeAttributes };
+export { SWITCH_VARIANTS, themeAttributes };
 export default BpkSwitch;

package/bpk-component-switch/src/BpkSwitch.d.ts

@@ -1,8 +1,14 @@
+export declare const SWITCH_VARIANTS: {
+    readonly default: "default";
+    readonly onContrast: "onContrast";
+};
+export type SwitchVariant = (typeof SWITCH_VARIANTS)[keyof typeof SWITCH_VARIANTS];
 export type Props = {
     ariaLabel: string;
     className?: string | null;
     small?: boolean;
+    variant?: SwitchVariant;
     [rest: string]: any;
 };
-declare const BpkSwitch: ({ ariaLabel, className, small, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSwitch: ({ ariaLabel, className, small, variant, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkSwitch;

package/bpk-component-switch/src/BpkSwitch.js

@@ -19,14 +19,23 @@
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkSwitch.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SWITCH_VARIANTS = {
+  default: 'default',
+  onContrast: 'onContrast'
+};
 const getClassName = cssModules(STYLES);
+const switchVariantClassNames = {
+  [SWITCH_VARIANTS.default]: null,
+  [SWITCH_VARIANTS.onContrast]: getClassName('bpk-switch__switch--on-contrast')
+};
 const BpkSwitch = ({
   ariaLabel,
   className = null,
   small = false,
+  variant = SWITCH_VARIANTS.default,
   ...rest
 }) => {
-  const switchClassNames = getClassName('bpk-switch__switch', small && 'bpk-switch__switch--small');
+  const switchClassNames = getClassName('bpk-switch__switch', small && 'bpk-switch__switch--small', switchVariantClassNames[variant]);
   return /*#__PURE__*/_jsxs("label", {
     className: getClassName('bpk-switch', className),
     ...getDataComponentAttribute('Switch'),

package/bpk-component-switch/src/BpkSwitch.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-switch{position:relative;display:flex;width:fit-content;align-items:center;border-radius:1rem}.bpk-switch__checkbox{position:absolute;opacity:0}.bpk-switch__checkbox:checked~.bpk-switch__switch{background:#0062e3;background:var(--bpk-switch-checked-color, rgb(0, 98, 227))}.bpk-switch__checkbox:checked~.bpk-switch__switch::before{left:1.375rem}.bpk-switch__checkbox:focus-visible~.bpk-switch__switch{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-switch__switch{position:relative;float:right;display:block;min-width:3.25rem;height:2rem;transition:background 200ms linear;border-radius:1rem;background:rgba(0,0,0,.2);cursor:pointer}.bpk-switch__switch::before{position:absolute;top:.125rem;left:.125rem;content:"";display:block;width:1.75rem;height:1.75rem;transition:left 200ms ease-out;border-radius:50%;background:#fff;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-switch__switch--small{min-width:2.5rem;height:1.25rem}.bpk-switch__switch--small::before{width:1rem;height:1rem}
+.bpk-switch{position:relative;display:flex;width:fit-content;align-items:center;border-radius:1rem}.bpk-switch__checkbox{position:absolute;opacity:0}.bpk-switch__checkbox:checked~.bpk-switch__switch{background:#0062e3;background:var(--bpk-switch-checked-color, rgb(0, 98, 227))}.bpk-switch__checkbox:checked~.bpk-switch__switch::before{left:1.375rem}.bpk-switch__checkbox:focus-visible~.bpk-switch__switch{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-switch__switch{position:relative;float:right;display:block;min-width:3.25rem;height:2rem;transition:background 200ms linear;border-radius:1rem;background:rgba(0,0,0,.2);cursor:pointer}.bpk-switch__switch::before{position:absolute;top:.125rem;left:.125rem;content:"";display:block;width:1.75rem;height:1.75rem;transition:left 200ms ease-out;border-radius:50%;background:#fff;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-switch__switch--small{min-width:2.5rem;height:1.25rem}.bpk-switch__switch--small::before{width:1rem;height:1rem}.bpk-switch__switch--on-contrast{background:hsla(0,0%,100%,.2)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.16.0",
+  "version": "42.18.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -28,7 +28,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": "^24.5.0",
+    "@skyscanner/bpk-foundations-web": "^24.6.0",
     "@skyscanner/bpk-svgs": "^20.11.0",
     "tabbable": "^6.4.0",
     "d3-path": "^3.1.0",