@skyscanner/backpack-web 0.0.1

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -0,0 +1,193 @@
+/*
+ * 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, { cloneElement, type Element } from 'react';
+import BpkLabel from 'bpk-component-label';
+import BpkFormValidation from 'bpk-component-form-validation';
+import { cssModules } from 'bpk-react-utils';
+
+import STYLES from './BpkFieldset.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export type Props = {
+  // TODO: Should this be something like `Element<typeof BpkInput | typeof BpkCheckbox | typeof BpkSelect>`?
+  children: Element<*>,
+  label: ?string,
+  disabled: boolean,
+  valid: ?boolean,
+  required: boolean,
+  className: ?string,
+  validationMessage: ?string,
+  isCheckbox: boolean,
+  validationProps: {},
+  description: ?string,
+};
+
+const BpkFieldset = (props: Props) => {
+  const {
+    children,
+    className,
+    description,
+    disabled,
+    isCheckbox,
+    label,
+    required,
+    valid,
+    validationMessage,
+    validationProps,
+    ...rest
+  } = props;
+
+  if (!children) {
+    return null;
+  }
+
+  // $FlowIgnore[prop-missing] - As children could be any element and might not have a value which is safe
+  let childId: string = children.props.id;
+  if (
+    // Flow is being dumb here and doesn't let us do this check, even though it's perfectly safe!
+    // $FlowIgnore[prop-missing]
+    // $FlowIgnore[sketchy-null-mixed]
+    children.props.inputProps &&
+    // $FlowIgnore[sketchy-null-mixed]
+    children.props.inputProps.id &&
+    typeof children.props.inputProps.id === 'string'
+  ) {
+    childId = children.props.inputProps.id;
+  }
+
+  const classNames = [getClassName('bpk-fieldset')];
+  const validationMessageId = `${childId}_validation_message`;
+  const descriptionId = `${childId}_description`;
+
+  const isValid = isCheckbox ? valid : children.props.valid;
+
+  // Explicit check for false primitive value as undefined is
+  // treated as neither valid nor invalid
+  const isInvalid = isValid === false;
+
+  const childrenProps: {
+    required?: boolean,
+    'aria-required'?: boolean,
+    'aria-describedby'?: string,
+  } = {
+    disabled,
+  };
+
+  if (isCheckbox) {
+    childrenProps.required = required;
+  } else {
+    childrenProps['aria-required'] = required;
+  }
+
+  if (validationMessage && isInvalid) {
+    childrenProps['aria-describedby'] = validationMessageId;
+  } else if (description) {
+    childrenProps['aria-describedby'] = descriptionId;
+  }
+
+  const clonedChildren = cloneElement(children, childrenProps);
+
+  if (className) {
+    classNames.push(className);
+  }
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <fieldset className={classNames.join(' ')} {...rest}>
+      {!isCheckbox && (
+        <BpkLabel
+          className={getClassName('bpk-fieldset__label')}
+          htmlFor={childId}
+          required={required}
+          disabled={disabled}
+          valid={isValid}
+        >
+          {/* $FlowIgnore[incompatible-type] - As this prop is only required when isCheckbox is false our labelPropType handles checking this is null or not. */}
+          {label}
+        </BpkLabel>
+      )}
+      {clonedChildren}
+      {description && (
+        <span
+          className={getClassName('bpk-fieldset__description')}
+          id={descriptionId}
+        >
+          {description}
+        </span>
+      )}
+      {!disabled && validationMessage && (
+        // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+        <BpkFormValidation
+          id={validationMessageId}
+          expanded={isInvalid}
+          isCheckbox={isCheckbox}
+          {...validationProps}
+        >
+          {validationMessage}
+        </BpkFormValidation>
+      )}
+    </fieldset>
+  );
+};
+
+const labelPropType = (
+  props: { isCheckbox?: boolean, label?: ?string },
+  propName: string,
+) => {
+  const { isCheckbox, label } = props;
+  if (!label && !isCheckbox) {
+    return new Error(
+      `\`${propName}\` is required when \`isCheckbox\` is false.`,
+    );
+  }
+  return false;
+};
+
+export const propTypes = {
+  children: PropTypes.element.isRequired,
+  label: labelPropType,
+  disabled: PropTypes.bool,
+  valid: PropTypes.bool,
+  required: PropTypes.bool,
+  className: PropTypes.string,
+  validationMessage: PropTypes.string,
+  isCheckbox: PropTypes.bool,
+  validationProps: PropTypes.object,
+  description: PropTypes.string,
+};
+
+export const defaultProps = {
+  label: null,
+  disabled: false,
+  valid: null,
+  required: false,
+  className: null,
+  validationMessage: null,
+  isCheckbox: false,
+  validationProps: {},
+  description: null,
+};
+
+BpkFieldset.propTypes = { ...propTypes };
+BpkFieldset.defaultProps = { ...defaultProps };
+
+export default BpkFieldset;

