diff --git a/examples/bpk-component-badge-v2/BadgeLayout.js b/examples/bpk-component-badge-v2/BadgeLayout.js deleted file mode 100644 index 36b597e4d0..0000000000 --- a/examples/bpk-component-badge-v2/BadgeLayout.js +++ /dev/null @@ -1,54 +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 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
{children}
; -}; - -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 deleted file mode 100644 index a6a220c7c7..0000000000 --- a/examples/bpk-component-badge-v2/BpkBadgeLayout.module.css +++ /dev/null @@ -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-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 deleted file mode 100644 index 886d8dbe8f..0000000000 --- a/examples/bpk-component-badge-v2/BpkBadgeLayout.module.scss +++ /dev/null @@ -1,34 +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 '../../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 deleted file mode 100644 index 207fcc5c97..0000000000 --- a/examples/bpk-component-badge-v2/examples.js +++ /dev/null @@ -1,160 +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 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 = () => ( - - Normal -   - -  Normal - - -); - -const WarningExample = () => ( - - -  Warning - - -); - -const SuccessExample = () => ( - - - -  Success - - -); - -const CriticalExample = () => ( - - - -  Critical - - -); - -const InverseExample = () => ( - - - Inverse -   - - -  Inverse - - - -); - -const OutlineExample = () => ( - - - Outline -   - - -  Outline - - - -); - -const StrongExample = () => ( - - Strong -   - - -  Strong - - -); - -const BrandExample = () => ( - - Strong -   - - -  Brand - - -); - -const CenteredExample = () => ( - -
- The badge is aligned to the centre of this text.{' '} - Centered -
- -); - -const DockedLeadingExample = () => ( - - Advert - -); - -const DockedTrailingExample = () => ( - - Advert - -); - -const MixedExample = () => ( -
- - - - - - - - -
-); - -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 deleted file mode 100644 index ca3e2a5d7f..0000000000 --- a/examples/bpk-component-badge-v2/stories.js +++ /dev/null @@ -1,56 +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 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.ts b/packages/bpk-component-badge/index.ts index d7d381a650..93f02cebc1 100644 --- a/packages/bpk-component-badge/index.ts +++ b/packages/bpk-component-badge/index.ts @@ -18,10 +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, BpkBadgeV2 }; +export { BADGE_TYPES, themeAttributes }; diff --git a/packages/bpk-component-badge/src/BpkBadge.module.css b/packages/bpk-component-badge/src/BpkBadge.module.css index d08f1a5844..a426436b35 100644 --- a/packages/bpk-component-badge/src/BpkBadge.module.css +++ b/packages/bpk-component-badge/src/BpkBadge.module.css @@ -15,4 +15,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-badge{display:inline-flex;padding:0.25rem 0.5rem;align-items:center;border-radius:.25rem;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir='rtl'] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir='rtl'] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--warning{background-color:#fff7cf;color:#161616;fill:#161616}.bpk-badge--success{background-color:#d4fff2;color:#161616;fill:#161616}.bpk-badge--critical{background-color:#ffe9f9;color:#161616;fill:#161616}.bpk-badge--normal{background-color:#e0e3e5;color:#161616;fill:#161616}.bpk-badge--inverse{background-color:#fff;color:#161616;fill:#161616}.bpk-badge--outline{background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff;fill:#fff}.bpk-badge--strong{background-color:#05203c;color:#fff;fill:#fff}.bpk-badge--brand{background-color:#0062e3;color:#fff;fill:#fff} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-badge{display:inline-flex;padding:0.25rem 0.5rem;align-items:center;border-radius:.25rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir='rtl'] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir='rtl'] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--warning{background-color:#eff1f2;color:#161616;fill:#f55d42}.bpk-badge--success{background-color:#eff1f2;color:#161616;fill:#0c838a}.bpk-badge--critical{background-color:#eff1f2;color:#161616;fill:#e70866}.bpk-badge--normal{background-color:#eff1f2;color:#161616;fill:#161616}.bpk-badge--inverse{background-color:#fff;color:#161616;fill:#161616}.bpk-badge--outline{background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff;fill:#fff}.bpk-badge--strong{background-color:#05203c;color:#fff;fill:#fff}.bpk-badge--brand{background-color:#0062e3;color:#fff;fill:#fff} diff --git a/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge-test.tsx b/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge-test.tsx deleted file mode 100644 index 71cc6e42d7..0000000000 --- a/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge-test.tsx +++ /dev/null @@ -1,74 +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 { 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 type { BadgeType } from '../BpkBadge'; -import { BADGE_TYPES } from '../BpkBadge'; - -import BpkBadgeV2 from './BpkBadge'; - -describe('BpkBadge', () => { - it('should render correctly', () => { - const { asFragment } = render(Promociando); - expect(asFragment()).toMatchSnapshot(); - }); - - it('should render correctly with a "centered"', () => { - const { asFragment } = render(Promociando); - expect(asFragment()).toMatchSnapshot(); - }); - - it('should render correctly with an icon', () => { - const { asFragment } = render( - - - Promociando - , - ); - expect(asFragment()).toMatchSnapshot(); - }); - - it('should render correctly with a "docked" attribute value equal to "right"', () => { - const { asFragment } = render( - Promociando, - ); - expect(asFragment()).toMatchSnapshot(); - }); - - it('should render correctly with a "docked" attribute value equal to "left"', () => { - const { asFragment } = render( - Promociando, - ); - expect(asFragment()).toMatchSnapshot(); - }); - - Object.keys(BADGE_TYPES).forEach((badgeType) => { - it(`should render correctly with type="${badgeType}"`, () => { - const { asFragment } = render( - - - Promociando - , - ); - expect(asFragment()).toMatchSnapshot(); - }); - }); -}); diff --git a/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge.d.ts b/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge.d.ts deleted file mode 100644 index bef012ad35..0000000000 --- a/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge.d.ts +++ /dev/null @@ -1,22 +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 type { Props } from '../BpkBadge'; -declare const BpkBadgeV2: ({ centered, className, docked, type, ...rest }: Props) => JSX.Element; -export default BpkBadgeV2; diff --git a/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge.module.css b/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge.module.css deleted file mode 100644 index 6f41985401..0000000000 --- a/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge.module.css +++ /dev/null @@ -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. -*/ -.bpk-badge{display:inline-flex;padding:0.25rem 0.5rem;align-items:center;border-radius:.25rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir='rtl'] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir='rtl'] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--warning{background-color:#eff1f2;color:#161616;fill:#f55d42}.bpk-badge--success{background-color:#eff1f2;color:#161616;fill:#0c838a}.bpk-badge--critical{background-color:#eff1f2;color:#161616;fill:#e70866}.bpk-badge--normal{background-color:#eff1f2;color:#161616;fill:#161616}.bpk-badge--inverse{background-color:#fff;color:#161616;fill:#161616}.bpk-badge--outline{background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff;fill:#fff}.bpk-badge--strong{background-color:#05203c;color:#fff;fill:#fff}.bpk-badge--brand{background-color:#0062e3;color:#fff;fill:#fff} diff --git a/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge.module.scss b/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge.module.scss deleted file mode 100644 index 019fa437f3..0000000000 --- a/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge.module.scss +++ /dev/null @@ -1,67 +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/src/mixins/badges-v2.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; - } -} diff --git a/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge.tsx b/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge.tsx deleted file mode 100644 index ef7658cebb..0000000000 --- a/packages/bpk-component-badge/src/BpkBadgeV2/BpkBadge.tsx +++ /dev/null @@ -1,57 +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 { cssModules } from '../../../bpk-react-utils'; -import type { Props } from '../BpkBadge'; -import { BADGE_TYPES } from '../BpkBadge' - -import STYLES from './BpkBadge.module.scss'; - -const getClassName = cssModules(STYLES); - -const badgeTypeClassNames = { - [BADGE_TYPES.warning]: getClassName('bpk-badge--warning'), - [BADGE_TYPES.success]: getClassName('bpk-badge--success'), - [BADGE_TYPES.critical]: getClassName('bpk-badge--critical'), - [BADGE_TYPES.normal]: getClassName('bpk-badge--normal'), - [BADGE_TYPES.inverse]: getClassName('bpk-badge--inverse'), - [BADGE_TYPES.outline]: getClassName('bpk-badge--outline'), - [BADGE_TYPES.strong]: getClassName('bpk-badge--strong'), - [BADGE_TYPES.brand]: getClassName('bpk-badge--brand'), -}; - -const BpkBadgeV2 = ({ - centered = false, - className = null, - docked = null, - type = BADGE_TYPES.normal, - ...rest -}: Props) => { - const classNames = getClassName( - 'bpk-badge', - badgeTypeClassNames[type], - docked === 'right' && 'bpk-badge--docked-right', - docked === 'left' && 'bpk-badge--docked-left', - centered && 'bpk-badge--centered', - className, - ); - - return ; -}; - -export default BpkBadgeV2; diff --git a/packages/bpk-component-badge/src/BpkBadgeV2/README.md b/packages/bpk-component-badge/src/BpkBadgeV2/README.md deleted file mode 100644 index ca5da76569..0000000000 --- a/packages/bpk-component-badge/src/BpkBadgeV2/README.md +++ /dev/null @@ -1,25 +0,0 @@ -# bpk-component-badge - -> 🧪 Experimental Component: `BpkBadgeV2` -> -> Increases the label size to 14pt (Footnote) for better legibility, and generally using less prominent colour so the badges can be used as progressive disclosure on Flights inventory cards. - -## Installation - -Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide. - -## Usage - -```tsx -import { BpkBadgeV2, BADGE_TYPES } from '@skyscanner/backpack-web/bpk-component-badge'; - -export default () => ( - - My Badge - -); -``` - -## Props - -Check out the full list of props on Skyscanner's [design system documentation website](https://www.skyscanner.design/latest/components/badge/web-vDRH571D#section-props-0c). diff --git a/packages/bpk-component-badge/src/BpkBadgeV2/__snapshots__/BpkBadge-test.tsx.snap b/packages/bpk-component-badge/src/BpkBadgeV2/__snapshots__/BpkBadge-test.tsx.snap deleted file mode 100644 index 8e71c4c4e8..0000000000 --- a/packages/bpk-component-badge/src/BpkBadgeV2/__snapshots__/BpkBadge-test.tsx.snap +++ /dev/null @@ -1,248 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BpkBadge should render correctly 1`] = ` - - - Promociando - - -`; - -exports[`BpkBadge should render correctly with a "centered" 1`] = ` - - - Promociando - - -`; - -exports[`BpkBadge should render correctly with a "docked" attribute value equal to "left" 1`] = ` - - - Promociando - - -`; - -exports[`BpkBadge should render correctly with a "docked" attribute value equal to "right" 1`] = ` - - - Promociando - - -`; - -exports[`BpkBadge should render correctly with an icon 1`] = ` - - - - Promociando - - -`; - -exports[`BpkBadge should render correctly with type="brand" 1`] = ` - - - - Promociando - - -`; - -exports[`BpkBadge should render correctly with type="critical" 1`] = ` - - - - Promociando - - -`; - -exports[`BpkBadge should render correctly with type="inverse" 1`] = ` - - - - Promociando - - -`; - -exports[`BpkBadge should render correctly with type="normal" 1`] = ` - - - - Promociando - - -`; - -exports[`BpkBadge should render correctly with type="outline" 1`] = ` - - - - Promociando - - -`; - -exports[`BpkBadge should render correctly with type="strong" 1`] = ` - - - - Promociando - - -`; - -exports[`BpkBadge should render correctly with type="success" 1`] = ` - - - - Promociando - - -`; - -exports[`BpkBadge should render correctly with type="warning" 1`] = ` - - - - Promociando - - -`; diff --git a/packages/bpk-component-badge/src/BpkBadgeV2/accessibility-test.tsx b/packages/bpk-component-badge/src/BpkBadgeV2/accessibility-test.tsx deleted file mode 100644 index 3971213d9f..0000000000 --- a/packages/bpk-component-badge/src/BpkBadgeV2/accessibility-test.tsx +++ /dev/null @@ -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 { render } from '@testing-library/react'; -import { axe } from 'jest-axe'; - -import BpkBadge from './BpkBadge'; - -describe('BpkBadgeV2 accessibility tests', () => { - it('should not have programmatically-detectable accessibility issues', async () => { - const { container } = render(Promociando); - const results = await axe(container); - expect(results).toHaveNoViolations(); - }); -}); diff --git a/packages/bpk-mixins/src/mixins/_badges.scss b/packages/bpk-mixins/src/mixins/_badges.scss index 77aa41cf85..b291fbe93b 100644 --- a/packages/bpk-mixins/src/mixins/_badges.scss +++ b/packages/bpk-mixins/src/mixins/_badges.scss @@ -18,6 +18,8 @@ @import '../bonds.scss'; @import 'typography.scss'; +@import 'radii.scss'; +@import 'utils.scss'; //// /// @group badges @@ -37,7 +39,7 @@ @include bpk-border-radius-xs; @include bpk-text; - @include bpk-caption; + @include bpk-footnote; } /// Centered badge. Modifies the bpk-badge mixin. @@ -117,7 +119,7 @@ /// } @mixin bpk-badge--normal { - background-color: $bpk-surface-highlight-day; + background-color: $bpk-private-badge-background-normal-day; color: $bpk-text-primary-day; fill: $bpk-text-primary-day; } @@ -133,9 +135,9 @@ /// } @mixin bpk-badge--warning { - background-color: $bpk-status-warning-fill-day; + background-color: $bpk-private-badge-background-normal-day; color: $bpk-text-on-light-day; - fill: $bpk-text-on-light-day; + fill: $bpk-status-warning-spot-day; } /// Success badge. Modifies the bpk-badge mixin. @@ -149,9 +151,9 @@ /// } @mixin bpk-badge--success { - background-color: $bpk-status-success-fill-day; + background-color: $bpk-private-badge-background-normal-day; color: $bpk-text-on-light-day; - fill: $bpk-text-on-light-day; + fill: $bpk-status-success-spot-day; } /// Critical badge. Modifies the bpk-badge mixin. @@ -165,9 +167,9 @@ /// } @mixin bpk-badge--critical { - background-color: $bpk-status-danger-fill-day; + background-color: $bpk-private-badge-background-normal-day; color: $bpk-text-on-light-day; - fill: $bpk-text-on-light-day; + fill: $bpk-status-danger-spot-day; } /// Inverse badge. Modifies the bpk-badge mixin.