@skyscanner/backpack-web 0.0.5 → 0.2.0

package/bpk-component-barchart/stories.module.scss

@@ -1,37 +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-heading {
-  margin-bottom: $bpk-spacing-sm;
-}
-
-$custom-color: $bpk-color-sagano;
-
-.bpk-barchart-custom-scrollers {
-  background: $custom-color;
-
-  &--leading {
-    @include bpk-scroll-indicator-left($custom-color);
-  }
-
-  &--trailing {
-    @include bpk-scroll-indicator-right($custom-color);
-  }
-}

package/bpk-component-blockquote/examples.js

@@ -1,33 +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 React from 'react';
-
-import BpkBlockquote from './index';
-
-const textContent = `
-It's your world and we'll help you explore it.
-Find the best prices across millions of flights, hotels and car hire options to create your perfect trip.`;
-
-const DefaultExample = () => <BpkBlockquote>{textContent}</BpkBlockquote>;
-
-const ExtraSpaceExample = () => (
-  <BpkBlockquote extraSpace>{textContent}</BpkBlockquote>
-);
-
-export { DefaultExample, ExtraSpaceExample };

package/bpk-component-breadcrumb/examples.js

@@ -1,57 +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 BpkBreadcrumb, { BpkBreadcrumbItem } from './index';
-
-const DefaultExample = () => (
-  <BpkBreadcrumb label="Default breadcrumb">
-    <BpkBreadcrumbItem href="/">Home</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-1">Page 1</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem active>Page 2</BpkBreadcrumbItem>
-  </BpkBreadcrumb>
-);
-
-const ExtremeExample = () => (
-  <BpkBreadcrumb label="Extreme breadcrumb">
-    <BpkBreadcrumbItem href="/">Home</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-1" id="123" linkProps={{ target: '_blank' }}>
-      Page 1
-    </BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-2">Page 2</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-3">Page 3</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-4">Page 4</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-5">Page 5</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-6">Page 6</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-7">Page 7</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-8">Page 8</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-9">Page 9</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-10">Page 10</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-11">Page 11</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-12">Page 12</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-13">Page 13</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-14">Page 14</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem href="/page-15">Page 15</BpkBreadcrumbItem>
-    <BpkBreadcrumbItem active>Page 16</BpkBreadcrumbItem>
-  </BpkBreadcrumb>
-);
-
-export { DefaultExample, ExtremeExample };

package/bpk-component-breakpoint/examples.js

@@ -1,72 +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, { type Node } from 'react';
-import { cssModules } from '../bpk-react-utils';
-
-import STYLES from './examples.module.scss';
-
-import BpkBreakpoint, { BREAKPOINTS } from './index';
-
-const getClassName = cssModules(STYLES);
-
-const MediaQueryStatus = (props: { children: Node, isActive: boolean }) => {
-  const { children, isActive } = props;
-
-  const className = getClassName(
-    isActive
-      ? 'bpk-breakpoints-demo--active'
-      : 'bpk-breakpoints-demo--inactive',
-  );
-
-  return <div className={className}>{children}</div>;
-};
-
-const DefaultExample = () => (
-  <div className={getClassName('bpk-breakpoints-demo')}>
-    <BpkBreakpoint query={BREAKPOINTS.MOBILE}>
-      {(isActive) => (
-        <MediaQueryStatus isActive={isActive}>MOBILE</MediaQueryStatus>
-      )}
-    </BpkBreakpoint>
-    <BpkBreakpoint query={BREAKPOINTS.TABLET}>
-      {(isActive) => (
-        <MediaQueryStatus isActive={isActive}>TABLET</MediaQueryStatus>
-      )}
-    </BpkBreakpoint>
-    <BpkBreakpoint query={BREAKPOINTS.TABLET_ONLY}>
-      {(isActive) => (
-        <MediaQueryStatus isActive={isActive}>TABLET ONLY</MediaQueryStatus>
-      )}
-    </BpkBreakpoint>
-    <BpkBreakpoint query={BREAKPOINTS.ABOVE_MOBILE}>
-      {(isActive) => (
-        <MediaQueryStatus isActive={isActive}>ABOVE MOBILE</MediaQueryStatus>
-      )}
-    </BpkBreakpoint>
-    <BpkBreakpoint query={BREAKPOINTS.ABOVE_TABLET}>
-      {(isActive) => (
-        <MediaQueryStatus isActive={isActive}>ABOVE TABLET</MediaQueryStatus>
-      )}
-    </BpkBreakpoint>
-  </div>
-);
-
-export default DefaultExample;

