@skyscanner/backpack-web 0.0.6 → 0.1.0

package/bpk-component-navigation-bar/examples.module.scss

@@ -1,32 +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';
-
-$bpk-spacing-v2: true;
-
-.bpk-navigation-bar-story {
-  padding: $bpk-one-pixel-rem $bpk-one-pixel-rem bpk-spacing-xxl() * 2;
-  background-color: $bpk-color-sky-gray-tint-07;
-
-  @include bpk-border-sm($bpk-color-sky-gray-tint-07);
-
-  > * {
-    margin-bottom: bpk-spacing-base();
-  }
-}

package/bpk-component-navigation-stack/examples.js

@@ -1,73 +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.
- */
-
-/* @flow strict */
-
-import React from 'react';
-import { cssModules } from '../bpk-react-utils';
-import { updateOnDirectionChange } from '../bpk-component-rtl-toggle';
-
-import STYLES from './examples.module.scss';
-import {
-  View,
-  SimpleNav,
-  NavigationBar,
-  withNavigationBar,
-} from './stories-components';
-
-import BpkNavigationStack, { withNavigationStackState } from './index';
-
-const RtlAwareNavigationStack = updateOnDirectionChange(BpkNavigationStack);
-
-const StatefulNavigationStack = withNavigationStackState(
-  RtlAwareNavigationStack,
-);
-
-const NavigationStackWithBarOutside = withNavigationBar(
-  RtlAwareNavigationStack,
-);
-
-const StatefulNavigationStackWithBarOutside = withNavigationStackState(
-  NavigationStackWithBarOutside,
-  false,
-);
-
-const getClassName = cssModules(STYLES);
-
-const DefaultExample = () => (
-  <StatefulNavigationStack
-    className={getClassName('bpk-navigation-stack-story-wrapper')}
-    initialViews={[<View centered>{(props) => <SimpleNav {...props} />}</View>]}
-  />
-);
-
-const WithNavBarExample = () => (
-  <StatefulNavigationStack
-    className={getClassName('bpk-navigation-stack-story-wrapper')}
-    initialViews={[<View>{(props) => <NavigationBar {...props} />}</View>]}
-  />
-);
-
-const WithNavBarOutsideExample = () => (
-  <StatefulNavigationStackWithBarOutside
-    className={getClassName('bpk-navigation-stack-story-wrapper')}
-    initialViews={[<View noNavBar>{() => null}</View>]}
-  />
-);
-
-export { DefaultExample, WithNavBarExample, WithNavBarOutsideExample };

package/bpk-component-navigation-stack/examples.module.css

