@skyscanner/backpack-web 25.4.0-alpha → 25.4.1

package/bpk-component-chip/index.ts

@@ -1,33 +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 BpkSelectableChip, {
-  type Props as SelectableProps,
-} from './src/BpkSelectableChip';
-import BpkDismissibleChip from './src/BpkDismissibleChip';
-import BpkDropdownChip from './src/BpkDropdownChip';
-import type { CommonProps } from './src/commonTypes';
-import { CHIP_TYPES } from './src/commonTypes';
-import themeAttributes from './src/themeAttributes';
-
-export type BpkSelectableChipProps = SelectableProps;
-export type BpkDismissibleChipProps = CommonProps;
-export type BpkDropdownChipProps = CommonProps;
-
-export default BpkSelectableChip;
-export { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES, themeAttributes };

package/bpk-component-chip/src/BpkDismissibleChip-test.tsx

@@ -1,84 +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 { render } from '@testing-library/react';
-
-import BpkDismissibleChip from './BpkDismissibleChip';
-import type { CommonProps as Props } from './commonTypes';
-import { CHIP_TYPES } from './commonTypes';
-
-// Just a convenience wrapper that includes the default props so we don't
-// have to keep writing them for each test.
-const TestChip = ({
-  ...rest
-}: Omit<Props, 'onClick' | 'accessibilityLabel' | 'children'>) => (
-  <BpkDismissibleChip
-    onClick={() => null}
-    accessibilityLabel="Dismiss"
-    {...rest}
-  >
-    Dismiss me
-  </BpkDismissibleChip>
-);
-
-describe('BpkDismissibleChip', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(<TestChip />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it(`should override setting selected={true}, resulting in selected={false}`, () => {
-    const { asFragment } = render(<TestChip selected />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it(`should ignore setting a trailing accessory view, resulting in a close icon`, () => {
-    const { asFragment } = render(
-      // @ts-ignore
-      <TestChip trailingAccessoryView={<span>trailing</span>} />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  Object.values(CHIP_TYPES).forEach((chipType) => {
-    it(`should render correctly with type="${chipType}"`, () => {
-      const { asFragment } = render(<TestChip type={chipType} />);
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it(`should render correctly with type="${chipType}" and disabled`, () => {
-      const { asFragment } = render(<TestChip type={chipType} disabled />);
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it(`should render correctly with type="${chipType}" and a leading accessory view`, () => {
-      const { asFragment } = render(
-        <TestChip
-          type={chipType}
-          leadingAccessoryView={<span>Leading</span>}
-        />,
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
-
-  it('should render correctly with a "className" attribute', () => {
-    const { asFragment } = render(<TestChip className="custom-class" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/bpk-component-chip/src/BpkDismissibleChip.tsx

@@ -1,61 +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.
- */
-
-/*
-The dismissible chip component is just a selectable chip that's
-been hard coded to have disabled={false}, selected and a trailing
-accessory view of a close icon.
-*/
-
-import { cssModules } from '../../bpk-react-utils';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import CloseCircleIconSm from '../../bpk-component-icon/sm/close-circle';
-
-import BpkSelectableChip from './BpkSelectableChip';
-import type { CommonProps as Props } from './commonTypes';
-import { CHIP_TYPES } from './commonTypes';
-import STYLES from './BpkSelectableChip.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const BpkDismissibleChip = ({
-  className,
-  leadingAccessoryView = null,
-  type = CHIP_TYPES.default,
-  ...rest
-}: Props) => {
-  const iconClassNames = getClassName(
-    `bpk-chip--${type}-dismissible__trailing-accessory-view`,
-  );
-  const classNames = getClassName(`bpk-chip--${type}-dismissible`, className);
-
-  return (
-    <BpkSelectableChip
-      {...rest}
-      leadingAccessoryView={leadingAccessoryView}
-      disabled={false}
-      trailingAccessoryView={<CloseCircleIconSm className={iconClassNames} />}
-      selected
-      type={type}
-      role="button" // Override role="checkbox" because this chip is not selectable.
-      className={classNames}
-    />
-  );
-};
-
-export default BpkDismissibleChip;

package/bpk-component-chip/src/BpkDropdownChip-test.tsx

@@ -1,76 +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 { render } from '@testing-library/react';
-
-import BpkDropdownChip from './BpkDropdownChip';
-import { CHIP_TYPES } from './commonTypes';
-
-// Just a convenience wrapper that includes the default props so we don't
-// have to keep writing them for each test.
-const TestChip = ({ ...rest }) => (
-  <BpkDropdownChip onClick={() => null} accessibilityLabel="Toggle" {...rest}>
-    Toggle me
-  </BpkDropdownChip>
-);
-
-describe('BpkDropdownChip', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(<TestChip />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  Object.values(CHIP_TYPES).forEach((chipType) => {
-    it(`should render correctly with type="${chipType}"`, () => {
-      const { asFragment } = render(<TestChip type={chipType} />);
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it(`should render correctly with type="${chipType}" and selected`, () => {
-      const { asFragment } = render(<TestChip type={chipType} selected />);
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it(`should render correctly with type="${chipType}" and disabled`, () => {
-      const { asFragment } = render(<TestChip type={chipType} disabled />);
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it(`should render correctly with type="${chipType}", selected and disabled`, () => {
-      const { asFragment } = render(
-        <TestChip type={chipType} selected disabled />,
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it(`should render correctly with type="${chipType}" and a leading accessory view`, () => {
-      const { asFragment } = render(
-        <TestChip
-          type={chipType}
-          leadingAccessoryView={<span>Leading</span>}
-        />,
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
-
-  it('should render correctly with a "className" attribute', () => {
-    const { asFragment } = render(<TestChip className="custom-class" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/bpk-component-chip/src/BpkDropdownChip.tsx

@@ -1,48 +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.
- */
-
-/*
-The dropdown chip component is just a selectable chip component
-with a trailing accessory view of a chevron down icon.
-*/
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import ChevronDownIconSm from '../../bpk-component-icon/sm/chevron-down';
-
-import BpkSelectableChip from './BpkSelectableChip';
-import type { CommonProps as Props } from './commonTypes';
-import { CHIP_TYPES } from './commonTypes';
-
-const BpkDropdownChip = ({
-  disabled = false,
-  leadingAccessoryView = null,
-  selected = false,
-  type = CHIP_TYPES.default,
-  ...rest
-}: Props) => (
-  <BpkSelectableChip
-    disabled={disabled}
-    leadingAccessoryView={leadingAccessoryView}
-    selected={selected}
-    type={type}
-    {...rest}
-    trailingAccessoryView={<ChevronDownIconSm />}
-  />
-);
-
-export default BpkDropdownChip;

package/bpk-component-chip/src/BpkSelectableChip-test.tsx

@@ -1,100 +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 { render } from '@testing-library/react';
-
-import type { Props } from './BpkSelectableChip';
-import BpkSelectableChip from './BpkSelectableChip';
-import { CHIP_TYPES } from './commonTypes';
-
-// Just a convenience wrapper that includes the default props so we don't
-// have to keep writing them for each test.
-const TestChip = ({
-  ...rest
-}: Omit<Props, 'onClick' | 'accessibilityLabel' | 'children'>) => (
-  <BpkSelectableChip onClick={() => null} accessibilityLabel="Toggle" {...rest}>
-    Toggle me
-  </BpkSelectableChip>
-);
-
-describe('BpkSelectableChip', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(<TestChip />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  Object.values(CHIP_TYPES).forEach((chipType) => {
-    it(`should render correctly with type="${chipType}"`, () => {
-      const { asFragment } = render(<TestChip type={chipType} />);
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it(`should render correctly with type="${chipType}" and selected`, () => {
-      const { asFragment } = render(<TestChip type={chipType} selected />);
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it(`should render correctly with type="${chipType}" and disabled`, () => {
-      const { asFragment } = render(<TestChip type={chipType} disabled />);
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it(`should render correctly with type="${chipType}", selected and disabled`, () => {
-      const { asFragment } = render(
-        <TestChip type={chipType} selected disabled />,
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it(`should render correctly with type="${chipType}" and a leading accessory view`, () => {
-      const { asFragment } = render(
-        <TestChip
-          type={chipType}
-          leadingAccessoryView={<span>Leading</span>}
-        />,
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it(`should render correctly with type="${chipType}" and a trailing accessory view`, () => {
-      const { asFragment } = render(
-        <TestChip
-          type={chipType}
-          trailingAccessoryView={<span>Trailing</span>}
-        />,
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-
-    it(`should render correctly with type="${chipType}" and both a leading and trailing accessory view`, () => {
-      const { asFragment } = render(
-        <TestChip
-          type={chipType}
-          leadingAccessoryView={<span>Leading</span>}
-          trailingAccessoryView={<span>Trailing</span>}
-        />,
-      );
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
-
-  it('should render correctly with a "className" attribute', () => {
-    const { asFragment } = render(<TestChip className="custom-class" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/bpk-component-chip/src/BpkSelectableChip.tsx

@@ -1,81 +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 type { ReactNode } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-
-import STYLES from './BpkSelectableChip.module.scss';
-import type { CommonProps } from './commonTypes';
-import { CHIP_TYPES } from './commonTypes';
-
-const getClassName = cssModules(STYLES);
-
-export interface Props extends CommonProps {
-  role?: string;
-  trailingAccessoryView?: ReactNode;
-}
-
-const BpkSelectableChip = ({
-  accessibilityLabel,
-  children,
-  className,
-  disabled = false,
-  leadingAccessoryView = null,
-  role = 'checkbox',
-  selected = false,
-  trailingAccessoryView = null,
-  type = CHIP_TYPES.default,
-  ...rest
-}: Props) => {
-  const classNames = getClassName(
-    'bpk-chip',
-    `bpk-chip--${type}`,
-    disabled && 'bpk-chip--disabled',
-    disabled && `bpk-chip--${type}-disabled`,
-    !disabled && selected && `bpk-chip--${type}-selected`,
-    className,
-  );
-
-  return (
-    <button
-      aria-checked={role === 'button' ? undefined : selected}
-      className={classNames}
-      disabled={disabled}
-      role={role}
-      title={accessibilityLabel}
-      type="button"
-      {...rest}
-    >
-      {leadingAccessoryView && (
-        <span className={getClassName('bpk-chip__leading-accessory-view')}>
-          {leadingAccessoryView}
-        </span>
-      )}
-      <BpkText textStyle={TEXT_STYLES.footnote}>{children}</BpkText>
-      {trailingAccessoryView && (
-        <span className={getClassName('bpk-chip__trailing-accessory-view')}>
-          {trailingAccessoryView}
-        </span>
-      )}
-    </button>
-  );
-};
-
-export default BpkSelectableChip;

package/bpk-component-chip/src/accessibility-test.tsx

@@ -1,47 +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 { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import BpkDismissibleChip from './BpkDismissibleChip';
-import BpkSelectableChip from './BpkSelectableChip';
-
-describe('BpkDismissibleChip accessibility tests', () => {
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const { container } = render(
-      <BpkDismissibleChip onClick={() => null} accessibilityLabel="Dismiss">
-        Dismiss me
-      </BpkDismissibleChip>,
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});
-
-describe('BpkSelectableChip accessibility tests', () => {
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const { container } = render(
-      <BpkSelectableChip onClick={() => null} accessibilityLabel="Toggle">
-        Toggle me
-      </BpkSelectableChip>,
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});

package/bpk-component-chip/src/commonTypes.ts

@@ -1,61 +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 PropTypes from 'prop-types';
-import type { ComponentProps, ReactNode, SyntheticEvent } from 'react';
-
-export const CHIP_TYPES = {
-  default: 'default',
-  onDark: 'on-dark',
-  onImage: 'on-image',
-} as const;
-
-// onClick and children are already part of the button props, but we need to specify that they are required
-interface ButtonProps extends Omit<ComponentProps<'button'>, 'type'> {
-  onClick: (event: SyntheticEvent<HTMLButtonElement>) => void | null;
-  children: ReactNode | string;
-  type?: (typeof CHIP_TYPES)[keyof typeof CHIP_TYPES]; // this is different from the native button type
-}
-export interface CommonProps extends ButtonProps {
-  accessibilityLabel: string;
-  disabled?: boolean;
-  selected?: boolean;
-  leadingAccessoryView?: ReactNode;
-}
-
-// TODO: Remove once chip examples have been migrated to TS
-export const COMMON_PROP_TYPES = {
-  accessibilityLabel: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  onClick: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  leadingAccessoryView: PropTypes.node,
-  selected: PropTypes.bool,
-  trailingAccessoryView: PropTypes.node,
-  type: PropTypes.oneOf(Object.values(CHIP_TYPES)),
-};
-
-// TODO: Remove once chip examples have been migrated to TS
-export const COMMON_DEFAULT_PROPS = {
-  disabled: false,
-  leadingAccessoryView: null,
-  selected: false,
-  trailingAccessoryView: null,
-  type: CHIP_TYPES.default,
-};

package/bpk-component-chip/src/themeAttributes-test.ts

@@ -1,34 +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 themeAttributes from './themeAttributes';
-
-describe('themeAttributes', () => {
-  it('exports the expected attributes', () => {
-    expect(themeAttributes).toEqual([
-      'chipDefaultSelectedBackgroundColor',
-      'chipDefaultSelectedTextColor',
-      'chipOnDarkSelectedBackgroundColor',
-      'chipOnDarkSelectedTextColor',
-      'chipOnImageSelectedBackgroundColor',
-      'chipOnImageSelectedHoverBackgroundColor',
-      'chipOnImageSelectedActiveBackgroundColor',
-      'chipOnImageSelectedTextColor',
-    ]);
-  });
-});

package/bpk-component-chip/src/themeAttributes.ts

@@ -1,28 +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.
- */
-
-export default [
-  'chipDefaultSelectedBackgroundColor',
-  'chipDefaultSelectedTextColor',
-  'chipOnDarkSelectedBackgroundColor',
-  'chipOnDarkSelectedTextColor',
-  'chipOnImageSelectedBackgroundColor',
-  'chipOnImageSelectedHoverBackgroundColor',
-  'chipOnImageSelectedActiveBackgroundColor',
-  'chipOnImageSelectedTextColor',
-];

package/bpk-component-close-button/README.md

@@ -1,24 +0,0 @@
-# bpk-component-close-button
-
-> Backpack close button component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkCloseButton from '@skyscanner/backpack-web/bpk-component-close-button';
-
-export default () => (
-  <BpkCloseButton label="Close" onClick={() => console.log('click')} />
-);
-```
-
-## Props
-
-| Property | PropType | Required | Default Value |
-| -------- | -------- | -------- | ------------- |
-| label    | string   | true     | -             |
-| onClick  | func     | true     | -             |