@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

package/bpk-component-input/src/BpkInput.module.scss

@@ -1,86 +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 '~bpk-mixins/index.scss';
-
-$bpk-spacing-v2: true;
-
-.bpk-input {
-  @include bpk-input;
-
-  &__container {
-    @include bpk-input__container;
-  }
-
-  &__clear-button {
-    display: none;
-
-    @include bpk-input__clear-button;
-
-    &--persistent {
-      display: inherit;
-    }
-  }
-
-  &--valid {
-    @include bpk-input--valid;
-  }
-
-  &--invalid {
-    @include bpk-input--invalid;
-  }
-
-  &--clearable {
-    @include bpk-input--clearable;
-
-    // Display the clear button when a clearable input is focused.
-    &:focus + .bpk-input__clear-button {
-      display: inherit;
-    }
-  }
-
-  &--large {
-    @include bpk-input--large;
-  }
-
-  // When persistent, set background to override any validity icons
-  // appearing and make the clear button always display.
-  &--persistent-clearable {
-    background: $bpk-input-background;
-  }
-
-  &--docked {
-    @include bpk-input--docked;
-
-    &-first {
-      @include bpk-input--docked-first-child;
-    }
-
-    &-middle {
-      @include bpk-input--docked-middle-child;
-    }
-
-    &-last {
-      @include bpk-input--docked-last-child;
-    }
-  }
-
-  &--with-open-events {
-    cursor: pointer;
-  }
-}

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

@@ -1,36 +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 BpkInput from './BpkInput';
-
-describe('BpkInput accessibility tests', () => {
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const { container } = render(
-      <div>
-        {/* Adding a label to ensure it meets accessibility. */}
-        <label htmlFor="test">Label</label>
-        <BpkInput id="test" name="test" value="" onChange={() => {}} />,
-      </div>,
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});

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

@@ -1,173 +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.
- */
-
-// TODO - this file should be removed once all input examples have been migrated to TS
-
-import { CLEAR_BUTTON_MODES, clearablePropType } from './common-types';
-
-describe('clearablePropType', () => {
-  const COMPONENT_NAME = 'ExampleComponent';
-
-  describe('"onClear"', () => {
-    const PROP_NAME = 'onClear';
-
-    it('should not produce an error when "clearButtonMode" is not provided', () => {
-      const props = {
-        id: 'id',
-        name: 'name',
-        value: 'value',
-      };
-      expect(clearablePropType(props, PROP_NAME, COMPONENT_NAME)).toBeFalsy();
-    });
-
-    it('should not produce an error when "clearButtonMode={never}"', () => {
-      const props = {
-        id: 'id',
-        name: 'name',
-        value: 'value',
-        clearButtonMode: CLEAR_BUTTON_MODES.never,
-      };
-      expect(clearablePropType(props, PROP_NAME, COMPONENT_NAME)).toBeFalsy();
-    });
-
-    it('should produce an error when "clearButtonMode=always" and "onClear" is not provided', () => {
-      const props = {
-        id: 'id',
-        name: 'name',
-        value: 'value',
-        clearButtonMode: CLEAR_BUTTON_MODES.always,
-      };
-      expect(
-        clearablePropType(props, PROP_NAME, COMPONENT_NAME)?.toString(),
-      ).toEqual(
-        "Error: Invalid prop `onClear` supplied to `ExampleComponent`. When `clearButtonMode` is not 'never', `onClear` must be supplied.",
-      );
-    });
-
-    it('should produce an error when "clearButtonMode=always" and "onClear" is null', () => {
-      const props = {
-        id: 'id',
-        name: 'name',
-        value: 'value',
-        clearButtonMode: CLEAR_BUTTON_MODES.always,
-        onClear: null,
-      };
-      expect(
-        clearablePropType(props, PROP_NAME, COMPONENT_NAME)?.toString(),
-      ).toEqual(
-        "Error: Invalid prop `onClear` supplied to `ExampleComponent`. When `clearButtonMode` is not 'never', `onClear` must be supplied.",
-      );
-    });
-
-    it('should produce an error when "clearButtonMode=always" and "onClear" is not a function', () => {
-      const props = {
-        id: 'id',
-        name: 'name',
-        value: 'value',
-        clearButtonMode: CLEAR_BUTTON_MODES.always,
-        onClear: 'Hello world',
-      };
-      expect(
-        clearablePropType(props, PROP_NAME, COMPONENT_NAME)?.toString(),
-      ).toEqual(
-        'Error: Invalid prop `onClear` supplied to `ExampleComponent`. `onClear` must be a function.',
-      );
-    });
-  });
-
-  describe('"clearButtonLabel"', () => {
-    const PROP_NAME = 'clearButtonLabel';
-
-    it('should not produce an error when "clearButtonMode" is not provided', () => {
-      const props = {
-        id: 'id',
-        name: 'name',
-        value: 'value',
-      };
-      expect(clearablePropType(props, PROP_NAME, COMPONENT_NAME)).toBeFalsy();
-    });
-
-    it('should not produce an error when "clearButtonMode=never"', () => {
-      const props = {
-        id: 'id',
-        name: 'name',
-        value: 'value',
-        clearButtonMode: CLEAR_BUTTON_MODES.never,
-      };
-      expect(clearablePropType(props, PROP_NAME, COMPONENT_NAME)).toBeFalsy();
-    });
-
-    it('should produce an error when "clearButtonMode=always" and "clearButtonLabel" is not provided', () => {
-      const props = {
-        id: 'id',
-        name: 'name',
-        value: 'value',
-        clearButtonMode: CLEAR_BUTTON_MODES.always,
-      };
-      expect(
-        clearablePropType(props, PROP_NAME, COMPONENT_NAME)?.toString(),
-      ).toEqual(
-        "Error: Invalid prop `clearButtonLabel` supplied to `ExampleComponent`. When `clearButtonMode` is not 'never', `clearButtonLabel` must be supplied.",
-      );
-    });
-
-    it('should produce an error when "clearButtonMode=always" and "clearButtonLabel" is null', () => {
-      const props = {
-        id: 'id',
-        name: 'name',
-        value: 'value',
-        clearButtonMode: CLEAR_BUTTON_MODES.always,
-        clearButtonLabel: null,
-      };
-      expect(
-        clearablePropType(props, PROP_NAME, COMPONENT_NAME)?.toString(),
-      ).toEqual(
-        "Error: Invalid prop `clearButtonLabel` supplied to `ExampleComponent`. When `clearButtonMode` is not 'never', `clearButtonLabel` must be supplied.",
-      );
-    });
-
-    it('should produce an error when "clearButtonMode=always" and "clearButtonLabel" is not a string', () => {
-      const props = {
-        id: 'id',
-        name: 'name',
-        value: 'value',
-        clearButtonMode: CLEAR_BUTTON_MODES.always,
-        clearButtonLabel: 42,
-      };
-      expect(
-        clearablePropType(props, PROP_NAME, COMPONENT_NAME)?.toString(),
-      ).toEqual(
-        'Error: Invalid prop `clearButtonLabel` supplied to `ExampleComponent`. `clearButtonLabel` must be a string.',
-      );
-    });
-  });
-
-  describe('neither', () => {
-    const PROP_NAME = 'foo';
-    it('should produce no error when "clearButtonMode=always" but the prop name is neither clearButtonLabel or onClear', () => {
-      const props = {
-        id: 'id',
-        name: 'name',
-        value: 'value',
-        clearButtonMode: CLEAR_BUTTON_MODES.always,
-        foo: 'bar',
-      };
-      expect(clearablePropType(props, PROP_NAME, COMPONENT_NAME)).toBeFalsy();
-    });
-  });
-});

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

@@ -1,25 +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 themeAttributes', () => {
-    expect(themeAttributes).toEqual(['inputInvalidBorderColor']);
-  });
-});