@@ -1,18 +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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-navigation-stack-story-wrapper{box-shadow:0 0 0 1px #dddde5 }.bpk-navigation-stack-view{min-height:31.5rem;flex:1;background-color:#dddde5}.bpk-navigation-stack-view--alternate{background-color:#f1f2f8}.bpk-navigation-stack-view--no-nav-bar{min-height:28.5rem}.bpk-navigation-stack-view--centered{display:flex;justify-content:center;align-items:center}

package/bpk-component-navigation-stack/examples.module.scss

@@ -1,43 +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';
-
-.bpk-navigation-stack-story-wrapper {
-  @include bpk-border-sm($bpk-color-sky-gray-tint-06, '');
-}
-
-.bpk-navigation-stack-view {
-  min-height: $bpk-spacing-xxl * 12;
-  flex: 1;
-  background-color: $bpk-color-sky-gray-tint-06;
-
-  &--alternate {
-    background-color: $bpk-color-sky-gray-tint-07;
-  }
-
-  &--no-nav-bar {
-    min-height: ($bpk-spacing-xxl * 12) - ($bpk-spacing-base * 2);
-  }
-
-  &--centered {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}

package/bpk-component-navigation-stack/stories-components.js

@@ -1,202 +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.
- */
-
-/* @flow strict */
-
-import BpkNavigationBar, {
-  BpkNavigationBarIconButton,
-} from '../bpk-component-navigation-bar';
-import BpkButton from '../bpk-component-button';
-import { cssModules } from '../bpk-react-utils';
-import { withRtlSupport } from '../bpk-component-icon';
-import React, {
-  type Element,
-  type ComponentType,
-  type ElementConfig,
-} from 'react';
-import BpkLeftArrowIcon from '../bpk-component-icon/sm/long-arrow-left';
-import BpkRightArrowIcon from '../bpk-component-icon/sm/long-arrow-right';
-
-import STYLES from './examples.module.scss';
-
-import BpkNavigationStack from './index';
-
-const LeftArrowIcon = withRtlSupport(BpkLeftArrowIcon);
-const RightArrowIcon = withRtlSupport(BpkRightArrowIcon);
-
-const getClassName = cssModules(STYLES);
-
-export const View = ({
-  centered,
-  children,
-  className,
-  index,
-  noNavBar,
-  popView,
-  pushView,
-  ...rest
-}: {
-  children: ({
-    index: number,
-    pushView: ?(Element<any>) => mixed,
-    popView: ?() => mixed,
-  }) => ?Element<any>,
-  index: number,
-  pushView: ?(Element<any>) => mixed,
-  popView: ?() => mixed,
-  className: ?string,
-  noNavBar: boolean,
-  centered: boolean,
-}) => (
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  <section
-    className={getClassName(
-      'bpk-navigation-stack-view',
-      index % 2 === 0 && 'bpk-navigation-stack-view--alternate',
-      noNavBar && 'bpk-navigation-stack-view--no-nav-bar',
-      centered && 'bpk-navigation-stack-view--centered',
-      className,
-    )}
-    {...rest}
-  >
-    {children({ index, pushView, popView })}
-  </section>
-);
-
-View.defaultProps = {
-  index: 0,
-  className: null,
-  pushView: null,
-  popView: null,
-  noNavBar: false,
-  centered: false,
-};
-
-export const SimpleNav = ({
-  index,
-  popView,
-  pushView,
-}: {
-  index: number,
-  pushView: ?(Element<any>) => mixed,
-  popView: ?() => mixed,
-}) => (
-  <div>
-    <BpkButton
-      onClick={() =>
-        pushView &&
-        pushView(
-          <View index={index + 1} centered>
-            {(props) => <SimpleNav {...props} />}
-          </View>,
-        )
-      }
-    >
-      Push view
-    </BpkButton>
-    {index > 0 ? (
-      <BpkButton destructive onClick={() => popView && popView()}>
-        Pop view
-      </BpkButton>
-    ) : null}
-  </div>
-);
-
-export const NavigationBar = ({
-  index,
-  nextView,
-  popView,
-  pushView,
-}: {
-  index: number,
-  pushView: ?(Element<any>) => mixed,
-  popView: ?() => mixed,
-  nextView: ?() => ?Element<any>,
-}) => (
-  <BpkNavigationBar
-    id={`my-navigation-bar-${index}`}
-    title={`View ${index + 1}`}
-    leadingButton={
-      index > 0 ? (
-        <BpkNavigationBarIconButton
-          onClick={() => popView && popView()}
-          icon={LeftArrowIcon}
-          label="Back"
-        />
-      ) : null
-    }
-    trailingButton={
-      <BpkNavigationBarIconButton
-        onClick={() =>
-          pushView &&
-          pushView(
-            (nextView && nextView()) || (
-              <View index={index + 1}>
-                {(props) => <NavigationBar {...props} />}
-              </View>
-            ),
-          )
-        }
-        icon={RightArrowIcon}
-        label="Next"
-      />
-    }
-  />
-);
-
-NavigationBar.defaultProps = {
-  pushView: null,
-  popView: null,
-  nextView: null,
-};
-
-export const withNavigationBar = (
-  Stack: ComponentType<ElementConfig<typeof BpkNavigationStack>>,
-) => {
-  const WithNavigationBar = ({
-    popView,
-    pushView,
-    views,
-    ...rest
-  }: {
-    views: Array<Element<any>>,
-    pushView: ?(Element<any>) => mixed,
-    popView: ?() => mixed,
-  }) => (
-    <div {...rest}>
-      <NavigationBar
-        index={views.length - 1}
-        pushView={pushView}
-        popView={popView}
-        nextView={() => (
-          <View index={views.length} noNavBar>
-            {() => null}
-          </View>
-        )}
-      />
-      <Stack views={views} />
-    </div>
-  );
-
-  WithNavigationBar.defaultProps = {
-    pushView: null,
-    popView: null,
-  };
-
-  return WithNavigationBar;
-};

package/bpk-component-nudger/BpkNudgerStory.module.css

@@ -1,18 +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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-nudger-outline{color:#fff}.bpk-nudger-configurable{width:7rem}

package/bpk-component-nudger/examples.js

@@ -1,204 +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.
- */
-
-/* @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,
-};