@skyscanner/backpack-web 0.0.5 → 0.2.0

package/bpk-component-popover/examples.js

@@ -1,267 +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 PropTypes from 'prop-types';
-import React, { Component, type Node } from 'react';
-import { cssModules, withDefaultProps } from '../bpk-react-utils';
-import BpkButton from '../bpk-component-button';
-import BpkText, { TEXT_STYLES } from '../bpk-component-text';
-import BpkContentContainer from '../bpk-component-content-container';
-import BpkInput, { withOpenEvents } from '../bpk-component-input';
-
-import STYLES from './examples.module.scss';
-
-import BpkPopover from './index';
-
-const getClassName = cssModules(STYLES);
-
-const EnhancedInput = withOpenEvents(BpkInput);
-
-const Paragraph = withDefaultProps(BpkText, {
-  textStyle: TEXT_STYLES.bodyDefault,
-  tagName: 'p',
-  className: getClassName('bpk-popover-paragraph'),
-});
-
-type Props = {
-  id: string,
-  changeProps: boolean,
-  closeProgrammatically: boolean,
-  inputTrigger: boolean,
-  targetFunction: ?() => ?HTMLElement,
-};
-
-type State = {
-  isOpen: boolean,
-  changedTarget: ?() => ?HTMLElement,
-};
-
-class PopoverContainer extends Component<Props, State> {
-  static propTypes = {
-    className: PropTypes.string,
-    id: PropTypes.string.isRequired,
-    changeProps: PropTypes.bool,
-    closeProgrammatically: PropTypes.bool,
-    inputTrigger: PropTypes.bool,
-    targetFunction: PropTypes.func,
-  };
-
-  static defaultProps = {
-    className: null,
-    changeProps: false,
-    closeProgrammatically: false,
-    inputTrigger: false,
-    targetFunction: null,
-  };
-
-  constructor() {
-    super();
-
-    this.state = {
-      isOpen: false,
-      changedTarget: null,
-    };
-  }
-
-  openPopover = () => {
-    this.setState({
-      isOpen: true,
-    });
-    if (this.props.closeProgrammatically) {
-      setTimeout(() => {
-        this.closePopover();
-      }, 2000);
-    }
-  };
-
-  closePopover = () => {
-    this.setState({
-      isOpen: false,
-    });
-  };
-
-  changeTarget = () => {
-    const changedTarget = (): ?HTMLElement =>
-      document.getElementById('reposition-alt-target');
-
-    this.setState({ changedTarget });
-  };
-
-  render() {
-    const { changeProps, id, inputTrigger, targetFunction, ...rest } =
-      this.props;
-    let target = null;
-    let openButton = <BpkButton onClick={this.openPopover}> Open </BpkButton>;
-
-    if (targetFunction != null) {
-      target = targetFunction;
-    } else if (this.state.changedTarget) {
-      target = this.state.changedTarget;
-    } else {
-      target = openButton;
-      openButton = null;
-    }
-
-    const renderTarget: ?Function = (): ?HTMLElement =>
-      document.getElementById('popover-container');
-
-    return (
-      <div id="popover-container">
-        {openButton}
-        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-        <BpkPopover
-          closeButtonText="Close"
-          id={`my-popover-${id}`}
-          isOpen={this.state.isOpen}
-          label="My popover"
-          onClose={this.closePopover}
-          renderTarget={renderTarget}
-          target={
-            inputTrigger ? (
-              <EnhancedInput
-                id="input"
-                name="input"
-                value="John Smith"
-                isOpen={this.state.isOpen}
-                onOpen={this.openPopover}
-                onChange={() => null}
-              />
-            ) : (
-              target
-            )
-          }
-          {...rest}
-        >
-          <BpkContentContainer>
-            <Paragraph>My popover content.</Paragraph>
-            <Paragraph>Some more popover content.</Paragraph>
-            {changeProps ? (
-              <BpkButton onClick={this.changeTarget}>Change target</BpkButton>
-            ) : null}
-          </BpkContentContainer>
-        </BpkPopover>
-      </div>
-    );
-  }
-}
-
-const Spacer = (props: { children: Node }) => (
-  <div className={getClassName('bpk-popover-spacer')}>{props.children}</div>
-);
-
-const DefaultExample = () => (
-  <Spacer>
-    <PopoverContainer id="my-popover-1" />
-  </Spacer>
-);
-
-const WithLabelAsTitleExample = () => (
-  <Spacer>
-    <PopoverContainer id="my-popover" labelAsTitle />
-  </Spacer>
-);
-
-const AlongsideInputExample = () => (
-  <Spacer>
-    <PopoverContainer id="my-popover" labelAsTitle />
-    <input name="input" />
-  </Spacer>
-);
-
-const CloseProgrammaticallyExample = () => (
-  <Spacer>
-    <PopoverContainer id="my-popover" labelAsTitle closeProgrammatically />
-  </Spacer>
-);
-
-const WithLabelAsTitleAndTextCloseButtonExample = () => (
-  <Spacer>
-    <PopoverContainer id="my-popover" labelAsTitle closeButtonIcon={false} />
-  </Spacer>
-);
-
-const OnTheSideExample = () => (
-  <Spacer>
-    <PopoverContainer id="my-popover" placement="right" />
-  </Spacer>
-);
-
-const AttachToExternalExample = () => (
-  <Spacer>
-    <div id="attachElement">Pop over attached here</div>
-    <p>&nbsp; </p>
-    <PopoverContainer
-      id="my-popover"
-      targetFunction={() => document.getElementById('attachElement')}
-    />
-  </Spacer>
-);
-
-const NoRenderWhenNoExternalElementExample = () => (
-  <Spacer>
-    <div id="attachElement">Popover does not open</div>
-    <p>&nbsp; </p>
-    <PopoverContainer
-      id="my-popover"
-      targetFunction={() => document.getElementById('doesNotExist')}
-    />
-  </Spacer>
-);
-
-const RepositioningExample = () => (
-  // This story demonstrates the popover repositioning itself when props change (including children).
-  <Spacer>
-    <Paragraph id="reposition-alt-target" style={{ float: 'right' }}>
-      Different target
-    </Paragraph>
-    <PopoverContainer id="my-popover" changeProps />
-  </Spacer>
-);
-
-const PopperModifiersExample = () => (
-  <Spacer>
-    <PopoverContainer
-      id="my-popover"
-      popperModifiers={{
-        flip: { enabled: false },
-      }}
-    />
-  </Spacer>
-);
-
-const InputTriggerExample = () => (
-  <Spacer>
-    <PopoverContainer id="my-popover-1" inputTrigger />
-  </Spacer>
-);
-
-export {
-  DefaultExample,
-  WithLabelAsTitleExample,
-  AlongsideInputExample,
-  CloseProgrammaticallyExample,
-  WithLabelAsTitleAndTextCloseButtonExample,
-  OnTheSideExample,
-  AttachToExternalExample,
-  NoRenderWhenNoExternalElementExample,
-  RepositioningExample,
-  PopperModifiersExample,
-  InputTriggerExample,
-};

package/bpk-component-popover/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-popover-paragraph{margin-bottom:0.25rem}.bpk-popover-spacer{display:flex;height:6.25rem;margin:1.875rem;justify-content:space-around;align-items:flex-start}

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

@@ -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 '~bpk-mixins';
-
-$bpk-spacing-v2: true;
-
-.bpk-popover-paragraph {
-  margin-bottom: bpk-spacing-sm();
-}
-
-.bpk-popover-spacer {
-  display: flex;
-  height: 100 * $bpk-one-pixel-rem;
-  margin: 30 * $bpk-one-pixel-rem;
-  justify-content: space-around;
-  align-items: flex-start;
-}

package/bpk-component-progress/examples.js

@@ -1,130 +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 BpkButton from '../bpk-component-button';
-import { cssModules } from '../bpk-react-utils';
-
-import STYLES from './examples.module.scss';
-
-import BpkProgress from './index';
-
-const getClassName = cssModules(STYLES);
-
-class ProgressContainer extends Component<{}, { progress: number }> {
-  constructor() {
-    super();
-
-    this.state = {
-      progress: 0,
-    };
-  }
-
-  render() {
-    const { progress } = this.state;
-    return (
-      <div className={getClassName('bpkdocs-progress-container__flex')}>
-        <BpkButton
-          secondary
-          onClick={() => this.setState({ progress: 0 })}
-          disabled={progress === 0}
-        >
-          Reset
-        </BpkButton>
-        &nbsp;
-        <BpkButton
-          onClick={() => this.setState({ progress: progress + 50 })}
-          disabled={progress === 100}
-        >
-          Go!
-        </BpkButton>
-        &nbsp;
-        <div className={getClassName('bpkdocs-progress-container__flex-grow')}>
-          {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-          <BpkProgress min={0} max={100} value={progress} {...this.props} />
-        </div>
-      </div>
-    );
-  }
-}
-
-class SteppedProgressContainer extends Component<{}, { progress: number }> {
-  constructor() {
-    super();
-
-    this.state = {
-      progress: 1,
-    };
-  }
-
-  setProgress = (progress: number) => {
-    if (progress >= 1 && progress <= 5) {
-      this.setState({ progress });
-    }
-  };
-
-  render() {
-    return (
-      <div>
-        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-        <BpkProgress
-          min={0}
-          max={5}
-          value={this.state.progress}
-          stepped
-          {...this.props}
-        />
-        <br />
-        <div className={getClassName('bpkdocs-progress-container__flex')}>
-          <BpkButton
-            secondary
-            onClick={() => this.setProgress(this.state.progress - 1)}
-            disabled={this.state.progress <= 1}
-          >
-            Back
-          </BpkButton>
-          <span>{`Step ${this.state.progress} of 5`}</span>
-          <BpkButton
-            onClick={() => this.setProgress(this.state.progress + 1)}
-            disabled={this.state.progress === 5}
-          >
-            Continue
-          </BpkButton>
-        </div>
-      </div>
-    );
-  }
-}
-
-const DefaultExample = () => <ProgressContainer />;
-
-const SmallExample = () => <ProgressContainer small />;
-
-const SteppedExample = () => <SteppedProgressContainer />;
-
-const MixedExample = () => (
-  <div>
-    <DefaultExample />
-    <SmallExample />
-    <SteppedExample />
-  </div>
-);
-
-export { DefaultExample, SmallExample, SteppedExample, MixedExample };

package/bpk-component-progress/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.
-*/
-.bpkdocs-progress-container__flex{display:flex;justify-content:space-between;align-items:center}.bpkdocs-progress-container__flex-grow{flex-grow:1}

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

@@ -1,29 +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.
- */
-
-.bpkdocs-progress-container {
-  &__flex {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &-grow {
-      flex-grow: 1;
-    }
-  }
-}

package/bpk-component-radio/examples.js

@@ -1,126 +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 BpkRadio from './index';
-
-const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem dolores doloremque, expedita
-quaerat temporibus ipsam, ut, ipsa, velit sed assumenda suscipit dolore quod similique delectus numquam neque!
-Nesciunt, voluptate, illo.`;
-
-class GroupExample extends React.Component<{}, { value: string }> {
-  constructor() {
-    super();
-    this.state = { value: 'Lagos' };
-  }
-
-  updateValue = (value: string) => {
-    action(`Radio changed. New value: ${value}`);
-    this.setState({ value });
-  };
-
-  render() {
-    const { value } = this.state;
-    const { ...rest } = this.props;
-    return (
-      <div>
-        {['Lagos', 'Kano', 'Ibadan', 'Benin City'].map((city) => (
-          <div>
-            <BpkRadio
-              {...rest}
-              id={city}
-              name={city}
-              label={city}
-              onChange={(event) => {
-                this.updateValue(event.target.value);
-              }}
-              value={city}
-              checked={value === city}
-              disabled={city === 'Benin City'}
-            />
-          </div>
-        ))}
-      </div>
-    );
-  }
-}
-
-const DefaultExample = () => <GroupExample />;
-
-const Multiline = () => (
-  <BpkRadio
-    id="multi_line"
-    name="multi_line"
-    label={loremIpsum}
-    onChange={action('radio changed')}
-  />
-);
-
-const Invalid = () => <GroupExample valid={false} />;
-
-const White = () => (
-  <BpkDarkExampleWrapper padded>
-    <GroupExample white />
-  </BpkDarkExampleWrapper>
-);
-
-const DisabledChecked = () => (
-  <BpkRadio
-    id="disabled_checked"
-    name="disabled_checked"
-    label="Return"
-    onChange={action('radio changed')}
-    checked
-    disabled
-  />
-);
-
-const DisabledUnchecked = () => (
-  <BpkRadio
-    id="disabled"
-    name="disabled"
-    label="Return"
-    onChange={action('radio changed')}
-    disabled
-  />
-);
-
-const MixedExample = () => (
-  <div>
-    <DefaultExample />
-    <Multiline />
-    <Invalid />
-    <White />
-    <DisabledChecked />
-    <DisabledUnchecked />
-  </div>
-);
-
-export {
-  DefaultExample,
-  Multiline,
-  Invalid,
-  White,
-  DisabledChecked,
-  DisabledUnchecked,
-  MixedExample,
-};