@skyscanner/backpack-web 0.0.1

package/bpk-component-accordion/src/BpkAccordionItem.module.scss

@@ -0,0 +1,117 @@
+/*
+ * 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';
+
+$bpk-spacing-v2: true;
+
+.bpk-accordion {
+  &__title {
+    height: auto;
+
+    @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06);
+  }
+
+  &__toggle-button {
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    text-align: left;
+    cursor: pointer;
+    appearance: none;
+
+    @include bpk-themeable-property(
+      color,
+      --bpk-accordion-color,
+      $bpk-color-sky-blue-shade-03
+    );
+
+    @include bpk-rtl {
+      text-align: right;
+    }
+
+    @include bpk-hover {
+      @include bpk-themeable-property(
+        color,
+        --bpk-accordion-hover-color,
+        $bpk-color-sky-blue-shade-03
+      );
+    }
+
+    &:active {
+      @include bpk-themeable-property(
+        color,
+        --bpk-accordion-active-color,
+        $bpk-color-sky-blue-shade-03
+      );
+    }
+  }
+
+  &__flex-container {
+    display: inline-flex;
+    width: 100%;
+    margin: (bpk-spacing-md()) 0;
+    flex-direction: row;
+  }
+
+  &__title-text {
+    display: inline-block;
+    flex-grow: 1;
+  }
+
+  &__icon-wrapper {
+    display: inline-block;
+  }
+
+  &__leading-icon {
+    @include bpk-margin-trailing(bpk-spacing-md(), true);
+  }
+
+  &__item-expand-icon {
+    @include bpk-themeable-property(
+      fill,
+      --bpk-accordion-color,
+      $bpk-color-sky-blue-shade-03
+    );
+
+    @include bpk-hover {
+      @include bpk-themeable-property(
+        fill,
+        --bpk-accordion-hover-color,
+        $bpk-color-sky-blue-shade-03
+      );
+    }
+
+    &:active {
+      @include bpk-themeable-property(
+        fill,
+        --bpk-accordion-active-color,
+        $bpk-color-sky-blue-shade-03
+      );
+    }
+
+    &--flipped {
+      transform: scaleY(-1);
+    }
+  }
+
+  &__content-container {
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,25 @@
+/*
+ * 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 */
+
+export default [
+  'accordionColor',
+  'accordionHoverColor',
+  'accordionActiveColor',
+];

package/bpk-component-accordion/src/withAccordionItemState.js

