@skyscanner/backpack-web 25.5.0 → 25.7.0-beta

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

@@ -0,0 +1,174 @@
+/*
+ * 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 { Component } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import BpkClearButton from './BpkClearButton';
+import STYLES from './BpkInput.module.scss';
+import { CLEAR_BUTTON_MODES, defaultProps } from './common-types';
+import type { Props } from './common-types';
+
+type State = {
+  persistClearButton: boolean;
+};
+
+const getClassName = cssModules(STYLES);
+
+class BpkInput extends Component<Props, State> {
+  static defaultProps = defaultProps;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = { persistClearButton: false };
+  }
+
+  render() {
+    const classNames = [getClassName('bpk-input')];
+    const containerClassNames = [getClassName('bpk-input__container')];
+    const clearButtonClassNames = [getClassName('bpk-input__clear-button')];
+    const {
+      className,
+      clearButtonLabel,
+      clearButtonMode,
+      docked,
+      dockedFirst,
+      dockedLast,
+      dockedMiddle,
+      inputRef,
+      large,
+      name,
+      onClear,
+      valid,
+      value,
+      ...rest
+    } = this.props;
+
+    // Used as a ref for focussing the input when cleared.
+    let ref: HTMLInputElement | null = null;
+
+    // Explicit check for false primitive value as undefined is
+    // treated as neither valid nor invalid
+    const isInvalid = valid === false;
+
+    const clearable =
+      clearButtonMode && clearButtonMode !== CLEAR_BUTTON_MODES.never;
+
+    if (valid) {
+      classNames.push(getClassName('bpk-input--valid'));
+    } else if (isInvalid) {
+      classNames.push(getClassName('bpk-input--invalid'));
+    }
+
+    if (large) {
+      classNames.push(getClassName('bpk-input--large'));
+      clearButtonClassNames.push(
+        getClassName('bpk-input__clear-button--large'),
+      );
+    }
+    if (clearable) {
+      classNames.push(getClassName('bpk-input--clearable'));
+      if (
+        clearButtonMode === CLEAR_BUTTON_MODES.always ||
+        this.state.persistClearButton
+      ) {
+        classNames.push(getClassName('bpk-input--persistent-clearable'));
+        clearButtonClassNames.push(
+          getClassName('bpk-input__clear-button--persistent'),
+        );
+      }
+    }
+
+    if (docked) {
+      classNames.push(getClassName('bpk-input--docked'));
+    }
+    if (dockedFirst) {
+      classNames.push(getClassName('bpk-input--docked-first'));
+    }
+    if (dockedMiddle) {
+      classNames.push(getClassName('bpk-input--docked-middle'));
+    }
+    if (dockedLast) {
+      classNames.push(getClassName('bpk-input--docked-last'));
+    }
+    if (className) {
+      if (clearable) {
+        containerClassNames.push(className);
+      } else {
+        classNames.push(className);
+      }
+    }
+
+    const renderedInput = (
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+      <input
+        className={classNames.join(' ')}
+        ref={(input: HTMLInputElement) => {
+          ref = input;
+          if (inputRef) {
+            inputRef(input);
+          }
+        }}
+        aria-invalid={isInvalid}
+        value={value}
+        name={name}
+        {...rest}
+      />
+    );
+
+    // When we mouseDown, we should persist the clear button.
+    // If we don't do this, then for `clearableWhileEditing` mode the mouseDown on the button will cause the input to lose focus,
+    // which will hide the button. The `onClick` event cannot complete if the button is removed from the DOM but mouseUp!
+    const onMouseDown = () => {
+      this.setState({ persistClearButton: true });
+    };
+
+    return clearable ? (
+      <div className={containerClassNames.join(' ')}>
+        {renderedInput}
+        {value.length > 0 && (
+          <BpkClearButton
+            tabIndex={-1}
+            label={clearButtonLabel || ''}
+            onMouseDown={onMouseDown}
+            onClick={(e) => {
+              if (ref) {
+                ref.focus();
+              }
+              if (onClear) {
+                if (e.target instanceof HTMLButtonElement) {
+                  const { target } = e;
+                  target.name = name;
+                }
+                onClear(e);
+                this.setState({ persistClearButton: false });
+              }
+            }}
+            className={clearButtonClassNames.join(' ')}
+          />
+        )}
+      </div>
+    ) : (
+      renderedInput
+    );
+  }
+}
+
+export default BpkInput;

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

@@ -0,0 +1,36 @@
+/*
+ * 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

@@ -0,0 +1,173 @@
+/*
+ * 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/common-types.ts

@@ -0,0 +1,141 @@
+/*
+ * 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, SyntheticEvent } from 'react';
+
+export const CLEAR_BUTTON_MODES = {
+  never: 'never',
+  whileEditing: 'whileEditing',
+  always: 'always',
+} as const;
+
+export const INPUT_TYPES = {
+  text: 'text',
+  email: 'email',
+  number: 'number',
+  password: 'password',
+  tel: 'tel',
+} as const;
+
+type BaseProps = ComponentProps<'input'> & {
+  id: string;
+  name: string;
+  value: string;
+  type?: (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];
+  valid?: boolean | null;
+  large?: boolean;
+  docked?: boolean;
+  dockedFirst?: boolean;
+  dockedMiddle?: boolean;
+  dockedLast?: boolean;
+  inputRef?: ((ref: HTMLInputElement) => void) | null;
+};
+
+export type PropsWithoutClearButonMode = BaseProps & {
+  clearButtonMode?: 'never';
+  clearButtonLabel?: string | null;
+  onClear?: ((e?: SyntheticEvent<HTMLButtonElement>) => void) | null;
+};
+
+export type PropsWithClearButtonMode = BaseProps & {
+  clearButtonMode: (typeof CLEAR_BUTTON_MODES)[keyof Omit<
+    typeof CLEAR_BUTTON_MODES,
+    'never'
+  >];
+  clearButtonLabel: string;
+  onClear: (e?: SyntheticEvent<HTMLButtonElement>) => void;
+};
+
+export type Props = PropsWithoutClearButonMode | PropsWithClearButtonMode;
+
+// TODO - this function should be removed once all input examples have been migrated to TS
+export const clearablePropType = (
+  props: any,
+  propName: string,
+  componentName: string,
+) => {
+  const createError = (message: string) =>
+    new Error(
+      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. ${message}.`,
+    );
+
+  const propBeingChecked = props[propName];
+  if (
+    props.clearButtonMode &&
+    props.clearButtonMode !== CLEAR_BUTTON_MODES.never
+  ) {
+    if (!propBeingChecked) {
+      return createError(
+        `When \`clearButtonMode\` is not 'never', \`${propName}\` must be supplied`,
+      );
+    }
+
+    switch (propName) {
+      case 'clearButtonLabel':
+        return typeof propBeingChecked === 'string'
+          ? null
+          : createError(`\`clearButtonLabel\` must be a string`);
+      case 'onClear':
+        return typeof propBeingChecked === 'function'
+          ? null
+          : createError(`\`onClear\` must be a function`);
+      default:
+        return null;
+    }
+  }
+  return null;
+};
+
+export const propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  type: PropTypes.oneOf([
+    INPUT_TYPES.text,
+    INPUT_TYPES.email,
+    INPUT_TYPES.number,
+    INPUT_TYPES.password,
+    INPUT_TYPES.tel,
+  ]),
+  className: PropTypes.string,
+  valid: PropTypes.bool,
+  large: PropTypes.bool,
+  docked: PropTypes.bool,
+  dockedFirst: PropTypes.bool,
+  dockedMiddle: PropTypes.bool,
+  dockedLast: PropTypes.bool,
+  inputRef: PropTypes.func,
+  clearButtonMode: PropTypes.oneOf(Object.keys(CLEAR_BUTTON_MODES)),
+  clearButtonLabel: clearablePropType,
+  onClear: clearablePropType,
+};
+
+export const defaultProps = {
+  type: INPUT_TYPES.text,
+  valid: null,
+  large: false,
+  docked: false,
+  dockedFirst: false,
+  dockedMiddle: false,
+  dockedLast: false,
+  inputRef: null,
+  clearButtonMode: CLEAR_BUTTON_MODES.never,
+  clearButtonLabel: null,
+  onClear: null,
+};

package/{bpk-component-image/src/BpkImageBorderRadiusStyles.js → bpk-component-input/src/themeAttributes-test.ts}

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,9 +16,10 @@ exports.default = void 0;
  * limitations under the License.
  */
 
-const BORDER_RADIUS_STYLES = {
-  none: 'none',
-  sm: 'sm'
-};
-var _default = BORDER_RADIUS_STYLES;
-exports.default = _default;
+import themeAttributes from './themeAttributes';
+
+describe('themeAttributes', () => {
+  it('exports the expected themeAttributes', () => {
+    expect(themeAttributes).toEqual(['inputInvalidBorderColor']);
+  });
+});

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

@@ -0,0 +1,19 @@
+/*
+ * 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 ['inputInvalidBorderColor'];