[DTO-4858] Create BpkBadgeV2 (#3047)

* Create BpkBadgeV2 * Add README, reduce duplication * Fix storybook imports * Rename docked stories * Refactor badge-v2 css, generate snapshots * Upgrade web-foundations, use new private colour variables * Use correct registry * Add declaration files --------- Co-authored-by: Iain Cattermole <[email protected]>
Skyscanner · Oct 26, 2023 · 6b4c82f · 6b4c82f
1 parent 3a8fb8a
commit 6b4c82f
Show file tree

Hide file tree

Showing 18 changed files with 1,116 additions and 12 deletions.
diff --git a/examples/bpk-component-badge-v2/BadgeLayout.js b/examples/bpk-component-badge-v2/BadgeLayout.js
@@ -0,0 +1,54 @@
+/*
+ * 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 type { Node } from 'react';
+
+import { cssModules } from '../../packages/bpk-react-utils';
+
+import STYLES from './BpkBadgeLayout.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export type Props = {
+  docked: ?string,
+  children: Node,
+};
+
+const BadgeLayout = (props: Props) => {
+  const { children, docked } = props;
+  const classNames = getClassName(
+    'bpk-badge-layout__container',
+    docked && 'bpk-badge-layout__container--light',
+  );
+
+  return <div className={classNames}>{children}</div>;
+};
+
+BadgeLayout.propTypes = {
+  docked: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+BadgeLayout.defaultProps = {
+  docked: null,
+};
+
+export default BadgeLayout;
diff --git a/examples/bpk-component-badge-v2/BpkBadgeLayout.module.css b/examples/bpk-component-badge-v2/BpkBadgeLayout.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-badge-layout__container{position:relative;display:flex;min-height:2.5rem;padding:1.5rem}.bpk-badge-layout__container--light{background-color:#eff1f2;border-radius:.25rem}
diff --git a/examples/bpk-component-badge-v2/BpkBadgeLayout.module.scss b/examples/bpk-component-badge-v2/BpkBadgeLayout.module.scss
@@ -0,0 +1,34 @@
+/*
+ * 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 '../../packages/bpk-mixins/index.scss';
+
+.bpk-badge-layout {
+  &__container {
+    position: relative;
+    display: flex;
+    min-height: bpk-spacing-xxl();
+    padding: bpk-spacing-lg();
+
+    &--light {
+      background-color: $bpk-canvas-contrast-day;
+
+      @include bpk-border-radius-xs;
+    }
+  }
+}
diff --git a/examples/bpk-component-badge-v2/examples.js b/examples/bpk-component-badge-v2/examples.js
@@ -0,0 +1,160 @@
+/*
+ * 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 BpkSmallTickIcon from '../../packages/bpk-component-icon/sm/tick-circle';
+import BpkSmallExclamationIcon from '../../packages/bpk-component-icon/sm/exclamation';
+import BpkSmallInfoCircleIcon from '../../packages/bpk-component-icon/sm/information-circle';
+import { BpkDarkExampleWrapper } from '../bpk-storybook-utils';
+import { BpkBadgeV2, BADGE_TYPES } from '../../packages/bpk-component-badge';
+
+import BadgeLayout from './BadgeLayout';
+
+const DefaultExample = () => (
+  <BadgeLayout>
+    <BpkBadgeV2>Normal</BpkBadgeV2>
+    &nbsp;
+    <BpkBadgeV2>
+      <BpkSmallTickIcon /> &nbsp;Normal
+    </BpkBadgeV2>
+  </BadgeLayout>
+);
+
+const WarningExample = () => (
+  <BadgeLayout>
+    <BpkBadgeV2 type={BADGE_TYPES.warning}>
+      <BpkSmallInfoCircleIcon /> &nbsp;Warning
+    </BpkBadgeV2>
+  </BadgeLayout>
+);
+
+const SuccessExample = () => (
+  <BadgeLayout>
+    <BpkBadgeV2 type={BADGE_TYPES.success}>
+      <BpkSmallTickIcon />
+      &nbsp;Success
+    </BpkBadgeV2>
+  </BadgeLayout>
+);
+
+const CriticalExample = () => (
+  <BadgeLayout>
+    <BpkBadgeV2 type={BADGE_TYPES.critical}>
+      <BpkSmallExclamationIcon />
+      &nbsp;Critical
+    </BpkBadgeV2>
+  </BadgeLayout>
+);
+
+const InverseExample = () => (
+  <BpkDarkExampleWrapper>
+    <BadgeLayout>
+      <BpkBadgeV2 type={BADGE_TYPES.inverse}>Inverse</BpkBadgeV2>
+      &nbsp;
+      <BpkBadgeV2 type={BADGE_TYPES.inverse}>
+        <BpkSmallTickIcon />
+        &nbsp;Inverse
+      </BpkBadgeV2>
+    </BadgeLayout>
+  </BpkDarkExampleWrapper>
+);
+
+const OutlineExample = () => (
+  <BpkDarkExampleWrapper>
+    <BadgeLayout>
+      <BpkBadgeV2 type={BADGE_TYPES.outline}>Outline</BpkBadgeV2>
+      &nbsp;
+      <BpkBadgeV2 type={BADGE_TYPES.outline}>
+        <BpkSmallTickIcon />
+        &nbsp;Outline
+      </BpkBadgeV2>
+    </BadgeLayout>
+  </BpkDarkExampleWrapper>
+);
+
+const StrongExample = () => (
+  <BadgeLayout>
+    <BpkBadgeV2 type={BADGE_TYPES.strong}>Strong</BpkBadgeV2>
+    &nbsp;
+    <BpkBadgeV2 type={BADGE_TYPES.strong}>
+      <BpkSmallTickIcon />
+      &nbsp;Strong
+    </BpkBadgeV2>
+  </BadgeLayout>
+);
+
+const BrandExample = () => (
+  <BadgeLayout>
+    <BpkBadgeV2 type={BADGE_TYPES.brand}>Strong</BpkBadgeV2>
+    &nbsp;
+    <BpkBadgeV2 type={BADGE_TYPES.brand}>
+      <BpkSmallTickIcon />
+      &nbsp;Brand
+    </BpkBadgeV2>
+  </BadgeLayout>
+);
+
+const CenteredExample = () => (
+  <BadgeLayout>
+    <div>
+      The badge is aligned to the centre of this text.{' '}
+      <BpkBadgeV2 centered>Centered</BpkBadgeV2>
+    </div>
+  </BadgeLayout>
+);
+
+const DockedLeadingExample = () => (
+  <BadgeLayout docked="left">
+    <BpkBadgeV2 docked="left">Advert</BpkBadgeV2>
+  </BadgeLayout>
+);
+
+const DockedTrailingExample = () => (
+  <BadgeLayout docked="right">
+    <BpkBadgeV2 docked="right">Advert</BpkBadgeV2>
+  </BadgeLayout>
+);
+
+const MixedExample = () => (
+  <div>
+    <DefaultExample />
+    <WarningExample />
+    <SuccessExample />
+    <CriticalExample />
+    <StrongExample />
+    <BrandExample />
+    <InverseExample />
+    <OutlineExample />
+  </div>
+);
+
+export {
+  DefaultExample,
+  WarningExample,
+  SuccessExample,
+  CriticalExample,
+  InverseExample,
+  OutlineExample,
+  StrongExample,
+  BrandExample,
+  CenteredExample,
+  DockedLeadingExample,
+  DockedTrailingExample,
+  MixedExample,
+};
diff --git a/examples/bpk-component-badge-v2/stories.js b/examples/bpk-component-badge-v2/stories.js
@@ -0,0 +1,56 @@
+/*
+ * 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 BpkBadge from '../../packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge';
+
+import {
+  DefaultExample,
+  WarningExample,
+  SuccessExample,
+  CriticalExample,
+  InverseExample,
+  OutlineExample,
+  StrongExample,
+  BrandExample,
+  CenteredExample,
+  DockedLeadingExample,
+  DockedTrailingExample,
+  MixedExample,
+} from './examples';
+
+export default {
+  title: 'bpk-component-badge-v2',
+  component: BpkBadge
+};
+
+export const Default = DefaultExample;
+export const Warning = WarningExample;
+export const Success = SuccessExample;
+export const Critical = CriticalExample;
+export const Strong = StrongExample;
+export const Brand = BrandExample;
+export const Inverse = InverseExample;
+export const Outline = OutlineExample;
+export const Centered = CenteredExample;
+export const DockedLeft = DockedLeadingExample;
+export const DockedRight = DockedTrailingExample;
+export const VisualTest = MixedExample;
+export const VisualTestWithZoom = VisualTest.bind({});
+VisualTestWithZoom.args = {
+  zoomEnabled: true
+};
diff --git a/packages/bpk-component-badge/index.d.ts b/packages/bpk-component-badge/index.d.ts
@@ -18,7 +18,7 @@
 
 import component, { BADGE_TYPES, type Props } from './src/BpkBadge';
 import themeAttributes from './src/themeAttributes';
-
+import BpkBadgeV2 from './src/BpkBadgeV2/BpkBadge';
 export type BpkBadgeProps = Props;
 export default component;
-export { BADGE_TYPES, themeAttributes };
+export { BADGE_TYPES, themeAttributes, BpkBadgeV2 };
diff --git a/packages/bpk-component-badge/index.ts b/packages/bpk-component-badge/index.ts
@@ -18,7 +18,10 @@
 
 import component, { BADGE_TYPES, type Props } from './src/BpkBadge';
 import themeAttributes from './src/themeAttributes';
+import BpkBadgeV2 from './src/BpkBadgeV2/BpkBadge';
+
+;
 
 export type BpkBadgeProps = Props;
 export default component;
-export { BADGE_TYPES, themeAttributes };
+export { BADGE_TYPES, themeAttributes, BpkBadgeV2 };