@@ -0,0 +1,88 @@
+/*
+ * 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, { Component, type ComponentType } from 'react';
+import { wrapDisplayName } from 'bpk-react-utils';
+
+type Props = {
+  initiallyExpanded: boolean,
+  expanded: boolean,
+  onClick: ?() => mixed,
+};
+
+type State = {
+  expanded: boolean,
+};
+
+const withAccordionItemState = (ComposedComponent: ComponentType<any>) => {
+  class WithAccordionItemState extends Component<Props, State> {
+    static propTypes = {
+      initiallyExpanded: PropTypes.bool,
+      expanded: PropTypes.bool,
+      onClick: PropTypes.func,
+    };
+
+    static defaultProps = {
+      initiallyExpanded: false,
+      expanded: false,
+      onClick: null,
+    };
+
+    constructor(props: Props) {
+      super(props);
+
+      this.state = {
+        expanded: props.initiallyExpanded,
+      };
+    }
+
+    onClick = () => {
+      this.setState(
+        (prevState) => ({
+          expanded: !prevState.expanded,
+        }),
+        this.props.onClick || (() => {}),
+      );
+    };
+
+    render() {
+      const { expanded, initiallyExpanded, onClick, ...rest } = this.props;
+
+      return (
+        // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+        <ComposedComponent
+          expanded={this.state.expanded}
+          onClick={this.onClick}
+          {...rest}
+        />
+      );
+    }
+  }
+
+  WithAccordionItemState.displayName = wrapDisplayName(
+    ComposedComponent,
+    'withAccordionItemState',
+  );
+
+  return WithAccordionItemState;
+};
+
+export default withAccordionItemState;

package/bpk-component-accordion/src/withSingleItemAccordionState.js

@@ -0,0 +1,95 @@
+/*
+ * 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, {
+  Component,
+  Children,
+  cloneElement,
+  type Node,
+  type Element,
+  type ComponentType,
+} from 'react';
+import { wrapDisplayName } from 'bpk-react-utils';
+
+const getInitiallyExpanded = (children) => {
+  const accordionItems = Children.toArray(children);
+  const result = accordionItems.reduceRight(
+    (prev, item) => (item.props.initiallyExpanded ? item : prev),
+    {},
+  );
+  return (result || {}).key || null;
+};
+
+type Props = {
+  children: Node,
+};
+
+type State = {
+  expanded: ?string | ?number,
+};
+
+const withSingleItemAccordionState = (
+  ComposedComponent: ComponentType<any>,
+) => {
+  class WithSingleItemAccordionState extends Component<Props, State> {
+    constructor(props: Props) {
+      super(props);
+
+      this.state = {
+        expanded: getInitiallyExpanded(this.props.children),
+      };
+    }
+
+    openAccordionItem = (key: ?string | ?number) => {
+      this.setState({ expanded: key });
+    };
+
+    renderAccordionItem = (accordionItem: Element<any>) => {
+      const expanded = this.state.expanded === accordionItem.key;
+      const onClick = () => this.openAccordionItem(accordionItem.key);
+
+      return cloneElement(accordionItem, { expanded, onClick });
+    };
+
+    render() {
+      const { children, ...rest } = this.props;
+
+      return (
+        <ComposedComponent {...rest}>
+          {Children.toArray(children).map(this.renderAccordionItem)}
+        </ComposedComponent>
+      );
+    }
+  }
+
+  WithSingleItemAccordionState.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  WithSingleItemAccordionState.displayName = wrapDisplayName(
+    ComposedComponent,
+    'withSingleItemAccordionState',
+  );
+
+  return WithSingleItemAccordionState;
+};
+
+export default withSingleItemAccordionState;

package/bpk-component-aria-live/README.md

@@ -0,0 +1,42 @@
+# bpk-component-aria-live
+
+> Backpack aria-live component.
+
+## Installation
+
+```sh
+npm install bpk-component-aria-live --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from 'bpk-component-aria-live';
+
+export default () => (
+  <>
+    <BpkAriaLive>
+      Information about an interaction section of the page. This will be visible only to accessibility technologies.
+    </BpkAriaLive>
+
+    <BpkAriaLive visible politenessSetting={ARIA_LIVE_POLITENESS_SETTINGS.assertive}>
+      Information about an interaction section of the page. This will be visible to everybody.
+    </BpkAriaLive>
+  </>
+);
+```
+
+## Props
+
+| Property | PropType | Required | Default Value |
+| - | - | - | - |
+| className | string | false | null |
+| politenessSetting | oneOf([`ARIA_LIVE_POLITENESS_SETTINGS.off`, `ARIA_LIVE_POLITENESS_SETTINGS.polite`, `ARIA_LIVE_POLITENESS_SETTINGS.assertive`]) | false | `ARIA_LIVE_POLITENESS_SETTINGS.polite` |
+| visible | bool | false | false |
+
+`aria-relevant` and `aria-atomic` props can also be set.
+
+`aria-relevant` determines what sort of changes should be read out. By default it is `additions` but can be `removals` or `all`. [Read more about `aria-relevant` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute).
+
+`aria-atomic` is a boolean which determines whether changes should be read out, or the whole region should be read out. [Read more about `aria-atomic` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Use_Case:_Clock).

package/bpk-component-aria-live/examples.js

@@ -0,0 +1,248 @@
+/*
+ * 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, { type Node } from 'react';
+import BpkChip from 'bpk-component-chip';
+import BpkFieldset from 'bpk-component-fieldset';
+import BpkSelect from 'bpk-component-select';
+import BpkSwitch from 'bpk-component-switch';
+import { cssModules } from 'bpk-react-utils';
+import { BpkCode } from 'bpk-component-code';
+
+import STYLES from './examples.module.scss';
+
+import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from './index';
+
+const getClassName = cssModules(STYLES);
+
+const AriaLiveDemo = (props: {
+  preamble: ?Node,
+  children: Node,
+  className: ?string,
+  style: ?{},
+  visible: boolean,
+}) => {
+  const { children, className, preamble, style, visible, ...rest } = props;
+
+  return (
+    <div
+      className={getClassName('bpk-storybook-aria-live-demo', className)}
+      style={style}
+    >
+      <p>
+        <strong>ARIA live region:</strong>
+      </p>
+      <p>
+        {visible
+          ? 'This content is relevant to everyone, not just assistive technologies, so it is permanently visible.'
+          : 'This would usually be visually hidden, and only visible to assistive technologies. It is visible here for demo purposes.'}
+      </p>
+      {preamble}
+      <BpkAriaLive
+        {...rest}
+        visible
+        className={getClassName('bpk-storybook-aria-live-demo__aria-content')}
+        politenessSetting={ARIA_LIVE_POLITENESS_SETTINGS.assertive}
+      >
+        {children}
+      </BpkAriaLive>
+    </div>
+  );
+};
+
+AriaLiveDemo.defaultProps = {
+  preamble: null,
+  className: null,
+  visible: false,
+  style: null,
+};
+
+class SelectExample extends React.Component<
+  {},
+  { destination: string, direct: boolean },
+> {
+  constructor() {
+    super();
+    this.state = {
+      destination: 'Panjin',
+      direct: false,
+    };
+  }
+
+  onChangeDestination = (destination: string) => {
+    this.setState({ destination });
+  };
+
+  toggleDirectness = () => {
+    this.setState((prevState) => ({ direct: !prevState.direct }));
+  };
+
+  id = 'aria-live-select-example';
+
+  render() {
+    const { destination, direct } = this.state;
+    return (
+      <div>
+        <div>
+          <p>
+            Interactive component with
+            <BpkCode>aria-controls=&quot;{this.id}&quot;</BpkCode> to link it to
+            the ARIA live region below with the same ID.
+          </p>
+          <div
+            className={getClassName(
+              'bpk-storybook-aria-live-demo__select-wrapper',
+            )}
+          >
+            <BpkFieldset
+              label="Destination"
+              className={getClassName('bpk-storybook-aria-live-demo__select')}
+            >
+              <BpkSelect
+                id="destination"
+                name="destination"
+                value={destination}
+                onChange={(event) => {
+                  this.onChangeDestination(event.target.value);
+                }}
+              >
+                <option value="Abisko">Abisko</option>
+                <option value="Nara">Nara</option>
+                <option value="Panjin">Panjin</option>
+              </BpkSelect>
+            </BpkFieldset>
+            <BpkSwitch
+              className={getClassName('bpk-storybook-aria-live-demo__switch')}
+              label="Direct flights only"
+              checked={direct}
+              onChange={this.toggleDirectness}
+            />
+          </div>
+        </div>
+        <AriaLiveDemo
+          aria-atomic
+          visible
+          id={this.id}
+          className={getClassName('bpk-storybook-aria-live-demo__aria-live')}
+          preamble={
+            <p>
+              This region has <BpkCode>id=&quot;{this.id}&quot;</BpkCode>.
+              <br />
+              It also has <BpkCode>aria-atomic=&quot;true&quot;</BpkCode> to
+              instruct assistive technologies to read out everything when
+              something changes, not just the part that changed.
+            </p>
+          }
+        >
+          <p>
+            <strong>
+              Searching for {direct ? 'direct ' : ''}flights to {destination}.
+            </strong>
+          </p>
+        </AriaLiveDemo>
+      </div>
+    );
+  }
+}
+
+class ChipsExample extends React.Component<
+  {},
+  {
+    categories: { Flights: boolean, Hotels: boolean, 'Car hire': boolean },
+    updates: Array<string>,
+  },
+> {
+  constructor() {
+    super();
+    this.state = {
+      categories: {
+        Flights: true,
+        Hotels: true,
+        'Car hire': false,
+      },
+      updates: [],
+    };
+  }
+
+  id = 'aria-live-chips-example';
+
+  toggleCategory = (category: string) => {
+    this.setState((prevState) => {
+      const nextState = prevState;
+      nextState.categories[category] = !prevState.categories[category];
+      nextState.updates.push(
+        `${category} became ${
+          nextState.categories[category] ? 'enabled' : 'disabled'
+        }.`,
+      );
+      return nextState;
+    });
+  };
+
+  render() {
+    const { categories, updates } = this.state;
+    return (
+      <div>
+        <div
+          className={getClassName(
+            'bpk-storybook-aria-live-demo__chips-wrapper',
+          )}
+        >
+          <p>
+            Interactive component with
+            <BpkCode>aria-controls=&quot;{this.id}&quot;</BpkCode> to link it to
+            the ARIA live region below with the same ID.
+          </p>
+          {Object.keys(categories).map((category) => (
+            <BpkChip
+              className={getClassName('bpk-storybook-aria-live-demo__chip')}
+              aria-controls={this.id}
+              selected={categories[category]}
+              accessibilityLabel={category}
+              onClick={() => {
+                this.toggleCategory(category);
+              }}
+            >
+              {category}
+            </BpkChip>
+          ))}
+        </div>
+        <AriaLiveDemo
+          id={this.id}
+          className={getClassName('bpk-storybook-aria-live-demo__aria-live')}
+          preamble={
+            <p>
+              This region has <BpkCode>id=&quot;{this.id}&quot;</BpkCode>.
+              <br />
+              As the above chips are toggled, updates appear here.
+            </p>
+          }
+        >
+          {updates.map((update) => (
+            <p>
+              <strong>{update}</strong>
+            </p>
+          ))}
+        </AriaLiveDemo>
+      </div>
+    );
+  }
+}
+
+export { AriaLiveDemo, ChipsExample, SelectExample };

package/bpk-component-aria-live/examples.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-storybook-aria-live-demo{padding:.75rem;background:#f1f2f8;color:#8f90a0;box-shadow:0 0 0 1px #8f90a0 inset;border-radius:.375rem}.bpk-storybook-aria-live-demo__aria-content{color:#111236}.bpk-storybook-aria-live-demo__chips-wrapper{margin-bottom:.75rem}.bpk-storybook-aria-live-demo__select-wrapper{display:flex;margin-bottom:.75rem;justify-content:space-between;align-items:center}.bpk-storybook-aria-live-demo__select{flex:0.5}.bpk-storybook-aria-live-demo__switch{flex:0.3}.bpk-storybook-aria-live-demo__chip{margin-right:.75rem;margin-bottom:.75rem}.bpk-storybook-aria-live-demo__aria-live{margin-top:.75rem}.bpk-storybook-aria-live-demo>p{margin-top:0;margin-bottom:1rem}

package/bpk-component-aria-live/examples.module.scss

@@ -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.
+ */
+
+@import '~bpk-mixins/index';
+
+.bpk-storybook-aria-live-demo {
+  padding: $bpk-spacing-sm;
+  background: $bpk-color-sky-gray-tint-07;
+  color: $bpk-color-sky-gray-tint-03;
+
+  @include bpk-border-sm($bpk-color-sky-gray-tint-03);
+  @include bpk-border-radius-sm;
+
+  &__aria-content {
+    color: $bpk-color-sky-gray;
+  }
+
+  &__chips-wrapper {
+    margin-bottom: $bpk-spacing-sm;
+  }
+
+  &__select-wrapper {
+    display: flex;
+    margin-bottom: $bpk-spacing-sm;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__select {
+    flex: 0.5;
+  }
+
+  &__switch {
+    flex: 0.3;
+  }
+
+  &__chip {
+    margin-right: $bpk-spacing-sm;
+    margin-bottom: $bpk-spacing-sm;
+  }
+
+  &__aria-live {
+    margin-top: $bpk-spacing-sm;
+  }
+
+  > p {
+    margin-top: $bpk-p-margin-top;
+    margin-bottom: bpk-spacing-base();
+  }
+}