package/bpk-component-breakpoint/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-breakpoints-demo{border-radius:.25rem;overflow:hidden}.bpk-breakpoints-demo--active{padding:1.5rem;color:#fff;background-color:#0770e3;background-color:var(--bpk-primary-color, #0770e3)}.bpk-breakpoints-demo--inactive{padding:1.5rem;background-color:#dddde5}

package/bpk-component-breakpoint/examples.module.scss

@@ -1,36 +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-breakpoints-demo {
-  border-radius: $bpk-border-radius-xs;
-  overflow: hidden;
-
-  &--active {
-    padding: $bpk-spacing-base;
-    color: $bpk-color-white;
-
-    @include bpk-apply-primary-color-to(background-color);
-  }
-
-  &--inactive {
-    padding: $bpk-spacing-base;
-    background-color: $bpk-color-sky-gray-tint-06;
-  }
-}

package/bpk-component-button/BpkButtonStory.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-button-story-wrapper{padding:.375rem 0}

package/bpk-component-button/examples.js

@@ -1,213 +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 { action, BpkDarkExampleWrapper } from 'bpk-storybook-utils';
-
-import {
-  withButtonAlignment,
-  withLargeButtonAlignment,
-  withRtlSupport,
-} from '../bpk-component-icon';
-import SmallLongArrowRightIcon from '../bpk-component-icon/sm/long-arrow-right';
-import LargeLongArrowRightIcon from '../bpk-component-icon/lg/long-arrow-right';
-
-import STYLES from './BpkButtonStory.module.scss';
-
-import BpkButton, {
-  BpkButtonPrimary,
-  BpkButtonSecondary,
-  BpkButtonDestructive,
-  BpkButtonLink,
-  BpkButtonFeatured,
-  BpkButtonOutline,
-} from './index';
-
-const AlignedSmallLongArrowRightIcon = withButtonAlignment(
-  withRtlSupport(SmallLongArrowRightIcon),
-);
-const AlignedLargeLongArrowRightIcon = withLargeButtonAlignment(
-  withRtlSupport(LargeLongArrowRightIcon),
-);
-
-const cssModules =
-  (styles = {}) =>
-  (className) =>
-    styles[className] ? styles[className] : className;
-
-const getClassName = cssModules(STYLES);
-
-const ButtonStory = ({
-  className,
-  wrapped,
-  ...rest
-}: {
-  className: ?string,
-  wrapped: Object,
-}) => {
-  const Wrapped = wrapped;
-  return (
-    <div
-      className={[getClassName('bpk-button-story-wrapper'), className].join(
-        ' ',
-      )}
-    >
-      &nbsp;
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <Wrapped onClick={action('Button clicked')} {...rest}>
-        Button
-      </Wrapped>
-      &nbsp;
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <Wrapped onClick={action('Button clicked')} {...rest}>
-        Button <AlignedSmallLongArrowRightIcon />
-      </Wrapped>
-      &nbsp;
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <Wrapped disabled onClick={action('THIS SHOULD NEVER HAPPEN')} {...rest}>
-        Disabled
-      </Wrapped>
-      &nbsp;
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <Wrapped large onClick={action('Button clicked')} {...rest}>
-        Button
-      </Wrapped>
-      &nbsp;
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <Wrapped large onClick={action('Button clicked')} {...rest}>
-        Button <AlignedLargeLongArrowRightIcon />
-      </Wrapped>
-      &nbsp;
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <Wrapped
-        large
-        disabled
-        onClick={action('THIS SHOULD NEVER HAPPEN')}
-        {...rest}
-      >
-        Disabled
-      </Wrapped>
-      &nbsp;
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <Wrapped iconOnly onClick={action('Button clicked')} {...rest}>
-        <AlignedSmallLongArrowRightIcon />
-      </Wrapped>
-      &nbsp;
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <Wrapped iconOnly large onClick={action('Button clicked')} {...rest}>
-        <AlignedLargeLongArrowRightIcon />
-      </Wrapped>
-      &nbsp;
-    </div>
-  );
-};
-
-ButtonStory.defaultProps = { className: null };
-
-const PrimaryExample = () => <ButtonStory primary wrapped={BpkButton} />;
-const SecondaryExample = () => <ButtonStory secondary wrapped={BpkButton} />;
-const DestructiveExample = () => (
-  <ButtonStory destructive wrapped={BpkButton} />
-);
-const LinkExample = () => <ButtonStory link wrapped={BpkButton} />;
-const FeaturedExample = () => <ButtonStory featured wrapped={BpkButton} />;
-const OutlineExample = () => (
-  <BpkDarkExampleWrapper>
-    <ButtonStory
-      outline
-      wrapped={BpkButton}
-      className={getClassName('bpk-outline-layout')}
-    />
-  </BpkDarkExampleWrapper>
-);
-
-const ComponentButtonPrimaryExample = (props: {}) => (
-  /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
-  <ButtonStory wrapped={BpkButtonPrimary} {...props} />
-);
-const ComponentButtonSecondaryExample = (props: {}) => (
-  /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
-  <ButtonStory wrapped={BpkButtonSecondary} {...props} />
-);
-const ComponentButtonDestructiveExample = (props: {}) => (
-  /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
-  <ButtonStory wrapped={BpkButtonDestructive} {...props} />
-);
-const ComponentButtonLinkExample = (props: {}) => (
-  /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
-  <ButtonStory wrapped={BpkButtonLink} {...props} />
-);
-const ComponentButtonLinkWithPaddingExample = (props: {}) => (
-  /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
-  <ButtonStory
-    wrapped={(wrappedProps) => <BpkButtonLink padded {...wrappedProps} />}
-    {...props}
-  />
-);
-const ComponentButtonFeaturedExample = (props: {}) => (
-  /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
-  <ButtonStory wrapped={BpkButtonFeatured} {...props} />
-);
-const ComponentButtonOutlineExample = (props: {}) => (
-  <BpkDarkExampleWrapper>
-    {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-    <ButtonStory wrapped={BpkButtonOutline} {...props} />
-  </BpkDarkExampleWrapper>
-);
-
-const MixedExample = () => (
-  <>
-    <ComponentButtonPrimaryExample />
-    <ComponentButtonSecondaryExample />
-    <ComponentButtonDestructiveExample />
-    <ComponentButtonLinkExample />
-    <ComponentButtonFeaturedExample />
-    <ComponentButtonOutlineExample />
-  </>
-);
-
-const AnchorTagsExample = () => (
-  <>
-    <ComponentButtonPrimaryExample href="#" />
-    <ComponentButtonSecondaryExample href="#" />
-    <ComponentButtonDestructiveExample href="#" />
-    <ComponentButtonLinkExample href="#" />
-    <ComponentButtonFeaturedExample href="#" />
-    <ComponentButtonOutlineExample href="#" />
-  </>
-);
-
-export {
-  PrimaryExample,
-  SecondaryExample,
-  DestructiveExample,
-  LinkExample,
-  FeaturedExample,
-  OutlineExample,
-  ComponentButtonPrimaryExample,
-  ComponentButtonSecondaryExample,
-  ComponentButtonDestructiveExample,
-  ComponentButtonLinkExample,
-  ComponentButtonLinkWithPaddingExample,
-  ComponentButtonFeaturedExample,
-  ComponentButtonOutlineExample,
-  MixedExample,
-  AnchorTagsExample,
-};

package/bpk-component-calendar/coloured-calendar-example.js

@@ -1,106 +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.
- */
-
-/* eslint-disable react/prop-types */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { action } from 'bpk-storybook-utils';
-
-import {
-  BpkCalendarGrid,
-  BpkCalendarGridHeader,
-  BpkCalendarDate,
-  CELL_TYPES,
-  composeCalendar,
-  withCalendarState,
-  CustomPropTypes,
-  CALENDAR_SELECTION_TYPE,
-} from './index';
-
-const prices = [
-  125, 56, 75, 57, 78, 92, 133, 90, 148, 80, 122, 67, 70, 123, 77, 66, 64, 56,
-  105, 138, 52, 70, 106, 77, 66, 64, 56, 105, 138, 52, 70, 106,
-];
-
-const MyCalendarDate = (props) => {
-  const day = props.date.getDate();
-  const price = prices[day - 1];
-
-  let cell = CELL_TYPES.default;
-  if (price >= 100) {
-    cell = CELL_TYPES.negative;
-  } else if (price >= 75) {
-    cell = CELL_TYPES.neutral;
-  } else if (price < 60 && price <= 74) {
-    cell = CELL_TYPES.positive;
-  }
-
-  return <BpkCalendarDate cellType={cell} price={price} {...props} />;
-};
-
-const StatefulCalendar = withCalendarState(
-  composeCalendar(null, BpkCalendarGridHeader, BpkCalendarGrid, MyCalendarDate),
-);
-
-class ColoredCalendar extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selectionConfiguration: {
-        type: CALENDAR_SELECTION_TYPE.single,
-        date: new Date(),
-      },
-    };
-  }
-
-  render() {
-    return (
-      <StatefulCalendar
-        {...this.props}
-        onDateSelect={(date) => {
-          this.setState({
-            selectionConfiguration: {
-              type: this.props.selectionConfiguration.type,
-              date,
-            },
-          });
-          action('Selected day')(date);
-        }}
-        selectionConfiguration={this.state.selectionConfiguration}
-        onMonthChange={action('Changed month')}
-      />
-    );
-  }
-}
-
-ColoredCalendar.propTypes = {
-  selectTodaysDate: PropTypes.bool,
-  selectionConfiguration: CustomPropTypes.SelectionConfiguration,
-};
-
-ColoredCalendar.defaultProps = {
-  selectTodaysDate: true,
-  selectionConfiguration: {
-    type: CALENDAR_SELECTION_TYPE.single,
-    date: new Date(),
-  },
-};
-
-export default ColoredCalendar;