@skyscanner/backpack-web 0.0.1

package/bpk-component-nudger/examples.js

@@ -0,0 +1,204 @@
+/*
+ * 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.
+ */
+
+/* @flow strict */
+
+import React, { Component } from 'react';
+import { action, BpkDarkExampleWrapper } from 'bpk-storybook-utils';
+import BpkLabel from 'bpk-component-label';
+import { cssModules } from 'bpk-react-utils';
+
+import STYLES from './BpkNudgerStory.module.scss';
+
+import BpkNudger, { BpkConfigurableNudger } from './index';
+
+const getClassName = cssModules(STYLES);
+
+class NudgerContainer extends Component<
+  { id: string, buttonType: string },
+  { value: number },
+> {
+  constructor() {
+    super();
+
+    this.state = {
+      value: 2,
+    };
+  }
+
+  handleChange = (value: number) => {
+    this.setState({ value });
+  };
+
+  render() {
+    const { buttonType, id } = this.props;
+
+    const labelClassName = getClassName(
+      buttonType === 'outline' && 'bpk-nudger-outline',
+    );
+
+    return (
+      <div>
+        <BpkLabel id="passenger-label" htmlFor={id} className={labelClassName}>
+          Number of passengers
+        </BpkLabel>
+        <BpkNudger
+          aria-labelledby="passenger-label"
+          id={id}
+          min={1}
+          max={10}
+          value={this.state.value}
+          onChange={this.handleChange}
+          decreaseButtonLabel="Remove passenger"
+          increaseButtonLabel="Add passenger"
+          buttonType={buttonType}
+        />
+      </div>
+    );
+  }
+}
+
+const options = ['economy', 'premium', 'business', 'first'];
+const compareValues = (a: string, b: string): number => {
+  const [aIndex, bIndex] = [options.indexOf(a), options.indexOf(b)];
+  return aIndex - bIndex;
+};
+
+const incrementValue = (a: string): string => {
+  const currentIndex = options.indexOf(a);
+  const newIndex = currentIndex + 1;
+  if (currentIndex === -1 || newIndex >= options.length) {
+    return a;
+  }
+  return options[newIndex];
+};
+
+const decrementValue = (a: string): string => {
+  const index = options.indexOf(a) - 1;
+  if (index < 0) {
+    return a;
+  }
+  return options[index];
+};
+
+const formatValue = (a: string): string => a.toString();
+
+class ConfigurableNudgerContainer extends Component<{}, { value: string }> {
+  constructor() {
+    super();
+
+    this.state = {
+      value: 'premium',
+    };
+  }
+
+  handleChange = (value: string) => {
+    this.setState({ value });
+  };
+
+  render() {
+    return (
+      <div>
+        <BpkLabel id="traveller-label" htmlFor="nudger">
+          Traveller Class
+        </BpkLabel>
+        <BpkConfigurableNudger
+          id="nudger"
+          aria-labelledby="traveller-label"
+          min="economy"
+          max="first"
+          value={this.state.value}
+          onChange={this.handleChange}
+          decreaseButtonLabel="Decrease"
+          increaseButtonLabel="Increase"
+          compareValues={compareValues}
+          incrementValue={incrementValue}
+          decrementValue={decrementValue}
+          formatValue={formatValue}
+          inputClassName={getClassName('bpk-nudger-configurable')}
+        />
+      </div>
+    );
+  }
+}
+
+const DefaultExample = () => (
+  <BpkNudger
+    id="my-nudger"
+    min={1}
+    max={99}
+    value={3}
+    onChange={action('change')}
+    decreaseButtonLabel="Decrease"
+    increaseButtonLabel="Increase"
+  />
+);
+
+const LowerBoundExample = () => (
+  <BpkNudger
+    id="my-nudger"
+    min={3}
+    max={99}
+    value={3}
+    onChange={action('change')}
+    decreaseButtonLabel="Decrease"
+    increaseButtonLabel="Increase"
+  />
+);
+
+const UpperBoundsExample = () => (
+  <BpkNudger
+    id="my-nudger"
+    min={1}
+    max={99}
+    value={99}
+    onChange={action('change')}
+    decreaseButtonLabel="Decrease"
+    increaseButtonLabel="Increase"
+  />
+);
+
+const StatefulExample = () => (
+  <NudgerContainer id="default-nudger" buttonType="secondary" />
+);
+
+const ConfigurableExample = () => <ConfigurableNudgerContainer />;
+
+const OutlineExample = () => (
+  <BpkDarkExampleWrapper>
+    <NudgerContainer id="outline-nudger" buttonType="outline" />
+  </BpkDarkExampleWrapper>
+);
+
+const MixedExample = () => (
+  <div>
+    <DefaultExample />
+    <ConfigurableExample />
+    <OutlineExample />
+  </div>
+);
+
+export {
+  DefaultExample,
+  LowerBoundExample,
+  UpperBoundsExample,
+  StatefulExample,
+  ConfigurableExample,
+  OutlineExample,
+  MixedExample,
+};

