@skyscanner/backpack-web 0.0.6 → 0.3.0

package/bpk-component-button/BpkButtonSecondaryOnDark.js

@@ -0,0 +1,21 @@
+/*
+ * 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 */
+
+export { default } from './src/BpkButtonSecondaryOnDark';

package/bpk-component-button/README.md

@@ -23,8 +23,12 @@ export default () => (
     <BpkButton>Primary</BpkButton>
     <BpkButton large>Large primary</BpkButton>
     <BpkButton secondary>Secondary</BpkButton>
+    <BpkButton secondaryOnDark>SecondaryOnDark</BpkButton>
     <BpkButton link>Link</BpkButton>
-    <BpkButton outline>Outline</BpkButton>
+    <BpkButton linkOnDark>LinkOnDark</BpkButton>
+    <BpkButton outline>Outline (Deprecated, use PrimaryOnDark or PrimaryOnLight instead)</BpkButton>
+    <BpkButton primaryOnDark>PrimaryOnDark</BpkButton>
+    <BpkButton primaryOnLight>PrimaryOnLight</BpkButton>
     <BpkButton iconOnly>
       <AlignedArrowIcon />
       <span className="visually-hidden">Search</span>
@@ -35,26 +39,27 @@ export default () => (
 
 ## Props
 
-| Property    | PropType | Required | Default Value |
-| ----------- | -------- | -------- | ------------- |
-| children    | -        | true     | -             |
-| destructive | bool     | false    | false         |
-| featured    | bool     | false    | false         |
-| link        | bool     | false    | false         |
-| outline     | bool     | false    | false         |
-| secondary   | bool     | false    | false         |
-| blank       | bool     | false    | false         |
-| className   | string   | false    | null          |
-| disabled    | bool     | false    | false         |
-| href        | string   | false    | null          |
-| iconOnly    | bool     | false    | false         |
-| large       | bool     | false    | false         |
-| onClick     | func     | false    | null          |
-| padded      | bool     | false    | false         |
-| rel         | string   | false    | null          |
-| submit      | bool     | false    | false         |
-
-> Note: The `padded` boolean only applies to link-style buttons
+| Property        | PropType             | Required | Default Value |
+| --------------- | -------------------- | -------- | ------------- |
+| children        | -                    | true     | -             |
+| destructive     | bool                 | false    | false         |
+| featured        | bool                 | false    | false         |
+| link            | bool                 | false    | false         |
+| linkOnDark      | bool                 | false    | false         |
+| outline         | bool (deprecated)    | false    | false         |
+| secondary       | bool                 | false    | false         |
+| secondaryOnDark | bool                 | false    | false         |
+| primaryOnDark   | bool                 | false    | false         |
+| primaryOnLight  | bool                 | false    | false         |
+| blank           | bool                 | false    | false         |
+| className       | string               | false    | null          |
+| disabled        | bool                 | false    | false         |
+| href            | string               | false    | null          |
+| iconOnly        | bool                 | false    | false         |
+| large           | bool                 | false    | false         |
+| onClick         | func                 | false    | null          |
+| rel             | string               | false    | null          |
+| submit          | bool                 | false    | false         |
 
 ## Theme Props
 
@@ -69,6 +74,24 @@ export default () => (
 * `buttonPrimaryHoverBackgroundColor`
 * `buttonPrimaryActiveBackgroundColor`
 
+### Primary on dark:
+
+* `buttonPrimaryOnDarkTextColor`
+* `buttonPrimaryOnDarkHoverTextColor`
+* `buttonPrimaryOnDarkActiveTextColor`
+* `buttonPrimaryOnDarkBackgroundColor`
+* `buttonPrimaryOnDarkHoverBackgroundColor`
+* `buttonPrimaryOnDarkActiveBackgroundColor`
+
+### Primary on light:
+
+* `buttonPrimaryOnLightTextColor`
+* `buttonPrimaryOnLightHoverTextColor`
+* `buttonPrimaryOnLightActiveTextColor`
+* `buttonPrimaryOnLightBackgroundColor`
+* `buttonPrimaryOnLightHoverBackgroundColor`
+* `buttonPrimaryOnLightActiveBackgroundColor`
+
 ### Secondary:
 
 * `buttonSecondaryTextColor`
@@ -81,6 +104,15 @@ export default () => (
 * `buttonSecondaryHoverBackgroundColor`
 * `buttonSecondaryActiveBackgroundColor`
 
+### Secondary on dark:
+
+* `buttonSecondaryOnDarkTextColor`
+* `buttonSecondaryOnDarkHoverTextColor`
+* `buttonSecondaryOnDarkActiveTextColor`
+* `buttonSecondaryOnDarkBackgroundColor`
+* `buttonSecondaryOnDarkHoverBackgroundColor`
+* `buttonSecondaryOnDarkActiveBackgroundColor`
+
 ### Featured:
 
 * `buttonFeaturedTextColor`

package/bpk-component-button/index.js

@@ -20,16 +20,23 @@
 
 import BpkButton from './src/BpkButton'; // eslint-disable-line import/no-cycle
 import BpkButtonPrimary from './src/BpkButtonPrimary';
+import BpkButtonPrimaryOnDark from './src/BpkButtonPrimaryOnDark';
+import BpkButtonPrimaryOnLight from './src/BpkButtonPrimaryOnLight';
 import BpkButtonSecondary from './src/BpkButtonSecondary';
+import BpkButtonSecondaryOnDark from './src/BpkButtonSecondaryOnDark';
 import BpkButtonDestructive from './src/BpkButtonDestructive';
 import BpkButtonLink from './src/BpkButtonLink';
+import BpkButtonLinkOnDark from './src/BpkButtonLinkOnDark';
 import BpkButtonFeatured from './src/BpkButtonFeatured';
 import BpkButtonOutline from './src/BpkButtonOutline';
 
 export {
   buttonThemeAttributes,
   primaryThemeAttributes,
+  primaryOnDarkThemeAttributes,
+  primaryOnLightThemeAttributes,
   secondaryThemeAttributes,
+  secondaryOnDarkThemeAttributes,
   featuredThemeAttributes,
   destructiveThemeAttributes,
 } from './themeAttributes';
@@ -38,9 +45,13 @@ export default BpkButton;
 
 export {
   BpkButtonPrimary,
+  BpkButtonPrimaryOnDark,
+  BpkButtonPrimaryOnLight,
   BpkButtonSecondary,
+  BpkButtonSecondaryOnDark,
   BpkButtonDestructive,
   BpkButtonLink,
+  BpkButtonLinkOnDark,
   BpkButtonFeatured,
   BpkButtonOutline,
 };

package/bpk-component-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-button",
-  "version": "5.1.0",
+  "version": "6.2.1",
   "description": "Backpack button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
+    "bpk-mixins": "^29.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.0"
+    "bpk-storybook-utils": "^1.1.5"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-button/src/BpkButton.js

@@ -24,9 +24,13 @@ import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-cycle
 import {
   BpkButtonPrimary,
+  BpkButtonPrimaryOnDark,
+  BpkButtonPrimaryOnLight,
   BpkButtonSecondary,
+  BpkButtonSecondaryOnDark,
   BpkButtonDestructive,
   BpkButtonLink,
+  BpkButtonLinkOnDark,
   BpkButtonFeatured,
   BpkButtonOutline,
 } from '../index';
@@ -39,21 +43,45 @@ import {
 
 type Props = {
   ...CommonProps,
+  primaryOnDark: boolean,
+  primaryOnLight: boolean,
   secondary: boolean,
+  secondaryOnDark: boolean,
   destructive: boolean,
   featured: boolean,
   outline: boolean,
   link: boolean,
-  padded: boolean,
+  linkOnDark: boolean,
 };
 
 const BpkButton = (props: Props) => {
-  const { destructive, featured, link, outline, padded, secondary, ...rest } =
-    props;
+  const {
+    destructive,
+    featured,
+    link,
+    linkOnDark,
+    outline,
+    primaryOnDark,
+    primaryOnLight,
+    secondary,
+    secondaryOnDark,
+    ...rest
+  } = props;
+
+  if (primaryOnDark) {
+    return <BpkButtonPrimaryOnDark {...rest} />;
+  }
+
+  if (primaryOnLight) {
+    return <BpkButtonPrimaryOnLight {...rest} />;
+  }
 
   if (secondary) {
     return <BpkButtonSecondary {...rest} />;
   }
+  if (secondaryOnDark) {
+    return <BpkButtonSecondaryOnDark {...rest} />;
+  }
   if (destructive) {
     return <BpkButtonDestructive {...rest} />;
   }
@@ -64,30 +92,38 @@ const BpkButton = (props: Props) => {
     return <BpkButtonOutline {...rest} />;
   }
   if (link) {
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    return <BpkButtonLink padded={padded} {...rest} />;
+    return <BpkButtonLink {...rest} />;
+  }
+  if (linkOnDark) {
+    return <BpkButtonLinkOnDark {...rest} />;
   }
   return <BpkButtonPrimary {...rest} />;
 };
 
 BpkButton.propTypes = {
   ...propTypes,
+  primaryOnDark: PropTypes.bool,
+  primaryOnLight: PropTypes.bool,
   secondary: PropTypes.bool,
+  secondaryOnDark: PropTypes.bool,
   destructive: PropTypes.bool,
   featured: PropTypes.bool,
   outline: PropTypes.bool,
-  padded: PropTypes.bool,
   link: PropTypes.bool,
+  linkOnDark: PropTypes.bool,
 };
 
 BpkButton.defaultProps = {
   ...defaultProps,
+  primaryOnDark: false,
+  primaryOnLight: false,
   secondary: false,
+  secondaryOnDark: false,
   destructive: false,
   featured: false,
   outline: false,
-  padded: false,
   link: false,
+  linkOnDark: false,
 };
 
 export default BpkButton;

package/bpk-component-button/src/BpkButtonLink.js

@@ -19,7 +19,6 @@
 /* @flow strict */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import {
   type Props as CommonProps,
@@ -33,15 +32,14 @@ const getClassName = cssModules(STYLES);
 
 type Props = {
   ...CommonProps,
-  padded: boolean,
 };
 const BpkButtonLink = (props: Props) => {
-  const { className, padded, ...rest } = props;
+  const { className, large, ...rest } = props;
 
   const classNames = [getClassName('bpk-button--link')];
 
-  if (padded) {
-    classNames.push(getClassName('bpk-button--padded'));
+  if (large) {
+    classNames.push(getClassName('bpk-button--link-large'));
   }
 
   if (className) {
@@ -51,11 +49,11 @@ const BpkButtonLink = (props: Props) => {
 
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <BpkButtonBase className={classNamesFinal} {...rest} />
+    <BpkButtonBase className={classNamesFinal} large={large} {...rest} />
   );
 };
 
-BpkButtonLink.propTypes = { ...propTypes, padded: PropTypes.bool };
-BpkButtonLink.defaultProps = { ...defaultProps, padded: false };
+BpkButtonLink.propTypes = { ...propTypes };
+BpkButtonLink.defaultProps = { ...defaultProps };
 
 export default BpkButtonLink;

package/bpk-component-button/src/BpkButtonLink.module.scss

@@ -22,8 +22,4 @@
   &--link {
     @include bpk-button--link;
   }
-
-  &--padded {
-    @include bpk-button--padded;
-  }
 }

package/bpk-component-button/src/BpkButtonLinkOnDark.js

@@ -0,0 +1,59 @@
+/*
+ * 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 {
+  type Props as CommonProps,
+  defaultProps,
+  propTypes,
+} from './common-types';
+import BpkButtonBase, { cssModules } from './BpkButtonBase';
+import STYLES from './BpkButtonLinkOnDark.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  ...CommonProps,
+};
+const BpkButtonLinkOnDark = (props: Props) => {
+  const { className, large, ...rest } = props;
+
+  const classNames = [getClassName('bpk-button--link-on-dark')];
+
+  if (large) {
+    classNames.push(getClassName('bpk-button--link-on-dark-large'));
+  }
+
+  if (className) {
+    classNames.push(className);
+  }
+  const classNamesFinal = classNames.join(' ');
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <BpkButtonBase className={classNamesFinal} large={large} {...rest} />
+  );
+};
+
+BpkButtonLinkOnDark.propTypes = { ...propTypes };
+BpkButtonLinkOnDark.defaultProps = { ...defaultProps };
+
+export default BpkButtonLinkOnDark;

package/bpk-component-button/{BpkButtonStory.module.scss → src/BpkButtonLinkOnDark.module.scss}

@@ -18,6 +18,6 @@
 
 @import '~bpk-mixins/index';
 
-.bpk-button-story-wrapper {
-  padding: $bpk-spacing-xs 0;
+.bpk-button--link-on-dark {
+  @include bpk-button--link-on-dark;
 }

package/bpk-component-button/src/BpkButtonPrimaryOnDark.js

@@ -0,0 +1,48 @@
+/*
+ * 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 { type Props, defaultProps, propTypes } from './common-types';
+import BpkButtonBase, { cssModules } from './BpkButtonBase';
+import STYLES from './BpkButtonPrimaryOnDark.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkButtonPrimaryOnDark = (props: Props) => {
+  const { className, ...rest } = props;
+
+  const classNames = [getClassName('bpk-button--primary-on-dark')];
+
+  if (className) {
+    classNames.push(className);
+  }
+  const classNamesFinal = classNames.join(' ');
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <BpkButtonBase className={classNamesFinal} {...rest} />
+  );
+};
+
+BpkButtonPrimaryOnDark.propTypes = { ...propTypes };
+BpkButtonPrimaryOnDark.defaultProps = { ...defaultProps };
+
+export default BpkButtonPrimaryOnDark;

package/{bpk-component-nudger/BpkNudgerStory.module.scss → bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss}

@@ -18,10 +18,6 @@
 
 @import '~bpk-mixins/index';
 
-.bpk-nudger-outline {
-  color: $bpk-color-white;
-}
-
-.bpk-nudger-configurable {
-  width: 7rem;
+.bpk-button--primary-on-dark {
+  @include bpk-button--primary-on-dark;
 }

package/bpk-component-button/src/BpkButtonPrimaryOnLight.js

@@ -0,0 +1,48 @@
+/*
+ * 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 { type Props, defaultProps, propTypes } from './common-types';
+import BpkButtonBase, { cssModules } from './BpkButtonBase';
+import STYLES from './BpkButtonPrimaryOnLight.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkButtonPrimaryOnLight = (props: Props) => {
+  const { className, ...rest } = props;
+
+  const classNames = [getClassName('bpk-button--primary-on-light')];
+
+  if (className) {
+    classNames.push(className);
+  }
+  const classNamesFinal = classNames.join(' ');
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <BpkButtonBase className={classNamesFinal} {...rest} />
+  );
+};
+
+BpkButtonPrimaryOnLight.propTypes = { ...propTypes };
+BpkButtonPrimaryOnLight.defaultProps = { ...defaultProps };
+
+export default BpkButtonPrimaryOnLight;

package/{bpk-component-banner-alert/examples.module.scss → bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss}

@@ -18,10 +18,6 @@
 
 @import '~bpk-mixins/index';
 
-$bpk-spacing-v2: true;
-
-.bpk-banner-alert-examples {
-  &__component {
-    margin-top: bpk-spacing-base();
-  }
+.bpk-button--primary-on-light {
+  @include bpk-button--primary-on-light;
 }

package/bpk-component-button/src/BpkButtonSecondaryOnDark.js

@@ -0,0 +1,48 @@
+/*
+ * 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 { type Props, defaultProps, propTypes } from './common-types';
+import BpkButtonBase, { cssModules } from './BpkButtonBase';
+import STYLES from './BpkButtonSecondaryOnDark.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkButtonSecondaryOnDark = (props: Props) => {
+  const { className, ...rest } = props;
+
+  const classNames = [getClassName('bpk-button--secondary-on-dark')];
+
+  if (className) {
+    classNames.push(className);
+  }
+  const classNamesFinal = classNames.join(' ');
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <BpkButtonBase className={classNamesFinal} {...rest} />
+  );
+};
+
+BpkButtonSecondaryOnDark.propTypes = { ...propTypes };
+BpkButtonSecondaryOnDark.defaultProps = { ...defaultProps };
+
+export default BpkButtonSecondaryOnDark;

package/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss

@@ -0,0 +1,23 @@
+/*
+ * 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-button--secondary-on-dark {
+  @include bpk-button--secondary-on-dark;
+}

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

@@ -29,6 +29,24 @@ export const primaryThemeAttributes = [
   'buttonPrimaryActiveBackgroundColor',
 ];
 
+export const primaryOnDarkThemeAttributes = [
+  'buttonPrimaryOnDarkTextColor',
+  'buttonPrimaryOnDarkHoverTextColor',
+  'buttonPrimaryOnDarkActiveTextColor',
+  'buttonPrimaryOnDarkBackgroundColor',
+  'buttonPrimaryOnDarkHoverBackgroundColor',
+  'buttonPrimaryOnDarkActiveBackgroundColor',
+];
+
+export const primaryOnLightThemeAttributes = [
+  'buttonPrimaryOnLightTextColor',
+  'buttonPrimaryOnLightHoverTextColor',
+  'buttonPrimaryOnLightActiveTextColor',
+  'buttonPrimaryOnLightBackgroundColor',
+  'buttonPrimaryOnLightHoverBackgroundColor',
+  'buttonPrimaryOnLightActiveBackgroundColor',
+];
+
 export const secondaryThemeAttributes = [
   'buttonSecondaryTextColor',
   'buttonSecondaryHoverTextColor',
@@ -41,6 +59,15 @@ export const secondaryThemeAttributes = [
   'buttonSecondaryActiveBackgroundColor',
 ];
 
+export const secondaryOnDarkThemeAttributes = [
+  'buttonSecondaryOnDarkTextColor',
+  'buttonSecondaryOnDarkHoverTextColor',
+  'buttonSecondaryOnDarkActiveTextColor',
+  'buttonSecondaryOnDarkBackgroundColor',
+  'buttonSecondaryOnDarkHoverBackgroundColor',
+  'buttonSecondaryOnDarkActiveBackgroundColor',
+];
+
 export const featuredThemeAttributes = [
   'buttonFeaturedTextColor',
   'buttonFeaturedHoverTextColor',

package/bpk-component-button/themeAttributes.js

@@ -21,7 +21,10 @@
 export {
   buttonThemeAttributes,
   primaryThemeAttributes,
+  primaryOnDarkThemeAttributes,
+  primaryOnLightThemeAttributes,
   secondaryThemeAttributes,
+  secondaryOnDarkThemeAttributes,
   featuredThemeAttributes,
   destructiveThemeAttributes,
 } from './src/themeAttributes';