@skyscanner/backpack-web 34.16.0-preminor.1 → 34.16.0-preminor.2

package/bpk-component-calendar/src/BpkCalendarContainer.js

@@ -119,7 +119,6 @@ const withCalendarState = Calendar => {
       const rawNextSelectedDate = getRawSelectedDate(nextProps.selectionConfiguration);
       const minDate = startOfDay(nextProps.minDate);
       const maxDate = startOfDay(nextProps.maxDate);
-      // @ts-ignore
       if (focusedDateHasChanged(this.props, nextProps)) {
         this.setState({
           focusedDate: dateToBoundaries(rawNextSelectedDate[0], minDate, maxDate)

package/bpk-component-carousel/src/utils.test.js

@@ -1,3 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 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 { renderHook } from '@testing-library/react';
 import { useScrollToInitialImage } from "./utils";
 describe('useScrollToInitialImage', () => {

package/bpk-component-close-button/src/BpkCloseButton.d.ts

@@ -0,0 +1,10 @@
+import type { SyntheticEvent, FunctionComponent } from 'react';
+type Props = {
+    label: string;
+    onClick: (event: SyntheticEvent<any>) => any;
+    className?: string | null;
+    customIcon?: FunctionComponent<any> | null;
+    onDark?: Boolean;
+};
+declare const BpkCloseButton: ({ className, customIcon, label, onClick, onDark, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkCloseButton;

package/bpk-component-close-button/src/BpkCloseButton.js

@@ -14,53 +14,37 @@
  * 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 CloseIcon from "../../bpk-component-icon/sm/close";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkCloseButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCloseButton = props => {
-  const {
-    className,
-    customIcon,
-    label,
-    onClick,
-    onDark,
-    ...rest
-  } = props;
+const BpkCloseButton = ({
+  className = null,
+  customIcon = null,
+  label,
+  onClick,
+  onDark = false,
+  ...rest
+}) => {
   const classNames = [onDark ? getClassName('bpk-close-button__onDark') : getClassName('bpk-close-button__default')];
   const Icon = customIcon || CloseIcon;
   if (className) {
     classNames.push(className);
   }
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    _jsx("button", {
-      type: "button",
-      title: label,
-      onClick: onClick,
-      "aria-label": label,
-      className: classNames.join(' '),
-      ...rest,
-      children: /*#__PURE__*/_jsx("span", {
-        className: getClassName('bpk-close-button-icon'),
-        children: /*#__PURE__*/_jsx(Icon, {})
-      })
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    title: label,
+    onClick: onClick,
+    "aria-label": label,
+    className: classNames.join(' '),
+    ...rest,
+    children: /*#__PURE__*/_jsx("span", {
+      className: getClassName('bpk-close-button-icon'),
+      children: /*#__PURE__*/_jsx(Icon, {})
     })
-  );
-};
-BpkCloseButton.propTypes = {
-  label: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  customIcon: PropTypes.func,
-  onDark: PropTypes.bool
-};
-BpkCloseButton.defaultProps = {
-  className: null,
-  customIcon: null,
-  onDark: false
+  });
 };
 export default BpkCloseButton;

package/bpk-component-input/src/BpkInput.js

@@ -120,7 +120,7 @@ class BpkInput extends Component {
     };
     return clearable ? /*#__PURE__*/_jsxs("div", {
       className: containerClassNames.join(' '),
-      children: [renderedInput, value.length > 0 && /*#__PURE__*/_jsx("button", {
+      children: [renderedInput, `${value}`.length > 0 && /*#__PURE__*/_jsx("button", {
         type: "button",
         title: clearButtonLabel || '',
         "aria-label": clearButtonLabel || '',

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

@@ -24,7 +24,7 @@ type InputProps = {
     /**
      * **Required:** The value attribute of the input.
      */
-    value: string;
+    value: string | number;
     type?: (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];
 };
 type BaseProps = InputProps & ComponentProps<'input'> & {

package/bpk-component-loading-button/src/BpkLoadingButton.d.ts

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import type { ReactElement, ReactNode } from 'react';
+import type { Props as ButtonProps } from '../../bpk-component-button/src/BpkButtonV2/common-types';
 export declare const ICON_POSITION: {
     LEADING: string;
     TRAILING: string;
@@ -17,44 +17,12 @@ type LoadingProps = {
     large?: boolean;
     link?: boolean;
     linkOnDark?: boolean;
-    loading: boolean;
-    iconOnly: boolean;
+    loading?: boolean;
+    iconOnly?: boolean;
     icon?: ReactElement<any>;
-    iconPosition: string;
+    iconPosition?: (typeof ICON_POSITION)[keyof typeof ICON_POSITION];
     iconDisabled?: ReactElement<any>;
     iconLoading?: ReactElement<any>;
-};
-declare const BpkLoadingButton: {
-    (props: LoadingProps): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        className: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-        secondary: PropTypes.Requireable<boolean>;
-        destructive: PropTypes.Requireable<boolean>;
-        link: PropTypes.Requireable<boolean>;
-        linkOnDark: PropTypes.Requireable<boolean>;
-        loading: PropTypes.Requireable<boolean>;
-        iconOnly: PropTypes.Requireable<boolean>;
-        icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
-        iconPosition: PropTypes.Requireable<string>;
-        iconDisabled: PropTypes.Requireable<PropTypes.ReactElementLike>;
-        iconLoading: PropTypes.Requireable<PropTypes.ReactElementLike>;
-    };
-    defaultProps: {
-        className: null;
-        disabled: boolean;
-        secondary: boolean;
-        destructive: boolean;
-        large: boolean;
-        link: boolean;
-        linkOnDark: boolean;
-        loading: boolean;
-        iconOnly: boolean;
-        icon: null;
-        iconPosition: string;
-        iconDisabled: null;
-        iconLoading: null;
-    };
-};
+} & ButtonProps;
+declare const BpkLoadingButton: (props: LoadingProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkLoadingButton;

package/bpk-component-loading-button/src/BpkLoadingButton.js

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import { BUTTON_TYPES, BpkButtonV2, SIZE_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment, withLargeButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import ArrowIconLg from "../../bpk-component-icon/lg/long-arrow-right";
@@ -60,22 +59,22 @@ const getLoadingIcon = props => {
 const BpkLoadingButton = props => {
   const {
     children,
-    destructive,
-    disabled,
-    featured,
+    destructive = false,
+    disabled = false,
+    featured = false,
     icon,
     iconDisabled,
     iconLoading,
-    iconOnly,
-    iconPosition,
-    large,
-    link,
-    linkOnDark,
-    loading,
-    primaryOnDark,
-    primaryOnLight,
-    secondary,
-    secondaryOnDark,
+    iconOnly = false,
+    iconPosition = ICON_POSITION.TRAILING,
+    large = false,
+    link = false,
+    linkOnDark = false,
+    loading = false,
+    primaryOnDark = false,
+    primaryOnLight = false,
+    secondary = false,
+    secondaryOnDark = false,
     ...rest
   } = props;
   const showBtnDisabled = disabled || loading;
@@ -127,34 +126,4 @@ const BpkLoadingButton = props => {
     })
   });
 };
-BpkLoadingButton.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  secondary: PropTypes.bool,
-  destructive: PropTypes.bool,
-  link: PropTypes.bool,
-  linkOnDark: PropTypes.bool,
-  loading: PropTypes.bool,
-  iconOnly: PropTypes.bool,
-  icon: PropTypes.element,
-  iconPosition: PropTypes.oneOf([ICON_POSITION.LEADING, ICON_POSITION.TRAILING]),
-  iconDisabled: PropTypes.element,
-  iconLoading: PropTypes.element
-};
-BpkLoadingButton.defaultProps = {
-  className: null,
-  disabled: false,
-  secondary: false,
-  destructive: false,
-  large: false,
-  link: false,
-  linkOnDark: false,
-  loading: false,
-  iconOnly: false,
-  icon: null,
-  iconPosition: ICON_POSITION.TRAILING,
-  iconDisabled: null,
-  iconLoading: null
-};
 export default BpkLoadingButton;

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

@@ -1,5 +1,4 @@
-import BpkConfigurableNudger from './src/BpkConfigurableNudger';
 import BpkNudger from './src/BpkNudger';
 import themeAttributes from './src/themeAttributes';
 export default BpkNudger;
-export { themeAttributes, BpkConfigurableNudger };
+export { themeAttributes };

package/bpk-component-nudger/index.js

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-import BpkConfigurableNudger from "./src/BpkConfigurableNudger";
 import BpkNudger from "./src/BpkNudger";
 import themeAttributes from "./src/themeAttributes";
 export default BpkNudger;
-export { themeAttributes, BpkConfigurableNudger };
+export { themeAttributes };

package/bpk-component-nudger/src/BpkNudger.d.ts

@@ -1,3 +1,3 @@
 import { type CommonProps } from './common-types';
-declare const BpkNudger: ({ buttonType, className, icon, id, subtitle, title, ...rest }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkNudger: ({ buttonType, className, decreaseButtonLabel, icon, id, increaseButtonLabel, inputClassName, max, min, name, onValueChange, step, subtitle, title, value, ...rest }: CommonProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkNudger;

package/bpk-component-nudger/src/BpkNudger.js

@@ -16,30 +16,63 @@
  * limitations under the License.
  */
 
+import { useRef } from 'react';
+import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import { withButtonAlignment } from "../../bpk-component-icon";
+import MinusIcon from "../../bpk-component-icon/sm/minus";
+import PlusIcon from "../../bpk-component-icon/sm/plus";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
-import BpkConfigurableNudger from "./BpkConfigurableNudger";
+import { cssModules, setNativeValue } from "../../bpk-react-utils";
 import STYLES from "./BpkNudger.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const compareValues = (a, b) => a - b;
-const incrementValue = currentValue => currentValue + 1;
-const decrementValue = currentValue => currentValue - 1;
-const formatValue = currentValue => currentValue.toString();
 const BpkNudger = ({
   buttonType = 'secondary',
   className = null,
+  decreaseButtonLabel,
   icon,
   id,
+  increaseButtonLabel,
+  inputClassName,
+  max,
+  min,
+  name,
+  onValueChange,
+  step = 1,
   subtitle,
   title,
+  value,
   ...rest
 }) => {
-  const classNames = getClassName(title && 'bpk-nudger__container');
+  // Ensure that the minimum value is 0 or greater it's not designed to handle negative values.
+  const minimum = min < 0 ? 0 : min;
+  const containerClassNames = getClassName(title && 'bpk-nudger__container');
+  const inputClassNames = getClassName('bpk-nudger__input', 'bpk-nudger__input--numeric', inputClassName && inputClassName, buttonType === 'secondaryOnDark' && 'bpk-nudger__input--secondary-on-dark');
+  const nudgerClassNames = getClassName('bpk-nudger', className);
+  const maxButtonDisabled = compareValues(value, max) >= 0;
+  const minButtonDisabled = compareValues(value, minimum) <= 0;
+  const AlignedMinusIcon = withButtonAlignment(MinusIcon);
+  const AlignedPlusIcon = withButtonAlignment(PlusIcon);
+  const inputRef = useRef(null);
+  const incrementValue = currentValue => currentValue + step;
+  const decrementValue = currentValue => currentValue - step;
+  const valueLimitter = element => {
+    if (element.valueAsNumber < minimum) {
+      onValueChange(minimum);
+      setNativeValue(element, minimum, false);
+    } else if (element.valueAsNumber > max) {
+      onValueChange(max);
+      setNativeValue(element, max, false);
+    }
+    if (element.valueAsNumber >= minimum && element.valueAsNumber <= max) {
+      onValueChange(element.valueAsNumber);
+    }
+  };
   return /*#__PURE__*/_jsxs("div", {
-    className: classNames,
+    className: containerClassNames,
     children: [title && /*#__PURE__*/_jsxs("div", {
       className: getClassName('bpk-nudger__label'),
       children: [/*#__PURE__*/_jsx(BpkLabel, {
@@ -60,19 +93,68 @@ const BpkNudger = ({
           })
         })]
       })]
-    }), /*#__PURE__*/_jsx(BpkConfigurableNudger, {
-      inputClassName: getClassName('bpk-nudger__input--numeric'),
-      compareValues: compareValues,
-      incrementValue: incrementValue,
-      decrementValue: decrementValue,
-      formatValue: formatValue
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      ,
-      className: className,
-      buttonType: buttonType,
-      id: id,
-      ...rest
+    }), /*#__PURE__*/_jsxs("div", {
+      className: nudgerClassNames,
+      children: [/*#__PURE__*/_jsx(BpkButtonV2, {
+        type: BUTTON_TYPES[buttonType],
+        iconOnly: true,
+        onClick: () => {
+          if (Number.isNaN(value)) {
+            onValueChange(minimum);
+            inputRef.current && setNativeValue(inputRef.current, minimum);
+            return;
+          }
+          const newValue = decrementValue(value);
+          onValueChange(newValue);
+          // We want to maintain native input events across our form components. Along with react updating
+          // the value attribute we can set it via native handlers and emit a "change" event.
+          inputRef.current && setNativeValue(inputRef.current, newValue);
+        },
+        disabled: minButtonDisabled,
+        title: decreaseButtonLabel,
+        "aria-controls": id,
+        children: /*#__PURE__*/_jsx(AlignedMinusIcon, {})
+      }), /*#__PURE__*/_jsx("input", {
+        type: "number",
+        "aria-live": "polite",
+        defaultValue: value,
+        id: id,
+        ref: inputRef,
+        name: name || id,
+        step: step,
+        onInput: event => {
+          const inputElement = event.target;
+          if (!inputElement.validity.valid &&
+          // allow the removal of a value
+          Number.isNaN(inputElement.valueAsNumber)) {
+            // set prev value if entry invalid
+            onValueChange(value);
+            setNativeValue(inputElement, value, false);
+          }
+          valueLimitter(inputElement);
+        },
+        className: inputClassNames,
+        ...rest
+      }), /*#__PURE__*/_jsx(BpkButtonV2, {
+        type: BUTTON_TYPES[buttonType],
+        iconOnly: true,
+        onClick: () => {
+          if (Number.isNaN(value)) {
+            onValueChange(max);
+            inputRef.current && setNativeValue(inputRef.current, max);
+            return;
+          }
+          const newValue = incrementValue(value);
+          onValueChange(newValue);
+          // We want to maintain native input events across our form components. Along with react updating
+          // the value attribute we can set it via native handlers and emit a "change" event.
+          inputRef.current && setNativeValue(inputRef.current, newValue);
+        },
+        disabled: maxButtonDisabled,
+        title: increaseButtonLabel,
+        "aria-controls": id,
+        children: /*#__PURE__*/_jsx(AlignedPlusIcon, {})
+      })]
     })]
   });
 };

package/bpk-component-nudger/src/BpkNudger.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-html[dir=rtl] .bpk-nudger{display:flex;flex-direction:row-reverse}.bpk-nudger__input{display:inline-block;padding:.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-nudger__input--secondary-on-dark{background-color:rgba(0,0,0,0);color:#fff}.bpk-nudger__input--numeric{width:2.5rem}.bpk-nudger__container{display:flex;justify-content:space-between;align-items:center}.bpk-nudger__label{display:flex;gap:.5rem}.bpk-nudger__label--title-subtitle{display:inline-flex;flex-direction:column;justify-content:space-between}.bpk-nudger__label--subtitle{color:#626971}
+html[dir=rtl] .bpk-nudger{display:flex}.bpk-nudger__input{display:inline-block;padding:.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-nudger__input::-webkit-outer-spin-button,.bpk-nudger__input::-webkit-inner-spin-button{margin:0;appearance:none}.bpk-nudger__input[type=number]{appearance:textfield}.bpk-nudger__input--secondary-on-dark{background-color:rgba(0,0,0,0);color:#fff}.bpk-nudger__input--numeric{width:2.5rem}.bpk-nudger__container{display:flex;justify-content:space-between;align-items:center}.bpk-nudger__label{display:flex;gap:.5rem}.bpk-nudger__label--title-subtitle{display:inline-flex;flex-direction:column;justify-content:space-between}.bpk-nudger__label--subtitle{color:#626971}

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

@@ -5,11 +5,12 @@ export declare const BUTTON_TYPES: {
 };
 export type CommonProps = {
     id: string;
-    min: string | number;
-    max: string | number;
-    value: string | number;
-    onChange: (arg0: any) => void | null;
-    name?: string | null;
+    min: number;
+    max: number;
+    value: number;
+    onValueChange: (arg0: number) => void;
+    name?: string | undefined;
+    step?: number;
     className?: string | null;
     /**
      * This is the label that will be read out when screen reader users tab to the increase button. Make sure you use a descriptive label.
@@ -18,6 +19,7 @@ export type CommonProps = {
      * Function that handle the incrementing of the current selected value.
      */
     increaseButtonLabel: string;
+    inputClassName?: string | undefined;
     /**
      * This is the label that will be read out when screen reader users tab to the decrease button. Make sure you use a descriptive label
      */

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

@@ -8,7 +8,10 @@ export type Props = {
     value: number[] | number;
     ariaLabel: string[];
     ariaValuetext?: string[];
+    inputProps?: [{
+        [key: string]: any;
+    }];
     [rest: string]: any;
 };
-declare const BpkSlider: ({ ariaLabel, ariaValuetext, max, min, minDistance, onAfterChange, onChange, step, value, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSlider: ({ ariaLabel, ariaValuetext, inputProps, max, min, minDistance, onAfterChange, onChange, step, value, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkSlider;

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

@@ -15,15 +15,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { forwardRef, useRef, useEffect } from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as Slider from '@radix-ui/react-slider';
-import { cssModules, isRTL } from "../../bpk-react-utils";
+import { usePrevious } from '@radix-ui/react-use-previous';
+import { cssModules, isRTL, setNativeValue } from "../../bpk-react-utils";
 import STYLES from "./BpkSlider.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkSlider = ({
   ariaLabel,
   ariaValuetext,
+  inputProps,
   max,
   min,
   minDistance,
@@ -67,8 +70,53 @@ const BpkSlider = ({
       "aria-label": ariaLabel[index],
       "aria-valuetext": ariaValuetext ? ariaValuetext[index] : val.toString(),
       className: getClassName('bpk-slider__thumb'),
-      "aria-valuenow": currentValue[index]
+      "aria-valuenow": currentValue[index],
+      asChild: true,
+      children: /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsx(BubbleInput, {
+          value: currentValue[index],
+          ...(inputProps && inputProps[index])
+        })
+      })
     }, ariaLabel[index]))]
   });
 };
+
+// Work around until radix-ui/react-slider is updated to accept an inputRef prop https://github.com/radix-ui/primitives/pull/3033
+const BubbleInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    value,
+    ...inputProps
+  } = props;
+  const ref = useRef();
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const prevValue = usePrevious(value);
+
+  // Bubble value change to parents (e.g form change event)
+  useEffect(() => {
+    const input = ref.current;
+    if (prevValue !== value) {
+      setNativeValue(input, `${value}`);
+    }
+  }, [prevValue, value]);
+
+  /**
+   * We purposefully do not use `type="hidden"` here otherwise forms that
+   * wrap it will not be able to access its value via the FormData API.
+   *
+   * We purposefully do not add the `value` attribute here to allow the value
+   * to be set programatically and bubble to any parent form `onChange` event.
+   * Adding the `value` will cause React to consider the programatic
+   * dispatch a duplicate and it will get swallowed.
+   */
+  return /*#__PURE__*/_jsx("input", {
+    style: {
+      display: 'none'
+    },
+    ...inputProps,
+    ref: composedRefs,
+    type: "number",
+    defaultValue: value
+  });
+});
 export default BpkSlider;

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

@@ -0,0 +1,3 @@
+import BpkSnippet, { BODY_STYLE, BUTTON_STYLE, DESKTOP_LAYOUT, HEADLINE_STYLE, IMAGE_ORIENTATION } from './src/BpkSnippet';
+export default BpkSnippet;
+export { BODY_STYLE, BUTTON_STYLE, DESKTOP_LAYOUT, HEADLINE_STYLE, IMAGE_ORIENTATION, };

package/bpk-component-snippet/index.js

@@ -0,0 +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.
+ */
+
+import BpkSnippet, { BODY_STYLE, BUTTON_STYLE, DESKTOP_LAYOUT, HEADLINE_STYLE, IMAGE_ORIENTATION } from "./src/BpkSnippet";
+export default BpkSnippet;
+export { BODY_STYLE, BUTTON_STYLE, DESKTOP_LAYOUT, HEADLINE_STYLE, IMAGE_ORIENTATION };

package/bpk-component-snippet/src/BpkSnippet.d.ts

@@ -0,0 +1,48 @@
+import type { MouseEvent } from 'react';
+export declare const BODY_STYLE: {
+    readonly bodyDefault: "body-default";
+    readonly bodyLongform: "body-longform";
+};
+export declare const BUTTON_STYLE: {
+    readonly primary: "primary";
+    readonly featured: "featured";
+};
+export declare const HEADLINE_STYLE: {
+    readonly heading1: "heading-1";
+    readonly heading2: "heading-2";
+    readonly heading3: "heading-3";
+    readonly heading4: "heading-4";
+    readonly heading5: "heading-5";
+    readonly hero1: "hero-1";
+    readonly hero2: "hero-2";
+    readonly hero3: "hero-3";
+    readonly hero4: "hero-4";
+    readonly hero5: "hero-5";
+};
+export declare const DESKTOP_LAYOUT: {
+    readonly imageLeft: "imageLeft";
+    readonly imageRight: "imageRight";
+    readonly vertical: "vertical";
+};
+export declare const IMAGE_ORIENTATION: {
+    readonly landscape: "landscape";
+    readonly portrait: "portrait";
+    readonly square: "square";
+};
+export type Props = {
+    src: string;
+    altText: string;
+    headline?: string | null;
+    subheading?: string | null;
+    bodyText?: string | null;
+    buttonText?: string | null;
+    bodyStyle?: (typeof BODY_STYLE)[keyof typeof BODY_STYLE];
+    buttonStyle?: (typeof BUTTON_STYLE)[keyof typeof BUTTON_STYLE];
+    headlineStyle?: (typeof HEADLINE_STYLE)[keyof typeof HEADLINE_STYLE];
+    desktopLayout?: (typeof DESKTOP_LAYOUT)[keyof typeof DESKTOP_LAYOUT];
+    imageOrientation?: (typeof IMAGE_ORIENTATION)[keyof typeof IMAGE_ORIENTATION];
+    imageRadius?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void;
+};
+declare const BpkSnippet: ({ altText, bodyStyle, bodyText, buttonStyle, buttonText, desktopLayout, headline, headlineStyle, imageOrientation, imageRadius, onClick, src, subheading, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkSnippet;