@skyscanner/backpack-web 0.0.1 → 0.0.2

package/bpk-component-paragraph/src/BpkParagraph.js

@@ -1,55 +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, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
-
-import STYLES from './BpkParagraph.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-type Props = {
-  children: Node,
-  className: ?string,
-};
-
-const BpkParagraph = (props: Props) => {
-  const classNames = [getClassName('bpk-paragraph')];
-  const { className, ...rest } = props;
-
-  if (className) {
-    classNames.push(className);
-  }
-
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-  return <p className={classNames.join(' ')} {...rest} />;
-};
-
-BpkParagraph.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-
-BpkParagraph.defaultProps = {
-  className: null,
-};
-
-export default BpkParagraph;

package/bpk-component-paragraph/src/BpkParagraph.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-paragraph{margin-top:0;margin-bottom:1rem}

package/bpk-component-paragraph/src/BpkParagraph.module.scss

@@ -1,25 +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-paragraph {
-  @include bpk-paragraph;
-}

package/bpk-tether/.eslintrc

@@ -1,6 +0,0 @@
-{
-  "rules": {
-    "import/no-unresolved": "off",
-    "import/extensions": "off"
-  }
-}

package/bpk-tether/README.md

@@ -1,52 +0,0 @@
-# bpk-tether
-
-> Wrapper around the Tether library, along with related utilities
-
-## Installation
-
-```sh
-npm install bpk-tether --save-dev
-```
-
-## Tether Wrapper
-
-A wrapper around the [Tether](http://tether.io/) library which extends the `Tether` object to emit a `position` event.
-
-### Usage
-
-```js
-import { Tether } from 'bpk-tether';
-
-this.tether = new Tether({
-  classPrefix: 'bpk-popover-tether',
-  element: popoverElement,
-  target: targetElement,
-  tetherOptions: tetherOptions,
-});
-
-this.tether.on('position', position => console.log('Tether was repositioned', position));
-```
-
-## getArrowPositionCallback
-
-When using Tether to create a popover or tooltip with an arrow pointing towards the target element, we want to have
-this arrow point to the target element at all times. To achieve this, the `getArrowPositionCallback` function returns
-a callback to be used on the `position` event. When invoked, it repositions the arrow element to stick to the target
-element.
-
-### Usage
-
-```js
-import { Tether } from 'bpk-tether';
-
-const classPrefix = 'bpk-popover-tether';
-
-this.tether = new Tether({
-  classPrefix,
-  element: tetherElement,
-  target: targetElement,
-  tetherOptions: tetherOptions,
-});
-
-this.tether.on('position', getArrowPositionCallback(tetherElement, 'arrow-id', classPrefix));
-```

package/bpk-tether/index.js

@@ -1,24 +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 TetherWrapper from './src/TetherWrapper';
-import getArrowPositionCallback from './src/getArrowPositionCallback';
-import applyRTLTransforms from './src/applyRTLTransforms';
-
-export default TetherWrapper;
-export { getArrowPositionCallback, applyRTLTransforms };

package/bpk-tether/package.json

@@ -1,19 +0,0 @@
-{
-  "name": "bpk-tether",
-  "version": "1.1.2",
-  "description": "Wrapper and utils for Tether.",
-  "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": "09fc99e4e67a5b71dc15f41a5409ad412bc139d4",
-  "dependencies": {
-    "tether": "^2.0.0"
-  }
-}

package/bpk-tether/src/TetherWrapper.js

@@ -1,30 +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 Tether from 'tether';
-
-// We extend tether to hook into the position function in order to expose
-// a `position` event on the tether object. Useful for repositioning arrows
-// etc. See http://tether.io/advanced/extending_tether/.
-Tether.modules.push({
-  position(props) {
-    this.trigger('position', props);
-  },
-});
-
-export default Tether;

package/bpk-tether/src/applyRTLTransforms.js

@@ -1,49 +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 { isRTL } from 'bpk-react-utils';
-
-const tryFlipAttachmentString = (value) => {
-  if (value.indexOf('right') !== -1) {
-    return value.replace('right', 'left');
-  }
-
-  return value.replace('left', 'right');
-};
-
-const transform = (tetherOptions) => {
-  const { attachment, targetAttachment, ...rest } = tetherOptions;
-
-  const options = {};
-
-  if (attachment) {
-    options.attachment = isRTL()
-      ? tryFlipAttachmentString(attachment)
-      : attachment;
-  }
-
-  if (targetAttachment) {
-    options.targetAttachment = isRTL()
-      ? tryFlipAttachmentString(targetAttachment)
-      : targetAttachment;
-  }
-
-  return { ...options, ...rest };
-};
-
-export default transform;

package/bpk-tether/src/getArrowPositionCallback.js

@@ -1,65 +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.
- */
-
-// For compat with various IE browsers who haven't implemented classList yet.
-// See http://youmightnotneedjquery.com/#has_class.
-const hasClass = (el, className) => {
-  if (el.classList) {
-    return el.classList.contains(className);
-  }
-
-  return new RegExp(`(^| )${className}( |$)`, 'gi').test(el.className);
-};
-
-const getArrowPositionCallback = (
-  popoverElement = {},
-  arrowId,
-  classNamePrefix = 'bpk-popover-tether',
-) => {
-  let arrowElement = null;
-
-  if (popoverElement.querySelector) {
-    arrowElement = popoverElement.querySelector(`#${arrowId}`);
-  }
-
-  if (arrowElement === null) {
-    return () => null;
-  }
-
-  return (props) => {
-    const { left, targetPos, top } = props;
-
-    const shouldApplyLeftOffset =
-      hasClass(popoverElement, `${classNamePrefix}-element-attached-top`) ||
-      hasClass(popoverElement, `${classNamePrefix}-element-attached-bottom`);
-
-    if (shouldApplyLeftOffset) {
-      const leftOffset = targetPos.left + targetPos.width / 2 - left;
-
-      arrowElement.style.top = '';
-      arrowElement.style.left = `${leftOffset}px`;
-    } else {
-      const topOffset = targetPos.top + targetPos.height / 2 - top;
-
-      arrowElement.style.top = `${topOffset}px`;
-      arrowElement.style.left = '';
-    }
-  };
-};
-
-export default getArrowPositionCallback;