package/bpk-component-input/src/withOpenEvents-test.tsx

@@ -1,168 +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, screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import withOpenEvents from './withOpenEvents';
-import BpkInput from './BpkInput';
-
-const Input = withOpenEvents(BpkInput);
-
-describe('withOpenEvents', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(
-      <Input
-        id="my-input"
-        name="my-input"
-        value="value"
-        hasTouchSupport={false}
-        onChange={() => null}
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should attach different event handlers when touch is supported', () => {
-    const { asFragment } = render(
-      <Input
-        id="my-input"
-        name="my-input"
-        value="value"
-        hasTouchSupport
-        onChange={() => null}
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly with "className" prop', () => {
-    const { asFragment } = render(
-      <Input
-        id="my-input"
-        name="my-input"
-        value="value"
-        className="my-custom-class"
-        onChange={() => null}
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should open on click', async () => {
-    const onOpen = jest.fn();
-    render(
-      <Input
-        id="my-input"
-        name="my-input"
-        value="value"
-        onOpen={onOpen}
-        onChange={() => null}
-      />,
-    );
-
-    expect(onOpen).not.toHaveBeenCalled();
-
-    const input = screen.getByRole('textbox');
-    await userEvent.click(input);
-
-    expect(onOpen).toHaveBeenCalled();
-  });
-
-  it('should open on focus', () => {
-    const onOpen = jest.fn();
-    render(
-      <Input
-        id="my-input"
-        name="my-input"
-        value="value"
-        onOpen={onOpen}
-        onChange={() => null}
-      />,
-    );
-
-    expect(onOpen).not.toHaveBeenCalled();
-
-    const input = screen.getByRole('textbox');
-
-    fireEvent.focus(input);
-    expect(onOpen).toHaveBeenCalled();
-  });
-
-  it('should open on touch', () => {
-    const onOpen = jest.fn();
-    render(
-      <Input
-        id="my-input"
-        name="my-input"
-        value="value"
-        onOpen={onOpen}
-        hasTouchSupport
-        onChange={() => null}
-      />,
-    );
-
-    expect(onOpen).not.toHaveBeenCalled();
-
-    const input = screen.getByRole('textbox');
-
-    fireEvent.focus(input);
-    fireEvent.touchEnd(input);
-    expect(onOpen).toHaveBeenCalled();
-  });
-
-  it('should open on "Enter" key', () => {
-    const onOpen = jest.fn();
-    render(
-      <Input
-        id="my-input"
-        name="my-input"
-        value="value"
-        onOpen={onOpen}
-        onChange={() => null}
-      />,
-    );
-
-    expect(onOpen).not.toHaveBeenCalled();
-
-    const input = screen.getByRole('textbox');
-    fireEvent.keyDown(input, { keyCode: 13 });
-
-    waitFor(() => expect(onOpen).toHaveBeenCalled());
-  });
-
-  it('should open on "Space" key', () => {
-    const onOpen = jest.fn();
-    render(
-      <Input
-        id="my-input"
-        name="my-input"
-        value="value"
-        onOpen={onOpen}
-        onChange={() => null}
-      />,
-    );
-
-    expect(onOpen).not.toHaveBeenCalled();
-
-    const input = screen.getByRole('textbox');
-    fireEvent.keyUp(input, { keyCode: 32 });
-
-    waitFor(() => expect(onOpen).toHaveBeenCalled());
-  });
-});