package/bpk-component-nudger/index.js

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+/* @flow strict */
+
+import BpkNudger from './src/BpkNudger';
+import BpkConfigurableNudger from './src/BpkConfigurableNudger';
+import themeAttributes from './src/themeAttributes';
+
+export default BpkNudger;
+export { themeAttributes, BpkConfigurableNudger };

package/bpk-component-nudger/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "bpk-component-nudger",
+  "version": "5.1.0",
+  "description": "Backpack nudger component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
+  "dependencies": {
+    "@skyscanner/bpk-foundations-web": "^5.0.0",
+    "bpk-component-button": "^5.1.0",
+    "bpk-component-icon": "^9.2.0",
+    "bpk-mixins": "^26.1.0",
+    "bpk-react-utils": "^4.1.0",
+    "lodash.clamp": "^4.0.3",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-label": "^5.1.0",
+    "bpk-storybook-utils": "^1.1.0"
+  }
+}

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

@@ -0,0 +1,151 @@
+/* eslint-disable react/forbid-prop-types */
+/*
+ * 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.
+ */
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import BpkButtonSecondary from 'bpk-component-button/BpkButtonSecondary';
+import BpkButtonOutline from 'bpk-component-button/BpkButtonOutline';
+import { withButtonAlignment } from 'bpk-component-icon';
+import MinusIcon from 'bpk-component-icon/sm/minus';
+import PlusIcon from 'bpk-component-icon/sm/plus';
+import { cssModules } from 'bpk-react-utils';
+
+import {
+  type CommonProps,
+  COMMON_PROP_TYPES,
+  COMMON_DEFAULT_PROPS,
+} from './common-types';
+import STYLES from './BpkNudger.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const AlignedMinusIcon = withButtonAlignment(MinusIcon);
+const AlignedPlusIcon = withButtonAlignment(PlusIcon);
+
+type Props<T> = {
+  ...$Exact<CommonProps<T>>,
+  inputClassName: ?string,
+  formatValue: (T) => string,
+  incrementValue: (T) => T,
+  decrementValue: (T) => T,
+  compareValues: (T, T) => number,
+};
+
+const BpkConfigurableNudger = <T>(props: Props<T>) => {
+  const {
+    buttonType,
+    className,
+    compareValues,
+    decreaseButtonLabel,
+    decrementValue,
+    formatValue,
+    id,
+    increaseButtonLabel,
+    incrementValue,
+    inputClassName,
+    max,
+    min,
+    onChange,
+    value,
+    ...rest
+  } = props;
+  const classNames = [getClassName('bpk-nudger')];
+  if (className) {
+    classNames.push(className);
+  }
+
+  const maxButtonDisabled = compareValues(value, max) >= 0;
+  const minButtonDisabled = compareValues(value, min) <= 0;
+
+  const minusIconClassNames = [getClassName('bpk-nudger__icon')];
+  if (minButtonDisabled) {
+    minusIconClassNames.push(getClassName('bpk-nudger__icon--disabled'));
+  }
+  const plusIconClassNames = [getClassName('bpk-nudger__icon')];
+  if (maxButtonDisabled) {
+    plusIconClassNames.push(getClassName('bpk-nudger__icon--disabled'));
+  }
+
+  const inputStyles = [getClassName('bpk-nudger__input')];
+  if (inputClassName) {
+    inputStyles.push(inputClassName);
+  }
+  if (buttonType === 'outline') {
+    inputStyles.push(getClassName('bpk-nudger__input--outline'));
+  }
+
+  const ButtonComponent =
+    buttonType === 'secondary' ? BpkButtonSecondary : BpkButtonOutline;
+
+  return (
+    <div className={classNames.join(' ')}>
+      <ButtonComponent
+        iconOnly
+        onClick={() => onChange(decrementValue(value))}
+        disabled={minButtonDisabled}
+        title={decreaseButtonLabel}
+        aria-controls={id}
+        className={getClassName('bpk-nudger__button')}
+      >
+        <AlignedMinusIcon className={minusIconClassNames.join(' ')} />
+      </ButtonComponent>
+      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+      <input
+        type="text"
+        aria-live="assertive"
+        readOnly
+        value={formatValue(value)}
+        id={id}
+        className={inputStyles.join(' ')}
+        {...rest}
+      />
+      <ButtonComponent
+        iconOnly
+        onClick={() => onChange(incrementValue(value))}
+        disabled={maxButtonDisabled}
+        title={increaseButtonLabel}
+        aria-controls={id}
+        className={getClassName('bpk-nudger__button')}
+      >
+        <AlignedPlusIcon className={plusIconClassNames.join(' ')} />
+      </ButtonComponent>
+    </div>
+  );
+};
+
+BpkConfigurableNudger.propTypes = {
+  ...COMMON_PROP_TYPES,
+  compareValues: PropTypes.func.isRequired,
+  decrementValue: PropTypes.func.isRequired,
+  formatValue: PropTypes.PropTypes.func.isRequired,
+  incrementValue: PropTypes.func.isRequired,
+  max: PropTypes.any.isRequired,
+  min: PropTypes.any.isRequired,
+  value: PropTypes.any.isRequired,
+  inputClassName: PropTypes.string,
+};
+
+BpkConfigurableNudger.defaultProps = {
+  ...COMMON_DEFAULT_PROPS,
+  inputClassName: null,
+};
+
+export default BpkConfigurableNudger;

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

