@skyscanner/backpack-web 25.3.0 → 25.4.0-alpha

package/bpk-component-autosuggest/src/BpkAutosuggest.js

@@ -1,15 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactAutosuggest = _interopRequireDefault(require("react-autosuggest"));
-var _bpkComponentInput = _interopRequireDefault(require("../../bpk-component-input"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkAutosuggestModule = _interopRequireDefault(require("./BpkAutosuggest.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoComplete", "inputRef", "ref"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -27,15 +15,17 @@ const _excluded = ["autoComplete", "inputRef", "ref"];
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkAutosuggestModule.default);
+
+/* @flow strict */
+
+import Autosuggest from 'react-autosuggest';
+
+import BpkInput from '../../bpk-component-input';
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkAutosuggest.module.scss';
+
+const getClassName = cssModules(STYLES);
 
 /*
   `react-autosuggest` is not wrapped in a functional component because the `ref` attribute won't work on it.
@@ -45,37 +35,44 @@ const getClassName = (0, _bpkReactUtils.cssModules)(_BpkAutosuggestModule.defaul
   Further reading about Refs: https://facebook.github.io/react/docs/refs-and-the-dom.html
  */
 
-_reactAutosuggest.default.defaultProps.theme = {
+Autosuggest.defaultProps.theme = {
   container: getClassName('bpk-autosuggest__container'),
   containerOpen: getClassName('bpk-autosuggest__container--open'),
   suggestionsContainer: getClassName('bpk-autosuggest__suggestions-container'),
-  suggestionsContainerOpen: getClassName('bpk-autosuggest__suggestions-container--open'),
+  suggestionsContainerOpen: getClassName(
+    'bpk-autosuggest__suggestions-container--open',
+  ),
   suggestionsList: getClassName('bpk-autosuggest__suggestions-list'),
   suggestion: getClassName('bpk-autosuggest__suggestion-item'),
-  suggestionHighlighted: getClassName('bpk-autosuggest__suggestion-item--highlighted'),
+  suggestionHighlighted: getClassName(
+    'bpk-autosuggest__suggestion-item--highlighted',
+  ),
   sectionContainer: getClassName('bpk-autosuggest__section-container'),
-  sectionTitle: getClassName('bpk-autosuggest__section-title')
+  sectionTitle: getClassName('bpk-autosuggest__section-title'),
 };
-_reactAutosuggest.default.defaultProps.renderInputComponent = inputProps => {
-  const {
-      autoComplete = 'off',
-      inputRef,
-      ref
-    } = inputProps,
-    rest = _objectWithoutProperties(inputProps, _excluded);
+
+type Props = {
+  ref: (?HTMLInputElement) => mixed,
+  inputRef: (?HTMLInputElement) => mixed,
+  autoComplete: string,
+};
+Autosuggest.defaultProps.renderInputComponent = (inputProps: Props) => {
+  const { autoComplete = 'off', inputRef, ref, ...rest } = inputProps;
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    (0, _jsxRuntime.jsx)(_bpkComponentInput.default, _objectSpread({
-      inputRef: element => {
+    <BpkInput
+      inputRef={(element) => {
         ref(element);
+
         if (typeof inputRef === 'function') {
           inputRef(element);
         }
-      },
-      autoComplete: autoComplete
-    }, rest))
+      }}
+      autoComplete={autoComplete}
+      {...rest}
+    />
   );
 };
-var _default = _reactAutosuggest.default;
-exports.default = _default;
+
+export default Autosuggest;

package/bpk-component-autosuggest/src/BpkAutosuggest.module.scss

@@ -0,0 +1,156 @@
+/*
+ * 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.scss';
+
+$bpk-spacing-v2: true;
+$arrow-size: bpk-spacing-sm() * 3;
+
+.bpk-autosuggest {
+  &__container--open {
+    position: relative;
+  }
+
+  &__suggestions-container {
+    display: none;
+
+    &--open {
+      position: absolute;
+      top: 100%;
+      display: block;
+      z-index: $bpk-zindex-autosuggest;
+      width: 100%;
+      margin-top: bpk-spacing-md() + bpk-spacing-sm();
+
+      &::before {
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        content: ' ';
+        display: block;
+        margin-bottom: -$bpk-one-pixel-rem;
+        margin-left: -((bpk-spacing-sm() * 3) + $bpk-one-pixel-rem);
+        border: ($arrow-size + $bpk-one-pixel-rem) solid transparent;
+        border-bottom-color: $bpk-surface-highlight-day;
+        pointer-events: none;
+      }
+
+      &::after {
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        content: ' ';
+        display: block;
+        margin-bottom: -$bpk-one-pixel-rem;
+        margin-left: -(bpk-spacing-md() + bpk-spacing-sm());
+        border: $arrow-size solid transparent;
+        border-bottom-color: $bpk-surface-default-day;
+        pointer-events: none;
+      }
+    }
+  }
+
+  &__suggestions-list {
+    min-width: fit-content;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow: hidden;
+
+    @include bpk-layer;
+  }
+
+  &__suggestion-item {
+    cursor: pointer;
+
+    @include bpk-text;
+    @include bpk-body-default;
+
+    &:not(:last-child) {
+      @include bpk-border-bottom-sm($bpk-line-day);
+    }
+
+    &:active {
+      background-color: $bpk-canvas-contrast-day;
+    }
+
+    &--highlighted {
+      background-color: $bpk-canvas-contrast-day;
+    }
+  }
+
+  &__suggestion {
+    display: table;
+    width: 100%;
+    padding: bpk-spacing-base();
+
+    &--indent {
+      padding-left: bpk-spacing-xl();
+    }
+
+    &-icon {
+      display: table-cell;
+      margin-right: bpk-spacing-md();
+      vertical-align: top;
+      fill: $bpk-text-secondary-day;
+
+      @include bpk-rtl {
+        margin-right: 0;
+        margin-left: bpk-spacing-md();
+      }
+    }
+
+    &-content {
+      display: table-cell;
+      width: 100%;
+      vertical-align: top;
+    }
+
+    &-inner {
+      display: flex;
+      flex-direction: row;
+      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+
+    &-value {
+      display: block;
+    }
+
+    &-sub-heading {
+      display: table-cell;
+      width: 100%;
+      vertical-align: top;
+
+      @include bpk-text;
+      @include bpk-caption;
+    }
+
+    &-tertiary-label {
+      display: table-cell;
+      align-self: center;
+      color: $bpk-text-secondary-day;
+      vertical-align: top;
+      word-break: keep-all;
+
+      @include bpk-text;
+      @include bpk-caption;
+    }
+  }
+}

package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.js

@@ -1,14 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkAutosuggestModule = _interopRequireDefault(require("./BpkAutosuggest.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "icon", "indent", "subHeading", "tertiaryLabel", "value"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -26,76 +15,93 @@ const _excluded = ["className", "icon", "indent", "subHeading", "tertiaryLabel",
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkAutosuggestModule.default);
-const BpkSuggestion = props => {
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import type { Node } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkAutosuggest.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  value: Node,
+  indent: boolean,
+  className: ?string,
+  icon: Function,
+  subHeading: ?Node,
+  tertiaryLabel: ?string,
+};
+
+const BpkSuggestion = (props: Props) => {
   const classNames = [getClassName('bpk-autosuggest__suggestion')];
-  const {
-      className,
-      icon,
-      indent,
-      subHeading,
-      tertiaryLabel,
-      value
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+  const { className, icon, indent, subHeading, tertiaryLabel, value, ...rest } =
+    props;
   const Icon = icon;
+
   if (indent) {
     classNames.push(getClassName('bpk-autosuggest__suggestion--indent'));
   }
   if (className) {
     classNames.push(className);
   }
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    (0, _jsxRuntime.jsxs)("section", _objectSpread(_objectSpread({
-      className: classNames.join(' ')
-    }, rest), {}, {
-      children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-        className: getClassName('bpk-autosuggest__suggestion-icon')
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: getClassName('bpk-autosuggest__suggestion-content'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: getClassName('bpk-autosuggest__suggestion-inner'),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: getClassName('bpk-autosuggest__suggestion-value'),
-              children: value
-            }), subHeading || tertiaryLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
-              className: getClassName('bpk-autosuggest__suggestion-sub-heading'),
-              children: subHeading
-            }) : null]
-          }), tertiaryLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
-            className: getClassName('bpk-autosuggest__suggestion-tertiary-label'),
-            children: tertiaryLabel
-          }) : null]
-        })
-      })]
-    }))
+    <section className={classNames.join(' ')} {...rest}>
+      {icon ? (
+        <Icon className={getClassName('bpk-autosuggest__suggestion-icon')} />
+      ) : null}
+      <div className={getClassName('bpk-autosuggest__suggestion-content')}>
+        <div className={getClassName('bpk-autosuggest__suggestion-inner')}>
+          <div>
+            <span className={getClassName('bpk-autosuggest__suggestion-value')}>
+              {value}
+            </span>
+            {subHeading || tertiaryLabel ? (
+              <small
+                className={getClassName(
+                  'bpk-autosuggest__suggestion-sub-heading',
+                )}
+              >
+                {subHeading}
+              </small>
+            ) : null}
+          </div>
+
+          {tertiaryLabel ? (
+            <aside
+              className={getClassName(
+                'bpk-autosuggest__suggestion-tertiary-label',
+              )}
+            >
+              {tertiaryLabel}
+            </aside>
+          ) : null}
+        </div>
+      </div>
+    </section>
   );
 };
+
 BpkSuggestion.propTypes = {
-  value: _propTypes.default.node.isRequired,
-  subHeading: _propTypes.default.node,
-  tertiaryLabel: _propTypes.default.string,
-  icon: _propTypes.default.func,
-  indent: _propTypes.default.bool,
-  className: _propTypes.default.string
+  value: PropTypes.node.isRequired,
+  subHeading: PropTypes.node,
+  tertiaryLabel: PropTypes.string,
+  icon: PropTypes.func,
+  indent: PropTypes.bool,
+  className: PropTypes.string,
 };
+
 BpkSuggestion.defaultProps = {
   subHeading: null,
   tertiaryLabel: null,
   icon: null,
   indent: false,
-  className: null
+  className: null,
 };
-var _default = BpkSuggestion;
-exports.default = _default;
+
+export default BpkSuggestion;

package/bpk-component-badge/README.md

@@ -0,0 +1,36 @@
+# bpk-component-badge
+
+> Backpack badge component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```tsx
+import BpkBadge, { BADGE_TYPES } from '@skyscanner/backpack-web/bpk-component-badge';
+
+export default () => (
+  <BpkBadge
+    type={BADGE_TYPES.warning}
+  >
+    My Badge
+  </BpkBadge>
+);
+```
+
+## Props
+
+| Property  | PropType                                                                                                                                                 | Required | Default Value       |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------| -------- | ------------------- |
+| centered  | bool                                                                                                                                                     | false    | null                |
+| className | string                                                                                                                                                   | false    | null                |
+| docked    | oneOf('left', 'right')                                                                                                                                   | false    | null                |
+| type      | oneOf(BADGE_TYPES.normal, BADGE_TYPES.warning, BADGE_TYPES.success, BADGE_TYPES.critical, BADGE_TYPES.light, BADGE_TYPES.inverse, BADGE_TYPES.outline, BADGE_TYPES.strong, BADGE_TYPES.brand)| false    | BADGE_TYPES.normal |
+
+## Theme props
+
+* `badgeBackgroundColor`
+* `badgeSuccessBackgroundColor`
+* `badgeDestructiveBackgroundColor`

package/bpk-component-badge/{src/themeAttributes.js → index.ts}

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -21,5 +15,10 @@ exports.default = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = ['badgeBackgroundColor', 'badgeSuccessBackgroundColor', 'badgeDestructiveBackgroundColor'];
-exports.default = _default;
+
+import component, { BADGE_TYPES, type Props } from './src/BpkBadge';
+import themeAttributes from './src/themeAttributes';
+
+export type BpkBadgeProps = Props;
+export default component;
+export { BADGE_TYPES, themeAttributes };

package/bpk-component-badge/src/BpkBadge-test.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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 { render } from '@testing-library/react';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkSmallFlightIcon from '../../bpk-component-icon/sm/flight';
+
+import BpkBadge, { BADGE_TYPES } from './BpkBadge';
+import type { BadgeType } from './BpkBadge';
+
+describe('BpkBadge', () => {
+  it('should render correctly', () => {
+    const { asFragment } = render(<BpkBadge>Promociando</BpkBadge>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly with a "centered"', () => {
+    const { asFragment } = render(<BpkBadge centered>Promociando</BpkBadge>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly with an icon', () => {
+    const { asFragment } = render(
+      <BpkBadge>
+        <BpkSmallFlightIcon />
+        Promociando
+      </BpkBadge>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly with a "docked" attribute value equal to "right"', () => {
+    const { asFragment } = render(
+      <BpkBadge docked="right">Promociando</BpkBadge>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly with a "docked" attribute value equal to "left"', () => {
+    const { asFragment } = render(
+      <BpkBadge docked="left">Promociando</BpkBadge>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  Object.keys(BADGE_TYPES).forEach((badgeType) => {
+    it(`should render correctly with type="${badgeType}"`, () => {
+      const { asFragment } = render(
+        <BpkBadge type={badgeType as BadgeType}>Promociando</BpkBadge>,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+});

package/bpk-component-badge/src/BpkBadge.module.scss

@@ -0,0 +1,67 @@
+/*
+ * 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.scss';
+
+.bpk-badge {
+  @include bpk-badge;
+
+  &--centered {
+    @include bpk-badge--centered;
+  }
+
+  &--docked-right {
+    @include bpk-badge--docked-right;
+  }
+
+  &--docked-left {
+    @include bpk-badge--docked-left;
+  }
+
+  &--warning {
+    @include bpk-badge--warning;
+  }
+
+  &--success {
+    @include bpk-badge--success;
+  }
+
+  &--critical {
+    @include bpk-badge--critical;
+  }
+
+  &--normal {
+    @include bpk-badge--normal;
+  }
+
+  &--inverse {
+    @include bpk-badge--inverse;
+  }
+
+  &--outline {
+    @include bpk-badge--outline;
+  }
+
+  &--strong {
+    @include bpk-badge--strong;
+  }
+
+  &--brand {
+    @include bpk-badge--brand;
+  }
+}