@skyscanner/backpack-web 0.0.1

package/bpk-component-section-list/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "bpk-component-section-list",
+  "version": "3.2.0",
+  "description": "Backpack section list 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-icon": "^9.2.0",
+    "bpk-component-text": "^6.1.0",
+    "bpk-mixins": "^26.1.0",
+    "bpk-react-utils": "^4.1.0",
+    "prop-types": "^15.7.2"
+  },
+  "devDependencies": {
+    "bpk-storybook-utils": "^1.1.0"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-component-section-list/src/BpkSectionList.js

@@ -0,0 +1,38 @@
+/*
+ * 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, { type Node } from 'react';
+
+type Props = {
+  children: Node,
+};
+
+const BpkSectionList = (props: Props) => {
+  const { children, ...rest } = props;
+
+  return <section {...rest}>{children}</section>;
+};
+
+BpkSectionList.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default BpkSectionList;

package/bpk-component-section-list/src/BpkSectionListItem.js

@@ -0,0 +1,112 @@
+/*
+ * 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, { type Node } from 'react';
+import { cssModules } from 'bpk-react-utils';
+import BpkLargeChevronRightIcon from 'bpk-component-icon/lg/chevron-right';
+import { withRtlSupport } from 'bpk-component-icon';
+
+import STYLES from './BpkSectionListItem.module.scss';
+
+const BpkLargeChevronRightIconWithRtlSupport = withRtlSupport(
+  BpkLargeChevronRightIcon,
+);
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  blank: boolean,
+  children: Node,
+  className: ?string,
+  href: ?string,
+  onClick: ?(event: SyntheticEvent<>) => void,
+};
+
+const BpkSectionListItem = (props: Props) => {
+  const { blank, children, className, href, onClick, ...rest } = props;
+  const classNames = [
+    getClassName(
+      'bpk-section-list-item',
+      (href || onClick) && 'bpk-section-list-item--interactive',
+      className,
+    ),
+  ];
+
+  if (href) {
+    const target = blank ? '_blank' : null;
+    return (
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+      <a
+        href={href}
+        target={target}
+        onClick={onClick}
+        className={classNames.join(' ')}
+        {...rest}
+      >
+        {children}
+        <BpkLargeChevronRightIconWithRtlSupport
+          className={getClassName('bpk-section-list-item__chevron')}
+        />
+      </a>
+    );
+  }
+
+  if (onClick) {
+    return (
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+      <button
+        type="button"
+        onClick={onClick}
+        className={classNames.join(' ')}
+        {...rest}
+      >
+        {children}
+        <BpkLargeChevronRightIconWithRtlSupport
+          className={getClassName('bpk-section-list-item__chevron')}
+        />
+      </button>
+    );
+  }
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <div className={classNames.join(' ')} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+BpkSectionListItem.propTypes = {
+  children: PropTypes.node.isRequired,
+  blank: PropTypes.bool,
+  className: PropTypes.string,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+BpkSectionListItem.defaultProps = {
+  blank: false,
+  className: null,
+  href: null,
+  onClick: null,
+};
+
+export default BpkSectionListItem;

package/bpk-component-section-list/src/BpkSectionListItem.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-section-list-item{display:flex;width:100%;min-height:4rem;padding:0.5rem 1rem;justify-content:space-between;align-items:center;border:none;background-color:#fff;color:#444560;text-decoration:none;box-shadow:0 -1px 0 0 #dddde5 inset}.bpk-section-list-item--interactive{cursor:pointer}.bpk-section-list-item__chevron{fill:#68697f}.bpk-section-list-item:hover .bpk-section-list-item__chevron{fill:#444560}.bpk-section-list-item:active .bpk-section-list-item__chevron{fill:#111236}

package/bpk-component-section-list/src/BpkSectionListItem.module.scss

@@ -0,0 +1,54 @@
+/*
+ * 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-section-list-item {
+  $root: &;
+
+  display: flex;
+  width: 100%;
+  min-height: bpk-spacing-xl() * 2;
+  padding: bpk-spacing-md() bpk-spacing-base();
+  justify-content: space-between;
+  align-items: center;
+  border: none;
+  background-color: $bpk-color-white;
+  color: $bpk-color-sky-gray-tint-01;
+  text-decoration: none;
+
+  @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06);
+
+  &--interactive {
+    cursor: pointer;
+  }
+
+  &__chevron {
+    fill: $bpk-color-sky-gray-tint-02;
+
+    #{$root}:hover & {
+      fill: $bpk-color-sky-gray-tint-01;
+    }
+
+    #{$root}:active & {
+      fill: $bpk-color-sky-gray;
+    }
+  }
+}

package/bpk-component-section-list/src/BpkSectionListSection.js

@@ -0,0 +1,65 @@
+/*
+ * 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, { type Node } from 'react';
+import { cssModules } from 'bpk-react-utils';
+import BpkText, { WEIGHT_STYLES } from 'bpk-component-text';
+
+import STYLES from './BpkSectionListSection.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  children: Node,
+  headerText: ?string,
+};
+
+const BpkSectionListSection = (props: Props) => {
+  const { children, headerText, ...rest } = props;
+
+  return (
+    <section {...rest}>
+      {headerText && (
+        <header className={getClassName('bpk-section-list-section__header')}>
+          <BpkText weight={WEIGHT_STYLES.bold} textStyle="base">
+            {headerText}
+          </BpkText>
+        </header>
+      )}
+      <ul className={getClassName('bpk-section-list-section')}>
+        {React.Children.map(children, (child) => (
+          <li>{child}</li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+BpkSectionListSection.propTypes = {
+  children: PropTypes.node.isRequired,
+  headerText: PropTypes.string,
+};
+
+BpkSectionListSection.defaultProps = {
+  headerText: null,
+};
+
+export default BpkSectionListSection;

package/bpk-component-section-list/src/BpkSectionListSection.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-section-list-section{margin:0;padding:0;list-style:none}.bpk-section-list-section__header{display:flex;min-height:2rem;padding:0.5rem 1rem;align-items:center;background-color:#dddde5}

package/bpk-component-section-list/src/BpkSectionListSection.module.scss

@@ -0,0 +1,35 @@
+/*
+ * 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-section-list-section {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  &__header {
+    display: flex;
+    min-height: bpk-spacing-xl();
+    padding: bpk-spacing-md() bpk-spacing-base();
+    align-items: center;
+    background-color: $bpk-color-sky-gray-tint-06;
+  }
+}

package/bpk-component-select/README.md

@@ -0,0 +1,47 @@
+# bpk-component-select
+
+> Backpack select component.
+
+## Installation
+
+```sh
+npm install bpk-component-select --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkSelect from 'bpk-component-select';
+
+export default () => (
+  <BpkSelect
+    id="fruits"
+    name="fruits"
+    value="oranges"
+    onChange={(e) => console.log(`select changed to ${e.target.value}`)}
+  >
+    <option value="apples">Apples</option>
+    <option value="oranges">Oranges</option>
+    <option value="pears">Pears</option>
+  </BpkSelect>
+);
+```
+
+## Props
+
+| Property                  | PropType   | Required | Default Value |
+| ------------              | --------   | -------- | ------------- |
+| id                        | string     | true     | -             |
+| name                      | string     | true     | -             |
+| value                     | string     | true     | -             |
+| onChange                  | func       | true     | -             |
+| valid                     | bool       | false    | null          |
+| large                     | bool       | false    | false         |
+| disabled                  | bool       | false    | false         |
+| docked                    | bool       | false    | false         |
+| dockedFirst               | bool       | false    | false         |
+| dockedMiddle              | bool       | false    | false         |
+| dockedLast                | bool       | false    | false         |
+| image                     | node       | false    | null          |
+| wrapperClassName          | string     | false    | null          |

package/bpk-component-select/examples.js

@@ -0,0 +1,274 @@
+/*
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+import { action } from 'bpk-storybook-utils';
+
+import BpkSelect from './index';
+
+class StatefulBpkSelect extends React.Component {
+  constructor() {
+    super();
+    this.state = { value: 'oranges' };
+  }
+
+  onChange = (value) => {
+    action(`BpkSelect changed. New value: ${value}`);
+    this.setState({ value });
+  };
+
+  render() {
+    return (
+      <BpkSelect
+        id="destination"
+        name="destination"
+        value={this.state.value}
+        onChange={(event) => {
+          this.onChange(event.target.value);
+        }}
+        {...this.props}
+      >
+        <option value="Karachi">Karachi</option>
+        <option value="Lahore">Lahore</option>
+        <option value="Faisalabad">Faisalabad</option>
+        <option value="Islamabad" disabled>
+          Islamabad
+        </option>
+      </BpkSelect>
+    );
+  }
+}
+
+const getFlagUriFromCountryCode = (countryCode) =>
+  `https://images.skyscnr.com/images/country/flag/header/${countryCode.toLowerCase()}.png`;
+
+const countries = [
+  { key: 0, id: 'AT', name: 'Austria', disabled: false },
+  { key: 1, id: 'BR', name: 'Brazil', disabled: false },
+  { key: 2, id: 'CN', name: 'China', disabled: false },
+  { key: 3, id: 'DJ', name: 'Djibouti', disabled: false },
+  { key: 4, id: 'EC', name: 'Ecuador', disabled: false },
+  { key: 5, id: 'GD', name: 'Grenada', disabled: false },
+  { key: 6, id: 'HT', name: 'Haiti', disabled: false },
+  { key: 7, id: 'IT', name: 'Italy', disabled: false },
+  { key: 8, id: 'US', name: 'USA', disabled: true },
+];
+class SelectWithImage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selected: 'IT',
+    };
+  }
+
+  getItemByValue = () => {
+    const { options } = this.props;
+    return (val) => {
+      const items = options.filter((o) => o.id === val);
+      if (!items.length) throw new Error('Item does not exists');
+      return items[0];
+    };
+  };
+
+  getItem = this.getItemByValue();
+
+  handleChange = (e) => {
+    const item = this.getItem(e.target.value);
+
+    this.setState({
+      selected: item.id,
+    });
+  };
+
+  image = (id) => <img alt="Flag" src={getFlagUriFromCountryCode(id)} />;
+
+  render() {
+    const { options, ...rest } = this.props;
+    return (
+      <BpkSelect
+        value={this.getItem(this.state.selected).id}
+        {...rest}
+        image={this.image(this.getItem(this.state.selected).id)}
+        onChange={this.handleChange}
+      >
+        {options.map((o) => (
+          <option key={o.id} disabled={o.disabled && 'disabled'} value={o.id}>
+            {o.name}
+          </option>
+        ))}
+      </BpkSelect>
+    );
+  }
+}
+
+SelectWithImage.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+const Example = () => <StatefulBpkSelect />;
+
+const Invalid = () => <StatefulBpkSelect valid={false} />;
+
+const InvalidWithImage = () => (
+  <SelectWithImage
+    valid={false}
+    id="countries"
+    name="countries"
+    options={countries}
+  />
+);
+
+const Disabled = () => <StatefulBpkSelect disabled />;
+
+const Large = () => <StatefulBpkSelect large />;
+
+const Docked = () => (
+  <div style={{ display: 'flex' }}>
+    <StatefulBpkSelect large docked />
+    <StatefulBpkSelect large docked />
+    <StatefulBpkSelect large docked />
+    <StatefulBpkSelect large docked />
+  </div>
+);
+
+const DockedWithImages = () => (
+  <div style={{ display: 'flex' }}>
+    <SelectWithImage
+      large
+      dockedFirst
+      id="countries"
+      name="countries"
+      options={countries}
+    />
+    <SelectWithImage
+      large
+      dockedMiddle
+      id="countries"
+      name="countries"
+      options={countries}
+    />
+    <SelectWithImage
+      large
+      dockedMiddle
+      id="countries"
+      name="countries"
+      options={countries}
+    />
+    <SelectWithImage
+      large
+      dockedLast
+      id="countries"
+      name="countries"
+      options={countries}
+    />
+  </div>
+);
+
+const ManuallyDocked = () => (
+  <div style={{ display: 'flex' }}>
+    <div style={{ width: '100%' }}>
+      <StatefulBpkSelect large dockedFirst />
+    </div>
+    <div style={{ width: '100%' }}>
+      <StatefulBpkSelect large dockedMiddle />
+    </div>
+    <div style={{ width: '100%' }}>
+      <StatefulBpkSelect large dockedMiddle />
+    </div>
+    <div style={{ width: '100%' }}>
+      <StatefulBpkSelect large dockedLast />
+    </div>
+  </div>
+);
+
+const ManuallyDockedWithImages = () => (
+  <div style={{ display: 'flex' }}>
+    <div style={{ width: '100%' }}>
+      <SelectWithImage
+        large
+        dockedFirst
+        id="countries"
+        name="countries"
+        options={countries}
+      />
+    </div>
+    <div style={{ width: '100%' }}>
+      <SelectWithImage
+        large
+        dockedMiddle
+        id="countries"
+        name="countries"
+        options={countries}
+      />
+    </div>
+    <div style={{ width: '100%' }}>
+      <SelectWithImage
+        large
+        dockedMiddle
+        id="countries"
+        name="countries"
+        options={countries}
+      />
+    </div>
+    <div style={{ width: '100%' }}>
+      <SelectWithImage
+        large
+        dockedLast
+        id="countries"
+        name="countries"
+        options={countries}
+      />
+    </div>
+  </div>
+);
+
+const WithImage = () => (
+  <SelectWithImage id="countries" name="countries" options={countries} />
+);
+
+const WithImageLarge = () => (
+  <SelectWithImage large id="countries" name="countries" options={countries} />
+);
+
+const MixedExample = () => (
+  <div>
+    <Example />
+    <Invalid />
+    <InvalidWithImage />
+    <Disabled />
+    <Large />
+    <Docked />
+    <ManuallyDocked />
+  </div>
+);
+
+export {
+  Example,
+  Invalid,
+  InvalidWithImage,
+  Disabled,
+  Large,
+  Docked,
+  DockedWithImages,
+  ManuallyDocked,
+  ManuallyDockedWithImages,
+  WithImage,
+  WithImageLarge,
+  MixedExample,
+};