package/bpk-component-label/README.md

@@ -1,27 +0,0 @@
-# bpk-component-label
-
-> Backpack label component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
-
-export default () => (
-  <BpkLabel htmlFor="origin">Origin</BpkLabel>
-)
-```
-
-## Props
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | node     | true     | -             |
-| disabled  | bool     | false    | false         |
-| invalid   | bool     | false    | false         |
-| required  | bool     | false    | false         |
-| white     | bool     | false    | false         |

package/bpk-component-label/src/BpkLabel.module.scss

@@ -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 '~bpk-mixins/index.scss';
-
-.bpk-label {
-  @include bpk-label;
-
-  &--white {
-    @include bpk-label--white;
-  }
-
-  &--invalid {
-    @include bpk-label--invalid;
-  }
-
-  &--disabled {
-    @include bpk-label--disabled;
-
-    &--white {
-      color: $bpk-text-disabled-on-dark-day;
-    }
-  }
-
-  &__asterisk {
-    @include bpk-themeable-property(
-      color,
-      --bpk-form-validation-text-color,
-      $bpk-form-validation-color
-    );
-  }
-}

package/bpk-component-link/README.md

@@ -1,66 +0,0 @@
-# bpk-component-link
-
-> Backpack link component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkLink, { BpkButtonLink } from '@skyscanner/backpack-web/bpk-component-link';
-
-export default () => (
-  <div>
-    Links can be both <BpkLink href="http://www.skyscanner.net/">anchor tags</BpkLink> as well
-    as <BpkButtonLink onClick={() => console.log('link button click!')}>button tags</BpkButtonLink>.
-  </div>
-)
-```
-
-## Single Page App (SPA) Frameworks
-
-If you're using a SPA framework like `react-router-dom` or `Next.js` to navigate between pages without refreshing, then you can wrap `BpkLink` in the component provided by the framework.
-
-[`react-router-dom` `Link` using the `component` prop](https://reactrouter.com/web/api/Link/component-reactcomponent)
-
-[`Next.js` `Link` using a custom component as the child element](https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag)
-
-## Props
-
-### BpkLink
-
-| Property  | PropType | Required | Default Value |
-| --------  | -------- | -------- | ------------- |
-| children  | -        | true     | -             |
-| href      | string   | true     | -             |
-| onClick   | func     | false    | null          |
-| blank     | bool     | false    | false         |
-| rel       | string   | false    | null          |
-| alternate | bool     | false    | false         |
-| ref       | any      | false    | null          |
-
-### BpkButtonLink
-
-| Property  | PropType | Required | Default Value |
-| --------  | -------- | -------- | ------------- |
-| children  | -        | true     | -             |
-| onClick   | func     | true     | -             |
-| alternate | bool     | false    | false         |
-
-## Theme props
-
-For both BpkLink and BpkButtonLink the following theme attributes are required.
-
-* `linkColor`
-* `linkHoverColor`
-* `linkActiveColor`
-* `linkVisitedColor`
-
-Alternate:
-
-* `linkAlternateColor`
-* `linkAlternateHoverColor`
-* `linkAlternateActiveColor`
-* `linkAlternateVisitedColor`

package/bpk-component-link/src/BpkLink.module.scss

@@ -1,31 +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 '~bpk-mixins/index.scss';
-
-.bpk-link {
-  @include bpk-link;
-
-  &--active {
-    @include bpk-link--active;
-  }
-
-  &--alternate {
-    @include bpk-link--alternate;
-  }
-}