@@ -0,0 +1,68 @@
+/*
+ * 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.
+ */
+
+/* @flow strict */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { cssModules } from 'bpk-react-utils';
+
+import BpkConfigurableNudger from './BpkConfigurableNudger';
+import {
+  type CommonProps,
+  COMMON_DEFAULT_PROPS,
+  COMMON_PROP_TYPES,
+} from './common-types';
+import STYLES from './BpkNudger.module.scss';
+
+type Props = {
+  ...$Exact<CommonProps<number>>,
+};
+
+const getClassName = cssModules(STYLES);
+const compareValues = (a: number, b: number): number => a - b;
+const incrementValue = (currentValue: number): number => currentValue + 1;
+const decrementValue = (currentValue: number): number => currentValue - 1;
+const formatValue = (currentValue: number): string => currentValue.toString();
+
+const BpkNudger = (props: Props) => {
+  const { ...rest } = props;
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <BpkConfigurableNudger
+      inputClassName={getClassName('bpk-nudger__input--numeric')}
+      compareValues={compareValues}
+      incrementValue={incrementValue}
+      decrementValue={decrementValue}
+      formatValue={formatValue}
+      {...rest}
+    />
+  );
+};
+
+BpkNudger.propTypes = {
+  ...COMMON_PROP_TYPES,
+  max: PropTypes.number.isRequired,
+  min: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
+BpkNudger.defaultProps = COMMON_DEFAULT_PROPS;
+
+export default BpkNudger;

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-nudger__button{position:relative}.bpk-nudger__input{display:inline-block;padding:0.5rem 0;border:none;text-align:center;vertical-align:middle;margin:0;font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-nudger__input--outline{background-color:transparent;color:#fff}.bpk-nudger__input--numeric{width:2.5rem}

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

@@ -0,0 +1,49 @@
+/*
+ * 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';
+
+$bpk-spacing-v2: true;
+
+.bpk-nudger {
+  &__button {
+    position: relative;
+  }
+
+  &__input {
+    display: inline-block;
+    padding: bpk-spacing-md() 0;
+    border: none;
+    text-align: center;
+    vertical-align: middle;
+
+    @include bpk-text;
+    @include bpk-subheading;
+
+    &--outline {
+      background-color: transparent;
+      color: $bpk-color-white;
+    }
+
+    &--numeric {
+      $size: bpk-spacing-lg() + (bpk-spacing-md() * 2);
+
+      width: $size;
+    }
+  }
+}

package/bpk-component-nudger/src/common-types.js

@@ -0,0 +1,45 @@
+/*
+ * 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.
+ */
+/* @flow strict */
+import PropTypes from 'prop-types';
+
+export type CommonProps<T> = {
+  id: string,
+  min: T,
+  max: T,
+  value: T,
+  onChange: (T) => mixed,
+  className: ?string,
+  increaseButtonLabel: string,
+  decreaseButtonLabel: string,
+  buttonType: string,
+};
+
+export const COMMON_PROP_TYPES = {
+  id: PropTypes.string.isRequired,
+  decreaseButtonLabel: PropTypes.string.isRequired,
+  increaseButtonLabel: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  buttonType: PropTypes.oneOf(['secondary', 'outline']),
+};
+
+export const COMMON_DEFAULT_PROPS = {
+  className: null,
+  buttonType: 'secondary',
+};

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

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+/* @flow strict */
+
+import { secondaryThemeAttributes as themeAttributes } from 'bpk-component-button/themeAttributes';
+
+export default themeAttributes;

package/bpk-component-overlay/README.md

@@ -0,0 +1,51 @@
+# bpk-component-overlay
+
+> Backpack overlay component.
+
+## Installation
+
+```sh
+npm install bpk-component-overlay --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkText from 'bpk-component-text';
+import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from 'bpk-component-overlay';
+
+export default () => (
+  <div>
+    { /* Basic example */}
+    <BpkOverlay>
+      <BpkText>Hotels in Canada</BpkText>
+    </BpkOverlay>
+
+    { /* With the tint invisible */}
+    <BpkOverlay overlayType={OVERLAY_TYPES.none}>
+      <BpkText>Hotels in Canada</BpkText>
+    </BpkOverlay>
+
+    { /* With a border radius style */}
+    <BpkOverlay borderRadiusStyle={BORDER_RADIUS_STYLES.sm}>
+      <BpkText>Hotels in Canada</BpkText>
+    </BpkOverlay>
+
+    { /* With foreground content */}
+    <BpkOverlay foregroundContent={<BpkText>Visit Ottawa</BpkText>}>
+      <BpkText>Hotels in Canada</BpkText>
+    </BpkOverlay>
+  </div>
+);
+```
+
+## Props
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children | Node | true | - |
+| borderRadiusStyle | oneOf(BORDER_RADIUS_STYLES.none, BORDER_RADIUS_STYLES.sm) | false | BORDER_RADIUS_STYLES.none |
+| className | string | false | null |
+| foregroundContent | Node | false | null |
+| overlayType | oneOf(OVERLAY_TYPES) | false | OVERLAY_TYPES.tint |