package/bpk-component-fieldset/src/BpkFieldset.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-fieldset{margin:0;padding:0;border:0}.bpk-fieldset__description{display:block;margin-top:0.5rem;color:#68697f;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-fieldset__label{margin-bottom:0.5rem}

package/bpk-component-fieldset/src/BpkFieldset.module.scss

@@ -0,0 +1,39 @@
+/*
+ * 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-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+
+  &__description {
+    display: block;
+    margin-top: bpk-spacing-md();
+    color: $bpk-color-sky-gray-tint-02;
+
+    @include bpk-caption;
+  }
+
+  &__label {
+    margin-bottom: bpk-spacing-md();
+  }
+}

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

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+export default ['fieldsetLabelTextColor'];

package/bpk-component-flare/README.md

@@ -0,0 +1,52 @@
+# bpk-component-flare
+
+> Backpack example component.
+
+## Installation
+
+```sh
+npm install bpk-component-flare --save-dev
+```
+
+## Usage
+
+Note that the default background color is white. You will need to apply a custom className if you wish to change this.
+
+### React components
+
+```js
+import React from 'react';
+import { BpkContentBubble } from 'bpk-component-flare';
+
+export default MyComponent = () => (
+  <div>
+      <BpkContentBubble
+      className="myCustomClassName"
+      showPointer={false}
+      rounded={false}
+      content={...}
+      />
+  </div>
+)
+```
+
+
+## Props
+
+### BpkContentBubble
+
+| Property         | PropType                                 | Required | Default Value |
+| ---------------- | ---------------------------------------- | -------- | ------------- |
+| className        | string                                   | false    | null          |
+| content          | node                                     | false    | null          |
+| contentClassName | string                                   | false    | null          |
+| flareProps       | object - see [BpkFlareBar](#bpkflarebar) | false    | null          |
+| showPointer      | bool                                     | false    | true          |
+
+### BpkFlareBar
+
+| Property     | PropType | Required | Default Value |
+| ------------ | -------- | -------- | ------------- |
+| className    | string   | false    | null          |
+| svgClassName | string   | false    | null          |
+

package/bpk-component-flare/examples.js

@@ -0,0 +1,158 @@
+/*
+ * 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 BpkText from 'bpk-component-text';
+import { cssModules } from 'bpk-react-utils';
+
+import { BpkFlareBar, BpkContentBubble } from './index';
+
+// eslint-disable-next-line import/order
+import STYLES from './examples.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const contentShort = (
+  <div className={getClassName('bpk-flare-stories__content')}>
+    <BpkText tagName="h1" textStyle="xxl">
+      Love planet. Will travel.
+      <BpkText tagName="p" textStyle="base">
+        Go discover a new adventure.
+      </BpkText>
+    </BpkText>
+  </div>
+);
+const content = (
+  <div className={getClassName('bpk-flare-stories__content')}>
+    <BpkText tagName="h1" textStyle="xxl">
+      Love planet. Will travel.
+      <BpkText tagName="p" textStyle="base">
+        Lorem ipsum dolor sit amet consectetur adipiscing elit, volutpat tellus
+        massa taciti platea auctor, accumsan egestas cubilia ultricies lacus
+        consequat. Vulputate quisque dignissim habitant urna accumsan tempor
+        praesent, quam torquent sem nascetur cubilia odio, convallis dapibus
+        senectus natoque sociis ante. Cras interdum feugiat quisque per dis
+        lacus cubilia sem, orci sodales mauris a quis mollis duis nam curabitur,
+        laoreet ad eros class aliquet sagittis rutrum. Rhoncus integer mi platea
+        suscipit dictum facilisis, sociis nam enim tincidunt conubia. Himenaeos
+        eros ornare vestibulum laoreet in accumsan, eleifend interdum tellus
+        ligula suspendisse nisl, hac magna conubia habitasse nunc. Ligula mattis
+        euismod libero volutpat ut taciti tincidunt parturient class elementum
+        pellentesque porta, proin magnis fringilla sociosqu rutrum placerat nec
+        lacus tempor fusce netus etiam, cubilia tellus facilisi duis leo morbi
+        mauris at augue varius nunc. Lorem ipsum dolor sit amet consectetur
+        adipiscing elit, volutpat tellus massa taciti platea auctor, accumsan
+        egestas cubilia ultricies lacus consequat. Vulputate quisque dignissim
+        habitant urna accumsan.
+      </BpkText>
+    </BpkText>
+  </div>
+);
+
+const FlareBarExample = () => (
+  <BpkFlareBar
+    className={getClassName('bpk-flare-stories__flare-bar')}
+    svgClassName={getClassName('bpk-flare-stories__flare-bar--svg')}
+  />
+);
+
+const FlareBarRoundedExample = () => (
+  <BpkFlareBar
+    className={getClassName('bpk-flare-stories__flare-bar')}
+    rounded
+    svgClassName={getClassName('bpk-flare-stories__flare-bar--svg')}
+  />
+);
+
+const ContentBubbleFullWithImageExample = () => (
+  <BpkContentBubble
+    className={getClassName(
+      'bpk-flare-stories__content-bubble',
+      'bpk-flare-stories__content-bubble--image',
+      'bpk-flare-stories__content-bubble--full-width',
+      'bpk-flare-stories__content-bubble--fixed-height--large',
+    )}
+    rounded={false}
+  />
+);
+
+const ContentBubbleFullWithContentExample = () => (
+  <BpkContentBubble
+    className={getClassName(
+      'bpk-flare-stories__content-bubble',
+      'bpk-flare-stories__content-bubble--full-width',
+    )}
+    rounded={false}
+    content={content}
+  />
+);
+
+const ContentBubbleStandaloneExample = () => (
+  <BpkContentBubble
+    className={getClassName('bpk-flare-stories__content-bubble')}
+    showPointer
+    rounded={false}
+    content={content}
+  />
+);
+
+const ContentBubbleFixedHeightExample = () => (
+  <BpkContentBubble
+    className={getClassName(
+      'bpk-flare-stories__content-bubble',
+      'bpk-flare-stories__content-bubble--fixed-height',
+    )}
+    rounded={false}
+    content={contentShort}
+  />
+);
+
+const ContentBubblePointerHiddenExample = () => (
+  <BpkContentBubble
+    className={getClassName(
+      'bpk-flare-stories__content-bubble',
+      'bpk-flare-stories__content-bubble--image',
+      'bpk-flare-stories__content-bubble--full-width',
+      'bpk-flare-stories__content-bubble--fixed-height',
+    )}
+    style={{ height: '45rem' }}
+    rounded={false}
+    showPointer={false}
+  />
+);
+
+const MixedExample = () => (
+  <div>
+    <ContentBubbleStandaloneExample />
+    <ContentBubbleFixedHeightExample />
+    <ContentBubbleFullWithContentExample />
+  </div>
+);
+
+export {
+  FlareBarExample,
+  FlareBarRoundedExample,
+  ContentBubbleFullWithImageExample,
+  ContentBubbleFullWithContentExample,
+  ContentBubbleStandaloneExample,
+  ContentBubbleFixedHeightExample,
+  ContentBubblePointerHiddenExample,
+  MixedExample,
+};

package/bpk-component-flare/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-flare-stories{padding:2rem}.bpk-flare-stories__flare-bar{width:100%;margin-bottom:2rem}.bpk-flare-stories__flare-bar--svg{fill:#111236}.bpk-flare-stories__content-bubble{width:100%;max-width:45rem;margin-bottom:2rem;background-color:#5a489b;color:#fff}.bpk-flare-stories__content-bubble--image{background-image:url("https://images.unsplash.com/photo-1556873992-0b43b3ac5ec1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=5730&q=80 5730w")}.bpk-flare-stories__content-bubble--full-width{width:100vw;max-width:none;margin-left:calc(-50vw + 50%)}.bpk-flare-stories__content-bubble--fixed-height{height:12.5rem}.bpk-flare-stories__content-bubble--fixed-height--large{height:45rem}.bpk-flare-stories__content{max-width:45rem;margin:2rem;color:#fff}

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

@@ -0,0 +1,66 @@
+/*
+ * 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-flare-stories {
+  padding: bpk-spacing-xl();
+
+  &__flare-bar {
+    width: 100%;
+    margin-bottom: 2rem;
+
+    &--svg {
+      fill: $bpk-color-sky-gray;
+    }
+  }
+
+  &__content-bubble {
+    width: 100%;
+    max-width: 45rem;
+    margin-bottom: 2rem;
+    background-color: $bpk-color-abisko;
+    color: $bpk-color-white;
+
+    &--image {
+      background-image: url('https://images.unsplash.com/photo-1556873992-0b43b3ac5ec1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=5730&q=80 5730w');
+    }
+
+    &--full-width {
+      width: 100vw;
+      max-width: none;
+      margin-left: calc(-50vw + 50%);
+    }
+
+    &--fixed-height {
+      height: bpk-spacing-xxl() * 5;
+
+      &--large {
+        height: 45rem;
+      }
+    }
+  }
+
+  &__content {
+    max-width: 45rem;
+    margin: bpk-spacing-xl();
+    color: $bpk-color-white;
+  }
+}

package/bpk-component-flare/index.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 */
+
+import BpkFlareBar from './src/BpkFlareBar';
+import BpkContentBubble from './src/BpkContentBubble';
+
+export default BpkFlareBar;
+export { BpkFlareBar, BpkContentBubble };

package/bpk-component-flare/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "bpk-component-flare",
+  "version": "2.1.0",
+  "description": "Backpack FlareBar and ContentBubble component.",
+  "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/"
+  },
+  "scripts": {
+    "build": "gulp"
+  },
+  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
+  "dependencies": {
+    "bpk-component-label": "^5.1.0",
+    "bpk-component-text": "^6.1.0",
+    "bpk-mixins": "^26.1.0",
+    "bpk-react-utils": "^4.1.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}