From e6fa98866b7c9b5790fdefbac7c04a74a85a5bbf Mon Sep 17 00:00:00 2001 From: Ricci Mwangela Date: Fri, 3 Nov 2023 09:17:31 +0000 Subject: [PATCH 001/174] backpack carousel --- examples/bpk-component-carousel/example.js | 14 +++ examples/bpk-component-carousel/stories.js | 11 ++ packages/bpk-component-carousel/README.md | 25 +++++ packages/bpk-component-carousel/index.ts | 21 ++++ .../src/BpkCarousel-test.tsx | 65 +++++++++++ .../src/BpkCarousel.d.ts | 35 ++++++ .../src/BpkCarousel.tsx | 35 ++++++ .../src/BpkCarouselContainer.module.css | 18 +++ .../src/BpkCarouselContainer.module.scss | 19 ++++ .../src/BpkCarouselContainer.tsx | 87 ++++++++++++++ .../src/BpkCarouselImage.module.css | 18 +++ .../src/BpkCarouselImage.module.scss | 28 +++++ .../src/BpkCarouselImage.tsx | 27 +++++ .../src/BpkCarouselSlidesIndicator.module.css | 18 +++ .../BpkCarouselSlidesIndicator.module.scss | 59 ++++++++++ .../src/BpkCarouselSlidesIndicator.tsx | 41 +++++++ .../__snapshots__/BpkCarousel-test.tsx.snap | 106 ++++++++++++++++++ .../src/accessibility-test.tsx | 49 ++++++++ packages/bpk-component-carousel/src/index.ts | 1 + packages/bpk-component-carousel/src/types.ts | 9 ++ packages/bpk-component-carousel/src/utils.tsx | 63 +++++++++++ 21 files changed, 749 insertions(+) create mode 100644 examples/bpk-component-carousel/example.js create mode 100644 examples/bpk-component-carousel/stories.js create mode 100644 packages/bpk-component-carousel/README.md create mode 100644 packages/bpk-component-carousel/index.ts create mode 100644 packages/bpk-component-carousel/src/BpkCarousel-test.tsx create mode 100644 packages/bpk-component-carousel/src/BpkCarousel.d.ts create mode 100644 packages/bpk-component-carousel/src/BpkCarousel.tsx create mode 100644 packages/bpk-component-carousel/src/BpkCarouselContainer.module.css create mode 100644 packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss create mode 100644 packages/bpk-component-carousel/src/BpkCarouselContainer.tsx create mode 100644 packages/bpk-component-carousel/src/BpkCarouselImage.module.css create mode 100644 packages/bpk-component-carousel/src/BpkCarouselImage.module.scss create mode 100644 packages/bpk-component-carousel/src/BpkCarouselImage.tsx create mode 100644 packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.css create mode 100644 packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.scss create mode 100644 packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.tsx create mode 100644 packages/bpk-component-carousel/src/__snapshots__/BpkCarousel-test.tsx.snap create mode 100644 packages/bpk-component-carousel/src/accessibility-test.tsx create mode 100644 packages/bpk-component-carousel/src/index.ts create mode 100644 packages/bpk-component-carousel/src/types.ts create mode 100644 packages/bpk-component-carousel/src/utils.tsx diff --git a/examples/bpk-component-carousel/example.js b/examples/bpk-component-carousel/example.js new file mode 100644 index 0000000000..af77589bc3 --- /dev/null +++ b/examples/bpk-component-carousel/example.js @@ -0,0 +1,14 @@ +import BpkCarousel from '../../packages/bpk-component-carousel' + +const DemoImages = () => ( + +) + +const imagesList = [,, , , , ] + + +const DefaultExample = () => ( + +); + +export default DefaultExample diff --git a/examples/bpk-component-carousel/stories.js b/examples/bpk-component-carousel/stories.js new file mode 100644 index 0000000000..0d542b0fb9 --- /dev/null +++ b/examples/bpk-component-carousel/stories.js @@ -0,0 +1,11 @@ +import BpkCarousel from '../../packages/bpk-component-carousel' + +import DefaultExample from './example' + +export default { + title: 'bpk-component-carousel', + component: BpkCarousel, +}; + + +export const Default = DefaultExample; diff --git a/packages/bpk-component-carousel/README.md b/packages/bpk-component-carousel/README.md new file mode 100644 index 0000000000..0416feab8f --- /dev/null +++ b/packages/bpk-component-carousel/README.md @@ -0,0 +1,25 @@ +# bpk-component-boilerplate + +> Backpack carousel component. + +## Installation + +Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide. + +## Usage + +```tsx +import BpkBoilerplate from '@skyscanner/backpack-web/bpk-component-carousel'; + +const imageChangeHandler = () => { + console.log('Image Changed') +} + +export default () => ( + ]} + initialImageIndex={2} + onImageChanged={imageChangeHandler} + /> + ); +``` diff --git a/packages/bpk-component-carousel/index.ts b/packages/bpk-component-carousel/index.ts new file mode 100644 index 0000000000..71058594bf --- /dev/null +++ b/packages/bpk-component-carousel/index.ts @@ -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. + */ + +import BpkCarousel from "./src"; + +export default BpkCarousel diff --git a/packages/bpk-component-carousel/src/BpkCarousel-test.tsx b/packages/bpk-component-carousel/src/BpkCarousel-test.tsx new file mode 100644 index 0000000000..423a762d75 --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarousel-test.tsx @@ -0,0 +1,65 @@ +import { render, screen, getAllByRole } from '@testing-library/react'; +import { axe } from 'jest-axe'; +import userEvent from '@testing-library/user-event'; +import type { ReactNode } from 'react'; + +import BpkCarousel from './BpkCarousel'; + + +describe('BpkCarousel', () => { + let images: ReactNode[] + + const DemoImages = () => ( + + ) + + function generateDemoImages(count: number) { + return Array.from({ length: count }, (_, i) => ()); + } + + type TestCase = [ + expectedCount: 7 | 5 | 4 | 12, + actualCount: number, + props: React.ComponentProps, + ]; + + beforeAll(() => { + + window.HTMLElement.prototype.scrollIntoView = jest.fn(); + + (window as any).IntersectionObserver = class IntersectionObserver { + observe = jest.fn(); + + disconnect = jest.fn(); + + unobserve = jest.fn(); + }; + images = [, , , , ]; + }); + + it('should render correctly', () => { + const { asFragment } = render(); + + expect(asFragment()).toMatchSnapshot(); + }); + + it.each([ + [12, 10, { images: generateDemoImages(10) }], + [7, 5, { images: generateDemoImages(5) }], + [5, 3, { images: generateDemoImages(3) }], + [4, 2, { images: generateDemoImages(2) }], + ])( + 'renders %i image(s) when there are %i image(s) available', + (expectedCount, actualCount, props) => { + render(); + + expect(screen.getByTestId('image-gallery-scroll-container').childElementCount).toBe(expectedCount); + }, + ); + + it('renders only one image when only one available (no fake images for the infinite scroll)', async () => { + render(); + + expect(screen.getByTestId('image-gallery-scroll-container').childElementCount).toBe(1); + }); +}); diff --git a/packages/bpk-component-carousel/src/BpkCarousel.d.ts b/packages/bpk-component-carousel/src/BpkCarousel.d.ts new file mode 100644 index 0000000000..75e561af5f --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarousel.d.ts @@ -0,0 +1,35 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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 { OnImageChangedHandler } from "./types"; +import type { ReactNode } from 'react'; + +export type Props = { + images: ReactNode[] + initialImageIndex?: number; + onImageChanged?: OnImageChangedHandler +}; + +declare const BpkCarousel: { + ({ initialImageIndex, onImageChanged, ...rest }: Props): JSX.Element; + defaultProps: { + initialImageIndex: 0; + onImageChanged: null + }; +}; +export default BpkCarousel; diff --git a/packages/bpk-component-carousel/src/BpkCarousel.tsx b/packages/bpk-component-carousel/src/BpkCarousel.tsx new file mode 100644 index 0000000000..14225b4e97 --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarousel.tsx @@ -0,0 +1,35 @@ +import { useRef, useState } from 'react'; + + +import { useScrollToInitialImage } from './utils'; +import BpkCarouselContainer from './BpkCarouselContainer'; +import BpkSlidesIndicator from './BpkCarouselSlidesIndicator'; +import type { Props } from './types'; + +const BpkCarousel = ({ + images, + initialImageIndex = 0, + onImageChanged = null +}: Props) => { + const [shownImageIndex, updateShownImageIndex] = useState(initialImageIndex); + const imagesRef = useRef>([]); + + useScrollToInitialImage(initialImageIndex, imagesRef); + + return ( + <> + + + + ); +}; + +export default BpkCarousel; diff --git a/packages/bpk-component-carousel/src/BpkCarouselContainer.module.css b/packages/bpk-component-carousel/src/BpkCarouselContainer.module.css new file mode 100644 index 0000000000..7dc4b859d0 --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarouselContainer.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-carousel-container{display:grid;width:100%;height:100%;grid:1fr / auto-flow 100%;border-radius:.75rem;overflow-x:auto;overflow-y:hidden;backface-visibility:hidden;overscroll-behavior:contain;scroll-snap-type:x mandatory;scrollbar-width:none;user-select:none}@media (max-width: 32.25rem){.bpk-carousel-container{border-radius:0}}.bpk-carousel-container::-webkit-scrollbar{display:none} diff --git a/packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss b/packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss new file mode 100644 index 0000000000..68fcfaa116 --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss @@ -0,0 +1,19 @@ +@import '~bpk-mixins/index.scss'; + +.bpk-carousel-container { + display: grid; + width: 100%; + height: 100%; + grid: 1fr / auto-flow 100%; + overflow-x: auto; + overflow-y: hidden; + backface-visibility: hidden; + overscroll-behavior: contain; + scroll-snap-type: x mandatory; + scrollbar-width: none; + user-select: none; + + &::-webkit-scrollbar { + display: none; + } +} diff --git a/packages/bpk-component-carousel/src/BpkCarouselContainer.tsx b/packages/bpk-component-carousel/src/BpkCarouselContainer.tsx new file mode 100644 index 0000000000..394abec574 --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarouselContainer.tsx @@ -0,0 +1,87 @@ +import type { MutableRefObject, ReactNode } from 'react'; +import { memo, useState } from 'react'; + +import { cssModules } from '../../bpk-react-utils'; + +import { useIntersectionObserver } from './utils'; +import STYLES from './BpkCarouselContainer.module.scss'; +import BpkCarouselImage from './BpkCarouselImage'; +import type { OnImageChangedHandler } from './types'; + +const getClassName = cssModules(STYLES); + +type Props = { + images: ReactNode[]; + onVisible: (visibleIndex: number) => void; + imagesRef: MutableRefObject>; + onImageChanged: OnImageChangedHandler +}; + +const BpkScrollContainer = memo(({ images, imagesRef, onImageChanged, onVisible }: Props) => { + const [root, setRoot] = useState(null); + const observeImageChange = useIntersectionObserver(onVisible, { + root, + threshold: 0.5, + }, onImageChanged); + const observeCycleScroll = useIntersectionObserver( + (index) => { + const imageElement = imagesRef.current && imagesRef.current[index]; + if (imageElement) { + imageElement.scrollIntoView({ + block: 'nearest', + inline: 'start', + }); + } + }, + { root, threshold: 1 }, + ); + + if (images.length === 1) { + return ( +
+ +
+ ); + } + + return ( +
+ { + observeCycleScroll(el); + observeImageChange(el); + }} + /> + {images.map((image, index) => ( + { + // eslint-disable-next-line no-param-reassign + imagesRef.current[index] = el; + observeImageChange(el); + }} + /> + ))} + { + observeCycleScroll(el); + observeImageChange(el); + }} + /> +
+ ); +}); + +export default BpkScrollContainer; diff --git a/packages/bpk-component-carousel/src/BpkCarouselImage.module.css b/packages/bpk-component-carousel/src/BpkCarouselImage.module.css new file mode 100644 index 0000000000..ba399650c8 --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarouselImage.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-carousel-image{display:inline-flex;width:100%;min-width:0;height:100%;min-height:0;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}.bpk-carousel-image img{max-width:100%;max-height:100%;border-radius:.75rem;object-fit:cover}@media (max-width: 32.25rem){.bpk-carousel-image img{border-radius:0;object-fit:contain}} diff --git a/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss b/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss new file mode 100644 index 0000000000..7d4dceb859 --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss @@ -0,0 +1,28 @@ +@import '~bpk-mixins/index.scss'; + +.bpk-carousel-image { + display: inline-flex; + width: 100%; + min-width: 0; + height: 100%; + min-height: 0; + justify-content: center; + scroll-snap-align: start; + scroll-snap-stop: always; + + /* helps with flickering when cycle scroll */ + /* stylelint-disable-next-line order/properties-order */ + isolation: isolate; + + img { + max-width: 100%; + max-height: 100%; + border-radius: $bpk-border-radius-md; + object-fit: cover; + + @include bpk-breakpoint-mobile { + border-radius: 0; + object-fit: contain; + } + } +} diff --git a/packages/bpk-component-carousel/src/BpkCarouselImage.tsx b/packages/bpk-component-carousel/src/BpkCarouselImage.tsx new file mode 100644 index 0000000000..10eb03320c --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarouselImage.tsx @@ -0,0 +1,27 @@ +import type { ReactNode } from "react"; +import { forwardRef } from "react"; + +import { cssModules } from "../../bpk-react-utils"; + +import STYLES from "./BpkCarouselImage.module.scss" + +const getClassName = cssModules(STYLES); + +type ImageProps = { + image: ReactNode; + index: number; +}; +const BpkCarouselImage = forwardRef(({ image, index }, ref) => ( +
+ {image} +
+)); + +export default BpkCarouselImage + diff --git a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.css b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.css new file mode 100644 index 0000000000..9e22ee306b --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.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-slides-indicator{position:relative;right:0;bottom:1.5rem;left:0;display:flex;margin:auto 1rem;overflow:hidden;overflow:clip}.bpk-slides-indicator__row{--direction: -1;display:inline-flex;margin:0 auto;flex-flow:row nowrap;align-items:center;transform:translateX(calc(var(--direction) * var(--scroll-index) * .75rem));transition:transform 200ms ease-in-out}html[dir='rtl'] .bpk-slides-indicator__row{--direction: 1}.bpk-slides-indicator__dot{width:.5rem;height:.5rem;flex:0 0 .5rem;transform:scale(0.5);transition:200ms ease-in;background-color:#fff;opacity:0.7;transform-origin:center;border-radius:.75rem}.bpk-slides-indicator__dot:not(:last-child){margin-right:.25rem}.bpk-slides-indicator__siblingToActive{transform:scale(0.75)}.bpk-slides-indicator__active{transform:none;opacity:1} diff --git a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.scss b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.scss new file mode 100644 index 0000000000..b02fa0d01c --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.scss @@ -0,0 +1,59 @@ +@import '~bpk-mixins/index.scss'; + +$dots-visible: 5; +$dot-size: $bpk-one-pixel-rem * 8; +$gap: $dot-size / 2; + +.bpk-carousel-slides-indicator { + position: relative; + right: 0; + bottom: 1.5rem; + left: 0; + display: flex; + margin: auto bpk-spacing-base(); + overflow: hidden; + overflow: clip; + + &__row { + --direction: -1; + + display: inline-flex; + margin: 0 auto; + flex-flow: row nowrap; + align-items: center; + transform: translateX( + calc(var(--direction) * var(--scroll-index) * #{$dot-size + $gap}) + ); + transition: transform $bpk-duration-sm ease-in-out; + + @include bpk-rtl { + --direction: 1; + } + } + + &__dot { + width: $dot-size; + height: $dot-size; + flex: 0 0 $dot-size; + transform: scale(0.5); + transition: $bpk-duration-sm ease-in; + background-color: $bpk-color-white; + opacity: 0.7; + transform-origin: center; + + @include bpk-border-radius-md; + + &:not(:last-child) { + margin-right: $gap; + } + } + + &__siblingToActive { + transform: scale(0.75); + } + + &__active { + transform: none; + opacity: 1; + } +} diff --git a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.tsx b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.tsx new file mode 100644 index 0000000000..d465dee963 --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.tsx @@ -0,0 +1,41 @@ +import { cssModules } from '../../bpk-react-utils'; + +import STYLES from './BpkCarouselSlidesIndicator.module.scss'; + +const getClassName = cssModules(STYLES); + +type Props = { + length: number; + activeIndex: number; +}; + +const BpkSCarousellidesIndicator = ({ activeIndex, length }: Props) => { + if (length < 2) return null; + + // scroll starting from 3 dot until last 5, unless there are less than 5 + const activeDotIndex = Math.min(Math.max(0, activeIndex - 2), Math.max(0, length - 5)); + + return ( +
+
+ {Array.from({ length }).map((_, index) => ( +
+ ))} +
+
+ ); +}; + +export default BpkSCarousellidesIndicator; diff --git a/packages/bpk-component-carousel/src/__snapshots__/BpkCarousel-test.tsx.snap b/packages/bpk-component-carousel/src/__snapshots__/BpkCarousel-test.tsx.snap new file mode 100644 index 0000000000..a66203f151 --- /dev/null +++ b/packages/bpk-component-carousel/src/__snapshots__/BpkCarousel-test.tsx.snap @@ -0,0 +1,106 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BpkCarousel should render correctly 1`] = ` + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +`; diff --git a/packages/bpk-component-carousel/src/accessibility-test.tsx b/packages/bpk-component-carousel/src/accessibility-test.tsx new file mode 100644 index 0000000000..04770962b9 --- /dev/null +++ b/packages/bpk-component-carousel/src/accessibility-test.tsx @@ -0,0 +1,49 @@ +/* + * 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 BpkCarousel from './BpkCarousel'; + +const DemoImages = () => ( + +) +const images = [, , , , ] + + +describe('BpkCarousel accessibility tests', () => { + + beforeAll(() => { + window.HTMLElement.prototype.scrollIntoView = jest.fn(); + + (window as any).IntersectionObserver = class IntersectionObserver { + observe = jest.fn(); + + disconnect = jest.fn(); + + unobserve = jest.fn(); + }; + }) + + it('should not have programmatically-detectable accessibility issues', async () => { + const { container } = render(); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/bpk-component-carousel/src/index.ts b/packages/bpk-component-carousel/src/index.ts new file mode 100644 index 0000000000..3d9637a182 --- /dev/null +++ b/packages/bpk-component-carousel/src/index.ts @@ -0,0 +1 @@ +export { default } from './BpkCarousel'; diff --git a/packages/bpk-component-carousel/src/types.ts b/packages/bpk-component-carousel/src/types.ts new file mode 100644 index 0000000000..80f2a71ad1 --- /dev/null +++ b/packages/bpk-component-carousel/src/types.ts @@ -0,0 +1,9 @@ +import type { ReactNode } from "react"; + +export type OnImageChangedHandler = (() => void) | null | undefined; + +export type Props = { + images: ReactNode[] + initialImageIndex?: number; + onImageChanged?: OnImageChangedHandler +}; diff --git a/packages/bpk-component-carousel/src/utils.tsx b/packages/bpk-component-carousel/src/utils.tsx new file mode 100644 index 0000000000..49596a3ce4 --- /dev/null +++ b/packages/bpk-component-carousel/src/utils.tsx @@ -0,0 +1,63 @@ +import { useEffect, useMemo, useRef } from 'react'; +import type { MutableRefObject } from 'react'; + +import type { OnImageChangedHandler } from './types'; + +export function useScrollToInitialImage( + initialImageIndex: number, + imagesRef: MutableRefObject>, +) { + useEffect(() => { + const element = imagesRef.current[initialImageIndex]; + if (element) { + element.scrollIntoView({ + block: 'nearest', + inline: 'start', + }); + } + }, [initialImageIndex, imagesRef]); +} + +export function useIntersectionObserver( + onIntersecting: (index: number) => void, + { root, threshold }: IntersectionObserverInit, + onImageChanged?: OnImageChangedHandler, +) { + const callbackRef = useRef(onIntersecting); + + + useEffect(() => { + callbackRef.current = onIntersecting; + }); + + const observe = useMemo<(element: HTMLElement | null) => void>(() => { + if (!root) return () => {}; + const observer = new IntersectionObserver( + (entries) => { + const shownEntry = entries.find((entry) => entry.isIntersecting); + if (!shownEntry) { + return; + } + const { index } = (shownEntry.target as HTMLElement).dataset; + if (index) { + callbackRef.current(parseInt(index, 10)); + if (onImageChanged) { + onImageChanged() + } + } + }, + { root, threshold }, + ); + + const observeElement = (element: HTMLElement | null) => { + + if (element && observer) { + observer.observe(element); + } + }; + + return observeElement; + }, [onImageChanged, root, threshold]); + + return observe; +} From dc3964b90dd9128b95d9276e1fa9b8aa2cb5b436 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 12:20:37 +0000 Subject: [PATCH 002/174] Update packages/bpk-component-carousel/README.md Co-authored-by: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> --- packages/bpk-component-carousel/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bpk-component-carousel/README.md b/packages/bpk-component-carousel/README.md index 0416feab8f..ea24cf4ed0 100644 --- a/packages/bpk-component-carousel/README.md +++ b/packages/bpk-component-carousel/README.md @@ -1,4 +1,4 @@ -# bpk-component-boilerplate +# bpk-component-carousel > Backpack carousel component. From 419970d4994bb7049af9857f25f02f45ebaf9c29 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 12:25:17 +0000 Subject: [PATCH 003/174] Update packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss Co-authored-by: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> --- .../bpk-component-carousel/src/BpkCarouselContainer.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss b/packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss index 68fcfaa116..b40671e595 100644 --- a/packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss +++ b/packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss @@ -1,4 +1,4 @@ -@import '~bpk-mixins/index.scss'; +@import '../../bpk-mixins/index.scss'; .bpk-carousel-container { display: grid; From 54a4e82de1d571b452b724ed86aac47851493a5c Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 12:26:07 +0000 Subject: [PATCH 004/174] Update packages/bpk-component-carousel/src/BpkCarouselImage.module.scss Co-authored-by: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> --- .../bpk-component-carousel/src/BpkCarouselImage.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss b/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss index 7d4dceb859..09f131a9af 100644 --- a/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss +++ b/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss @@ -1,4 +1,4 @@ -@import '~bpk-mixins/index.scss'; +@import '../../bpk-mixins/index.scss'; .bpk-carousel-image { display: inline-flex; From fbb19662d084e3081690e62c8628dc0915d1febb Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 12:32:37 +0000 Subject: [PATCH 005/174] add license header --- examples/bpk-component-carousel/example.js | 18 +++++++++++++++++ examples/bpk-component-carousel/stories.js | 18 +++++++++++++++++ .../src/BpkCarousel.tsx | 18 +++++++++++++++++ .../src/BpkCarouselContainer.module.scss | 18 +++++++++++++++++ .../src/BpkCarouselContainer.tsx | 18 +++++++++++++++++ .../src/BpkCarouselImage.module.scss | 18 +++++++++++++++++ .../src/BpkCarouselImage.tsx | 18 +++++++++++++++++ .../BpkCarouselSlidesIndicator.module.scss | 20 ++++++++++++++++++- .../src/BpkCarouselSlidesIndicator.tsx | 18 +++++++++++++++++ packages/bpk-component-carousel/src/types.ts | 18 +++++++++++++++++ packages/bpk-component-carousel/src/utils.tsx | 18 +++++++++++++++++ 11 files changed, 199 insertions(+), 1 deletion(-) diff --git a/examples/bpk-component-carousel/example.js b/examples/bpk-component-carousel/example.js index af77589bc3..8c649fadc0 100644 --- a/examples/bpk-component-carousel/example.js +++ b/examples/bpk-component-carousel/example.js @@ -1,3 +1,21 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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 BpkCarousel from '../../packages/bpk-component-carousel' const DemoImages = () => ( diff --git a/examples/bpk-component-carousel/stories.js b/examples/bpk-component-carousel/stories.js index 0d542b0fb9..10e2f0adbb 100644 --- a/examples/bpk-component-carousel/stories.js +++ b/examples/bpk-component-carousel/stories.js @@ -1,3 +1,21 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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 BpkCarousel from '../../packages/bpk-component-carousel' import DefaultExample from './example' diff --git a/packages/bpk-component-carousel/src/BpkCarousel.tsx b/packages/bpk-component-carousel/src/BpkCarousel.tsx index 14225b4e97..765461a0ae 100644 --- a/packages/bpk-component-carousel/src/BpkCarousel.tsx +++ b/packages/bpk-component-carousel/src/BpkCarousel.tsx @@ -1,3 +1,21 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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 { useRef, useState } from 'react'; diff --git a/packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss b/packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss index b40671e595..da58370cf0 100644 --- a/packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss +++ b/packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss @@ -1,3 +1,21 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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-carousel-container { diff --git a/packages/bpk-component-carousel/src/BpkCarouselContainer.tsx b/packages/bpk-component-carousel/src/BpkCarouselContainer.tsx index 394abec574..885170998e 100644 --- a/packages/bpk-component-carousel/src/BpkCarouselContainer.tsx +++ b/packages/bpk-component-carousel/src/BpkCarouselContainer.tsx @@ -1,3 +1,21 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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 { MutableRefObject, ReactNode } from 'react'; import { memo, useState } from 'react'; diff --git a/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss b/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss index 09f131a9af..7667f3a858 100644 --- a/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss +++ b/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss @@ -1,3 +1,21 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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-carousel-image { diff --git a/packages/bpk-component-carousel/src/BpkCarouselImage.tsx b/packages/bpk-component-carousel/src/BpkCarouselImage.tsx index 10eb03320c..e49690fd0b 100644 --- a/packages/bpk-component-carousel/src/BpkCarouselImage.tsx +++ b/packages/bpk-component-carousel/src/BpkCarouselImage.tsx @@ -1,3 +1,21 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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 { ReactNode } from "react"; import { forwardRef } from "react"; diff --git a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.scss b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.scss index b02fa0d01c..738b128f89 100644 --- a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.scss +++ b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.scss @@ -1,4 +1,22 @@ -@import '~bpk-mixins/index.scss'; +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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'; $dots-visible: 5; $dot-size: $bpk-one-pixel-rem * 8; diff --git a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.tsx b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.tsx index d465dee963..fc24653b8c 100644 --- a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.tsx +++ b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.tsx @@ -1,3 +1,21 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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 STYLES from './BpkCarouselSlidesIndicator.module.scss'; diff --git a/packages/bpk-component-carousel/src/types.ts b/packages/bpk-component-carousel/src/types.ts index 80f2a71ad1..237082fc7f 100644 --- a/packages/bpk-component-carousel/src/types.ts +++ b/packages/bpk-component-carousel/src/types.ts @@ -1,3 +1,21 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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 { ReactNode } from "react"; export type OnImageChangedHandler = (() => void) | null | undefined; diff --git a/packages/bpk-component-carousel/src/utils.tsx b/packages/bpk-component-carousel/src/utils.tsx index 49596a3ce4..67bbfb80c5 100644 --- a/packages/bpk-component-carousel/src/utils.tsx +++ b/packages/bpk-component-carousel/src/utils.tsx @@ -1,3 +1,21 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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 { useEffect, useMemo, useRef } from 'react'; import type { MutableRefObject } from 'react'; From 91b350e2ffc506bc54befb80efe832a03dbaa394 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 12:33:32 +0000 Subject: [PATCH 006/174] direct import --- packages/bpk-component-carousel/index.ts | 2 +- packages/bpk-component-carousel/src/index.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 packages/bpk-component-carousel/src/index.ts diff --git a/packages/bpk-component-carousel/index.ts b/packages/bpk-component-carousel/index.ts index 71058594bf..c8bb9896f9 100644 --- a/packages/bpk-component-carousel/index.ts +++ b/packages/bpk-component-carousel/index.ts @@ -16,6 +16,6 @@ * limitations under the License. */ -import BpkCarousel from "./src"; +import BpkCarousel from "./src/BpkCarousel"; export default BpkCarousel diff --git a/packages/bpk-component-carousel/src/index.ts b/packages/bpk-component-carousel/src/index.ts deleted file mode 100644 index 3d9637a182..0000000000 --- a/packages/bpk-component-carousel/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './BpkCarousel'; From a197a5c40879bae1d978e5f91c80c0469d1d45a3 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 12:39:14 +0000 Subject: [PATCH 007/174] alt tag a11y --- examples/bpk-component-carousel/example.js | 4 +-- .../src/BpkCarousel-test.tsx | 2 +- .../__snapshots__/BpkCarousel-test.tsx.snap | 28 +++++++++---------- .../src/accessibility-test.tsx | 2 +- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/examples/bpk-component-carousel/example.js b/examples/bpk-component-carousel/example.js index 8c649fadc0..0483dc7172 100644 --- a/examples/bpk-component-carousel/example.js +++ b/examples/bpk-component-carousel/example.js @@ -19,10 +19,10 @@ import BpkCarousel from '../../packages/bpk-component-carousel' const DemoImages = () => ( - + hotel bedroom ) -const imagesList = [,, , , , ] +const imagesList = [, , , , ] const DefaultExample = () => ( diff --git a/packages/bpk-component-carousel/src/BpkCarousel-test.tsx b/packages/bpk-component-carousel/src/BpkCarousel-test.tsx index 423a762d75..3cc03888e1 100644 --- a/packages/bpk-component-carousel/src/BpkCarousel-test.tsx +++ b/packages/bpk-component-carousel/src/BpkCarousel-test.tsx @@ -10,7 +10,7 @@ describe('BpkCarousel', () => { let images: ReactNode[] const DemoImages = () => ( - + hotel bedroom ) function generateDemoImages(count: number) { diff --git a/packages/bpk-component-carousel/src/__snapshots__/BpkCarousel-test.tsx.snap b/packages/bpk-component-carousel/src/__snapshots__/BpkCarousel-test.tsx.snap index a66203f151..20681fe1ca 100644 --- a/packages/bpk-component-carousel/src/__snapshots__/BpkCarousel-test.tsx.snap +++ b/packages/bpk-component-carousel/src/__snapshots__/BpkCarousel-test.tsx.snap @@ -13,8 +13,8 @@ exports[`BpkCarousel should render correctly 1`] = ` role="listitem" >
diff --git a/packages/bpk-component-carousel/src/accessibility-test.tsx b/packages/bpk-component-carousel/src/accessibility-test.tsx index 04770962b9..21f7e34411 100644 --- a/packages/bpk-component-carousel/src/accessibility-test.tsx +++ b/packages/bpk-component-carousel/src/accessibility-test.tsx @@ -22,7 +22,7 @@ import { axe } from 'jest-axe'; import BpkCarousel from './BpkCarousel'; const DemoImages = () => ( - + hotel bedroom ) const images = [, , , , ] From f6d27c5746ce1c0409337b8a3cd2fa8cfd707e92 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 13:04:54 +0000 Subject: [PATCH 008/174] use bpk-component-page-indicator --- .../src/BpkCarousel.module.css | 18 +++++ .../src/BpkCarousel.module.scss | 30 ++++++++ .../src/BpkCarousel.tsx | 30 +++++--- .../src/BpkCarouselContainer.module.css | 2 +- .../src/BpkCarouselImage.module.css | 2 +- .../src/BpkCarouselSlidesIndicator.module.css | 18 ----- .../BpkCarouselSlidesIndicator.module.scss | 77 ------------------- .../src/BpkCarouselSlidesIndicator.tsx | 59 -------------- .../__snapshots__/BpkCarousel-test.tsx.snap | 54 +++++++++---- 9 files changed, 106 insertions(+), 184 deletions(-) create mode 100644 packages/bpk-component-carousel/src/BpkCarousel.module.css create mode 100644 packages/bpk-component-carousel/src/BpkCarousel.module.scss delete mode 100644 packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.css delete mode 100644 packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.scss delete mode 100644 packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.tsx diff --git a/packages/bpk-component-carousel/src/BpkCarousel.module.css b/packages/bpk-component-carousel/src/BpkCarousel.module.css new file mode 100644 index 0000000000..ba63c7a6ca --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarousel.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-carousel-slides-indicator{position:relative;right:0;bottom:1.5rem;left:0;display:flex;margin:auto 1rem;overflow:hidden;overflow:clip} diff --git a/packages/bpk-component-carousel/src/BpkCarousel.module.scss b/packages/bpk-component-carousel/src/BpkCarousel.module.scss new file mode 100644 index 0000000000..81a2e53b46 --- /dev/null +++ b/packages/bpk-component-carousel/src/BpkCarousel.module.scss @@ -0,0 +1,30 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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-carousel-slides-indicator { + position: relative; + right: 0; + bottom: 1.5rem; + left: 0; + display: flex; + margin: auto bpk-spacing-base(); + overflow: hidden; + overflow: clip; +} diff --git a/packages/bpk-component-carousel/src/BpkCarousel.tsx b/packages/bpk-component-carousel/src/BpkCarousel.tsx index 765461a0ae..30abcecfee 100644 --- a/packages/bpk-component-carousel/src/BpkCarousel.tsx +++ b/packages/bpk-component-carousel/src/BpkCarousel.tsx @@ -18,16 +18,20 @@ import { useRef, useState } from 'react'; +import BpkPageIndicator, { VARIANT } from '../../bpk-component-page-indicator'; +import { cssModules } from '../../bpk-react-utils'; import { useScrollToInitialImage } from './utils'; import BpkCarouselContainer from './BpkCarouselContainer'; -import BpkSlidesIndicator from './BpkCarouselSlidesIndicator'; import type { Props } from './types'; +import STYLES from './BpkCarousel.module.scss'; + +const getClassName = cssModules(STYLES); const BpkCarousel = ({ images, initialImageIndex = 0, - onImageChanged = null + onImageChanged = null, }: Props) => { const [shownImageIndex, updateShownImageIndex] = useState(initialImageIndex); const imagesRef = useRef>([]); @@ -36,17 +40,19 @@ const BpkCarousel = ({ return ( <> - - + - + ); }; diff --git a/packages/bpk-component-carousel/src/BpkCarouselContainer.module.css b/packages/bpk-component-carousel/src/BpkCarouselContainer.module.css index 7dc4b859d0..cc3c1a9acd 100644 --- a/packages/bpk-component-carousel/src/BpkCarouselContainer.module.css +++ b/packages/bpk-component-carousel/src/BpkCarouselContainer.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-carousel-container{display:grid;width:100%;height:100%;grid:1fr / auto-flow 100%;border-radius:.75rem;overflow-x:auto;overflow-y:hidden;backface-visibility:hidden;overscroll-behavior:contain;scroll-snap-type:x mandatory;scrollbar-width:none;user-select:none}@media (max-width: 32.25rem){.bpk-carousel-container{border-radius:0}}.bpk-carousel-container::-webkit-scrollbar{display:none} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-carousel-container{display:grid;width:100%;height:100%;grid:1fr / auto-flow 100%;overflow-x:auto;overflow-y:hidden;backface-visibility:hidden;overscroll-behavior:contain;scroll-snap-type:x mandatory;scrollbar-width:none;user-select:none}.bpk-carousel-container::-webkit-scrollbar{display:none} diff --git a/packages/bpk-component-carousel/src/BpkCarouselImage.module.css b/packages/bpk-component-carousel/src/BpkCarouselImage.module.css index ba399650c8..6a447c3271 100644 --- a/packages/bpk-component-carousel/src/BpkCarouselImage.module.css +++ b/packages/bpk-component-carousel/src/BpkCarouselImage.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-carousel-image{display:inline-flex;width:100%;min-width:0;height:100%;min-height:0;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}.bpk-carousel-image img{max-width:100%;max-height:100%;border-radius:.75rem;object-fit:cover}@media (max-width: 32.25rem){.bpk-carousel-image img{border-radius:0;object-fit:contain}} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-carousel-image{display:inline-flex;width:100%;min-width:0;height:100%;min-height:0;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}.bpk-carousel-image img{max-width:100%;max-height:100%;border-radius:.75rem;object-fit:cover}@media (max-width: 32rem){.bpk-carousel-image img{border-radius:0;object-fit:contain}} diff --git a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.css b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.css deleted file mode 100644 index 9e22ee306b..0000000000 --- a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.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-slides-indicator{position:relative;right:0;bottom:1.5rem;left:0;display:flex;margin:auto 1rem;overflow:hidden;overflow:clip}.bpk-slides-indicator__row{--direction: -1;display:inline-flex;margin:0 auto;flex-flow:row nowrap;align-items:center;transform:translateX(calc(var(--direction) * var(--scroll-index) * .75rem));transition:transform 200ms ease-in-out}html[dir='rtl'] .bpk-slides-indicator__row{--direction: 1}.bpk-slides-indicator__dot{width:.5rem;height:.5rem;flex:0 0 .5rem;transform:scale(0.5);transition:200ms ease-in;background-color:#fff;opacity:0.7;transform-origin:center;border-radius:.75rem}.bpk-slides-indicator__dot:not(:last-child){margin-right:.25rem}.bpk-slides-indicator__siblingToActive{transform:scale(0.75)}.bpk-slides-indicator__active{transform:none;opacity:1} diff --git a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.scss b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.scss deleted file mode 100644 index 738b128f89..0000000000 --- a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.module.scss +++ /dev/null @@ -1,77 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2022 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'; - -$dots-visible: 5; -$dot-size: $bpk-one-pixel-rem * 8; -$gap: $dot-size / 2; - -.bpk-carousel-slides-indicator { - position: relative; - right: 0; - bottom: 1.5rem; - left: 0; - display: flex; - margin: auto bpk-spacing-base(); - overflow: hidden; - overflow: clip; - - &__row { - --direction: -1; - - display: inline-flex; - margin: 0 auto; - flex-flow: row nowrap; - align-items: center; - transform: translateX( - calc(var(--direction) * var(--scroll-index) * #{$dot-size + $gap}) - ); - transition: transform $bpk-duration-sm ease-in-out; - - @include bpk-rtl { - --direction: 1; - } - } - - &__dot { - width: $dot-size; - height: $dot-size; - flex: 0 0 $dot-size; - transform: scale(0.5); - transition: $bpk-duration-sm ease-in; - background-color: $bpk-color-white; - opacity: 0.7; - transform-origin: center; - - @include bpk-border-radius-md; - - &:not(:last-child) { - margin-right: $gap; - } - } - - &__siblingToActive { - transform: scale(0.75); - } - - &__active { - transform: none; - opacity: 1; - } -} diff --git a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.tsx b/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.tsx deleted file mode 100644 index fc24653b8c..0000000000 --- a/packages/bpk-component-carousel/src/BpkCarouselSlidesIndicator.tsx +++ /dev/null @@ -1,59 +0,0 @@ -/* - * Backpack - Skyscanner's Design System - * - * Copyright 2022 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 STYLES from './BpkCarouselSlidesIndicator.module.scss'; - -const getClassName = cssModules(STYLES); - -type Props = { - length: number; - activeIndex: number; -}; - -const BpkSCarousellidesIndicator = ({ activeIndex, length }: Props) => { - if (length < 2) return null; - - // scroll starting from 3 dot until last 5, unless there are less than 5 - const activeDotIndex = Math.min(Math.max(0, activeIndex - 2), Math.max(0, length - 5)); - - return ( -
-
- {Array.from({ length }).map((_, index) => ( -
- ))} -
-
- ); -}; - -export default BpkSCarousellidesIndicator; diff --git a/packages/bpk-component-carousel/src/__snapshots__/BpkCarousel-test.tsx.snap b/packages/bpk-component-carousel/src/__snapshots__/BpkCarousel-test.tsx.snap index 20681fe1ca..cb2f8c48d7 100644 --- a/packages/bpk-component-carousel/src/__snapshots__/BpkCarousel-test.tsx.snap +++ b/packages/bpk-component-carousel/src/__snapshots__/BpkCarousel-test.tsx.snap @@ -82,24 +82,46 @@ exports[`BpkCarousel should render correctly 1`] = ` class="bpk-carousel-slides-indicator" >
-
-
-
-
+ class="bpk-page-indicator__container" + > +
+
+
From dea5f21019e9b92318c0613bbec829e9b19bb157 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 13:13:06 +0000 Subject: [PATCH 009/174] ts import bpk-component-page-indicator supression --- packages/bpk-component-carousel/src/BpkCarousel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/bpk-component-carousel/src/BpkCarousel.tsx b/packages/bpk-component-carousel/src/BpkCarousel.tsx index 30abcecfee..cd6db38889 100644 --- a/packages/bpk-component-carousel/src/BpkCarousel.tsx +++ b/packages/bpk-component-carousel/src/BpkCarousel.tsx @@ -18,6 +18,7 @@ import { useRef, useState } from 'react'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkPageIndicator, { VARIANT } from '../../bpk-component-page-indicator'; import { cssModules } from '../../bpk-react-utils'; From c092d326c8a1abc059111b5b8b39cd805432f6eb Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 13:17:04 +0000 Subject: [PATCH 010/174] remove unused imports --- packages/bpk-component-carousel/src/BpkCarousel-test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/bpk-component-carousel/src/BpkCarousel-test.tsx b/packages/bpk-component-carousel/src/BpkCarousel-test.tsx index 3cc03888e1..b115a19585 100644 --- a/packages/bpk-component-carousel/src/BpkCarousel-test.tsx +++ b/packages/bpk-component-carousel/src/BpkCarousel-test.tsx @@ -1,6 +1,4 @@ -import { render, screen, getAllByRole } from '@testing-library/react'; -import { axe } from 'jest-axe'; -import userEvent from '@testing-library/user-event'; +import { render, screen } from '@testing-library/react'; import type { ReactNode } from 'react'; import BpkCarousel from './BpkCarousel'; From 8068214241715cdce7010c80c5265094405bef08 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 13:25:53 +0000 Subject: [PATCH 011/174] add license header --- .../src/BpkCarousel-test.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/bpk-component-carousel/src/BpkCarousel-test.tsx b/packages/bpk-component-carousel/src/BpkCarousel-test.tsx index b115a19585..33913589be 100644 --- a/packages/bpk-component-carousel/src/BpkCarousel-test.tsx +++ b/packages/bpk-component-carousel/src/BpkCarousel-test.tsx @@ -1,3 +1,21 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2022 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, screen } from '@testing-library/react'; import type { ReactNode } from 'react'; From c59f9f2c05ed5a1f48ee73c7a89f4bacbacb3d83 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 14:36:11 +0000 Subject: [PATCH 012/174] Update packages/bpk-component-carousel/README.md Co-authored-by: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> --- packages/bpk-component-carousel/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bpk-component-carousel/README.md b/packages/bpk-component-carousel/README.md index ea24cf4ed0..19270066d7 100644 --- a/packages/bpk-component-carousel/README.md +++ b/packages/bpk-component-carousel/README.md @@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp ## Usage ```tsx -import BpkBoilerplate from '@skyscanner/backpack-web/bpk-component-carousel'; +import BpkCarousel from '@skyscanner/backpack-web/bpk-component-carousel'; const imageChangeHandler = () => { console.log('Image Changed') From 324b380318b2cd0b18afc7881c20d21036f99439 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 14:40:03 +0000 Subject: [PATCH 013/174] visual test added --- examples/bpk-component-carousel/stories.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/examples/bpk-component-carousel/stories.js b/examples/bpk-component-carousel/stories.js index 10e2f0adbb..926aa2c2f0 100644 --- a/examples/bpk-component-carousel/stories.js +++ b/examples/bpk-component-carousel/stories.js @@ -27,3 +27,9 @@ export default { export const Default = DefaultExample; + +export const VisualTest = DefaultExample; +export const VisualTestWithZoom = VisualTest.bind({}); +VisualTestWithZoom.args = { + zoomEnabled: true +}; From d45bbafdb374a83211d182f938d55888c4b80822 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 16:10:30 +0000 Subject: [PATCH 014/174] remove mobile breakpoint on image --- .../src/BpkCarouselImage.module.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss b/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss index 7667f3a858..e240c2c4d4 100644 --- a/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss +++ b/packages/bpk-component-carousel/src/BpkCarouselImage.module.scss @@ -35,12 +35,6 @@ img { max-width: 100%; max-height: 100%; - border-radius: $bpk-border-radius-md; - object-fit: cover; - - @include bpk-breakpoint-mobile { - border-radius: 0; - object-fit: contain; - } + object-fit: contain; } } From 4c77737916bb8222db37069a4c7e4d83cab5fa39 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 3 Nov 2023 17:04:41 +0000 Subject: [PATCH 015/174] regen bpk carousel image css --- packages/bpk-component-carousel/src/BpkCarouselImage.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bpk-component-carousel/src/BpkCarouselImage.module.css b/packages/bpk-component-carousel/src/BpkCarouselImage.module.css index 6a447c3271..55ed294a11 100644 --- a/packages/bpk-component-carousel/src/BpkCarouselImage.module.css +++ b/packages/bpk-component-carousel/src/BpkCarouselImage.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-carousel-image{display:inline-flex;width:100%;min-width:0;height:100%;min-height:0;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}.bpk-carousel-image img{max-width:100%;max-height:100%;border-radius:.75rem;object-fit:cover}@media (max-width: 32rem){.bpk-carousel-image img{border-radius:0;object-fit:contain}} +@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-carousel-image{display:inline-flex;width:100%;min-width:0;height:100%;min-height:0;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}.bpk-carousel-image img{max-width:100%;max-height:100%;object-fit:contain} From b4e9732687dd83a438acd5a61a6d97d961748c7f Mon Sep 17 00:00:00 2001 From: Jaffer Naheem Date: Mon, 13 Nov 2023 10:19:49 +0000 Subject: [PATCH 016/174] =?UTF-8?q?ZOOT-705:=20=F0=9F=92=84=20Change=20dem?= =?UTF-8?q?o=20images?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/bpk-component-carousel/example.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/examples/bpk-component-carousel/example.js b/examples/bpk-component-carousel/example.js index 0483dc7172..21b14421f3 100644 --- a/examples/bpk-component-carousel/example.js +++ b/examples/bpk-component-carousel/example.js @@ -18,12 +18,14 @@ import BpkCarousel from '../../packages/bpk-component-carousel' -const DemoImages = () => ( - hotel bedroom -) - -const imagesList = [, , , , ] +const imageUrls = [ + "https://content.skyscnr.com/m/7470cf6a4ee49c26/original/Carousel-placeholder-4.jpg", + "https://content.skyscnr.com/m/183e7ddaaca13b16/original/Carousel-placeholder-2.jpg", + "https://content.skyscnr.com/m/f8b42e98e2b79a6/original/Carousel-placeholder-3.jpg", + "https://content.skyscnr.com/m/51c4c9dd04c8dc95/original/Carousel-placeholder-1.jpg" +] +const imagesList = imageUrls.map(url => hotel bedroom) const DefaultExample = () => ( From 4fe4ea21470b635acf34b9ea0ceb8778054edb0c Mon Sep 17 00:00:00 2001 From: Kathy Wang Date: Mon, 27 May 2024 15:34:49 +0800 Subject: [PATCH 017/174] Update bpk carousel --- packages/bpk-component-carousel/src/BpkCarousel.tsx | 9 +++++++-- packages/bpk-component-carousel/src/types.ts | 4 +++- packages/bpk-component-carousel/src/utils.tsx | 5 +++-- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/bpk-component-carousel/src/BpkCarousel.tsx b/packages/bpk-component-carousel/src/BpkCarousel.tsx index cd6db38889..ef14a95868 100644 --- a/packages/bpk-component-carousel/src/BpkCarousel.tsx +++ b/packages/bpk-component-carousel/src/BpkCarousel.tsx @@ -31,13 +31,15 @@ const getClassName = cssModules(STYLES); const BpkCarousel = ({ images, + indicatorClassName, + indicatorLabel = 'go to slide', initialImageIndex = 0, onImageChanged = null, }: Props) => { const [shownImageIndex, updateShownImageIndex] = useState(initialImageIndex); const imagesRef = useRef>([]); - useScrollToInitialImage(initialImageIndex, imagesRef); + useScrollToInitialImage(initialImageIndex!, imagesRef); return ( <> @@ -50,8 +52,11 @@ const BpkCarousel = ({ ); diff --git a/packages/bpk-component-carousel/src/types.ts b/packages/bpk-component-carousel/src/types.ts index 237082fc7f..c2408e546c 100644 --- a/packages/bpk-component-carousel/src/types.ts +++ b/packages/bpk-component-carousel/src/types.ts @@ -18,10 +18,12 @@ import type { ReactNode } from "react"; -export type OnImageChangedHandler = (() => void) | null | undefined; +export type OnImageChangedHandler = ((shownImageIndex: number) => void) | null | undefined; export type Props = { images: ReactNode[] initialImageIndex?: number; onImageChanged?: OnImageChangedHandler + indicatorLabel?: string; + indicatorClassName?: string; }; diff --git a/packages/bpk-component-carousel/src/utils.tsx b/packages/bpk-component-carousel/src/utils.tsx index 67bbfb80c5..7d6aa3096d 100644 --- a/packages/bpk-component-carousel/src/utils.tsx +++ b/packages/bpk-component-carousel/src/utils.tsx @@ -58,9 +58,10 @@ export function useIntersectionObserver( } const { index } = (shownEntry.target as HTMLElement).dataset; if (index) { - callbackRef.current(parseInt(index, 10)); + const currentIndex = parseInt(index, 10); + callbackRef.current(currentIndex); if (onImageChanged) { - onImageChanged() + onImageChanged(currentIndex) } } }, From 62b851393cb61ce2fcbad7a5619da6317db57e46 Mon Sep 17 00:00:00 2001 From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> Date: Thu, 14 Mar 2024 11:01:16 +0000 Subject: [PATCH 018/174] [NO JIRA][Github CI]: Update NPM cache generation logic (#3231) --- .github/workflows/_build.yml | 6 +++--- .github/workflows/main.yml | 8 ++++---- .github/workflows/pr.yml | 6 +++--- .github/workflows/release.yml | 16 ++++++++-------- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/.github/workflows/_build.yml b/.github/workflows/_build.yml index 234f366609..fc75d6866c 100644 --- a/.github/workflows/_build.yml +++ b/.github/workflows/_build.yml @@ -33,7 +33,7 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Build Backpack run: npm run build @@ -68,7 +68,7 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Restore Cache uses: actions/cache/restore@v4.0.1 @@ -105,7 +105,7 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Danger run: npm run danger diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 847f0a738f..183efcccdd 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -34,7 +34,7 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Install dependencies if: ${{ steps.npm-cache.outputs.cache-hit != 'true' }} @@ -58,7 +58,7 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Upload dist-storybook to Cache uses: actions/cache@v4.0.1 @@ -100,7 +100,7 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Restore Cache uses: actions/cache/restore@v4.0.1 @@ -137,7 +137,7 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Build Sass docs if: github.ref == 'refs/heads/main' diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 5dc078ad94..d14cb39539 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -34,7 +34,7 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Install dependencies if: ${{ steps.npm-cache.outputs.cache-hit != 'true' }} @@ -58,7 +58,7 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Upload dist-storybook to Cache uses: actions/cache@v4.0.1 @@ -101,7 +101,7 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Restore Cache uses: actions/cache/restore@v4.0.1 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 792a0909c8..1d78251a6d 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -8,7 +8,7 @@ defaults: run: shell: bash -l {0} -env: +env: CACHE_NAME: node-modules-cache BUILD_CACHE_NAME: build-cache @@ -30,7 +30,7 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Install dependencies if: ${{ steps.npm-cache.outputs.cache-hit != 'true' }} @@ -54,8 +54,8 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} - + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} + - name: Upload dist-storybook to Cache uses: actions/cache@v4.0.1 id: storybook-dist-cache @@ -63,7 +63,7 @@ jobs: path: | dist-storybook/ key: ${{ env.BUILD_CACHE_NAME }}-${{ hashFiles('packages/**', 'examples/**') }} - + - name: Create build cache if: ${{ steps.storybook-dist-cache.outputs.cache-hit != 'true' }} run: | @@ -87,7 +87,7 @@ jobs: uses: actions/checkout@v4 with: ref: main - + - uses: actions/setup-node@v4 with: node-version-file: ".nvmrc" @@ -100,8 +100,8 @@ jobs: path: | node_modules/ packages/node_modules/ - key: ${{ env.CACHE_NAME }}-${{ hashFiles('**/package-lock.json') }} - + key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} + - run: npm run transpile - name: Publish NPM package From a4a94c82396f079fcb2edbdf663bdc5f8bcbead9 Mon Sep 17 00:00:00 2001 From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> Date: Thu, 14 Mar 2024 11:16:03 +0000 Subject: [PATCH 019/174] [BpkInput]: Updating input HoC for keyboard events (#3194) [BpkInput]: Updating input HoC for keyboard events (#3194) * Updating datepicker to not open when focusing by default * Change type to be generic due to issues * Update to add prop back to example for visual testing * Updating types and adding supression comment --------- Co-authored-by: Simon Ward --- .../src/withOpenEvents.tsx | 30 ++++++++----------- 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/packages/bpk-component-input/src/withOpenEvents.tsx b/packages/bpk-component-input/src/withOpenEvents.tsx index 2ec0c2bcad..6366c0ba19 100644 --- a/packages/bpk-component-input/src/withOpenEvents.tsx +++ b/packages/bpk-component-input/src/withOpenEvents.tsx @@ -31,8 +31,8 @@ import STYLES from './BpkInput.module.scss'; const getClassName = cssModules(STYLES); const KEYCODES = { - ENTER: 13, - SPACEBAR: 32, + ENTER: 'Enter', + SPACEBAR: 'Space', } as const; export type WithOpenEventsProps = { @@ -67,15 +67,14 @@ type EventHandlers = { type InputProps = ComponentProps<'input'> & Omit; -const handleKeyEvent = - (keyCode: number, callback?: () => void) => (e: UIEvent) => { - if (e instanceof KeyboardEvent && e.keyCode === keyCode) { - e.preventDefault(); - if (callback) { - callback(); - } +const handleKeyEvent = (callback?: () => void) => (e: KeyboardEvent) => { + if (e.code === KEYCODES.ENTER || e.code === KEYCODES.SPACEBAR) { + e.preventDefault(); + if (callback) { + callback(); } - }; + } +}; const withEventHandler = (fn?: (e: UIEvent) => void, eventHandler?: (e: UIEvent) => void) => @@ -168,14 +167,9 @@ const withOpenEvents =

(InputComponent: ComponentType

) => { const eventHandlers: EventHandlers = { onClick: withEventHandler(onOpen, onClick), - onKeyDown: withEventHandler( - handleKeyEvent(KEYCODES.ENTER, onOpen), - onKeyDown, - ), - onKeyUp: withEventHandler( - handleKeyEvent(KEYCODES.SPACEBAR, onOpen), - onKeyUp, - ), + // @ts-expect-error for some reason the type KeyboardEvent was not being recognized as + // a valid type to UIEvent even though it is a valid subtype type of UIEvent + onKeyDown: withEventHandler(handleKeyEvent(onOpen), onKeyDown), }; if (hasTouchSupport) { From 9f9a91495d53813bc4dd97330ffce6295b8f0327 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 15 Mar 2024 14:32:46 +0000 Subject: [PATCH 020/174] [BpkMobileScrollContainer] Add aria label (#3281) * add optional aria label * set aria label to default null --------- Co-authored-by: Ricci Mwangela --- .../src/BpkMobileScrollContainer-test.js | 22 +++++++++++ .../src/BpkMobileScrollContainer.js | 6 ++- .../BpkMobileScrollContainer-test.js.snap | 39 +++++++++++++++++++ 3 files changed, 66 insertions(+), 1 deletion(-) diff --git a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer-test.js b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer-test.js index 131cf42b5f..ee18ab3723 100644 --- a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer-test.js +++ b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer-test.js @@ -91,6 +91,28 @@ describe('BpkMobileScrollContainer', () => { expect(asFragment()).toMatchSnapshot(); }); + it('should render correctly with ariaLabel prop', () => { + const { asFragment } = render( + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus. + , + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with ariaLabel prop set to null', () => { + const { asFragment } = render( + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus. + , + ); + expect(asFragment()).toMatchSnapshot(); + }); + describe('functions', () => { describe('computeScrollIndicatorClassName', () => { it('returns null if `scrollerEl is null', () => { diff --git a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js index 05a302a6d6..2206148049 100644 --- a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +++ b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js @@ -97,17 +97,19 @@ type State = { }; const propTypes = { + ariaLabel: PropTypes.string, children: PropTypes.node.isRequired, scrollerRef: PropTypes.func, innerContainerTagName: PropTypes.string, className: PropTypes.string, leadingIndicatorClassName: PropTypes.string, trailingIndicatorClassName: PropTypes.string, - style: PropTypes.object, + style: PropTypes.object, showScrollbar: PropTypes.bool, }; const defaultProps = { + ariaLabel: null, scrollerRef: null, innerContainerTagName: 'div', className: null, @@ -181,6 +183,7 @@ class BpkMobileScrollContainer extends Component { render() { const classNames = [getClassName('bpk-mobile-scroll-container')]; const { + ariaLabel, children, className, innerContainerTagName, @@ -223,6 +226,7 @@ class BpkMobileScrollContainer extends Component { className={scrollerClassNames} > { this.innerEl = el; }} diff --git a/packages/bpk-component-mobile-scroll-container/src/__snapshots__/BpkMobileScrollContainer-test.js.snap b/packages/bpk-component-mobile-scroll-container/src/__snapshots__/BpkMobileScrollContainer-test.js.snap index 64a9e23295..0b5ccc6c57 100644 --- a/packages/bpk-component-mobile-scroll-container/src/__snapshots__/BpkMobileScrollContainer-test.js.snap +++ b/packages/bpk-component-mobile-scroll-container/src/__snapshots__/BpkMobileScrollContainer-test.js.snap @@ -75,3 +75,42 @@ exports[`BpkMobileScrollContainer should render correctly with a custom "style"

`; + +exports[`BpkMobileScrollContainer should render correctly with ariaLabel prop 1`] = ` + +
+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +
+
+
+ +`; + +exports[`BpkMobileScrollContainer should render correctly with ariaLabel prop set to null 1`] = ` + +
+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +
+
+
+ +`; From 5779638e0d5d7ed2484dc23a7f6f7363707c4982 Mon Sep 17 00:00:00 2001 From: Ricci Mwangela <44826402+R1CC1M@users.noreply.github.com> Date: Fri, 15 Mar 2024 15:02:00 +0000 Subject: [PATCH 021/174] [BpkHorizontalNav] Add aria label (#3279) * add aria label * update snapshots * aria label optional * correct jsx aria syntax * test render without aria label * default aria label to null * fix prop typo * add prop null test * update snapshot --------- Co-authored-by: Ricci Mwangela Co-authored-by: Simon Ward --- .../src/BpkHorizontalNav-test.js | 19 +++++++ .../src/BpkHorizontalNav.js | 7 ++- .../BpkHorizontalNav-test.js.snap | 50 +++++++++++++++++++ .../src/accessibility-test.js | 2 +- 4 files changed, 76 insertions(+), 2 deletions(-) diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav-test.js b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav-test.js index 202c2ada31..6c9def8db5 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav-test.js +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav-test.js @@ -80,10 +80,29 @@ describe('BpkHorizontalNav', () => { My nav content. , ); expect(asFragment()).toMatchSnapshot(); }); + + it('should render correctly with "ariaLabel" prop', () => { + const { asFragment } = render( + + My nav content. + + ) + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render correctly with "ariaLabel" prop set to null', () => { + const { asFragment } = render( + + My nav content. + + ) + expect(asFragment()).toMatchSnapshot(); + }); }); diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js index 8dc198f70a..d8188057ed 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js @@ -34,6 +34,7 @@ const HORIZONTAL_NAV_TYPES = { }; export type Props = { + ariaLabel: string, autoScrollToSelected: boolean, children: Node, showUnderline: boolean, @@ -122,6 +123,7 @@ class BpkHorizontalNav extends Component { render() { const { + ariaLabel, autoScrollToSelected, children: rawChildren, className, @@ -165,6 +167,7 @@ class BpkHorizontalNav extends Component { return ( // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. { } BpkHorizontalNav.propTypes = { + ariaLabel: PropTypes.string, children: PropTypes.node.isRequired, /** * Ensures that the selected item is within view when loaded on narrow-screened devices. @@ -194,7 +198,7 @@ BpkHorizontalNav.propTypes = { className: PropTypes.string, leadingScrollIndicatorClassName: PropTypes.string, /** - * When set to "false", the bottom border on the component isn't included. This refers + * When set to "false", the bottom border on the component isn't included. This refers * to the underline on the whole "BpkHorizontalNav", not the line that appears under the selected item. */ showUnderline: PropTypes.bool, @@ -203,6 +207,7 @@ BpkHorizontalNav.propTypes = { } BpkHorizontalNav.defaultProps = { + ariaLabel: null, autoScrollToSelected: false, className: null, leadingScrollIndicatorClassName: null, diff --git a/packages/bpk-component-horizontal-nav/src/__snapshots__/BpkHorizontalNav-test.js.snap b/packages/bpk-component-horizontal-nav/src/__snapshots__/BpkHorizontalNav-test.js.snap index 5c8458124c..c02dece8b1 100644 --- a/packages/bpk-component-horizontal-nav/src/__snapshots__/BpkHorizontalNav-test.js.snap +++ b/packages/bpk-component-horizontal-nav/src/__snapshots__/BpkHorizontalNav-test.js.snap @@ -24,6 +24,55 @@ exports[`BpkHorizontalNav should render correctly 1`] = ` `; +exports[`BpkHorizontalNav should render correctly with "ariaLabel" prop 1`] = ` + +
+
+ +
+
+ +`; + +exports[`BpkHorizontalNav should render correctly with "ariaLabel" prop set to null 1`] = ` + +
+
+ +
+
+ +`; + exports[`BpkHorizontalNav should render correctly with "showUnderline" set to false 1`] = `
diff --git a/packages/bpk-component-banner-alert/src/__snapshots__/withBannerAlertState-test.tsx.snap b/packages/bpk-component-banner-alert/src/__snapshots__/withBannerAlertState-test.tsx.snap index 3b3ecb568a..ba0a008c16 100644 --- a/packages/bpk-component-banner-alert/src/__snapshots__/withBannerAlertState-test.tsx.snap +++ b/packages/bpk-component-banner-alert/src/__snapshots__/withBannerAlertState-test.tsx.snap @@ -47,17 +47,20 @@ exports[`withBannerAlertState(BpkBannerAlertDismissable) should render correctly title="Dismiss" type="button" > - + +
diff --git a/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap b/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap index c867e1bb1e..942e60d47e 100644 --- a/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap +++ b/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap @@ -31,17 +31,20 @@ exports[`BpkBottomSheet renders correctly with action props 1`] = ` title="" type="button" > - + +
- + +
- + +
{ className={classNames.join(' ')} {...rest} > - + + + ); }; diff --git a/packages/bpk-component-close-button/src/BpkCloseButton.module.scss b/packages/bpk-component-close-button/src/BpkCloseButton.module.scss index 15d387ae40..4f9e14186c 100644 --- a/packages/bpk-component-close-button/src/BpkCloseButton.module.scss +++ b/packages/bpk-component-close-button/src/BpkCloseButton.module.scss @@ -47,7 +47,7 @@ $button-padding: tokens.bpk-spacing-sm() * 0.5; } &__icon { - vertical-align: -1 * $button-padding; + vertical-align: -1.75 * $button-padding; fill: currentcolor; } } diff --git a/packages/bpk-component-close-button/src/__snapshots__/BpkCloseButton-test.js.snap b/packages/bpk-component-close-button/src/__snapshots__/BpkCloseButton-test.js.snap index 42cf5cae64..bbd0191d12 100644 --- a/packages/bpk-component-close-button/src/__snapshots__/BpkCloseButton-test.js.snap +++ b/packages/bpk-component-close-button/src/__snapshots__/BpkCloseButton-test.js.snap @@ -8,17 +8,20 @@ exports[`BpkCloseButton should render correctly 1`] = ` title="Close" type="button" > - + + `; @@ -31,17 +34,20 @@ exports[`BpkCloseButton should render correctly with a custom className 1`] = ` title="Close" type="button" > - + + `; @@ -54,17 +60,20 @@ exports[`BpkCloseButton should render correctly with a custom icon 1`] = ` title="Close" type="button" > - + + `; diff --git a/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap b/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap index 15f58b72b7..2917e7e61a 100644 --- a/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap +++ b/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap @@ -32,17 +32,20 @@ exports[`BpkDialog should render correctly in the given target if renderTarget i title="Close" type="button" > - + + Dialog content inside a custom target
@@ -306,17 +309,20 @@ exports[`BpkDialog should render with flare dialog 2`] = ` title="" type="button" > - + + Dialog content inside a custom target
@@ -398,17 +404,20 @@ exports[`BpkDialog should render with flare dialog with flareClassName 2`] = ` title="" type="button" > - + + Dialog content inside a custom target
diff --git a/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap b/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap index a617164bc5..d2eaf14c9e 100644 --- a/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap +++ b/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap @@ -39,17 +39,20 @@ exports[`BpkDrawer should render correctly in the given target if renderTarget i title="Close" type="button" > - + +
- + +
- + +
- + +
- + +
- + +
- + +
diff --git a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerInner-test.tsx.snap b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerInner-test.tsx.snap index 9b6e7d42a0..0c3580cc52 100644 --- a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerInner-test.tsx.snap +++ b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerInner-test.tsx.snap @@ -596,17 +596,20 @@ exports[`BpkInfoBannerInner should render correctly with animateOnLeave 1`] = ` title="Dismiss" type="button" > - + +
@@ -819,17 +822,20 @@ exports[`BpkInfoBannerInner should render correctly with dismissable option 1`] title="Dismiss" type="button" > - + +
diff --git a/packages/bpk-component-info-banner/src/__snapshots__/withBannerAlertState-test.tsx.snap b/packages/bpk-component-info-banner/src/__snapshots__/withBannerAlertState-test.tsx.snap index 34435f2b2b..31e8f78ead 100644 --- a/packages/bpk-component-info-banner/src/__snapshots__/withBannerAlertState-test.tsx.snap +++ b/packages/bpk-component-info-banner/src/__snapshots__/withBannerAlertState-test.tsx.snap @@ -47,17 +47,20 @@ exports[`withBannerAlertState(BpkInfoBannerDismissable) should render correctly title="Dismiss" type="button" > - + +
diff --git a/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap b/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap index 4f4f472ec5..804c5b604c 100644 --- a/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap +++ b/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap @@ -25,17 +25,20 @@ exports[`BpkModalV2 is not supported should render correctly with polyfill and c title="bpk-modal-button-close" type="button" > - + +
- + +
- + +
diff --git a/packages/bpk-component-modal/src/__snapshots__/BpkModalInner-test.tsx.snap b/packages/bpk-component-modal/src/__snapshots__/BpkModalInner-test.tsx.snap index 00c838ac34..f2e99f53cc 100644 --- a/packages/bpk-component-modal/src/__snapshots__/BpkModalInner-test.tsx.snap +++ b/packages/bpk-component-modal/src/__snapshots__/BpkModalInner-test.tsx.snap @@ -31,17 +31,20 @@ exports[`BpkModalInner should render correctly 1`] = ` title="Close" type="button" > - + +
@@ -86,17 +89,20 @@ exports[`BpkModalInner should render correctly when is iPhone 1`] = ` title="Close" type="button" > - + + @@ -141,17 +147,20 @@ exports[`BpkModalInner should render correctly when it does not fills the screen title="Close" type="button" > - + + @@ -196,17 +205,20 @@ exports[`BpkModalInner should render correctly when it has a className 1`] = ` title="Close" type="button" > - + + @@ -251,17 +263,20 @@ exports[`BpkModalInner should render correctly when it is fullscreen 1`] = ` title="Close" type="button" > - + + @@ -306,17 +321,20 @@ exports[`BpkModalInner should render correctly with a custom content classname 1 title="Close" type="button" > - + + @@ -378,17 +396,20 @@ exports[`BpkModalInner should render correctly with an accessory view 1`] = ` title="Close" type="button" > - + + @@ -476,17 +497,20 @@ exports[`BpkModalInner should render correctly with no padding 1`] = ` title="Close" type="button" > - + + @@ -531,17 +555,20 @@ exports[`BpkModalInner should render correctly with wide prop 1`] = ` title="Close" type="button" > - + + diff --git a/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBar-test.tsx.snap b/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBar-test.tsx.snap index a4116a6c10..3328eaf22c 100644 --- a/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBar-test.tsx.snap +++ b/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBar-test.tsx.snap @@ -49,7 +49,9 @@ exports[`BpkNavigationBar should render correctly with a "leadingButton" attribu > + > + + + > + + @@ -112,7 +116,9 @@ exports[`BpkNavigationBar should render correctly with an element for the title > + > + + diff --git a/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBarIconButton-test.tsx.snap b/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBarIconButton-test.tsx.snap index b2943231b3..f9c83a6a26 100644 --- a/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBarIconButton-test.tsx.snap +++ b/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBarIconButton-test.tsx.snap @@ -10,7 +10,9 @@ exports[`BpkNavigationIconButton should render correctly 1`] = ` > + > + + `; diff --git a/packages/bpk-component-popover/src/__snapshots__/BpkPopover-test.js.snap b/packages/bpk-component-popover/src/__snapshots__/BpkPopover-test.js.snap index 121b5394ec..02bc282dd3 100644 --- a/packages/bpk-component-popover/src/__snapshots__/BpkPopover-test.js.snap +++ b/packages/bpk-component-popover/src/__snapshots__/BpkPopover-test.js.snap @@ -152,17 +152,20 @@ exports[`BpkPopover should render correctly with "labelAsTitle" attribute 1`] = title="Close" type="button" > - + +
Date: Tue, 19 Mar 2024 16:59:46 +0000 Subject: [PATCH 026/174] Bump @percy/cli from 1.27.7 to 1.28.2 (#3291) Bumps [@percy/cli](https://github.com/percy/cli/tree/HEAD/packages/cli) from 1.27.7 to 1.28.2. - [Release notes](https://github.com/percy/cli/releases) - [Commits](https://github.com/percy/cli/commits/v1.28.2/packages/cli) --- updated-dependencies: - dependency-name: "@percy/cli" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 158 +++++++++++++++++++++++----------------------- package.json | 2 +- 2 files changed, 80 insertions(+), 80 deletions(-) diff --git a/package-lock.json b/package-lock.json index b5051304dc..ffacd13a10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.23.3", "@babel/register": "^7.23.7", - "@percy/cli": "^1.27.7", + "@percy/cli": "^1.28.2", "@percy/storybook": "^5.0.1", "@skyscanner/bpk-foundations-web": "^17.9.0", "@skyscanner/bpk-svgs": "^19.1.0", @@ -3505,20 +3505,20 @@ } }, "node_modules/@percy/cli": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.27.7.tgz", - "integrity": "sha512-FKt032Of8IhzA/ZLGAWgox5y5N534lTXW+W6AEeeMPHDm06eHCPgbMuMjajuhD0nGFRtSO6rJIPw+gFzIgJU7g==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/cli/-/cli-1.28.2.tgz", + "integrity": "sha512-hwibBu6zsjfWXIe8WFgrKizGjxkTzYcGQ4eOPcMQXfgK3yUZ24N5v8sqCOobRA/SbdD117zp2WUEkBRWCJ85gg==", "dev": true, "dependencies": { - "@percy/cli-app": "1.27.7", - "@percy/cli-build": "1.27.7", - "@percy/cli-command": "1.27.7", - "@percy/cli-config": "1.27.7", - "@percy/cli-exec": "1.27.7", - "@percy/cli-snapshot": "1.27.7", - "@percy/cli-upload": "1.27.7", - "@percy/client": "1.27.7", - "@percy/logger": "1.27.7" + "@percy/cli-app": "1.28.2", + "@percy/cli-build": "1.28.2", + "@percy/cli-command": "1.28.2", + "@percy/cli-config": "1.28.2", + "@percy/cli-exec": "1.28.2", + "@percy/cli-snapshot": "1.28.2", + "@percy/cli-upload": "1.28.2", + "@percy/client": "1.28.2", + "@percy/logger": "1.28.2" }, "bin": { "percy": "bin/run.cjs" @@ -3528,39 +3528,39 @@ } }, "node_modules/@percy/cli-app": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/cli-app/-/cli-app-1.27.7.tgz", - "integrity": "sha512-IQuTC5X5JM65cqOluFM9lnydkw3hvkUdf6LTsBRtzmS7/qURyiBDvuxkKt37XUCfXm2XFP8J6B6ADBQL4YShPA==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/cli-app/-/cli-app-1.28.2.tgz", + "integrity": "sha512-UhuxmBRcgeyBnzV7ixiSqUlMdcBg7LyrTtDJWEjQ36SH0jJOAVu020cGcPLNDDTmqXDU7DsDoNifxtPzXT+d5w==", "dev": true, "dependencies": { - "@percy/cli-command": "1.27.7", - "@percy/cli-exec": "1.27.7" + "@percy/cli-command": "1.28.2", + "@percy/cli-exec": "1.28.2" }, "engines": { "node": ">=14" } }, "node_modules/@percy/cli-build": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.27.7.tgz", - "integrity": "sha512-UmWaUFQAomlL4GpU/KPTq3hmJtXCMWQELwDnaQ1vnUf2rk17qSy5keSvCb/Ta8oPuObuRNoOHGrtUFPh1b7l2g==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/cli-build/-/cli-build-1.28.2.tgz", + "integrity": "sha512-VWfrgcOaN6rxSCwifQ5aJuGQDU2Nmq3lvvqZsVVSj3lBbE4KsEaxyoH2Hmm2pCOXi1DzOQ0+zHv+Ra+m4CyBvA==", "dev": true, "dependencies": { - "@percy/cli-command": "1.27.7" + "@percy/cli-command": "1.28.2" }, "engines": { "node": ">=14" } }, "node_modules/@percy/cli-command": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.27.7.tgz", - "integrity": "sha512-nVHspbcTStwZOVYmcCowcFJsOLLJrhLfJbj2Rkvm3upf/E98x4+S9H+Tq9K4XcgznjFfLLRAHkkVFGnCdbO5qQ==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/cli-command/-/cli-command-1.28.2.tgz", + "integrity": "sha512-UUa+dSpzTcXVjzvElL4wD315QYDuGrbnXObgaztyGWdufEbvLWflU4AiQZrxC5abDXQdNWQUAAizorA5dGhaCg==", "dev": true, "dependencies": { - "@percy/config": "1.27.7", - "@percy/core": "1.27.7", - "@percy/logger": "1.27.7" + "@percy/config": "1.28.2", + "@percy/core": "1.28.2", + "@percy/logger": "1.28.2" }, "bin": { "percy-cli-readme": "bin/readme.js" @@ -3570,24 +3570,24 @@ } }, "node_modules/@percy/cli-config": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.27.7.tgz", - "integrity": "sha512-SppI7w9xQAUk4nCqXq0KE3HoKZ+IwgkJ6biAQuzv3BJ8GWz42hUGnH1fLEoK92MZMLiOHByiEFUoBzUKXPscZw==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/cli-config/-/cli-config-1.28.2.tgz", + "integrity": "sha512-O1O2n16jOm6HCzGM207/NbX+IR7ezUaQGnExi4G5SbOYqZeBIrsKpbEi/SERBfg4Kexv16LrF6NLOs75N2oaSw==", "dev": true, "dependencies": { - "@percy/cli-command": "1.27.7" + "@percy/cli-command": "1.28.2" }, "engines": { "node": ">=14" } }, "node_modules/@percy/cli-exec": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.27.7.tgz", - "integrity": "sha512-ZYSuQYu7hMbl/KbGwS/bEdAEXEY7MygheCJrmM43AGUIj8LSHnVTi09/z7ZpcStLibPmsraJ8Cm7GXhTNdhuAQ==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/cli-exec/-/cli-exec-1.28.2.tgz", + "integrity": "sha512-tRvmoDJMb94XjA60a0lmN2XphzC/r70ruic+VfhFwEqDVoLY/6LxqjSXjehiSD5huXYDyPtaMeJo7oU1FxJyZg==", "dev": true, "dependencies": { - "@percy/cli-command": "1.27.7", + "@percy/cli-command": "1.28.2", "cross-spawn": "^7.0.3", "which": "^2.0.2" }, @@ -3596,12 +3596,12 @@ } }, "node_modules/@percy/cli-snapshot": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.27.7.tgz", - "integrity": "sha512-FGmNhXfOvW2RkcdEzeWWXo2fUp8UoRIb8bT0Bg6xcw5UGPUAoDVaFA8i4M5Qvi/K54Ed5VYfBX3y5sLcg2XRaw==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/cli-snapshot/-/cli-snapshot-1.28.2.tgz", + "integrity": "sha512-Qda4MKjKxoM/TEBjl54lCXMJAmQB6ZZheE96pJzEJzlPQtlj9r/moM3etCV+res0qaSOgx9BL0DncruvAwM/4g==", "dev": true, "dependencies": { - "@percy/cli-command": "1.27.7", + "@percy/cli-command": "1.28.2", "yaml": "^2.0.0" }, "engines": { @@ -3609,12 +3609,12 @@ } }, "node_modules/@percy/cli-upload": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.27.7.tgz", - "integrity": "sha512-kC9wfZ6TBnOTlB2ge32IlEQlxGh+fLXUIlmelCXCTDL6zutn8mI117XOHaJDtsI7qtovM0cTBxoSySaBY4XNqg==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/cli-upload/-/cli-upload-1.28.2.tgz", + "integrity": "sha512-vzH4wRdAFGvktNlh57p4s9Qq+rT0MsiQ/kh7pDvzQ1lJ6glpCBXSiiahMtkR8AP8gMMzxYONAuV/htB/t8sFUw==", "dev": true, "dependencies": { - "@percy/cli-command": "1.27.7", + "@percy/cli-command": "1.28.2", "fast-glob": "^3.2.11", "image-size": "^1.0.0" }, @@ -3623,25 +3623,25 @@ } }, "node_modules/@percy/client": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.27.7.tgz", - "integrity": "sha512-pMaimVhfJEWyta40PyanH/Sv8mp+CBeO4HuJ72zadDrJVAwNNBfaNE8OzT298y8u/DrMz/AlNSA6OhVojDVAuQ==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/client/-/client-1.28.2.tgz", + "integrity": "sha512-UoQ4WY8zJhwv/7vKJS+1vbeu/T7YckSmOp/moCoAnHY6QOIXYs7EGkNyeEw5iXoQYzMw6KkkLYPC7YC0rt5pSg==", "dev": true, "dependencies": { - "@percy/env": "1.27.7", - "@percy/logger": "1.27.7" + "@percy/env": "1.28.2", + "@percy/logger": "1.28.2" }, "engines": { "node": ">=14" } }, "node_modules/@percy/config": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.27.7.tgz", - "integrity": "sha512-7XbnrVWgvMgYAIngyWt0nd/l5lQiioOzIkqm9iH+nbfH/ka9pE8U/AWsCuiWGz2Z/1p03gBDFc01cyM+ORjglQ==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/config/-/config-1.28.2.tgz", + "integrity": "sha512-Q9NoenDuhRiY+eBGrw8FJmmU8hErTsjBxccUOvrfn0A4JXRvcFHitvrh85rXG/HhyT4bcoB9O93QhV6F9KTq7A==", "dev": true, "dependencies": { - "@percy/logger": "1.27.7", + "@percy/logger": "1.28.2", "ajv": "^8.6.2", "cosmiconfig": "^8.0.0", "yaml": "^2.0.0" @@ -3651,17 +3651,17 @@ } }, "node_modules/@percy/core": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.27.7.tgz", - "integrity": "sha512-lwweKGLbjsCWcAvaeHSK47IkaioBPKKjKd8fhhXFfv713aNL5CcokO9uUNMyBwrgqLY8jmPR/McMtROidUSowQ==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/core/-/core-1.28.2.tgz", + "integrity": "sha512-7JkZrsLoHDD2bkhN4u5T/+0sC0UT73Lv1qF3lIMLu+Qjt1BhyKdnitbOnjFlrVOwqC5uNgr7/gvcULLVbJga8Q==", "dev": true, "hasInstallScript": true, "dependencies": { - "@percy/client": "1.27.7", - "@percy/config": "1.27.7", - "@percy/dom": "1.27.7", - "@percy/logger": "1.27.7", - "@percy/webdriver-utils": "1.27.7", + "@percy/client": "1.28.2", + "@percy/config": "1.28.2", + "@percy/dom": "1.28.2", + "@percy/logger": "1.28.2", + "@percy/webdriver-utils": "1.28.2", "content-disposition": "^0.5.4", "cross-spawn": "^7.0.3", "extract-zip": "^2.0.1", @@ -3677,36 +3677,36 @@ } }, "node_modules/@percy/dom": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.27.7.tgz", - "integrity": "sha512-FLMaAp7LByGFqvTEV1UwiQd+Ww1SHU2UuGOvgMPBwPgAKt2BB+FfZEYgaeORt5YXLfDJsIVk/lfvhJXzmb5k8Q==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/dom/-/dom-1.28.2.tgz", + "integrity": "sha512-bUU38EMowO+y+pnLzl0naikv0pVQvcrkrBm7K7eVGUt6orRTqr5Tr8bMV7Ooac4mlMwaZvCkAH7gPhiDAONUmw==", "dev": true }, "node_modules/@percy/env": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.27.7.tgz", - "integrity": "sha512-TWgcxmRrcxwObc+kXfoh2eAywmB+6OGm9jxmf6wgdTf49zF70iS8mG6mJ7+r+PLz4MEmRCUTJ2S5I83iU6rLeQ==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/env/-/env-1.28.2.tgz", + "integrity": "sha512-40UhiL5MylFN39pzzoyDKgult2ZmSbuc3ADrNGBx9zyMdFEoTLZg5BcFZoSUHHjPboe2jYZFYrRqoXxix++OfA==", "dev": true, "dependencies": { - "@percy/logger": "1.27.7" + "@percy/logger": "1.28.2" }, "engines": { "node": ">=14" } }, "node_modules/@percy/logger": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.27.7.tgz", - "integrity": "sha512-w+r9tJPEUSflCPVajx15yfFtdaxjiqiWIu6i4sHKGwg0B24ivVb+6e1J5R2ry19F/YPjBi6llz5BRB9vasu+Iw==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/logger/-/logger-1.28.2.tgz", + "integrity": "sha512-ZF1iDjY9oBL+4WEqGuJ4JJaUdyUqGhdJtS+qDV8iqrQ6VngWBpO3lg0Uhy8RIkqUSLGKbwVbnxkfvA5kXx+yAw==", "dev": true, "engines": { "node": ">=14" } }, "node_modules/@percy/sdk-utils": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/sdk-utils/-/sdk-utils-1.27.7.tgz", - "integrity": "sha512-E21dIEQ9wwGDno41FdMDYf6jJow5scbWGClqKE/ptB+950W4UF5C4hxhVVQoEJxDdLE/Gy/8ZJR7upvPHShWDg==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/sdk-utils/-/sdk-utils-1.28.2.tgz", + "integrity": "sha512-cMFz8AjZ2KunN0dVwzA+Wosk4B+6G9dUkh2YPhYvqs0KLcCyYs3s91IzOQmtBOYwAUVja/W/u6XmBHw0jaxg0A==", "dev": true, "engines": { "node": ">=14" @@ -3727,13 +3727,13 @@ } }, "node_modules/@percy/webdriver-utils": { - "version": "1.27.7", - "resolved": "https://registry.npmjs.org/@percy/webdriver-utils/-/webdriver-utils-1.27.7.tgz", - "integrity": "sha512-8nAQJOhphTsaTAqKfcDC/MDf/yJvJ0Hf8Owc90pisXakooEMNnAW4HzQlZIh4kyJQbw4iX9OFl6gVl+POTWhHQ==", + "version": "1.28.2", + "resolved": "https://registry.npmjs.org/@percy/webdriver-utils/-/webdriver-utils-1.28.2.tgz", + "integrity": "sha512-bD0UoR1/69xcsL2mhvZ4xQKhWJYbqUJUFMiNr8xqR55Z4dArbeN9S2ZYU6aMVRemuKyn7ki0ttNFHq0z2GFvGg==", "dev": true, "dependencies": { - "@percy/config": "1.27.7", - "@percy/sdk-utils": "1.27.7" + "@percy/config": "1.28.2", + "@percy/sdk-utils": "1.28.2" }, "engines": { "node": ">=14" diff --git a/package.json b/package.json index 52a8485775..97f711de6a 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.23.3", "@babel/register": "^7.23.7", - "@percy/cli": "^1.27.7", + "@percy/cli": "^1.28.2", "@percy/storybook": "^5.0.1", "@skyscanner/bpk-foundations-web": "^17.9.0", "@skyscanner/bpk-svgs": "^19.1.0", From 82121da3f93caec115cef78f6aa434425f95e0cd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 22 Mar 2024 09:27:24 +0000 Subject: [PATCH 027/174] Bump @babel/core from 7.23.9 to 7.24.0 (#3286) Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.23.9 to 7.24.0. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.0/packages/babel-core) --- updated-dependencies: - dependency-name: "@babel/core" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 62 +++++++++++++++++++++++------------------------ package.json | 2 +- 2 files changed, 32 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index ffacd13a10..bb579197d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "Apache-2.0", "devDependencies": { "@babel/cli": "^7.23.9", - "@babel/core": "^7.23.9", + "@babel/core": "^7.24.0", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.2", "@babel/plugin-proposal-private-methods": "^7.17.12", @@ -199,9 +199,9 @@ } }, "node_modules/@babel/core": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz", - "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz", + "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==", "dev": true, "dependencies": { "@ampproject/remapping": "^2.2.0", @@ -209,11 +209,11 @@ "@babel/generator": "^7.23.6", "@babel/helper-compilation-targets": "^7.23.6", "@babel/helper-module-transforms": "^7.23.3", - "@babel/helpers": "^7.23.9", - "@babel/parser": "^7.23.9", - "@babel/template": "^7.23.9", - "@babel/traverse": "^7.23.9", - "@babel/types": "^7.23.9", + "@babel/helpers": "^7.24.0", + "@babel/parser": "^7.24.0", + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.0", + "@babel/types": "^7.24.0", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -565,14 +565,14 @@ } }, "node_modules/@babel/helpers": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz", - "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz", + "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==", "dev": true, "dependencies": { - "@babel/template": "^7.23.9", - "@babel/traverse": "^7.23.9", - "@babel/types": "^7.23.9" + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.0", + "@babel/types": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -593,9 +593,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz", - "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz", + "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -2069,23 +2069,23 @@ } }, "node_modules/@babel/template": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz", - "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz", + "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==", "dev": true, "dependencies": { "@babel/code-frame": "^7.23.5", - "@babel/parser": "^7.23.9", - "@babel/types": "^7.23.9" + "@babel/parser": "^7.24.0", + "@babel/types": "^7.24.0" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz", - "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz", + "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==", "dev": true, "dependencies": { "@babel/code-frame": "^7.23.5", @@ -2094,8 +2094,8 @@ "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.23.9", - "@babel/types": "^7.23.9", + "@babel/parser": "^7.24.0", + "@babel/types": "^7.24.0", "debug": "^4.3.1", "globals": "^11.1.0" }, @@ -2104,9 +2104,9 @@ } }, "node_modules/@babel/types": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz", - "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz", + "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==", "dev": true, "dependencies": { "@babel/helper-string-parser": "^7.23.4", diff --git a/package.json b/package.json index 97f711de6a..708bf6ad87 100644 --- a/package.json +++ b/package.json @@ -110,7 +110,7 @@ ], "devDependencies": { "@babel/cli": "^7.23.9", - "@babel/core": "^7.23.9", + "@babel/core": "^7.24.0", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.2", "@babel/plugin-proposal-private-methods": "^7.17.12", From 8848e2f83d80f26cf52abec46f3d92ed75ef134f Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 22 Mar 2024 09:30:58 +0000 Subject: [PATCH 028/174] Bump webpack-dev-middleware from 6.1.1 to 6.1.2 (#3303) Bumps [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) from 6.1.1 to 6.1.2. - [Release notes](https://github.com/webpack/webpack-dev-middleware/releases) - [Changelog](https://github.com/webpack/webpack-dev-middleware/blob/v6.1.2/CHANGELOG.md) - [Commits](https://github.com/webpack/webpack-dev-middleware/compare/v6.1.1...v6.1.2) --- updated-dependencies: - dependency-name: webpack-dev-middleware dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index bb579197d2..de9a283902 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31927,9 +31927,9 @@ } }, "node_modules/webpack-dev-middleware": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-6.1.1.tgz", - "integrity": "sha512-y51HrHaFeeWir0YO4f0g+9GwZawuigzcAdRNon6jErXy/SqV/+O6eaVAzDqE6t3e3NpGeR5CS+cCDaTC+V3yEQ==", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-6.1.2.tgz", + "integrity": "sha512-Wu+EHmX326YPYUpQLKmKbTyZZJIB8/n6R09pTmB03kJmnMsVPTo9COzHZFr01txwaCAuZvfBJE4ZCHRcKs5JaQ==", "dev": true, "dependencies": { "colorette": "^2.0.10", From 2b94ca5d20d2818f1d24060a5082179ba317e1f8 Mon Sep 17 00:00:00 2001 From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> Date: Mon, 25 Mar 2024 11:05:17 +0000 Subject: [PATCH 029/174] Creating dependabot group patterns to group deps for PRs (#3304) --- .github/dependabot.yml | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 8309faa0c5..403fbda27c 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -9,6 +9,20 @@ updates: versioning-strategy: increase allow: - dependency-type: "direct" + groups: + babel: + patterns: + - "@babel*" + - "babel*" + storybook: + patterns: + - "@storybook*" + - "storybook*" + testing-library: + patterns: + - "@testing-library*" + - "testing-library*" + - "jest*" - package-ecosystem: github-actions directory: "/" schedule: From 7e4c4aaaed45226bed57686128b5bd425f9c5603 Mon Sep 17 00:00:00 2001 From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> Date: Mon, 25 Mar 2024 11:05:38 +0000 Subject: [PATCH 030/174] [ARGG-1057]: Setup dependabot to ignore patch versions (#3296) --- .github/dependabot.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 403fbda27c..4443a1adb6 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -7,6 +7,9 @@ updates: time: "10:00" open-pull-requests-limit: 10 versioning-strategy: increase + ignore: + - dependency-name: '*' + update-types: ['version-update:semver-patch'] allow: - dependency-type: "direct" groups: From 378b287a477c02cc7ed9442da43ef9ec0730711e Mon Sep 17 00:00:00 2001 From: Christopher Moore Date: Mon, 25 Mar 2024 11:30:21 +0000 Subject: [PATCH 031/174] Use the import order defined by skyscanner to ensure consistency with CSS chunk resoloution (#3234) --- .eslintrc | 17 +---------------- .storybook/preview.tsx | 3 ++- examples/bpk-component-banner-alert/examples.js | 1 + examples/bpk-component-barchart/examples.js | 5 ++++- examples/bpk-component-barchart/hocs.js | 3 ++- .../examples-components.js | 2 ++ examples/bpk-component-card-button/examples.tsx | 9 +++++---- examples/bpk-component-card/examples.js | 1 + examples/bpk-component-datepicker/examples.js | 2 ++ .../bpk-component-horizontal-nav/examples.js | 1 + examples/bpk-component-info-banner/examples.js | 3 ++- examples/bpk-component-modal/examples.js | 1 + .../bpk-component-navigation-bar/examples.js | 3 ++- examples/bpk-component-nudger/examples.js | 1 + .../examples.js | 1 + examples/bpk-component-tooltip/examples.js | 1 + .../src/AnimateHeight-test.js | 1 + .../src/BpkAccordionItem.js | 3 ++- .../src/BpkAriaLive-test.tsx | 1 + .../bpk-component-badge/src/BpkBadge-test.tsx | 1 + .../src/AnimateAndFade.tsx | 6 ++++-- .../src/BpkBannerAlert.tsx | 3 ++- .../src/BpkBannerAlertDismissable.tsx | 3 ++- .../src/BpkBannerAlertExpandable.tsx | 3 ++- .../src/BpkBannerAlertInner.tsx | 5 ++++- .../src/withBannerAlertState.tsx | 1 + .../bpk-component-barchart/src/BpkBarchart.js | 5 ++++- .../src/BpkBarchartBar.js | 2 ++ .../src/BpkBarchartBars.js | 4 +++- .../bpk-component-barchart/src/BpkChartAxis.js | 2 ++ .../src/BpkChartDataTable.js | 1 + .../src/BpkChartGridLines.js | 1 + .../src/BpkChartMargin-test.js | 1 + packages/bpk-component-bottom-sheet/index.ts | 1 + .../src/BpkBottomSheet-test.tsx | 3 ++- .../src/BpkBreakpoint-test.tsx | 3 ++- .../src/BpkBreakpoint.tsx | 1 + .../bpk-component-button/src/BpkButtonBase.js | 1 + .../src/BpkButtonDestructive.js | 1 + .../src/BpkButtonFeatured.js | 1 + .../bpk-component-button/src/BpkButtonLink.js | 1 + .../src/BpkButtonLinkOnDark.js | 1 + .../src/BpkButtonPrimaryOnDark.js | 1 + .../src/BpkButtonPrimaryOnLight.js | 1 + .../src/BpkButtonSecondary.js | 1 + .../src/BpkButtonSecondaryOnDark.js | 1 + .../src/BpkButtonV2/BpkButton-test.tsx | 3 ++- .../src/BpkButtonV2/BpkButton.tsx | 4 +++- packages/bpk-component-calendar/index.ts | 17 +++++++++-------- .../src/BpkCalendarContainer.tsx | 3 ++- .../src/BpkCalendarDate.tsx | 1 + .../src/BpkCalendarGrid-test.tsx | 4 +++- .../src/BpkCalendarGrid.tsx | 7 +++++-- .../src/BpkCalendarGridHeader.tsx | 4 +++- .../src/BpkCalendarGridTransition-test.tsx | 1 + .../src/BpkCalendarGridTransition.tsx | 1 + .../src/BpkCalendarNav.tsx | 1 + .../bpk-component-calendar/src/Week-test.tsx | 1 + packages/bpk-component-calendar/src/Week.tsx | 4 +++- .../src/composeCalendar.tsx | 2 ++ .../src/BpkCardWrapper-test.tsx | 1 + .../bpk-component-card/src/BpkDividedCard.tsx | 1 + .../src/accessibility-test.js | 1 + packages/bpk-component-chip/index.ts | 3 ++- .../src/BpkDismissibleChip-test.tsx | 3 ++- .../src/BpkDismissibleChip.tsx | 4 +++- .../bpk-component-chip/src/BpkDropdownChip.tsx | 3 ++- .../src/BpkSelectableChip-test.tsx | 3 ++- .../src/BpkSelectableChip.tsx | 6 ++++-- .../src/BpkContentCard-test.js | 1 + .../src/BpkContentCards-test.js | 1 + .../src/BpkContentCards.js | 1 + .../src/BpkDataTable-test.tsx | 1 + .../src/BpkDataTable.tsx | 4 +++- .../src/BpkDataTableHeader.tsx | 3 ++- .../src/BpkDatepicker.tsx | 1 + packages/bpk-component-dialog/index.ts | 3 ++- packages/bpk-component-dialog/src/BpkDialog.tsx | 4 +++- .../bpk-component-dialog/src/BpkDialogInner.tsx | 1 + packages/bpk-component-drawer/src/BpkDrawer.js | 1 + .../src/BpkDrawerContent.js | 2 ++ .../bpk-component-flare/src/BpkContentBubble.js | 1 + packages/bpk-component-flare/src/BpkFlareBar.js | 3 ++- .../src/BpkFloatingNotification-test.tsx | 1 + .../src/BpkFloatingNotification.tsx | 1 + .../src/BpkFormValidation.js | 1 + .../src/BpkGraphicPromo-test.tsx | 2 ++ .../src/BpkHorizontalNavItem.js | 1 + packages/bpk-component-icon/index.tsx | 1 + .../src/withAlignment-test.tsx | 1 + .../bpk-component-icon/src/withRtlSupport.tsx | 3 ++- packages/bpk-component-image/index.ts | 3 ++- .../src/BpkBackgroundImage-test.tsx | 1 + .../src/BpkBackgroundImage.tsx | 2 ++ .../bpk-component-image/src/BpkImage-test.tsx | 1 + packages/bpk-component-image/src/BpkImage.tsx | 5 ++++- .../src/accessibility-test.tsx | 1 + .../bpk-component-image/src/withLazyLoading.tsx | 1 + .../src/accessibility-test.js | 1 + .../src/withInfiniteScroll-test.js | 1 + .../src/withInfiniteScroll.js | 2 ++ .../src/AnimateAndFade.tsx | 6 ++++-- .../src/BpkInfoBanner.tsx | 3 ++- .../src/BpkInfoBannerDismissable.tsx | 3 ++- .../src/BpkInfoBannerExpandable.tsx | 3 ++- .../src/BpkInfoBannerInner.tsx | 5 ++++- .../src/withBannerAlertState.tsx | 1 + packages/bpk-component-input/src/BpkInput.tsx | 4 +++- .../bpk-component-link/src/BpkButtonLink.js | 1 + packages/bpk-component-link/src/BpkLink-test.js | 3 ++- packages/bpk-component-link/src/BpkLink.js | 1 + packages/bpk-component-map/src/BpkIconMarker.js | 1 + packages/bpk-component-map/src/BpkMap.js | 2 ++ .../bpk-component-map/src/BpkOverlayView.js | 1 + .../bpk-component-map/src/BpkPriceMarker.js | 1 + .../src/withGoogleMapsScript.js | 1 + .../src/BpkMobileScrollContainer-test.js | 1 + .../src/BpkMobileScrollContainer.js | 3 ++- packages/bpk-component-modal/index.ts | 3 ++- packages/bpk-component-modal/src/BpkModal.tsx | 4 +++- .../src/BpkNavigationBarButtonLink.tsx | 3 ++- .../src/BpkNavigationBarIconButton.tsx | 3 ++- .../src/BpkConfigurableNudger.tsx | 1 + packages/bpk-component-nudger/src/BpkNudger.tsx | 1 + .../src/BpkPageIndicator.js | 1 + .../src/BpkPagination.js | 1 + .../src/BpkPaginationList.js | 1 + .../bpk-component-popover/src/BpkPopover.js | 3 ++- .../src/BpkPopoverPortal-test.js | 1 + .../src/BpkPopoverPortal.js | 6 ++++-- packages/bpk-component-price/src/BpkPrice.js | 3 ++- .../bpk-component-progress/src/BpkProgress.js | 1 + packages/bpk-component-rating/src/BpkRating.js | 4 +++- .../src/BpkScrollableCalendarDate.tsx | 1 + .../src/BpkScrollableCalendarGrid-test.tsx | 2 ++ .../src/BpkScrollableCalendarGrid.tsx | 1 + .../src/BpkScrollableCalendarGridList-test.tsx | 4 +++- .../src/BpkScrollableCalendarGridList.tsx | 7 +++++-- packages/bpk-component-slider/src/BpkSlider.tsx | 3 ++- .../src/BpkExtraLargeSpinner.js | 4 +++- .../src/BpkLargeSpinner.js | 4 +++- .../bpk-component-spinner/src/BpkSpinner.js | 4 +++- .../src/BpkSplitInput.js | 1 + .../src/BpkInteractiveStar.js | 1 + .../src/BpkInteractiveStarRating.js | 1 + .../src/BpkStarRating.js | 1 + .../bpk-component-text/src/BpkText-test.tsx | 3 ++- .../src/BpkThemeToggle.js | 3 ++- .../src/updateOnThemeChange-test.js | 1 + packages/bpk-component-tooltip/index.ts | 3 ++- .../bpk-component-tooltip/src/BpkTooltip.tsx | 3 ++- .../src/BpkTooltipPortal-test.tsx | 1 + .../src/BpkTooltipPortal.tsx | 7 +++++-- .../BpkDialogWrapper/BpkDialogWrapper-test.tsx | 3 ++- .../src/BpkDialogWrapper/BpkDialogWrapper.tsx | 1 + packages/bpk-react-utils/src/Portal-test.tsx | 1 + packages/bpk-react-utils/src/Portal.tsx | 1 + .../src/TransitionInitialMount.tsx | 3 ++- packages/bpk-scrim-utils/src/withScrim-test.tsx | 3 ++- packages/bpk-scrim-utils/src/withScrim.tsx | 8 +++++--- .../src/withScrimmedPortal-test.tsx | 4 +++- .../bpk-scrim-utils/src/withScrimmedPortal.tsx | 1 + .../bpk-theming/src/BpkThemeProvider-test.js | 2 ++ packages/bpk-theming/src/accessibility-test.js | 1 + 164 files changed, 302 insertions(+), 105 deletions(-) diff --git a/.eslintrc b/.eslintrc index 43c6a3908c..5ca1555660 100644 --- a/.eslintrc +++ b/.eslintrc @@ -92,21 +92,6 @@ "react/no-unused-class-component-methods": "off", "no-promise-executor-return": "off", "import/no-import-module-exports": "off", - // We override the eslint-config-skyscanner rule here as within Backpack - // we need certain order imports otherwise it will break components like the calendar. - "import/order": [ - "error", - { - "groups": [ - "builtin", - "external", - "parent", - "sibling", - "index" - ], - "newlines-between": "always" - } - ], // This is superceded by jsx-a11y/label-has-associated-control "jsx-a11y/label-has-for": "off", // We want to keep prop-types alongside typescript types so we relax this rule to allow us to specify defaults for @@ -144,4 +129,4 @@ // Temp setting this to warn whilst migration to TS is in progress. "no-undef": "warn" } -} \ No newline at end of file +} diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index ce7d7dbf0a..edfdf9e871 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -18,7 +18,6 @@ import { Title, PRIMARY_STORY } from '@storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; -import type { Preview } from '@storybook/react'; import '../packages/bpk-stylesheets'; import '../packages/bpk-stylesheets/font'; @@ -31,6 +30,8 @@ import BpkThemeProvider from '../packages/bpk-theming'; import themeableAttributes from './themeableAttributes'; +import type { Preview } from '@storybook/react'; + const EnhancedThemeProvider = updateOnThemeChange(BpkThemeProvider); const preview: Preview = { diff --git a/examples/bpk-component-banner-alert/examples.js b/examples/bpk-component-banner-alert/examples.js index 02cbba97a7..0b15cd66c6 100644 --- a/examples/bpk-component-banner-alert/examples.js +++ b/examples/bpk-component-banner-alert/examples.js @@ -18,6 +18,7 @@ /* @flow strict */ import { Component } from 'react'; + import { fontWeightBold } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import { action } from '../bpk-storybook-utils'; diff --git a/examples/bpk-component-barchart/examples.js b/examples/bpk-component-barchart/examples.js index dc757f7557..57bfdfbe19 100644 --- a/examples/bpk-component-barchart/examples.js +++ b/examples/bpk-component-barchart/examples.js @@ -19,9 +19,11 @@ /* @flow strict */ import { number } from 'prop-types'; -import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; + import { scaleLinear, scaleBand } from 'd3-scale'; +import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; + import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import { updateOnDirectionChange } from '../../packages/bpk-component-rtl-toggle'; @@ -37,6 +39,7 @@ import BpkBarchart, { } from '../../packages/bpk-component-barchart'; import { withSelectedState } from './hocs'; + import STYLES from './examples.module.scss'; const getClassName = cssModules(STYLES); diff --git a/examples/bpk-component-barchart/hocs.js b/examples/bpk-component-barchart/hocs.js index a27a10e26f..aad1f93fdd 100644 --- a/examples/bpk-component-barchart/hocs.js +++ b/examples/bpk-component-barchart/hocs.js @@ -18,10 +18,11 @@ /* @flow strict */ -import isEqual from 'lodash/isEqual'; import { Component } from 'react'; import type { ComponentType } from 'react'; +import isEqual from 'lodash/isEqual'; + import { wrapDisplayName } from '../../packages/bpk-react-utils'; // eslint-disable-next-line import/prefer-default-export diff --git a/examples/bpk-component-calendar/examples-components.js b/examples/bpk-component-calendar/examples-components.js index 0bf3578dd5..00f13106c3 100644 --- a/examples/bpk-component-calendar/examples-components.js +++ b/examples/bpk-component-calendar/examples-components.js @@ -20,7 +20,9 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; + import { addMonths } from 'date-fns/addMonths'; + import { colorWhite, colorPanjin, diff --git a/examples/bpk-component-card-button/examples.tsx b/examples/bpk-component-card-button/examples.tsx index 854529a8c6..26168c76d9 100644 --- a/examples/bpk-component-card-button/examples.tsx +++ b/examples/bpk-component-card-button/examples.tsx @@ -17,10 +17,6 @@ */ import { useState } from 'react'; -import type { - SizeType, - StyleType, -} from '../../packages/bpk-component-card-button/src/BpkSaveButton'; import { BpkSaveButton, STYLE_TYPES, @@ -29,6 +25,11 @@ import { // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { BpkDarkExampleWrapper } from '../bpk-storybook-utils'; +import type { + SizeType, + StyleType, +} from '../../packages/bpk-component-card-button/src/BpkSaveButton'; + type Props = { checked?: boolean; size?: SizeType; diff --git a/examples/bpk-component-card/examples.js b/examples/bpk-component-card/examples.js index 1006044c3f..68c1b5c55a 100644 --- a/examples/bpk-component-card/examples.js +++ b/examples/bpk-component-card/examples.js @@ -18,6 +18,7 @@ /* @flow strict */ import { Fragment } from 'react'; + import { coreAccentDay, surfaceHighlightDay, diff --git a/examples/bpk-component-datepicker/examples.js b/examples/bpk-component-datepicker/examples.js index 1261aa8ac9..0ac8af4383 100644 --- a/examples/bpk-component-datepicker/examples.js +++ b/examples/bpk-component-datepicker/examples.js @@ -18,7 +18,9 @@ import { Component, createRef } from 'react'; import PropTypes from 'prop-types'; + import { memoize } from 'lodash'; + import { colorSagano, colorBagan, diff --git a/examples/bpk-component-horizontal-nav/examples.js b/examples/bpk-component-horizontal-nav/examples.js index 2beb54c93a..538b345af5 100644 --- a/examples/bpk-component-horizontal-nav/examples.js +++ b/examples/bpk-component-horizontal-nav/examples.js @@ -17,6 +17,7 @@ */ import { Fragment } from 'react'; + import { onePixelRem, colorSkyGrayTint06, diff --git a/examples/bpk-component-info-banner/examples.js b/examples/bpk-component-info-banner/examples.js index 8c86b704a0..37084828b5 100644 --- a/examples/bpk-component-info-banner/examples.js +++ b/examples/bpk-component-info-banner/examples.js @@ -16,12 +16,13 @@ * limitations under the License. */ +import { Component } from 'react'; + import { canvasContrastDay, cardPadding, fontWeightBold, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { Component } from 'react'; import { action } from '../bpk-storybook-utils'; import CurrencyIcon from '../../packages/bpk-component-icon/sm/currency'; diff --git a/examples/bpk-component-modal/examples.js b/examples/bpk-component-modal/examples.js index bbc30092f9..634e00de5a 100644 --- a/examples/bpk-component-modal/examples.js +++ b/examples/bpk-component-modal/examples.js @@ -21,6 +21,7 @@ import PropTypes from 'prop-types'; import { Component, Children } from 'react'; import type { Node, Element } from 'react'; + import { lineHeightBase, iconSizeSm, diff --git a/examples/bpk-component-navigation-bar/examples.js b/examples/bpk-component-navigation-bar/examples.js index 3402cc60ff..f7af64ca36 100644 --- a/examples/bpk-component-navigation-bar/examples.js +++ b/examples/bpk-component-navigation-bar/examples.js @@ -29,9 +29,10 @@ import BpkNavigationBar, { BAR_STYLES, } from '../../packages/bpk-component-navigation-bar'; -import STYLES from './examples.module.scss'; import AirlineLogo from './AirlineLogo'; +import STYLES from './examples.module.scss'; + const getClassNames = cssModules(STYLES); const ArrowIconWithRtl = withRtlSupport(ArrowIcon); diff --git a/examples/bpk-component-nudger/examples.js b/examples/bpk-component-nudger/examples.js index a5ebc36578..d7eacafda2 100644 --- a/examples/bpk-component-nudger/examples.js +++ b/examples/bpk-component-nudger/examples.js @@ -19,6 +19,7 @@ /* @flow strict */ import { Component } from 'react'; + import { iconSizeLg, lineHeightBase } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import { diff --git a/examples/bpk-component-scrollable-calendar/examples.js b/examples/bpk-component-scrollable-calendar/examples.js index e5d16fc11e..afced06b96 100644 --- a/examples/bpk-component-scrollable-calendar/examples.js +++ b/examples/bpk-component-scrollable-calendar/examples.js @@ -17,6 +17,7 @@ */ import { Component } from 'react'; + import { startOfMonth } from 'date-fns/startOfMonth'; import { endOfMonth } from 'date-fns/endOfMonth'; diff --git a/examples/bpk-component-tooltip/examples.js b/examples/bpk-component-tooltip/examples.js index f0f8675a9b..3c89d38f92 100644 --- a/examples/bpk-component-tooltip/examples.js +++ b/examples/bpk-component-tooltip/examples.js @@ -19,6 +19,7 @@ /* @flow strict */ import { useRef, forwardRef } from 'react'; + import { colorMonteverde, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; diff --git a/packages/bpk-animate-height/src/AnimateHeight-test.js b/packages/bpk-animate-height/src/AnimateHeight-test.js index 4c4ffd6c6c..25ca2f3d77 100644 --- a/packages/bpk-animate-height/src/AnimateHeight-test.js +++ b/packages/bpk-animate-height/src/AnimateHeight-test.js @@ -17,6 +17,7 @@ */ import { render, screen } from '@testing-library/react'; + import '@testing-library/jest-dom'; import { spacingSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; diff --git a/packages/bpk-component-accordion/src/BpkAccordionItem.js b/packages/bpk-component-accordion/src/BpkAccordionItem.js index 4ac117166f..dd15093024 100644 --- a/packages/bpk-component-accordion/src/BpkAccordionItem.js +++ b/packages/bpk-component-accordion/src/BpkAccordionItem.js @@ -22,12 +22,13 @@ import PropTypes from 'prop-types'; import { Node, Element, useContext, cloneElement } from 'react'; import AnimateHeight from '../../bpk-animate-height'; -import { withButtonAlignment } from '../../bpk-component-icon'; import ChevronDownIcon from '../../bpk-component-icon/sm/chevron-down'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; import { cssModules } from '../../bpk-react-utils'; +import { withButtonAlignment } from '../../bpk-component-icon'; import { BpkAccordionContext } from './BpkAccordion'; + import STYLES from './BpkAccordionItem.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-aria-live/src/BpkAriaLive-test.tsx b/packages/bpk-component-aria-live/src/BpkAriaLive-test.tsx index ad0e8cf206..c61fca971b 100644 --- a/packages/bpk-component-aria-live/src/BpkAriaLive-test.tsx +++ b/packages/bpk-component-aria-live/src/BpkAriaLive-test.tsx @@ -19,6 +19,7 @@ import { render } from '@testing-library/react'; import BpkAriaLive, { POLITENESS_SETTINGS } from './BpkAriaLive'; + import type { PolitenessSetting } from './BpkAriaLive'; describe('BpkAriaLive', () => { diff --git a/packages/bpk-component-badge/src/BpkBadge-test.tsx b/packages/bpk-component-badge/src/BpkBadge-test.tsx index a6d1f29dbd..5873495330 100644 --- a/packages/bpk-component-badge/src/BpkBadge-test.tsx +++ b/packages/bpk-component-badge/src/BpkBadge-test.tsx @@ -22,6 +22,7 @@ import { render } from '@testing-library/react'; import BpkSmallFlightIcon from '../../bpk-component-icon/sm/flight'; import BpkBadge, { BADGE_TYPES } from './BpkBadge'; + import type { BadgeType } from './BpkBadge'; describe('BpkBadge', () => { diff --git a/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx b/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx index d2733a2eef..4244aab3c1 100644 --- a/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx +++ b/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx @@ -18,11 +18,13 @@ import { Component } from 'react'; import type { ReactNode } from 'react'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { TransitionGroup, CSSTransition } from 'react-transition-group'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; + import { cssModules } from '../../bpk-react-utils'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkAnimateHeight from '../../bpk-animate-height'; diff --git a/packages/bpk-component-banner-alert/src/BpkBannerAlert.tsx b/packages/bpk-component-banner-alert/src/BpkBannerAlert.tsx index 380928d4e2..5b985ae825 100644 --- a/packages/bpk-component-banner-alert/src/BpkBannerAlert.tsx +++ b/packages/bpk-component-banner-alert/src/BpkBannerAlert.tsx @@ -16,9 +16,10 @@ * limitations under the License. */ -import type { CommonProps } from './common-types'; import BpkBannerAlertInner from './BpkBannerAlertInner'; +import type { CommonProps } from './common-types'; + const defaultProps = { animateOnEnter: false, animateOnLeave: false, diff --git a/packages/bpk-component-banner-alert/src/BpkBannerAlertDismissable.tsx b/packages/bpk-component-banner-alert/src/BpkBannerAlertDismissable.tsx index 7d7b9bcb2f..6ee3743bf8 100644 --- a/packages/bpk-component-banner-alert/src/BpkBannerAlertDismissable.tsx +++ b/packages/bpk-component-banner-alert/src/BpkBannerAlertDismissable.tsx @@ -16,9 +16,10 @@ * limitations under the License. */ -import type { CommonProps, OnDismissHandler } from './common-types'; import BpkBannerAlertInner, { CONFIGURATION } from './BpkBannerAlertInner'; +import type { CommonProps, OnDismissHandler } from './common-types'; + export type Props = CommonProps & { dismissButtonLabel: string; onDismiss?: OnDismissHandler; diff --git a/packages/bpk-component-banner-alert/src/BpkBannerAlertExpandable.tsx b/packages/bpk-component-banner-alert/src/BpkBannerAlertExpandable.tsx index f07a145fbe..8f23883001 100644 --- a/packages/bpk-component-banner-alert/src/BpkBannerAlertExpandable.tsx +++ b/packages/bpk-component-banner-alert/src/BpkBannerAlertExpandable.tsx @@ -18,9 +18,10 @@ import type { ReactNode } from 'react'; -import type { CommonProps, OnExpandToggleHandler } from './common-types'; import BpkBannerAlertInner, { CONFIGURATION } from './BpkBannerAlertInner'; +import type { CommonProps, OnExpandToggleHandler } from './common-types'; + export type Props = CommonProps & { children: ReactNode; expanded?: boolean; diff --git a/packages/bpk-component-banner-alert/src/BpkBannerAlertInner.tsx b/packages/bpk-component-banner-alert/src/BpkBannerAlertInner.tsx index fb6dade689..8f6b19de17 100644 --- a/packages/bpk-component-banner-alert/src/BpkBannerAlertInner.tsx +++ b/packages/bpk-component-banner-alert/src/BpkBannerAlertInner.tsx @@ -21,6 +21,7 @@ */ import type { ReactNode, FunctionComponent, SVGProps } from 'react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; @@ -38,13 +39,15 @@ import InfoCircleIcon from '../../bpk-component-icon/sm/information-circle'; import { cssModules } from '../../bpk-react-utils'; import AnimateAndFade from './AnimateAndFade'; +import { ALERT_TYPES } from './common-types'; + import type { AlertTypeValue, CommonProps, OnDismissHandler, OnExpandToggleHandler, } from './common-types'; -import { ALERT_TYPES } from './common-types'; + import STYLES from './BpkBannerAlert.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-banner-alert/src/withBannerAlertState.tsx b/packages/bpk-component-banner-alert/src/withBannerAlertState.tsx index 7680097499..8464ba0471 100644 --- a/packages/bpk-component-banner-alert/src/withBannerAlertState.tsx +++ b/packages/bpk-component-banner-alert/src/withBannerAlertState.tsx @@ -22,6 +22,7 @@ import type { ComponentType } from 'react'; import { wrapDisplayName } from '../../bpk-react-utils'; import BpkBannerAlertExpandable from './BpkBannerAlertExpandable'; + import type { Props as BpkBannerAlertExpandableProps } from './BpkBannerAlertExpandable'; import type { Props as BpkBannerAlertDismissableProps } from './BpkBannerAlertDismissable'; diff --git a/packages/bpk-component-barchart/src/BpkBarchart.js b/packages/bpk-component-barchart/src/BpkBarchart.js index 048494a263..98b5c198e2 100644 --- a/packages/bpk-component-barchart/src/BpkBarchart.js +++ b/packages/bpk-component-barchart/src/BpkBarchart.js @@ -19,9 +19,11 @@ /* @flow strict */ import PropTypes from 'prop-types'; -import debounce from 'lodash.debounce'; import { Component } from 'react'; + +import debounce from 'lodash.debounce'; import { scaleLinear, scaleBand } from 'd3-scale'; + import { lineHeightSm, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; @@ -43,6 +45,7 @@ import { applyMarginRTLTransform, } from './RTLtransforms'; import { ORIENTATION_X, ORIENTATION_Y } from './orientation'; + import STYLES from './BpkBarchart.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-barchart/src/BpkBarchartBar.js b/packages/bpk-component-barchart/src/BpkBarchartBar.js index 45daa359e8..8116dcd8aa 100644 --- a/packages/bpk-component-barchart/src/BpkBarchartBar.js +++ b/packages/bpk-component-barchart/src/BpkBarchartBar.js @@ -19,11 +19,13 @@ /* @flow strict */ import PropTypes from 'prop-types'; + import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import { cssModules } from '../../bpk-react-utils'; import { remToPx } from './utils'; + import STYLES from './BpkBarchartBar.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-barchart/src/BpkBarchartBars.js b/packages/bpk-component-barchart/src/BpkBarchartBars.js index ff23ae7749..f3bc70372f 100644 --- a/packages/bpk-component-barchart/src/BpkBarchartBars.js +++ b/packages/bpk-component-barchart/src/BpkBarchartBars.js @@ -18,8 +18,10 @@ /* @flow strict */ -import { scaleBand, scaleLinear } from 'd3-scale'; import PropTypes from 'prop-types'; + +import { scaleBand, scaleLinear } from 'd3-scale'; + import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import BpkBarchartBar from './BpkBarchartBar'; diff --git a/packages/bpk-component-barchart/src/BpkChartAxis.js b/packages/bpk-component-barchart/src/BpkChartAxis.js index 9b40b127dd..9d9580d2b8 100644 --- a/packages/bpk-component-barchart/src/BpkChartAxis.js +++ b/packages/bpk-component-barchart/src/BpkChartAxis.js @@ -20,6 +20,7 @@ import type { Node } from 'react'; import PropTypes from 'prop-types'; + import { lineHeightSm, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; @@ -29,6 +30,7 @@ import { cssModules } from '../../bpk-react-utils'; import { rtlConditionalValue } from './RTLtransforms'; import { ORIENTATION_X, ORIENTATION_Y } from './orientation'; import { identity, center, remToPx } from './utils'; + import STYLES from './BpkChartAxis.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-barchart/src/BpkChartDataTable.js b/packages/bpk-component-barchart/src/BpkChartDataTable.js index 02efe3cea7..4cc9a7bdab 100644 --- a/packages/bpk-component-barchart/src/BpkChartDataTable.js +++ b/packages/bpk-component-barchart/src/BpkChartDataTable.js @@ -23,6 +23,7 @@ import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; import dataProp from './customPropTypes'; + import STYLES from './BpkChartDataTable.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-barchart/src/BpkChartGridLines.js b/packages/bpk-component-barchart/src/BpkChartGridLines.js index 855e78fef6..056a859b18 100644 --- a/packages/bpk-component-barchart/src/BpkChartGridLines.js +++ b/packages/bpk-component-barchart/src/BpkChartGridLines.js @@ -24,6 +24,7 @@ import { cssModules } from '../../bpk-react-utils'; import { ORIENTATION_X, ORIENTATION_Y } from './orientation'; import { identity, center } from './utils'; + import STYLES from './BpkChartGridLines.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-barchart/src/BpkChartMargin-test.js b/packages/bpk-component-barchart/src/BpkChartMargin-test.js index 68bb76c5a4..cab286ba35 100644 --- a/packages/bpk-component-barchart/src/BpkChartMargin-test.js +++ b/packages/bpk-component-barchart/src/BpkChartMargin-test.js @@ -19,6 +19,7 @@ /* @flow strict */ import { render } from '@testing-library/react'; + import { spacingSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import BpkChartMargin from './BpkChartMargin'; diff --git a/packages/bpk-component-bottom-sheet/index.ts b/packages/bpk-component-bottom-sheet/index.ts index 50f8cb0e7a..9ba5e8c555 100644 --- a/packages/bpk-component-bottom-sheet/index.ts +++ b/packages/bpk-component-bottom-sheet/index.ts @@ -17,6 +17,7 @@ */ import BpkBottomSheet from './src/BpkBottomSheet'; + import type { Props } from './src/BpkBottomSheet'; export type BpkBottomSheetProps = Props; diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx index 1b690259e8..690bbf12ce 100644 --- a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx +++ b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx @@ -16,9 +16,10 @@ * limitations under the License. */ -import { render } from '@testing-library/react'; import { renderToString } from 'react-dom/server'; +import { render } from '@testing-library/react'; + import BpkBottomSheet from './BpkBottomSheet'; describe('BpkBottomSheet', () => { diff --git a/packages/bpk-component-breakpoint/src/BpkBreakpoint-test.tsx b/packages/bpk-component-breakpoint/src/BpkBreakpoint-test.tsx index ccdcd63d8e..8121db75c2 100644 --- a/packages/bpk-component-breakpoint/src/BpkBreakpoint-test.tsx +++ b/packages/bpk-component-breakpoint/src/BpkBreakpoint-test.tsx @@ -16,9 +16,10 @@ * limitations under the License. */ -import { render } from '@testing-library/react'; import ReactDOMServer from 'react-dom/server'; +import { render } from '@testing-library/react'; + import { BREAKPOINTS } from './BpkBreakpoint'; describe('BpkBreakpoint', () => { diff --git a/packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx b/packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx index 3f279627d2..638c4d82f7 100644 --- a/packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx +++ b/packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx @@ -18,6 +18,7 @@ import { useState, useEffect } from 'react'; import type { ReactElement, ReactNode } from 'react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { breakpoints } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; diff --git a/packages/bpk-component-button/src/BpkButtonBase.js b/packages/bpk-component-button/src/BpkButtonBase.js index 836678830b..f0414c2152 100644 --- a/packages/bpk-component-button/src/BpkButtonBase.js +++ b/packages/bpk-component-button/src/BpkButtonBase.js @@ -19,6 +19,7 @@ /* @flow strict */ import { type Props, propTypes, defaultProps } from './common-types'; + import COMMON_STYLES from './BpkButtonBase.module.scss'; // This was originally depended upon from the bpk-react-utils package, however diff --git a/packages/bpk-component-button/src/BpkButtonDestructive.js b/packages/bpk-component-button/src/BpkButtonDestructive.js index 173010e495..2218ac0c4f 100644 --- a/packages/bpk-component-button/src/BpkButtonDestructive.js +++ b/packages/bpk-component-button/src/BpkButtonDestructive.js @@ -20,6 +20,7 @@ import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; + import STYLES from './BpkButtonDestructive.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-button/src/BpkButtonFeatured.js b/packages/bpk-component-button/src/BpkButtonFeatured.js index 434280c47c..36a2dbc8f5 100644 --- a/packages/bpk-component-button/src/BpkButtonFeatured.js +++ b/packages/bpk-component-button/src/BpkButtonFeatured.js @@ -20,6 +20,7 @@ import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; + import STYLES from './BpkButtonFeatured.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-button/src/BpkButtonLink.js b/packages/bpk-component-button/src/BpkButtonLink.js index 02b1ccdae7..6f4e7f1cad 100644 --- a/packages/bpk-component-button/src/BpkButtonLink.js +++ b/packages/bpk-component-button/src/BpkButtonLink.js @@ -24,6 +24,7 @@ import { propTypes, } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; + import STYLES from './BpkButtonLink.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-button/src/BpkButtonLinkOnDark.js b/packages/bpk-component-button/src/BpkButtonLinkOnDark.js index fa50e811dd..43872f5b42 100644 --- a/packages/bpk-component-button/src/BpkButtonLinkOnDark.js +++ b/packages/bpk-component-button/src/BpkButtonLinkOnDark.js @@ -24,6 +24,7 @@ import { propTypes, } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; + import STYLES from './BpkButtonLinkOnDark.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.js b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.js index ac0cd15dc7..5c4cef94f1 100644 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.js +++ b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.js @@ -20,6 +20,7 @@ import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; + import STYLES from './BpkButtonPrimaryOnDark.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.js b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.js index a096192683..cb141a8a06 100644 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.js +++ b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.js @@ -20,6 +20,7 @@ import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; + import STYLES from './BpkButtonPrimaryOnLight.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-button/src/BpkButtonSecondary.js b/packages/bpk-component-button/src/BpkButtonSecondary.js index fc1a0df54e..9e54f2c771 100644 --- a/packages/bpk-component-button/src/BpkButtonSecondary.js +++ b/packages/bpk-component-button/src/BpkButtonSecondary.js @@ -20,6 +20,7 @@ import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; + import STYLES from './BpkButtonSecondary.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.js b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.js index 15474713b1..308f0c71fd 100644 --- a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.js +++ b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.js @@ -20,6 +20,7 @@ import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; + import STYLES from './BpkButtonSecondaryOnDark.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-button/src/BpkButtonV2/BpkButton-test.tsx b/packages/bpk-component-button/src/BpkButtonV2/BpkButton-test.tsx index b3002d9231..adc6b39707 100644 --- a/packages/bpk-component-button/src/BpkButtonV2/BpkButton-test.tsx +++ b/packages/bpk-component-button/src/BpkButtonV2/BpkButton-test.tsx @@ -19,9 +19,10 @@ import { render } from '@testing-library/react'; import { BpkButtonV2 } from './BpkButton'; -import type { ButtonType } from './common-types'; import { SIZE_TYPES, BUTTON_TYPES } from './common-types'; +import type { ButtonType } from './common-types'; + describe('BpkButtonV2', () => { Object.keys(BUTTON_TYPES).forEach((buttonType) => { it(`should render correctly with type="${buttonType}"`, () => { diff --git a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.tsx b/packages/bpk-component-button/src/BpkButtonV2/BpkButton.tsx index 83be0d1af4..a3e7ea4e44 100644 --- a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.tsx +++ b/packages/bpk-component-button/src/BpkButtonV2/BpkButton.tsx @@ -17,8 +17,10 @@ */ import { cssModules } from '../../../bpk-react-utils'; -import type { Props } from './common-types'; import { BUTTON_TYPES, SIZE_TYPES } from './common-types'; + +import type { Props } from './common-types'; + import COMMON_STYLES from './BpkButton.module.scss'; const getCommonClassName = cssModules(COMMON_STYLES); diff --git a/packages/bpk-component-calendar/index.ts b/packages/bpk-component-calendar/index.ts index 8ca9e6f661..937675ad36 100644 --- a/packages/bpk-component-calendar/index.ts +++ b/packages/bpk-component-calendar/index.ts @@ -22,16 +22,21 @@ import BpkCalendarContainer, { import BpkCalendarGrid, { BpkCalendarGridWithTransition, } from './src/BpkCalendarGrid'; -import type { Props as BpkCalendarGridProps } from './src/BpkCalendarGrid'; import BpkCalendarGridHeader from './src/BpkCalendarGridHeader'; import BpkCalendarNav from './src/BpkCalendarNav'; import BpkCalendarDate, { ROW_TYPES, SELECTION_TYPES, } from './src/BpkCalendarDate'; -import type { Props as BpkCalendarDateProps } from './src/BpkCalendarDate'; import composeCalendar from './src/composeCalendar'; import { CALENDAR_SELECTION_TYPE } from './src/custom-proptypes'; +import CustomPropTypes, { + BpkCalendarGridPropTypes, + BpkCalendarDatePropTypes, // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +} from './src/custom-proptypes-legacy'; +import * as DateUtils from './src/date-utils'; +import themeAttributes from './src/themeAttributes'; + import type { DaysOfWeek, ReactComponent, @@ -39,12 +44,8 @@ import type { WeekDayKey, SelectionConfiguration, } from './src/custom-proptypes'; -import CustomPropTypes, { - BpkCalendarGridPropTypes, - BpkCalendarDatePropTypes, // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -} from './src/custom-proptypes-legacy'; -import * as DateUtils from './src/date-utils'; -import themeAttributes from './src/themeAttributes'; +import type { Props as BpkCalendarDateProps } from './src/BpkCalendarDate'; +import type { Props as BpkCalendarGridProps } from './src/BpkCalendarGrid'; export default BpkCalendarContainer; diff --git a/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx b/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx index 122966169f..7ef3209044 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx @@ -22,7 +22,6 @@ import { Component } from 'react'; import { isRTL } from '../../bpk-react-utils'; import { CALENDAR_SELECTION_TYPE } from './custom-proptypes'; -import type { SelectionConfiguration } from './custom-proptypes'; import BpkCalendarNav from './BpkCalendarNav'; import { BpkCalendarGridWithTransition } from './BpkCalendarGrid'; import BpkCalendarGridHeader from './BpkCalendarGridHeader'; @@ -41,6 +40,8 @@ import { startOfMonth, } from './date-utils'; +import type { SelectionConfiguration } from './custom-proptypes'; + export type Props = { /** * If set to true (default), it sets a fixed width on the calendar container. This is necessary to support transitions and to create the right size for the Datepicker component. diff --git a/packages/bpk-component-calendar/src/BpkCalendarDate.tsx b/packages/bpk-component-calendar/src/BpkCalendarDate.tsx index b53e42c465..c16d5c8c4c 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarDate.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarDate.tsx @@ -22,6 +22,7 @@ import { PureComponent } from 'react'; import { cssModules } from '../../bpk-react-utils'; import type { DateModifiers } from './custom-proptypes'; + import STYLES from './BpkCalendarDate.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid-test.tsx b/packages/bpk-component-calendar/src/BpkCalendarGrid-test.tsx index e6afb170a9..71f7ec184e 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGrid-test.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarGrid-test.tsx @@ -17,13 +17,15 @@ */ import PropTypes from 'prop-types'; + import { render, screen } from '@testing-library/react'; import { addMonths, isWeekend } from 'date-fns'; +import userEvent from '@testing-library/user-event'; + import { colorMonteverde, colorPanjin, // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import userEvent from '@testing-library/user-event'; import { formatDateFull } from '../test-utils'; diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx b/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx index 313bb65e10..29bef88130 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx @@ -28,10 +28,13 @@ import { getCalendarMonthWeeks, isSameMonth, } from './date-utils'; -import type { DateModifiers, SelectionConfiguration } from './custom-proptypes'; import { CALENDAR_SELECTION_TYPE } from './custom-proptypes'; -import STYLES from './BpkCalendarGrid.module.scss'; import { addCalendarGridTransition } from './BpkCalendarGridTransition'; + +import type { DateModifiers, SelectionConfiguration } from './custom-proptypes'; + +import STYLES from './BpkCalendarGrid.module.scss'; + // This should be imported after `./BpkCalendarGrid.module.scss`. // Because of how css specificity works the class `bpk-calendar-grid-transition__grid` needs to be defined // after `bpk-calendar-grid` (defined by BpkCalendarGrid.module.scss) so it can override width and display of the calendar diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.tsx b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.tsx index 20cad5b506..2c529ec0ea 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.tsx @@ -20,13 +20,15 @@ import { PureComponent } from 'react'; import { cssModules } from '../../bpk-react-utils'; +import { orderDaysOfWeek } from './date-utils'; + import type { DaysOfWeek, ReactComponent, WeekDay, WeekDayKey, } from './custom-proptypes'; -import { orderDaysOfWeek } from './date-utils'; + import STYLES from './BpkCalendarGridHeader.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridTransition-test.tsx b/packages/bpk-component-calendar/src/BpkCalendarGridTransition-test.tsx index e0b22abef0..553740cf27 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGridTransition-test.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarGridTransition-test.tsx @@ -22,6 +22,7 @@ import '@testing-library/jest-dom'; import BpkCalendarGridTransition, { addCalendarGridTransition, } from './BpkCalendarGridTransition'; + import type { Props } from './BpkCalendarGridTransition'; const MyComponent = (props: Props) =>
{JSON.stringify(props)}
; diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.tsx b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.tsx index 589611b57c..8a18ce3ea8 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.tsx @@ -37,6 +37,7 @@ import { isWithinRange, getMonthRange, } from './date-utils'; + import STYLES from './BpkCalendarGridTransition.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav.tsx b/packages/bpk-component-calendar/src/BpkCalendarNav.tsx index 1c4867c89a..2a5a505fda 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarNav.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarNav.tsx @@ -36,6 +36,7 @@ import { parseIsoDate, startOfMonth, } from './date-utils'; + import STYLES from './BpkCalendarNav.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-calendar/src/Week-test.tsx b/packages/bpk-component-calendar/src/Week-test.tsx index 65db24f2d8..a72e52f4e8 100644 --- a/packages/bpk-component-calendar/src/Week-test.tsx +++ b/packages/bpk-component-calendar/src/Week-test.tsx @@ -23,6 +23,7 @@ import { startOfDay } from 'date-fns/startOfDay'; import { CALENDAR_SELECTION_TYPE, SELECTION_TYPES } from '..'; import Week from './Week'; + import type { Props } from './Week'; const mockDateComponent = jest.fn(); diff --git a/packages/bpk-component-calendar/src/Week.tsx b/packages/bpk-component-calendar/src/Week.tsx index a56dbccd90..da8fdbbcbc 100644 --- a/packages/bpk-component-calendar/src/Week.tsx +++ b/packages/bpk-component-calendar/src/Week.tsx @@ -31,17 +31,19 @@ import { endOfMonth, } from './date-utils'; import { CALENDAR_SELECTION_TYPE } from './custom-proptypes'; +import { SELECTION_TYPES } from './BpkCalendarDate'; + import type { DateModifiers, SelectionConfiguration, SelectionConfigurationSingle, SelectionConfigurationRange, } from './custom-proptypes'; + // TODO: Move this to `Week.scss` // This should be using its own css file as `BpkCalendarGrid` is also importing `BpkCalendarGrid.module.scss` // and the order of css imports can break the component. import STYLES from './BpkCalendarGrid.module.scss'; -import { SELECTION_TYPES } from './BpkCalendarDate'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-calendar/src/composeCalendar.tsx b/packages/bpk-component-calendar/src/composeCalendar.tsx index 55997daa7e..b132334812 100644 --- a/packages/bpk-component-calendar/src/composeCalendar.tsx +++ b/packages/bpk-component-calendar/src/composeCalendar.tsx @@ -21,11 +21,13 @@ import type { ComponentType } from 'react'; import { cssModules } from '../../bpk-react-utils'; import { CALENDAR_SELECTION_TYPE } from './custom-proptypes'; + import type { DaysOfWeek, SelectionConfiguration, DateModifiers, } from './custom-proptypes'; + import STYLES from './BpkCalendar.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-card/src/BpkCardWrapper-test.tsx b/packages/bpk-component-card/src/BpkCardWrapper-test.tsx index 2a981a0f7d..bb1dfeadf4 100644 --- a/packages/bpk-component-card/src/BpkCardWrapper-test.tsx +++ b/packages/bpk-component-card/src/BpkCardWrapper-test.tsx @@ -17,6 +17,7 @@ */ import { render } from '@testing-library/react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { coreAccentDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; diff --git a/packages/bpk-component-card/src/BpkDividedCard.tsx b/packages/bpk-component-card/src/BpkDividedCard.tsx index 38afe47593..eab96e650a 100644 --- a/packages/bpk-component-card/src/BpkDividedCard.tsx +++ b/packages/bpk-component-card/src/BpkDividedCard.tsx @@ -21,6 +21,7 @@ import type { ReactNode } from 'react'; import { cssModules } from '../../bpk-react-utils'; import BpkCard from './BpkCard'; + import STYLES from './BpkDividedCard.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-card/src/accessibility-test.js b/packages/bpk-component-card/src/accessibility-test.js index 610bcf491f..7004cb3758 100644 --- a/packages/bpk-component-card/src/accessibility-test.js +++ b/packages/bpk-component-card/src/accessibility-test.js @@ -20,6 +20,7 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; + import { coreAccentDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import BpkCard from './BpkCard'; diff --git a/packages/bpk-component-chip/index.ts b/packages/bpk-component-chip/index.ts index cd9d472bde..8ddf554ca3 100644 --- a/packages/bpk-component-chip/index.ts +++ b/packages/bpk-component-chip/index.ts @@ -21,10 +21,11 @@ import BpkSelectableChip, { } from './src/BpkSelectableChip'; import BpkDismissibleChip from './src/BpkDismissibleChip'; import BpkDropdownChip from './src/BpkDropdownChip'; -import type { CommonProps } from './src/commonTypes'; import { CHIP_TYPES } from './src/commonTypes'; import themeAttributes from './src/themeAttributes'; +import type { CommonProps } from './src/commonTypes'; + export type BpkSelectableChipProps = SelectableProps; export type BpkDismissibleChipProps = CommonProps; export type BpkDropdownChipProps = CommonProps; diff --git a/packages/bpk-component-chip/src/BpkDismissibleChip-test.tsx b/packages/bpk-component-chip/src/BpkDismissibleChip-test.tsx index 3f5397cac2..e5c33bab78 100644 --- a/packages/bpk-component-chip/src/BpkDismissibleChip-test.tsx +++ b/packages/bpk-component-chip/src/BpkDismissibleChip-test.tsx @@ -19,9 +19,10 @@ import { render } from '@testing-library/react'; import BpkDismissibleChip from './BpkDismissibleChip'; -import type { CommonProps as Props } from './commonTypes'; import { CHIP_TYPES } from './commonTypes'; +import type { CommonProps as Props } from './commonTypes'; + // Just a convenience wrapper that includes the default props so we don't // have to keep writing them for each test. const TestChip = ({ diff --git a/packages/bpk-component-chip/src/BpkDismissibleChip.tsx b/packages/bpk-component-chip/src/BpkDismissibleChip.tsx index a26051e62a..c297f5f2e4 100644 --- a/packages/bpk-component-chip/src/BpkDismissibleChip.tsx +++ b/packages/bpk-component-chip/src/BpkDismissibleChip.tsx @@ -27,8 +27,10 @@ import { cssModules } from '../../bpk-react-utils'; import CloseCircleIconSm from '../../bpk-component-icon/sm/close-circle'; import BpkSelectableChip from './BpkSelectableChip'; -import type { CommonProps as Props } from './commonTypes'; import { CHIP_TYPES } from './commonTypes'; + +import type { CommonProps as Props } from './commonTypes'; + import STYLES from './BpkSelectableChip.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-chip/src/BpkDropdownChip.tsx b/packages/bpk-component-chip/src/BpkDropdownChip.tsx index 44cfa3513e..a2bdfdbb40 100644 --- a/packages/bpk-component-chip/src/BpkDropdownChip.tsx +++ b/packages/bpk-component-chip/src/BpkDropdownChip.tsx @@ -25,9 +25,10 @@ with a trailing accessory view of a chevron down icon. import ChevronDownIconSm from '../../bpk-component-icon/sm/chevron-down'; import BpkSelectableChip from './BpkSelectableChip'; -import type { CommonProps as Props } from './commonTypes'; import { CHIP_TYPES } from './commonTypes'; +import type { CommonProps as Props } from './commonTypes'; + const BpkDropdownChip = ({ disabled = false, leadingAccessoryView = null, diff --git a/packages/bpk-component-chip/src/BpkSelectableChip-test.tsx b/packages/bpk-component-chip/src/BpkSelectableChip-test.tsx index 29ebe4d7f1..5aac1e92ba 100644 --- a/packages/bpk-component-chip/src/BpkSelectableChip-test.tsx +++ b/packages/bpk-component-chip/src/BpkSelectableChip-test.tsx @@ -18,10 +18,11 @@ import { render } from '@testing-library/react'; -import type { Props } from './BpkSelectableChip'; import BpkSelectableChip from './BpkSelectableChip'; import { CHIP_TYPES } from './commonTypes'; +import type { Props } from './BpkSelectableChip'; + // Just a convenience wrapper that includes the default props so we don't // have to keep writing them for each test. const TestChip = ({ diff --git a/packages/bpk-component-chip/src/BpkSelectableChip.tsx b/packages/bpk-component-chip/src/BpkSelectableChip.tsx index 31f4c56e8a..67a03c8cbf 100644 --- a/packages/bpk-component-chip/src/BpkSelectableChip.tsx +++ b/packages/bpk-component-chip/src/BpkSelectableChip.tsx @@ -21,10 +21,12 @@ import type { ReactNode } from 'react'; import { cssModules } from '../../bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; -import STYLES from './BpkSelectableChip.module.scss'; -import type { CommonProps } from './commonTypes'; import { CHIP_TYPES } from './commonTypes'; +import type { CommonProps } from './commonTypes'; + +import STYLES from './BpkSelectableChip.module.scss'; + const getClassName = cssModules(STYLES); export interface Props extends CommonProps { diff --git a/packages/bpk-component-content-cards/src/BpkContentCard-test.js b/packages/bpk-component-content-cards/src/BpkContentCard-test.js index 21f938ef5d..cfd7f9047e 100644 --- a/packages/bpk-component-content-cards/src/BpkContentCard-test.js +++ b/packages/bpk-component-content-cards/src/BpkContentCard-test.js @@ -17,6 +17,7 @@ */ import type { ComponentProps } from 'react'; + import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; diff --git a/packages/bpk-component-content-cards/src/BpkContentCards-test.js b/packages/bpk-component-content-cards/src/BpkContentCards-test.js index d656f4e87f..7b87c2f05c 100644 --- a/packages/bpk-component-content-cards/src/BpkContentCards-test.js +++ b/packages/bpk-component-content-cards/src/BpkContentCards-test.js @@ -17,6 +17,7 @@ */ import type { ComponentProps } from 'react'; + import { render, screen } from '@testing-library/react'; import BpkContentCards from './BpkContentCards'; diff --git a/packages/bpk-component-content-cards/src/BpkContentCards.js b/packages/bpk-component-content-cards/src/BpkContentCards.js index bc87c5a7de..c474c5a1af 100644 --- a/packages/bpk-component-content-cards/src/BpkContentCards.js +++ b/packages/bpk-component-content-cards/src/BpkContentCards.js @@ -23,6 +23,7 @@ import BpkText from '../../bpk-component-text'; import { cssModules } from '../../bpk-react-utils'; import BpkContentCard from './BpkContentCard'; + import STYLES from './BpkContentCards.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-datatable/src/BpkDataTable-test.tsx b/packages/bpk-component-datatable/src/BpkDataTable-test.tsx index 27227c2be7..50417a28f0 100644 --- a/packages/bpk-component-datatable/src/BpkDataTable-test.tsx +++ b/packages/bpk-component-datatable/src/BpkDataTable-test.tsx @@ -19,6 +19,7 @@ import { Fragment } from 'react'; + import { render, screen, fireEvent, within } from '@testing-library/react'; import '@testing-library/jest-dom'; diff --git a/packages/bpk-component-datatable/src/BpkDataTable.tsx b/packages/bpk-component-datatable/src/BpkDataTable.tsx index 08e9617494..c6a1c22386 100644 --- a/packages/bpk-component-datatable/src/BpkDataTable.tsx +++ b/packages/bpk-component-datatable/src/BpkDataTable.tsx @@ -18,16 +18,18 @@ import type { KeyboardEvent } from 'react'; import { useMemo, useState } from 'react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { useTable, useSortBy } from 'react-table'; import { cssModules } from '../../bpk-react-utils'; -import STYLES from './BpkDataTable.module.scss'; import { type BpkDataTableProps, SORT_DIRECTION_TYPES } from './common-types'; import BpkDataTableHeader from './BpkDataTableHeader'; import { createColumnsSchema } from './utils'; +import STYLES from './BpkDataTable.module.scss'; + const getClassName = cssModules(STYLES); const KEYCODES = { diff --git a/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx b/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx index 2108a4d651..e64506bf9e 100644 --- a/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx +++ b/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx @@ -25,9 +25,10 @@ import BpkSmallArrowDownIcon from '../../bpk-component-icon/sm/arrow-down'; import BpkSmallArrowUpIcon from '../../bpk-component-icon/sm/arrow-up'; import { withRtlSupport } from '../../bpk-component-icon'; -import STYLES from './BpkDataTableHeader.module.scss'; import { SORT_DIRECTION_TYPES } from './common-types'; +import STYLES from './BpkDataTableHeader.module.scss'; + const DownIcon = withRtlSupport(BpkSmallArrowDownIcon); const UpIcon = withRtlSupport(BpkSmallArrowUpIcon); diff --git a/packages/bpk-component-datepicker/src/BpkDatepicker.tsx b/packages/bpk-component-datepicker/src/BpkDatepicker.tsx index 6bcd9b469d..50b39cb40e 100644 --- a/packages/bpk-component-datepicker/src/BpkDatepicker.tsx +++ b/packages/bpk-component-datepicker/src/BpkDatepicker.tsx @@ -35,6 +35,7 @@ import { DateUtils, BpkCalendarNav, } from '../../bpk-component-calendar'; + import type { DaysOfWeek, ReactComponent, diff --git a/packages/bpk-component-dialog/index.ts b/packages/bpk-component-dialog/index.ts index e66ed26f3d..4ae1621bcb 100644 --- a/packages/bpk-component-dialog/index.ts +++ b/packages/bpk-component-dialog/index.ts @@ -17,9 +17,10 @@ */ import BpkDialog from './src/BpkDialog'; -import type { Props } from './src/common-types'; import { HEADER_ICON_TYPES } from './src/common-types'; +import type { Props } from './src/common-types'; + export type BpkDialogProps = Props; export default BpkDialog; export { HEADER_ICON_TYPES }; diff --git a/packages/bpk-component-dialog/src/BpkDialog.tsx b/packages/bpk-component-dialog/src/BpkDialog.tsx index 9f1df0cc45..ff7f990d07 100644 --- a/packages/bpk-component-dialog/src/BpkDialog.tsx +++ b/packages/bpk-component-dialog/src/BpkDialog.tsx @@ -21,8 +21,10 @@ import { cssModules, Portal } from '../../bpk-react-utils'; import BpkCloseButton from '../../bpk-component-close-button'; import BpkDialogInner from './BpkDialogInner'; -import type { Props } from './common-types'; import { HEADER_ICON_TYPES } from './common-types'; + +import type { Props } from './common-types'; + import STYLES from './BpkDialog.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-dialog/src/BpkDialogInner.tsx b/packages/bpk-component-dialog/src/BpkDialogInner.tsx index acc3661f02..c22e5d238a 100644 --- a/packages/bpk-component-dialog/src/BpkDialogInner.tsx +++ b/packages/bpk-component-dialog/src/BpkDialogInner.tsx @@ -22,6 +22,7 @@ import { withScrim } from '../../bpk-scrim-utils'; import { BpkContentBubble } from '../../bpk-component-flare'; import { type DialogInnerProps as Props } from './common-types'; + import STYLES from './BpkDialogInner.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-drawer/src/BpkDrawer.js b/packages/bpk-component-drawer/src/BpkDrawer.js index e419c03043..da0421a41f 100644 --- a/packages/bpk-component-drawer/src/BpkDrawer.js +++ b/packages/bpk-component-drawer/src/BpkDrawer.js @@ -25,6 +25,7 @@ import { Portal, cssModules } from '../../bpk-react-utils'; import { withScrim } from '../../bpk-scrim-utils'; import BpkDrawerContent from './BpkDrawerContent'; + import STYLES from './BpkDrawer.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-drawer/src/BpkDrawerContent.js b/packages/bpk-component-drawer/src/BpkDrawerContent.js index f39601ce8c..b6be19d128 100644 --- a/packages/bpk-component-drawer/src/BpkDrawerContent.js +++ b/packages/bpk-component-drawer/src/BpkDrawerContent.js @@ -20,7 +20,9 @@ import PropTypes from 'prop-types'; import type { Node } from 'react'; + import Transition from 'react-transition-group/Transition'; + import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-flare/src/BpkContentBubble.js b/packages/bpk-component-flare/src/BpkContentBubble.js index 17606b97b7..b91788a899 100755 --- a/packages/bpk-component-flare/src/BpkContentBubble.js +++ b/packages/bpk-component-flare/src/BpkContentBubble.js @@ -21,6 +21,7 @@ import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; import BpkFlareBar from './BpkFlareBar'; + import STYLES from './bpk-content-bubble.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-flare/src/BpkFlareBar.js b/packages/bpk-component-flare/src/BpkFlareBar.js index 085d5b5276..287f8390c0 100644 --- a/packages/bpk-component-flare/src/BpkFlareBar.js +++ b/packages/bpk-component-flare/src/BpkFlareBar.js @@ -20,10 +20,11 @@ import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; -import STYLES from './bpk-flare-bar.module.scss'; import Pointer from './__generated__/js/pointer'; import CornerRadius from './__generated__/js/corner-radius'; +import STYLES from './bpk-flare-bar.module.scss'; + const getClassName = cssModules(STYLES); const BpkFlareBar = (props) => { diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx b/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx index 5758355cb7..d1538b66df 100644 --- a/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx +++ b/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx @@ -24,6 +24,7 @@ import { cssModules } from '../../bpk-react-utils'; import BpkIconHeart from '../../bpk-component-icon/sm/heart'; import BpkFloatingNotification from './BpkFloatingNotification'; + import STYLES from './BpkFloatingNotification.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx index 2b268ed2ba..c7b40eb6ca 100644 --- a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx +++ b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx @@ -19,6 +19,7 @@ import type { MouseEvent, FunctionComponent } from 'react'; import { useEffect, useState } from 'react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { CSSTransition } from 'react-transition-group'; diff --git a/packages/bpk-component-form-validation/src/BpkFormValidation.js b/packages/bpk-component-form-validation/src/BpkFormValidation.js index 3480716d4a..a63d26de3a 100644 --- a/packages/bpk-component-form-validation/src/BpkFormValidation.js +++ b/packages/bpk-component-form-validation/src/BpkFormValidation.js @@ -17,6 +17,7 @@ */ import PropTypes from 'prop-types'; + import { lineHeightSm, iconSizeSm, diff --git a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo-test.tsx b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo-test.tsx index 6ff3683846..d4241349b8 100644 --- a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo-test.tsx +++ b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo-test.tsx @@ -21,7 +21,9 @@ import { fireEvent, render } from '@testing-library/react'; import { cssModules } from '../../bpk-react-utils'; import BpkGraphicPromo, { TEXT_ALIGN } from './BpkGraphicPromo'; + import type { Props } from './BpkGraphicPromo'; + import STYLES from './BpkGraphicPromo.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js index b09c03b15d..30f1434f39 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js @@ -24,6 +24,7 @@ import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; import { HORIZONTAL_NAV_TYPES } from './BpkHorizontalNav'; + import STYLES from './BpkHorizontalNavItem.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-icon/index.tsx b/packages/bpk-component-icon/index.tsx index db39853fd0..2c4bd46593 100644 --- a/packages/bpk-component-icon/index.tsx +++ b/packages/bpk-component-icon/index.tsx @@ -17,6 +17,7 @@ */ import type { ComponentType } from 'react'; + import { iconSizeSm, iconSizeLg, diff --git a/packages/bpk-component-icon/src/withAlignment-test.tsx b/packages/bpk-component-icon/src/withAlignment-test.tsx index 94faf4ab1f..b96836c581 100644 --- a/packages/bpk-component-icon/src/withAlignment-test.tsx +++ b/packages/bpk-component-icon/src/withAlignment-test.tsx @@ -17,6 +17,7 @@ */ import { render } from '@testing-library/react'; + import { lineHeightSm, lineHeightBase, diff --git a/packages/bpk-component-icon/src/withRtlSupport.tsx b/packages/bpk-component-icon/src/withRtlSupport.tsx index 2a38e73b7a..f2a4b4fbc2 100644 --- a/packages/bpk-component-icon/src/withRtlSupport.tsx +++ b/packages/bpk-component-icon/src/withRtlSupport.tsx @@ -18,9 +18,10 @@ import { cssModules } from '../../bpk-react-utils'; -import STYLES from './BpkIcon.module.scss'; import classNameModifierHOCFactory from './classNameModifierHOCFactory'; +import STYLES from './BpkIcon.module.scss'; + const getClassName = cssModules(STYLES); export default classNameModifierHOCFactory('withRtlSupport', [ diff --git a/packages/bpk-component-image/index.ts b/packages/bpk-component-image/index.ts index 6b05cef12a..9911f6337d 100644 --- a/packages/bpk-component-image/index.ts +++ b/packages/bpk-component-image/index.ts @@ -18,11 +18,12 @@ import BpkImage from './src/BpkImage'; import BpkBackgroundImage from './src/BpkBackgroundImage'; -import type { BpkBackgroundImageProps } from './src/BpkBackgroundImage'; import withLazyLoading from './src/withLazyLoading'; import withLoadingBehavior from './src/withLoadingBehavior'; import BORDER_RADIUS_STYLES from './src/BpkImageBorderRadiusStyles'; +import type { BpkBackgroundImageProps } from './src/BpkBackgroundImage'; + export type { BpkBackgroundImageProps }; export default BpkImage; diff --git a/packages/bpk-component-image/src/BpkBackgroundImage-test.tsx b/packages/bpk-component-image/src/BpkBackgroundImage-test.tsx index 5529533709..6871f5310c 100644 --- a/packages/bpk-component-image/src/BpkBackgroundImage-test.tsx +++ b/packages/bpk-component-image/src/BpkBackgroundImage-test.tsx @@ -17,6 +17,7 @@ */ import { render } from '@testing-library/react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { spacingSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; diff --git a/packages/bpk-component-image/src/BpkBackgroundImage.tsx b/packages/bpk-component-image/src/BpkBackgroundImage.tsx index a38eb239f9..0b046f7299 100644 --- a/packages/bpk-component-image/src/BpkBackgroundImage.tsx +++ b/packages/bpk-component-image/src/BpkBackgroundImage.tsx @@ -18,8 +18,10 @@ import { Component } from 'react'; import type { ReactNode, CSSProperties } from 'react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import CSSTransition from 'react-transition-group/CSSTransition'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; diff --git a/packages/bpk-component-image/src/BpkImage-test.tsx b/packages/bpk-component-image/src/BpkImage-test.tsx index 37b389795c..aebaeab43b 100644 --- a/packages/bpk-component-image/src/BpkImage-test.tsx +++ b/packages/bpk-component-image/src/BpkImage-test.tsx @@ -17,6 +17,7 @@ */ import { render, screen, fireEvent } from '@testing-library/react'; + import { spacingSm, breakpoints as BREAKPOINTS, // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. diff --git a/packages/bpk-component-image/src/BpkImage.tsx b/packages/bpk-component-image/src/BpkImage.tsx index 6e0b7a6878..f08e7666ca 100644 --- a/packages/bpk-component-image/src/BpkImage.tsx +++ b/packages/bpk-component-image/src/BpkImage.tsx @@ -17,8 +17,10 @@ */ import { Component } from 'react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import CSSTransition from 'react-transition-group/CSSTransition'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; @@ -26,9 +28,10 @@ import { cssModules } from '../../bpk-react-utils'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { BpkSpinner } from '../../bpk-component-spinner'; -import STYLES from './BpkImage.module.scss'; import BORDER_RADIUS_STYLES from './BpkImageBorderRadiusStyles'; +import STYLES from './BpkImage.module.scss'; + const getClassName = cssModules(STYLES); type ImageProps = { diff --git a/packages/bpk-component-image/src/accessibility-test.tsx b/packages/bpk-component-image/src/accessibility-test.tsx index aef893661a..364041d7fb 100644 --- a/packages/bpk-component-image/src/accessibility-test.tsx +++ b/packages/bpk-component-image/src/accessibility-test.tsx @@ -18,6 +18,7 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { spacingSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; diff --git a/packages/bpk-component-image/src/withLazyLoading.tsx b/packages/bpk-component-image/src/withLazyLoading.tsx index 1888c5c3e0..0765a89fef 100644 --- a/packages/bpk-component-image/src/withLazyLoading.tsx +++ b/packages/bpk-component-image/src/withLazyLoading.tsx @@ -18,6 +18,7 @@ import type { ComponentType } from 'react'; import { Component } from 'react'; + import throttle from 'lodash/throttle'; import { wrapDisplayName } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-infinite-scroll/src/accessibility-test.js b/packages/bpk-component-infinite-scroll/src/accessibility-test.js index 1d339a52ba..34c61cc37e 100644 --- a/packages/bpk-component-infinite-scroll/src/accessibility-test.js +++ b/packages/bpk-component-infinite-scroll/src/accessibility-test.js @@ -17,6 +17,7 @@ */ import PropTypes from 'prop-types'; + import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js index 88675ee732..6de580f2da 100644 --- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js +++ b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js @@ -17,6 +17,7 @@ */ import PropTypes from 'prop-types'; + import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js index 0d8857adbc..55f6638130 100644 --- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js +++ b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js @@ -21,6 +21,7 @@ import { Component } from 'react'; import type { Element, Config, AbstractComponent } from 'react'; import PropTypes from 'prop-types'; + import omit from 'lodash/omit'; import extend from 'lodash/extend'; @@ -28,6 +29,7 @@ import { cssModules } from '../../bpk-react-utils'; import './intersection-observer'; import DataSource from './DataSource'; + import STYLES from './withInfiniteScroll.module.scss'; const getClassNames = cssModules(STYLES); diff --git a/packages/bpk-component-info-banner/src/AnimateAndFade.tsx b/packages/bpk-component-info-banner/src/AnimateAndFade.tsx index d2733a2eef..4244aab3c1 100644 --- a/packages/bpk-component-info-banner/src/AnimateAndFade.tsx +++ b/packages/bpk-component-info-banner/src/AnimateAndFade.tsx @@ -18,11 +18,13 @@ import { Component } from 'react'; import type { ReactNode } from 'react'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { TransitionGroup, CSSTransition } from 'react-transition-group'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; + import { cssModules } from '../../bpk-react-utils'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkAnimateHeight from '../../bpk-animate-height'; diff --git a/packages/bpk-component-info-banner/src/BpkInfoBanner.tsx b/packages/bpk-component-info-banner/src/BpkInfoBanner.tsx index bfe7e62703..5ba2174638 100644 --- a/packages/bpk-component-info-banner/src/BpkInfoBanner.tsx +++ b/packages/bpk-component-info-banner/src/BpkInfoBanner.tsx @@ -16,9 +16,10 @@ * limitations under the License. */ -import type { CommonProps } from './common-types'; import BpkInfoBannerInner from './BpkInfoBannerInner'; +import type { CommonProps } from './common-types'; + const BpkInfoBanner = ({ animateOnEnter = false, animateOnLeave = false, diff --git a/packages/bpk-component-info-banner/src/BpkInfoBannerDismissable.tsx b/packages/bpk-component-info-banner/src/BpkInfoBannerDismissable.tsx index f53e0629b4..ec43c5025f 100644 --- a/packages/bpk-component-info-banner/src/BpkInfoBannerDismissable.tsx +++ b/packages/bpk-component-info-banner/src/BpkInfoBannerDismissable.tsx @@ -16,9 +16,10 @@ * limitations under the License. */ -import type { CommonProps, OnDismissHandler } from './common-types'; import BpkInfoBannerInner, { CONFIGURATION } from './BpkInfoBannerInner'; +import type { CommonProps, OnDismissHandler } from './common-types'; + export type Props = CommonProps & { dismissButtonLabel: string; onDismiss?: OnDismissHandler; diff --git a/packages/bpk-component-info-banner/src/BpkInfoBannerExpandable.tsx b/packages/bpk-component-info-banner/src/BpkInfoBannerExpandable.tsx index a00d9267f6..3e13de46cd 100644 --- a/packages/bpk-component-info-banner/src/BpkInfoBannerExpandable.tsx +++ b/packages/bpk-component-info-banner/src/BpkInfoBannerExpandable.tsx @@ -18,9 +18,10 @@ import type { ReactNode } from 'react'; -import type { CommonProps, OnExpandToggleHandler, ExpandableBannerAction } from './common-types'; import BpkInfoBannerInner, { CONFIGURATION } from './BpkInfoBannerInner'; +import type { CommonProps, OnExpandToggleHandler, ExpandableBannerAction } from './common-types'; + export type Props = CommonProps & { children: ReactNode; expanded?: boolean; diff --git a/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx b/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx index ed46368e63..9e752d2bca 100644 --- a/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx +++ b/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx @@ -21,6 +21,7 @@ */ import type { ReactNode, FunctionComponent, SVGProps } from 'react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; @@ -40,6 +41,8 @@ import InfoCircleIcon from '../../bpk-component-icon/sm/information-circle'; import { cssModules } from '../../bpk-react-utils'; import AnimateAndFade from './AnimateAndFade'; +import { ALERT_TYPES, STYLE_TYPES } from './common-types'; + import type { AlertTypeValue, CommonProps, @@ -47,7 +50,7 @@ import type { OnExpandToggleHandler, ExpandableBannerAction, } from './common-types'; -import { ALERT_TYPES, STYLE_TYPES } from './common-types'; + import STYLES from './BpkInfoBanner.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-info-banner/src/withBannerAlertState.tsx b/packages/bpk-component-info-banner/src/withBannerAlertState.tsx index 824d599bfb..379d252305 100644 --- a/packages/bpk-component-info-banner/src/withBannerAlertState.tsx +++ b/packages/bpk-component-info-banner/src/withBannerAlertState.tsx @@ -22,6 +22,7 @@ import type { ComponentType } from 'react'; import { wrapDisplayName } from '../../bpk-react-utils'; import BpkInfoBannerExpandable from './BpkInfoBannerExpandable'; + import type { Props as BpkInfoBannerExpandableProps } from './BpkInfoBannerExpandable'; import type { Props as BpkInfoBannerDismissableProps } from './BpkInfoBannerDismissable'; diff --git a/packages/bpk-component-input/src/BpkInput.tsx b/packages/bpk-component-input/src/BpkInput.tsx index fbb24161fa..05b6b3a786 100644 --- a/packages/bpk-component-input/src/BpkInput.tsx +++ b/packages/bpk-component-input/src/BpkInput.tsx @@ -21,10 +21,12 @@ import { Component } from 'react'; import { cssModules } from '../../bpk-react-utils'; import BpkClearButton from './BpkClearButton'; -import STYLES from './BpkInput.module.scss'; import { CLEAR_BUTTON_MODES, defaultProps } from './common-types'; + import type { Props } from './common-types'; +import STYLES from './BpkInput.module.scss'; + type State = { persistClearButton: boolean; }; diff --git a/packages/bpk-component-link/src/BpkButtonLink.js b/packages/bpk-component-link/src/BpkButtonLink.js index 7cf29ef038..2f95bdad51 100644 --- a/packages/bpk-component-link/src/BpkButtonLink.js +++ b/packages/bpk-component-link/src/BpkButtonLink.js @@ -24,6 +24,7 @@ import type { Node } from 'react'; import { cssModules } from '../../bpk-react-utils'; import themeAttributes from './themeAttributes'; + import STYLES from './BpkLink.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-link/src/BpkLink-test.js b/packages/bpk-component-link/src/BpkLink-test.js index a1e1b4a06b..c1ab2e64e3 100644 --- a/packages/bpk-component-link/src/BpkLink-test.js +++ b/packages/bpk-component-link/src/BpkLink-test.js @@ -18,9 +18,10 @@ /* @flow strict */ -import { render } from '@testing-library/react'; import { createRef } from 'react'; +import { render } from '@testing-library/react'; + import BpkLink, { themeAttributes } from './BpkLink'; describe('BpkLink', () => { diff --git a/packages/bpk-component-link/src/BpkLink.js b/packages/bpk-component-link/src/BpkLink.js index 14156002ac..f1414e7bf1 100644 --- a/packages/bpk-component-link/src/BpkLink.js +++ b/packages/bpk-component-link/src/BpkLink.js @@ -26,6 +26,7 @@ import { cssModules } from '../../bpk-react-utils'; import themeAttributes, { linkAlternateThemeAttributes, } from './themeAttributes'; + import STYLES from './BpkLink.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-map/src/BpkIconMarker.js b/packages/bpk-component-map/src/BpkIconMarker.js index 98ecb4e969..676ac06389 100644 --- a/packages/bpk-component-map/src/BpkIconMarker.js +++ b/packages/bpk-component-map/src/BpkIconMarker.js @@ -26,6 +26,7 @@ import { cssModules } from '../../bpk-react-utils'; import BpkIconMarkerBackground from './BpkIconMarkerBackground'; import { LatLongPropType, type LatLong } from './common-types'; import BpkBasicMapMarker from './BpkBasicMapMarker'; + import STYLES from './BpkIconMarker.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-map/src/BpkMap.js b/packages/bpk-component-map/src/BpkMap.js index a1808fc1d2..83de10bb58 100644 --- a/packages/bpk-component-map/src/BpkMap.js +++ b/packages/bpk-component-map/src/BpkMap.js @@ -21,11 +21,13 @@ import type { Node } from 'react'; import { useCallback, useRef } from 'react'; import PropTypes from 'prop-types'; + import { GoogleMap } from '@react-google-maps/api'; import { cssModules } from '../../bpk-react-utils'; import { LatLongPropType, type LatLong } from './common-types'; + import STYLES from './BpkMap.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-map/src/BpkOverlayView.js b/packages/bpk-component-map/src/BpkOverlayView.js index e3186f0b6e..f21e92c6c5 100644 --- a/packages/bpk-component-map/src/BpkOverlayView.js +++ b/packages/bpk-component-map/src/BpkOverlayView.js @@ -20,6 +20,7 @@ import type { Node } from 'react'; import PropTypes from 'prop-types'; + import { OverlayView } from '@react-google-maps/api'; import { LatLongPropType, type LatLong } from './common-types'; diff --git a/packages/bpk-component-map/src/BpkPriceMarker.js b/packages/bpk-component-map/src/BpkPriceMarker.js index a6515d6d08..002821b532 100644 --- a/packages/bpk-component-map/src/BpkPriceMarker.js +++ b/packages/bpk-component-map/src/BpkPriceMarker.js @@ -25,6 +25,7 @@ import BpkText, { TEXT_STYLES } from '../../bpk-component-text/src/BpkText'; import { LatLongPropType, type LatLong } from './common-types'; import BpkBasicMapMarker from './BpkBasicMapMarker'; + import STYLES from './BpkPriceMarker.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-map/src/withGoogleMapsScript.js b/packages/bpk-component-map/src/withGoogleMapsScript.js index 094758d1d8..d917a0e867 100644 --- a/packages/bpk-component-map/src/withGoogleMapsScript.js +++ b/packages/bpk-component-map/src/withGoogleMapsScript.js @@ -19,6 +19,7 @@ import type { ComponentType } from 'react'; import PropTypes from 'prop-types'; + import { useJsApiLoader } from '@react-google-maps/api'; import DefaultLoadingElement from './DefaultLoadingElement'; diff --git a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer-test.js b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer-test.js index ee18ab3723..1211377b34 100644 --- a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer-test.js +++ b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer-test.js @@ -19,6 +19,7 @@ /* @flow strict */ import { render } from '@testing-library/react'; + import { colorPanjin } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import BpkMobileScrollContainer, { diff --git a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js index 2206148049..77ea12d6f2 100644 --- a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +++ b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js @@ -19,10 +19,11 @@ /* @flow strict */ import PropTypes from 'prop-types'; -import debounce from 'lodash.debounce'; import type { Node } from 'react'; import { Component } from 'react'; +import debounce from 'lodash.debounce'; + import { cssModules, isRTL } from '../../bpk-react-utils'; import STYLES from './BpkMobileScrollContainer.module.scss'; diff --git a/packages/bpk-component-modal/index.ts b/packages/bpk-component-modal/index.ts index cd833d88ca..edf07b9d69 100644 --- a/packages/bpk-component-modal/index.ts +++ b/packages/bpk-component-modal/index.ts @@ -19,10 +19,11 @@ import { BpkModalV2 } from './src/BpkModalV2/BpkModal'; import themeAttributes from './src/themeAttributes'; import BpkModal from './src/BpkModal'; -import type { Props } from './src/BpkModal'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { propTypes, defaultProps } from './src/legacy-prop-types'; +import type { Props } from './src/BpkModal'; + export type BpkModalProps = Props; export default BpkModal; diff --git a/packages/bpk-component-modal/src/BpkModal.tsx b/packages/bpk-component-modal/src/BpkModal.tsx index cf388bd468..77fdc48d01 100644 --- a/packages/bpk-component-modal/src/BpkModal.tsx +++ b/packages/bpk-component-modal/src/BpkModal.tsx @@ -21,10 +21,12 @@ import type { ReactNode } from 'react'; import { withScrim } from '../../bpk-scrim-utils'; import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils'; -import STYLES from './BpkModal.module.scss'; import BpkModalInner from './BpkModalInner'; + import type { Props as ModalDialogProps } from './BpkModalInner'; +import STYLES from './BpkModal.module.scss'; + const getClassName = cssModules(STYLES); const ScrimBpkModalInner = withScrim(BpkModalInner); diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.tsx b/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.tsx index 3bc49d728c..cca448bffe 100644 --- a/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.tsx +++ b/packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.tsx @@ -22,9 +22,10 @@ import type { ComponentProps, MouseEvent, ReactNode } from 'react'; import { BpkButtonLink } from '../../bpk-component-link'; import { cssModules } from '../../bpk-react-utils'; -import STYLES from './BpkNavigationBarButtonLink.module.scss'; import { BAR_STYLES, type BarStyle } from './BpkNavigationBar'; +import STYLES from './BpkNavigationBarButtonLink.module.scss'; + const getClassName = cssModules(STYLES); export interface Props extends ComponentProps { diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.tsx b/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.tsx index e0d8e42ec0..438440649d 100644 --- a/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.tsx +++ b/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.tsx @@ -22,9 +22,10 @@ import type { ComponentType, MouseEvent, ReactNode } from 'react'; import BpkIconButton from '../../bpk-component-close-button'; import { cssModules } from '../../bpk-react-utils'; -import STYLES from './BpkNavigationBarIconButton.module.scss'; import { BAR_STYLES, type BarStyle } from './BpkNavigationBar'; +import STYLES from './BpkNavigationBarIconButton.module.scss'; + const getClassName = cssModules(STYLES); export type Props = { diff --git a/packages/bpk-component-nudger/src/BpkConfigurableNudger.tsx b/packages/bpk-component-nudger/src/BpkConfigurableNudger.tsx index 7c8149f092..93aba44ae3 100644 --- a/packages/bpk-component-nudger/src/BpkConfigurableNudger.tsx +++ b/packages/bpk-component-nudger/src/BpkConfigurableNudger.tsx @@ -25,6 +25,7 @@ import PlusIcon from '../../bpk-component-icon/sm/plus'; import { cssModules } from '../../bpk-react-utils'; import { type CommonProps } from './common-types'; + import STYLES from './BpkNudger.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-nudger/src/BpkNudger.tsx b/packages/bpk-component-nudger/src/BpkNudger.tsx index ede2b2f4bf..5e7aa4df47 100644 --- a/packages/bpk-component-nudger/src/BpkNudger.tsx +++ b/packages/bpk-component-nudger/src/BpkNudger.tsx @@ -23,6 +23,7 @@ import BpkLabel from '../../bpk-component-label'; import BpkConfigurableNudger from './BpkConfigurableNudger'; import { type CommonProps } from './common-types'; + import STYLES from './BpkNudger.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-page-indicator/src/BpkPageIndicator.js b/packages/bpk-component-page-indicator/src/BpkPageIndicator.js index 7ebb51b7d2..42cf808a95 100644 --- a/packages/bpk-component-page-indicator/src/BpkPageIndicator.js +++ b/packages/bpk-component-page-indicator/src/BpkPageIndicator.js @@ -22,6 +22,7 @@ import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; import NavButton, { DIRECTIONS } from './NavButton'; + import STYLES from './BpkPageIndicator.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-pagination/src/BpkPagination.js b/packages/bpk-component-pagination/src/BpkPagination.js index 3664c7dca8..776e8c4164 100644 --- a/packages/bpk-component-pagination/src/BpkPagination.js +++ b/packages/bpk-component-pagination/src/BpkPagination.js @@ -22,6 +22,7 @@ import { cssModules } from '../../bpk-react-utils'; import BpkPaginationList from './BpkPaginationList'; import BpkPaginationNudger from './BpkPaginationNudger'; + import STYLES from './BpkPagination.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-pagination/src/BpkPaginationList.js b/packages/bpk-component-pagination/src/BpkPaginationList.js index 06559e164e..eab7515298 100644 --- a/packages/bpk-component-pagination/src/BpkPaginationList.js +++ b/packages/bpk-component-pagination/src/BpkPaginationList.js @@ -22,6 +22,7 @@ import { cssModules } from '../../bpk-react-utils'; import BpkPaginationPage from './BpkPaginationPage'; import BpkPaginationBreak from './BpkPaginationBreak'; + import STYLES from './BpkPaginationList.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-popover/src/BpkPopover.js b/packages/bpk-component-popover/src/BpkPopover.js index 7632954f1f..4a1072a7d7 100644 --- a/packages/bpk-component-popover/src/BpkPopover.js +++ b/packages/bpk-component-popover/src/BpkPopover.js @@ -26,9 +26,10 @@ import { BpkButtonLink } from '../../bpk-component-link'; import BpkCloseButton from '../../bpk-component-close-button'; import { TransitionInitialMount, cssModules } from '../../bpk-react-utils'; -import STYLES from './BpkPopover.module.scss'; import { ARROW_ID } from './constants'; +import STYLES from './BpkPopover.module.scss'; + const getClassName = cssModules(STYLES); const EVENT_SOURCES = { diff --git a/packages/bpk-component-popover/src/BpkPopoverPortal-test.js b/packages/bpk-component-popover/src/BpkPopoverPortal-test.js index ce7ba691e5..7afbda9c73 100644 --- a/packages/bpk-component-popover/src/BpkPopoverPortal-test.js +++ b/packages/bpk-component-popover/src/BpkPopoverPortal-test.js @@ -19,6 +19,7 @@ /* @flow strict */ import { createRef } from 'react'; + import { render } from '@testing-library/react'; import '@testing-library/jest-dom'; diff --git a/packages/bpk-component-popover/src/BpkPopoverPortal.js b/packages/bpk-component-popover/src/BpkPopoverPortal.js index bc1ae7f213..6ae8f08895 100644 --- a/packages/bpk-component-popover/src/BpkPopoverPortal.js +++ b/packages/bpk-component-popover/src/BpkPopoverPortal.js @@ -18,20 +18,22 @@ /* @flow strict */ -import { createPopper } from '@popperjs/core'; import PropTypes from 'prop-types'; import type { Node } from 'react'; import { Component } from 'react'; + +import { createPopper } from '@popperjs/core'; import focusStore from 'a11y-focus-store'; import { Portal, cssModules } from '../../bpk-react-utils'; import keyboardFocusScope from './keyboardFocusScope'; -import STYLES from './BpkPopover.module.scss'; import BpkPopover, { type Props as PopoverProps, } from './BpkPopover'; +import STYLES from './BpkPopover.module.scss'; + const getClassName = cssModules(STYLES); export type Props = { diff --git a/packages/bpk-component-price/src/BpkPrice.js b/packages/bpk-component-price/src/BpkPrice.js index 0740a42460..bf1d4f8c44 100644 --- a/packages/bpk-component-price/src/BpkPrice.js +++ b/packages/bpk-component-price/src/BpkPrice.js @@ -22,9 +22,10 @@ import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; -import STYLES from './BpkPrice.module.scss'; import { SIZES, ALIGNS } from './common-types'; +import STYLES from './BpkPrice.module.scss'; + type Props = { price: string, size: $Values, diff --git a/packages/bpk-component-progress/src/BpkProgress.js b/packages/bpk-component-progress/src/BpkProgress.js index 80e9d87685..0441d51777 100644 --- a/packages/bpk-component-progress/src/BpkProgress.js +++ b/packages/bpk-component-progress/src/BpkProgress.js @@ -20,6 +20,7 @@ import PropTypes from 'prop-types'; import { Component } from 'react'; + import clamp from 'lodash.clamp'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-rating/src/BpkRating.js b/packages/bpk-component-rating/src/BpkRating.js index 4ae1db8bc6..4f609dde65 100644 --- a/packages/bpk-component-rating/src/BpkRating.js +++ b/packages/bpk-component-rating/src/BpkRating.js @@ -19,14 +19,16 @@ import type { Node } from 'react'; import PropTypes from 'prop-types'; + import clamp from 'lodash.clamp'; import { cssModules } from '../../bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; -import STYLES from './BpkRating.module.scss'; import { RATING_SIZES, RATING_SCALES } from './common-types'; +import STYLES from './BpkRating.module.scss'; + const getClassName = cssModules(STYLES); const getMinValue = () => diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.tsx index 7b4e3bb81e..8895e20cc0 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.tsx @@ -17,6 +17,7 @@ */ import { BpkCalendarDate } from '../../bpk-component-calendar'; + import type { BpkCalendarDateProps } from '../../bpk-component-calendar'; type Props = Partial & { diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid-test.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid-test.tsx index bf654de3fc..243b70f43f 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid-test.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid-test.tsx @@ -17,9 +17,11 @@ */ import PropTypes from 'prop-types'; + import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { addMonths, isWeekend } from 'date-fns'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { colorPanjin } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.tsx index d5698736b0..347ebc0416 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.tsx @@ -21,6 +21,7 @@ import type { ElementType } from 'react'; import { cssModules } from '../../bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; import { BpkCalendarGrid } from '../../bpk-component-calendar'; + import type { BpkCalendarGridProps } from '../../bpk-component-calendar'; import STYLES from './BpkScrollableCalendarGrid.module.scss'; diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx index 0eef8afdc2..efa6e147be 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx @@ -17,10 +17,12 @@ */ import PropTypes from 'prop-types'; + import { isWeekend } from 'date-fns/isWeekend'; +import { render } from '@testing-library/react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { colorPanjin } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { render } from '@testing-library/react'; import { DateUtils } from '../../bpk-component-calendar'; import { formatDateFull, formatMonth } from '../test-utils'; diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx index 1c95f64ee0..3f42ae3126 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx @@ -18,6 +18,7 @@ import { useRef, useState, useMemo, useEffect } from 'react'; import type { ElementType } from 'react'; + import { startOfDay, startOfMonth } from 'date-fns'; import { VariableSizeList as List } from 'react-window'; import AutoSizer from 'react-virtualized-auto-sizer'; @@ -27,12 +28,14 @@ import { CALENDAR_SELECTION_TYPE, DateUtils, } from '../../bpk-component-calendar'; -import type { BpkCalendarGridProps, SelectionConfiguration } from '../../bpk-component-calendar'; -import STYLES from './BpkScrollableCalendarGridList.module.scss'; import BpkScrollableCalendarGrid from './BpkScrollableCalendarGrid'; import { getMonthsArray, getMonthItemHeights } from './utils'; +import type { BpkCalendarGridProps, SelectionConfiguration } from '../../bpk-component-calendar'; + +import STYLES from './BpkScrollableCalendarGridList.module.scss'; + const getClassName = cssModules(STYLES); // These constants are here to facilitate calculating the height diff --git a/packages/bpk-component-slider/src/BpkSlider.tsx b/packages/bpk-component-slider/src/BpkSlider.tsx index 47aca825b1..97cc348a00 100644 --- a/packages/bpk-component-slider/src/BpkSlider.tsx +++ b/packages/bpk-component-slider/src/BpkSlider.tsx @@ -16,9 +16,10 @@ * limitations under the License. */ +import PropTypes from 'prop-types'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import Slider from 'react-slider'; -import PropTypes from 'prop-types'; import { cssModules, isRTL } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.js b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.js index 213e340f9c..83429fa294 100644 --- a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.js +++ b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.js @@ -19,13 +19,15 @@ /* @flow strict */ import PropTypes from 'prop-types'; + import XlSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/xl'; import { cssModules } from '../../bpk-react-utils'; -import STYLES from './BpkSpinner.module.scss'; import SPINNER_TYPES from './spinnerTypes'; +import STYLES from './BpkSpinner.module.scss'; + const getClassName = cssModules(STYLES); type Props = { diff --git a/packages/bpk-component-spinner/src/BpkLargeSpinner.js b/packages/bpk-component-spinner/src/BpkLargeSpinner.js index 17cbccafa4..72c3de518f 100644 --- a/packages/bpk-component-spinner/src/BpkLargeSpinner.js +++ b/packages/bpk-component-spinner/src/BpkLargeSpinner.js @@ -19,13 +19,15 @@ /* @flow strict */ import PropTypes from 'prop-types'; + import LgSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/lg'; import { cssModules } from '../../bpk-react-utils'; -import STYLES from './BpkSpinner.module.scss'; import SPINNER_TYPES from './spinnerTypes'; +import STYLES from './BpkSpinner.module.scss'; + const getClassName = cssModules(STYLES); type Props = { diff --git a/packages/bpk-component-spinner/src/BpkSpinner.js b/packages/bpk-component-spinner/src/BpkSpinner.js index c839afdb4d..bca039bc98 100644 --- a/packages/bpk-component-spinner/src/BpkSpinner.js +++ b/packages/bpk-component-spinner/src/BpkSpinner.js @@ -19,13 +19,15 @@ /* @flow strict */ import PropTypes from 'prop-types'; + import SmSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/sm'; import { cssModules } from '../../bpk-react-utils'; -import STYLES from './BpkSpinner.module.scss'; import SPINNER_TYPES from './spinnerTypes'; +import STYLES from './BpkSpinner.module.scss'; + const getClassName = cssModules(STYLES); type Props = { diff --git a/packages/bpk-component-split-input/src/BpkSplitInput.js b/packages/bpk-component-split-input/src/BpkSplitInput.js index fb02a20eb9..4ba13ceb87 100644 --- a/packages/bpk-component-split-input/src/BpkSplitInput.js +++ b/packages/bpk-component-split-input/src/BpkSplitInput.js @@ -24,6 +24,7 @@ import { cssModules } from '../../bpk-react-utils'; import { INPUT_TYPES } from '../../bpk-component-input'; import InputField from './BpkInputField'; + import STYLES from './BpkSplitInput.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-star-rating/src/BpkInteractiveStar.js b/packages/bpk-component-star-rating/src/BpkInteractiveStar.js index 4470f7f795..1312124a37 100644 --- a/packages/bpk-component-star-rating/src/BpkInteractiveStar.js +++ b/packages/bpk-component-star-rating/src/BpkInteractiveStar.js @@ -23,6 +23,7 @@ import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; import { BpkStarNonRtl, STAR_TYPES } from './BpkStar'; + import STYLES from './BpkInteractiveStar.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-star-rating/src/BpkInteractiveStarRating.js b/packages/bpk-component-star-rating/src/BpkInteractiveStarRating.js index 62e8c87904..8d64e61c14 100644 --- a/packages/bpk-component-star-rating/src/BpkInteractiveStarRating.js +++ b/packages/bpk-component-star-rating/src/BpkInteractiveStarRating.js @@ -24,6 +24,7 @@ import { cssModules } from '../../bpk-react-utils'; import { STAR_TYPES } from './BpkStar'; import BpkInteractiveStar from './BpkInteractiveStar'; + import STYLES from './BpkStarRating.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-star-rating/src/BpkStarRating.js b/packages/bpk-component-star-rating/src/BpkStarRating.js index 4bbd76cf46..9d9a5c3f23 100644 --- a/packages/bpk-component-star-rating/src/BpkStarRating.js +++ b/packages/bpk-component-star-rating/src/BpkStarRating.js @@ -23,6 +23,7 @@ import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; import BpkStar, { STAR_TYPES } from './BpkStar'; + import STYLES from './BpkStarRating.module.scss'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-component-text/src/BpkText-test.tsx b/packages/bpk-component-text/src/BpkText-test.tsx index 97ee23e259..07abb1d7b8 100644 --- a/packages/bpk-component-text/src/BpkText-test.tsx +++ b/packages/bpk-component-text/src/BpkText-test.tsx @@ -18,9 +18,10 @@ import { render } from '@testing-library/react'; -import type { TextStyle } from './BpkText'; import BpkText from './BpkText'; +import type { TextStyle } from './BpkText'; + describe('BpkText', () => { it('should render correctly', () => { const { asFragment } = render( diff --git a/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js b/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js index 1528b56968..002cd678fa 100644 --- a/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js +++ b/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js @@ -22,10 +22,11 @@ import BpkLabel from '../../bpk-component-label'; import BpkSelect from '../../bpk-component-select'; import { cssModules } from '../../bpk-react-utils'; -import STYLES from './BpkThemeToggle.module.scss'; import bpkCustomThemes from './theming'; import { getHtmlElement, THEME_CHANGE_EVENT } from './utils'; +import STYLES from './BpkThemeToggle.module.scss'; + const inputId = 'theme-select'; const getClassName = cssModules(STYLES); const availableThemes = Object.keys(bpkCustomThemes); diff --git a/packages/bpk-component-theme-toggle/src/updateOnThemeChange-test.js b/packages/bpk-component-theme-toggle/src/updateOnThemeChange-test.js index bd94dfa67c..c9e0258997 100644 --- a/packages/bpk-component-theme-toggle/src/updateOnThemeChange-test.js +++ b/packages/bpk-component-theme-toggle/src/updateOnThemeChange-test.js @@ -17,6 +17,7 @@ */ import PropTypes from 'prop-types'; + import { render, fireEvent } from '@testing-library/react'; import updateOnThemeChange from './updateOnThemeChange'; diff --git a/packages/bpk-component-tooltip/index.ts b/packages/bpk-component-tooltip/index.ts index 95e509e3ab..831c008acd 100644 --- a/packages/bpk-component-tooltip/index.ts +++ b/packages/bpk-component-tooltip/index.ts @@ -17,9 +17,10 @@ */ import BpkTooltipPortal from './src/BpkTooltipPortal'; -import type { Props } from './src/BpkTooltipPortal'; import { TOOLTIP_TYPES } from './src/constants'; +import type { Props } from './src/BpkTooltipPortal'; + export type BpkTooltipPortalProps = Props; export default BpkTooltipPortal; diff --git a/packages/bpk-component-tooltip/src/BpkTooltip.tsx b/packages/bpk-component-tooltip/src/BpkTooltip.tsx index 0afa96a5eb..63fceed3d1 100644 --- a/packages/bpk-component-tooltip/src/BpkTooltip.tsx +++ b/packages/bpk-component-tooltip/src/BpkTooltip.tsx @@ -26,9 +26,10 @@ import type { ReactNode } from 'react'; import { TransitionInitialMount, cssModules } from '../../bpk-react-utils'; -import STYLES from './BpkTooltip.module.scss'; import { ARROW_ID, TOOLTIP_TYPES } from './constants'; +import STYLES from './BpkTooltip.module.scss'; + const getClassName = cssModules(STYLES); export type TooltipProps = { diff --git a/packages/bpk-component-tooltip/src/BpkTooltipPortal-test.tsx b/packages/bpk-component-tooltip/src/BpkTooltipPortal-test.tsx index 93d3413a9b..f96bc7ac52 100644 --- a/packages/bpk-component-tooltip/src/BpkTooltipPortal-test.tsx +++ b/packages/bpk-component-tooltip/src/BpkTooltipPortal-test.tsx @@ -17,6 +17,7 @@ */ import { render } from '@testing-library/react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { colorPanjin } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; diff --git a/packages/bpk-component-tooltip/src/BpkTooltipPortal.tsx b/packages/bpk-component-tooltip/src/BpkTooltipPortal.tsx index b23149a228..15ea9814f6 100644 --- a/packages/bpk-component-tooltip/src/BpkTooltipPortal.tsx +++ b/packages/bpk-component-tooltip/src/BpkTooltipPortal.tsx @@ -16,16 +16,19 @@ * limitations under the License. */ -import { createPopper } from '@popperjs/core'; import { cloneElement, Component } from 'react'; import type { ReactNode, ReactElement } from 'react'; +import { createPopper } from '@popperjs/core'; + import { Portal, cssModules } from '../../bpk-react-utils'; import BpkTooltip from './BpkTooltip'; +import { TOOLTIP_TYPES } from './constants'; + import type { TooltipProps } from './BpkTooltip'; + import STYLES from './BpkTooltip.module.scss'; -import { TOOLTIP_TYPES } from './constants'; const getClassName = cssModules(STYLES); diff --git a/packages/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper-test.tsx b/packages/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper-test.tsx index c3d12de0d6..ab37e23c50 100644 --- a/packages/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper-test.tsx +++ b/packages/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper-test.tsx @@ -16,9 +16,10 @@ * limitations under the License. */ -import { render } from '@testing-library/react'; import { renderToString } from 'react-dom/server'; +import { render } from '@testing-library/react'; + import { type BpkDialogWrapper as WrapperType } from './BpkDialogWrapper'; describe('BpkDialogWrapper', () => { diff --git a/packages/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.tsx b/packages/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.tsx index 563027c7ca..587e6a3f8d 100644 --- a/packages/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.tsx +++ b/packages/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.tsx @@ -17,6 +17,7 @@ */ import type { SyntheticEvent, ReactNode } from "react"; import { useEffect, useRef, useState } from "react"; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import CSSTransition from 'react-transition-group/CSSTransition'; diff --git a/packages/bpk-react-utils/src/Portal-test.tsx b/packages/bpk-react-utils/src/Portal-test.tsx index b5955ad7ae..b55a32de2e 100644 --- a/packages/bpk-react-utils/src/Portal-test.tsx +++ b/packages/bpk-react-utils/src/Portal-test.tsx @@ -17,6 +17,7 @@ */ import { useState, useEffect, createRef } from 'react'; + import { render, waitFor, fireEvent } from '@testing-library/react'; import Portal from './Portal'; diff --git a/packages/bpk-react-utils/src/Portal.tsx b/packages/bpk-react-utils/src/Portal.tsx index bd8e39a0b0..d527ea0528 100644 --- a/packages/bpk-react-utils/src/Portal.tsx +++ b/packages/bpk-react-utils/src/Portal.tsx @@ -19,6 +19,7 @@ import { Component } from 'react'; import type { ReactNode } from 'react'; import { createPortal } from 'react-dom'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import assign from 'object-assign'; diff --git a/packages/bpk-react-utils/src/TransitionInitialMount.tsx b/packages/bpk-react-utils/src/TransitionInitialMount.tsx index 2cf437fec6..8585c959d0 100644 --- a/packages/bpk-react-utils/src/TransitionInitialMount.tsx +++ b/packages/bpk-react-utils/src/TransitionInitialMount.tsx @@ -16,9 +16,10 @@ * limitations under the License. */ +import type { ReactNode } from 'react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import assign from 'object-assign'; -import type { ReactNode } from 'react'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import CSSTransition from 'react-transition-group/CSSTransition'; diff --git a/packages/bpk-scrim-utils/src/withScrim-test.tsx b/packages/bpk-scrim-utils/src/withScrim-test.tsx index 04e21d89dc..bcca39c4d2 100644 --- a/packages/bpk-scrim-utils/src/withScrim-test.tsx +++ b/packages/bpk-scrim-utils/src/withScrim-test.tsx @@ -16,12 +16,13 @@ * limitations under the License. */ +import type { ComponentType } from 'react'; + import { render } from '@testing-library/react'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import focusScope from 'a11y-focus-scope'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import focusStore from 'a11y-focus-store'; -import type { ComponentType } from 'react'; import withScrim from './withScrim'; import { diff --git a/packages/bpk-scrim-utils/src/withScrim.tsx b/packages/bpk-scrim-utils/src/withScrim.tsx index b8665df3b1..1b5031df0d 100644 --- a/packages/bpk-scrim-utils/src/withScrim.tsx +++ b/packages/bpk-scrim-utils/src/withScrim.tsx @@ -16,12 +16,13 @@ * limitations under the License. */ +import type { ComponentType } from 'react'; +import { Component } from 'react'; + // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import focusScope from 'a11y-focus-scope'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import focusStore from 'a11y-focus-store'; -import type { ComponentType } from 'react'; -import { Component } from 'react'; import { cssModules, @@ -39,13 +40,14 @@ import { unfixBody, unlockScroll, } from './scroll-utils'; + import STYLES from './bpk-scrim-content.module.scss'; const getClassName = cssModules(STYLES); export type Props = { /** - * The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work". + * The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work". */ getApplicationElement: () => HTMLElement | null; /** diff --git a/packages/bpk-scrim-utils/src/withScrimmedPortal-test.tsx b/packages/bpk-scrim-utils/src/withScrimmedPortal-test.tsx index a07ab23659..e6305c428b 100644 --- a/packages/bpk-scrim-utils/src/withScrimmedPortal-test.tsx +++ b/packages/bpk-scrim-utils/src/withScrimmedPortal-test.tsx @@ -17,11 +17,13 @@ */ import '@testing-library/jest-dom'; -import { render, within, screen } from '@testing-library/react'; import { useEffect, useState } from 'react'; import { renderToString } from 'react-dom/server'; +import { render, within, screen } from '@testing-library/react'; + import withScrimmedPortal from './withScrimmedPortal'; + import type { Props } from './withScrimmedPortal'; describe('withScrimmedPortal', () => { diff --git a/packages/bpk-scrim-utils/src/withScrimmedPortal.tsx b/packages/bpk-scrim-utils/src/withScrimmedPortal.tsx index 07549fd316..42772a3d7b 100644 --- a/packages/bpk-scrim-utils/src/withScrimmedPortal.tsx +++ b/packages/bpk-scrim-utils/src/withScrimmedPortal.tsx @@ -22,6 +22,7 @@ import { createPortal } from 'react-dom'; import withScrim from './withScrim'; import BpkScrim from './BpkScrim'; + import type { Props as ScrimProps } from './withScrim'; export type Props = ScrimProps & { diff --git a/packages/bpk-theming/src/BpkThemeProvider-test.js b/packages/bpk-theming/src/BpkThemeProvider-test.js index cd17d2ade3..9b7c7204cc 100644 --- a/packages/bpk-theming/src/BpkThemeProvider-test.js +++ b/packages/bpk-theming/src/BpkThemeProvider-test.js @@ -18,7 +18,9 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; + import { render } from '@testing-library/react'; + import { colorWhite } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import BpkThemeProvider from './BpkThemeProvider'; diff --git a/packages/bpk-theming/src/accessibility-test.js b/packages/bpk-theming/src/accessibility-test.js index c87b781043..4bd1e0a377 100644 --- a/packages/bpk-theming/src/accessibility-test.js +++ b/packages/bpk-theming/src/accessibility-test.js @@ -18,6 +18,7 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; + import { colorWhite } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import BpkThemeProvider from './BpkThemeProvider'; From db88464b623eb8bc7995bb38e075e1f06834bc12 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 25 Mar 2024 16:31:19 +0000 Subject: [PATCH 032/174] Bump the babel group with 5 updates (#3313) Bumps the babel group with 5 updates: | Package | From | To | | --- | --- | --- | | [@babel/cli](https://github.com/babel/babel/tree/HEAD/packages/babel-cli) | `7.23.9` | `7.24.1` | | [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-transform-runtime) | `7.23.7` | `7.24.3` | | [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) | `7.23.8` | `7.24.3` | | [@babel/preset-react](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-react) | `7.23.3` | `7.24.1` | | [@babel/preset-typescript](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-typescript) | `7.23.3` | `7.24.1` | Updates `@babel/cli` from 7.23.9 to 7.24.1 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.1/packages/babel-cli) Updates `@babel/plugin-transform-runtime` from 7.23.7 to 7.24.3 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.3/packages/babel-plugin-transform-runtime) Updates `@babel/preset-env` from 7.23.8 to 7.24.3 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.3/packages/babel-preset-env) Updates `@babel/preset-react` from 7.23.3 to 7.24.1 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.1/packages/babel-preset-react) Updates `@babel/preset-typescript` from 7.23.3 to 7.24.1 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.1/packages/babel-preset-typescript) --- updated-dependencies: - dependency-name: "@babel/cli" dependency-type: direct:development update-type: version-update:semver-minor dependency-group: babel - dependency-name: "@babel/plugin-transform-runtime" dependency-type: direct:development update-type: version-update:semver-minor dependency-group: babel - dependency-name: "@babel/preset-env" dependency-type: direct:development update-type: version-update:semver-minor dependency-group: babel - dependency-name: "@babel/preset-react" dependency-type: direct:development update-type: version-update:semver-minor dependency-group: babel - dependency-name: "@babel/preset-typescript" dependency-type: direct:development update-type: version-update:semver-minor dependency-group: babel ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 740 ++++++++++++++++++++++++---------------------- package.json | 10 +- 2 files changed, 398 insertions(+), 352 deletions(-) diff --git a/package-lock.json b/package-lock.json index de9a283902..dfaecb85e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,15 +10,15 @@ "hasInstallScript": true, "license": "Apache-2.0", "devDependencies": { - "@babel/cli": "^7.23.9", + "@babel/cli": "^7.24.1", "@babel/core": "^7.24.0", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.2", "@babel/plugin-proposal-private-methods": "^7.17.12", - "@babel/plugin-transform-runtime": "^7.23.7", - "@babel/preset-env": "^7.23.8", - "@babel/preset-react": "^7.18.6", - "@babel/preset-typescript": "^7.23.3", + "@babel/plugin-transform-runtime": "^7.24.3", + "@babel/preset-env": "^7.24.3", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", "@babel/register": "^7.23.7", "@percy/cli": "^1.28.2", "@percy/storybook": "^5.0.1", @@ -128,12 +128,12 @@ } }, "node_modules/@babel/cli": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.23.9.tgz", - "integrity": "sha512-vB1UXmGDNEhcf1jNAHKT9IlYk1R+hehVTLFlCLHBi8gfuHQGP6uRjgXVYU0EVlI/qwAWpstqkBdf2aez3/z/5Q==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.24.1.tgz", + "integrity": "sha512-HbmrtxyFUr34LwAlV9jS+sSIjUp4FpdtIMGwgufY3AsxrIfsh/HxlMTywsONAZsU0RMYbZtbZFpUCrSGs7o0EA==", "dev": true, "dependencies": { - "@jridgewell/trace-mapping": "^0.3.17", + "@jridgewell/trace-mapping": "^0.3.25", "commander": "^4.0.1", "convert-source-map": "^2.0.0", "fs-readdir-recursive": "^1.1.0", @@ -190,9 +190,9 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz", - "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.1.tgz", + "integrity": "sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==", "dev": true, "engines": { "node": ">=6.9.0" @@ -273,8 +273,9 @@ }, "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": { "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz", + "integrity": "sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==", "dev": true, - "license": "MIT", "dependencies": { "@babel/types": "^7.22.15" }, @@ -299,9 +300,9 @@ } }, "node_modules/@babel/helper-create-class-features-plugin": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.7.tgz", - "integrity": "sha512-xCoqR/8+BoNnXOY7RVSgv6X+o7pmT5q1d+gGcRlXYkI+9B31glE4jeejhKVpA04O1AtzOt7OSQ6VYKP5FcRl9g==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.1.tgz", + "integrity": "sha512-1yJa9dX9g//V6fDebXoEfEsxkZHk3Hcbm+zLhyu6qVgYFLvmTALTeV+jNU9e5RnYtioBrGEOdoI2joMSNQ/+aA==", "dev": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", @@ -309,7 +310,7 @@ "@babel/helper-function-name": "^7.23.0", "@babel/helper-member-expression-to-functions": "^7.23.0", "@babel/helper-optimise-call-expression": "^7.22.5", - "@babel/helper-replace-supers": "^7.22.20", + "@babel/helper-replace-supers": "^7.24.1", "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", "semver": "^6.3.1" @@ -338,9 +339,9 @@ } }, "node_modules/@babel/helper-define-polyfill-provider": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.4.tgz", - "integrity": "sha512-QcJMILQCu2jm5TFPGA3lCpJJTeEP+mqeXooG/NZbg/h5FTFi6V0+99ahlRsW8/kRLyb24LZVCCiclDedhLKcBA==", + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.1.tgz", + "integrity": "sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==", "dev": true, "dependencies": { "@babel/helper-compilation-targets": "^7.22.6", @@ -403,8 +404,9 @@ }, "node_modules/@babel/helper-member-expression-to-functions": { "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz", + "integrity": "sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==", "dev": true, - "license": "MIT", "dependencies": { "@babel/types": "^7.23.0" }, @@ -413,11 +415,12 @@ } }, "node_modules/@babel/helper-module-imports": { - "version": "7.22.15", + "version": "7.24.3", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz", + "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/types": "^7.22.15" + "@babel/types": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -443,8 +446,9 @@ }, "node_modules/@babel/helper-optimise-call-expression": { "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz", + "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==", "dev": true, - "license": "MIT", "dependencies": { "@babel/types": "^7.22.5" }, @@ -453,17 +457,19 @@ } }, "node_modules/@babel/helper-plugin-utils": { - "version": "7.22.5", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz", + "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==", "dev": true, - "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-remap-async-to-generator": { "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz", + "integrity": "sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", "@babel/helper-environment-visitor": "^7.22.20", @@ -477,12 +483,13 @@ } }, "node_modules/@babel/helper-replace-supers": { - "version": "7.22.20", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.24.1.tgz", + "integrity": "sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-environment-visitor": "^7.22.20", - "@babel/helper-member-expression-to-functions": "^7.22.15", + "@babel/helper-member-expression-to-functions": "^7.23.0", "@babel/helper-optimise-call-expression": "^7.22.5" }, "engines": { @@ -553,8 +560,9 @@ }, "node_modules/@babel/helper-wrap-function": { "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz", + "integrity": "sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-function-name": "^7.22.5", "@babel/template": "^7.22.15", @@ -605,11 +613,12 @@ } }, "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.1.tgz", + "integrity": "sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -619,13 +628,14 @@ } }, "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.1.tgz", + "integrity": "sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5", - "@babel/plugin-transform-optional-chaining": "^7.23.3" + "@babel/plugin-transform-optional-chaining": "^7.24.1" }, "engines": { "node": ">=6.9.0" @@ -635,13 +645,13 @@ } }, "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.7.tgz", - "integrity": "sha512-LlRT7HgaifEpQA1ZgLVOIJZZFVPWN5iReq/7/JixwBtwcoeVGDBD53ZV28rrsLYOZs1Y/EHhA8N/Z6aazHR8cw==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.24.1.tgz", + "integrity": "sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==", "dev": true, "dependencies": { "@babel/helper-environment-visitor": "^7.22.20", - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -827,11 +837,12 @@ } }, "node_modules/@babel/plugin-syntax-import-assertions": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.24.1.tgz", + "integrity": "sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -841,11 +852,12 @@ } }, "node_modules/@babel/plugin-syntax-import-attributes": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.1.tgz", + "integrity": "sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -877,12 +889,12 @@ } }, "node_modules/@babel/plugin-syntax-jsx": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz", - "integrity": "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.1.tgz", + "integrity": "sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -987,12 +999,12 @@ } }, "node_modules/@babel/plugin-syntax-typescript": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.23.3.tgz", - "integrity": "sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.1.tgz", + "integrity": "sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1017,11 +1029,12 @@ } }, "node_modules/@babel/plugin-transform-arrow-functions": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.1.tgz", + "integrity": "sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1031,13 +1044,13 @@ } }, "node_modules/@babel/plugin-transform-async-generator-functions": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.7.tgz", - "integrity": "sha512-PdxEpL71bJp1byMG0va5gwQcXHxuEYC/BgI/e88mGTtohbZN28O5Yit0Plkkm/dBzCF/BxmbNcses1RH1T+urA==", + "version": "7.24.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.24.3.tgz", + "integrity": "sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==", "dev": true, "dependencies": { "@babel/helper-environment-visitor": "^7.22.20", - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-remap-async-to-generator": "^7.22.20", "@babel/plugin-syntax-async-generators": "^7.8.4" }, @@ -1049,12 +1062,13 @@ } }, "node_modules/@babel/plugin-transform-async-to-generator": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.1.tgz", + "integrity": "sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-module-imports": "^7.24.1", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-remap-async-to-generator": "^7.22.20" }, "engines": { @@ -1065,11 +1079,12 @@ } }, "node_modules/@babel/plugin-transform-block-scoped-functions": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.1.tgz", + "integrity": "sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1079,12 +1094,12 @@ } }, "node_modules/@babel/plugin-transform-block-scoping": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.4.tgz", - "integrity": "sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.1.tgz", + "integrity": "sha512-h71T2QQvDgM2SmT29UYU6ozjMlAt7s7CSs5Hvy8f8cf/GM/Z4a2zMfN+fjVGaieeCrXR3EdQl6C4gQG+OgmbKw==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1094,12 +1109,13 @@ } }, "node_modules/@babel/plugin-transform-class-properties": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.1.tgz", + "integrity": "sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-create-class-features-plugin": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-create-class-features-plugin": "^7.24.1", + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1109,13 +1125,13 @@ } }, "node_modules/@babel/plugin-transform-class-static-block": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.23.4.tgz", - "integrity": "sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.1.tgz", + "integrity": "sha512-FUHlKCn6J3ERiu8Dv+4eoz7w8+kFLSyeVG4vDAikwADGjUCoHw/JHokyGtr8OR4UjpwPVivyF+h8Q5iv/JmrtA==", "dev": true, "dependencies": { - "@babel/helper-create-class-features-plugin": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-create-class-features-plugin": "^7.24.1", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/plugin-syntax-class-static-block": "^7.14.5" }, "engines": { @@ -1126,17 +1142,17 @@ } }, "node_modules/@babel/plugin-transform-classes": { - "version": "7.23.8", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.8.tgz", - "integrity": "sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.24.1.tgz", + "integrity": "sha512-ZTIe3W7UejJd3/3R4p7ScyyOoafetUShSf4kCqV0O7F/RiHxVj/wRaRnQlrGwflvcehNA8M42HkAiEDYZu2F1Q==", "dev": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", "@babel/helper-compilation-targets": "^7.23.6", "@babel/helper-environment-visitor": "^7.22.20", "@babel/helper-function-name": "^7.23.0", - "@babel/helper-plugin-utils": "^7.22.5", - "@babel/helper-replace-supers": "^7.22.20", + "@babel/helper-plugin-utils": "^7.24.0", + "@babel/helper-replace-supers": "^7.24.1", "@babel/helper-split-export-declaration": "^7.22.6", "globals": "^11.1.0" }, @@ -1148,12 +1164,13 @@ } }, "node_modules/@babel/plugin-transform-computed-properties": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.1.tgz", + "integrity": "sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", - "@babel/template": "^7.22.15" + "@babel/helper-plugin-utils": "^7.24.0", + "@babel/template": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1163,11 +1180,12 @@ } }, "node_modules/@babel/plugin-transform-destructuring": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.1.tgz", + "integrity": "sha512-ow8jciWqNxR3RYbSNVuF4U2Jx130nwnBnhRw6N6h1bOejNkABmcI5X5oz29K4alWX7vf1C+o6gtKXikzRKkVdw==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1177,12 +1195,13 @@ } }, "node_modules/@babel/plugin-transform-dotall-regex": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.1.tgz", + "integrity": "sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1192,11 +1211,12 @@ } }, "node_modules/@babel/plugin-transform-duplicate-keys": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.1.tgz", + "integrity": "sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1206,12 +1226,12 @@ } }, "node_modules/@babel/plugin-transform-dynamic-import": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.23.4.tgz", - "integrity": "sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.1.tgz", + "integrity": "sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/plugin-syntax-dynamic-import": "^7.8.3" }, "engines": { @@ -1222,12 +1242,13 @@ } }, "node_modules/@babel/plugin-transform-exponentiation-operator": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.1.tgz", + "integrity": "sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1237,12 +1258,12 @@ } }, "node_modules/@babel/plugin-transform-export-namespace-from": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.23.4.tgz", - "integrity": "sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.1.tgz", + "integrity": "sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/plugin-syntax-export-namespace-from": "^7.8.3" }, "engines": { @@ -1268,12 +1289,12 @@ } }, "node_modules/@babel/plugin-transform-for-of": { - "version": "7.23.6", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.6.tgz", - "integrity": "sha512-aYH4ytZ0qSuBbpfhuofbg/e96oQ7U2w1Aw/UQmKT+1l39uEhUPoFS3fHevDc1G0OvewyDudfMKY1OulczHzWIw==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.1.tgz", + "integrity": "sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5" }, "engines": { @@ -1284,13 +1305,14 @@ } }, "node_modules/@babel/plugin-transform-function-name": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.24.1.tgz", + "integrity": "sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-compilation-targets": "^7.22.15", + "@babel/helper-compilation-targets": "^7.23.6", "@babel/helper-function-name": "^7.23.0", - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1300,12 +1322,12 @@ } }, "node_modules/@babel/plugin-transform-json-strings": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.23.4.tgz", - "integrity": "sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.1.tgz", + "integrity": "sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/plugin-syntax-json-strings": "^7.8.3" }, "engines": { @@ -1316,11 +1338,12 @@ } }, "node_modules/@babel/plugin-transform-literals": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.24.1.tgz", + "integrity": "sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1330,12 +1353,12 @@ } }, "node_modules/@babel/plugin-transform-logical-assignment-operators": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.23.4.tgz", - "integrity": "sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.1.tgz", + "integrity": "sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4" }, "engines": { @@ -1346,11 +1369,12 @@ } }, "node_modules/@babel/plugin-transform-member-expression-literals": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.1.tgz", + "integrity": "sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1360,12 +1384,13 @@ } }, "node_modules/@babel/plugin-transform-modules-amd": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.1.tgz", + "integrity": "sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-module-transforms": "^7.23.3", - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1375,12 +1400,13 @@ } }, "node_modules/@babel/plugin-transform-modules-commonjs": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.1.tgz", + "integrity": "sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-module-transforms": "^7.23.3", - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-simple-access": "^7.22.5" }, "engines": { @@ -1391,13 +1417,14 @@ } }, "node_modules/@babel/plugin-transform-modules-systemjs": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.24.1.tgz", + "integrity": "sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-module-transforms": "^7.23.3", - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-validator-identifier": "^7.22.20" }, "engines": { @@ -1408,12 +1435,13 @@ } }, "node_modules/@babel/plugin-transform-modules-umd": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.1.tgz", + "integrity": "sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-module-transforms": "^7.23.3", - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1438,11 +1466,12 @@ } }, "node_modules/@babel/plugin-transform-new-target": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.1.tgz", + "integrity": "sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1452,12 +1481,12 @@ } }, "node_modules/@babel/plugin-transform-nullish-coalescing-operator": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.4.tgz", - "integrity": "sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz", + "integrity": "sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3" }, "engines": { @@ -1468,12 +1497,12 @@ } }, "node_modules/@babel/plugin-transform-numeric-separator": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.23.4.tgz", - "integrity": "sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.1.tgz", + "integrity": "sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/plugin-syntax-numeric-separator": "^7.10.4" }, "engines": { @@ -1484,16 +1513,15 @@ } }, "node_modules/@babel/plugin-transform-object-rest-spread": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.4.tgz", - "integrity": "sha512-9x9K1YyeQVw0iOXJlIzwm8ltobIIv7j2iLyP2jIhEbqPRQ7ScNgwQufU2I0Gq11VjyG4gI4yMXt2VFags+1N3g==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.1.tgz", + "integrity": "sha512-XjD5f0YqOtebto4HGISLNfiNMTTs6tbkFf2TOqJlYKYmbo+mN9Dnpl4SRoofiziuOWMIyq3sZEUqLo3hLITFEA==", "dev": true, "dependencies": { - "@babel/compat-data": "^7.23.3", - "@babel/helper-compilation-targets": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-compilation-targets": "^7.23.6", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/plugin-syntax-object-rest-spread": "^7.8.3", - "@babel/plugin-transform-parameters": "^7.23.3" + "@babel/plugin-transform-parameters": "^7.24.1" }, "engines": { "node": ">=6.9.0" @@ -1503,12 +1531,13 @@ } }, "node_modules/@babel/plugin-transform-object-super": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.1.tgz", + "integrity": "sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", - "@babel/helper-replace-supers": "^7.22.20" + "@babel/helper-plugin-utils": "^7.24.0", + "@babel/helper-replace-supers": "^7.24.1" }, "engines": { "node": ">=6.9.0" @@ -1518,12 +1547,12 @@ } }, "node_modules/@babel/plugin-transform-optional-catch-binding": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.23.4.tgz", - "integrity": "sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.1.tgz", + "integrity": "sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/plugin-syntax-optional-catch-binding": "^7.8.3" }, "engines": { @@ -1534,12 +1563,12 @@ } }, "node_modules/@babel/plugin-transform-optional-chaining": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.4.tgz", - "integrity": "sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.1.tgz", + "integrity": "sha512-n03wmDt+987qXwAgcBlnUUivrZBPZ8z1plL0YvgQalLm+ZE5BMhGm94jhxXtA1wzv1Cu2aaOv1BM9vbVttrzSg==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5", "@babel/plugin-syntax-optional-chaining": "^7.8.3" }, @@ -1551,11 +1580,12 @@ } }, "node_modules/@babel/plugin-transform-parameters": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.1.tgz", + "integrity": "sha512-8Jl6V24g+Uw5OGPeWNKrKqXPDw2YDjLc53ojwfMcKwlEoETKU9rU0mHUtcg9JntWI/QYzGAXNWEcVHZ+fR+XXg==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1565,12 +1595,13 @@ } }, "node_modules/@babel/plugin-transform-private-methods": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.24.1.tgz", + "integrity": "sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-create-class-features-plugin": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-create-class-features-plugin": "^7.24.1", + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1580,14 +1611,14 @@ } }, "node_modules/@babel/plugin-transform-private-property-in-object": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.23.4.tgz", - "integrity": "sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.1.tgz", + "integrity": "sha512-pTHxDVa0BpUbvAgX3Gat+7cSciXqUcY9j2VZKTbSB6+VQGpNgNO9ailxTGHSXlqOnX1Hcx1Enme2+yv7VqP9bg==", "dev": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", - "@babel/helper-create-class-features-plugin": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-create-class-features-plugin": "^7.24.1", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/plugin-syntax-private-property-in-object": "^7.14.5" }, "engines": { @@ -1598,11 +1629,12 @@ } }, "node_modules/@babel/plugin-transform-property-literals": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.1.tgz", + "integrity": "sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1612,12 +1644,12 @@ } }, "node_modules/@babel/plugin-transform-react-display-name": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.23.3.tgz", - "integrity": "sha512-GnvhtVfA2OAtzdX58FJxU19rhoGeQzyVndw3GgtdECQvQFXPEZIOVULHVZGAYmOgmqjXpVpfocAbSjh99V/Fqw==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.24.1.tgz", + "integrity": "sha512-mvoQg2f9p2qlpDQRBC7M3c3XTr0k7cp/0+kFKKO/7Gtu0LSw16eKB+Fabe2bDT/UpsyasTBBkAnbdsLrkD5XMw==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1627,15 +1659,16 @@ } }, "node_modules/@babel/plugin-transform-react-jsx": { - "version": "7.22.15", + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.23.4.tgz", + "integrity": "sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", "@babel/helper-module-imports": "^7.22.15", "@babel/helper-plugin-utils": "^7.22.5", - "@babel/plugin-syntax-jsx": "^7.22.5", - "@babel/types": "^7.22.15" + "@babel/plugin-syntax-jsx": "^7.23.3", + "@babel/types": "^7.23.4" }, "engines": { "node": ">=6.9.0" @@ -1659,13 +1692,13 @@ } }, "node_modules/@babel/plugin-transform-react-pure-annotations": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.23.3.tgz", - "integrity": "sha512-qMFdSS+TUhB7Q/3HVPnEdYJDQIk57jkntAwSuz9xfSE4n+3I+vHYCli3HoHawN1Z3RfCz/y1zXA/JXjG6cVImQ==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.24.1.tgz", + "integrity": "sha512-+pWEAaDJvSm9aFvJNpLiM2+ktl2Sn2U5DdyiWdZBxmLc6+xGt88dvFqsHiAiDS+8WqUwbDfkKz9jRxK3M0k+kA==", "dev": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1675,11 +1708,12 @@ } }, "node_modules/@babel/plugin-transform-regenerator": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.1.tgz", + "integrity": "sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "regenerator-transform": "^0.15.2" }, "engines": { @@ -1690,11 +1724,12 @@ } }, "node_modules/@babel/plugin-transform-reserved-words": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.1.tgz", + "integrity": "sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1704,16 +1739,16 @@ } }, "node_modules/@babel/plugin-transform-runtime": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.23.7.tgz", - "integrity": "sha512-fa0hnfmiXc9fq/weK34MUV0drz2pOL/vfKWvN7Qw127hiUPabFCUMgAbYWcchRzMJit4o5ARsK/s+5h0249pLw==", + "version": "7.24.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.24.3.tgz", + "integrity": "sha512-J0BuRPNlNqlMTRJ72eVptpt9VcInbxO6iP3jaxr+1NPhC0UkKL+6oeX6VXMEYdADnuqmMmsBspt4d5w8Y/TCbQ==", "dev": true, "dependencies": { - "@babel/helper-module-imports": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5", - "babel-plugin-polyfill-corejs2": "^0.4.7", - "babel-plugin-polyfill-corejs3": "^0.8.7", - "babel-plugin-polyfill-regenerator": "^0.5.4", + "@babel/helper-module-imports": "^7.24.3", + "@babel/helper-plugin-utils": "^7.24.0", + "babel-plugin-polyfill-corejs2": "^0.4.10", + "babel-plugin-polyfill-corejs3": "^0.10.1", + "babel-plugin-polyfill-regenerator": "^0.6.1", "semver": "^6.3.1" }, "engines": { @@ -1724,11 +1759,12 @@ } }, "node_modules/@babel/plugin-transform-shorthand-properties": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.1.tgz", + "integrity": "sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1738,11 +1774,12 @@ } }, "node_modules/@babel/plugin-transform-spread": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.1.tgz", + "integrity": "sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5" }, "engines": { @@ -1753,11 +1790,12 @@ } }, "node_modules/@babel/plugin-transform-sticky-regex": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.1.tgz", + "integrity": "sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1767,11 +1805,12 @@ } }, "node_modules/@babel/plugin-transform-template-literals": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.1.tgz", + "integrity": "sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1781,11 +1820,12 @@ } }, "node_modules/@babel/plugin-transform-typeof-symbol": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.1.tgz", + "integrity": "sha512-CBfU4l/A+KruSUoW+vTQthwcAdwuqbpRNB8HQKlZABwHRhsdHZ9fezp4Sn18PeAlYxTNiLMlx4xUBV3AWfg1BA==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1795,15 +1835,15 @@ } }, "node_modules/@babel/plugin-transform-typescript": { - "version": "7.23.6", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz", - "integrity": "sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.1.tgz", + "integrity": "sha512-liYSESjX2fZ7JyBFkYG78nfvHlMKE6IpNdTVnxmlYUR+j5ZLsitFbaAE+eJSK2zPPkNWNw4mXL51rQ8WrvdK0w==", "dev": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", - "@babel/helper-create-class-features-plugin": "^7.23.6", - "@babel/helper-plugin-utils": "^7.22.5", - "@babel/plugin-syntax-typescript": "^7.23.3" + "@babel/helper-create-class-features-plugin": "^7.24.1", + "@babel/helper-plugin-utils": "^7.24.0", + "@babel/plugin-syntax-typescript": "^7.24.1" }, "engines": { "node": ">=6.9.0" @@ -1813,11 +1853,12 @@ } }, "node_modules/@babel/plugin-transform-unicode-escapes": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.1.tgz", + "integrity": "sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1827,12 +1868,13 @@ } }, "node_modules/@babel/plugin-transform-unicode-property-regex": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.1.tgz", + "integrity": "sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1842,12 +1884,13 @@ } }, "node_modules/@babel/plugin-transform-unicode-regex": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.1.tgz", + "integrity": "sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1857,12 +1900,13 @@ } }, "node_modules/@babel/plugin-transform-unicode-sets-regex": { - "version": "7.23.3", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.24.1.tgz", + "integrity": "sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==", "dev": true, - "license": "MIT", "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5" + "@babel/helper-plugin-utils": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1872,26 +1916,26 @@ } }, "node_modules/@babel/preset-env": { - "version": "7.23.8", - "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.8.tgz", - "integrity": "sha512-lFlpmkApLkEP6woIKprO6DO60RImpatTQKtz4sUcDjVcK8M8mQ4sZsuxaTMNOZf0sqAq/ReYW1ZBHnOQwKpLWA==", + "version": "7.24.3", + "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.24.3.tgz", + "integrity": "sha512-fSk430k5c2ff8536JcPvPWK4tZDwehWLGlBp0wrsBUjZVdeQV6lePbwKWZaZfK2vnh/1kQX1PzAJWsnBmVgGJA==", "dev": true, "dependencies": { - "@babel/compat-data": "^7.23.5", + "@babel/compat-data": "^7.24.1", "@babel/helper-compilation-targets": "^7.23.6", - "@babel/helper-plugin-utils": "^7.22.5", + "@babel/helper-plugin-utils": "^7.24.0", "@babel/helper-validator-option": "^7.23.5", - "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.23.3", - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.23.3", - "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.23.7", + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.24.1", + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.24.1", + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.24.1", "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2", "@babel/plugin-syntax-async-generators": "^7.8.4", "@babel/plugin-syntax-class-properties": "^7.12.13", "@babel/plugin-syntax-class-static-block": "^7.14.5", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-export-namespace-from": "^7.8.3", - "@babel/plugin-syntax-import-assertions": "^7.23.3", - "@babel/plugin-syntax-import-attributes": "^7.23.3", + "@babel/plugin-syntax-import-assertions": "^7.24.1", + "@babel/plugin-syntax-import-attributes": "^7.24.1", "@babel/plugin-syntax-import-meta": "^7.10.4", "@babel/plugin-syntax-json-strings": "^7.8.3", "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4", @@ -1903,58 +1947,58 @@ "@babel/plugin-syntax-private-property-in-object": "^7.14.5", "@babel/plugin-syntax-top-level-await": "^7.14.5", "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6", - "@babel/plugin-transform-arrow-functions": "^7.23.3", - "@babel/plugin-transform-async-generator-functions": "^7.23.7", - "@babel/plugin-transform-async-to-generator": "^7.23.3", - "@babel/plugin-transform-block-scoped-functions": "^7.23.3", - "@babel/plugin-transform-block-scoping": "^7.23.4", - "@babel/plugin-transform-class-properties": "^7.23.3", - "@babel/plugin-transform-class-static-block": "^7.23.4", - "@babel/plugin-transform-classes": "^7.23.8", - "@babel/plugin-transform-computed-properties": "^7.23.3", - "@babel/plugin-transform-destructuring": "^7.23.3", - "@babel/plugin-transform-dotall-regex": "^7.23.3", - "@babel/plugin-transform-duplicate-keys": "^7.23.3", - "@babel/plugin-transform-dynamic-import": "^7.23.4", - "@babel/plugin-transform-exponentiation-operator": "^7.23.3", - "@babel/plugin-transform-export-namespace-from": "^7.23.4", - "@babel/plugin-transform-for-of": "^7.23.6", - "@babel/plugin-transform-function-name": "^7.23.3", - "@babel/plugin-transform-json-strings": "^7.23.4", - "@babel/plugin-transform-literals": "^7.23.3", - "@babel/plugin-transform-logical-assignment-operators": "^7.23.4", - "@babel/plugin-transform-member-expression-literals": "^7.23.3", - "@babel/plugin-transform-modules-amd": "^7.23.3", - "@babel/plugin-transform-modules-commonjs": "^7.23.3", - "@babel/plugin-transform-modules-systemjs": "^7.23.3", - "@babel/plugin-transform-modules-umd": "^7.23.3", + "@babel/plugin-transform-arrow-functions": "^7.24.1", + "@babel/plugin-transform-async-generator-functions": "^7.24.3", + "@babel/plugin-transform-async-to-generator": "^7.24.1", + "@babel/plugin-transform-block-scoped-functions": "^7.24.1", + "@babel/plugin-transform-block-scoping": "^7.24.1", + "@babel/plugin-transform-class-properties": "^7.24.1", + "@babel/plugin-transform-class-static-block": "^7.24.1", + "@babel/plugin-transform-classes": "^7.24.1", + "@babel/plugin-transform-computed-properties": "^7.24.1", + "@babel/plugin-transform-destructuring": "^7.24.1", + "@babel/plugin-transform-dotall-regex": "^7.24.1", + "@babel/plugin-transform-duplicate-keys": "^7.24.1", + "@babel/plugin-transform-dynamic-import": "^7.24.1", + "@babel/plugin-transform-exponentiation-operator": "^7.24.1", + "@babel/plugin-transform-export-namespace-from": "^7.24.1", + "@babel/plugin-transform-for-of": "^7.24.1", + "@babel/plugin-transform-function-name": "^7.24.1", + "@babel/plugin-transform-json-strings": "^7.24.1", + "@babel/plugin-transform-literals": "^7.24.1", + "@babel/plugin-transform-logical-assignment-operators": "^7.24.1", + "@babel/plugin-transform-member-expression-literals": "^7.24.1", + "@babel/plugin-transform-modules-amd": "^7.24.1", + "@babel/plugin-transform-modules-commonjs": "^7.24.1", + "@babel/plugin-transform-modules-systemjs": "^7.24.1", + "@babel/plugin-transform-modules-umd": "^7.24.1", "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5", - "@babel/plugin-transform-new-target": "^7.23.3", - "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4", - "@babel/plugin-transform-numeric-separator": "^7.23.4", - "@babel/plugin-transform-object-rest-spread": "^7.23.4", - "@babel/plugin-transform-object-super": "^7.23.3", - "@babel/plugin-transform-optional-catch-binding": "^7.23.4", - "@babel/plugin-transform-optional-chaining": "^7.23.4", - "@babel/plugin-transform-parameters": "^7.23.3", - "@babel/plugin-transform-private-methods": "^7.23.3", - "@babel/plugin-transform-private-property-in-object": "^7.23.4", - "@babel/plugin-transform-property-literals": "^7.23.3", - "@babel/plugin-transform-regenerator": "^7.23.3", - "@babel/plugin-transform-reserved-words": "^7.23.3", - "@babel/plugin-transform-shorthand-properties": "^7.23.3", - "@babel/plugin-transform-spread": "^7.23.3", - "@babel/plugin-transform-sticky-regex": "^7.23.3", - "@babel/plugin-transform-template-literals": "^7.23.3", - "@babel/plugin-transform-typeof-symbol": "^7.23.3", - "@babel/plugin-transform-unicode-escapes": "^7.23.3", - "@babel/plugin-transform-unicode-property-regex": "^7.23.3", - "@babel/plugin-transform-unicode-regex": "^7.23.3", - "@babel/plugin-transform-unicode-sets-regex": "^7.23.3", + "@babel/plugin-transform-new-target": "^7.24.1", + "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.1", + "@babel/plugin-transform-numeric-separator": "^7.24.1", + "@babel/plugin-transform-object-rest-spread": "^7.24.1", + "@babel/plugin-transform-object-super": "^7.24.1", + "@babel/plugin-transform-optional-catch-binding": "^7.24.1", + "@babel/plugin-transform-optional-chaining": "^7.24.1", + "@babel/plugin-transform-parameters": "^7.24.1", + "@babel/plugin-transform-private-methods": "^7.24.1", + "@babel/plugin-transform-private-property-in-object": "^7.24.1", + "@babel/plugin-transform-property-literals": "^7.24.1", + "@babel/plugin-transform-regenerator": "^7.24.1", + "@babel/plugin-transform-reserved-words": "^7.24.1", + "@babel/plugin-transform-shorthand-properties": "^7.24.1", + "@babel/plugin-transform-spread": "^7.24.1", + "@babel/plugin-transform-sticky-regex": "^7.24.1", + "@babel/plugin-transform-template-literals": "^7.24.1", + "@babel/plugin-transform-typeof-symbol": "^7.24.1", + "@babel/plugin-transform-unicode-escapes": "^7.24.1", + "@babel/plugin-transform-unicode-property-regex": "^7.24.1", + "@babel/plugin-transform-unicode-regex": "^7.24.1", + "@babel/plugin-transform-unicode-sets-regex": "^7.24.1", "@babel/preset-modules": "0.1.6-no-external-plugins", - "babel-plugin-polyfill-corejs2": "^0.4.7", - "babel-plugin-polyfill-corejs3": "^0.8.7", - "babel-plugin-polyfill-regenerator": "^0.5.4", + "babel-plugin-polyfill-corejs2": "^0.4.10", + "babel-plugin-polyfill-corejs3": "^0.10.4", + "babel-plugin-polyfill-regenerator": "^0.6.1", "core-js-compat": "^3.31.0", "semver": "^6.3.1" }, @@ -1995,17 +2039,17 @@ } }, "node_modules/@babel/preset-react": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.23.3.tgz", - "integrity": "sha512-tbkHOS9axH6Ysf2OUEqoSZ6T3Fa2SrNH6WTWSPBboxKzdxNc9qOICeLXkNG0ZEwbQ1HY8liwOce4aN/Ceyuq6w==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.24.1.tgz", + "integrity": "sha512-eFa8up2/8cZXLIpkafhaADTXSnl7IsUFCYenRWrARBz0/qZwcT0RBXpys0LJU4+WfPoF2ZG6ew6s2V6izMCwRA==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", - "@babel/helper-validator-option": "^7.22.15", - "@babel/plugin-transform-react-display-name": "^7.23.3", - "@babel/plugin-transform-react-jsx": "^7.22.15", + "@babel/helper-plugin-utils": "^7.24.0", + "@babel/helper-validator-option": "^7.23.5", + "@babel/plugin-transform-react-display-name": "^7.24.1", + "@babel/plugin-transform-react-jsx": "^7.23.4", "@babel/plugin-transform-react-jsx-development": "^7.22.5", - "@babel/plugin-transform-react-pure-annotations": "^7.23.3" + "@babel/plugin-transform-react-pure-annotations": "^7.24.1" }, "engines": { "node": ">=6.9.0" @@ -2015,16 +2059,16 @@ } }, "node_modules/@babel/preset-typescript": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz", - "integrity": "sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.24.1.tgz", + "integrity": "sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==", "dev": true, "dependencies": { - "@babel/helper-plugin-utils": "^7.22.5", - "@babel/helper-validator-option": "^7.22.15", - "@babel/plugin-syntax-jsx": "^7.23.3", - "@babel/plugin-transform-modules-commonjs": "^7.23.3", - "@babel/plugin-transform-typescript": "^7.23.3" + "@babel/helper-plugin-utils": "^7.24.0", + "@babel/helper-validator-option": "^7.23.5", + "@babel/plugin-syntax-jsx": "^7.24.1", + "@babel/plugin-transform-modules-commonjs": "^7.24.1", + "@babel/plugin-transform-typescript": "^7.24.1" }, "engines": { "node": ">=6.9.0" @@ -3280,9 +3324,9 @@ "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.23", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.23.tgz", - "integrity": "sha512-9/4foRoUKp8s96tSkh8DlAAc5A0Ty8vLXld+l9gjKKY6ckwI8G15f0hskGmuLZu78ZlGa1vtsfOa+lnB4vG6Jg==", + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -10540,13 +10584,13 @@ } }, "node_modules/babel-plugin-polyfill-corejs2": { - "version": "0.4.7", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.7.tgz", - "integrity": "sha512-LidDk/tEGDfuHW2DWh/Hgo4rmnw3cduK6ZkOI1NPFceSK3n/yAGeOsNT7FLnSGHkXj3RHGSEVkN3FsCTY6w2CQ==", + "version": "0.4.10", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.10.tgz", + "integrity": "sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==", "dev": true, "dependencies": { "@babel/compat-data": "^7.22.6", - "@babel/helper-define-polyfill-provider": "^0.4.4", + "@babel/helper-define-polyfill-provider": "^0.6.1", "semver": "^6.3.1" }, "peerDependencies": { @@ -10554,25 +10598,25 @@ } }, "node_modules/babel-plugin-polyfill-corejs3": { - "version": "0.8.7", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.7.tgz", - "integrity": "sha512-KyDvZYxAzkC0Aj2dAPyDzi2Ym15e5JKZSK+maI7NAwSqofvuFglbSsxE7wUOvTg9oFVnHMzVzBKcqEb4PJgtOA==", + "version": "0.10.4", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.4.tgz", + "integrity": "sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==", "dev": true, "dependencies": { - "@babel/helper-define-polyfill-provider": "^0.4.4", - "core-js-compat": "^3.33.1" + "@babel/helper-define-polyfill-provider": "^0.6.1", + "core-js-compat": "^3.36.1" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, "node_modules/babel-plugin-polyfill-regenerator": { - "version": "0.5.4", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.4.tgz", - "integrity": "sha512-S/x2iOCvDaCASLYsOOgWOq4bCfKYVqvO/uxjkaYyZ3rVsVE3CeAI/c84NpyuBBymEgNvHgjEot3a9/Z/kXvqsg==", + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.1.tgz", + "integrity": "sha512-JfTApdE++cgcTWjsiCQlLyFBMbTUft9ja17saCc93lgV33h4tuCVj7tlvu//qpLwaG+3yEz7/KhahGrUMkVq9g==", "dev": true, "dependencies": { - "@babel/helper-define-polyfill-provider": "^0.4.4" + "@babel/helper-define-polyfill-provider": "^0.6.1" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" @@ -12250,11 +12294,12 @@ } }, "node_modules/core-js-compat": { - "version": "3.33.2", + "version": "3.36.1", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.36.1.tgz", + "integrity": "sha512-Dk997v9ZCt3X/npqzyGdTlq6t7lDBhZwGvV94PKzDArjp7BTRm7WlDAXYd/OWdeFHO8OChQYRJNJvUCqCbrtKA==", "dev": true, - "license": "MIT", "dependencies": { - "browserslist": "^4.22.1" + "browserslist": "^4.23.0" }, "funding": { "type": "opencollective", @@ -26486,8 +26531,9 @@ }, "node_modules/regenerator-transform": { "version": "0.15.2", + "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz", + "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==", "dev": true, - "license": "MIT", "dependencies": { "@babel/runtime": "^7.8.4" } diff --git a/package.json b/package.json index 708bf6ad87..8fe4b3853b 100644 --- a/package.json +++ b/package.json @@ -109,15 +109,15 @@ "Samsung >= 16" ], "devDependencies": { - "@babel/cli": "^7.23.9", + "@babel/cli": "^7.24.1", "@babel/core": "^7.24.0", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.2", "@babel/plugin-proposal-private-methods": "^7.17.12", - "@babel/plugin-transform-runtime": "^7.23.7", - "@babel/preset-env": "^7.23.8", - "@babel/preset-react": "^7.18.6", - "@babel/preset-typescript": "^7.23.3", + "@babel/plugin-transform-runtime": "^7.24.3", + "@babel/preset-env": "^7.24.3", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", "@babel/register": "^7.23.7", "@percy/cli": "^1.28.2", "@percy/storybook": "^5.0.1", From 0ba2e0dd76d72674d403ea05580447529d373d5d Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 25 Mar 2024 16:31:46 +0000 Subject: [PATCH 033/174] Bump actions/cache from 4.0.1 to 4.0.2 (#3312) Bumps [actions/cache](https://github.com/actions/cache) from 4.0.1 to 4.0.2. - [Release notes](https://github.com/actions/cache/releases) - [Changelog](https://github.com/actions/cache/blob/main/RELEASES.md) - [Commits](https://github.com/actions/cache/compare/v4.0.1...v4.0.2) --- updated-dependencies: - dependency-name: actions/cache dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- .github/workflows/_build.yml | 8 ++++---- .github/workflows/main.yml | 12 ++++++------ .github/workflows/pr.yml | 10 +++++----- .github/workflows/release.yml | 8 ++++---- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/.github/workflows/_build.yml b/.github/workflows/_build.yml index fc75d6866c..33a7c50c7e 100644 --- a/.github/workflows/_build.yml +++ b/.github/workflows/_build.yml @@ -27,7 +27,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Restore Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: npm-cache with: path: | @@ -62,7 +62,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Restore Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: npm-cache with: path: | @@ -71,7 +71,7 @@ jobs: key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Restore Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: storybook-dist-cache with: path: dist-storybook/ @@ -99,7 +99,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Restore Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: npm-cache with: path: | diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 183efcccdd..29c5159a61 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -28,7 +28,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Upload to Cache - uses: actions/cache@v4.0.1 + uses: actions/cache@v4.0.2 id: npm-cache with: path: | @@ -52,7 +52,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Restore NPM Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: npm-cache with: path: | @@ -61,7 +61,7 @@ jobs: key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Upload dist-storybook to Cache - uses: actions/cache@v4.0.1 + uses: actions/cache@v4.0.2 id: storybook-dist-cache with: path: | @@ -94,7 +94,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Restore npm Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: npm-cache with: path: | @@ -103,7 +103,7 @@ jobs: key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Restore Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: storybook-dist-cache with: path: dist-storybook/ @@ -131,7 +131,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Restore npm Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: npm-cache with: path: | diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index d14cb39539..d8c80ad681 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -28,7 +28,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Upload to Cache - uses: actions/cache@v4.0.1 + uses: actions/cache@v4.0.2 id: npm-cache with: path: | @@ -52,7 +52,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Restore NPM Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: npm-cache with: path: | @@ -61,7 +61,7 @@ jobs: key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Upload dist-storybook to Cache - uses: actions/cache@v4.0.1 + uses: actions/cache@v4.0.2 id: storybook-dist-cache with: path: | @@ -95,7 +95,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Restore npm Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: npm-cache with: path: | @@ -104,7 +104,7 @@ jobs: key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Restore Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: storybook-dist-cache with: path: dist-storybook/ diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 1d78251a6d..893c2df6ae 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -24,7 +24,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Upload to Cache - uses: actions/cache@v4.0.1 + uses: actions/cache@v4.0.2 id: npm-cache with: path: | @@ -48,7 +48,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Restore NPM Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: npm-cache with: path: | @@ -57,7 +57,7 @@ jobs: key: ${{ env.CACHE_NAME }}-${{ hashFiles('package-lock.json', 'packages/package-lock.json') }} - name: Upload dist-storybook to Cache - uses: actions/cache@v4.0.1 + uses: actions/cache@v4.0.2 id: storybook-dist-cache with: path: | @@ -94,7 +94,7 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Restore Cache - uses: actions/cache/restore@v4.0.1 + uses: actions/cache/restore@v4.0.2 id: npm-cache with: path: | From c405b880927431e5ec1b2e5d2f0ab362b07e1c47 Mon Sep 17 00:00:00 2001 From: James Ronald <7976511+jronald01@users.noreply.github.com> Date: Mon, 25 Mar 2024 16:51:15 +0000 Subject: [PATCH 034/174] BpKContentCards LOOM-1276 (#3298) * BpKContentCards LOOM-1276 * Remove BpKText and use regular element with conditional CSS * fixed at 0 * Use mixin for margin reset instead * attempt 2 * fixed stylelint issues * fix for setting appropriate margin top and bottom * revert to using getclassname and add visual tests * just leave the more complex three card visual test --------- Co-authored-by: James Ronald --- examples/bpk-component-content-cards/stories.ts | 2 ++ .../bpk-component-content-cards/src/BpkContentCards.js | 10 +--------- .../src/BpkContentCards.module.scss | 3 +-- .../src/__snapshots__/BpkContentCards-test.js.snap | 6 +++--- 4 files changed, 7 insertions(+), 14 deletions(-) diff --git a/examples/bpk-component-content-cards/stories.ts b/examples/bpk-component-content-cards/stories.ts index d9a6201269..68a070b432 100644 --- a/examples/bpk-component-content-cards/stories.ts +++ b/examples/bpk-component-content-cards/stories.ts @@ -34,3 +34,5 @@ export const DefaultOneCard = WithOneCardExample; export const DefaultTwoCards = WithTwoCardsExample; export const DefaultThreeCards = WithThreeCardsExample; + +export const VisualTestThreeCards = WithThreeCardsExample; diff --git a/packages/bpk-component-content-cards/src/BpkContentCards.js b/packages/bpk-component-content-cards/src/BpkContentCards.js index c474c5a1af..34ae918e89 100644 --- a/packages/bpk-component-content-cards/src/BpkContentCards.js +++ b/packages/bpk-component-content-cards/src/BpkContentCards.js @@ -17,9 +17,6 @@ */ /* eslint react/no-array-index-key: 0 */ -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import BpkText from '../../bpk-component-text'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { cssModules } from '../../bpk-react-utils'; import BpkContentCard from './BpkContentCard'; @@ -48,12 +45,7 @@ const BpkContentCards = ({ cards, heading }: Props) => { return (
- - {heading} - +

{heading}

{cards.map((card, index) => (
diff --git a/packages/bpk-component-content-cards/src/BpkContentCards.module.scss b/packages/bpk-component-content-cards/src/BpkContentCards.module.scss index 26f55c1948..292e48a30b 100644 --- a/packages/bpk-component-content-cards/src/BpkContentCards.module.scss +++ b/packages/bpk-component-content-cards/src/BpkContentCards.module.scss @@ -25,8 +25,7 @@ .bpk-content-cards { &--header-text { - margin-bottom: tokens.bpk-spacing-base(); - + @include typography.bpk-paragraph; @include typography.bpk-heading-2; @include breakpoints.bpk-breakpoint-mobile { diff --git a/packages/bpk-component-content-cards/src/__snapshots__/BpkContentCards-test.js.snap b/packages/bpk-component-content-cards/src/__snapshots__/BpkContentCards-test.js.snap index f319c4fd8d..59d3661557 100644 --- a/packages/bpk-component-content-cards/src/__snapshots__/BpkContentCards-test.js.snap +++ b/packages/bpk-component-content-cards/src/__snapshots__/BpkContentCards-test.js.snap @@ -4,7 +4,7 @@ exports[`Content Card widget renders correctly with 1 card 1`] = `

Header for the component

@@ -54,7 +54,7 @@ exports[`Content Card widget renders correctly with 2 cards 1`] = `

Header for the component

@@ -137,7 +137,7 @@ exports[`Content Card widget renders correctly with 3 cards 1`] = `

Header for the component

From 7f0f9a67c5655f7598e2c3e8a4b735f8f97e22a6 Mon Sep 17 00:00:00 2001 From: Rob Waddell <38808938+robaw@users.noreply.github.com> Date: Tue, 26 Mar 2024 09:23:56 +0000 Subject: [PATCH 035/174] BpkBreakpoint: Fix Server Side Rendering (#3299) * BpkBreakpoint: Fix & Optimize SSR rendering * small tweak to useMediaQuery + fix tests * Re-add snapshot * Remove isClient block within useMediaQuery useEffect * mock useMediaQuery in tests * remove console log * Add to readme * Improve guidance * Update type and README * Small correction to guidance snipper * Add dummy import * Removed isClient from dependency array --- .../src/BpkBottomSheet-test.tsx | 3 +- .../src/accessibility-test.tsx | 3 +- packages/bpk-component-breakpoint/README.md | 46 +++++- packages/bpk-component-breakpoint/index.d.ts | 3 +- .../src/BpkBreakpoint-test.tsx | 134 ++++++++++-------- .../src/BpkBreakpoint.tsx | 29 +--- .../__snapshots__/BpkBreakpoint-test.tsx.snap | 22 ++- .../__snapshots__/useMediaQuery-test.tsx.snap | 7 + .../src/accessibility-test.tsx | 3 + ...iaQuery-test.ts => useMediaQuery-test.tsx} | 37 +++++ .../src/useMediaQuery.ts | 23 ++- .../src/BpkDatepicker-test.tsx | 2 + .../src/accessibility-test.tsx | 3 +- 13 files changed, 199 insertions(+), 116 deletions(-) create mode 100644 packages/bpk-component-breakpoint/src/__snapshots__/useMediaQuery-test.tsx.snap rename packages/bpk-component-breakpoint/src/{useMediaQuery-test.ts => useMediaQuery-test.tsx} (56%) diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx index 690bbf12ce..c0b6066239 100644 --- a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx +++ b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet-test.tsx @@ -21,7 +21,8 @@ import { renderToString } from 'react-dom/server'; import { render } from '@testing-library/react'; import BpkBottomSheet from './BpkBottomSheet'; - +// mock breakpoint to always match +jest.mock('../../bpk-component-breakpoint/src/useMediaQuery', () => jest.fn(() => true)); describe('BpkBottomSheet', () => { it('renders without crashing with all props', () => { expect(() => renderToString( diff --git a/packages/bpk-component-bottom-sheet/src/accessibility-test.tsx b/packages/bpk-component-bottom-sheet/src/accessibility-test.tsx index 89750134b4..223c6d407e 100644 --- a/packages/bpk-component-bottom-sheet/src/accessibility-test.tsx +++ b/packages/bpk-component-bottom-sheet/src/accessibility-test.tsx @@ -20,7 +20,8 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; import BpkBottomSheet from './BpkBottomSheet'; - +// mock breakpoint to always match +jest.mock('../../bpk-component-breakpoint/src/useMediaQuery', () => jest.fn(() => true)); describe('BpkBottomSheet accessibility tests', () => { it('should not have programmatically-detectable accessibility issues', async () => { const { container } = render( diff --git a/packages/bpk-component-breakpoint/README.md b/packages/bpk-component-breakpoint/README.md index 6dce81c8a4..8d6ba3f972 100644 --- a/packages/bpk-component-breakpoint/README.md +++ b/packages/bpk-component-breakpoint/README.md @@ -24,17 +24,57 @@ export default () => ( ### Server Side Render (SSR) Support -You can pass `matchSSR` which will instruct the breakpoint to match any time it is rendered on the server. +You can pass `matchSSR` which will instruct the breakpoint to match any time it is rendered on the server. You can use +this to estimate what breakpoint is likely to match on the client-side. ```js - +import { isTablet, isMobilePhone } from 'some-device-detection'; + + Tablet viewport is active OR we are rendering on the server-side - + Mobile viewport is active AND we are rendering on the client-side ``` +If you match to a different breakpoint when rendering on the server, than what is matched to in the traveller's browser, +then React will print a warning saying there is a mismatch. + +### Testing + +When writing tests for any components that use BpkBreakpoint, you will have to mock either the `BpkBreakpoint` component +or the underlying `useMediaQuery`. This is because the `window.matchMedia` function that we rely on does not exist in +the jest testing environment. + +A mock were you only wanted your mobile BpkBreakpoint to render: +```js +import { useMediaQuery, BREAKPOINTS } from '@skyscanner/backpack-web/bpk-component-breakpoint'; + +jest.mock('@skyscanner/backpack-web/bpk-component-breakpoint', () => { + __esModule: true, + ...jest.requireActual('@skyscanner/backpack-web/bpk-component-breakpoint'), + useMediaQuery: jest.fn(), +}); +describe('tests', () => { + it('my test', () => { + (useMediaQuery as jest.Mock).mockImplementation( + (query: string) => query === BREAKPOINTS.MOBILE, + ); + }) +}) +``` + +A simpler mock were you want all BpkBreakpoints to render: +```js +jest.mock('@skyscanner/backpack-web/bpk-component-breakpoint', () => { + __esModule: true, + ...jest.requireActual('@skyscanner/backpack-web/bpk-component-breakpoint'), + useMediaQuery: () => true, +}); +``` + + ## Props Check out the full list of props on Skyscanner's [design system documentation website](https://www.skyscanner.design/latest/components/breakpoint/web-5sPWfgsH#section-props-32). diff --git a/packages/bpk-component-breakpoint/index.d.ts b/packages/bpk-component-breakpoint/index.d.ts index bc61e87cab..974b988023 100644 --- a/packages/bpk-component-breakpoint/index.d.ts +++ b/packages/bpk-component-breakpoint/index.d.ts @@ -17,5 +17,6 @@ */ import BpkBreakpoint, { BREAKPOINTS } from './src/BpkBreakpoint'; -export { BREAKPOINTS }; +import useMediaQuery from './src/useMediaQuery'; +export { BREAKPOINTS, useMediaQuery }; export default BpkBreakpoint; diff --git a/packages/bpk-component-breakpoint/src/BpkBreakpoint-test.tsx b/packages/bpk-component-breakpoint/src/BpkBreakpoint-test.tsx index 8121db75c2..0029b124d3 100644 --- a/packages/bpk-component-breakpoint/src/BpkBreakpoint-test.tsx +++ b/packages/bpk-component-breakpoint/src/BpkBreakpoint-test.tsx @@ -23,99 +23,111 @@ import { render } from '@testing-library/react'; import { BREAKPOINTS } from './BpkBreakpoint'; describe('BpkBreakpoint', () => { - it('should render if the breakpoint is matched', () => { - jest.resetModules(); - const BpkBreakpoint = require('./BpkBreakpoint').default; // eslint-disable-line global-require - jest.mock('./useMediaQuery', () => () => true); - - const { asFragment } = render( - - {(matches: boolean) => - matches ?
matches
:
does not match
- } - , - ); - expect(asFragment()).toMatchSnapshot(); - }); - - it('should render if the breakpoint is not matched', () => { - jest.resetModules(); - const BpkBreakpoint = require('./BpkBreakpoint').default; // eslint-disable-line global-require - jest.mock('./useMediaQuery', () => () => false); - - const { asFragment } = render( - - {(matches: boolean) => - matches ?
matches
:
does not match
- } - , - ); - expect(asFragment()).toMatchSnapshot(); - }); - - describe('SSR mode', () => { - beforeEach(() => { + describe('children as component', () => { + it('should render when breakpoint matches', () => { + jest.resetModules(); + const BpkBreakpoint = require('./BpkBreakpoint').default; // eslint-disable-line global-require jest.mock('./useMediaQuery', () => () => true); - jest.resetModules(); + const { asFragment } = render( + +
matches
+ , + ); + expect(asFragment()).toMatchSnapshot(); }); - afterEach(() => { - jest.restoreAllMocks(); + it('should not render when breakpoint does not match', () => { + jest.resetModules(); + const BpkBreakpoint = require('./BpkBreakpoint').default; // eslint-disable-line global-require + jest.mock('./useMediaQuery', () => () => false); + + const { asFragment } = render( + +
matches
+ , + ); + expect(asFragment()).toMatchSnapshot(); }); + }); - it('should render when matchSSR=true', () => { + describe('children as a callback function', () => { + it('should call function with matches=false if the breakpoint is not matched', () => { + jest.resetModules(); const BpkBreakpoint = require('./BpkBreakpoint').default; // eslint-disable-line global-require + jest.mock('./useMediaQuery', () => () => false); - const html = ReactDOMServer.renderToString( - + const { asFragment } = render( + {(matches: boolean) => matches ?
matches
:
does not match
} , ); - - expect(html).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); - it('should not render on SSR until hydrated when matchSSR=false', async () => { + it('should call function with matches=true if the breakpoint is matched', () => { + jest.resetModules(); const BpkBreakpoint = require('./BpkBreakpoint').default; // eslint-disable-line global-require + jest.mock('./useMediaQuery', () => () => true); - const components = ( - + const { asFragment } = render( + {(matches: boolean) => matches ?
matches
:
does not match
} - + , ); + expect(asFragment()).toMatchSnapshot(); + }); + }); + + describe('SSR mode', () => { + beforeEach(() => { + jest.mock('./useMediaQuery', () => () => true); + + jest.resetModules(); + }); + + afterEach(() => { + jest.restoreAllMocks(); + }); - // Checking SSR - const html = ReactDOMServer.renderToString(components); + it('should pass matchSSR=true to useMediaQuery when matchSSR=true', () => { + const mockUseMediaQuery = jest.fn(); + jest.mock('./useMediaQuery', () => mockUseMediaQuery); + const BpkBreakpoint = require('./BpkBreakpoint').default; // eslint-disable-line global-require - expect(html).toMatchSnapshot('server rendered'); + ReactDOMServer.renderToString( + , + ); - const container = document.createElement('div'); - document.body.appendChild(container); - container.innerHTML = html; + expect(mockUseMediaQuery).toHaveBeenCalledWith(BREAKPOINTS.MOBILE, true); + }); - // Hydrating and CSR - const { asFragment } = render(components, { hydrate: true, container }); + it('should pass matchSSR=false to useMediaQuery when matchSSR=false', () => { + const mockUseMediaQuery = jest.fn(); + jest.mock('./useMediaQuery', () => mockUseMediaQuery); + const BpkBreakpoint = require('./BpkBreakpoint').default; // eslint-disable-line global-require - expect(asFragment()).toMatchSnapshot('hydrated'); + ReactDOMServer.renderToString( + , + ); + + expect(mockUseMediaQuery).toHaveBeenCalledWith(BREAKPOINTS.MOBILE, false); }); - it('should not render when matchSSR is not defined', () => { + it('should pass matchSSR=false to useMediaQuery when matchSSR not defined', () => { + const mockUseMediaQuery = jest.fn(); + jest.mock('./useMediaQuery', () => mockUseMediaQuery); const BpkBreakpoint = require('./BpkBreakpoint').default; // eslint-disable-line global-require - const html = ReactDOMServer.renderToString( - - {(matches: boolean) => - matches ?
matches
:
does not match
- } - , + ReactDOMServer.renderToString( + , ); - expect(html).toMatchSnapshot(); + expect(mockUseMediaQuery).toHaveBeenCalledWith(BREAKPOINTS.MOBILE, false); }); }); diff --git a/packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx b/packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx index 638c4d82f7..966710ee1f 100644 --- a/packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx +++ b/packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx @@ -16,7 +16,6 @@ * limitations under the License. */ -import { useState, useEffect } from 'react'; import type { ReactElement, ReactNode } from 'react'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. @@ -53,32 +52,18 @@ const BpkBreakpoint = ({ matchSSR = false, query, }: Props) => { - const [isClient, setIsClient] = useState(false); - const matches = useMediaQuery(query); + const matches = useMediaQuery(query, matchSSR); - useEffect(() => { - setIsClient(true); - }, []); - - if (isClient) { - if (!legacy && !Object.values(BREAKPOINTS).includes(query)) { - console.warn( - `Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`, - ); - } - - if (typeof children === 'function') { - return children(matches) as ReactElement; - } - return matches ? (children as ReactElement) : null; + if (!legacy && !Object.values(BREAKPOINTS).includes(query)) { + console.warn( + `Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`, + ); } - // Below code is executed when running in SSR mode - if (typeof children === 'function') { - return children(matchSSR); + return children(matches) as ReactElement; } - return matchSSR ? children : null; + return matches ? (children as ReactElement) : null; }; export { BREAKPOINTS }; diff --git a/packages/bpk-component-breakpoint/src/__snapshots__/BpkBreakpoint-test.tsx.snap b/packages/bpk-component-breakpoint/src/__snapshots__/BpkBreakpoint-test.tsx.snap index f261ce5c6f..6d3ce7e195 100644 --- a/packages/bpk-component-breakpoint/src/__snapshots__/BpkBreakpoint-test.tsx.snap +++ b/packages/bpk-component-breakpoint/src/__snapshots__/BpkBreakpoint-test.tsx.snap @@ -1,22 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`BpkBreakpoint SSR mode should not render on SSR until hydrated when matchSSR=false: hydrated 1`] = ` +exports[`BpkBreakpoint children as a callback function should call function with matches=false if the breakpoint is not matched 1`] = ` -
- matches +
+ does not match
`; -exports[`BpkBreakpoint SSR mode should not render on SSR until hydrated when matchSSR=false: server rendered 1`] = `"
does not match
"`; - -exports[`BpkBreakpoint SSR mode should not render when matchSSR is not defined 1`] = `"
does not match
"`; - -exports[`BpkBreakpoint SSR mode should render when matchSSR=true 1`] = `"
matches
"`; - -exports[`BpkBreakpoint should render if the breakpoint is matched 1`] = ` +exports[`BpkBreakpoint children as a callback function should call function with matches=true if the breakpoint is matched 1`] = `
matches @@ -24,10 +16,12 @@ exports[`BpkBreakpoint should render if the breakpoint is matched 1`] = ` `; -exports[`BpkBreakpoint should render if the breakpoint is not matched 1`] = ` +exports[`BpkBreakpoint children as component should not render when breakpoint does not match 1`] = ``; + +exports[`BpkBreakpoint children as component should render when breakpoint matches 1`] = `
- does not match + matches
`; diff --git a/packages/bpk-component-breakpoint/src/__snapshots__/useMediaQuery-test.tsx.snap b/packages/bpk-component-breakpoint/src/__snapshots__/useMediaQuery-test.tsx.snap new file mode 100644 index 0000000000..b03d797313 --- /dev/null +++ b/packages/bpk-component-breakpoint/src/__snapshots__/useMediaQuery-test.tsx.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`useMediaQuery SSR mode should match when matchSSR=true 1`] = `"
matches
"`; + +exports[`useMediaQuery SSR mode should not match when matchSSR not explicitly set 1`] = `"
no match
"`; + +exports[`useMediaQuery SSR mode should not match when matchSSR=false 1`] = `"
no match
"`; diff --git a/packages/bpk-component-breakpoint/src/accessibility-test.tsx b/packages/bpk-component-breakpoint/src/accessibility-test.tsx index 00552f8dd7..f308a8db1c 100644 --- a/packages/bpk-component-breakpoint/src/accessibility-test.tsx +++ b/packages/bpk-component-breakpoint/src/accessibility-test.tsx @@ -21,6 +21,9 @@ import { axe } from 'jest-axe'; import BpkBreakpoint, { BREAKPOINTS } from './BpkBreakpoint'; +// mock breakpoint to always match +jest.mock('./useMediaQuery', () => jest.fn(() => true)); + describe('BpkBreakpoint accessibility tests', () => { it('should not have programmatically-detectable accessibility issues', async () => { const { container } = render( diff --git a/packages/bpk-component-breakpoint/src/useMediaQuery-test.ts b/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx similarity index 56% rename from packages/bpk-component-breakpoint/src/useMediaQuery-test.ts rename to packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx index f4ed868240..fdf865e386 100644 --- a/packages/bpk-component-breakpoint/src/useMediaQuery-test.ts +++ b/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx @@ -17,10 +17,47 @@ */ import { renderHook } from '@testing-library/react-hooks'; +import '@testing-library/jest-dom'; +import { renderToString } from 'react-dom/server'; import useMediaQuery from './useMediaQuery'; describe('useMediaQuery', () => { + describe('SSR mode', () => { + const DummyComponent = ({ matchSSR }: { matchSSR?: boolean }) => { + const matches = useMediaQuery('(min-width: 768px)', matchSSR); + return
{matches ? 'matches' : 'no match'}
; + }; + + it('should match when matchSSR=true', () => { + const html = renderToString(); + expect(html).toMatchSnapshot(); + }); + + it('should not match when matchSSR=false', () => { + const html = renderToString(); + expect(html).toMatchSnapshot(); + }); + + it('should not match when matchSSR not explicitly set', () => { + const html = renderToString(); + expect(html).toMatchSnapshot(); + }); + }); + + it('should call addEventListener', () => { + const mockAddEventListener = jest.fn(); + window.matchMedia = jest.fn().mockImplementation(() => ({ + matches: true, + addEventListener: mockAddEventListener, + removeEventListener: jest.fn(), + })); + + renderHook(() => useMediaQuery('(min-width: 768px)')); + + expect(mockAddEventListener).toHaveBeenCalledTimes(1); + }); + it('should return true if media query matches', () => { window.matchMedia = jest.fn().mockImplementation(() => ({ matches: true, diff --git a/packages/bpk-component-breakpoint/src/useMediaQuery.ts b/packages/bpk-component-breakpoint/src/useMediaQuery.ts index b907c94e80..b4c507d623 100644 --- a/packages/bpk-component-breakpoint/src/useMediaQuery.ts +++ b/packages/bpk-component-breakpoint/src/useMediaQuery.ts @@ -16,24 +16,23 @@ * limitations under the License. */ -import { useState, useEffect } from 'react'; +import { useEffect, useState } from 'react'; + +const useMediaQuery = (query: string, matchSSR = false): boolean => { + const isClient = typeof window !== 'undefined' && !!window.matchMedia; -const useMediaQuery = (query: string): boolean => { const [matches, setMatches] = useState( - window.matchMedia ? window.matchMedia(query).matches : false, + isClient ? window.matchMedia(query).matches : matchSSR, ); useEffect(() => { - if (window.matchMedia) { - const media = window.matchMedia(query); + const media = window.matchMedia(query); + setMatches(media.matches); + const listener = () => { setMatches(media.matches); - const listener = () => { - setMatches(media.matches); - }; - media.addEventListener('change', listener); - return () => media.removeEventListener('change', listener); - } - return undefined; + }; + media.addEventListener('change', listener); + return () => media.removeEventListener('change', listener); }, [query]); return matches; diff --git a/packages/bpk-component-datepicker/src/BpkDatepicker-test.tsx b/packages/bpk-component-datepicker/src/BpkDatepicker-test.tsx index e372ca5a61..56853f253e 100644 --- a/packages/bpk-component-datepicker/src/BpkDatepicker-test.tsx +++ b/packages/bpk-component-datepicker/src/BpkDatepicker-test.tsx @@ -30,6 +30,8 @@ import { CALENDAR_SELECTION_TYPE } from '../../bpk-component-calendar'; import BpkDatepicker from './BpkDatepicker'; +// mock breakpoint to always match +jest.mock('../../bpk-component-breakpoint/src/useMediaQuery', () => jest.fn(() => true)); jest.mock('@popperjs/core', () => { const PopperJS = jest.requireActual('@popperjs/core'); return { diff --git a/packages/bpk-component-datepicker/src/accessibility-test.tsx b/packages/bpk-component-datepicker/src/accessibility-test.tsx index d676e78c53..ca1c9a46c0 100644 --- a/packages/bpk-component-datepicker/src/accessibility-test.tsx +++ b/packages/bpk-component-datepicker/src/accessibility-test.tsx @@ -26,7 +26,8 @@ import { } from '../../bpk-component-calendar/test-utils'; import { format } from '../../bpk-component-calendar/src/date-utils'; import { CALENDAR_SELECTION_TYPE } from '../../bpk-component-calendar'; - +// mock breakpoint to always match +jest.mock('../../bpk-component-breakpoint/src/useMediaQuery', () => jest.fn(() => true)); jest.mock('@popperjs/core', () => { const originalModule = jest.requireActual('@popperjs/core'); return { From bf3dd5a5cb423b8e1befb69d29a649d4824138f7 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 26 Mar 2024 09:49:12 +0000 Subject: [PATCH 036/174] Bump typescript from 5.3.3 to 5.4.3 (#3308) Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.3.3 to 5.4.3. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml) - [Commits](https://github.com/Microsoft/TypeScript/compare/v5.3.3...v5.4.3) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index dfaecb85e8..cf201f39ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -80,7 +80,7 @@ "storybook": "^7.6.17", "style-loader": "^3.3.4", "ts-migrate": "^0.1.35", - "typescript": "^5.3.3", + "typescript": "^5.4.3", "webpack": "^5.90.3", "wrapper-webpack-plugin": "^2.2.2" }, @@ -30909,9 +30909,9 @@ } }, "node_modules/typescript": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", - "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz", + "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==", "dev": true, "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index 8fe4b3853b..be5b376615 100644 --- a/package.json +++ b/package.json @@ -179,7 +179,7 @@ "storybook": "^7.6.17", "style-loader": "^3.3.4", "ts-migrate": "^0.1.35", - "typescript": "^5.3.3", + "typescript": "^5.4.3", "webpack": "^5.90.3", "wrapper-webpack-plugin": "^2.2.2" } From 61e0e8a6b8ada433d18c7462721698d45fcf6e2a Mon Sep 17 00:00:00 2001 From: Rob Waddell <38808938+robaw@users.noreply.github.com> Date: Tue, 26 Mar 2024 10:21:27 +0000 Subject: [PATCH 037/174] Fix linting (#3319) --- packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx b/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx index fdf865e386..dcbeaf6cd6 100644 --- a/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx +++ b/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx @@ -15,10 +15,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { renderToString } from 'react-dom/server'; +import '@testing-library/jest-dom'; import { renderHook } from '@testing-library/react-hooks'; -import '@testing-library/jest-dom'; -import { renderToString } from 'react-dom/server'; import useMediaQuery from './useMediaQuery'; From dd6e9ac9a15e945a00eecc2dbac7feaef5f92339 Mon Sep 17 00:00:00 2001 From: Iain Cattermole <22656572+Iain530@users.noreply.github.com> Date: Tue, 26 Mar 2024 14:10:34 +0000 Subject: [PATCH 038/174] [DTO-5126][bpk-component-chip] Create BpkIconChip (#3277) [DTO-5126][bpk-component-chip] Create BpkIconChip (#3277) * Create BpkIconChip * generate type declaration files * Use initial state from props in examples * Add BpkIconChip example to README * Fix props formatting * don't pass leading icon classname * update type declarations * fix rtl * fix rtl * Implicitly set icon only class * Imply icon only from no children * remove null prop * Fix import order --------- Co-authored-by: Iain Cattermole --- examples/bpk-component-chip/examples.js | 350 -------------- examples/bpk-component-chip/examples.tsx | 309 ++++++++++++ .../{stories.js => stories.tsx} | 6 +- packages/bpk-component-chip/README.md | 9 + packages/bpk-component-chip/index.d.ts | 8 +- packages/bpk-component-chip/index.ts | 3 +- .../src/BpkIconChip-test.tsx | 72 +++ .../bpk-component-chip/src/BpkIconChip.d.ts | 25 + .../bpk-component-chip/src/BpkIconChip.tsx | 41 ++ .../src/BpkSelectableChip-test.tsx | 12 + .../src/BpkSelectableChip.d.ts | 2 - .../src/BpkSelectableChip.tsx | 8 +- .../__snapshots__/BpkIconChip-test.tsx.snap | 441 ++++++++++++++++++ .../BpkSelectableChip-test.tsx.snap | 69 +++ .../bpk-component-chip/src/commonTypes.d.ts | 2 +- .../bpk-component-chip/src/commonTypes.ts | 27 +- packages/bpk-mixins/_chips.scss | 9 + 17 files changed, 1008 insertions(+), 385 deletions(-) delete mode 100644 examples/bpk-component-chip/examples.js create mode 100644 examples/bpk-component-chip/examples.tsx rename examples/bpk-component-chip/{stories.js => stories.tsx} (90%) create mode 100644 packages/bpk-component-chip/src/BpkIconChip-test.tsx create mode 100644 packages/bpk-component-chip/src/BpkIconChip.d.ts create mode 100644 packages/bpk-component-chip/src/BpkIconChip.tsx create mode 100644 packages/bpk-component-chip/src/__snapshots__/BpkIconChip-test.tsx.snap diff --git a/examples/bpk-component-chip/examples.js b/examples/bpk-component-chip/examples.js deleted file mode 100644 index 411d52b4fc..0000000000 --- a/examples/bpk-component-chip/examples.js +++ /dev/null @@ -1,350 +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 */ - -// eslint-disable-next-line max-classes-per-file -import { Component } from 'react'; -import PropTypes from 'prop-types'; - -import { cssModules } from '../../packages/bpk-react-utils'; -import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; -import FaceHappyIconSm from '../../packages/bpk-component-icon/sm/face--happy'; -import { AriaLiveDemo } from '../bpk-component-aria-live/examples'; -import BpkSelectableChip, { - type BpkSelectableChipProps, - CHIP_TYPES, - BpkDismissibleChip, - BpkDropdownChip, -} from '../../packages/bpk-component-chip'; -import { - COMMON_PROP_TYPES, - COMMON_DEFAULT_PROPS, -} from '../../packages/bpk-component-chip/src/commonTypes'; - -import STYLES from './examples.module.scss'; - -const getClassName = cssModules(STYLES); - -/* ESLint is fighting with Prettier here, so I had to disable it. */ -type StatefulSelectableChipProps = $Diff< - BpkSelectableChipProps, - { - accessibilityLabel: string, - onClick: (event: SyntheticEvent<>) => mixed, - }, ->; -/* eslint-enable */ - -class StatefulSelectableChip extends Component< - StatefulSelectableChipProps, - { selected: boolean }, -> { - static propTypes = { - ...COMMON_PROP_TYPES, - role: PropTypes.string, - selected: PropTypes.bool, - trailingAccessoryView: PropTypes.node, - }; - - static defaultProps = { - ...COMMON_DEFAULT_PROPS, - role: 'checkbox', - selected: false, - trailingAccessoryView: null, - }; - - constructor(props) { - super(props); - this.state = { selected: props.selected }; - } - - toggleSelected = () => { - this.setState((prevState) => ({ selected: !prevState.selected })); - }; - - render() { - return ( - - ); - } -} - -class StatefulDropdownChip extends Component< - { type: $Keys }, - { chips: Array, updates: Array }, -> { - static propTypes = { - ...COMMON_PROP_TYPES, - role: PropTypes.string, - selected: PropTypes.bool, - trailingAccessoryView: PropTypes.node, - }; - - static defaultProps = { - ...COMMON_DEFAULT_PROPS, - role: 'checkbox', - selected: false, - trailingAccessoryView: null, - }; - - constructor(props) { - super(props); - this.state = { selected: props.selected }; - } - - toggleSelected = () => { - this.setState((prevState) => ({ selected: !prevState.selected })); - }; - - render() { - return ( - - ); - } -} - -class StatefulDismissibleChipsExample extends Component< - { type: $Keys }, - { chips: Array, updates: Array }, -> { - constructor() { - super(); - this.state = { - chips: ['Cheapest flights', 'Direct flights', 'Most popular'], - updates: [], - }; - } - - removeChip = (indexToRemove: number) => { - this.setState((prevState) => { - const newChips = prevState.chips; - const removedChip = newChips.splice(indexToRemove, 1)[0]; - - return { - chips: newChips, - updates: [...prevState.updates, `${removedChip} dismissed.`], - }; - }); - }; - - render() { - return ( -
-
- {this.state.chips.map((chip, index) => ( - { - this.removeChip(index); - }} - accessibilityLabel="Remove chip" - className={getClassName('bpk-chip-examples__chip')} - > - {chip} - - ))} -
- - {this.state.updates.map((u) => ( - <> - {u} -
- - ))} - -
- ); - } -} - -class StatefulRadioGroupChipsExample extends Component< - { type: $Keys }, - { chips: Array, updates: Array, selectedIndex: number }, -> { - constructor() { - super(); - this.state = { - selectedIndex: 0, - chips: ['Cheapest flights', 'Direct flights', 'Most popular'], - updates: [], - }; - } - - selectChip = (indexToSelect: number) => { - const selectedChip = this.state.chips[indexToSelect]; - - this.setState((prevState) => ({ - selectedIndex: indexToSelect, - updates: [...prevState.updates, `${selectedChip} selected.`], - })); - }; - - render() { - return ( -
-
- - Favourite colour - - {this.state.chips.map((chip, index) => ( - { - this.selectChip(index); - }} - selected={this.state.selectedIndex === index} - disabled={index === 3} - className={getClassName('bpk-chip-examples__chip')} - accessibilityLabel={chip} - > - {chip} - - ))} -
- - {this.state.updates.map((update) => ( - <> - {update} -
- - ))} - -
- ); - } -} - -const StatefulSelectableChips = ({ ...rest }: {}) => ( -
- Cheapest flights - - Direct flights - - - Most popular - -
-); - -const StatefulDropdownChips = ({ ...rest }: {}) => ( -
- Car type - - Pick-up - - - Seats - -
-); - -const RadioGroupChipsExample = () => ( - -); - -const AllSelectableChipsExample = () => ( -
- {Object.keys(CHIP_TYPES).map((chipType) => ( - <> -
- {chipType} - -
-
- - {chipType} with leading icon - - } - /> -
- - ))} -
-); - -const AllDropdownChipsExample = () => ( -
- {Object.keys(CHIP_TYPES).map((chipType) => ( -
- {chipType} - -
- ))} -
-); - -const AllDismissibleChipsExample = () => ( -
- {Object.keys(CHIP_TYPES).map((chipType) => ( -
- {chipType} - -
- ))} -
-); - -const AllTypesExample = () => ( -
- - Selectable chips - - - - Dropdown chips - - - - Dismissible chips - - -
-); - -export { - AllTypesExample, - AllSelectableChipsExample, - AllDropdownChipsExample, - AllDismissibleChipsExample, - RadioGroupChipsExample, -}; diff --git a/examples/bpk-component-chip/examples.tsx b/examples/bpk-component-chip/examples.tsx new file mode 100644 index 0000000000..95c46389ff --- /dev/null +++ b/examples/bpk-component-chip/examples.tsx @@ -0,0 +1,309 @@ +/* + * 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 { useState } from 'react'; + +import { cssModules } from '../../packages/bpk-react-utils'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import FaceHappyIconSm from '../../packages/bpk-component-icon/sm/face--happy'; +import FilterIconSm from '../../packages/bpk-component-icon/sm/filter'; +import { AriaLiveDemo } from '../bpk-component-aria-live/examples'; +import BpkSelectableChip, { + type BpkSelectableChipProps, + CHIP_TYPES, + BpkDismissibleChip, + BpkDropdownChip, + BpkIconChip, +} from '../../packages/bpk-component-chip'; + +import STYLES from './examples.module.scss'; + +const getClassName = cssModules(STYLES); + +type StatefulSelectableChipProps = Omit; + +const StatefulSelectableChip = (props: StatefulSelectableChipProps) => { + const [selected, setSelected] = useState(props.selected); + + const toggleSelected = () => setSelected(!selected); + + return ( + + ) +}; + +const StatefulDropdownChip = (props: StatefulSelectableChipProps) => { + const [selected, setSelected] = useState(props.selected); + const toggleSelected = () => setSelected(!selected); + + return ( + + ); +}; + + +const StatefulIconChip = (props: StatefulSelectableChipProps) => { + const [selected, setSelected] = useState(props.selected); + + const toggleSelected = () => setSelected(!selected); + + return ( + + ) +}; + + +const StatefulDismissibleChipsExample = (props: StatefulSelectableChipProps) => { + const [chips, setChips] = useState(['Cheapest flights', 'Direct flights', 'Most popular']); + const [updates, setUpdates] = useState([]); + + const removeChip = (indexToRemove: number) => { + const newChips = [...chips]; + const removedChip = newChips.splice(indexToRemove, 1)[0]; + + setChips(newChips); + setUpdates([...updates, `${removedChip} dismissed.`]) + } + + return ( +
+
+ {chips.map((chip, index) => ( + { + removeChip(index); + }} + accessibilityLabel="Remove chip" + className={getClassName('bpk-chip-examples__chip')} + > + {chip} + + ))} +
+ + {updates.map((u) => ( + <> + {u} +
+ + ))} + +
+ ); +} + + +const StatefulRadioGroupChipsExample = (props: StatefulSelectableChipProps) => { + const [selectedIndex, setSelectedIndex] = useState(0); + const [chips, setChips] = useState(['Cheapest flights', 'Direct flights', 'Most popular']); + const [updates, setUpdates] = useState([]); + + + const selectChip = (indexToSelect: number) => { + const selectedChip = chips[indexToSelect]; + + setSelectedIndex(indexToSelect); + setUpdates([...updates, `${selectedChip} selected.`]) + }; + + return ( +
+
+ + Favourite colour + + {chips.map((chip, index) => ( + { + selectChip(index); + }} + selected={selectedIndex === index} + disabled={index === 3} + className={getClassName('bpk-chip-examples__chip')} + accessibilityLabel={chip} + > + {chip} + + ))} +
+ + {updates.map((update) => ( + <> + {update} +
+ + ))} + +
+ ); +}; + + +const StatefulSelectableChips = ({ ...rest }: {}) => ( +
+ Cheapest flights + + Direct flights + + + Most popular + +
+); + + +const StatefulIconChips = ({ ...rest }: {}) => ( +
+ + + +
+); + + +const StatefulDropdownChips = ({ ...rest }: {}) => ( +
+ Car type + + Pick-up + + + Seats + +
+); + +const RadioGroupChipsExample = () => ( + +); + +const AllSelectableChipsExample = () => ( +
+ {Object.keys(CHIP_TYPES).map((chipType) => ( + <> +
+ {chipType} + +
+
+ + {chipType} with leading icon + + } + /> +
+ + ))} +
+); + +const AllIconChipsExample = () => ( +
+ {Object.keys(CHIP_TYPES).map((chipType) => ( +
+ {chipType} + } /> +
+ ))} +
+); + +const AllDropdownChipsExample = () => ( +
+ {Object.keys(CHIP_TYPES).map((chipType) => ( +
+ {chipType} + +
+ ))} +
+); + +const AllDismissibleChipsExample = () => ( +
+ {Object.keys(CHIP_TYPES).map((chipType) => ( +
+ {chipType} + +
+ ))} +
+); + +const AllTypesExample = () => ( +
+ + Selectable chips + + + + Dropdown chips + + + + Dismissible chips + + + + Icon Chips + + +
+); + +export { + AllTypesExample, + AllSelectableChipsExample, + AllIconChipsExample, + AllDropdownChipsExample, + AllDismissibleChipsExample, + RadioGroupChipsExample, +}; diff --git a/examples/bpk-component-chip/stories.js b/examples/bpk-component-chip/stories.tsx similarity index 90% rename from examples/bpk-component-chip/stories.js rename to examples/bpk-component-chip/stories.tsx index 387c652330..4e14bbb4ab 100644 --- a/examples/bpk-component-chip/stories.js +++ b/examples/bpk-component-chip/stories.tsx @@ -20,6 +20,7 @@ import BpkSelectableChip from '../../packages/bpk-component-chip/src/BpkSelectableChip'; import BpkDismissibleChip from '../../packages/bpk-component-chip/src/BpkDismissibleChip'; import BpkDropdownChip from '../../packages/bpk-component-chip/src/BpkDropdownChip'; +import BpkIconChip from '../../packages/bpk-component-chip/src/BpkIconChip'; import { AllTypesExample, @@ -27,6 +28,7 @@ import { AllDropdownChipsExample, AllDismissibleChipsExample, RadioGroupChipsExample, + AllIconChipsExample, } from './examples'; export default { @@ -35,11 +37,13 @@ export default { subcomponents: { BpkDismissibleChip, BpkDropdownChip, + BpkIconChip, }, }; export const AllTypes = AllTypesExample; export const AllSelectableTypes = AllSelectableChipsExample; +export const AllIconOnlyTypes = AllIconChipsExample; export const AllDropdownTypes = AllDropdownChipsExample; export const AllDismissibleTypes = AllDismissibleChipsExample; export const RadioGroup = RadioGroupChipsExample; @@ -47,4 +51,4 @@ export const VisualTest = AllTypesExample; export const VisualTestWithZoom = VisualTest.bind({}); VisualTestWithZoom.args = { zoomEnabled: true -}; \ No newline at end of file +}; diff --git a/packages/bpk-component-chip/README.md b/packages/bpk-component-chip/README.md index c81891bb04..9ed6697c6f 100644 --- a/packages/bpk-component-chip/README.md +++ b/packages/bpk-component-chip/README.md @@ -12,6 +12,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp import BpkSelectableChip, { BpkDismissibleChip, BpkDropdownChip, + BpkIconChip CHIP_TYPES, } from '@skyscanner/backpack-web/bpk-component-chip'; import BeachIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/beach'; @@ -81,6 +82,14 @@ export default () => ( > Dismiss me + { + /* Use state to set 'selected={true}' */ + }} + leadingAccessoryView={} + />
); ``` diff --git a/packages/bpk-component-chip/index.d.ts b/packages/bpk-component-chip/index.d.ts index 378bd1f541..5158b1d1a5 100644 --- a/packages/bpk-component-chip/index.d.ts +++ b/packages/bpk-component-chip/index.d.ts @@ -16,17 +16,15 @@ * limitations under the License. */ -import BpkSelectableChip, { - type Props as SelectableProps, -} from './src/BpkSelectableChip'; +import BpkSelectableChip, { type Props as SelectableProps } from './src/BpkSelectableChip'; import BpkDismissibleChip from './src/BpkDismissibleChip'; import BpkDropdownChip from './src/BpkDropdownChip'; +import BpkIconChip from './src/BpkIconChip'; import type { CommonProps } from './src/commonTypes'; import { CHIP_TYPES } from './src/commonTypes'; import themeAttributes from './src/themeAttributes'; - export type BpkSelectableChipProps = SelectableProps; export type BpkDismissibleChipProps = CommonProps; export type BpkDropdownChipProps = CommonProps; export default BpkSelectableChip; -export { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES, themeAttributes }; +export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes }; diff --git a/packages/bpk-component-chip/index.ts b/packages/bpk-component-chip/index.ts index 8ddf554ca3..745907b33c 100644 --- a/packages/bpk-component-chip/index.ts +++ b/packages/bpk-component-chip/index.ts @@ -21,6 +21,7 @@ import BpkSelectableChip, { } from './src/BpkSelectableChip'; import BpkDismissibleChip from './src/BpkDismissibleChip'; import BpkDropdownChip from './src/BpkDropdownChip'; +import BpkIconChip from './src/BpkIconChip'; import { CHIP_TYPES } from './src/commonTypes'; import themeAttributes from './src/themeAttributes'; @@ -31,4 +32,4 @@ export type BpkDismissibleChipProps = CommonProps; export type BpkDropdownChipProps = CommonProps; export default BpkSelectableChip; -export { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES, themeAttributes }; +export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes }; diff --git a/packages/bpk-component-chip/src/BpkIconChip-test.tsx b/packages/bpk-component-chip/src/BpkIconChip-test.tsx new file mode 100644 index 0000000000..09132c4fd1 --- /dev/null +++ b/packages/bpk-component-chip/src/BpkIconChip-test.tsx @@ -0,0 +1,72 @@ +/* + * 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 FilterIconSm from '../../bpk-component-icon/sm/filter'; + +import { CHIP_TYPES } from './commonTypes'; +import BpkIconChip from './BpkIconChip'; + +import type { BpkIconChipProps } from './BpkIconChip'; + + +// Just a convenience wrapper that includes the default props so we don't +// have to keep writing them for each test. +const TestChip = ({ + ...rest + }: Omit) => ( + } onClick={() => null} accessibilityLabel="Filter" {...rest} /> +); + +describe('BpkIconChip', () => { + it('should render correctly', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + + Object.values(CHIP_TYPES).forEach((chipType) => { + it(`should render correctly with type="${chipType}"`, () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + + it(`should render correctly with type="${chipType}" and selected`, () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + + it(`should render correctly with type="${chipType}" and disabled`, () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + + it(`should render correctly with type="${chipType}", selected and disabled`, () => { + const { asFragment } = render( + , + ); + expect(asFragment()).toMatchSnapshot(); + }); + }); + + it('should render correctly with a "className" attribute', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/packages/bpk-component-chip/src/BpkIconChip.d.ts b/packages/bpk-component-chip/src/BpkIconChip.d.ts new file mode 100644 index 0000000000..957616c6bf --- /dev/null +++ b/packages/bpk-component-chip/src/BpkIconChip.d.ts @@ -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. + */ + +import type { ReactNode } from 'react'; +import type { CommonProps as Props } from './commonTypes'; +export type BpkIconChipProps = { + leadingAccessoryView: ReactNode; +} & Omit; +declare const BpkIconChip: ({ className, ...rest }: BpkIconChipProps) => JSX.Element; +export default BpkIconChip; diff --git a/packages/bpk-component-chip/src/BpkIconChip.tsx b/packages/bpk-component-chip/src/BpkIconChip.tsx new file mode 100644 index 0000000000..86a5be2f81 --- /dev/null +++ b/packages/bpk-component-chip/src/BpkIconChip.tsx @@ -0,0 +1,41 @@ +/* + * 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. + */ + +/* +The icon chip component is just a selectable chip that's +been hard coded to have no text or trailing icon and padding/margin +to match. +*/ + +import type { ReactNode } from 'react'; + +import BpkSelectableChip from './BpkSelectableChip'; + +import type { CommonProps as Props } from './commonTypes'; + +export type BpkIconChipProps = { + leadingAccessoryView: ReactNode; +} & Omit; + +const BpkIconChip = (props: BpkIconChipProps) => ( + + {null} + + ); + +export default BpkIconChip; diff --git a/packages/bpk-component-chip/src/BpkSelectableChip-test.tsx b/packages/bpk-component-chip/src/BpkSelectableChip-test.tsx index 5aac1e92ba..2d0e8b5a5d 100644 --- a/packages/bpk-component-chip/src/BpkSelectableChip-test.tsx +++ b/packages/bpk-component-chip/src/BpkSelectableChip-test.tsx @@ -72,6 +72,18 @@ describe('BpkSelectableChip', () => { expect(asFragment()).toMatchSnapshot(); }); + it(`should render correctly with type="${chipType}" and a leading accessory view without children`, () => { + const { asFragment } = render( + Leading} + accessibilityLabel="Toggle" + onClick={() => null} + />, + ); + expect(asFragment()).toMatchSnapshot(); + }); + it(`should render correctly with type="${chipType}" and a trailing accessory view`, () => { const { asFragment } = render( {leadingAccessoryView && ( - + {leadingAccessoryView} )} diff --git a/packages/bpk-component-chip/src/__snapshots__/BpkIconChip-test.tsx.snap b/packages/bpk-component-chip/src/__snapshots__/BpkIconChip-test.tsx.snap new file mode 100644 index 0000000000..a0849a8f05 --- /dev/null +++ b/packages/bpk-component-chip/src/__snapshots__/BpkIconChip-test.tsx.snap @@ -0,0 +1,441 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BpkIconChip should render correctly 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with a "className" attribute 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with type="default" 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with type="default" and disabled 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with type="default" and selected 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with type="default", selected and disabled 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with type="on-dark" 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with type="on-dark" and disabled 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with type="on-dark" and selected 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with type="on-dark", selected and disabled 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with type="on-image" 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with type="on-image" and disabled 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with type="on-image" and selected 1`] = ` + + + +`; + +exports[`BpkIconChip should render correctly with type="on-image", selected and disabled 1`] = ` + + + +`; diff --git a/packages/bpk-component-chip/src/__snapshots__/BpkSelectableChip-test.tsx.snap b/packages/bpk-component-chip/src/__snapshots__/BpkSelectableChip-test.tsx.snap index dd57b0646f..bde143b7b5 100644 --- a/packages/bpk-component-chip/src/__snapshots__/BpkSelectableChip-test.tsx.snap +++ b/packages/bpk-component-chip/src/__snapshots__/BpkSelectableChip-test.tsx.snap @@ -79,6 +79,29 @@ exports[`BpkSelectableChip should render correctly with type="default" and a lea `; +exports[`BpkSelectableChip should render correctly with type="default" and a leading accessory view without children 1`] = ` + + + +`; + exports[`BpkSelectableChip should render correctly with type="default" and a trailing accessory view 1`] = ` + +`; + exports[`BpkSelectableChip should render correctly with type="on-dark" and a trailing accessory view 1`] = ` + +`; + exports[`BpkSelectableChip should render correctly with type="on-image" and a trailing accessory view 1`] = `
@@ -173,7 +174,7 @@ BpkAccordionItem.defaultProps = { expanded: false, icon: null, onClick: () => null, - tagName: 'span', + tagName: 'h3', textStyle: TEXT_STYLES.bodyDefault, }; diff --git a/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss b/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss index 80160e5844..b924f6af85 100644 --- a/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss +++ b/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss @@ -57,7 +57,6 @@ } &__title-text { - display: inline-block; flex-grow: 1; &--on-dark { diff --git a/packages/bpk-component-accordion/src/__snapshots__/BpkAccordionItem-test.js.snap b/packages/bpk-component-accordion/src/__snapshots__/BpkAccordionItem-test.js.snap index fee692b9d1..5c773684bb 100644 --- a/packages/bpk-component-accordion/src/__snapshots__/BpkAccordionItem-test.js.snap +++ b/packages/bpk-component-accordion/src/__snapshots__/BpkAccordionItem-test.js.snap @@ -14,23 +14,26 @@ exports[`BpkAccordionItem should not render an "initiallyExpanded" attribute on class="bpk-accordion__toggle-button" type="button" > - - - My accordion item - +

+ My accordion item +

+
- +
- - - My accordion item - +

+ My accordion item +

+
- +
- - - My accordion item - +

+ My accordion item +

+
- +
- - - My accordion item - +

+ My accordion item +

+
- +
- -

- My accordion item -

+

+ My accordion item +

+ - +
- - - My accordion item - +

+ My accordion item +

+ - +
- - - - My accordion item - + + My accordion item + + - +
- - - My accordion item - +

+ My accordion item +

+ - +
- - - My accordion item - +

+ My accordion item +

+ - +
- - - My accordion item - +

+ My accordion item +

+ - +
- - - My accordion item - +

+ My accordion item +

+ - +
- - - My accordion item - +

+ My accordion item +

+ - +
Date: Thu, 28 Mar 2024 16:23:48 +0000 Subject: [PATCH 041/174] LOOM-1277 BpkDataTableHeader (#3324) * loom-1277 bpkdatatableheader * fix icon line height to realign --------- Co-authored-by: James Ronald --- .../src/BpkDataTable-test.tsx | 10 +- .../src/BpkDataTableHeader.module.scss | 2 + .../src/BpkDataTableHeader.tsx | 20 +- .../__snapshots__/BpkDataTable-test.tsx.snap | 1152 ++++++++++------- .../BpkDataTableHeader-test.tsx.snap | 144 ++- 5 files changed, 775 insertions(+), 553 deletions(-) diff --git a/packages/bpk-component-datatable/src/BpkDataTable-test.tsx b/packages/bpk-component-datatable/src/BpkDataTable-test.tsx index 50417a28f0..db392a697e 100644 --- a/packages/bpk-component-datatable/src/BpkDataTable-test.tsx +++ b/packages/bpk-component-datatable/src/BpkDataTable-test.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ - + import { Fragment } from 'react'; @@ -119,7 +119,7 @@ describe('BpkDataTable', () => { { label: 'Name', accessor: 'name', width: "6.25rem" }, { label: 'Description', accessor: 'description', width: "6.25rem", flexGrow: 1 }, { label: 'Bla', accessor: 'bla', width: "6.25rem" }, - ]} /> + ]} /> ); expect(asFragment()).toMatchSnapshot(); }); @@ -200,7 +200,8 @@ describe('BpkDataTable', () => { const sortIconUp = document.getElementsByClassName( 'bpk-data-table-column__sort-icon--up', )[0]; - await fireEvent.click(sortIconUp); + const clickArrow = sortIconUp.querySelector('svg') as SVGSVGElement; + await fireEvent.click(clickArrow) ; const firstRowNameSorted = within( screen.getAllByRole('rowgroup')[0], @@ -236,7 +237,8 @@ describe('BpkDataTable', () => { const sortIconDown = document.getElementsByClassName( 'bpk-data-table-column__sort-icon--down', )[0]; - await fireEvent.click(sortIconDown); + const clickArrow = sortIconDown.querySelector('svg') as SVGSVGElement; + await fireEvent.click(clickArrow); const firstRowNameSorted = within( screen.getAllByRole('rowgroup')[0], diff --git a/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss b/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss index cd0dbf154e..d513b895d5 100644 --- a/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss +++ b/packages/bpk-component-datatable/src/BpkDataTableHeader.module.scss @@ -21,6 +21,7 @@ @use '../../unstable__bpk-mixins/utils'; $bpk-margin-size-sort-icons: tokens.bpk-spacing-sm() + tokens.bpk-spacing-md(); +$icon-height: tokens.$bpk-line-height-xs / 2; .bpk-data-table-column__header { display: flex; @@ -47,6 +48,7 @@ $bpk-margin-size-sort-icons: tokens.bpk-spacing-sm() + tokens.bpk-spacing-md(); .bpk-data-table-column__sort-icon { display: block; + line-height: $icon-height; fill: tokens.$bpk-line-day; &:hover { diff --git a/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx b/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx index e64506bf9e..fff764f482 100644 --- a/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx +++ b/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx @@ -44,7 +44,7 @@ const KEYCODES = { * Internal component to render the header of a column. * @returns {JSX.Element} data table header component */ -const BpkDataTableHeader = ({ column }: { column: any }) => { +const BpkDataTableHeader = ({ column }: { column: any }) => { const { defaultSortDirection, disableSortBy, @@ -141,14 +141,16 @@ const BpkDataTableHeader = ({ column }: { column: any }) => { key="sort" aria-hidden > - column.toggleSortBy(false)} - className={upIconClassNames} - /> - column.toggleSortBy(true)} - className={downIconClassNames} - /> +
+ column.toggleSortBy(false)} + /> +
+
+ column.toggleSortBy(true)} + /> +
)} diff --git a/packages/bpk-component-datatable/src/__snapshots__/BpkDataTable-test.tsx.snap b/packages/bpk-component-datatable/src/__snapshots__/BpkDataTable-test.tsx.snap index 1f8943f2c1..86c6a4345d 100644 --- a/packages/bpk-component-datatable/src/__snapshots__/BpkDataTable-test.tsx.snap +++ b/packages/bpk-component-datatable/src/__snapshots__/BpkDataTable-test.tsx.snap @@ -31,28 +31,36 @@ exports[`BpkDataTable should render correctly when "onRowClick" is set 1`] = ` aria-hidden="true" class="bpk-data-table-column__sort-icons" > - - + +
- - + +
+
- - + +
+
- - + +
@@ -236,28 +260,36 @@ exports[`BpkDataTable should render correctly with a custom className 1`] = ` aria-hidden="true" class="bpk-data-table-column__sort-icons" > - - + +
- - + +
+
- - + +
+
- - + +
@@ -441,28 +489,36 @@ exports[`BpkDataTable should render correctly with a custom headerClassName 1`] aria-hidden="true" class="bpk-data-table-column__sort-icons" > - - + +
- - + +
+
- - + +
+
- - + +
@@ -646,28 +718,36 @@ exports[`BpkDataTable should render correctly with a custom rowClassName functio aria-hidden="true" class="bpk-data-table-column__sort-icons" > - - + +
- - + +
+
- - + +
+
- - + +
@@ -851,28 +947,36 @@ exports[`BpkDataTable should render correctly with a custom rowClassName string aria-hidden="true" class="bpk-data-table-column__sort-icons" > - - + +
- - + +
+
- - + +
+
- - + +
@@ -1056,28 +1176,36 @@ exports[`BpkDataTable should render correctly with a specified width 1`] = ` aria-hidden="true" class="bpk-data-table-column__sort-icons" > - - + +
- - + +
+
- - + +
+
- - + +
@@ -1261,28 +1405,36 @@ exports[`BpkDataTable should render correctly with multiple columns 1`] = ` aria-hidden="true" class="bpk-data-table-column__sort-icons" > - - + +
- - + +
+
- - + +
+
- - + +
@@ -1466,28 +1634,36 @@ exports[`BpkDataTable should render correctly with no data; only headers 1`] = ` aria-hidden="true" class="bpk-data-table-column__sort-icons" > - - + +
- - + +
+
- - + +
+
- - + +
diff --git a/packages/bpk-component-datatable/src/__snapshots__/BpkDataTableHeader-test.tsx.snap b/packages/bpk-component-datatable/src/__snapshots__/BpkDataTableHeader-test.tsx.snap index b3b9322d75..da40492c48 100644 --- a/packages/bpk-component-datatable/src/__snapshots__/BpkDataTableHeader-test.tsx.snap +++ b/packages/bpk-component-datatable/src/__snapshots__/BpkDataTableHeader-test.tsx.snap @@ -30,28 +30,36 @@ exports[`BpkDataTableHeader renders sort icon with down icon selected 1`] = ` aria-hidden="true" class="bpk-data-table-column__sort-icons" > - - + +
- - + +
@@ -72,28 +80,36 @@ exports[`BpkDataTableHeader renders sort icon with up icon selected 1`] = ` aria-hidden="true" class="bpk-data-table-column__sort-icons" > - - + +
- - + +
@@ -114,28 +130,36 @@ exports[`BpkDataTableHeader renders sort icons 1`] = ` aria-hidden="true" class="bpk-data-table-column__sort-icons" > - - + +
- - + +
From 671736e8a276d7d7e1a060d05dcd258156e9418e Mon Sep 17 00:00:00 2001 From: James Ronald <7976511+jronald01@users.noreply.github.com> Date: Thu, 28 Mar 2024 16:33:47 +0000 Subject: [PATCH 042/174] LOOM-1274 BpkBreadcrumb Class 2 Overrides (#3320) * BpkBreadcrumb LOOM-1274 Class 2 Overrides * Fix Styellint issues and update snapshots * missed tokens prefix * fix alignment * fix alignment 02 * fix alignment 03 * fix alignment 04 * fix icon height * fix alignment 05 * fix alignment 06 * fix alignment 07 * fix alignment 08 * fix alignment 08 * fix alignment 09 * revert back to bpktext * set specific icon height for regular and zoom * set specific value that ensures percy snapshots still match * header comment was moved slightly --------- Co-authored-by: James Ronald --- .../src/BpkBreadcrumbItem.js | 40 ++-- .../src/BpkBreadcrumbItem.module.scss | 6 + .../BpkBreadcrumbItem-test.js.snap | 171 +++++++++++------- 3 files changed, 132 insertions(+), 85 deletions(-) diff --git a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js index fcb6f26b55..efd7cb48d6 100644 --- a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js +++ b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js @@ -49,28 +49,30 @@ const BpkBreadcrumbItem = (props: Props) => {
  • {active ? ( // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. - - {children} - +
    + + {children} + +
    ) : ( // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. - - {children} - - )} - {!active && ( - +
    + + {children} + +
    )} +
    + {!active && ( + + )} +
    • ); }; diff --git a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss index 13ee0e14e7..fcdd41eafd 100644 --- a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss +++ b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss @@ -19,6 +19,11 @@ @use '../../unstable__bpk-mixins/tokens'; @use '../../unstable__bpk-mixins/typography'; +/* After adding the wrapper around the icon, need to set the line + height to stop the 16x16 or 32x32(zoomed) icon from expanding + verically past it's 16 or 32 pixels height */ +$icon-height: tokens.$bpk-line-height-xs / 2; + .bpk-breadcrumb-item { display: flex; align-items: center; @@ -34,6 +39,7 @@ &__arrow { margin: 0 tokens.bpk-spacing-sm(); + line-height: $icon-height; fill: tokens.$bpk-text-disabled-day; } } diff --git a/packages/bpk-component-breadcrumb/src/__snapshots__/BpkBreadcrumbItem-test.js.snap b/packages/bpk-component-breadcrumb/src/__snapshots__/BpkBreadcrumbItem-test.js.snap index da2d548eee..b8aec65840 100644 --- a/packages/bpk-component-breadcrumb/src/__snapshots__/BpkBreadcrumbItem-test.js.snap +++ b/packages/bpk-component-breadcrumb/src/__snapshots__/BpkBreadcrumbItem-test.js.snap @@ -5,23 +5,31 @@ exports[`BpkBreadcrumbItem should render correctly 1`] = `
  • - - Backpack - -
    - - + +
    • `; @@ -31,12 +39,19 @@ exports[`BpkBreadcrumbItem should render correctly with a "active" prop 1`] = `
  • - - Backpack - + + Backpack + + +
    • `; @@ -46,23 +61,31 @@ exports[`BpkBreadcrumbItem should render correctly with a custom class name 1`]
  • - - Backpack - -
    - - + +
    • `; @@ -73,23 +96,31 @@ exports[`BpkBreadcrumbItem should render correctly with arbitrary props 1`] = ` class="bpk-breadcrumb-item" testid="arbitrary value" > - - Backpack - -
    - - + +
    `; @@ -99,24 +130,32 @@ exports[`BpkBreadcrumbItem should render correctly with with "linkProps" attribu
  • - - Backpack - -
    - - + +
    • `; From 4b44b4800eb2c9afdcd681d87a3906b40f612752 Mon Sep 17 00:00:00 2001 From: James Ronald <7976511+jronald01@users.noreply.github.com> Date: Mon, 1 Apr 2024 15:26:34 +0100 Subject: [PATCH 043/174] LOOM-1283 BpfFieldset Class 2 Overrides (#3326) * LOOM-1283 BpfFieldset * Check add to wrapper * snapshots updated --------- Co-authored-by: James Ronald --- .../bpk-component-fieldset/src/BpkFieldset.js | 21 +- .../__snapshots__/BpkFieldset-test.js.snap | 184 +++++++++++------- 2 files changed, 127 insertions(+), 78 deletions(-) diff --git a/packages/bpk-component-fieldset/src/BpkFieldset.js b/packages/bpk-component-fieldset/src/BpkFieldset.js index f81680f27d..fa7147d759 100644 --- a/packages/bpk-component-fieldset/src/BpkFieldset.js +++ b/packages/bpk-component-fieldset/src/BpkFieldset.js @@ -116,16 +116,17 @@ const BpkFieldset = (props: Props) => { // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
    {!isCheckbox && ( - - {/* $FlowIgnore[incompatible-type] - As this prop is only required when isCheckbox is false our labelPropType handles checking this is null or not. */} - {label} - +
    + + {/* $FlowIgnore[incompatible-type] - As this prop is only required when isCheckbox is false our labelPropType handles checking this is null or not. */} + {label} + +
    )} {clonedChildren} {description && ( diff --git a/packages/bpk-component-fieldset/src/__snapshots__/BpkFieldset-test.js.snap b/packages/bpk-component-fieldset/src/__snapshots__/BpkFieldset-test.js.snap index f1f448468c..8ddb1b1f7b 100644 --- a/packages/bpk-component-fieldset/src/__snapshots__/BpkFieldset-test.js.snap +++ b/packages/bpk-component-fieldset/src/__snapshots__/BpkFieldset-test.js.snap @@ -34,12 +34,16 @@ exports[`BpkFieldset should render as disabled when input component is disabled
    - + + - + + - + + - + + - + + - + + - + Name + + * + + + - + + - + + - + + Date: Tue, 2 Apr 2024 10:00:31 +0100 Subject: [PATCH 044/174] LOOM-1281 BpkDialog className moved to new wrapper span (#3325) --- .../src/BpkDialog.module.scss | 6 +- .../bpk-component-dialog/src/BpkDialog.tsx | 14 +- .../src/__snapshots__/BpkDialog-test.tsx.snap | 120 ++++++++++-------- 3 files changed, 77 insertions(+), 63 deletions(-) diff --git a/packages/bpk-component-dialog/src/BpkDialog.module.scss b/packages/bpk-component-dialog/src/BpkDialog.module.scss index 96fc33688f..e70bf3e7b3 100644 --- a/packages/bpk-component-dialog/src/BpkDialog.module.scss +++ b/packages/bpk-component-dialog/src/BpkDialog.module.scss @@ -32,11 +32,13 @@ &__close-button { float: right; - margin: 0 0 tokens.bpk-spacing-base() tokens.bpk-spacing-base(); + margin: 0 calc(tokens.bpk-spacing-sm() / 2) tokens.bpk-spacing-base() + tokens.bpk-spacing-base(); @include utils.bpk-rtl { float: left; - margin: 0 tokens.bpk-spacing-base() tokens.bpk-spacing-base() 0; + margin: 0 tokens.bpk-spacing-base() tokens.bpk-spacing-base() + calc(tokens.bpk-spacing-sm() / 2); } } diff --git a/packages/bpk-component-dialog/src/BpkDialog.tsx b/packages/bpk-component-dialog/src/BpkDialog.tsx index ff7f990d07..a6594fd320 100644 --- a/packages/bpk-component-dialog/src/BpkDialog.tsx +++ b/packages/bpk-component-dialog/src/BpkDialog.tsx @@ -46,9 +46,11 @@ const BpkDialog = ({ ); const closeButtonClassNames = getClassName('bpk-dialog__close-button'); - if(!onClose && dismissible === true) { + if (!onClose && dismissible === true) { // eslint-disable-next-line no-console - console.warn('BpkDialog: dismissible is true but no onClose prop was provided. Dialog will not be dismissible.'); + console.warn( + 'BpkDialog: dismissible is true but no onClose prop was provided. Dialog will not be dismissible.', + ); } return ( @@ -69,11 +71,9 @@ const BpkDialog = ({ > {headerIcon &&
    {headerIcon}
    } {dismissible && ( - + + + )} {children} diff --git a/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap b/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap index 2917e7e61a..422befe5de 100644 --- a/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap +++ b/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap @@ -26,27 +26,31 @@ exports[`BpkDialog should render correctly in the given target if renderTarget i
    - + + + + Dialog content inside a custom target
    @@ -303,27 +307,31 @@ exports[`BpkDialog should render with flare dialog 2`] = `
    - + + + + Dialog content inside a custom target
    @@ -398,27 +406,31 @@ exports[`BpkDialog should render with flare dialog with flareClassName 2`] = `
    - + + + + Dialog content inside a custom target
    From a2b26cab8d08a90f8d257229e066df76da55039c Mon Sep 17 00:00:00 2001 From: Amelia Fitzpatrick <153074017+ameliajfitzpatrick@users.noreply.github.com> Date: Tue, 2 Apr 2024 14:09:19 +0100 Subject: [PATCH 045/174] DTO-5235 Add dark background flag for BpkModal and BpkModal v2 (#3323) * Colour changes for surface contrast applied to modal * Use existing token after discussion with Backpack * BpkModalV2 * Changes to scss files * Updating type declaration files --------- Co-authored-by: Amelia Fitzpatrick --- examples/bpk-component-modal-v2/examples.tsx | 13 +++++- examples/bpk-component-modal-v2/stories.tsx | 2 + examples/bpk-component-modal/examples.js | 13 +++++- examples/bpk-component-modal/stories.js | 3 +- packages/bpk-component-modal/index.ts | 3 +- .../bpk-component-modal/src/BpkModal.d.ts | 3 +- packages/bpk-component-modal/src/BpkModal.tsx | 10 +++-- .../src/BpkModalInner.d.ts | 2 + .../src/BpkModalInner.module.scss | 17 +++++++- .../bpk-component-modal/src/BpkModalInner.tsx | 33 ++++++++++++-- .../src/BpkModalV2/BpKModal.module.scss | 24 +++++++++++ .../src/BpkModalV2/BpkModal.d.ts | 2 + .../src/BpkModalV2/BpkModal.tsx | 43 ++++++++++++++++--- .../__snapshots__/BpKModal-test.tsx.snap | 8 ++-- .../src/__snapshots__/BpkModal-test.tsx.snap | 4 +- .../__snapshots__/BpkModalInner-test.tsx.snap | 40 ++++++++--------- packages/package-lock.json | 28 ++++++------ packages/package.json | 2 +- 18 files changed, 191 insertions(+), 59 deletions(-) diff --git a/examples/bpk-component-modal-v2/examples.tsx b/examples/bpk-component-modal-v2/examples.tsx index ee11a5122e..654747f850 100644 --- a/examples/bpk-component-modal-v2/examples.tsx +++ b/examples/bpk-component-modal-v2/examples.tsx @@ -23,7 +23,7 @@ import { Component, Children } from 'react'; import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkButton from '../../packages/bpk-component-button'; import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; -import { BpkModalV2 } from '../../packages/bpk-component-modal'; +import { BpkModalV2, MODAL_STYLING } from '../../packages/bpk-component-modal'; import STYLES from './examples.module.scss'; @@ -149,6 +149,16 @@ const DefaultExample = () => ( ); +const ContrastExample = () => ( + + This is a contrast modal. You can put anything you want in here. + +); + const LongTitleExample = () => ( @@ -278,4 +288,5 @@ export { NoFullScreenOnMobileNoTitleExample, NoHeaderExample, MultipleModalsExample, + ContrastExample, }; diff --git a/examples/bpk-component-modal-v2/stories.tsx b/examples/bpk-component-modal-v2/stories.tsx index 73ab22f239..fbcffef279 100644 --- a/examples/bpk-component-modal-v2/stories.tsx +++ b/examples/bpk-component-modal-v2/stories.tsx @@ -34,6 +34,7 @@ import { NoFullScreenOnMobileNoTitleExample, NoHeaderExample, MultipleModalsExample, + ContrastExample, } from './examples'; export default { @@ -56,3 +57,4 @@ export const NoFullScreenOnMobile = NoFullScreenOnMobileExample; export const NoFullScreenOnMobileNoTitle = NoFullScreenOnMobileNoTitleExample; export const NoHeader = NoHeaderExample; export const MultipleModals = MultipleModalsExample; +export const Contrast = ContrastExample; diff --git a/examples/bpk-component-modal/examples.js b/examples/bpk-component-modal/examples.js index 634e00de5a..3a19f51385 100644 --- a/examples/bpk-component-modal/examples.js +++ b/examples/bpk-component-modal/examples.js @@ -36,7 +36,7 @@ import { } from '../../packages/bpk-component-icon'; import ArrowIcon from '../../packages/bpk-component-icon/sm/long-arrow-left'; import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; -import BpkModal from '../../packages/bpk-component-modal'; +import BpkModal, { MODAL_STYLING } from '../../packages/bpk-component-modal'; import STYLES from './examples.module.scss'; @@ -188,6 +188,16 @@ const DefaultExample = () => ( ); +const ContrastExample = () => ( + + This is a contrast modal. You can put anything you want in here. + +); + const WideExample = () => ( This is a wide modal. @@ -306,4 +316,5 @@ export { NoHeaderExample, NoPaddingExample, WithAccessoryViewExample, + ContrastExample, }; diff --git a/examples/bpk-component-modal/stories.js b/examples/bpk-component-modal/stories.js index 5e620ea7c5..86720fb88a 100644 --- a/examples/bpk-component-modal/stories.js +++ b/examples/bpk-component-modal/stories.js @@ -16,7 +16,6 @@ * limitations under the License. */ - import BpkModal from '../../packages/bpk-component-modal/src/BpkModal'; import { @@ -32,6 +31,7 @@ import { NoHeaderExample, NoPaddingExample, WithAccessoryViewExample, + ContrastExample, } from './examples'; export default { @@ -58,3 +58,4 @@ export const NoHeader = NoHeaderExample; export const NoPadding = NoPaddingExample; export const WithAccessoryView = WithAccessoryViewExample; +export const Contrast = ContrastExample; diff --git a/packages/bpk-component-modal/index.ts b/packages/bpk-component-modal/index.ts index edf07b9d69..7d7aa3abd9 100644 --- a/packages/bpk-component-modal/index.ts +++ b/packages/bpk-component-modal/index.ts @@ -19,6 +19,7 @@ import { BpkModalV2 } from './src/BpkModalV2/BpkModal'; import themeAttributes from './src/themeAttributes'; import BpkModal from './src/BpkModal'; +import { MODAL_STYLING } from './src/BpkModalInner'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { propTypes, defaultProps } from './src/legacy-prop-types'; @@ -27,4 +28,4 @@ import type { Props } from './src/BpkModal'; export type BpkModalProps = Props; export default BpkModal; -export { propTypes, defaultProps, themeAttributes, BpkModalV2 }; +export { propTypes, defaultProps, themeAttributes, BpkModalV2, MODAL_STYLING }; diff --git a/packages/bpk-component-modal/src/BpkModal.d.ts b/packages/bpk-component-modal/src/BpkModal.d.ts index db59b14f71..3a896c5753 100644 --- a/packages/bpk-component-modal/src/BpkModal.d.ts +++ b/packages/bpk-component-modal/src/BpkModal.d.ts @@ -17,7 +17,7 @@ */ import type { ReactNode } from 'react'; -import type { Props as ModalDialogProps } from './BpkModalInner'; +import type { Props as ModalDialogProps, ModalStyle } from './BpkModalInner'; export type Props = Partial & { id: string; children: ReactNode; @@ -25,6 +25,7 @@ export type Props = Partial & { isOpen: boolean; closeOnScrimClick?: boolean; closeOnEscPressed?: boolean; + modalStyle?: ModalStyle; renderTarget?: null | HTMLElement | (() => null | HTMLElement); onClose?: (arg0?: TouchEvent | MouseEvent | KeyboardEvent, arg1?: { source: 'ESCAPE' | 'DOCUMENT_CLICK'; diff --git a/packages/bpk-component-modal/src/BpkModal.tsx b/packages/bpk-component-modal/src/BpkModal.tsx index 77fdc48d01..260a3443ce 100644 --- a/packages/bpk-component-modal/src/BpkModal.tsx +++ b/packages/bpk-component-modal/src/BpkModal.tsx @@ -21,9 +21,9 @@ import type { ReactNode } from 'react'; import { withScrim } from '../../bpk-scrim-utils'; import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils'; -import BpkModalInner from './BpkModalInner'; +import BpkModalInner, { MODAL_STYLING } from './BpkModalInner'; -import type { Props as ModalDialogProps } from './BpkModalInner'; +import type { Props as ModalDialogProps, ModalStyle } from './BpkModalInner'; import STYLES from './BpkModal.module.scss'; @@ -38,6 +38,8 @@ export type Props = Partial & { closeOnScrimClick?: boolean; closeOnEscPressed?: boolean; renderTarget?: null | HTMLElement | (() => null | HTMLElement); + modalStyle?: ModalStyle; + onClose?: ( arg0?: TouchEvent | MouseEvent | KeyboardEvent, arg1?: { @@ -45,7 +47,7 @@ export type Props = Partial & { }, ) => void; /** - * Because this component uses a modal on mobile viewports, you need to let it know what + * Because this component uses a modal on mobile viewports, you need to let it know what * the root element of your application is by returning its DOM node via this prop * This is to "hide" your application from screen readers whilst the modal is open. * The "pagewrap" element id is a convention we use internally at Skyscanner. In most cases it should "just work". @@ -66,6 +68,7 @@ const BpkModal = ({ fullScreenOnMobile = true, isIphone = isDeviceIphone(), isOpen, + modalStyle = MODAL_STYLING.default, onClose = () => null, padded = true, renderTarget = null, @@ -108,6 +111,7 @@ const BpkModal = ({ padded={padded} accessoryView={accessoryView} dialogRef={dialogRef} + modalStyle={modalStyle} {...rest} /> diff --git a/packages/bpk-component-modal/src/BpkModalInner.d.ts b/packages/bpk-component-modal/src/BpkModalInner.d.ts index 12e08ec6cd..2dc743c34a 100644 --- a/packages/bpk-component-modal/src/BpkModalInner.d.ts +++ b/packages/bpk-component-modal/src/BpkModalInner.d.ts @@ -17,6 +17,7 @@ */ import type { ReactNode } from 'react'; +import { ModalStyle } from './BpkModalInner'; export type Props = { id: string; children: ReactNode; @@ -33,6 +34,7 @@ export type Props = { title?: string | null; closeLabel?: string; closeText?: string | null; + modalStyle?: ModalStyle; /** * The accessory view allows for icons and actions to be placed in front of the main title inside the modal header. To be used with `BpkNavigationBarButtonLink` */ diff --git a/packages/bpk-component-modal/src/BpkModalInner.module.scss b/packages/bpk-component-modal/src/BpkModalInner.module.scss index 6fc538de20..9eafc43c17 100644 --- a/packages/bpk-component-modal/src/BpkModalInner.module.scss +++ b/packages/bpk-component-modal/src/BpkModalInner.module.scss @@ -83,6 +83,13 @@ opacity: tokens.$bpk-modal-opacity; } + &__modal-style { + &--surface-contrast { + background-color: tokens.$bpk-surface-contrast-day; + color: tokens.$bpk-text-primary-dark-color; + } + } + &__header { @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day); } @@ -90,7 +97,6 @@ &__navigation { display: flex; justify-content: space-between; - background-color: tokens.$bpk-modal-background-color; } &__heading { @@ -107,6 +113,15 @@ @include utils.bpk-rtl { left: auto; } + + &-style--surface-contrast { + background-color: tokens.$bpk-surface-contrast-day; + color: tokens.$bpk-text-primary-dark-color; + + @include utils.bpk-hover { + color: tokens.$bpk-text-primary-dark-color; + } + } } &__accessory-view { diff --git a/packages/bpk-component-modal/src/BpkModalInner.tsx b/packages/bpk-component-modal/src/BpkModalInner.tsx index 0e88960541..76c7e00e44 100644 --- a/packages/bpk-component-modal/src/BpkModalInner.tsx +++ b/packages/bpk-component-modal/src/BpkModalInner.tsx @@ -22,7 +22,9 @@ import type { ReactNode } from 'react'; import { BpkButtonLink } from '../../bpk-component-link'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkCloseButton from '../../bpk-component-close-button'; -import BpkNavigationBar from '../../bpk-component-navigation-bar'; +import BpkNavigationBar, { + BAR_STYLES, +} from '../../bpk-component-navigation-bar'; import { TransitionInitialMount, cssModules } from '../../bpk-react-utils'; import STYLES from './BpkModalInner.module.scss'; @@ -45,12 +47,19 @@ export type Props = { title?: string | null; closeLabel?: string; closeText?: string | null; + modalStyle?: ModalStyle; /** * The accessory view allows for icons and actions to be placed in front of the main title inside the modal header. To be used with `BpkNavigationBarButtonLink` */ accessoryView?: ReactNode; }; +export const MODAL_STYLING = { + default: 'default', + surfaceContrast: 'surface-contrast', +}; +export type ModalStyle = (typeof MODAL_STYLING)[keyof typeof MODAL_STYLING]; + const BpkModalInner = ({ accessoryView = null, children, @@ -63,6 +72,7 @@ const BpkModalInner = ({ fullScreenOnMobile = true, id, isIphone, + modalStyle = MODAL_STYLING.default, onClose = () => null, padded = true, showHeader = true, @@ -73,6 +83,8 @@ const BpkModalInner = ({ const contentClassNames = [getClassName('bpk-modal__content')]; const navigationStyles = [getClassName('bpk-modal__navigation')]; + classNames.push(getClassName(`bpk-modal__modal-style--${modalStyle}`)); + if (wide) { classNames.push(getClassName('bpk-modal--wide')); } @@ -119,6 +131,11 @@ const BpkModalInner = ({ {showHeader && (
    {closeText} ) : ( diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss b/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss index f2d2bbfb19..6e79e24f33 100644 --- a/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss +++ b/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss @@ -20,6 +20,7 @@ @use '../../../unstable__bpk-mixins/breakpoints'; @use '../../../unstable__bpk-mixins/shadows'; @use '../../../unstable__bpk-mixins/typography'; +@use '../../../unstable__bpk-mixins/utils'; @mixin header { display: flex; @@ -146,6 +147,19 @@ padding: tokens.bpk-spacing-base(); @include header; + + &-style--surface-contrast { + background-color: tokens.$bpk-surface-contrast-day; + color: tokens.$bpk-text-primary-dark-color; + } + } + + &__close-button-style--surface-contrast { + color: tokens.$bpk-text-primary-dark-color; + + @include utils.bpk-hover { + color: tokens.$bpk-text-primary-dark-color; + } } &__header-title-container { @@ -165,6 +179,11 @@ padding-inline-end: tokens.bpk-spacing-base(); @include header; + + &-style--surface-contrast { + background-color: tokens.$bpk-surface-contrast-day; + color: tokens.$bpk-text-primary-dark-color; + } } &__container { @@ -178,5 +197,10 @@ &--full-screen-desktop { height: 100%; } + + &--surface-contrast { + background-color: tokens.$bpk-surface-contrast-day; + color: tokens.$bpk-text-primary-dark-color; + } } } diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts b/packages/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts index d37940c8b2..1c2f6551ab 100644 --- a/packages/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts +++ b/packages/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts @@ -18,6 +18,7 @@ /// import type { ReactNode } from 'react'; +import { ModalStyle } from '../BpkModalInner'; export type Props = { id: string | undefined; @@ -32,5 +33,6 @@ export type Props = { showHeader?: boolean; title?: string | null; wide?: boolean; + modalStyle?: ModalStyle; }; export declare const BpkModalV2: (props: Props) => JSX.Element | null; diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx b/packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx index c8b6fc6705..3695e8b846 100644 --- a/packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx +++ b/packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx @@ -23,6 +23,9 @@ import { useEffect, useRef } from 'react'; import BpkCloseButton from '../../../bpk-component-close-button'; import BpkText, { TEXT_STYLES } from '../../../bpk-component-text'; import { cssModules, withDefaultProps } from '../../../bpk-react-utils'; +import { MODAL_STYLING } from '../BpkModalInner'; + +import type { ModalStyle } from '../BpkModalInner'; import STYLES from './BpKModal.module.scss'; @@ -41,32 +44,56 @@ export type Props = { showHeader?: boolean; title?: string | null; wide?: boolean; + modalStyle?: ModalStyle; }; const Header = ({ closeLabel, id, + modalStyle, onClose, title, }: { closeLabel: string; id: string | undefined; + modalStyle: string; onClose: () => void | null; title?: string | null; }) => { if (title) { return ( -
    +
    {title}
    - +
    ); } return ( -
    - +
    +
    ); }; @@ -101,6 +128,7 @@ export const BpkModalV2 = (props: Props) => { fullScreenOnDesktop, id, isOpen, + modalStyle = MODAL_STYLING.default, noFullScreenOnMobile, onClose, padded, @@ -129,7 +157,7 @@ export const BpkModalV2 = (props: Props) => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === 'Escape') { - onClose(); + onClose(); } }; @@ -151,7 +179,7 @@ export const BpkModalV2 = (props: Props) => { setPageProperties({ isDialogOpen: isOpen }); return () => { - setPageProperties({ isDialogOpen: false }) + setPageProperties({ isDialogOpen: false }); window.removeEventListener('keydown', handleKeyDown); }; }, [id, isOpen, onClose]); @@ -167,6 +195,8 @@ export const BpkModalV2 = (props: Props) => { 'bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded', + modalStyle === MODAL_STYLING.surfaceContrast && + 'bpk-modal__container--surface-contrast', ); return isOpen ? ( @@ -197,6 +227,7 @@ export const BpkModalV2 = (props: Props) => { title={title} closeLabel={closeLabel} onClose={onClose} + modalStyle={modalStyle} /> )}
    {children}
    diff --git a/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap b/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap index 804c5b604c..05f08f9579 100644 --- a/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap +++ b/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap @@ -17,11 +17,11 @@ exports[`BpkModalV2 is not supported should render correctly with polyfill and c id="bpk-modal-element" >
    {children}
    diff --git a/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap b/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap index d2eaf14c9e..9ac9843392 100644 --- a/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap +++ b/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap @@ -10,7 +10,7 @@ exports[`BpkDrawer should render correctly in the given target if renderTarget i tabindex="-1" >
      - + + + +
      - + + + +
      - + + + +
      - + + + +
      - + + + +
      - + + + +
    Date: Wed, 3 Apr 2024 16:30:33 +0100 Subject: [PATCH 047/174] LOOM-1287 BpkFormValidation moved className on BpkSmallExclamationIcon to new wrapper span (#3331) --- .../__snapshots__/BpkFieldset-test.js.snap | 250 ++++++++++-------- .../src/BpkFormValidation.js | 6 +- .../BpkFormValidation-test.js.snap | 50 ++-- 3 files changed, 171 insertions(+), 135 deletions(-) diff --git a/packages/bpk-component-fieldset/src/__snapshots__/BpkFieldset-test.js.snap b/packages/bpk-component-fieldset/src/__snapshots__/BpkFieldset-test.js.snap index 8ddb1b1f7b..2761678e55 100644 --- a/packages/bpk-component-fieldset/src/__snapshots__/BpkFieldset-test.js.snap +++ b/packages/bpk-component-fieldset/src/__snapshots__/BpkFieldset-test.js.snap @@ -212,19 +212,22 @@ exports[`BpkFieldset should render correctly with checkbox component 1`] = ` id="terms_and_conditions_checkbox_validation_message" > - + + You must accept the terms and conditions to continue
    @@ -278,19 +281,22 @@ exports[`BpkFieldset should render correctly with checkbox component and "requir id="terms_and_conditions_checkbox_validation_message" > - + + You must accept the terms and conditions to continue
    @@ -340,19 +346,22 @@ exports[`BpkFieldset should render correctly with input component 1`] = ` id="name_input_validation_message" > - + + Please enter a name @@ -409,19 +418,22 @@ exports[`BpkFieldset should render correctly with input component and "descripti id="name_input_validation_message" > - + + Please enter a name @@ -471,19 +483,22 @@ exports[`BpkFieldset should render correctly with input component and "disabled" id="name_input_validation_message" > - + + Please enter a name @@ -538,19 +553,22 @@ exports[`BpkFieldset should render correctly with input component and "required" id="name_input_validation_message" > - + + Please enter a name @@ -600,19 +618,22 @@ exports[`BpkFieldset should render correctly with input component and "valid" at id="name_input_validation_message" > - + + Please enter a name @@ -661,19 +682,22 @@ exports[`BpkFieldset should render correctly with input component and "valid" at id="name_input_validation_message" > - + + Please enter a name @@ -747,19 +771,22 @@ exports[`BpkFieldset should render correctly with select component 1`] = ` id="fruits_select_validation_message" > - + + Please select a fruit @@ -838,19 +865,22 @@ exports[`BpkFieldset should render correctly with select component and "required id="fruits_select_validation_message" > - + + Please select a fruit diff --git a/packages/bpk-component-form-validation/src/BpkFormValidation.js b/packages/bpk-component-form-validation/src/BpkFormValidation.js index a63d26de3a..aa6be7e8a0 100644 --- a/packages/bpk-component-form-validation/src/BpkFormValidation.js +++ b/packages/bpk-component-form-validation/src/BpkFormValidation.js @@ -57,9 +57,9 @@ const BpkFormValidation = (props) => { >
    - + + + {children}
    diff --git a/packages/bpk-component-form-validation/src/__snapshots__/BpkFormValidation-test.js.snap b/packages/bpk-component-form-validation/src/__snapshots__/BpkFormValidation-test.js.snap index 5cc778a910..434799b11d 100644 --- a/packages/bpk-component-form-validation/src/__snapshots__/BpkFormValidation-test.js.snap +++ b/packages/bpk-component-form-validation/src/__snapshots__/BpkFormValidation-test.js.snap @@ -14,19 +14,22 @@ exports[`BpkFormValidation should render correctly 1`] = ` id="my-form-validation" > - + + A validation message. @@ -52,19 +55,22 @@ exports[`BpkFormValidation should render correctly with "expanded" equal to fals id="my-form-validation" > - + + A validation message. From bb8ba86222b6df7b104e83cbe95aaabdef31d648 Mon Sep 17 00:00:00 2001 From: Simon Ward Date: Thu, 4 Apr 2024 14:41:33 +0100 Subject: [PATCH 048/174] LOOM-1289 BpkGridToggle moved className from BpkButtonLink out to wrapper span (#3333) --- .../src/BpkGridToggle.js | 15 +++++---- .../__snapshots__/BpkGridToggle-test.js.snap | 32 +++++++++++-------- 2 files changed, 27 insertions(+), 20 deletions(-) diff --git a/packages/bpk-component-grid-toggle/src/BpkGridToggle.js b/packages/bpk-component-grid-toggle/src/BpkGridToggle.js index c4e01441b2..dbda4e5d8b 100644 --- a/packages/bpk-component-grid-toggle/src/BpkGridToggle.js +++ b/packages/bpk-component-grid-toggle/src/BpkGridToggle.js @@ -72,13 +72,14 @@ class BpkGridToggle extends Component { const onOrOff = gridEnabled ? 'off' : 'on'; return ( - - Baseline grid {onOrOff} - + + + Baseline grid {onOrOff} + + ); } } diff --git a/packages/bpk-component-grid-toggle/src/__snapshots__/BpkGridToggle-test.js.snap b/packages/bpk-component-grid-toggle/src/__snapshots__/BpkGridToggle-test.js.snap index 38f348b9bc..a5cd630c0f 100644 --- a/packages/bpk-component-grid-toggle/src/__snapshots__/BpkGridToggle-test.js.snap +++ b/packages/bpk-component-grid-toggle/src/__snapshots__/BpkGridToggle-test.js.snap @@ -2,24 +2,30 @@ exports[`BpkGridToggle should render correctly 1`] = ` - + + + `; exports[`BpkGridToggle should render correctly with the className prop 1`] = ` - + + `; From ea7e121639dc1992ce4ea0f225ef9f3316089b1b Mon Sep 17 00:00:00 2001 From: Simon Ward Date: Thu, 4 Apr 2024 14:42:15 +0100 Subject: [PATCH 049/174] LOOM-1288 BpkGraphicPromo removed usages of BpkText (#3332) * LOOM-1288 BpkGraphicPromo removed usages of BpkText * removed commented code * LOOM-1288 BpkGraphicPromo replaced BpkText usage with base elements to clear className usage --- .../src/BpkGraphicPromo.module.scss | 3 ++ .../src/BpkGraphicPromo.tsx | 21 ++++----- .../BpkGraphicPromo-test.tsx.snap | 46 +++++++++---------- 3 files changed, 34 insertions(+), 36 deletions(-) diff --git a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss index 08e3aad2bd..703d3809f0 100644 --- a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss +++ b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss @@ -166,6 +166,8 @@ } &__headline { + @include typography.bpk-text; + @include breakpoints.bpk-breakpoint-above-tablet { @include typography.bpk-hero-5; @@ -192,6 +194,7 @@ } &__subheading { + @include typography.bpk-text; @include typography.bpk-body-default; @include breakpoints.bpk-breakpoint-tablet { diff --git a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx index 641452d4cf..e66ee4929f 100644 --- a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx +++ b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx @@ -19,7 +19,6 @@ import type { KeyboardEvent, MouseEvent } from 'react'; import { cssModules } from '../../bpk-react-utils'; -import BpkText from '../../bpk-component-text'; import {BpkButtonV2, BUTTON_TYPES} from '../../bpk-component-button'; import STYLES from './BpkGraphicPromo.module.scss'; @@ -149,12 +148,11 @@ const BpkGraphicPromo = ({
    {sponsor && ( <> - {sponsor.label} - + {sponsor.altText}
    {!sponsor && tagline && ( - {tagline} - + )} - {headline} - + {subheading && ( - {subheading} - +

    )} Tagline

    Ride your wave

    Portugal and 6 more countries have just been added to the UK travel green list

    @@ -66,7 +66,7 @@ exports[`BpkGraphicPromo should not display tagline or subheading when not provi class="bpk-graphic-promo__sponsor-content bpk-graphic-promo__sponsor-content--start" > Sponsored @@ -80,7 +80,7 @@ exports[`BpkGraphicPromo should not display tagline or subheading when not provi class="bpk-graphic-promo__promo-content bpk-graphic-promo__promo-content--start" >

    Ride your wave

    @@ -115,7 +115,7 @@ exports[`BpkGraphicPromo should render as expected without a content ID 1`] = ` class="bpk-graphic-promo__sponsor-content bpk-graphic-promo__sponsor-content--start" > Sponsored @@ -129,12 +129,12 @@ exports[`BpkGraphicPromo should render as expected without a content ID 1`] = ` class="bpk-graphic-promo__promo-content bpk-graphic-promo__promo-content--start" >

    Ride your wave

    Portugal and 6 more countries have just been added to the UK travel green list

    @@ -169,7 +169,7 @@ exports[`BpkGraphicPromo should render correctly when centre aligned 1`] = ` class="bpk-graphic-promo__sponsor-content bpk-graphic-promo__sponsor-content--center" > Sponsored @@ -183,12 +183,12 @@ exports[`BpkGraphicPromo should render correctly when centre aligned 1`] = ` class="bpk-graphic-promo__promo-content bpk-graphic-promo__promo-content--center" >

    Ride your wave

    Portugal and 6 more countries have just been added to the UK travel green list

    @@ -223,7 +223,7 @@ exports[`BpkGraphicPromo should render correctly when inverted portrait 1`] = ` class="bpk-graphic-promo__sponsor-content bpk-graphic-promo__sponsor-content--start" > Sponsored @@ -237,12 +237,12 @@ exports[`BpkGraphicPromo should render correctly when inverted portrait 1`] = ` class="bpk-graphic-promo__promo-content bpk-graphic-promo__promo-content--start" >

    Ride your wave

    Portugal and 6 more countries have just been added to the UK travel green list

    @@ -277,7 +277,7 @@ exports[`BpkGraphicPromo should render correctly when right aligned 1`] = ` class="bpk-graphic-promo__sponsor-content bpk-graphic-promo__sponsor-content--end" > Sponsored @@ -291,12 +291,12 @@ exports[`BpkGraphicPromo should render correctly when right aligned 1`] = ` class="bpk-graphic-promo__promo-content bpk-graphic-promo__promo-content--end" >

    Ride your wave

    Portugal and 6 more countries have just been added to the UK travel green list

    @@ -331,7 +331,7 @@ exports[`BpkGraphicPromo should render correctly with all properties set 1`] = ` class="bpk-graphic-promo__sponsor-content bpk-graphic-promo__sponsor-content--start" > Sponsored @@ -345,12 +345,12 @@ exports[`BpkGraphicPromo should render correctly with all properties set 1`] = ` class="bpk-graphic-promo__promo-content bpk-graphic-promo__promo-content--start" >

    Ride your wave

    Portugal and 6 more countries have just been added to the UK travel green list

    @@ -385,7 +385,7 @@ exports[`BpkGraphicPromo should support custom class names 1`] = ` class="bpk-graphic-promo__sponsor-content bpk-graphic-promo__sponsor-content--start" > Sponsored @@ -399,12 +399,12 @@ exports[`BpkGraphicPromo should support custom class names 1`] = ` class="bpk-graphic-promo__promo-content bpk-graphic-promo__promo-content--start" >

    Ride your wave

    Portugal and 6 more countries have just been added to the UK travel green list

    From 204df250f0ca764ac3feded3d9c1bd9397039355 Mon Sep 17 00:00:00 2001 From: Simon Ward Date: Fri, 5 Apr 2024 14:29:22 +0100 Subject: [PATCH 050/174] LOOM-1290 BpkHorizontalNav moved className on BpkMobileScrollContainer (#3334) * LOOM-1290 BpkHorizontalNav moved className on BpkMobileScrollContainer to wrapper div * added position relative to new div class to fix box shadow z index --- .../src/BpkHorizontalNav.js | 35 +-- .../src/BpkHorizontalNav.module.scss | 2 + .../BpkHorizontalNav-test.js.snap | 280 ++++++++++-------- 3 files changed, 178 insertions(+), 139 deletions(-) diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js index d8188057ed..d1742694b9 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js @@ -166,24 +166,25 @@ class BpkHorizontalNav extends Component { return ( // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. - { - this.scrollRef = ref; - }} - {...rest} - > -
    + { + this.scrollRef = ref; + }} + {...rest} > - {children} -
    -     +
    + {children} +
    + +
    ); } } diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss index d504f24b19..d3891a27ac 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss @@ -20,6 +20,8 @@ @use '../../unstable__bpk-mixins/borders'; .bpk-horizontal-nav { + position: relative; + &--show-default-underline { @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day, ''); } diff --git a/packages/bpk-component-horizontal-nav/src/__snapshots__/BpkHorizontalNav-test.js.snap b/packages/bpk-component-horizontal-nav/src/__snapshots__/BpkHorizontalNav-test.js.snap index c02dece8b1..f4d755a0ae 100644 --- a/packages/bpk-component-horizontal-nav/src/__snapshots__/BpkHorizontalNav-test.js.snap +++ b/packages/bpk-component-horizontal-nav/src/__snapshots__/BpkHorizontalNav-test.js.snap @@ -3,22 +3,26 @@ exports[`BpkHorizontalNav should render correctly 1`] = `
    - +
    + My nav content. +
    + +
    @@ -27,23 +31,27 @@ exports[`BpkHorizontalNav should render correctly 1`] = ` exports[`BpkHorizontalNav should render correctly with "ariaLabel" prop 1`] = `
    - +
    + My nav content. +
    + +
    @@ -52,22 +60,26 @@ exports[`BpkHorizontalNav should render correctly with "ariaLabel" prop 1`] = ` exports[`BpkHorizontalNav should render correctly with "ariaLabel" prop set to null 1`] = `
    - +
    + My nav content. +
    + +
    @@ -76,22 +88,26 @@ exports[`BpkHorizontalNav should render correctly with "ariaLabel" prop set to n exports[`BpkHorizontalNav should render correctly with "showUnderline" set to false 1`] = `
    - +
    + My nav content. +
    + +
    @@ -100,42 +116,46 @@ exports[`BpkHorizontalNav should render correctly with "showUnderline" set to fa exports[`BpkHorizontalNav should render correctly with "type" prop 1`] = `
    - + +
    @@ -144,25 +164,29 @@ exports[`BpkHorizontalNav should render correctly with "type" prop 1`] = ` exports[`BpkHorizontalNav should render correctly with arbitrary props 1`] = `
    - +
    + My nav content. +
    + +
    @@ -171,22 +195,26 @@ exports[`BpkHorizontalNav should render correctly with arbitrary props 1`] = ` exports[`BpkHorizontalNav should render correctly with custom "className" prop 1`] = `
    - +
    + My nav content. +
    + +
    @@ -195,22 +223,26 @@ exports[`BpkHorizontalNav should render correctly with custom "className" prop 1 exports[`BpkHorizontalNav should render correctly with custom "leadingScrollIndicatorClassName" prop 1`] = `
    - +
    + My nav content. +
    + +
    @@ -219,22 +251,26 @@ exports[`BpkHorizontalNav should render correctly with custom "leadingScrollIndi exports[`BpkHorizontalNav should render correctly with custom "trailingScrollIndicatorClassName" prop 1`] = `
    - +
    + My nav content. +
    + +
    From 6072d8e6822720861537463f40e40583da21f632 Mon Sep 17 00:00:00 2001 From: Matthew Robertson Date: Mon, 8 Apr 2024 12:11:48 +0100 Subject: [PATCH 051/174] [LOOM-1291][AnimateAndFade] className moved up one level (#3335) * move className up one level * fix undefined classnames --------- Co-authored-by: metalix2 --- .../src/AnimateAndFade.tsx | 72 +- .../AnimateAndFade-test.tsx.snap | 21 +- .../BpkBannerAlert-test.tsx.snap | 78 +- .../BpkBannerAlertDismissable-test.tsx.snap | 108 +- .../BpkBannerAlertInner-test.tsx.snap | 1171 +++++++++-------- .../withBannerAlertState-test.tsx.snap | 338 ++--- .../src/AnimateAndFade.tsx | 72 +- .../AnimateAndFade-test.tsx.snap | 21 +- .../__snapshots__/BpkInfoBanner-test.tsx.snap | 156 +-- .../BpkInfoBannerDismissable-test.tsx.snap | 108 +- .../BpkInfoBannerInner-test.tsx.snap | 1167 ++++++++-------- .../withBannerAlertState-test.tsx.snap | 334 ++--- 12 files changed, 1866 insertions(+), 1780 deletions(-) diff --git a/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx b/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx index 4244aab3c1..38e3dcaad3 100644 --- a/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx +++ b/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx @@ -40,7 +40,7 @@ type Props = { animateOnLeave: boolean; children: ReactNode | string; show: boolean; - className?: string | null; + className?: string | undefined; }; type State = { @@ -57,7 +57,6 @@ class AnimateAndFade extends Component { static defaultProps = { animateOnEnter: false, animateOnLeave: false, - className: null, }; constructor(props: Props) { @@ -139,41 +138,42 @@ class AnimateAndFade extends Component { // close to invisible. If we don't do this, the animate-height container // will take on height 0, and will never expand to allow the children to fade in return this.state.inDom ? ( - - {showPlaceholder &&
    {children}
    } - + - {this.state.visible && ( - - {children} - - )} - -     + {showPlaceholder &&
    {children}
    } + + {this.state.visible && ( + + {children} + + )} + + + ) : null; } } diff --git a/packages/bpk-component-banner-alert/src/__snapshots__/AnimateAndFade-test.tsx.snap b/packages/bpk-component-banner-alert/src/__snapshots__/AnimateAndFade-test.tsx.snap index d867d26793..2effbf895e 100644 --- a/packages/bpk-component-banner-alert/src/__snapshots__/AnimateAndFade-test.tsx.snap +++ b/packages/bpk-component-banner-alert/src/__snapshots__/AnimateAndFade-test.tsx.snap @@ -4,13 +4,15 @@ exports[`AnimateAndFade should render correctly 1`] = ``; exports[`AnimateAndFade should render correctly when shown 1`] = ` -
    -
    +
    +
    - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +
    + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +
    @@ -22,12 +24,15 @@ exports[`AnimateAndFade should render correctly with userland className 1`] = `
    -
    +
    - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +
    + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +
    diff --git a/packages/bpk-component-banner-alert/src/__snapshots__/BpkBannerAlert-test.tsx.snap b/packages/bpk-component-banner-alert/src/__snapshots__/BpkBannerAlert-test.tsx.snap index dd14e3a4d4..6cc14661d2 100644 --- a/packages/bpk-component-banner-alert/src/__snapshots__/BpkBannerAlert-test.tsx.snap +++ b/packages/bpk-component-banner-alert/src/__snapshots__/BpkBannerAlert-test.tsx.snap @@ -2,55 +2,57 @@ exports[`BpkBannerAlert should render correctly 1`] = ` -
    -
    +
    +
    - + +
    diff --git a/packages/bpk-component-banner-alert/src/__snapshots__/BpkBannerAlertDismissable-test.tsx.snap b/packages/bpk-component-banner-alert/src/__snapshots__/BpkBannerAlertDismissable-test.tsx.snap index f1e0df70ce..e63e06950a 100644 --- a/packages/bpk-component-banner-alert/src/__snapshots__/BpkBannerAlertDismissable-test.tsx.snap +++ b/packages/bpk-component-banner-alert/src/__snapshots__/BpkBannerAlertDismissable-test.tsx.snap @@ -2,80 +2,82 @@ exports[`BpkBannerAlertDismissable should render correctly 1`] = ` -
    -
    +
    +
    - + +
    diff --git a/packages/bpk-component-banner-alert/src/__snapshots__/BpkBannerAlertInner-test.tsx.snap b/packages/bpk-component-banner-alert/src/__snapshots__/BpkBannerAlertInner-test.tsx.snap index 5b1dcaecc9..c311e235bf 100644 --- a/packages/bpk-component-banner-alert/src/__snapshots__/BpkBannerAlertInner-test.tsx.snap +++ b/packages/bpk-component-banner-alert/src/__snapshots__/BpkBannerAlertInner-test.tsx.snap @@ -2,55 +2,57 @@ exports[`BpkBannerAlertInner should render correctly with "type" attribute equal to "error" 1`] = ` -
    -
    +
    +
    - + +
    @@ -59,55 +61,57 @@ exports[`BpkBannerAlertInner should render correctly with "type" attribute equal exports[`BpkBannerAlertInner should render correctly with "type" attribute equal to "error" and "icon" equal to CurrencyIcon 1`] = ` -
    -
    +
    +
    - + +
    @@ -116,55 +120,57 @@ exports[`BpkBannerAlertInner should render correctly with "type" attribute equal exports[`BpkBannerAlertInner should render correctly with "type" attribute equal to "neutral" 1`] = ` -
    -
    +
    +
    - + +
    @@ -173,55 +179,57 @@ exports[`BpkBannerAlertInner should render correctly with "type" attribute equal exports[`BpkBannerAlertInner should render correctly with "type" attribute equal to "primary" 1`] = ` -
    -
    +
    +
    - + +
    @@ -230,55 +238,57 @@ exports[`BpkBannerAlertInner should render correctly with "type" attribute equal exports[`BpkBannerAlertInner should render correctly with "type" attribute equal to "success" 1`] = ` -
    -
    +
    +
    - + +
    @@ -287,55 +297,57 @@ exports[`BpkBannerAlertInner should render correctly with "type" attribute equal exports[`BpkBannerAlertInner should render correctly with "type" attribute equal to "warn" 1`] = ` -
    -
    +
    +
    - + +
    @@ -344,55 +356,57 @@ exports[`BpkBannerAlertInner should render correctly with "type" attribute equal exports[`BpkBannerAlertInner should render correctly with a custom banner-alert class name 1`] = ` -
    -
    +
    +
    - + +
    @@ -403,54 +417,57 @@ exports[`BpkBannerAlertInner should render correctly with a custom class name 1`
    -
    +
    - + +
    @@ -459,90 +476,92 @@ exports[`BpkBannerAlertInner should render correctly with a custom class name 1` exports[`BpkBannerAlertInner should render correctly with a element based message 1`] = ` -
    -
    +
    +
    -
    - + +
    @@ -551,80 +570,82 @@ exports[`BpkBannerAlertInner should render correctly with a element based messag exports[`BpkBannerAlertInner should render correctly with animateOnLeave 1`] = ` -
    -
    +
    +
    - + +
    @@ -633,55 +654,57 @@ exports[`BpkBannerAlertInner should render correctly with animateOnLeave 1`] = ` exports[`BpkBannerAlertInner should render correctly with arbitrary props 1`] = ` -
    -
    +
    +
    - + +
    @@ -690,85 +713,87 @@ exports[`BpkBannerAlertInner should render correctly with arbitrary props 1`] = exports[`BpkBannerAlertInner should render correctly with child nodes 1`] = ` -
    -
    +
    +
    -
    - + +
    @@ -777,80 +802,82 @@ exports[`BpkBannerAlertInner should render correctly with child nodes 1`] = ` exports[`BpkBannerAlertInner should render correctly with dismissable option 1`] = ` -
    -
    +
    +
    - + +
    diff --git a/packages/bpk-component-banner-alert/src/__snapshots__/withBannerAlertState-test.tsx.snap b/packages/bpk-component-banner-alert/src/__snapshots__/withBannerAlertState-test.tsx.snap index ba0a008c16..fe96648b90 100644 --- a/packages/bpk-component-banner-alert/src/__snapshots__/withBannerAlertState-test.tsx.snap +++ b/packages/bpk-component-banner-alert/src/__snapshots__/withBannerAlertState-test.tsx.snap @@ -2,80 +2,82 @@ exports[`withBannerAlertState(BpkBannerAlertDismissable) should render correctly 1`] = ` -
    -
    +
    +
    - + +
    @@ -84,90 +86,92 @@ exports[`withBannerAlertState(BpkBannerAlertDismissable) should render correctly exports[`withBannerAlertState(BpkBannerAlertExpandable) should render correctly collapsed 1`] = ` -
    -
    +
    +
    -
    - + +
    @@ -176,88 +180,90 @@ ante in, vestibulum nulla. exports[`withBannerAlertState(BpkBannerAlertExpandable) should render correctly expanded 1`] = ` -
    -
    +
    +
    - + +
    diff --git a/packages/bpk-component-info-banner/src/AnimateAndFade.tsx b/packages/bpk-component-info-banner/src/AnimateAndFade.tsx index 4244aab3c1..38e3dcaad3 100644 --- a/packages/bpk-component-info-banner/src/AnimateAndFade.tsx +++ b/packages/bpk-component-info-banner/src/AnimateAndFade.tsx @@ -40,7 +40,7 @@ type Props = { animateOnLeave: boolean; children: ReactNode | string; show: boolean; - className?: string | null; + className?: string | undefined; }; type State = { @@ -57,7 +57,6 @@ class AnimateAndFade extends Component { static defaultProps = { animateOnEnter: false, animateOnLeave: false, - className: null, }; constructor(props: Props) { @@ -139,41 +138,42 @@ class AnimateAndFade extends Component { // close to invisible. If we don't do this, the animate-height container // will take on height 0, and will never expand to allow the children to fade in return this.state.inDom ? ( - - {showPlaceholder &&
    {children}
    } - + - {this.state.visible && ( - - {children} - - )} - -     + {showPlaceholder &&
    {children}
    } + + {this.state.visible && ( + + {children} + + )} + + +
    ) : null; } } diff --git a/packages/bpk-component-info-banner/src/__snapshots__/AnimateAndFade-test.tsx.snap b/packages/bpk-component-info-banner/src/__snapshots__/AnimateAndFade-test.tsx.snap index d867d26793..2effbf895e 100644 --- a/packages/bpk-component-info-banner/src/__snapshots__/AnimateAndFade-test.tsx.snap +++ b/packages/bpk-component-info-banner/src/__snapshots__/AnimateAndFade-test.tsx.snap @@ -4,13 +4,15 @@ exports[`AnimateAndFade should render correctly 1`] = ``; exports[`AnimateAndFade should render correctly when shown 1`] = ` -
    -
    +
    +
    - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +
    + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +
    @@ -22,12 +24,15 @@ exports[`AnimateAndFade should render correctly with userland className 1`] = `
    -
    +
    - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +
    + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. +
    diff --git a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap index 96a99c9b2b..516a8f2169 100644 --- a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap +++ b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap @@ -2,55 +2,57 @@ exports[`BpkInfoBanner should render correctly 1`] = ` -
    -
    +
    +
    - + +
    @@ -61,55 +63,57 @@ exports[`BpkInfoBanner should render correctly hidden 1`] = ` -
    -
    +
    +
    - + +
    diff --git a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerDismissable-test.tsx.snap b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerDismissable-test.tsx.snap index f682e09c4d..066ea11da2 100644 --- a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerDismissable-test.tsx.snap +++ b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerDismissable-test.tsx.snap @@ -2,80 +2,82 @@ exports[`BpkInfoBannerDismissable should render correctly 1`] = ` -
    -
    +
    +
    - + +
    diff --git a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerInner-test.tsx.snap b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerInner-test.tsx.snap index 0c3580cc52..9d2dd89aad 100644 --- a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerInner-test.tsx.snap +++ b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerInner-test.tsx.snap @@ -2,55 +2,57 @@ exports[`BpkInfoBannerInner should render correctly with "style" attribute equal to "onContrast" 1`] = ` -
    -
    +
    +
    - + +
    @@ -59,55 +61,57 @@ exports[`BpkInfoBannerInner should render correctly with "style" attribute equal exports[`BpkInfoBannerInner should render correctly with "type" attribute equal to "error" 1`] = ` -
    -
    +
    +
    - + +
    @@ -116,55 +120,57 @@ exports[`BpkInfoBannerInner should render correctly with "type" attribute equal exports[`BpkInfoBannerInner should render correctly with "type" attribute equal to "error" and "icon" equal to CurrencyIcon 1`] = ` -
    -
    +
    +
    - + +
    @@ -173,55 +179,57 @@ exports[`BpkInfoBannerInner should render correctly with "type" attribute equal exports[`BpkInfoBannerInner should render correctly with "type" attribute equal to "info" 1`] = ` -
    -
    +
    +
    - + +
    @@ -230,55 +238,57 @@ exports[`BpkInfoBannerInner should render correctly with "type" attribute equal exports[`BpkInfoBannerInner should render correctly with "type" attribute equal to "success" 1`] = ` -
    -
    +
    +
    - + +
    @@ -287,55 +297,57 @@ exports[`BpkInfoBannerInner should render correctly with "type" attribute equal exports[`BpkInfoBannerInner should render correctly with "type" attribute equal to "warning" 1`] = ` -
    -
    +
    +
    - + +
    @@ -344,55 +356,57 @@ exports[`BpkInfoBannerInner should render correctly with "type" attribute equal exports[`BpkInfoBannerInner should render correctly with a custom banner-alert class name 1`] = ` -
    -
    +
    +
    - + +
    @@ -403,54 +417,57 @@ exports[`BpkInfoBannerInner should render correctly with a custom class name 1`]
    -
    +
    - + +
    @@ -459,90 +476,92 @@ exports[`BpkInfoBannerInner should render correctly with a custom class name 1`] exports[`BpkInfoBannerInner should render correctly with a element based message 1`] = ` -
    -
    +
    +
    -
    - + +
    @@ -551,80 +570,82 @@ exports[`BpkInfoBannerInner should render correctly with a element based message exports[`BpkInfoBannerInner should render correctly with animateOnLeave 1`] = ` -
    -
    +
    +
    - + +
    @@ -633,55 +654,57 @@ exports[`BpkInfoBannerInner should render correctly with animateOnLeave 1`] = ` exports[`BpkInfoBannerInner should render correctly with arbitrary props 1`] = ` -
    -
    +
    +
    - + +
    @@ -690,85 +713,87 @@ exports[`BpkInfoBannerInner should render correctly with arbitrary props 1`] = ` exports[`BpkInfoBannerInner should render correctly with child nodes 1`] = ` -
    -
    +
    +
    -
    - + +
    @@ -777,80 +802,82 @@ exports[`BpkInfoBannerInner should render correctly with child nodes 1`] = ` exports[`BpkInfoBannerInner should render correctly with dismissable option 1`] = ` -
    -
    +
    +
    - + +
    diff --git a/packages/bpk-component-info-banner/src/__snapshots__/withBannerAlertState-test.tsx.snap b/packages/bpk-component-info-banner/src/__snapshots__/withBannerAlertState-test.tsx.snap index 31e8f78ead..efa56d44d4 100644 --- a/packages/bpk-component-info-banner/src/__snapshots__/withBannerAlertState-test.tsx.snap +++ b/packages/bpk-component-info-banner/src/__snapshots__/withBannerAlertState-test.tsx.snap @@ -2,80 +2,82 @@ exports[`withBannerAlertState(BpkInfoBannerDismissable) should render correctly 1`] = ` -
    -
    +
    +
    - + +
    @@ -84,90 +86,92 @@ exports[`withBannerAlertState(BpkInfoBannerDismissable) should render correctly exports[`withBannerAlertState(BpkInfoBannerExpandable) should render correctly collapsed 1`] = ` -
    -
    +
    +
    -
    - + +
    @@ -176,88 +180,90 @@ ante in, vestibulum nulla. exports[`withBannerAlertState(BpkInfoBannerExpandable) should render correctly expanded 1`] = ` -
    -
    +
    +
    - + +
    From b65216d9a55b2aa040092573c202a77d4feca7de Mon Sep 17 00:00:00 2001 From: James Ronald <7976511+jronald01@users.noreply.github.com> Date: Tue, 9 Apr 2024 11:55:33 +0100 Subject: [PATCH 052/174] LOOM-1298 BpkPriceMarker Class 2 Overrides (#3344) --- .../bpk-component-map/src/BpkPriceMarker.js | 21 +++--- .../__snapshots__/BpkPriceMarker-test.js.snap | 64 ++++++++++++++----- 2 files changed, 59 insertions(+), 26 deletions(-) diff --git a/packages/bpk-component-map/src/BpkPriceMarker.js b/packages/bpk-component-map/src/BpkPriceMarker.js index 002821b532..f0c9247e35 100644 --- a/packages/bpk-component-map/src/BpkPriceMarker.js +++ b/packages/bpk-component-map/src/BpkPriceMarker.js @@ -88,16 +88,17 @@ const BpkPriceMarker = (props: Props) => { disabled={disabled} {...buttonProps} > - - {label} - + + + {label} + +
    diff --git a/packages/bpk-component-map/src/__snapshots__/BpkPriceMarker-test.js.snap b/packages/bpk-component-map/src/__snapshots__/BpkPriceMarker-test.js.snap index e6f9ee02d4..40a5c19287 100644 --- a/packages/bpk-component-map/src/__snapshots__/BpkPriceMarker-test.js.snap +++ b/packages/bpk-component-map/src/__snapshots__/BpkPriceMarker-test.js.snap @@ -11,9 +11,13 @@ exports[`BpkMapMarker should render correctly with "status" attribute as "focuse type="button" > - £120 + + £120 +
    - £120 + + £120 +
    - £120 + + £120 +
    - £120 + + £120 +
    - £120 + + £120 +
    - Sold out + + Sold out +
    - £120 + + £120 +
    - £120 + + £120 +
    Date: Tue, 9 Apr 2024 12:14:57 +0100 Subject: [PATCH 053/174] Bump express from 4.18.2 to 4.19.2 (#3318) Bumps [express](https://github.com/expressjs/express) from 4.18.2 to 4.19.2. - [Release notes](https://github.com/expressjs/express/releases) - [Changelog](https://github.com/expressjs/express/blob/master/History.md) - [Commits](https://github.com/expressjs/express/compare/4.18.2...4.19.2) --- updated-dependencies: - dependency-name: express dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> --- package-lock.json | 54 +++++++++++++++++++++++++++++------------------ 1 file changed, 33 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index cf201f39ae..9e86017c4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10884,12 +10884,13 @@ } }, "node_modules/body-parser": { - "version": "1.20.1", + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz", + "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==", "dev": true, - "license": "MIT", "dependencies": { "bytes": "3.1.2", - "content-type": "~1.0.4", + "content-type": "~1.0.5", "debug": "2.6.9", "depd": "2.0.0", "destroy": "1.2.0", @@ -10897,7 +10898,7 @@ "iconv-lite": "0.4.24", "on-finished": "2.4.1", "qs": "6.11.0", - "raw-body": "2.5.1", + "raw-body": "2.5.2", "type-is": "~1.6.18", "unpipe": "1.0.0" }, @@ -10908,21 +10909,24 @@ }, "node_modules/body-parser/node_modules/debug": { "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dev": true, - "license": "MIT", "dependencies": { "ms": "2.0.0" } }, "node_modules/body-parser/node_modules/ms": { "version": "2.0.0", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", + "dev": true }, "node_modules/body-parser/node_modules/qs": { "version": "6.11.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", + "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", "dev": true, - "license": "BSD-3-Clause", "dependencies": { "side-channel": "^1.0.4" }, @@ -11205,8 +11209,9 @@ }, "node_modules/bytes": { "version": "3.1.2", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", "dev": true, - "license": "MIT", "engines": { "node": ">= 0.8" } @@ -12203,8 +12208,9 @@ }, "node_modules/content-type": { "version": "1.0.5", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", + "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==", "dev": true, - "license": "MIT", "engines": { "node": ">= 0.6" } @@ -12215,9 +12221,10 @@ "license": "MIT" }, "node_modules/cookie": { - "version": "0.5.0", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", "dev": true, - "license": "MIT", "engines": { "node": ">= 0.6" } @@ -15197,16 +15204,17 @@ } }, "node_modules/express": { - "version": "4.18.2", + "version": "4.19.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", + "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==", "dev": true, - "license": "MIT", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.1", + "body-parser": "1.20.2", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.5.0", + "cookie": "0.6.0", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", @@ -17810,8 +17818,9 @@ }, "node_modules/iconv-lite": { "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "dev": true, - "license": "MIT", "dependencies": { "safer-buffer": ">= 2.1.2 < 3" }, @@ -22793,8 +22802,9 @@ }, "node_modules/media-typer": { "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==", "dev": true, - "license": "MIT", "engines": { "node": ">= 0.6" } @@ -25802,9 +25812,10 @@ } }, "node_modules/raw-body": { - "version": "2.5.1", + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz", + "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==", "dev": true, - "license": "MIT", "dependencies": { "bytes": "3.1.2", "http-errors": "2.0.0", @@ -30824,8 +30835,9 @@ }, "node_modules/type-is": { "version": "1.6.18", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", "dev": true, - "license": "MIT", "dependencies": { "media-typer": "0.3.0", "mime-types": "~2.1.24" From 0f7547f22da5cc79c9df53a06766288f7115a2f0 Mon Sep 17 00:00:00 2001 From: James Ronald <7976511+jronald01@users.noreply.github.com> Date: Tue, 9 Apr 2024 13:04:10 +0100 Subject: [PATCH 054/174] LOOM-1292 BpkInfoBannerInner - Class 2 Overrides (#3339) * LOOM-1292 BpKInfoBannerInner * Introduce the chevron down icon for alignment simplicity * Snapshots updated * Snapshots updated2 * Update packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx Co-authored-by: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> * Update packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx Co-authored-by: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> * Mistakenly swapped chevron directions --------- Co-authored-by: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> --- .../src/BpkInfoBanner.module.scss | 8 - .../src/BpkInfoBannerInner.tsx | 16 +- .../__snapshots__/BpkInfoBanner-test.tsx.snap | 58 +-- .../BpkInfoBannerDismissable-test.tsx.snap | 31 +- .../BpkInfoBannerInner-test.tsx.snap | 439 ++++++++++-------- .../withBannerAlertState-test.tsx.snap | 147 +++--- 6 files changed, 380 insertions(+), 319 deletions(-) diff --git a/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss b/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss index ed3925b30f..e55320ef54 100644 --- a/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss +++ b/packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss @@ -82,10 +82,6 @@ &__expand-icon { fill: tokens.$bpk-text-secondary-day; - - &--flipped { - transform: scaleY(-1); - } } &__children-container { @@ -101,8 +97,4 @@ padding: tokens.bpk-spacing-sm() 0 tokens.bpk-spacing-md(); } } - - &__expandable-action { - padding-bottom: tokens.bpk-spacing-sm(); - } } diff --git a/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx b/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx index 9e752d2bca..2c43c9fc09 100644 --- a/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx +++ b/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx @@ -37,6 +37,8 @@ import TickCircleIcon from '../../bpk-component-icon/sm/tick-circle'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ChevronDownIcon from '../../bpk-component-icon/sm/chevron-down'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import ChevronUpIcon from '../../bpk-component-icon/sm/chevron-up'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import InfoCircleIcon from '../../bpk-component-icon/sm/information-circle'; import { cssModules } from '../../bpk-react-utils'; @@ -56,6 +58,7 @@ import STYLES from './BpkInfoBanner.module.scss'; const getClassName = cssModules(STYLES); const ExpandIcon = withButtonAlignment(ChevronDownIcon); +const CollapseIcon = withButtonAlignment(ChevronUpIcon); export const CONFIGURATION = { NONE: 'none', @@ -85,7 +88,7 @@ const getIconForType = ( const Icon = CustomIcon || componentMap[type]; const AlignedIcon = withButtonAlignment(Icon); - return ; + return
    ; }; type ToggleButtonProps = { @@ -94,10 +97,7 @@ type ToggleButtonProps = { }; const ToggleButton = (props: ToggleButtonProps) => { - const classNames = getClassName( - 'bpk-info-banner__expand-icon', - props.expanded && 'bpk-info-banner__expand-icon--flipped' - ); + const classNames = getClassName('bpk-info-banner__expand-icon'); return ( ); }; @@ -211,7 +213,6 @@ const BpkInfoBannerInner = ({ {dismissable && ( {isExpandable && action && ( {action.title} diff --git a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap index 516a8f2169..36d1b0a6f8 100644 --- a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap +++ b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap @@ -18,21 +18,24 @@ exports[`BpkInfoBanner should render correctly 1`] = ` - - - + + +
    - - - + + +
    - - - + + +
    - - - + + +
    - - - + + +
    - - - + + +
    - - - + + +
    - - - + + +
    - - - + + +
    - - - + + +
    - - - + + +
    - - - + + +
    @@ -586,21 +616,24 @@ exports[`BpkInfoBannerInner should render correctly with animateOnLeave 1`] = ` - - - + + +
    - - - + + +
    - - - + + +
    @@ -818,21 +860,24 @@ exports[`BpkInfoBannerInner should render correctly with dismissable option 1`] - - - + + +
    - - - + + +
    @@ -197,21 +206,24 @@ exports[`withBannerAlertState(BpkInfoBannerExpandable) should render correctly e - - - + + +
    - - - + + +
    From 50a8ad44787fea3b2d829354abcbb2341484d23e Mon Sep 17 00:00:00 2001 From: James Ronald <7976511+jronald01@users.noreply.github.com> Date: Tue, 9 Apr 2024 15:32:32 +0100 Subject: [PATCH 055/174] LOOM-1299 BpkModal V2 Class 2 Overrides (#3345) * LOOM-1299 BpkModal V2 Class 2 Overrides * Remove redundant header title style --- .../bpk-component-modal/src/BpkModalV2/BpKModal.module.scss | 6 ------ packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx | 1 - .../src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap | 2 +- 3 files changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss b/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss index 6e79e24f33..a21ee9a4c1 100644 --- a/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss +++ b/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss @@ -168,12 +168,6 @@ justify-content: flex-start; } - &__title { - padding-inline-end: tokens.bpk-spacing-base(); - - @include typography.bpk-label-1; - } - &__button-container { padding-block-start: tokens.bpk-spacing-base(); padding-inline-end: tokens.bpk-spacing-base(); diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx b/packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx index 3695e8b846..f808544005 100644 --- a/packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx +++ b/packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx @@ -101,7 +101,6 @@ const Header = ({ const Heading = withDefaultProps(BpkText, { textStyle: TEXT_STYLES.label1, tagName: 'h2', - className: getClassName('bpk-modal__title'), }); type DialogProps = { diff --git a/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap b/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap index 05f08f9579..258ab815db 100644 --- a/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap +++ b/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap @@ -72,7 +72,7 @@ exports[`BpkModalV2 is supported should render correctly with content 1`] = ` class="bpk-modal__header-title-container" >

    Modal with dialog element

    From e777530c5d56a599c6b87fca1ddbaf381f56e72b Mon Sep 17 00:00:00 2001 From: James Ronald <7976511+jronald01@users.noreply.github.com> Date: Wed, 10 Apr 2024 10:02:15 +0100 Subject: [PATCH 056/174] LOOM-1301 BpkNavigationBar Class 2 Overrides (#3346) * LOOM-1301 BpkNavigationBar Class 2 Overrides * Remove redundant import --- .../BpkBottomSheet-test.tsx.snap | 30 +++++--- .../src/BpkNavigationBar.tsx | 22 +++--- .../BpkNavigationBar-test.tsx.snap | 70 +++++++++++++------ 3 files changed, 81 insertions(+), 41 deletions(-) diff --git a/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap b/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap index 942e60d47e..4d647393ad 100644 --- a/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap +++ b/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap @@ -48,9 +48,13 @@ exports[`BpkBottomSheet renders correctly with action props 1`] = `
    + class="bpk-navigation-bar__title bpk-navigation-bar__title--default" + > + +
    @@ -122,9 +126,13 @@ exports[`BpkBottomSheet renders correctly with minimum prop 1`] = `
    + class="bpk-navigation-bar__title bpk-navigation-bar__title--default" + > + +
    + class="bpk-navigation-bar__title bpk-navigation-bar__title--default" + > + +
    {
    )} {typeof title === 'string' ? ( - - {title} - + + + {title} + + ) : ( title )} diff --git a/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBar-test.tsx.snap b/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBar-test.tsx.snap index 3328eaf22c..2cb760aaab 100644 --- a/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBar-test.tsx.snap +++ b/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBar-test.tsx.snap @@ -7,10 +7,14 @@ exports[`BpkNavigationBar should render correctly 1`] = ` class="bpk-navigation-bar bpk-navigation-bar--default" > - test + + test + @@ -23,10 +27,14 @@ exports[`BpkNavigationBar should render correctly when sticky 1`] = ` class="bpk-navigation-bar bpk-navigation-bar--default bpk-navigation-bar__sticky" > - test + + test + @@ -55,10 +63,14 @@ exports[`BpkNavigationBar should render correctly with a "leadingButton" attribu
    - test + + test +     @@ -71,10 +83,14 @@ exports[`BpkNavigationBar should render correctly with a "traillingButton" attri class="bpk-navigation-bar bpk-navigation-bar--default" > - test + + test +
    - test + + test + @@ -149,10 +169,14 @@ exports[`BpkNavigationBar should render correctly with custom class 1`] = ` class="bpk-navigation-bar bpk-navigation-bar--default my-custom-class" > - test + + test + @@ -165,10 +189,14 @@ exports[`BpkNavigationBar should render correctly with on-dark style 1`] = ` class="bpk-navigation-bar bpk-navigation-bar--on-dark" > - test + + test + From 343785aee1a79588fe214294baf751af163d970e Mon Sep 17 00:00:00 2001 From: mungodewar <89925955+mungodewar@users.noreply.github.com> Date: Wed, 10 Apr 2024 14:08:48 +0100 Subject: [PATCH 057/174] [LOOM-1341]: update & --fix to @skyscanner/eslint-config-skyscanner@17.4.0 (#3347) * update linter and --fix * update ts-expect-error lines * update ts-expect-error lines * add snaps * fix calendar css, remove overriding width * update @skyscanner/stylelint-config-skyscanner to latest --- .storybook/preview.tsx | 2 +- .storybook/themeableAttributes.js | 4 +- examples/bpk-animate-height/examples.js | 2 +- examples/bpk-component-accordion/examples.js | 10 +- examples/bpk-component-accordion/stories.js | 2 +- examples/bpk-component-aria-live/examples.tsx | 8 +- examples/bpk-component-aria-live/stories.tsx | 2 +- .../bpk-component-autosuggest/examples.js | 4 +- examples/bpk-component-autosuggest/stories.js | 2 +- examples/bpk-component-badge/examples.js | 4 +- .../bpk-component-banner-alert/examples.js | 10 +- .../bpk-component-banner-alert/stories.js | 2 +- examples/bpk-component-barchart/examples.js | 20 +- .../bpk-component-bottom-sheet/examples.tsx | 6 +- examples/bpk-component-breakpoint/examples.js | 2 +- examples/bpk-component-button/examples.js | 16 +- .../examples-components.js | 16 +- examples/bpk-component-calendar/examples.js | 6 +- .../bpk-component-calendar/stories-utils.tsx | 2 +- examples/bpk-component-calendar/stories.js | 6 +- examples/bpk-component-card/examples.js | 8 +- examples/bpk-component-card/stories.js | 2 +- examples/bpk-component-checkbox/examples.js | 2 +- examples/bpk-component-chip/examples.tsx | 10 +- examples/bpk-component-chip/stories.tsx | 2 +- .../bpk-component-close-button/examples.js | 2 +- examples/bpk-component-datepicker/examples.js | 32 +- .../bpk-component-description-list/stories.js | 2 +- examples/bpk-component-dialog/examples.js | 10 +- examples/bpk-component-drawer/examples.js | 4 +- examples/bpk-component-fieldset/examples.js | 20 +- examples/bpk-component-flare/examples.js | 4 +- .../examples.js | 2 +- .../bpk-component-form-validation/examples.js | 6 +- .../bpk-component-horizontal-nav/examples.js | 6 +- examples/bpk-component-icon/examples.js | 6 +- examples/bpk-component-image/examples.js | 4 +- examples/bpk-component-image/stories.js | 4 +- .../bpk-component-infinite-scroll/examples.js | 10 +- .../bpk-component-infinite-scroll/stories.js | 2 +- .../bpk-component-info-banner/examples.js | 8 +- examples/bpk-component-info-banner/stories.js | 2 +- examples/bpk-component-input/examples.js | 8 +- examples/bpk-component-input/stories.js | 4 +- examples/bpk-component-label/examples.js | 2 +- examples/bpk-component-link/examples.js | 2 +- examples/bpk-component-link/stories.js | 2 +- .../bpk-component-loading-button/examples.js | 12 +- examples/bpk-component-map/examples.js | 10 +- examples/bpk-component-map/stories.js | 8 +- .../examples.js | 2 +- examples/bpk-component-modal-v2/examples.tsx | 4 +- examples/bpk-component-modal/examples.js | 6 +- .../bpk-component-navigation-bar/examples.js | 6 +- .../bpk-component-navigation-bar/stories.js | 2 +- examples/bpk-component-nudger/examples.js | 14 +- examples/bpk-component-nudger/stories.js | 2 +- examples/bpk-component-overlay/examples.js | 4 +- .../bpk-component-page-indicator/examples.js | 2 +- examples/bpk-component-popover/examples.js | 4 +- examples/bpk-component-price/examples.js | 2 +- examples/bpk-component-progress/examples.js | 2 +- examples/bpk-component-radio/examples.js | 2 +- examples/bpk-component-rating/examples.js | 2 +- .../examples.js | 4 +- .../stories-utils.tsx | 2 +- .../stories.js | 2 +- .../bpk-component-section-header/examples.tsx | 6 +- .../bpk-component-section-list/examples.js | 2 +- .../bpk-component-section-list/stories.js | 2 +- examples/bpk-component-select/examples.js | 4 +- examples/bpk-component-slider/stories.js | 2 +- .../bpk-component-spinner/SpinnerLayout.js | 2 +- examples/bpk-component-spinner/stories.js | 4 +- .../bpk-component-split-input/examples.js | 2 +- .../bpk-component-star-rating/examples.js | 16 +- examples/bpk-component-star-rating/stories.js | 8 +- examples/bpk-component-switch/stories.js | 2 +- examples/bpk-component-table/stories.js | 6 +- examples/bpk-component-text/examples.js | 2 +- examples/bpk-component-textarea/examples.js | 2 +- examples/bpk-component-ticket/examples.js | 4 +- examples/bpk-component-tooltip/examples.js | 2 +- examples/bpk-scrim-utils/examples.tsx | 2 +- examples/bpk-scrim-utils/stories.tsx | 4 +- examples/bpk-storybook-utils/index.js | 2 +- package-lock.json | 2050 ++++++++++------- package.json | 3 +- .../src/accessibility-test.js | 2 +- packages/bpk-component-accordion/index.js | 2 +- .../src/BpkAccordionItem.js | 2 +- .../src/BpkAutosuggest-test.js | 2 +- packages/bpk-component-banner-alert/index.ts | 2 +- .../src/AnimateAndFade.tsx | 2 +- .../src/BpkBannerAlertInner.tsx | 6 +- .../src/accessibility-test.tsx | 2 +- .../src/withBannerAlertState-test.tsx | 2 +- .../src/withBannerAlertState.tsx | 2 +- .../bpk-component-barchart/src/BpkBarchart.js | 16 +- .../src/BpkBarchartBars-test.js | 4 +- .../src/BpkChartAxis-test.js | 2 +- .../src/BpkChartAxis.js | 2 +- .../src/BpkChartGridLines-test.js | 2 +- .../src/BpkChartMargin.js | 2 +- .../src/accessibility-test.js | 2 +- .../src/BpkBottomSheet.tsx | 6 +- .../src/BpkBreadcrumbItem.js | 4 +- .../src/accessibility-test.js | 2 +- packages/bpk-component-button/index.js | 10 +- .../src/BpkButtonDestructive.js | 2 +- .../src/BpkButtonFeatured.js | 2 +- .../bpk-component-button/src/BpkButtonLink.js | 2 +- .../src/BpkButtonLinkOnDark.js | 2 +- .../src/BpkButtonPrimary.js | 2 +- .../src/BpkButtonPrimaryOnDark.js | 2 +- .../src/BpkButtonPrimaryOnLight.js | 2 +- .../src/BpkButtonSecondary.js | 2 +- .../src/BpkButtonSecondaryOnDark.js | 2 +- .../src/BpkButtonV2/accessibility-test.tsx | 2 +- .../src/accessibility-test.js | 2 +- .../bpk-component-button/src/common-types.js | 2 +- packages/bpk-component-calendar/index.ts | 12 +- .../src/BpkCalendarContainer.tsx | 6 +- .../src/BpkCalendarGrid-test.tsx | 4 +- .../src/BpkCalendarGrid.module.scss | 1 - .../src/BpkCalendarGrid.tsx | 4 +- .../src/BpkCalendarGridTransition.tsx | 10 +- .../src/BpkCalendarNav-test.tsx | 2 +- .../src/BpkCalendarNav.tsx | 2 +- packages/bpk-component-calendar/src/Week.tsx | 4 +- .../bpk-component-calendar/src/date-utils.ts | 28 +- .../src/BpkSaveButton.tsx | 2 +- .../src/accessibility-test.js | 2 +- packages/bpk-component-chip/index.ts | 6 +- .../src/BpkDismissibleChip.tsx | 2 +- .../src/BpkIconChip-test.tsx | 2 +- .../src/BpkSelectableChip.tsx | 2 +- .../bpk-component-code/src/BpkCodeBlock.js | 2 +- .../src/BpkDataTable-test.tsx | 2 +- .../src/BpkDataTable.tsx | 2 +- .../src/BpkDataTableHeader.tsx | 4 +- .../src/BpkDatepicker-test.tsx | 4 +- .../src/BpkDatepicker.tsx | 10 +- .../src/accessibility-test.tsx | 4 +- .../bpk-component-description-list/index.js | 2 +- .../src/BpkDialog-test.tsx | 4 +- .../bpk-component-dialog/src/BpkDialog.tsx | 2 +- .../src/BpkDialogInner.tsx | 4 +- .../src/BpkDrawerContent.js | 4 +- .../src/BpkFieldset-test.js | 2 +- .../bpk-component-fieldset/src/BpkFieldset.js | 2 +- packages/bpk-component-flare/index.js | 2 +- .../bpk-component-flare/src/BpkFlareBar.js | 2 +- .../src/accessibility-test.js | 2 +- .../src/BpkFloatingNotification-test.tsx | 2 +- .../src/BpkFormValidation.js | 4 +- .../src/BpkGraphicPromo.tsx | 2 +- .../src/BpkGridToggle.js | 2 +- .../src/BpkHorizontalNav.js | 2 +- .../src/BpkHorizontalNavItem.js | 2 +- packages/bpk-component-icon/index.tsx | 2 +- packages/bpk-component-image/index.ts | 4 +- .../src/BpkBackgroundImage.tsx | 2 +- packages/bpk-component-image/src/BpkImage.tsx | 2 +- .../src/accessibility-test.tsx | 2 +- .../src/accessibility-test.js | 2 +- .../src/withInfiniteScroll-test.flow.js | 2 +- .../src/withInfiniteScroll-test.js | 2 +- .../src/withInfiniteScroll.js | 4 +- .../src/AnimateAndFade.tsx | 2 +- .../src/BpkInfoBannerInner.tsx | 10 +- .../src/accessibility-test.tsx | 2 +- .../src/withBannerAlertState-test.tsx | 2 +- .../src/withBannerAlertState.tsx | 2 +- packages/bpk-component-input/index.ts | 2 +- .../src/BpkClearButton.tsx | 2 +- .../src/withOpenEvents-test.tsx | 2 +- packages/bpk-component-link/index.js | 2 +- .../src/accessibility-test.js | 2 +- .../src/BpkLoadingButton.js | 4 +- packages/bpk-component-map/index.js | 6 +- .../src/BpkBasicMapMarker.js | 2 +- .../bpk-component-map/src/BpkIconMarker.js | 4 +- packages/bpk-component-map/src/BpkMap.js | 2 +- .../bpk-component-map/src/BpkOverlayView.js | 2 +- .../bpk-component-map/src/BpkPriceMarker.js | 4 +- .../src/BpkPriceMarkerV2/BpkPriceMarker.tsx | 2 +- .../src/withGoogleMapsScript.js | 2 +- packages/bpk-component-modal/index.ts | 4 +- packages/bpk-component-modal/src/BpkModal.tsx | 2 +- .../bpk-component-modal/src/BpkModalInner.tsx | 4 +- .../bpk-component-navigation-bar/index.ts | 6 +- .../src/BpkNavigationBar.tsx | 2 +- packages/bpk-component-nudger/index.ts | 2 +- .../bpk-component-nudger/src/BpkNudger.tsx | 4 +- .../src/NavButton.js | 2 +- .../src/BpkPaginationList.js | 2 +- .../src/BpkPaginationNudger.js | 2 +- .../src/BpkPhoneInput.js | 2 +- .../bpk-component-popover/src/BpkPopover.js | 4 +- .../src/BpkPopoverPortal.js | 2 +- .../src/keyboardFocusScope.js | 2 +- packages/bpk-component-price/src/BpkPrice.js | 2 +- .../bpk-component-rating/src/BpkRating.js | 4 +- .../src/BpkScrollableCalendarGrid-test.tsx | 2 +- .../src/BpkScrollableCalendarGrid.tsx | 4 +- .../BpkScrollableCalendarGridList-test.tsx | 2 +- .../src/BpkScrollableCalendarGridList.tsx | 4 +- .../src/BpkSectionHeader.tsx | 2 +- packages/bpk-component-section-list/index.js | 2 +- .../src/BpkSectionListItem.js | 4 +- .../src/BpkSectionListSection.js | 2 +- packages/bpk-component-spinner/index.js | 4 +- .../src/BpkExtraLargeSpinner-test.js | 2 +- .../src/BpkLargeSpinner-test.js | 2 +- .../src/accessibility-test.js | 4 +- .../src/BpkInputField.js | 2 +- .../src/BpkSplitInput.js | 4 +- packages/bpk-component-star-rating/index.js | 6 +- .../src/BpkInteractiveStar-test.js | 2 +- .../src/BpkInteractiveStarRating.js | 2 +- .../bpk-component-star-rating/src/BpkStar.js | 8 +- .../src/BpkStarRating-test.js | 2 +- .../src/accessibility-test.js | 2 +- .../src/BpkSwapButton.tsx | 2 +- packages/bpk-component-table/index.js | 4 +- .../src/BpkTableRow-test.js | 6 +- .../__snapshots__/BpkTableRow-test.js.snap | 12 +- .../src/accessibility-test.js | 6 +- .../src/updateOnThemeChange.js | 2 +- packages/bpk-react-utils/index.ts | 6 +- .../bpk-scrim-utils/src/withScrim-test.tsx | 2 +- .../src/withScrimmedPortal.tsx | 2 +- .../bpk-stylesheets/webpack.config.babel.js | 2 +- .../bpk-theming/src/BpkThemeProvider-test.js | 2 +- packages/bpk-theming/src/BpkThemeProvider.js | 2 +- scripts/npm/check-bpk-dependencies.js | 2 +- scripts/transpilation/copy-utils.js | 2 +- .../transform-js-scss-css-imports.js | 2 +- scripts/webpack/postCssPlugins.js | 2 +- 240 files changed, 1731 insertions(+), 1279 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index edfdf9e871..034bb8a095 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -16,8 +16,8 @@ * limitations under the License. */ -import { Title, PRIMARY_STORY } from '@storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; +import { Title, PRIMARY_STORY } from '@storybook/blocks'; import '../packages/bpk-stylesheets'; import '../packages/bpk-stylesheets/font'; diff --git a/.storybook/themeableAttributes.js b/.storybook/themeableAttributes.js index 060290da0e..6f872af6b6 100644 --- a/.storybook/themeableAttributes.js +++ b/.storybook/themeableAttributes.js @@ -47,19 +47,19 @@ import { priceMarkerThemeAttributes, } from '../packages/bpk-component-map'; import { themeAttributes as modalThemeAttributes } from '../packages/bpk-component-modal'; +import { themeAttributes as navigationBarThemeAttributes } from '../packages/bpk-component-navigation-bar'; import { themeAttributes as nudgerThemeAttributes } from '../packages/bpk-component-nudger'; import { themeAttributes as paginationThemeAttributes } from '../packages/bpk-component-pagination'; import { themeAttributes as popoverThemeAttributes } from '../packages/bpk-component-popover'; import { themeAttributes as progressThemeAttributes } from '../packages/bpk-component-progress'; import { themeAttributes as radioThemeAttributes } from '../packages/bpk-component-radio'; import { themeAttributes as selectThemeAttributes } from '../packages/bpk-component-select'; -import { themeAttributes as sliderThemeAttributes } from '../packages/bpk-component-slider'; import { themeAttributes as skipLinkThemeAttributes } from '../packages/bpk-component-skip-link'; +import { themeAttributes as sliderThemeAttributes } from '../packages/bpk-component-slider'; import { themeAttributes as spinnerThemeAttributes } from '../packages/bpk-component-spinner'; import { themeAttributes as starRatingThemeAttributes } from '../packages/bpk-component-star-rating'; import { themeAttributes as switchThemeAttributes } from '../packages/bpk-component-switch'; import { themeAttributes as textareaThemeAttributes } from '../packages/bpk-component-textarea'; -import { themeAttributes as navigationBarThemeAttributes } from '../packages/bpk-component-navigation-bar'; const storybookAttributes = ['primaryColor', 'themeName', 'logoFillColor']; diff --git a/examples/bpk-animate-height/examples.js b/examples/bpk-animate-height/examples.js index e41fa54b5a..63d326e756 100644 --- a/examples/bpk-animate-height/examples.js +++ b/examples/bpk-animate-height/examples.js @@ -21,8 +21,8 @@ import { Component } from 'react'; import type { Node } from 'react'; -import BpkButton from '../../packages/bpk-component-button'; import AnimateHeight from '../../packages/bpk-animate-height'; +import BpkButton from '../../packages/bpk-component-button'; type Props = { fromHeight: string | number, diff --git a/examples/bpk-component-accordion/examples.js b/examples/bpk-component-accordion/examples.js index d9be27891e..c7f7f41e74 100644 --- a/examples/bpk-component-accordion/examples.js +++ b/examples/bpk-component-accordion/examples.js @@ -26,17 +26,17 @@ import { surfaceContrastDay, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import BpkCheckbox from '../../packages/bpk-component-checkbox'; -import BpkText from '../../packages/bpk-component-text'; -import { withAlignment } from '../../packages/bpk-component-icon'; -import StopsIcon from '../../packages/bpk-component-icon/sm/stops'; -import TimeIcon from '../../packages/bpk-component-icon/sm/time'; import { BpkAccordion, withSingleItemAccordionState, BpkAccordionItem, withAccordionItemState, } from '../../packages/bpk-component-accordion'; +import BpkCheckbox from '../../packages/bpk-component-checkbox'; +import { withAlignment } from '../../packages/bpk-component-icon'; +import StopsIcon from '../../packages/bpk-component-icon/sm/stops'; +import TimeIcon from '../../packages/bpk-component-icon/sm/time'; +import BpkText from '../../packages/bpk-component-text'; const SingleItemAccordion = withSingleItemAccordionState(BpkAccordion); const StatefulAccordionItem = withAccordionItemState(BpkAccordionItem); diff --git a/examples/bpk-component-accordion/stories.js b/examples/bpk-component-accordion/stories.js index fa09902f90..3d5a2e827a 100644 --- a/examples/bpk-component-accordion/stories.js +++ b/examples/bpk-component-accordion/stories.js @@ -21,7 +21,6 @@ import BpkAccordion from '../../packages/bpk-component-accordion/src/BpkAccordion'; import BpkAccordionItem from '../../packages/bpk-component-accordion/src/BpkAccordionItem'; -import { WithSingleItemAccordionStateMock, WithAccordionItemStateMock } from './stories-utils'; import { SingleItemExample, SingleItemExampleInitiallyExpandedExample, @@ -36,6 +35,7 @@ import { WithSeoContentOnDarkExample, SingleItemExampleWithoutDivider, } from './examples'; +import { WithSingleItemAccordionStateMock, WithAccordionItemStateMock } from './stories-utils'; export default { title: 'bpk-component-accordion', diff --git a/examples/bpk-component-aria-live/examples.tsx b/examples/bpk-component-aria-live/examples.tsx index 45188db806..b592641bdd 100644 --- a/examples/bpk-component-aria-live/examples.tsx +++ b/examples/bpk-component-aria-live/examples.tsx @@ -20,15 +20,15 @@ import { Component } from 'react'; import type { ReactElement } from 'react'; +import BpkAriaLive, { + ARIA_LIVE_POLITENESS_SETTINGS, +} from '../../packages/bpk-component-aria-live'; import BpkChip from '../../packages/bpk-component-chip'; +import { BpkCode } from '../../packages/bpk-component-code'; import BpkFieldset from '../../packages/bpk-component-fieldset'; import BpkSelect from '../../packages/bpk-component-select'; import BpkSwitch from '../../packages/bpk-component-switch'; import { cssModules } from '../../packages/bpk-react-utils'; -import { BpkCode } from '../../packages/bpk-component-code'; -import BpkAriaLive, { - ARIA_LIVE_POLITENESS_SETTINGS, -} from '../../packages/bpk-component-aria-live'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-aria-live/stories.tsx b/examples/bpk-component-aria-live/stories.tsx index 8d65182563..5a2f82e90f 100644 --- a/examples/bpk-component-aria-live/stories.tsx +++ b/examples/bpk-component-aria-live/stories.tsx @@ -16,8 +16,8 @@ * limitations under the License. */ -import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; +import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks'; import BpkAriaLive from '../../packages/bpk-component-aria-live/src/BpkAriaLive'; diff --git a/examples/bpk-component-autosuggest/examples.js b/examples/bpk-component-autosuggest/examples.js index 28b0682b40..50ae6983af 100644 --- a/examples/bpk-component-autosuggest/examples.js +++ b/examples/bpk-component-autosuggest/examples.js @@ -20,11 +20,11 @@ import { Component } from 'react'; -import { withRtlSupport } from '../../packages/bpk-component-icon'; -import FlightIcon from '../../packages/bpk-component-icon/lg/flight'; import BpkAutosuggest, { BpkAutosuggestSuggestion, } from '../../packages/bpk-component-autosuggest'; +import { withRtlSupport } from '../../packages/bpk-component-icon'; +import FlightIcon from '../../packages/bpk-component-icon/lg/flight'; const BpkFlightIcon = withRtlSupport(FlightIcon); diff --git a/examples/bpk-component-autosuggest/stories.js b/examples/bpk-component-autosuggest/stories.js index c7a478bd63..c8e5973d8c 100644 --- a/examples/bpk-component-autosuggest/stories.js +++ b/examples/bpk-component-autosuggest/stories.js @@ -16,8 +16,8 @@ * limitations under the License. */ -import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; +import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks'; import BpkAutosuggest from '../../packages/bpk-component-autosuggest/src/BpkAutosuggest'; import BpkAutosuggestSuggestion from '../../packages/bpk-component-autosuggest/src/BpkAutosuggestSuggestion'; diff --git a/examples/bpk-component-badge/examples.js b/examples/bpk-component-badge/examples.js index aba17a81a6..7672939735 100644 --- a/examples/bpk-component-badge/examples.js +++ b/examples/bpk-component-badge/examples.js @@ -18,11 +18,11 @@ /* @flow strict */ -import BpkSmallTickIcon from '../../packages/bpk-component-icon/sm/tick-circle'; +import BpkBadge, { BADGE_TYPES } from '../../packages/bpk-component-badge'; import BpkSmallExclamationIcon from '../../packages/bpk-component-icon/sm/exclamation'; import BpkSmallHelpCircleIcon from '../../packages/bpk-component-icon/sm/help-circle'; +import BpkSmallTickIcon from '../../packages/bpk-component-icon/sm/tick-circle'; import { BpkDarkExampleWrapper } from '../bpk-storybook-utils'; -import BpkBadge, { BADGE_TYPES } from '../../packages/bpk-component-badge'; import BadgeLayout from './BadgeLayout'; diff --git a/examples/bpk-component-banner-alert/examples.js b/examples/bpk-component-banner-alert/examples.js index 0b15cd66c6..35ba6b8bf9 100644 --- a/examples/bpk-component-banner-alert/examples.js +++ b/examples/bpk-component-banner-alert/examples.js @@ -21,17 +21,17 @@ import { Component } from 'react'; import { fontWeightBold } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { action } from '../bpk-storybook-utils'; -import CurrencyIcon from '../../packages/bpk-component-icon/sm/currency'; -import { AriaLiveDemo } from '../bpk-component-aria-live/examples'; -import { BpkButtonPrimary } from '../../packages/bpk-component-button'; -import { cssModules } from '../../packages/bpk-react-utils'; import BpkBannerAlert, { ALERT_TYPES, withBannerAlertState, BpkBannerAlertDismissable, BpkBannerAlertExpandable, } from '../../packages/bpk-component-banner-alert'; +import { BpkButtonPrimary } from '../../packages/bpk-component-button'; +import CurrencyIcon from '../../packages/bpk-component-icon/sm/currency'; +import { cssModules } from '../../packages/bpk-react-utils'; +import { AriaLiveDemo } from '../bpk-component-aria-live/examples'; +import { action } from '../bpk-storybook-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-banner-alert/stories.js b/examples/bpk-component-banner-alert/stories.js index 1d820c8d2b..bcaafa464d 100644 --- a/examples/bpk-component-banner-alert/stories.js +++ b/examples/bpk-component-banner-alert/stories.js @@ -20,7 +20,6 @@ import BpkBannerAlert from '../../packages/bpk-component-banner-alert/src/BpkBan import BpkBannerAlertDismissable from '../../packages/bpk-component-banner-alert/src/BpkBannerAlertDismissable'; import BpkBannerAlertExpandable from '../../packages/bpk-component-banner-alert/src/BpkBannerAlertExpandable'; -import { withBannerAlertStateMock } from './stories-utils'; import { NeutralExample, PrimaryExample, @@ -38,6 +37,7 @@ import { SuccessCustomIconExample, DocsDefaultExample, } from './examples'; +import { withBannerAlertStateMock } from './stories-utils'; export default { title: 'bpk-component-banner-alert', diff --git a/examples/bpk-component-barchart/examples.js b/examples/bpk-component-barchart/examples.js index 57bfdfbe19..896aeee9d3 100644 --- a/examples/bpk-component-barchart/examples.js +++ b/examples/bpk-component-barchart/examples.js @@ -24,19 +24,19 @@ import { scaleLinear, scaleBand } from 'd3-scale'; import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; -import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; -import { updateOnDirectionChange } from '../../packages/bpk-component-rtl-toggle'; -import { remToPx } from '../../packages/bpk-component-barchart/src/utils'; -import { - ORIENTATION_X, - ORIENTATION_Y, -} from '../../packages/bpk-component-barchart/src/orientation'; import BpkBarchart, { BpkChartGridLines, BpkChartAxis, BpkChartMargin, } from '../../packages/bpk-component-barchart'; +import { + ORIENTATION_X, + ORIENTATION_Y, +} from '../../packages/bpk-component-barchart/src/orientation'; +import { remToPx } from '../../packages/bpk-component-barchart/src/utils'; +import { updateOnDirectionChange } from '../../packages/bpk-component-rtl-toggle'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; import { withSelectedState } from './hocs'; @@ -57,8 +57,8 @@ const data = require('./data.json'); const margin = { top: 0, - left: 40, // eslint-disable-line backpack/use-tokens - bottom: 40, // eslint-disable-line backpack/use-tokens + left: 40, + bottom: 40, right: 0, }; diff --git a/examples/bpk-component-bottom-sheet/examples.tsx b/examples/bpk-component-bottom-sheet/examples.tsx index 5efb2a8b56..94014bc27f 100644 --- a/examples/bpk-component-bottom-sheet/examples.tsx +++ b/examples/bpk-component-bottom-sheet/examples.tsx @@ -19,11 +19,11 @@ import { Component, Children } from 'react'; import type { ReactNode } from 'react'; -import { action } from '../bpk-storybook-utils'; -import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; +import BpkBottomSheet from '../../packages/bpk-component-bottom-sheet'; import BpkButton from '../../packages/bpk-component-button'; import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; -import BpkBottomSheet from '../../packages/bpk-component-bottom-sheet'; +import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; +import { action } from '../bpk-storybook-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-breakpoint/examples.js b/examples/bpk-component-breakpoint/examples.js index f15690bc6b..4b5762e80a 100644 --- a/examples/bpk-component-breakpoint/examples.js +++ b/examples/bpk-component-breakpoint/examples.js @@ -20,10 +20,10 @@ import type { Node } from 'react'; -import { cssModules } from '../../packages/bpk-react-utils'; import BpkBreakpoint, { BREAKPOINTS, } from '../../packages/bpk-component-breakpoint'; +import { cssModules } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-button/examples.js b/examples/bpk-component-button/examples.js index 05d4a5a9dc..2d7f5f3afc 100644 --- a/examples/bpk-component-button/examples.js +++ b/examples/bpk-component-button/examples.js @@ -16,22 +16,22 @@ * limitations under the License. */ +import { BpkButtonV2 } from '../../packages/bpk-component-button'; import { - action, - BpkDarkExampleWrapper, -} from '../bpk-storybook-utils'; + BUTTON_TYPES, + SIZE_TYPES, +} from '../../packages/bpk-component-button/src/BpkButtonV2/common-types'; import { withButtonAlignment, withLargeButtonAlignment, withRtlSupport, } from '../../packages/bpk-component-icon'; -import SmallLongArrowRightIcon from '../../packages/bpk-component-icon/sm/long-arrow-right'; import LargeLongArrowRightIcon from '../../packages/bpk-component-icon/lg/long-arrow-right'; -import { BpkButtonV2 } from '../../packages/bpk-component-button'; +import SmallLongArrowRightIcon from '../../packages/bpk-component-icon/sm/long-arrow-right'; import { - BUTTON_TYPES, - SIZE_TYPES, -} from '../../packages/bpk-component-button/src/BpkButtonV2/common-types'; + action, + BpkDarkExampleWrapper, +} from '../bpk-storybook-utils'; import STYLES from './BpkButtonStory.module.scss'; diff --git a/examples/bpk-component-calendar/examples-components.js b/examples/bpk-component-calendar/examples-components.js index 00f13106c3..b646b6df2c 100644 --- a/examples/bpk-component-calendar/examples-components.js +++ b/examples/bpk-component-calendar/examples-components.js @@ -18,8 +18,8 @@ /* eslint-disable react/prop-types */ -import { Component } from 'react'; import PropTypes from 'prop-types'; +import { Component } from 'react'; import { addMonths } from 'date-fns/addMonths'; @@ -32,13 +32,6 @@ import { } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import BpkButton from '../../packages/bpk-component-button'; -import { action } from '../bpk-storybook-utils'; -import { - withButtonAlignment, - withRtlSupport, -} from '../../packages/bpk-component-icon'; -import SmallLongArrowRightIcon from '../../packages/bpk-component-icon/sm/long-arrow-right'; -import SmallLongArrowLeftIcon from '../../packages/bpk-component-icon/sm/long-arrow-left'; import BpkCalendar, { BpkCalendarGrid, BpkCalendarGridHeader, @@ -52,6 +45,13 @@ import { startOfDay, addDays, } from '../../packages/bpk-component-calendar/src/date-utils'; +import { + withButtonAlignment, + withRtlSupport, +} from '../../packages/bpk-component-icon'; +import SmallLongArrowLeftIcon from '../../packages/bpk-component-icon/sm/long-arrow-left'; +import SmallLongArrowRightIcon from '../../packages/bpk-component-icon/sm/long-arrow-right'; +import { action } from '../bpk-storybook-utils'; import { formatMonth, formatDateFull, weekDays } from './test-utils'; diff --git a/examples/bpk-component-calendar/examples.js b/examples/bpk-component-calendar/examples.js index d609279fc3..fca164294b 100644 --- a/examples/bpk-component-calendar/examples.js +++ b/examples/bpk-component-calendar/examples.js @@ -18,8 +18,6 @@ import { addMonths } from 'date-fns/addMonths'; import { startOfDay } from 'date-fns/startOfDay'; -import { action } from '../bpk-storybook-utils'; -import BpkText from '../../packages/bpk-component-text'; import { BpkCalendarGrid, BpkCalendarGridHeader, @@ -28,7 +26,10 @@ import { } from '../../packages/bpk-component-calendar'; import Week from '../../packages/bpk-component-calendar/src/Week'; import { CALENDAR_SELECTION_TYPE } from '../../packages/bpk-component-calendar/src/custom-proptypes'; +import BpkText from '../../packages/bpk-component-text'; +import { action } from '../bpk-storybook-utils'; +import CalendarContainer, { MonthViewCalendar } from './examples-components'; import { formatMonth, formatDateFull, @@ -41,7 +42,6 @@ import { weekDaysJapanese, weekDays, } from './test-utils'; -import CalendarContainer, { MonthViewCalendar } from './examples-components'; /* eslint-disable-next-line react/prop-types */ const DummyDateComponent = ({ date }) =>
    {date.toString()}
    ; diff --git a/examples/bpk-component-calendar/stories-utils.tsx b/examples/bpk-component-calendar/stories-utils.tsx index 1a27c1f475..e2414d84ab 100644 --- a/examples/bpk-component-calendar/stories-utils.tsx +++ b/examples/bpk-component-calendar/stories-utils.tsx @@ -23,8 +23,8 @@ * @todo remove this file once we upgrade to Storybook v8 */ -import type { Props as composeProps } from '../../packages/bpk-component-calendar/src/composeCalendar'; import type { Props as bpkCalendarContainerProps } from '../../packages/bpk-component-calendar/src/BpkCalendarContainer'; +import type { Props as composeProps } from '../../packages/bpk-component-calendar/src/composeCalendar'; const BpkCalendarContainerMock = (props: composeProps & bpkCalendarContainerProps) =>
    ; diff --git a/examples/bpk-component-calendar/stories.js b/examples/bpk-component-calendar/stories.js index fc4b2f828a..d4f67e8086 100644 --- a/examples/bpk-component-calendar/stories.js +++ b/examples/bpk-component-calendar/stories.js @@ -16,12 +16,11 @@ * limitations under the License. */ -import BpkCalendarGridHeaderComponent from '../../packages/bpk-component-calendar/src/BpkCalendarGridHeader'; +import BpkCalendarDateComponent from '../../packages/bpk-component-calendar/src/BpkCalendarDate'; import BpkCalendarGridComponent from '../../packages/bpk-component-calendar/src/BpkCalendarGrid'; +import BpkCalendarGridHeaderComponent from '../../packages/bpk-component-calendar/src/BpkCalendarGridHeader'; import BpkCalendarNavComponent from '../../packages/bpk-component-calendar/src/BpkCalendarNav'; -import BpkCalendarDateComponent from '../../packages/bpk-component-calendar/src/BpkCalendarDate'; -import { BpkCalendarContainerMock } from './stories-utils'; import { DefaultExample, CalendarNavExample, @@ -43,6 +42,7 @@ import { FocusedDateInThePastExample, RangeDateCalendarExample, } from './examples'; +import { BpkCalendarContainerMock } from './stories-utils'; export default { title: 'bpk-component-calendar', diff --git a/examples/bpk-component-card/examples.js b/examples/bpk-component-card/examples.js index 68c1b5c55a..36ee1ccabc 100644 --- a/examples/bpk-component-card/examples.js +++ b/examples/bpk-component-card/examples.js @@ -24,13 +24,13 @@ import { surfaceHighlightDay, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { cssModules } from '../../packages/bpk-react-utils'; -import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkCard, { BpkDividedCard, BpkCardWrapper, ORIENTATION, } from '../../packages/bpk-component-card'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import { cssModules } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; @@ -110,7 +110,7 @@ const DefaultDividedCardExample = () => ( ); const VerticalDividedCardExample = () => ( - // eslint-disable-next-line backpack/use-tokens +
    ( ); const NonElevatedDividedCardExample = () => ( - // eslint-disable-next-line backpack/use-tokens +
    ( diff --git a/examples/bpk-component-datepicker/examples.js b/examples/bpk-component-datepicker/examples.js index 0ac8af4383..6391c0e939 100644 --- a/examples/bpk-component-datepicker/examples.js +++ b/examples/bpk-component-datepicker/examples.js @@ -16,8 +16,8 @@ * limitations under the License. */ -import { Component, createRef } from 'react'; import PropTypes from 'prop-types'; +import { Component, createRef } from 'react'; import { memoize } from 'lodash'; @@ -28,20 +28,6 @@ import { colorSkyGray, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { cssModules } from '../../packages/bpk-react-utils'; -import { action } from '../bpk-storybook-utils'; -import { - weekDays, - formatMonth, - formatDateFull, -} from '../../packages/bpk-component-calendar/test-utils'; -import { - format, - dateToBoundaries, - addMonths, - addDays, - startOfDay, -} from '../../packages/bpk-component-calendar/src/date-utils'; import { BpkCalendarNav, BpkCalendarGridHeader, @@ -52,8 +38,22 @@ import { CALENDAR_SELECTION_TYPE, BpkCalendarGrid, } from '../../packages/bpk-component-calendar'; -import BpkInput, { withOpenEvents } from '../../packages/bpk-component-input'; +import { + format, + dateToBoundaries, + addMonths, + addDays, + startOfDay, +} from '../../packages/bpk-component-calendar/src/date-utils'; +import { + weekDays, + formatMonth, + formatDateFull, +} from '../../packages/bpk-component-calendar/test-utils'; import BpkDatepicker from '../../packages/bpk-component-datepicker'; +import BpkInput, { withOpenEvents } from '../../packages/bpk-component-input'; +import { cssModules } from '../../packages/bpk-react-utils'; +import { action } from '../bpk-storybook-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-description-list/stories.js b/examples/bpk-component-description-list/stories.js index 86c115f7ee..71d6e9d754 100644 --- a/examples/bpk-component-description-list/stories.js +++ b/examples/bpk-component-description-list/stories.js @@ -16,8 +16,8 @@ * limitations under the License. */ -import { BpkDescriptionList, BpkDescriptionDetailsMock, BpkDescriptionTermMock } from './stories-utils'; import DefaultExample from './examples'; +import { BpkDescriptionList, BpkDescriptionDetailsMock, BpkDescriptionTermMock } from './stories-utils'; export default { title: 'bpk-component-description-list', diff --git a/examples/bpk-component-dialog/examples.js b/examples/bpk-component-dialog/examples.js index 9a4269d17b..4f04fdd75e 100644 --- a/examples/bpk-component-dialog/examples.js +++ b/examples/bpk-component-dialog/examples.js @@ -22,15 +22,15 @@ import PropTypes from 'prop-types'; import { Component } from 'react'; import type { Node } from 'react'; -import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkButton from '../../packages/bpk-component-button'; -import TickIcon from '../../packages/bpk-component-icon/lg/tick'; -import InfoIcon from '../../packages/bpk-component-icon/lg/information-circle'; -import TrashIcon from '../../packages/bpk-component-icon/lg/trash'; -import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; import BpkDialog, { HEADER_ICON_TYPES, } from '../../packages/bpk-component-dialog'; +import InfoIcon from '../../packages/bpk-component-icon/lg/information-circle'; +import TickIcon from '../../packages/bpk-component-icon/lg/tick'; +import TrashIcon from '../../packages/bpk-component-icon/lg/trash'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-drawer/examples.js b/examples/bpk-component-drawer/examples.js index 72431e7453..0d0f6b47fa 100644 --- a/examples/bpk-component-drawer/examples.js +++ b/examples/bpk-component-drawer/examples.js @@ -21,10 +21,10 @@ import PropTypes from 'prop-types'; import { Component } from 'react'; -import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; import BpkButton from '../../packages/bpk-component-button'; -import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkDrawer from '../../packages/bpk-component-drawer'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-fieldset/examples.js b/examples/bpk-component-fieldset/examples.js index cb24ec7e7b..1e7d42eb35 100644 --- a/examples/bpk-component-fieldset/examples.js +++ b/examples/bpk-component-fieldset/examples.js @@ -20,29 +20,29 @@ import PropTypes from 'prop-types'; import { cloneElement, Component } from 'react'; -import { action } from '../bpk-storybook-utils'; -import BpkSelect from '../../packages/bpk-component-select'; -import BpkCheckbox from '../../packages/bpk-component-checkbox'; -import BpkInput, { INPUT_TYPES } from '../../packages/bpk-component-input'; -import BpkButton from '../../packages/bpk-component-button'; -import BpkDatepicker from '../../packages/bpk-component-datepicker'; -import BpkSplitInput from '../../packages/bpk-component-split-input'; -import BpkTextarea from '../../packages/bpk-component-textarea'; import BpkAutosuggest, { BpkAutosuggestSuggestion, } from '../../packages/bpk-component-autosuggest'; +import BpkButton from '../../packages/bpk-component-button'; +import { format } from '../../packages/bpk-component-calendar/src/date-utils'; import { weekDays, formatMonth, formatDateFull, } from '../../packages/bpk-component-calendar/test-utils'; -import { format } from '../../packages/bpk-component-calendar/src/date-utils'; -import { cssModules } from '../../packages/bpk-react-utils'; +import BpkCheckbox from '../../packages/bpk-component-checkbox'; +import BpkDatepicker from '../../packages/bpk-component-datepicker'; import BpkFieldset, { type BpkFieldsetProps, propTypes, defaultProps, } from '../../packages/bpk-component-fieldset'; +import BpkInput, { INPUT_TYPES } from '../../packages/bpk-component-input'; +import BpkSelect from '../../packages/bpk-component-select'; +import BpkSplitInput from '../../packages/bpk-component-split-input'; +import BpkTextarea from '../../packages/bpk-component-textarea'; +import { cssModules } from '../../packages/bpk-react-utils'; +import { action } from '../bpk-storybook-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-flare/examples.js b/examples/bpk-component-flare/examples.js index 67786c1bb7..ff7b3cc495 100644 --- a/examples/bpk-component-flare/examples.js +++ b/examples/bpk-component-flare/examples.js @@ -18,12 +18,12 @@ /* @flow strict */ -import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; -import { cssModules } from '../../packages/bpk-react-utils'; import { BpkFlareBar, BpkContentBubble, } from '../../packages/bpk-component-flare'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import { cssModules } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-floating-notification/examples.js b/examples/bpk-component-floating-notification/examples.js index 8b58fd76ea..ffe33f1617 100644 --- a/examples/bpk-component-floating-notification/examples.js +++ b/examples/bpk-component-floating-notification/examples.js @@ -18,10 +18,10 @@ import { cloneElement, useState, Node } from 'react'; +import BpkButton from '../../packages/bpk-component-button'; import BpkFloatingNotification from '../../packages/bpk-component-floating-notification'; import BpkIconHeart from '../../packages/bpk-component-icon/sm/heart'; import BpkIconInformationCircle from '../../packages/bpk-component-icon/sm/information-circle'; -import BpkButton from '../../packages/bpk-component-button'; type Props = { children: Node, diff --git a/examples/bpk-component-form-validation/examples.js b/examples/bpk-component-form-validation/examples.js index 5ca995ad1e..df0b033326 100644 --- a/examples/bpk-component-form-validation/examples.js +++ b/examples/bpk-component-form-validation/examples.js @@ -20,12 +20,12 @@ import PropTypes from 'prop-types'; import { Component } from 'react'; import BpkButton from '../../packages/bpk-component-button'; -import BpkSelect from '../../packages/bpk-component-select'; import BpkCheckbox from '../../packages/bpk-component-checkbox'; -import BpkTextarea from '../../packages/bpk-component-textarea'; +import BpkFormValidation from '../../packages/bpk-component-form-validation'; import BpkInput from '../../packages/bpk-component-input'; +import BpkSelect from '../../packages/bpk-component-select'; +import BpkTextarea from '../../packages/bpk-component-textarea'; import { cssModules } from '../../packages/bpk-react-utils'; -import BpkFormValidation from '../../packages/bpk-component-form-validation'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-horizontal-nav/examples.js b/examples/bpk-component-horizontal-nav/examples.js index 538b345af5..0e41b5dc81 100644 --- a/examples/bpk-component-horizontal-nav/examples.js +++ b/examples/bpk-component-horizontal-nav/examples.js @@ -23,13 +23,13 @@ import { colorSkyGrayTint06, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { cssModules } from '../../packages/bpk-react-utils'; -import BpkText from '../../packages/bpk-component-text'; -import { BpkDarkExampleWrapper } from '../bpk-storybook-utils'; import BpkHorizontalNav, { BpkHorizontalNavItem, HORIZONTAL_NAV_TYPES, } from '../../packages/bpk-component-horizontal-nav'; +import BpkText from '../../packages/bpk-component-text'; +import { cssModules } from '../../packages/bpk-react-utils'; +import { BpkDarkExampleWrapper } from '../bpk-storybook-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-icon/examples.js b/examples/bpk-component-icon/examples.js index 7eaad34e7c..9f503a1ff6 100644 --- a/examples/bpk-component-icon/examples.js +++ b/examples/bpk-component-icon/examples.js @@ -25,8 +25,6 @@ import { } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import BpkButton from '../../packages/bpk-component-button'; -import { BpkList, BpkListItem } from '../../packages/bpk-component-list'; -import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import { withAlignment, withButtonAlignment, @@ -34,9 +32,11 @@ import { withRtlSupport, } from '../../packages/bpk-component-icon'; import { sm, lg } from '../../packages/bpk-component-icon/all'; +import LargeLongArrowRightIcon from '../../packages/bpk-component-icon/lg/long-arrow-right'; import SearchIcon from '../../packages/bpk-component-icon/lg/search'; import SmallLongArrowRightIcon from '../../packages/bpk-component-icon/sm/long-arrow-right'; -import LargeLongArrowRightIcon from '../../packages/bpk-component-icon/lg/long-arrow-right'; +import { BpkList, BpkListItem } from '../../packages/bpk-component-list'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; const AlignedBaseArrow = withAlignment( SmallLongArrowRightIcon, diff --git a/examples/bpk-component-image/examples.js b/examples/bpk-component-image/examples.js index df15b9f764..eb3b5b2f36 100644 --- a/examples/bpk-component-image/examples.js +++ b/examples/bpk-component-image/examples.js @@ -16,14 +16,14 @@ * limitations under the License. */ -import BpkMobileScrollContainer from '../../packages/bpk-component-mobile-scroll-container'; -import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkImage, { BpkBackgroundImage, withLazyLoading, withLoadingBehavior, BORDER_RADIUS_STYLES, } from '../../packages/bpk-component-image'; +import BpkMobileScrollContainer from '../../packages/bpk-component-mobile-scroll-container'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; const image = 'https://content.skyscnr.com/96508dbac15a2895b0147dc7e7f9ad30/canadian-rockies-canada.jpg'; diff --git a/examples/bpk-component-image/stories.js b/examples/bpk-component-image/stories.js index ce75cd6b97..b83a5accc2 100644 --- a/examples/bpk-component-image/stories.js +++ b/examples/bpk-component-image/stories.js @@ -16,11 +16,11 @@ * limitations under the License. */ -import { Title, PRIMARY_STORY, Markdown } from '@storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; +import { Title, PRIMARY_STORY, Markdown } from '@storybook/blocks'; -import BpkImage from '../../packages/bpk-component-image/src/BpkImage'; import BpkBackgroundImage from '../../packages/bpk-component-image/src/BpkBackgroundImage'; +import BpkImage from '../../packages/bpk-component-image/src/BpkImage'; import { DefaultExample, diff --git a/examples/bpk-component-infinite-scroll/examples.js b/examples/bpk-component-infinite-scroll/examples.js index e37605baf8..9ef7ac1b1b 100644 --- a/examples/bpk-component-infinite-scroll/examples.js +++ b/examples/bpk-component-infinite-scroll/examples.js @@ -20,18 +20,18 @@ import PropTypes from 'prop-types'; -import { action } from '../bpk-storybook-utils'; import BpkButton from '../../packages/bpk-component-button'; +import withInfiniteScroll, { + ArrayDataSource, + DataSource, +} from '../../packages/bpk-component-infinite-scroll'; import { BpkList, BpkListItem } from '../../packages/bpk-component-list'; import { BpkSpinner, SPINNER_TYPES, } from '../../packages/bpk-component-spinner'; import { cssModules } from '../../packages/bpk-react-utils'; -import withInfiniteScroll, { - ArrayDataSource, - DataSource, -} from '../../packages/bpk-component-infinite-scroll'; +import { action } from '../bpk-storybook-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-infinite-scroll/stories.js b/examples/bpk-component-infinite-scroll/stories.js index a0b156f326..37c628fb66 100644 --- a/examples/bpk-component-infinite-scroll/stories.js +++ b/examples/bpk-component-infinite-scroll/stories.js @@ -17,7 +17,6 @@ */ -import { WithInfiniteScrollMock as withInfiniteScroll } from './stories-utils'; import { DefaultExample, StoppingAfterScrollsExample, @@ -30,6 +29,7 @@ import { ForceUpdateDataExampleFromNonEmptyToEmptyExample, InferDatasourceWhenLessThanRequestElementsExample, } from './examples'; +import { WithInfiniteScrollMock as withInfiniteScroll } from './stories-utils'; /* * Scrolls back to the top before rendering the story. diff --git a/examples/bpk-component-info-banner/examples.js b/examples/bpk-component-info-banner/examples.js index 37084828b5..29ef7b3eff 100644 --- a/examples/bpk-component-info-banner/examples.js +++ b/examples/bpk-component-info-banner/examples.js @@ -24,11 +24,8 @@ import { fontWeightBold, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { action } from '../bpk-storybook-utils'; -import CurrencyIcon from '../../packages/bpk-component-icon/sm/currency'; -import { AriaLiveDemo } from '../bpk-component-aria-live/examples'; import { BpkButtonPrimary } from '../../packages/bpk-component-button'; -import { cssModules } from '../../packages/bpk-react-utils'; +import CurrencyIcon from '../../packages/bpk-component-icon/sm/currency'; import BpkInfoBanner, { ALERT_TYPES, BpkInfoBannerExpandable, @@ -36,6 +33,9 @@ import BpkInfoBanner, { withBannerAlertState, BpkInfoBannerDismissable } from '../../packages/bpk-component-info-banner'; import BpkText from '../../packages/bpk-component-text'; +import { cssModules } from '../../packages/bpk-react-utils'; +import { AriaLiveDemo } from '../bpk-component-aria-live/examples'; +import { action } from '../bpk-storybook-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-info-banner/stories.js b/examples/bpk-component-info-banner/stories.js index 5d779a1c2b..79ee41dae1 100644 --- a/examples/bpk-component-info-banner/stories.js +++ b/examples/bpk-component-info-banner/stories.js @@ -20,7 +20,6 @@ import BpkInfoBanner from '../../packages/bpk-component-info-banner/src/BpkInfoB import BpkInfoBannerDismissable from '../../packages/bpk-component-info-banner/src/BpkInfoBannerDismissable'; import BpkInfoBannerExpandable from '../../packages/bpk-component-info-banner/src/BpkInfoBannerExpandable'; -import { withBannerAlertStateMock } from './stories-utils'; import { DefaultExample, InfoExample, @@ -40,6 +39,7 @@ import { DocsDefaultExample, OnContrastExample, } from './examples'; +import { withBannerAlertStateMock } from './stories-utils'; export default { title: 'bpk-component-info-banner', diff --git a/examples/bpk-component-input/examples.js b/examples/bpk-component-input/examples.js index df6926c718..b1a1567ce8 100644 --- a/examples/bpk-component-input/examples.js +++ b/examples/bpk-component-input/examples.js @@ -16,12 +16,9 @@ * limitations under the License. */ -import { Component } from 'react'; import PropTypes from 'prop-types'; +import { Component } from 'react'; -import { cssModules } from '../../packages/bpk-react-utils'; -import { action } from '../bpk-storybook-utils'; -import BpkLabel from '../../packages/bpk-component-label'; import BpkBannerAlert, { ALERT_TYPES, } from '../../packages/bpk-component-banner-alert'; @@ -31,6 +28,9 @@ import BpkInput, { INPUT_TYPES, CLEAR_BUTTON_MODES, } from '../../packages/bpk-component-input'; +import BpkLabel from '../../packages/bpk-component-label'; +import { cssModules } from '../../packages/bpk-react-utils'; +import { action } from '../bpk-storybook-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-input/stories.js b/examples/bpk-component-input/stories.js index b7590b418d..4df6cd70f1 100644 --- a/examples/bpk-component-input/stories.js +++ b/examples/bpk-component-input/stories.js @@ -16,12 +16,11 @@ * limitations under the License. */ -import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; +import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks'; import BpkInput from '../../packages/bpk-component-input/src/BpkInput'; -import { WithOpenEventsMock } from './stories-utils'; import { TextExample, PlaceholderExample, @@ -38,6 +37,7 @@ import { ManuallyDockedExample, MixedExample, } from './examples'; +import { WithOpenEventsMock } from './stories-utils'; export default { title: 'bpk-component-input', diff --git a/examples/bpk-component-label/examples.js b/examples/bpk-component-label/examples.js index d30b481aa8..f330e0bf44 100644 --- a/examples/bpk-component-label/examples.js +++ b/examples/bpk-component-label/examples.js @@ -17,8 +17,8 @@ */ /* @flow strict */ -import { BpkDarkExampleWrapper } from '../bpk-storybook-utils'; import BpkLabel from '../../packages/bpk-component-label'; +import { BpkDarkExampleWrapper } from '../bpk-storybook-utils'; const DefaultExample = () => Origin; diff --git a/examples/bpk-component-link/examples.js b/examples/bpk-component-link/examples.js index 09166db4b9..02f5fcb86a 100644 --- a/examples/bpk-component-link/examples.js +++ b/examples/bpk-component-link/examples.js @@ -23,11 +23,11 @@ import { colorSkyGrayTint04, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; +import BpkLink, { BpkButtonLink } from '../../packages/bpk-component-link'; import { action, BpkDarkExampleWrapper, } from '../bpk-storybook-utils'; -import BpkLink, { BpkButtonLink } from '../../packages/bpk-component-link'; const LinkExample = () => (
    diff --git a/examples/bpk-component-link/stories.js b/examples/bpk-component-link/stories.js index dbad5522dd..c6035627d2 100644 --- a/examples/bpk-component-link/stories.js +++ b/examples/bpk-component-link/stories.js @@ -17,8 +17,8 @@ */ -import BpkLink from '../../packages/bpk-component-link/src/BpkLink'; import BpkButtonLink from '../../packages/bpk-component-link/src/BpkButtonLink'; +import BpkLink from '../../packages/bpk-component-link/src/BpkLink'; import { LinkExample, diff --git a/examples/bpk-component-loading-button/examples.js b/examples/bpk-component-loading-button/examples.js index 0167251458..982f102bbe 100644 --- a/examples/bpk-component-loading-button/examples.js +++ b/examples/bpk-component-loading-button/examples.js @@ -20,21 +20,21 @@ import { Component } from 'react'; -import { - action, - BpkDarkExampleWrapper, -} from '../bpk-storybook-utils'; import { withButtonAlignment, withLargeButtonAlignment, withRtlSupport, } from '../../packages/bpk-component-icon'; -import BaggageIconSm from '../../packages/bpk-component-icon/sm/baggage'; import BaggageIconLg from '../../packages/bpk-component-icon/lg/baggage'; -import { cssModules } from '../../packages/bpk-react-utils'; +import BaggageIconSm from '../../packages/bpk-component-icon/sm/baggage'; import BpkLoadingButton, { ICON_POSITION, } from '../../packages/bpk-component-loading-button'; +import { cssModules } from '../../packages/bpk-react-utils'; +import { + action, + BpkDarkExampleWrapper, +} from '../bpk-storybook-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-map/examples.js b/examples/bpk-component-map/examples.js index 17b9ff3564..0575410c4f 100644 --- a/examples/bpk-component-map/examples.js +++ b/examples/bpk-component-map/examples.js @@ -17,17 +17,15 @@ */ /* @flow strict */ -import { Component } from 'react'; -import type { Node } from 'react'; import PropTypes from 'prop-types'; +import type { Node } from 'react'; +import { Component } from 'react'; -import { action } from '../bpk-storybook-utils'; -import BpkText from '../../packages/bpk-component-text'; import { withRtlSupport } from '../../packages/bpk-component-icon'; -import LandmarkIconSm from '../../packages/bpk-component-icon/sm/landmark'; import AirportsIconSm from '../../packages/bpk-component-icon/sm/airports'; import FoodIconSm from '../../packages/bpk-component-icon/sm/food'; import HotelIconSm from '../../packages/bpk-component-icon/sm/hotels'; +import LandmarkIconSm from '../../packages/bpk-component-icon/sm/landmark'; import BpkMap, { BpkOverlayView, BpkIconMarker, @@ -37,6 +35,8 @@ import BpkMap, { MARKER_STATUSES, withGoogleMapsScript, } from '../../packages/bpk-component-map'; +import BpkText from '../../packages/bpk-component-text'; +import { action } from '../bpk-storybook-utils'; const BpkMapWithLoading = withGoogleMapsScript(BpkMap); diff --git a/examples/bpk-component-map/stories.js b/examples/bpk-component-map/stories.js index 2aa2c079b3..72bada8f20 100644 --- a/examples/bpk-component-map/stories.js +++ b/examples/bpk-component-map/stories.js @@ -16,13 +16,12 @@ * limitations under the License. */ -import BpkMap from '../../packages/bpk-component-map/src/BpkMap'; import BpkIconMarker from '../../packages/bpk-component-map/src/BpkIconMarker'; -import { BpkPriceMarkerV2 } from '../../packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker'; -import BpkPriceMarker from '../../packages/bpk-component-map/src/BpkPriceMarker'; +import BpkMap from '../../packages/bpk-component-map/src/BpkMap'; import BpkOverlayView from '../../packages/bpk-component-map/src/BpkOverlayView'; +import BpkPriceMarker from '../../packages/bpk-component-map/src/BpkPriceMarker'; +import { BpkPriceMarkerV2 } from '../../packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker'; -import WithGoogleMapsScriptMock from './stories-utils'; import { SimpleExample, DragDisabledAndHiddenControlsExample, @@ -37,6 +36,7 @@ import { WithIconPriceMarkersV2Example, MultipleMapsExample, } from './examples'; +import WithGoogleMapsScriptMock from './stories-utils'; export default { title: 'bpk-component-map', diff --git a/examples/bpk-component-mobile-scroll-container/examples.js b/examples/bpk-component-mobile-scroll-container/examples.js index c0895c367e..9b2beaef54 100644 --- a/examples/bpk-component-mobile-scroll-container/examples.js +++ b/examples/bpk-component-mobile-scroll-container/examples.js @@ -18,8 +18,8 @@ /* @flow strict */ -import { cssModules } from '../../packages/bpk-react-utils'; import BpkMobileScrollContainer from '../../packages/bpk-component-mobile-scroll-container'; +import { cssModules } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-modal-v2/examples.tsx b/examples/bpk-component-modal-v2/examples.tsx index 654747f850..bd518f01d1 100644 --- a/examples/bpk-component-modal-v2/examples.tsx +++ b/examples/bpk-component-modal-v2/examples.tsx @@ -20,10 +20,10 @@ import PropTypes from 'prop-types'; import type { ReactNode } from 'react'; import { Component, Children } from 'react'; -import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkButton from '../../packages/bpk-component-button'; -import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; import { BpkModalV2, MODAL_STYLING } from '../../packages/bpk-component-modal'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-modal/examples.js b/examples/bpk-component-modal/examples.js index 3a19f51385..7b42c535d0 100644 --- a/examples/bpk-component-modal/examples.js +++ b/examples/bpk-component-modal/examples.js @@ -27,16 +27,16 @@ import { iconSizeSm, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; import BpkButton from '../../packages/bpk-component-button'; -import { BpkNavigationBarButtonLink } from '../../packages/bpk-component-navigation-bar'; import { withAlignment, withRtlSupport, } from '../../packages/bpk-component-icon'; import ArrowIcon from '../../packages/bpk-component-icon/sm/long-arrow-left'; -import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkModal, { MODAL_STYLING } from '../../packages/bpk-component-modal'; +import { BpkNavigationBarButtonLink } from '../../packages/bpk-component-navigation-bar'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-navigation-bar/examples.js b/examples/bpk-component-navigation-bar/examples.js index f7af64ca36..cb4b72565d 100644 --- a/examples/bpk-component-navigation-bar/examples.js +++ b/examples/bpk-component-navigation-bar/examples.js @@ -18,16 +18,16 @@ /* @flow strict */ -import { action } from '../bpk-storybook-utils'; import { withRtlSupport } from '../../packages/bpk-component-icon'; -import ArrowIcon from '../../packages/bpk-component-icon/sm/long-arrow-left'; import CloseIcon from '../../packages/bpk-component-icon/sm/close'; -import { cssModules } from '../../packages/bpk-react-utils'; +import ArrowIcon from '../../packages/bpk-component-icon/sm/long-arrow-left'; import BpkNavigationBar, { BpkNavigationBarButtonLink, BpkNavigationBarIconButton, BAR_STYLES, } from '../../packages/bpk-component-navigation-bar'; +import { cssModules } from '../../packages/bpk-react-utils'; +import { action } from '../bpk-storybook-utils'; import AirlineLogo from './AirlineLogo'; diff --git a/examples/bpk-component-navigation-bar/stories.js b/examples/bpk-component-navigation-bar/stories.js index b57f5af87a..857be19cde 100644 --- a/examples/bpk-component-navigation-bar/stories.js +++ b/examples/bpk-component-navigation-bar/stories.js @@ -18,8 +18,8 @@ import BpkNavigationBar from '../../packages/bpk-component-navigation-bar/src/BpkNavigationBar'; -import BpkNavigationBarIconButton from '../../packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton'; import BpkNavigationBarButtonLink from '../../packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink'; +import BpkNavigationBarIconButton from '../../packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton'; import { DefaultExample, diff --git a/examples/bpk-component-nudger/examples.js b/examples/bpk-component-nudger/examples.js index d7eacafda2..6ed02d01a2 100644 --- a/examples/bpk-component-nudger/examples.js +++ b/examples/bpk-component-nudger/examples.js @@ -22,17 +22,17 @@ import { Component } from 'react'; import { iconSizeLg, lineHeightBase } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { - action, - BpkDarkExampleWrapper, -} from '../bpk-storybook-utils'; -import BpkLabel from '../../packages/bpk-component-label'; -import { cssModules } from '../../packages/bpk-react-utils'; -import AccountIcon from '../../packages/bpk-component-icon/lg/account'; import { withAlignment } from '../../packages/bpk-component-icon'; +import AccountIcon from '../../packages/bpk-component-icon/lg/account'; +import BpkLabel from '../../packages/bpk-component-label'; import BpkNudger, { BpkConfigurableNudger, } from '../../packages/bpk-component-nudger'; +import { cssModules } from '../../packages/bpk-react-utils'; +import { + action, + BpkDarkExampleWrapper, +} from '../bpk-storybook-utils'; import STYLES from './BpkNudgerStory.module.scss'; diff --git a/examples/bpk-component-nudger/stories.js b/examples/bpk-component-nudger/stories.js index 8b4b59caaa..6aef857e42 100644 --- a/examples/bpk-component-nudger/stories.js +++ b/examples/bpk-component-nudger/stories.js @@ -17,8 +17,8 @@ */ -import BpkNudger from '../../packages/bpk-component-nudger/src/BpkNudger'; import BpkConfigurableNudger from '../../packages/bpk-component-nudger/src/BpkConfigurableNudger'; +import BpkNudger from '../../packages/bpk-component-nudger/src/BpkNudger'; import { DefaultExample, diff --git a/examples/bpk-component-overlay/examples.js b/examples/bpk-component-overlay/examples.js index 07eacb75ea..41079fb47b 100644 --- a/examples/bpk-component-overlay/examples.js +++ b/examples/bpk-component-overlay/examples.js @@ -18,12 +18,12 @@ /* @flow strict */ import PropTypes from 'prop-types'; -import { cssModules } from '../../packages/bpk-react-utils'; -import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkImage from '../../packages/bpk-component-image'; import BpkOverlay, { OVERLAY_TYPES, } from '../../packages/bpk-component-overlay'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import { cssModules } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-page-indicator/examples.js b/examples/bpk-component-page-indicator/examples.js index 09942f9e61..b12da295ff 100644 --- a/examples/bpk-component-page-indicator/examples.js +++ b/examples/bpk-component-page-indicator/examples.js @@ -18,10 +18,10 @@ import { useState } from 'react'; +import { BpkBackgroundImage } from '../../packages/bpk-component-image'; import BpkPageIndicator, { VARIANT, } from '../../packages/bpk-component-page-indicator'; -import { BpkBackgroundImage } from '../../packages/bpk-component-image'; import { cssModules } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-popover/examples.js b/examples/bpk-component-popover/examples.js index 168984e21a..2eee26bb10 100644 --- a/examples/bpk-component-popover/examples.js +++ b/examples/bpk-component-popover/examples.js @@ -22,11 +22,11 @@ import PropTypes from 'prop-types'; import { Component, createRef } from 'react'; import type { Node } from 'react'; -import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; import BpkButton from '../../packages/bpk-component-button'; -import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkInput, { withOpenEvents } from '../../packages/bpk-component-input'; import BpkPopover from '../../packages/bpk-component-popover'; +import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-price/examples.js b/examples/bpk-component-price/examples.js index 55ff3f50b9..95fa6af156 100644 --- a/examples/bpk-component-price/examples.js +++ b/examples/bpk-component-price/examples.js @@ -103,7 +103,7 @@ const LargeWithPreviousPriceLeadingTextExample = () => ( ); const LargeLongPriceExample = () => ( - // eslint-disable-next-line backpack/use-tokens +
    ; diff --git a/examples/bpk-component-scrollable-calendar/stories.js b/examples/bpk-component-scrollable-calendar/stories.js index 80f024ddf7..7b38adecc5 100644 --- a/examples/bpk-component-scrollable-calendar/stories.js +++ b/examples/bpk-component-scrollable-calendar/stories.js @@ -20,7 +20,6 @@ import BpkScrollableCalendarDateComponent from '../../packages/bpk-component-scr import BpkScrollableCalendarGridComponent from '../../packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid'; import BpkScrollableCalendarGridListComponent from '../../packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList'; -import { BpkScrollableCalendarMock } from './stories-utils'; import { DefaultExample, WeekStartsOnSixExample, @@ -41,6 +40,7 @@ import { SplitWeekRangeExample, DefaultExampleWithCustomHeight, } from './examples'; +import { BpkScrollableCalendarMock } from './stories-utils'; export default { title: 'bpk-component-scrollable-calendar', diff --git a/examples/bpk-component-section-header/examples.tsx b/examples/bpk-component-section-header/examples.tsx index 1098f83212..2598225882 100644 --- a/examples/bpk-component-section-header/examples.tsx +++ b/examples/bpk-component-section-header/examples.tsx @@ -16,12 +16,12 @@ * limitations under the License. */ +import { BpkButtonV2 } from '../../packages/bpk-component-button'; +import { withButtonAlignment } from '../../packages/bpk-component-icon/index'; +import SmallLongArrowRightIcon from '../../packages/bpk-component-icon/sm/long-arrow-right'; import BpkSectionHeader, { SECTION_TYPES, } from '../../packages/bpk-component-section-header'; -import { BpkButtonV2 } from '../../packages/bpk-component-button'; -import SmallLongArrowRightIcon from '../../packages/bpk-component-icon/sm/long-arrow-right'; -import { withButtonAlignment } from '../../packages/bpk-component-icon/index'; import { cssModules } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-section-list/examples.js b/examples/bpk-component-section-list/examples.js index ce2b414d2b..6dc66bd358 100644 --- a/examples/bpk-component-section-list/examples.js +++ b/examples/bpk-component-section-list/examples.js @@ -18,11 +18,11 @@ /* @flow strict */ -import { action } from '../bpk-storybook-utils'; import BpkSectionList, { BpkSectionListSection, BpkSectionListItem, } from '../../packages/bpk-component-section-list'; +import { action } from '../bpk-storybook-utils'; const DefaultExample = () => ( diff --git a/examples/bpk-component-section-list/stories.js b/examples/bpk-component-section-list/stories.js index 5d53d4d8e4..d21a25d243 100644 --- a/examples/bpk-component-section-list/stories.js +++ b/examples/bpk-component-section-list/stories.js @@ -18,8 +18,8 @@ import BpkSectionList from '../../packages/bpk-component-section-list/src/BpkSectionList'; -import BpkSectionListSection from '../../packages/bpk-component-section-list/src/BpkSectionListSection'; import BpkSectionListItem from '../../packages/bpk-component-section-list/src/BpkSectionListItem'; +import BpkSectionListSection from '../../packages/bpk-component-section-list/src/BpkSectionListSection'; import DefaultExample from './examples'; diff --git a/examples/bpk-component-select/examples.js b/examples/bpk-component-select/examples.js index c10c2e9066..746f49e722 100644 --- a/examples/bpk-component-select/examples.js +++ b/examples/bpk-component-select/examples.js @@ -16,11 +16,11 @@ * limitations under the License. */ -import { Component } from 'react'; import PropTypes from 'prop-types'; +import { Component } from 'react'; -import { action } from '../bpk-storybook-utils'; import BpkSelect from '../../packages/bpk-component-select'; +import { action } from '../bpk-storybook-utils'; class StatefulBpkSelect extends Component { constructor() { diff --git a/examples/bpk-component-slider/stories.js b/examples/bpk-component-slider/stories.js index 157e7e53bf..e983c2a4c6 100644 --- a/examples/bpk-component-slider/stories.js +++ b/examples/bpk-component-slider/stories.js @@ -16,8 +16,8 @@ * limitations under the License. */ -import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; +import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks'; import BpkSlider from '../../packages/bpk-component-slider/src/BpkSlider'; diff --git a/examples/bpk-component-spinner/SpinnerLayout.js b/examples/bpk-component-spinner/SpinnerLayout.js index 4e0f016061..2ed70ed6a1 100644 --- a/examples/bpk-component-spinner/SpinnerLayout.js +++ b/examples/bpk-component-spinner/SpinnerLayout.js @@ -22,8 +22,8 @@ import PropTypes from 'prop-types'; import type { Node } from 'react'; import { Children } from 'react'; -import { cssModules } from '../../packages/bpk-react-utils'; import { SPINNER_TYPES } from '../../packages/bpk-component-spinner'; +import { cssModules } from '../../packages/bpk-react-utils'; import STYLES from './SpinnerLayout.module.scss'; diff --git a/examples/bpk-component-spinner/stories.js b/examples/bpk-component-spinner/stories.js index e46e99a5eb..dd5aeed4e9 100644 --- a/examples/bpk-component-spinner/stories.js +++ b/examples/bpk-component-spinner/stories.js @@ -17,9 +17,9 @@ */ -import BpkSpinner from '../../packages/bpk-component-spinner/src/BpkSpinner'; -import BpkLargeSpinner from '../../packages/bpk-component-spinner/src/BpkLargeSpinner'; import BpkExtraLargeSpinner from '../../packages/bpk-component-spinner/src/BpkExtraLargeSpinner'; +import BpkLargeSpinner from '../../packages/bpk-component-spinner/src/BpkLargeSpinner'; +import BpkSpinner from '../../packages/bpk-component-spinner/src/BpkSpinner'; import { SmallExample, LargeExample, ExtraLargeExample } from './examples'; diff --git a/examples/bpk-component-split-input/examples.js b/examples/bpk-component-split-input/examples.js index c5fe30b2ee..6410aa440a 100644 --- a/examples/bpk-component-split-input/examples.js +++ b/examples/bpk-component-split-input/examples.js @@ -17,10 +17,10 @@ */ /* @flow strict */ +import BpkLabel from '../../packages/bpk-component-label'; import BpkSplitInput, { INPUT_TYPES, } from '../../packages/bpk-component-split-input'; -import BpkLabel from '../../packages/bpk-component-label'; import { action } from '../bpk-storybook-utils'; const SplitInputExample = () => ( diff --git a/examples/bpk-component-star-rating/examples.js b/examples/bpk-component-star-rating/examples.js index d6b04aa84c..6aa91a2138 100644 --- a/examples/bpk-component-star-rating/examples.js +++ b/examples/bpk-component-star-rating/examples.js @@ -18,7 +18,13 @@ /* @flow strict */ -import { action } from '../bpk-storybook-utils'; +import BpkStarRating, { + BpkInteractiveStarRating, + BpkStar, + withInteractiveStarRatingState, + STAR_TYPES, + ROUNDING_TYPES, +} from '../../packages/bpk-component-star-rating'; import { BpkTable, BpkTableBody, @@ -27,13 +33,7 @@ import { BpkTableHead, BpkTableHeadCell, } from '../../packages/bpk-component-table'; -import BpkStarRating, { - BpkInteractiveStarRating, - BpkStar, - withInteractiveStarRatingState, - STAR_TYPES, - ROUNDING_TYPES, -} from '../../packages/bpk-component-star-rating'; +import { action } from '../bpk-storybook-utils'; const InteractiveStarRating = withInteractiveStarRatingState( BpkInteractiveStarRating, diff --git a/examples/bpk-component-star-rating/stories.js b/examples/bpk-component-star-rating/stories.js index dd3f057668..83c419a437 100644 --- a/examples/bpk-component-star-rating/stories.js +++ b/examples/bpk-component-star-rating/stories.js @@ -17,12 +17,11 @@ */ -import BpkStarRating from '../../packages/bpk-component-star-rating/src/BpkStarRating'; -import { BpkStarNonRtl } from '../../packages/bpk-component-star-rating/src/BpkStar'; -import BpkInteractiveStarRating from '../../packages/bpk-component-star-rating/src/BpkInteractiveStarRating'; import BpkInteractiveStar from '../../packages/bpk-component-star-rating/src/BpkInteractiveStar'; +import BpkInteractiveStarRating from '../../packages/bpk-component-star-rating/src/BpkInteractiveStarRating'; +import { BpkStarNonRtl } from '../../packages/bpk-component-star-rating/src/BpkStar'; +import BpkStarRating from '../../packages/bpk-component-star-rating/src/BpkStarRating'; -import WithInteractiveStarRatingStateMock from './stories-utils'; import { FullExample, FullStarsExample, @@ -36,6 +35,7 @@ import { InteractiveExample, MixedExample, } from './examples'; +import WithInteractiveStarRatingStateMock from './stories-utils'; export default { title: 'bpk-component-star-rating', diff --git a/examples/bpk-component-switch/stories.js b/examples/bpk-component-switch/stories.js index 0d8ddf30c2..b3c0c3de1d 100644 --- a/examples/bpk-component-switch/stories.js +++ b/examples/bpk-component-switch/stories.js @@ -16,8 +16,8 @@ * limitations under the License. */ -import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; +import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks'; import BpkSwitch from '../../packages/bpk-component-switch/src/BpkSwitch'; diff --git a/examples/bpk-component-table/stories.js b/examples/bpk-component-table/stories.js index f6b41035ea..5c9d26087c 100644 --- a/examples/bpk-component-table/stories.js +++ b/examples/bpk-component-table/stories.js @@ -17,11 +17,11 @@ */ import BpkTable from '../../packages/bpk-component-table/src/BpkTable'; -import BpkTableHead from '../../packages/bpk-component-table/src/BpkTableHead'; import BpkTableBody from '../../packages/bpk-component-table/src/BpkTableBody'; -import BpkTableRow from '../../packages/bpk-component-table/src/BpkTableRow'; -import BpkTableHeadCell from '../../packages/bpk-component-table/src/BpkTableHeadCell'; import BpkTableCell from '../../packages/bpk-component-table/src/BpkTableCell'; +import BpkTableHead from '../../packages/bpk-component-table/src/BpkTableHead'; +import BpkTableHeadCell from '../../packages/bpk-component-table/src/BpkTableHeadCell'; +import BpkTableRow from '../../packages/bpk-component-table/src/BpkTableRow'; import DefaultExample from './examples'; diff --git a/examples/bpk-component-text/examples.js b/examples/bpk-component-text/examples.js index c80ca59931..af1983c11f 100644 --- a/examples/bpk-component-text/examples.js +++ b/examples/bpk-component-text/examples.js @@ -16,8 +16,8 @@ * limitations under the License. */ -import { withDefaultProps } from '../../packages/bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; +import { withDefaultProps } from '../../packages/bpk-react-utils'; const Paragraph = withDefaultProps(BpkText, { textStyle: TEXT_STYLES.bodyLongform, diff --git a/examples/bpk-component-textarea/examples.js b/examples/bpk-component-textarea/examples.js index 4f524ade19..333d300314 100644 --- a/examples/bpk-component-textarea/examples.js +++ b/examples/bpk-component-textarea/examples.js @@ -18,9 +18,9 @@ /* @flow strict */ -import { action } from '../bpk-storybook-utils'; import BpkLabel from '../../packages/bpk-component-label'; import BpkTextarea from '../../packages/bpk-component-textarea'; +import { action } from '../bpk-storybook-utils'; const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate repellat assumenda necessitatibus reiciendis, porro temporibus expedita excepturi! Nostrum pariatur odit porro, dolorem dignissimos diff --git a/examples/bpk-component-ticket/examples.js b/examples/bpk-component-ticket/examples.js index 07df34988a..8b93a7e796 100644 --- a/examples/bpk-component-ticket/examples.js +++ b/examples/bpk-component-ticket/examples.js @@ -20,14 +20,14 @@ import PropTypes from 'prop-types'; -import { cssModules } from '../../packages/bpk-react-utils'; import BpkButton from '../../packages/bpk-component-button'; -import ArrowRightIcon from '../../packages/bpk-component-icon/sm/long-arrow-right'; import { withButtonAlignment, withRtlSupport, } from '../../packages/bpk-component-icon'; +import ArrowRightIcon from '../../packages/bpk-component-icon/sm/long-arrow-right'; import BpkTicket from '../../packages/bpk-component-ticket'; +import { cssModules } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; diff --git a/examples/bpk-component-tooltip/examples.js b/examples/bpk-component-tooltip/examples.js index 3c89d38f92..9bdd003567 100644 --- a/examples/bpk-component-tooltip/examples.js +++ b/examples/bpk-component-tooltip/examples.js @@ -24,11 +24,11 @@ import { colorMonteverde, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { withDefaultProps } from '../../packages/bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import BpkTooltip, { TOOLTIP_TYPES, } from '../../packages/bpk-component-tooltip'; +import { withDefaultProps } from '../../packages/bpk-react-utils'; const wrapperStyle = { display: 'flex', diff --git a/examples/bpk-scrim-utils/examples.tsx b/examples/bpk-scrim-utils/examples.tsx index 54bf96f413..74c79e0802 100644 --- a/examples/bpk-scrim-utils/examples.tsx +++ b/examples/bpk-scrim-utils/examples.tsx @@ -16,9 +16,9 @@ * limitations under the License. */ -import { withScrimmedPortal } from '../../packages/bpk-scrim-utils'; import { BpkButtonV2 } from '../../packages/bpk-component-button'; import { cssModules } from '../../packages/bpk-react-utils'; +import { withScrimmedPortal } from '../../packages/bpk-scrim-utils'; import STYLES from './examples.scss'; diff --git a/examples/bpk-scrim-utils/stories.tsx b/examples/bpk-scrim-utils/stories.tsx index 2c34fb5600..74d3ed3e25 100644 --- a/examples/bpk-scrim-utils/stories.tsx +++ b/examples/bpk-scrim-utils/stories.tsx @@ -17,16 +17,16 @@ */ -import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks'; import { ArgsTable } from '@storybook/addon-docs'; +import { Title, Markdown, PRIMARY_STORY } from '@storybook/blocks'; import BpkScrim from '../../packages/bpk-scrim-utils/src/BpkScrim'; -import { withScrimMock, withScrimmedPortalMock } from './stories.utils'; import { WithPortalScrimExample, WithCustomElementAndPortalScrimExample } from './examples'; +import { withScrimMock, withScrimmedPortalMock } from './stories.utils'; export default { title: 'bpk-scrim-utils', diff --git a/examples/bpk-storybook-utils/index.js b/examples/bpk-storybook-utils/index.js index 37d96c9323..1c09821c2d 100644 --- a/examples/bpk-storybook-utils/index.js +++ b/examples/bpk-storybook-utils/index.js @@ -17,8 +17,8 @@ */ /* @flow strict */ -import { action } from './src/BpkStorybookUtils'; import BpkDarkExampleWrapper from './src/BpkDarkExampleWrapper'; +import { action } from './src/BpkStorybookUtils'; export default { action, BpkDarkExampleWrapper }; export { action, BpkDarkExampleWrapper }; diff --git a/package-lock.json b/package-lock.json index 9e86017c4d..1313191c56 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,8 @@ "@percy/storybook": "^5.0.1", "@skyscanner/bpk-foundations-web": "^17.9.0", "@skyscanner/bpk-svgs": "^19.1.0", - "@skyscanner/stylelint-config-skyscanner": "^10.0.0", + "@skyscanner/eslint-config-skyscanner": "^17.4.0", + "@skyscanner/stylelint-config-skyscanner": "^11.1.0", "@storybook/addon-a11y": "^7.6.17", "@storybook/addon-actions": "^7.6.17", "@storybook/addon-docs": "7.6.17", @@ -229,9 +230,10 @@ } }, "node_modules/@babel/eslint-parser": { - "version": "7.22.15", + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.24.1.tgz", + "integrity": "sha512-d5guuzMlPeDfZIbpQ8+g1NaCNuAGBBGNECh0HVqz1sjOeVLh2CEaifuOysCH18URW6R7pqXINvf5PaR/dC6jLQ==", "dev": true, - "license": "MIT", "dependencies": { "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1", "eslint-visitor-keys": "^2.1.0", @@ -2102,9 +2104,10 @@ "license": "MIT" }, "node_modules/@babel/runtime": { - "version": "7.23.1", + "version": "7.24.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz", + "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==", "dev": true, - "license": "MIT", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -2336,9 +2339,10 @@ } }, "node_modules/@eslint/eslintrc": { - "version": "2.1.2", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz", + "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==", "dev": true, - "license": "MIT", "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", @@ -2359,8 +2363,9 @@ }, "node_modules/@eslint/eslintrc/node_modules/ajv": { "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dev": true, - "license": "MIT", "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -2374,13 +2379,15 @@ }, "node_modules/@eslint/eslintrc/node_modules/argparse": { "version": "2.0.1", - "dev": true, - "license": "Python-2.0" + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true }, "node_modules/@eslint/eslintrc/node_modules/globals": { - "version": "13.22.0", + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", "dev": true, - "license": "MIT", "dependencies": { "type-fest": "^0.20.2" }, @@ -2393,8 +2400,9 @@ }, "node_modules/@eslint/eslintrc/node_modules/js-yaml": { "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "dev": true, - "license": "MIT", "dependencies": { "argparse": "^2.0.1" }, @@ -2404,13 +2412,15 @@ }, "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": { "version": "0.4.1", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true }, "node_modules/@eslint/eslintrc/node_modules/type-fest": { "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", "dev": true, - "license": "(MIT OR CC0-1.0)", "engines": { "node": ">=10" }, @@ -2419,9 +2429,10 @@ } }, "node_modules/@eslint/js": { - "version": "8.50.0", + "version": "8.57.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz", + "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==", "dev": true, - "license": "MIT", "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } @@ -2515,18 +2526,25 @@ } }, "node_modules/@humanwhocodes/config-array": { - "version": "0.11.11", + "version": "0.11.14", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", + "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "@humanwhocodes/object-schema": "^1.2.1", - "debug": "^4.1.1", + "@humanwhocodes/object-schema": "^2.0.2", + "debug": "^4.3.1", "minimatch": "^3.0.5" }, "engines": { "node": ">=10.10.0" } }, + "node_modules/@humanwhocodes/config-array/node_modules/@humanwhocodes/object-schema": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz", + "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", + "dev": true + }, "node_modules/@humanwhocodes/module-importer": { "version": "1.0.1", "dev": true, @@ -3374,8 +3392,9 @@ }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", + "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", + "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==", "dev": true, - "license": "MIT", "dependencies": { "eslint-scope": "5.1.1" } @@ -3792,18 +3811,11 @@ "node": ">=14" } }, - "node_modules/@pkgr/utils": { - "version": "2.4.2", + "node_modules/@pkgr/core": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", "dev": true, - "license": "MIT", - "dependencies": { - "cross-spawn": "^7.0.3", - "fast-glob": "^3.3.0", - "is-glob": "^4.0.3", - "open": "^9.1.0", - "picocolors": "^1.0.0", - "tslib": "^2.6.0" - }, "engines": { "node": "^12.20.0 || ^14.18.0 || >=16.0.0" }, @@ -3811,34 +3823,6 @@ "url": "https://opencollective.com/unts" } }, - "node_modules/@pkgr/utils/node_modules/define-lazy-prop": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@pkgr/utils/node_modules/open": { - "version": "9.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "default-browser": "^4.0.0", - "define-lazy-prop": "^3.0.0", - "is-inside-container": "^1.0.0", - "is-wsl": "^2.2.0" - }, - "engines": { - "node": ">=14.16" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.11", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.11.tgz", @@ -4640,32 +4624,34 @@ } }, "node_modules/@skyscanner/eslint-config-skyscanner": { - "version": "16.0.0", + "version": "17.4.0", + "resolved": "https://registry.npmjs.org/@skyscanner/eslint-config-skyscanner/-/eslint-config-skyscanner-17.4.0.tgz", + "integrity": "sha512-5Lkjhvck0tu1oNvb8UWtJJ0IhahLSDFDCRRivUgQ1QL+re3/b/ekX8AWuU7nfLbtqzqwqiWQC6FKlGXH+zrCYg==", "dev": true, "hasInstallScript": true, - "license": "Apache-2.0", "dependencies": { - "@babel/core": "^7.22.9", - "@babel/eslint-parser": "^7.22.9", - "@babel/preset-react": "^7.22.5", - "@typescript-eslint/eslint-plugin": "^6.1.0", - "@typescript-eslint/parser": "^6.2.0", + "@babel/core": "^7.23.7", + "@babel/eslint-parser": "^7.23.3", + "@babel/preset-react": "^7.23.3", + "@skyscanner/eslint-plugin-rules": "^1.0.1", + "@typescript-eslint/eslint-plugin": "^6.19.0", + "@typescript-eslint/parser": "^6.19.0", "colors": "^1.4.0", - "eslint": "^8.45.0", + "eslint": "^8.56.0", "eslint-config-airbnb": "^19.0.4", - "eslint-config-prettier": "^8.5.0", - "eslint-plugin-backpack": "^5.0.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-backpack": "^6.0.0", "eslint-plugin-eslint-comments": "^3.2.0", - "eslint-plugin-import": "^2.27.5", - "eslint-plugin-jest": "^27.2.3", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-jest": "^27.6.3", "eslint-plugin-jest-formatting": "^3.1.0", - "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-prettier": "^5.0.0", - "eslint-plugin-react": "^7.32.2", + "eslint-plugin-jsx-a11y": "^6.8.0", + "eslint-plugin-prettier": "^5.1.3", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-sort-destructure-keys": "^1.5.0", "eslint-plugin-typescript-enum": "^2.1.0", - "prettier": "^3.0.0" + "prettier": "^3.2.4" }, "bin": { "eslint-config-skyscanner": "main.js" @@ -4675,163 +4661,429 @@ "npm": ">=8.1.0" } }, - "node_modules/@skyscanner/stylelint-config-skyscanner": { - "version": "10.2.0", + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/@typescript-eslint/eslint-plugin": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz", + "integrity": "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "@skyscanner/eslint-config-skyscanner": "^16.0.0", - "@skyscanner/stylelint-plugin-backpack": "^3.0.0", - "stylelint": "^15.10.2", - "stylelint-config-standard-scss": "^10.0.0", - "stylelint-declaration-strict-value": "^1.9.2", - "stylelint-order": "^6.0.2", - "stylelint-prettier": "^4.0.2", - "stylelint-scss": "^4.4.0" + "@eslint-community/regexpp": "^4.5.1", + "@typescript-eslint/scope-manager": "6.21.0", + "@typescript-eslint/type-utils": "6.21.0", + "@typescript-eslint/utils": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", + "debug": "^4.3.4", + "graphemer": "^1.4.0", + "ignore": "^5.2.4", + "natural-compare": "^1.4.0", + "semver": "^7.5.4", + "ts-api-utils": "^1.0.1" }, "engines": { - "node": ">=16.13.0", - "npm": ">=8.1.0" + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha", + "eslint": "^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } } }, - "node_modules/@skyscanner/stylelint-plugin-backpack": { - "version": "3.0.0", + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/@typescript-eslint/parser": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz", + "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "@skyscanner/bpk-foundations-web": "^6.2.0", - "lodash": "^4.17.21", - "postcss-values-parser": "^6.0.0", - "tinycolor2": "^1.4.2" + "@typescript-eslint/scope-manager": "6.21.0", + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/typescript-estree": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", + "debug": "^4.3.4" }, "engines": { - "node": ">=16.13.0", - "npm": ">=8.1.0" + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "stylelint": "^15.0.0" + "eslint": "^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } } }, - "node_modules/@skyscanner/stylelint-plugin-backpack/node_modules/@skyscanner/bpk-foundations-common": { - "version": "2.6.1", + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/@typescript-eslint/scope-manager": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz", + "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "color": "^3.0.0" + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@skyscanner/stylelint-plugin-backpack/node_modules/@skyscanner/bpk-foundations-web": { - "version": "6.2.0", + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/@typescript-eslint/type-utils": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz", + "integrity": "sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "@skyscanner/bpk-foundations-common": "^2.3.0", - "color": "^3.0.0" + "@typescript-eslint/typescript-estree": "6.21.0", + "@typescript-eslint/utils": "6.21.0", + "debug": "^4.3.4", + "ts-api-utils": "^1.0.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } } }, - "node_modules/@storybook/addon-a11y": { - "version": "7.6.17", - "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.6.17.tgz", - "integrity": "sha512-UYHJAKQpJMCu4X4O/325UqozYrkhPn2VyQdwPgC+uiOKZvrtni4uRbpOspeyjC0wXH1tDbY8WZvxwvwQryYkpA==", + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/@typescript-eslint/types": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz", + "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==", "dev": true, - "dependencies": { - "@storybook/addon-highlight": "7.6.17", - "axe-core": "^4.2.0" + "engines": { + "node": "^16.0.0 || >=18.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/storybook" + "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@storybook/addon-actions": { - "version": "7.6.17", - "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.17.tgz", - "integrity": "sha512-TBphs4v6LRfyTpFo/WINF0TkMaE3rrNog7wW5mbz6n0j8o53kDN4o9ZEcygSL5zQX43CAaghQTeDCss7ueG7ZQ==", + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/@typescript-eslint/typescript-estree": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz", + "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==", "dev": true, "dependencies": { - "@storybook/core-events": "7.6.17", - "@storybook/global": "^5.0.0", - "@types/uuid": "^9.0.1", - "dequal": "^2.0.2", - "polished": "^4.2.2", - "uuid": "^9.0.0" + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "minimatch": "9.0.3", + "semver": "^7.5.4", + "ts-api-utils": "^1.0.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/storybook" + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } } }, - "node_modules/@storybook/addon-docs": { - "version": "7.6.17", - "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.6.17.tgz", - "integrity": "sha512-FKa4Mdy7nhgvEVZJHpMkHriDzpVHbohn87zv9NCL+Ctjs1iAmzGwxEm0culszyDS1HN2ToVoY0h8CSi2RSSZqA==", + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/@typescript-eslint/utils": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz", + "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==", "dev": true, "dependencies": { - "@jest/transform": "^29.3.1", - "@mdx-js/react": "^2.1.5", - "@storybook/blocks": "7.6.17", - "@storybook/client-logger": "7.6.17", - "@storybook/components": "7.6.17", - "@storybook/csf-plugin": "7.6.17", - "@storybook/csf-tools": "7.6.17", - "@storybook/global": "^5.0.0", - "@storybook/mdx2-csf": "^1.0.0", - "@storybook/node-logger": "7.6.17", - "@storybook/postinstall": "7.6.17", - "@storybook/preview-api": "7.6.17", - "@storybook/react-dom-shim": "7.6.17", - "@storybook/theming": "7.6.17", - "@storybook/types": "7.6.17", - "fs-extra": "^11.1.0", - "remark-external-links": "^8.0.0", - "remark-slug": "^6.0.0", - "ts-dedent": "^2.0.0" + "@eslint-community/eslint-utils": "^4.4.0", + "@types/json-schema": "^7.0.12", + "@types/semver": "^7.5.0", + "@typescript-eslint/scope-manager": "6.21.0", + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/typescript-estree": "6.21.0", + "semver": "^7.5.4" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/storybook" + "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "eslint": "^7.0.0 || ^8.0.0" } }, - "node_modules/@storybook/addon-highlight": { - "version": "7.6.17", - "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.6.17.tgz", - "integrity": "sha512-R1yBPUUqGn+60aJakn8q+5Zt34E/gU3n3VmgPdryP0LJUdZ5q1/RZShoVDV+yYQ40htMH6oaCv3OyyPzFAGJ6A==", + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/@typescript-eslint/visitor-keys": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz", + "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==", "dev": true, "dependencies": { - "@storybook/global": "^5.0.0" + "@typescript-eslint/types": "6.21.0", + "eslint-visitor-keys": "^3.4.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/storybook" + "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@storybook/addon-viewport": { - "version": "7.6.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.6.12.tgz", - "integrity": "sha512-51zsBeoaEzq699SKDCe+GG/2PDAJKKJtpjqxIc4lDskogaCJSb3Ie8LyookHAKYgbi2qealVgK8zaP27KUj3Pg==", + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", "dev": true, "dependencies": { - "memoizerific": "^1.11.3" + "balanced-match": "^1.0.0" + } + }, + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" + "url": "https://opencollective.com/eslint" } }, - "node_modules/@storybook/blocks": { - "version": "7.6.17", - "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.6.17.tgz", - "integrity": "sha512-PsNVoe0bX1mMn4Kk3nbKZ0ItDZZ0YJnYAFJ6toAbsyBAbgzg1sce88sQinzvbn58/RT9MPKeWMPB45ZS7ggiNg==", + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, "dependencies": { - "@storybook/channels": "7.6.17", - "@storybook/client-logger": "7.6.17", - "@storybook/components": "7.6.17", - "@storybook/core-events": "7.6.17", + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/minimatch": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", + "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/semver": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@skyscanner/eslint-config-skyscanner/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, + "node_modules/@skyscanner/eslint-plugin-rules": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@skyscanner/eslint-plugin-rules/-/eslint-plugin-rules-1.1.0.tgz", + "integrity": "sha512-Wmt3MbnAo4GeKoVgbYrc+6HeEYXoGsP8lJ6BEuluU5ALrOL3Yb1kxEPAFXdaW1Ugqq4fJ7s/5dUDpUWbg1rxWg==", + "dev": true + }, + "node_modules/@skyscanner/stylelint-config-skyscanner": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/@skyscanner/stylelint-config-skyscanner/-/stylelint-config-skyscanner-11.1.0.tgz", + "integrity": "sha512-7r9IDHMAy4chyCj7A+kwISWA73ED5T49m0sl+P/m6kgq6YmCLuI2E0v0f9RGXBylzNux0j74sieG3ZpMBaZgnQ==", + "dev": true, + "dependencies": { + "@skyscanner/eslint-config-skyscanner": "^17.1.0", + "@skyscanner/stylelint-plugin-backpack": "^3.0.0", + "stylelint": "^15.11.0", + "stylelint-config-standard-scss": "^11.1.0", + "stylelint-declaration-strict-value": "^1.9.2", + "stylelint-order": "^6.0.4", + "stylelint-prettier": "^4.0.2", + "stylelint-scss": "^5.3.2" + }, + "engines": { + "node": ">=16.13.0", + "npm": ">=8.1.0" + } + }, + "node_modules/@skyscanner/stylelint-plugin-backpack": { + "version": "3.0.0", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@skyscanner/bpk-foundations-web": "^6.2.0", + "lodash": "^4.17.21", + "postcss-values-parser": "^6.0.0", + "tinycolor2": "^1.4.2" + }, + "engines": { + "node": ">=16.13.0", + "npm": ">=8.1.0" + }, + "peerDependencies": { + "stylelint": "^15.0.0" + } + }, + "node_modules/@skyscanner/stylelint-plugin-backpack/node_modules/@skyscanner/bpk-foundations-common": { + "version": "2.6.1", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "color": "^3.0.0" + } + }, + "node_modules/@skyscanner/stylelint-plugin-backpack/node_modules/@skyscanner/bpk-foundations-web": { + "version": "6.2.0", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@skyscanner/bpk-foundations-common": "^2.3.0", + "color": "^3.0.0" + } + }, + "node_modules/@storybook/addon-a11y": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.6.17.tgz", + "integrity": "sha512-UYHJAKQpJMCu4X4O/325UqozYrkhPn2VyQdwPgC+uiOKZvrtni4uRbpOspeyjC0wXH1tDbY8WZvxwvwQryYkpA==", + "dev": true, + "dependencies": { + "@storybook/addon-highlight": "7.6.17", + "axe-core": "^4.2.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-actions": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.17.tgz", + "integrity": "sha512-TBphs4v6LRfyTpFo/WINF0TkMaE3rrNog7wW5mbz6n0j8o53kDN4o9ZEcygSL5zQX43CAaghQTeDCss7ueG7ZQ==", + "dev": true, + "dependencies": { + "@storybook/core-events": "7.6.17", + "@storybook/global": "^5.0.0", + "@types/uuid": "^9.0.1", + "dequal": "^2.0.2", + "polished": "^4.2.2", + "uuid": "^9.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-docs": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.6.17.tgz", + "integrity": "sha512-FKa4Mdy7nhgvEVZJHpMkHriDzpVHbohn87zv9NCL+Ctjs1iAmzGwxEm0culszyDS1HN2ToVoY0h8CSi2RSSZqA==", + "dev": true, + "dependencies": { + "@jest/transform": "^29.3.1", + "@mdx-js/react": "^2.1.5", + "@storybook/blocks": "7.6.17", + "@storybook/client-logger": "7.6.17", + "@storybook/components": "7.6.17", + "@storybook/csf-plugin": "7.6.17", + "@storybook/csf-tools": "7.6.17", + "@storybook/global": "^5.0.0", + "@storybook/mdx2-csf": "^1.0.0", + "@storybook/node-logger": "7.6.17", + "@storybook/postinstall": "7.6.17", + "@storybook/preview-api": "7.6.17", + "@storybook/react-dom-shim": "7.6.17", + "@storybook/theming": "7.6.17", + "@storybook/types": "7.6.17", + "fs-extra": "^11.1.0", + "remark-external-links": "^8.0.0", + "remark-slug": "^6.0.0", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-highlight": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.6.17.tgz", + "integrity": "sha512-R1yBPUUqGn+60aJakn8q+5Zt34E/gU3n3VmgPdryP0LJUdZ5q1/RZShoVDV+yYQ40htMH6oaCv3OyyPzFAGJ6A==", + "dev": true, + "dependencies": { + "@storybook/global": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-viewport": { + "version": "7.6.12", + "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.6.12.tgz", + "integrity": "sha512-51zsBeoaEzq699SKDCe+GG/2PDAJKKJtpjqxIc4lDskogaCJSb3Ie8LyookHAKYgbi2qealVgK8zaP27KUj3Pg==", + "dev": true, + "dependencies": { + "memoizerific": "^1.11.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/blocks": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.6.17.tgz", + "integrity": "sha512-PsNVoe0bX1mMn4Kk3nbKZ0ItDZZ0YJnYAFJ6toAbsyBAbgzg1sce88sQinzvbn58/RT9MPKeWMPB45ZS7ggiNg==", + "dev": true, + "dependencies": { + "@storybook/channels": "7.6.17", + "@storybook/client-logger": "7.6.17", + "@storybook/components": "7.6.17", + "@storybook/core-events": "7.6.17", "@storybook/csf": "^0.1.2", "@storybook/docs-tools": "7.6.17", "@storybook/global": "^5.0.0", @@ -8606,8 +8858,9 @@ }, "node_modules/@types/json5": { "version": "0.0.29", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", + "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", + "dev": true }, "node_modules/@types/keyv": { "version": "3.1.4", @@ -8815,15 +9068,18 @@ } }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "6.7.3", + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.5.0.tgz", + "integrity": "sha512-HpqNTH8Du34nLxbKgVMGljZMG0rJd2O9ecvr2QLYp+7512ty1j42KnsFwspPXg1Vh8an9YImf6CokUBltisZFQ==", "dev": true, - "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@eslint-community/regexpp": "^4.5.1", - "@typescript-eslint/scope-manager": "6.7.3", - "@typescript-eslint/type-utils": "6.7.3", - "@typescript-eslint/utils": "6.7.3", - "@typescript-eslint/visitor-keys": "6.7.3", + "@typescript-eslint/scope-manager": "7.5.0", + "@typescript-eslint/type-utils": "7.5.0", + "@typescript-eslint/utils": "7.5.0", + "@typescript-eslint/visitor-keys": "7.5.0", "debug": "^4.3.4", "graphemer": "^1.4.0", "ignore": "^5.2.4", @@ -8832,15 +9088,15 @@ "ts-api-utils": "^1.0.1" }, "engines": { - "node": "^16.0.0 || >=18.0.0" + "node": "^18.18.0 || >=20.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha", - "eslint": "^7.0.0 || ^8.0.0" + "@typescript-eslint/parser": "^7.0.0", + "eslint": "^8.56.0" }, "peerDependenciesMeta": { "typescript": { @@ -8850,8 +9106,11 @@ }, "node_modules/@typescript-eslint/eslint-plugin/node_modules/lru-cache": { "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, - "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "yallist": "^4.0.0" }, @@ -8860,9 +9119,12 @@ } }, "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": { - "version": "7.5.4", + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", "dev": true, - "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "lru-cache": "^6.0.0" }, @@ -8875,8 +9137,11 @@ }, "node_modules/@typescript-eslint/eslint-plugin/node_modules/yallist": { "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true, - "license": "ISC" + "optional": true, + "peer": true }, "node_modules/@typescript-eslint/experimental-utils": { "version": "5.62.0", @@ -9033,25 +9298,28 @@ "license": "ISC" }, "node_modules/@typescript-eslint/parser": { - "version": "6.7.3", + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.5.0.tgz", + "integrity": "sha512-cj+XGhNujfD2/wzR1tabNsidnYRaFfEkcULdcIyVBYcXjBvBKOes+mpMBP7hMpOyk+gBcfXsrg4NBGAStQyxjQ==", "dev": true, - "license": "BSD-2-Clause", + "optional": true, + "peer": true, "dependencies": { - "@typescript-eslint/scope-manager": "6.7.3", - "@typescript-eslint/types": "6.7.3", - "@typescript-eslint/typescript-estree": "6.7.3", - "@typescript-eslint/visitor-keys": "6.7.3", + "@typescript-eslint/scope-manager": "7.5.0", + "@typescript-eslint/types": "7.5.0", + "@typescript-eslint/typescript-estree": "7.5.0", + "@typescript-eslint/visitor-keys": "7.5.0", "debug": "^4.3.4" }, "engines": { - "node": "^16.0.0 || >=18.0.0" + "node": "^18.18.0 || >=20.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "eslint": "^7.0.0 || ^8.0.0" + "eslint": "^8.56.0" }, "peerDependenciesMeta": { "typescript": { @@ -9060,15 +9328,18 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "6.7.3", + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.5.0.tgz", + "integrity": "sha512-Z1r7uJY0MDeUlql9XJ6kRVgk/sP11sr3HKXn268HZyqL7i4cEfrdFuSSY/0tUqT37l5zT0tJOsuDP16kio85iA==", "dev": true, - "license": "MIT", + "optional": true, + "peer": true, "dependencies": { - "@typescript-eslint/types": "6.7.3", - "@typescript-eslint/visitor-keys": "6.7.3" + "@typescript-eslint/types": "7.5.0", + "@typescript-eslint/visitor-keys": "7.5.0" }, "engines": { - "node": "^16.0.0 || >=18.0.0" + "node": "^18.18.0 || >=20.0.0" }, "funding": { "type": "opencollective", @@ -9076,24 +9347,27 @@ } }, "node_modules/@typescript-eslint/type-utils": { - "version": "6.7.3", + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.5.0.tgz", + "integrity": "sha512-A021Rj33+G8mx2Dqh0nMO9GyjjIBK3MqgVgZ2qlKf6CJy51wY/lkkFqq3TqqnH34XyAHUkq27IjlUkWlQRpLHw==", "dev": true, - "license": "MIT", + "optional": true, + "peer": true, "dependencies": { - "@typescript-eslint/typescript-estree": "6.7.3", - "@typescript-eslint/utils": "6.7.3", + "@typescript-eslint/typescript-estree": "7.5.0", + "@typescript-eslint/utils": "7.5.0", "debug": "^4.3.4", "ts-api-utils": "^1.0.1" }, "engines": { - "node": "^16.0.0 || >=18.0.0" + "node": "^18.18.0 || >=20.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "eslint": "^7.0.0 || ^8.0.0" + "eslint": "^8.56.0" }, "peerDependenciesMeta": { "typescript": { @@ -9102,11 +9376,14 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "6.7.3", + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.5.0.tgz", + "integrity": "sha512-tv5B4IHeAdhR7uS4+bf8Ov3k793VEVHd45viRRkehIUZxm0WF82VPiLgHzA/Xl4TGPg1ZD49vfxBKFPecD5/mg==", "dev": true, - "license": "MIT", + "optional": true, + "peer": true, "engines": { - "node": "^16.0.0 || >=18.0.0" + "node": "^18.18.0 || >=20.0.0" }, "funding": { "type": "opencollective", @@ -9114,20 +9391,24 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "6.7.3", + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.5.0.tgz", + "integrity": "sha512-YklQQfe0Rv2PZEueLTUffiQGKQneiIEKKnfIqPIOxgM9lKSZFCjT5Ad4VqRKj/U4+kQE3fa8YQpskViL7WjdPQ==", "dev": true, - "license": "BSD-2-Clause", + "optional": true, + "peer": true, "dependencies": { - "@typescript-eslint/types": "6.7.3", - "@typescript-eslint/visitor-keys": "6.7.3", + "@typescript-eslint/types": "7.5.0", + "@typescript-eslint/visitor-keys": "7.5.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", + "minimatch": "9.0.3", "semver": "^7.5.4", "ts-api-utils": "^1.0.1" }, "engines": { - "node": "^16.0.0 || >=18.0.0" + "node": "^18.18.0 || >=20.0.0" }, "funding": { "type": "opencollective", @@ -9139,10 +9420,24 @@ } } }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, "node_modules/@typescript-eslint/typescript-estree/node_modules/lru-cache": { "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, - "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "yallist": "^4.0.0" }, @@ -9150,10 +9445,30 @@ "node": ">=10" } }, - "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": { - "version": "7.5.4", + "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", + "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", "dev": true, - "license": "ISC", + "optional": true, + "peer": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", + "dev": true, + "optional": true, + "peer": true, "dependencies": { "lru-cache": "^6.0.0" }, @@ -9166,37 +9481,46 @@ }, "node_modules/@typescript-eslint/typescript-estree/node_modules/yallist": { "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true, - "license": "ISC" + "optional": true, + "peer": true }, "node_modules/@typescript-eslint/utils": { - "version": "6.7.3", + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.5.0.tgz", + "integrity": "sha512-3vZl9u0R+/FLQcpy2EHyRGNqAS/ofJ3Ji8aebilfJe+fobK8+LbIFmrHciLVDxjDoONmufDcnVSF38KwMEOjzw==", "dev": true, - "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@types/json-schema": "^7.0.12", "@types/semver": "^7.5.0", - "@typescript-eslint/scope-manager": "6.7.3", - "@typescript-eslint/types": "6.7.3", - "@typescript-eslint/typescript-estree": "6.7.3", + "@typescript-eslint/scope-manager": "7.5.0", + "@typescript-eslint/types": "7.5.0", + "@typescript-eslint/typescript-estree": "7.5.0", "semver": "^7.5.4" }, "engines": { - "node": "^16.0.0 || >=18.0.0" + "node": "^18.18.0 || >=20.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/typescript-eslint" }, "peerDependencies": { - "eslint": "^7.0.0 || ^8.0.0" + "eslint": "^8.56.0" } }, "node_modules/@typescript-eslint/utils/node_modules/lru-cache": { "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, - "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "yallist": "^4.0.0" }, @@ -9205,9 +9529,12 @@ } }, "node_modules/@typescript-eslint/utils/node_modules/semver": { - "version": "7.5.4", + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", "dev": true, - "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "lru-cache": "^6.0.0" }, @@ -9220,19 +9547,25 @@ }, "node_modules/@typescript-eslint/utils/node_modules/yallist": { "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true, - "license": "ISC" + "optional": true, + "peer": true }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "6.7.3", + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.5.0.tgz", + "integrity": "sha512-mcuHM/QircmA6O7fy6nn2w/3ditQkj+SgtOc8DW3uQ10Yfj42amm2i+6F2K4YAOPNNTmE6iM1ynM6lrSwdendA==", "dev": true, - "license": "MIT", + "optional": true, + "peer": true, "dependencies": { - "@typescript-eslint/types": "6.7.3", + "@typescript-eslint/types": "7.5.0", "eslint-visitor-keys": "^3.4.1" }, "engines": { - "node": "^16.0.0 || >=18.0.0" + "node": "^18.18.0 || >=20.0.0" }, "funding": { "type": "opencollective", @@ -9241,8 +9574,11 @@ }, "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": { "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true, - "license": "Apache-2.0", + "optional": true, + "peer": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -9250,6 +9586,12 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/@ungap/structured-clone": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", + "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", + "dev": true + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.6", "dev": true, @@ -9837,12 +10179,16 @@ } }, "node_modules/array-buffer-byte-length": { - "version": "1.0.0", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz", + "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2", - "is-array-buffer": "^3.0.1" + "call-bind": "^1.0.5", + "is-array-buffer": "^3.0.4" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -9963,6 +10309,26 @@ "node": ">=0.10.0" } }, + "node_modules/array.prototype.findlast": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz", + "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-abstract": "^1.23.2", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.0.0", + "es-shim-unscopables": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/array.prototype.findlastindex": { "version": "1.2.3", "dev": true, @@ -10033,29 +10399,44 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/array.prototype.tosorted": { + "node_modules/array.prototype.toreversed": { "version": "1.1.2", + "resolved": "https://registry.npmjs.org/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz", + "integrity": "sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==", "dev": true, - "license": "MIT", "dependencies": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", "es-abstract": "^1.22.1", - "es-shim-unscopables": "^1.0.0", - "get-intrinsic": "^1.2.1" + "es-shim-unscopables": "^1.0.0" + } + }, + "node_modules/array.prototype.tosorted": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz", + "integrity": "sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.5", + "define-properties": "^1.2.1", + "es-abstract": "^1.22.3", + "es-errors": "^1.1.0", + "es-shim-unscopables": "^1.0.2" } }, "node_modules/arraybuffer.prototype.slice": { - "version": "1.0.2", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz", + "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==", "dev": true, - "license": "MIT", "dependencies": { - "array-buffer-byte-length": "^1.0.0", - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1", - "get-intrinsic": "^1.2.1", - "is-array-buffer": "^3.0.2", + "array-buffer-byte-length": "^1.0.1", + "call-bind": "^1.0.5", + "define-properties": "^1.2.1", + "es-abstract": "^1.22.3", + "es-errors": "^1.2.1", + "get-intrinsic": "^1.2.3", + "is-array-buffer": "^3.0.4", "is-shared-array-buffer": "^1.0.2" }, "engines": { @@ -10110,9 +10491,10 @@ } }, "node_modules/ast-types-flow": { - "version": "0.0.7", - "dev": true, - "license": "ISC" + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz", + "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==", + "dev": true }, "node_modules/astral-regex": { "version": "2.0.0", @@ -10178,14 +10560,6 @@ "node": ">= 0.10" } }, - "node_modules/asynciterator.prototype": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "has-symbols": "^1.0.3" - } - }, "node_modules/asynckit": { "version": "0.4.0", "dev": true, @@ -10240,9 +10614,13 @@ } }, "node_modules/available-typed-arrays": { - "version": "1.0.5", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", + "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==", "dev": true, - "license": "MIT", + "dependencies": { + "possible-typed-array-names": "^1.0.0" + }, "engines": { "node": ">= 0.4" }, @@ -11042,14 +11420,6 @@ "node": ">=8" } }, - "node_modules/bpk-tokens": { - "version": "36.2.3", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "color": "^3.1.3" - } - }, "node_modules/bplist-parser": { "version": "0.2.0", "dev": true, @@ -11193,20 +11563,6 @@ "dev": true, "license": "MIT" }, - "node_modules/bundle-name": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "run-applescript": "^5.0.0" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/bytes": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", @@ -11300,12 +11656,19 @@ } }, "node_modules/call-bind": { - "version": "1.0.2", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", + "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", "dev": true, - "license": "MIT", "dependencies": { - "function-bind": "^1.1.1", - "get-intrinsic": "^1.0.2" + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "set-function-length": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -12504,11 +12867,12 @@ } }, "node_modules/css-functions-list": { - "version": "3.2.0", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz", + "integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==", "dev": true, - "license": "MIT", "engines": { - "node": ">=12.22" + "node": ">=12 || >=16" } }, "node_modules/css-loader": { @@ -12899,6 +13263,57 @@ "node": ">=12" } }, + "node_modules/data-view-buffer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz", + "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.6", + "es-errors": "^1.3.0", + "is-data-view": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/data-view-byte-length": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz", + "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "es-errors": "^1.3.0", + "is-data-view": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/data-view-byte-offset": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz", + "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.6", + "es-errors": "^1.3.0", + "is-data-view": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/date-fns": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.3.1.tgz", @@ -13049,23 +13464,6 @@ "node": ">=0.10.0" } }, - "node_modules/default-browser": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "bundle-name": "^3.0.0", - "default-browser-id": "^3.0.0", - "execa": "^7.1.1", - "titleize": "^3.0.0" - }, - "engines": { - "node": ">=14.16" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/default-browser-id": { "version": "3.0.0", "dev": true, @@ -13081,119 +13479,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/default-browser/node_modules/execa": { - "version": "7.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "cross-spawn": "^7.0.3", - "get-stream": "^6.0.1", - "human-signals": "^4.3.0", - "is-stream": "^3.0.0", - "merge-stream": "^2.0.0", - "npm-run-path": "^5.1.0", - "onetime": "^6.0.0", - "signal-exit": "^3.0.7", - "strip-final-newline": "^3.0.0" - }, - "engines": { - "node": "^14.18.0 || ^16.14.0 || >=18.0.0" - }, - "funding": { - "url": "https://github.com/sindresorhus/execa?sponsor=1" - } - }, - "node_modules/default-browser/node_modules/get-stream": { - "version": "6.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/default-browser/node_modules/human-signals": { - "version": "4.3.1", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": ">=14.18.0" - } - }, - "node_modules/default-browser/node_modules/is-stream": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/default-browser/node_modules/mimic-fn": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/default-browser/node_modules/npm-run-path": { - "version": "5.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "path-key": "^4.0.0" - }, - "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/default-browser/node_modules/onetime": { - "version": "6.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "mimic-fn": "^4.0.0" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/default-browser/node_modules/path-key": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/default-browser/node_modules/strip-final-newline": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/default-compare": { "version": "1.0.0", "dev": true, @@ -13251,16 +13536,20 @@ } }, "node_modules/define-data-property": { - "version": "1.1.0", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", + "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", "dev": true, - "license": "MIT", "dependencies": { - "get-intrinsic": "^1.2.1", - "gopd": "^1.0.1", - "has-property-descriptors": "^1.0.0" + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "gopd": "^1.0.1" }, "engines": { "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" } }, "node_modules/define-lazy-prop": { @@ -13839,49 +14128,57 @@ } }, "node_modules/es-abstract": { - "version": "1.22.2", - "dev": true, - "license": "MIT", - "dependencies": { - "array-buffer-byte-length": "^1.0.0", - "arraybuffer.prototype.slice": "^1.0.2", - "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.2", - "es-set-tostringtag": "^2.0.1", + "version": "1.23.3", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz", + "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==", + "dev": true, + "dependencies": { + "array-buffer-byte-length": "^1.0.1", + "arraybuffer.prototype.slice": "^1.0.3", + "available-typed-arrays": "^1.0.7", + "call-bind": "^1.0.7", + "data-view-buffer": "^1.0.1", + "data-view-byte-length": "^1.0.1", + "data-view-byte-offset": "^1.0.0", + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.0.0", + "es-set-tostringtag": "^2.0.3", "es-to-primitive": "^1.2.1", "function.prototype.name": "^1.1.6", - "get-intrinsic": "^1.2.1", - "get-symbol-description": "^1.0.0", + "get-intrinsic": "^1.2.4", + "get-symbol-description": "^1.0.2", "globalthis": "^1.0.3", "gopd": "^1.0.1", - "has": "^1.0.3", - "has-property-descriptors": "^1.0.0", - "has-proto": "^1.0.1", + "has-property-descriptors": "^1.0.2", + "has-proto": "^1.0.3", "has-symbols": "^1.0.3", - "internal-slot": "^1.0.5", - "is-array-buffer": "^3.0.2", + "hasown": "^2.0.2", + "internal-slot": "^1.0.7", + "is-array-buffer": "^3.0.4", "is-callable": "^1.2.7", - "is-negative-zero": "^2.0.2", + "is-data-view": "^1.0.1", + "is-negative-zero": "^2.0.3", "is-regex": "^1.1.4", - "is-shared-array-buffer": "^1.0.2", + "is-shared-array-buffer": "^1.0.3", "is-string": "^1.0.7", - "is-typed-array": "^1.1.12", + "is-typed-array": "^1.1.13", "is-weakref": "^1.0.2", - "object-inspect": "^1.12.3", + "object-inspect": "^1.13.1", "object-keys": "^1.1.1", - "object.assign": "^4.1.4", - "regexp.prototype.flags": "^1.5.1", - "safe-array-concat": "^1.0.1", - "safe-regex-test": "^1.0.0", - "string.prototype.trim": "^1.2.8", - "string.prototype.trimend": "^1.0.7", - "string.prototype.trimstart": "^1.0.7", - "typed-array-buffer": "^1.0.0", - "typed-array-byte-length": "^1.0.0", - "typed-array-byte-offset": "^1.0.0", - "typed-array-length": "^1.0.4", + "object.assign": "^4.1.5", + "regexp.prototype.flags": "^1.5.2", + "safe-array-concat": "^1.1.2", + "safe-regex-test": "^1.0.3", + "string.prototype.trim": "^1.2.9", + "string.prototype.trimend": "^1.0.8", + "string.prototype.trimstart": "^1.0.8", + "typed-array-buffer": "^1.0.2", + "typed-array-byte-length": "^1.0.1", + "typed-array-byte-offset": "^1.0.2", + "typed-array-length": "^1.0.6", "unbox-primitive": "^1.0.2", - "which-typed-array": "^1.1.11" + "which-typed-array": "^1.1.15" }, "engines": { "node": ">= 0.4" @@ -13895,6 +14192,27 @@ "dev": true, "license": "MIT" }, + "node_modules/es-define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", + "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", + "dev": true, + "dependencies": { + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "dev": true, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/es-get-iterator": { "version": "1.1.3", "dev": true, @@ -13915,24 +14233,28 @@ } }, "node_modules/es-iterator-helpers": { - "version": "1.0.15", + "version": "1.0.18", + "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.18.tgz", + "integrity": "sha512-scxAJaewsahbqTYrGKJihhViaM6DDZDDoucfvzNbK0pOren1g/daDQ3IAhzn+1G14rBG7w+i5N+qul60++zlKA==", "dev": true, - "license": "MIT", "dependencies": { - "asynciterator.prototype": "^1.0.0", - "call-bind": "^1.0.2", + "call-bind": "^1.0.7", "define-properties": "^1.2.1", - "es-abstract": "^1.22.1", - "es-set-tostringtag": "^2.0.1", - "function-bind": "^1.1.1", - "get-intrinsic": "^1.2.1", + "es-abstract": "^1.23.0", + "es-errors": "^1.3.0", + "es-set-tostringtag": "^2.0.3", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", "globalthis": "^1.0.3", - "has-property-descriptors": "^1.0.0", - "has-proto": "^1.0.1", + "has-property-descriptors": "^1.0.2", + "has-proto": "^1.0.3", "has-symbols": "^1.0.3", - "internal-slot": "^1.0.5", + "internal-slot": "^1.0.7", "iterator.prototype": "^1.1.2", - "safe-array-concat": "^1.0.1" + "safe-array-concat": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" } }, "node_modules/es-module-lexer": { @@ -13941,25 +14263,39 @@ "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==", "dev": true }, + "node_modules/es-object-atoms": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz", + "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==", + "dev": true, + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/es-set-tostringtag": { - "version": "2.0.1", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz", + "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==", "dev": true, - "license": "MIT", "dependencies": { - "get-intrinsic": "^1.1.3", - "has": "^1.0.3", - "has-tostringtag": "^1.0.0" + "get-intrinsic": "^1.2.4", + "has-tostringtag": "^1.0.2", + "hasown": "^2.0.1" }, "engines": { "node": ">= 0.4" } }, "node_modules/es-shim-unscopables": { - "version": "1.0.0", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz", + "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==", "dev": true, - "license": "MIT", "dependencies": { - "has": "^1.0.3" + "hasown": "^2.0.0" } }, "node_modules/es-to-primitive": { @@ -14144,17 +14480,19 @@ } }, "node_modules/eslint": { - "version": "8.50.0", + "version": "8.57.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz", + "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==", "dev": true, - "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", - "@eslint/eslintrc": "^2.1.2", - "@eslint/js": "8.50.0", - "@humanwhocodes/config-array": "^0.11.11", + "@eslint/eslintrc": "^2.1.4", + "@eslint/js": "8.57.0", + "@humanwhocodes/config-array": "^0.11.14", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", + "@ungap/structured-clone": "^1.2.0", "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.2", @@ -14250,9 +14588,10 @@ } }, "node_modules/eslint-config-prettier": { - "version": "8.10.0", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", + "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", "dev": true, - "license": "MIT", "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -14319,13 +14658,14 @@ } }, "node_modules/eslint-plugin-backpack": { - "version": "5.0.0", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-backpack/-/eslint-plugin-backpack-6.0.0.tgz", + "integrity": "sha512-4nc981vK2D81PgbYxvsTvxu1HG+dA1URaqgBVV6eDSS2ckIYWiTU167/h4f2vUKDHctGIdi/yPeaIHX78Xt2Yw==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "bpk-tokens": "^36.0.0", + "@skyscanner/bpk-foundations-web": "^17.3.0", "lodash": "^4.17.21", - "tinycolor2": "^1.4.1" + "tinycolor2": "^1.6.0" }, "engines": { "node": ">=16.13.0", @@ -14351,27 +14691,28 @@ } }, "node_modules/eslint-plugin-import": { - "version": "2.28.1", + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz", + "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==", "dev": true, - "license": "MIT", "dependencies": { - "array-includes": "^3.1.6", - "array.prototype.findlastindex": "^1.2.2", - "array.prototype.flat": "^1.3.1", - "array.prototype.flatmap": "^1.3.1", + "array-includes": "^3.1.7", + "array.prototype.findlastindex": "^1.2.3", + "array.prototype.flat": "^1.3.2", + "array.prototype.flatmap": "^1.3.2", "debug": "^3.2.7", "doctrine": "^2.1.0", - "eslint-import-resolver-node": "^0.3.7", + "eslint-import-resolver-node": "^0.3.9", "eslint-module-utils": "^2.8.0", - "has": "^1.0.3", - "is-core-module": "^2.13.0", + "hasown": "^2.0.0", + "is-core-module": "^2.13.1", "is-glob": "^4.0.3", "minimatch": "^3.1.2", - "object.fromentries": "^2.0.6", - "object.groupby": "^1.0.0", - "object.values": "^1.1.6", + "object.fromentries": "^2.0.7", + "object.groupby": "^1.0.1", + "object.values": "^1.1.7", "semver": "^6.3.1", - "tsconfig-paths": "^3.14.2" + "tsconfig-paths": "^3.15.0" }, "engines": { "node": ">=4" @@ -14400,9 +14741,10 @@ } }, "node_modules/eslint-plugin-jest": { - "version": "27.4.0", + "version": "27.9.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.9.0.tgz", + "integrity": "sha512-QIT7FH7fNmd9n4se7FFKHbsLKGQiw885Ds6Y/sxKgCZ6natwCsXdgPOADnYVxN2QrRweF0FZWbJ6S7Rsn7llug==", "dev": true, - "license": "MIT", "dependencies": { "@typescript-eslint/utils": "^5.10.0" }, @@ -14410,7 +14752,7 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" }, "peerDependencies": { - "@typescript-eslint/eslint-plugin": "^5.0.0 || ^6.0.0", + "@typescript-eslint/eslint-plugin": "^5.0.0 || ^6.0.0 || ^7.0.0", "eslint": "^7.0.0 || ^8.0.0", "jest": "*" }, @@ -14436,8 +14778,9 @@ }, "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/scope-manager": { "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz", + "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==", "dev": true, - "license": "MIT", "dependencies": { "@typescript-eslint/types": "5.62.0", "@typescript-eslint/visitor-keys": "5.62.0" @@ -14452,8 +14795,9 @@ }, "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/types": { "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz", + "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==", "dev": true, - "license": "MIT", "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -14464,8 +14808,9 @@ }, "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/typescript-estree": { "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz", + "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==", "dev": true, - "license": "BSD-2-Clause", "dependencies": { "@typescript-eslint/types": "5.62.0", "@typescript-eslint/visitor-keys": "5.62.0", @@ -14490,8 +14835,9 @@ }, "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/utils": { "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz", + "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==", "dev": true, - "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@types/json-schema": "^7.0.9", @@ -14515,8 +14861,9 @@ }, "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/visitor-keys": { "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz", + "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==", "dev": true, - "license": "MIT", "dependencies": { "@typescript-eslint/types": "5.62.0", "eslint-visitor-keys": "^3.3.0" @@ -14531,8 +14878,9 @@ }, "node_modules/eslint-plugin-jest/node_modules/eslint-visitor-keys": { "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true, - "license": "Apache-2.0", "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -14542,8 +14890,9 @@ }, "node_modules/eslint-plugin-jest/node_modules/lru-cache": { "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, - "license": "ISC", "dependencies": { "yallist": "^4.0.0" }, @@ -14552,9 +14901,10 @@ } }, "node_modules/eslint-plugin-jest/node_modules/semver": { - "version": "7.5.4", + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", "dev": true, - "license": "ISC", "dependencies": { "lru-cache": "^6.0.0" }, @@ -14567,30 +14917,32 @@ }, "node_modules/eslint-plugin-jest/node_modules/yallist": { "version": "4.0.0", - "dev": true, - "license": "ISC" + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true }, "node_modules/eslint-plugin-jsx-a11y": { - "version": "6.7.1", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.20.7", - "aria-query": "^5.1.3", - "array-includes": "^3.1.6", - "array.prototype.flatmap": "^1.3.1", - "ast-types-flow": "^0.0.7", - "axe-core": "^4.6.2", - "axobject-query": "^3.1.1", + "version": "6.8.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz", + "integrity": "sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.23.2", + "aria-query": "^5.3.0", + "array-includes": "^3.1.7", + "array.prototype.flatmap": "^1.3.2", + "ast-types-flow": "^0.0.8", + "axe-core": "=4.7.0", + "axobject-query": "^3.2.1", "damerau-levenshtein": "^1.0.8", "emoji-regex": "^9.2.2", - "has": "^1.0.3", - "jsx-ast-utils": "^3.3.3", - "language-tags": "=1.0.5", + "es-iterator-helpers": "^1.0.15", + "hasown": "^2.0.0", + "jsx-ast-utils": "^3.3.5", + "language-tags": "^1.0.9", "minimatch": "^3.1.2", - "object.entries": "^1.1.6", - "object.fromentries": "^2.0.6", - "semver": "^6.3.0" + "object.entries": "^1.1.7", + "object.fromentries": "^2.0.7" }, "engines": { "node": ">=4.0" @@ -14599,23 +14951,43 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" } }, + "node_modules/eslint-plugin-jsx-a11y/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, + "node_modules/eslint-plugin-jsx-a11y/node_modules/axe-core": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz", + "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/eslint-plugin-prettier": { - "version": "5.0.0", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz", + "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==", "dev": true, - "license": "MIT", "dependencies": { "prettier-linter-helpers": "^1.0.0", - "synckit": "^0.8.5" + "synckit": "^0.8.6" }, "engines": { "node": "^14.18.0 || >=16.0.0" }, "funding": { - "url": "https://opencollective.com/prettier" + "url": "https://opencollective.com/eslint-plugin-prettier" }, "peerDependencies": { "@types/eslint": ">=8.0.0", "eslint": ">=8.0.0", + "eslint-config-prettier": "*", "prettier": ">=3.0.0" }, "peerDependenciesMeta": { @@ -14628,26 +15000,29 @@ } }, "node_modules/eslint-plugin-react": { - "version": "7.33.2", + "version": "7.34.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz", + "integrity": "sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==", "dev": true, - "license": "MIT", "dependencies": { - "array-includes": "^3.1.6", - "array.prototype.flatmap": "^1.3.1", - "array.prototype.tosorted": "^1.1.1", + "array-includes": "^3.1.7", + "array.prototype.findlast": "^1.2.4", + "array.prototype.flatmap": "^1.3.2", + "array.prototype.toreversed": "^1.1.2", + "array.prototype.tosorted": "^1.1.3", "doctrine": "^2.1.0", - "es-iterator-helpers": "^1.0.12", + "es-iterator-helpers": "^1.0.17", "estraverse": "^5.3.0", "jsx-ast-utils": "^2.4.1 || ^3.0.0", "minimatch": "^3.1.2", - "object.entries": "^1.1.6", - "object.fromentries": "^2.0.6", - "object.hasown": "^1.1.2", - "object.values": "^1.1.6", + "object.entries": "^1.1.7", + "object.fromentries": "^2.0.7", + "object.hasown": "^1.1.3", + "object.values": "^1.1.7", "prop-types": "^15.8.1", - "resolve": "^2.0.0-next.4", + "resolve": "^2.0.0-next.5", "semver": "^6.3.1", - "string.prototype.matchall": "^4.0.8" + "string.prototype.matchall": "^4.0.10" }, "engines": { "node": ">=4" @@ -14909,8 +15284,9 @@ }, "node_modules/espree": { "version": "9.6.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", + "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", "dev": true, - "license": "BSD-2-Clause", "dependencies": { "acorn": "^8.9.0", "acorn-jsx": "^5.3.2", @@ -14924,9 +15300,10 @@ } }, "node_modules/espree/node_modules/acorn": { - "version": "8.10.0", + "version": "8.11.3", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", + "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", "dev": true, - "license": "MIT", "bin": { "acorn": "bin/acorn" }, @@ -14936,8 +15313,9 @@ }, "node_modules/espree/node_modules/eslint-visitor-keys": { "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true, - "license": "Apache-2.0", "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -15822,16 +16200,17 @@ } }, "node_modules/flat-cache": { - "version": "3.1.0", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", + "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==", "dev": true, - "license": "MIT", "dependencies": { - "flatted": "^3.2.7", + "flatted": "^3.2.9", "keyv": "^4.5.3", "rimraf": "^3.0.2" }, "engines": { - "node": ">=12.0.0" + "node": "^10.12.0 || >=12.0.0" } }, "node_modules/flatted": { @@ -16223,9 +16602,13 @@ } }, "node_modules/function-bind": { - "version": "1.1.1", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", "dev": true, - "license": "MIT" + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/function.prototype.name": { "version": "1.1.6", @@ -16286,14 +16669,19 @@ } }, "node_modules/get-intrinsic": { - "version": "1.2.1", + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", + "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", "dev": true, - "license": "MIT", "dependencies": { - "function-bind": "^1.1.1", - "has": "^1.0.3", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", "has-proto": "^1.0.1", - "has-symbols": "^1.0.3" + "has-symbols": "^1.0.3", + "hasown": "^2.0.0" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -16360,12 +16748,14 @@ } }, "node_modules/get-symbol-description": { - "version": "1.0.0", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz", + "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.1.1" + "call-bind": "^1.0.5", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.4" }, "engines": { "node": ">= 0.4" @@ -17315,17 +17705,6 @@ "node": ">=6" } }, - "node_modules/has": { - "version": "1.0.3", - "dev": true, - "license": "MIT", - "dependencies": { - "function-bind": "^1.1.1" - }, - "engines": { - "node": ">= 0.4.0" - } - }, "node_modules/has-bigints": { "version": "1.0.2", "dev": true, @@ -17343,20 +17722,22 @@ } }, "node_modules/has-property-descriptors": { - "version": "1.0.0", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", + "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", "dev": true, - "license": "MIT", "dependencies": { - "get-intrinsic": "^1.1.1" + "es-define-property": "^1.0.0" }, "funding": { "url": "https://github.com/sponsors/ljharb" } }, "node_modules/has-proto": { - "version": "1.0.1", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", + "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", "dev": true, - "license": "MIT", "engines": { "node": ">= 0.4" }, @@ -17376,11 +17757,12 @@ } }, "node_modules/has-tostringtag": { - "version": "1.0.0", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", "dev": true, - "license": "MIT", "dependencies": { - "has-symbols": "^1.0.2" + "has-symbols": "^1.0.3" }, "engines": { "node": ">= 0.4" @@ -17455,6 +17837,18 @@ "node": ">=8" } }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/he": { "version": "1.2.0", "dev": true, @@ -18018,12 +18412,13 @@ "license": "ISC" }, "node_modules/internal-slot": { - "version": "1.0.5", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz", + "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==", "dev": true, - "license": "MIT", "dependencies": { - "get-intrinsic": "^1.2.0", - "has": "^1.0.3", + "es-errors": "^1.3.0", + "hasown": "^2.0.0", "side-channel": "^1.0.4" }, "engines": { @@ -18124,13 +18519,16 @@ } }, "node_modules/is-array-buffer": { - "version": "3.0.2", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", + "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==", "dev": true, - "license": "MIT", "dependencies": { "call-bind": "^1.0.2", - "get-intrinsic": "^1.2.0", - "is-typed-array": "^1.1.10" + "get-intrinsic": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -18225,11 +18623,12 @@ "license": "MIT" }, "node_modules/is-core-module": { - "version": "2.13.0", + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", + "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", "dev": true, - "license": "MIT", "dependencies": { - "has": "^1.0.3" + "hasown": "^2.0.0" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -18246,6 +18645,21 @@ "node": ">=0.10.0" } }, + "node_modules/is-data-view": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz", + "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==", + "dev": true, + "dependencies": { + "is-typed-array": "^1.1.13" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-date-object": { "version": "1.0.5", "dev": true, @@ -18374,37 +18788,6 @@ "node": ">=0.10.0" } }, - "node_modules/is-inside-container": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "is-docker": "^3.0.0" - }, - "bin": { - "is-inside-container": "cli.js" - }, - "engines": { - "node": ">=14.16" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/is-inside-container/node_modules/is-docker": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "bin": { - "is-docker": "cli.js" - }, - "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/is-installed-globally": { "version": "0.3.2", "dev": true, @@ -18461,9 +18844,10 @@ } }, "node_modules/is-negative-zero": { - "version": "2.0.2", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz", + "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==", "dev": true, - "license": "MIT", "engines": { "node": ">= 0.4" }, @@ -18585,11 +18969,15 @@ } }, "node_modules/is-shared-array-buffer": { - "version": "1.0.2", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz", + "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2" + "call-bind": "^1.0.7" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -18635,11 +19023,12 @@ } }, "node_modules/is-typed-array": { - "version": "1.1.12", + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz", + "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==", "dev": true, - "license": "MIT", "dependencies": { - "which-typed-array": "^1.1.11" + "which-typed-array": "^1.1.14" }, "engines": { "node": ">= 0.4" @@ -21448,21 +21837,27 @@ } }, "node_modules/known-css-properties": { - "version": "0.28.0", - "dev": true, - "license": "MIT" + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz", + "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==", + "dev": true }, "node_modules/language-subtag-registry": { "version": "0.3.22", - "dev": true, - "license": "CC0-1.0" + "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz", + "integrity": "sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==", + "dev": true }, "node_modules/language-tags": { - "version": "1.0.5", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz", + "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==", "dev": true, - "license": "MIT", "dependencies": { - "language-subtag-registry": "~0.3.2" + "language-subtag-registry": "^0.3.20" + }, + "engines": { + "node": ">=0.10" } }, "node_modules/last-run": { @@ -23910,9 +24305,10 @@ } }, "node_modules/object-inspect": { - "version": "1.12.3", + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", + "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==", "dev": true, - "license": "MIT", "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -23952,12 +24348,13 @@ } }, "node_modules/object.assign": { - "version": "4.1.4", + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz", + "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.4", + "call-bind": "^1.0.5", + "define-properties": "^1.2.1", "has-symbols": "^1.0.3", "object-keys": "^1.1.1" }, @@ -25012,6 +25409,15 @@ "node": ">=0.10.0" } }, + "node_modules/possible-typed-array-names": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", + "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==", + "dev": true, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/postcss": { "version": "8.4.35", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", @@ -25155,8 +25561,9 @@ }, "node_modules/postcss-media-query-parser": { "version": "0.2.3", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", + "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==", + "dev": true }, "node_modules/postcss-modules-extract-imports": { "version": "3.0.0", @@ -25236,7 +25643,9 @@ } }, "node_modules/postcss-scss": { - "version": "4.0.8", + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz", + "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==", "dev": true, "funding": [ { @@ -25252,7 +25661,6 @@ "url": "https://github.com/sponsors/ai" } ], - "license": "MIT", "engines": { "node": ">=12.0" }, @@ -25274,8 +25682,9 @@ }, "node_modules/postcss-sorting": { "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz", + "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==", "dev": true, - "license": "MIT", "peerDependencies": { "postcss": "^8.4.20" } @@ -25318,9 +25727,10 @@ } }, "node_modules/prettier": { - "version": "3.0.3", + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", + "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", "dev": true, - "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" }, @@ -26585,13 +26995,15 @@ } }, "node_modules/regexp.prototype.flags": { - "version": "1.5.1", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz", + "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "set-function-name": "^2.0.0" + "call-bind": "^1.0.6", + "define-properties": "^1.2.1", + "es-errors": "^1.3.0", + "set-function-name": "^2.0.1" }, "engines": { "node": ">= 0.4" @@ -26826,11 +27238,12 @@ "license": "MIT" }, "node_modules/resolve": { - "version": "2.0.0-next.4", + "version": "2.0.0-next.5", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz", + "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==", "dev": true, - "license": "MIT", "dependencies": { - "is-core-module": "^2.9.0", + "is-core-module": "^2.13.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, @@ -26993,20 +27406,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/run-applescript": { - "version": "5.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "execa": "^5.0.0" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/run-parallel": { "version": "1.2.0", "dev": true, @@ -27039,12 +27438,13 @@ } }, "node_modules/safe-array-concat": { - "version": "1.0.1", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz", + "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.2.1", + "call-bind": "^1.0.7", + "get-intrinsic": "^1.2.4", "has-symbols": "^1.0.3", "isarray": "^2.0.5" }, @@ -27083,14 +27483,18 @@ } }, "node_modules/safe-regex-test": { - "version": "1.0.0", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz", + "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.1.3", + "call-bind": "^1.0.6", + "es-errors": "^1.3.0", "is-regex": "^1.1.4" }, + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -27939,6 +28343,23 @@ "dev": true, "license": "ISC" }, + "node_modules/set-function-length": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", + "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", + "dev": true, + "dependencies": { + "define-data-property": "^1.1.4", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "gopd": "^1.0.1", + "has-property-descriptors": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/set-function-name": { "version": "2.0.1", "dev": true, @@ -28717,13 +29138,15 @@ } }, "node_modules/string.prototype.trim": { - "version": "1.2.8", + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz", + "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1" + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-abstract": "^1.23.0", + "es-object-atoms": "^1.0.0" }, "engines": { "node": ">= 0.4" @@ -28733,26 +29156,31 @@ } }, "node_modules/string.prototype.trimend": { - "version": "1.0.7", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz", + "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1" + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-object-atoms": "^1.0.0" }, "funding": { "url": "https://github.com/sponsors/ljharb" } }, "node_modules/string.prototype.trimstart": { - "version": "1.0.7", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz", + "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1" + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -28841,9 +29269,10 @@ "license": "ISC" }, "node_modules/stylelint": { - "version": "15.10.3", + "version": "15.11.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.11.0.tgz", + "integrity": "sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==", "dev": true, - "license": "MIT", "dependencies": { "@csstools/css-parser-algorithms": "^2.3.1", "@csstools/css-tokenizer": "^2.2.0", @@ -28852,12 +29281,12 @@ "balanced-match": "^2.0.0", "colord": "^2.9.3", "cosmiconfig": "^8.2.0", - "css-functions-list": "^3.2.0", + "css-functions-list": "^3.2.1", "css-tree": "^2.3.1", "debug": "^4.3.4", "fast-glob": "^3.3.1", "fastest-levenshtein": "^1.0.16", - "file-entry-cache": "^6.0.1", + "file-entry-cache": "^7.0.0", "global-modules": "^2.0.0", "globby": "^11.1.0", "globjoin": "^0.1.4", @@ -28866,13 +29295,13 @@ "import-lazy": "^4.0.0", "imurmurhash": "^0.1.4", "is-plain-object": "^5.0.0", - "known-css-properties": "^0.28.0", + "known-css-properties": "^0.29.0", "mathml-tag-names": "^2.1.3", "meow": "^10.1.5", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.27", + "postcss": "^8.4.28", "postcss-resolve-nested-selector": "^0.1.1", "postcss-safe-parser": "^6.0.0", "postcss-selector-parser": "^6.0.13", @@ -28898,25 +29327,30 @@ } }, "node_modules/stylelint-config-recommended": { - "version": "12.0.0", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-13.0.0.tgz", + "integrity": "sha512-EH+yRj6h3GAe/fRiyaoO2F9l9Tgg50AOFhaszyfov9v6ayXJ1IkSHwTxd7lB48FmOeSGDPLjatjO11fJpmarkQ==", "dev": true, - "license": "MIT", + "engines": { + "node": "^14.13.1 || >=16.0.0" + }, "peerDependencies": { - "stylelint": "^15.5.0" + "stylelint": "^15.10.0" } }, "node_modules/stylelint-config-recommended-scss": { - "version": "12.0.0", + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-13.1.0.tgz", + "integrity": "sha512-8L5nDfd+YH6AOoBGKmhH8pLWF1dpfY816JtGMePcBqqSsLU+Ysawx44fQSlMOJ2xTfI9yTGpup5JU77c17w1Ww==", "dev": true, - "license": "MIT", "dependencies": { - "postcss-scss": "^4.0.6", - "stylelint-config-recommended": "^12.0.0", - "stylelint-scss": "^5.0.0" + "postcss-scss": "^4.0.9", + "stylelint-config-recommended": "^13.0.0", + "stylelint-scss": "^5.3.0" }, "peerDependencies": { "postcss": "^8.3.3", - "stylelint": "^15.5.0" + "stylelint": "^15.10.0" }, "peerDependenciesMeta": { "postcss": { @@ -28924,43 +29358,33 @@ } } }, - "node_modules/stylelint-config-recommended-scss/node_modules/stylelint-scss": { - "version": "5.2.1", - "dev": true, - "license": "MIT", - "dependencies": { - "known-css-properties": "^0.28.0", - "postcss-media-query-parser": "^0.2.3", - "postcss-resolve-nested-selector": "^0.1.1", - "postcss-selector-parser": "^6.0.13", - "postcss-value-parser": "^4.2.0" - }, - "peerDependencies": { - "stylelint": "^14.5.1 || ^15.0.0" - } - }, "node_modules/stylelint-config-standard": { - "version": "33.0.0", + "version": "34.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-34.0.0.tgz", + "integrity": "sha512-u0VSZnVyW9VSryBG2LSO+OQTjN7zF9XJaAJRX/4EwkmU0R2jYwmBSN10acqZisDitS0CLiEiGjX7+Hrq8TAhfQ==", "dev": true, - "license": "MIT", "dependencies": { - "stylelint-config-recommended": "^12.0.0" + "stylelint-config-recommended": "^13.0.0" + }, + "engines": { + "node": "^14.13.1 || >=16.0.0" }, "peerDependencies": { - "stylelint": "^15.5.0" + "stylelint": "^15.10.0" } }, "node_modules/stylelint-config-standard-scss": { - "version": "10.0.0", + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-11.1.0.tgz", + "integrity": "sha512-5gnBgeNTgRVdchMwiFQPuBOtj9QefYtfXiddrOMJA2pI22zxt6ddI2s+e5Oh7/6QYl7QLJujGnaUR5YyGq72ow==", "dev": true, - "license": "MIT", "dependencies": { - "stylelint-config-recommended-scss": "^12.0.0", - "stylelint-config-standard": "^33.0.0" + "stylelint-config-recommended-scss": "^13.1.0", + "stylelint-config-standard": "^34.0.0" }, "peerDependencies": { "postcss": "^8.3.3", - "stylelint": "^15.5.0" + "stylelint": "^15.10.0" }, "peerDependenciesMeta": { "postcss": { @@ -28981,15 +29405,16 @@ } }, "node_modules/stylelint-order": { - "version": "6.0.3", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz", + "integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==", "dev": true, - "license": "MIT", "dependencies": { - "postcss": "^8.4.21", + "postcss": "^8.4.32", "postcss-sorting": "^8.0.2" }, "peerDependencies": { - "stylelint": "^14.0.0 || ^15.0.0" + "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.1" } }, "node_modules/stylelint-prettier": { @@ -29008,13 +29433,15 @@ } }, "node_modules/stylelint-scss": { - "version": "4.7.0", + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-5.3.2.tgz", + "integrity": "sha512-4LzLaayFhFyneJwLo0IUa8knuIvj+zF0vBFueQs4e3tEaAMIQX8q5th8ziKkgOavr6y/y9yoBe+RXN/edwLzsQ==", "dev": true, - "license": "MIT", "dependencies": { + "known-css-properties": "^0.29.0", "postcss-media-query-parser": "^0.2.3", "postcss-resolve-nested-selector": "^0.1.1", - "postcss-selector-parser": "^6.0.11", + "postcss-selector-parser": "^6.0.13", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { @@ -29070,6 +29497,18 @@ "dev": true, "license": "MIT" }, + "node_modules/stylelint/node_modules/file-entry-cache": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.2.tgz", + "integrity": "sha512-TfW7/1iI4Cy7Y8L6iqNdZQVvdXn0f8B4QcIXmkIbtTIe/Okm/nSlHb4IwGzRVOd3WfSieCgvf5cMzEfySAIl0g==", + "dev": true, + "dependencies": { + "flat-cache": "^3.2.0" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/stylelint/node_modules/global-modules": { "version": "2.0.0", "dev": true, @@ -29437,12 +29876,13 @@ "license": "BSD-3-Clause" }, "node_modules/synckit": { - "version": "0.8.5", + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz", + "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==", "dev": true, - "license": "MIT", "dependencies": { - "@pkgr/utils": "^2.3.1", - "tslib": "^2.5.0" + "@pkgr/core": "^0.1.0", + "tslib": "^2.6.2" }, "engines": { "node": "^14.18.0 || >=16.0.0" @@ -29914,17 +30354,6 @@ "dev": true, "license": "MIT" }, - "node_modules/titleize": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/tmpl": { "version": "1.0.5", "dev": true, @@ -30096,11 +30525,12 @@ } }, "node_modules/ts-api-utils": { - "version": "1.0.3", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", + "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==", "dev": true, - "license": "MIT", "engines": { - "node": ">=16.13.0" + "node": ">=16" }, "peerDependencies": { "typescript": ">=4.2.0" @@ -30745,9 +31175,10 @@ } }, "node_modules/tsconfig-paths": { - "version": "3.14.2", + "version": "3.15.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", + "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==", "dev": true, - "license": "MIT", "dependencies": { "@types/json5": "^0.0.29", "json5": "^1.0.2", @@ -30757,8 +31188,9 @@ }, "node_modules/tsconfig-paths/node_modules/json5": { "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, - "license": "MIT", "dependencies": { "minimist": "^1.2.0" }, @@ -30768,8 +31200,9 @@ }, "node_modules/tsconfig-paths/node_modules/strip-bom": { "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==", "dev": true, - "license": "MIT", "engines": { "node": ">=4" } @@ -30847,27 +31280,30 @@ } }, "node_modules/typed-array-buffer": { - "version": "1.0.0", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz", + "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.2.1", - "is-typed-array": "^1.1.10" + "call-bind": "^1.0.7", + "es-errors": "^1.3.0", + "is-typed-array": "^1.1.13" }, "engines": { "node": ">= 0.4" } }, "node_modules/typed-array-byte-length": { - "version": "1.0.0", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz", + "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2", + "call-bind": "^1.0.7", "for-each": "^0.3.3", - "has-proto": "^1.0.1", - "is-typed-array": "^1.1.10" + "gopd": "^1.0.1", + "has-proto": "^1.0.3", + "is-typed-array": "^1.1.13" }, "engines": { "node": ">= 0.4" @@ -30877,15 +31313,17 @@ } }, "node_modules/typed-array-byte-offset": { - "version": "1.0.0", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz", + "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==", "dev": true, - "license": "MIT", "dependencies": { - "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.2", + "available-typed-arrays": "^1.0.7", + "call-bind": "^1.0.7", "for-each": "^0.3.3", - "has-proto": "^1.0.1", - "is-typed-array": "^1.1.10" + "gopd": "^1.0.1", + "has-proto": "^1.0.3", + "is-typed-array": "^1.1.13" }, "engines": { "node": ">= 0.4" @@ -30895,13 +31333,20 @@ } }, "node_modules/typed-array-length": { - "version": "1.0.4", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz", + "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==", "dev": true, - "license": "MIT", "dependencies": { - "call-bind": "^1.0.2", + "call-bind": "^1.0.7", "for-each": "^0.3.3", - "is-typed-array": "^1.1.9" + "gopd": "^1.0.1", + "has-proto": "^1.0.3", + "is-typed-array": "^1.1.13", + "possible-typed-array-names": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -32196,15 +32641,16 @@ "license": "ISC" }, "node_modules/which-typed-array": { - "version": "1.1.11", + "version": "1.1.15", + "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz", + "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==", "dev": true, - "license": "MIT", "dependencies": { - "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.2", + "available-typed-arrays": "^1.0.7", + "call-bind": "^1.0.7", "for-each": "^0.3.3", "gopd": "^1.0.1", - "has-tostringtag": "^1.0.0" + "has-tostringtag": "^1.0.2" }, "engines": { "node": ">= 0.4" diff --git a/package.json b/package.json index be5b376615..4d5ce2dcd1 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,8 @@ "@percy/storybook": "^5.0.1", "@skyscanner/bpk-foundations-web": "^17.9.0", "@skyscanner/bpk-svgs": "^19.1.0", - "@skyscanner/stylelint-config-skyscanner": "^10.0.0", + "@skyscanner/eslint-config-skyscanner": "^17.4.0", + "@skyscanner/stylelint-config-skyscanner": "^11.1.0", "@storybook/addon-a11y": "^7.6.17", "@storybook/addon-actions": "^7.6.17", "@storybook/addon-docs": "7.6.17", diff --git a/packages/bpk-animate-height/src/accessibility-test.js b/packages/bpk-animate-height/src/accessibility-test.js index e58cc9556a..79eeb73977 100644 --- a/packages/bpk-animate-height/src/accessibility-test.js +++ b/packages/bpk-animate-height/src/accessibility-test.js @@ -18,8 +18,8 @@ /* @flow strict */ -import { axe } from 'jest-axe'; import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; import AnimateHeight from './AnimateHeight'; diff --git a/packages/bpk-component-accordion/index.js b/packages/bpk-component-accordion/index.js index 6e42dc9bbf..0be49bf9c7 100644 --- a/packages/bpk-component-accordion/index.js +++ b/packages/bpk-component-accordion/index.js @@ -20,8 +20,8 @@ import BpkAccordion from './src/BpkAccordion'; import BpkAccordionItem from './src/BpkAccordionItem'; -import withSingleItemAccordionState from './src/withSingleItemAccordionState'; import withAccordionItemState from './src/withAccordionItemState'; +import withSingleItemAccordionState from './src/withSingleItemAccordionState'; export { BpkAccordion, diff --git a/packages/bpk-component-accordion/src/BpkAccordionItem.js b/packages/bpk-component-accordion/src/BpkAccordionItem.js index 109f474979..e3a0bfb205 100644 --- a/packages/bpk-component-accordion/src/BpkAccordionItem.js +++ b/packages/bpk-component-accordion/src/BpkAccordionItem.js @@ -22,10 +22,10 @@ import PropTypes from 'prop-types'; import { Node, Element, useContext, cloneElement } from 'react'; import AnimateHeight from '../../bpk-animate-height'; +import { withButtonAlignment } from '../../bpk-component-icon'; import ChevronDownIcon from '../../bpk-component-icon/sm/chevron-down'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; import { cssModules } from '../../bpk-react-utils'; -import { withButtonAlignment } from '../../bpk-component-icon'; import { BpkAccordionContext } from './BpkAccordion'; diff --git a/packages/bpk-component-autosuggest/src/BpkAutosuggest-test.js b/packages/bpk-component-autosuggest/src/BpkAutosuggest-test.js index ede6d83b0e..3c6e097dc0 100644 --- a/packages/bpk-component-autosuggest/src/BpkAutosuggest-test.js +++ b/packages/bpk-component-autosuggest/src/BpkAutosuggest-test.js @@ -18,8 +18,8 @@ /* @flow strict */ -import ReactTestUtils from 'react-dom/test-utils'; import { render } from '@testing-library/react'; +import ReactTestUtils from 'react-dom/test-utils'; import BpkAutosuggest from './BpkAutosuggest'; diff --git a/packages/bpk-component-banner-alert/index.ts b/packages/bpk-component-banner-alert/index.ts index 3d45a7cc9e..b916472cfd 100644 --- a/packages/bpk-component-banner-alert/index.ts +++ b/packages/bpk-component-banner-alert/index.ts @@ -20,8 +20,8 @@ import BpkBannerAlert from './src/BpkBannerAlert'; import BpkBannerAlertDismissable from './src/BpkBannerAlertDismissable'; import BpkBannerAlertExpandable from './src/BpkBannerAlertExpandable'; import { ALERT_TYPES } from './src/common-types'; -import withBannerAlertState from './src/withBannerAlertState'; import themeAttributes from './src/themeAttributes'; +import withBannerAlertState from './src/withBannerAlertState'; export { ALERT_TYPES, diff --git a/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx b/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx index 38e3dcaad3..2faa452084 100644 --- a/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx +++ b/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx @@ -25,9 +25,9 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { cssModules } from '../../bpk-react-utils'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkAnimateHeight from '../../bpk-animate-height'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkAnimateAndFade.module.scss'; diff --git a/packages/bpk-component-banner-alert/src/BpkBannerAlertInner.tsx b/packages/bpk-component-banner-alert/src/BpkBannerAlertInner.tsx index 8f6b19de17..fc1ef30af8 100644 --- a/packages/bpk-component-banner-alert/src/BpkBannerAlertInner.tsx +++ b/packages/bpk-component-banner-alert/src/BpkBannerAlertInner.tsx @@ -25,17 +25,17 @@ import type { ReactNode, FunctionComponent, SVGProps } from 'react'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { withButtonAlignment } from '../../bpk-component-icon'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkAnimateHeight from '../../bpk-animate-height'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkCloseButton from '../../bpk-component-close-button'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import TickCircleIcon from '../../bpk-component-icon/sm/tick-circle'; +import { withButtonAlignment } from '../../bpk-component-icon'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ChevronDownIcon from '../../bpk-component-icon/lg/chevron-down'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import InfoCircleIcon from '../../bpk-component-icon/sm/information-circle'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import TickCircleIcon from '../../bpk-component-icon/sm/tick-circle'; import { cssModules } from '../../bpk-react-utils'; import AnimateAndFade from './AnimateAndFade'; diff --git a/packages/bpk-component-banner-alert/src/accessibility-test.tsx b/packages/bpk-component-banner-alert/src/accessibility-test.tsx index a789e5a021..e16adf5d54 100644 --- a/packages/bpk-component-banner-alert/src/accessibility-test.tsx +++ b/packages/bpk-component-banner-alert/src/accessibility-test.tsx @@ -16,8 +16,8 @@ * limitations under the License. */ -import { axe } from 'jest-axe'; import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; import BpkBannerAlert from './BpkBannerAlert'; import { ALERT_TYPES } from './common-types'; diff --git a/packages/bpk-component-banner-alert/src/withBannerAlertState-test.tsx b/packages/bpk-component-banner-alert/src/withBannerAlertState-test.tsx index 39fd139977..62e41474a1 100644 --- a/packages/bpk-component-banner-alert/src/withBannerAlertState-test.tsx +++ b/packages/bpk-component-banner-alert/src/withBannerAlertState-test.tsx @@ -19,9 +19,9 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { ALERT_TYPES } from './common-types'; import BpkBannerAlertDismissable from './BpkBannerAlertDismissable'; import BpkBannerAlertExpandable from './BpkBannerAlertExpandable'; +import { ALERT_TYPES } from './common-types'; import withBannerAlertState from './withBannerAlertState'; const message = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'; diff --git a/packages/bpk-component-banner-alert/src/withBannerAlertState.tsx b/packages/bpk-component-banner-alert/src/withBannerAlertState.tsx index 8464ba0471..45a8a0437f 100644 --- a/packages/bpk-component-banner-alert/src/withBannerAlertState.tsx +++ b/packages/bpk-component-banner-alert/src/withBannerAlertState.tsx @@ -23,8 +23,8 @@ import { wrapDisplayName } from '../../bpk-react-utils'; import BpkBannerAlertExpandable from './BpkBannerAlertExpandable'; -import type { Props as BpkBannerAlertExpandableProps } from './BpkBannerAlertExpandable'; import type { Props as BpkBannerAlertDismissableProps } from './BpkBannerAlertDismissable'; +import type { Props as BpkBannerAlertExpandableProps } from './BpkBannerAlertExpandable'; export type WithBannerAlertStateProps = { onHide?: () => void; diff --git a/packages/bpk-component-barchart/src/BpkBarchart.js b/packages/bpk-component-barchart/src/BpkBarchart.js index 98b5c198e2..342c497959 100644 --- a/packages/bpk-component-barchart/src/BpkBarchart.js +++ b/packages/bpk-component-barchart/src/BpkBarchart.js @@ -21,30 +21,30 @@ import PropTypes from 'prop-types'; import { Component } from 'react'; -import debounce from 'lodash.debounce'; import { scaleLinear, scaleBand } from 'd3-scale'; +import debounce from 'lodash.debounce'; import { lineHeightSm, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { cssModules } from '../../bpk-react-utils'; import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container'; +import { cssModules } from '../../bpk-react-utils'; -import BpkBarchartDefs from './BpkBarchartDefs'; +import BpkBarchartBar from './BpkBarchartBar'; import BpkBarchartBars from './BpkBarchartBars'; -import BpkChartDataTable from './BpkChartDataTable'; -import BpkChartMargin from './BpkChartMargin'; +import BpkBarchartDefs from './BpkBarchartDefs'; import BpkChartAxis from './BpkChartAxis'; +import BpkChartDataTable from './BpkChartDataTable'; import BpkChartGridLines from './BpkChartGridLines'; -import BpkBarchartBar from './BpkBarchartBar'; -import dataProp from './customPropTypes'; -import { identity, remToPx } from './utils'; +import BpkChartMargin from './BpkChartMargin'; import { applyArrayRTLTransform, applyMarginRTLTransform, } from './RTLtransforms'; +import dataProp from './customPropTypes'; import { ORIENTATION_X, ORIENTATION_Y } from './orientation'; +import { identity, remToPx } from './utils'; import STYLES from './BpkBarchart.module.scss'; diff --git a/packages/bpk-component-barchart/src/BpkBarchartBars-test.js b/packages/bpk-component-barchart/src/BpkBarchartBars-test.js index c0310f70e4..69a63c736f 100644 --- a/packages/bpk-component-barchart/src/BpkBarchartBars-test.js +++ b/packages/bpk-component-barchart/src/BpkBarchartBars-test.js @@ -20,15 +20,15 @@ // TODO: remove this once we update the Chart implementation to accept values // other than pixels -/* eslint-disable backpack/use-tokens */ + import { render, fireEvent, screen } from '@testing-library/react'; import { scaleLinear, scaleBand } from 'd3-scale'; import data from '../data.json'; -import BpkBarchartBars from './BpkBarchartBars'; import BpkBarchartBar from './BpkBarchartBar'; +import BpkBarchartBars from './BpkBarchartBars'; const margin = { top: 10, diff --git a/packages/bpk-component-barchart/src/BpkChartAxis-test.js b/packages/bpk-component-barchart/src/BpkChartAxis-test.js index d45b865af1..e0d6e331b8 100644 --- a/packages/bpk-component-barchart/src/BpkChartAxis-test.js +++ b/packages/bpk-component-barchart/src/BpkChartAxis-test.js @@ -20,7 +20,7 @@ // TODO: remove this once we update the Chart implementation to accept values // other than pixels -/* eslint-disable backpack/use-tokens */ + import { render } from '@testing-library/react'; import { scaleLinear, scaleBand } from 'd3-scale'; diff --git a/packages/bpk-component-barchart/src/BpkChartAxis.js b/packages/bpk-component-barchart/src/BpkChartAxis.js index 9d9580d2b8..904dccd3fe 100644 --- a/packages/bpk-component-barchart/src/BpkChartAxis.js +++ b/packages/bpk-component-barchart/src/BpkChartAxis.js @@ -18,8 +18,8 @@ /* @flow strict */ -import type { Node } from 'react'; import PropTypes from 'prop-types'; +import type { Node } from 'react'; import { lineHeightSm, diff --git a/packages/bpk-component-barchart/src/BpkChartGridLines-test.js b/packages/bpk-component-barchart/src/BpkChartGridLines-test.js index f8cda0ea54..7585c328c5 100644 --- a/packages/bpk-component-barchart/src/BpkChartGridLines-test.js +++ b/packages/bpk-component-barchart/src/BpkChartGridLines-test.js @@ -20,7 +20,7 @@ // TODO: remove this once we update the Chart implementation to accept values // other than pixels -/* eslint-disable backpack/use-tokens */ + import { render } from '@testing-library/react'; import { scaleLinear, scaleBand } from 'd3-scale'; diff --git a/packages/bpk-component-barchart/src/BpkChartMargin.js b/packages/bpk-component-barchart/src/BpkChartMargin.js index e25036de02..6b76c3692f 100644 --- a/packages/bpk-component-barchart/src/BpkChartMargin.js +++ b/packages/bpk-component-barchart/src/BpkChartMargin.js @@ -18,8 +18,8 @@ /* @flow strict */ -import type { Node } from 'react'; import PropTypes from 'prop-types'; +import type { Node } from 'react'; type Props = { children: Node, diff --git a/packages/bpk-component-barchart/src/accessibility-test.js b/packages/bpk-component-barchart/src/accessibility-test.js index 20615ee296..2a38e6424a 100644 --- a/packages/bpk-component-barchart/src/accessibility-test.js +++ b/packages/bpk-component-barchart/src/accessibility-test.js @@ -18,8 +18,8 @@ /* @flow strict */ -import { axe } from 'jest-axe'; import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; import data from '../data.json'; diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx index f5ec42399d..0d4be2cf9b 100644 --- a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx +++ b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx @@ -20,12 +20,12 @@ import { useState } from "react"; import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint"; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import { BpkButtonLink } from '../../bpk-component-link'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkCloseButton from '../../bpk-component-close-button'; -import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils"; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import { BpkButtonLink } from '../../bpk-component-link'; import BpkNavigationBar from "../../bpk-component-navigation-bar"; import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText"; +import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils"; import STYLES from './BpkBottomSheet.module.scss'; diff --git a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js index efd7cb48d6..165bc489a0 100644 --- a/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js +++ b/packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js @@ -21,11 +21,11 @@ import PropTypes from 'prop-types'; import type { Node } from 'react'; +import { withRtlSupport } from '../../bpk-component-icon'; +import ArrowRight from '../../bpk-component-icon/sm/arrow-right'; import BpkLink from '../../bpk-component-link'; import BpkText from '../../bpk-component-text'; import { cssModules } from '../../bpk-react-utils'; -import { withRtlSupport } from '../../bpk-component-icon'; -import ArrowRight from '../../bpk-component-icon/sm/arrow-right'; import STYLES from './BpkBreadcrumbItem.module.scss'; diff --git a/packages/bpk-component-breadcrumb/src/accessibility-test.js b/packages/bpk-component-breadcrumb/src/accessibility-test.js index 00fc1300be..80570defaf 100644 --- a/packages/bpk-component-breadcrumb/src/accessibility-test.js +++ b/packages/bpk-component-breadcrumb/src/accessibility-test.js @@ -18,8 +18,8 @@ /* @flow strict */ -import { axe } from 'jest-axe'; import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; import BpkBreadcrumb from './BpkBreadcrumb'; import BpkBreadcrumbItem from './BpkBreadcrumbItem'; diff --git a/packages/bpk-component-button/index.js b/packages/bpk-component-button/index.js index ccc2653992..d89ef3938d 100644 --- a/packages/bpk-component-button/index.js +++ b/packages/bpk-component-button/index.js @@ -19,16 +19,16 @@ /* @flow strict */ import BpkButton from './src/BpkButton'; // eslint-disable-line import/no-cycle -import { BpkButtonV2 } from './src/BpkButtonV2/BpkButton'; +import BpkButtonDestructive from './src/BpkButtonDestructive'; +import BpkButtonFeatured from './src/BpkButtonFeatured'; +import BpkButtonLink from './src/BpkButtonLink'; +import BpkButtonLinkOnDark from './src/BpkButtonLinkOnDark'; 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 { BpkButtonV2 } from './src/BpkButtonV2/BpkButton'; export { BUTTON_TYPES, SIZE_TYPES } from './src/BpkButtonV2/common-types'; diff --git a/packages/bpk-component-button/src/BpkButtonDestructive.js b/packages/bpk-component-button/src/BpkButtonDestructive.js index 2218ac0c4f..4a61251c38 100644 --- a/packages/bpk-component-button/src/BpkButtonDestructive.js +++ b/packages/bpk-component-button/src/BpkButtonDestructive.js @@ -18,8 +18,8 @@ /* @flow strict */ -import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; +import { type Props, defaultProps, propTypes } from './common-types'; import STYLES from './BpkButtonDestructive.module.scss'; diff --git a/packages/bpk-component-button/src/BpkButtonFeatured.js b/packages/bpk-component-button/src/BpkButtonFeatured.js index 36a2dbc8f5..650af85aae 100644 --- a/packages/bpk-component-button/src/BpkButtonFeatured.js +++ b/packages/bpk-component-button/src/BpkButtonFeatured.js @@ -18,8 +18,8 @@ /* @flow strict */ -import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; +import { type Props, defaultProps, propTypes } from './common-types'; import STYLES from './BpkButtonFeatured.module.scss'; diff --git a/packages/bpk-component-button/src/BpkButtonLink.js b/packages/bpk-component-button/src/BpkButtonLink.js index 6f4e7f1cad..be12c7dc16 100644 --- a/packages/bpk-component-button/src/BpkButtonLink.js +++ b/packages/bpk-component-button/src/BpkButtonLink.js @@ -18,12 +18,12 @@ /* @flow strict */ +import BpkButtonBase, { cssModules } from './BpkButtonBase'; import { type Props as CommonProps, defaultProps, propTypes, } from './common-types'; -import BpkButtonBase, { cssModules } from './BpkButtonBase'; import STYLES from './BpkButtonLink.module.scss'; diff --git a/packages/bpk-component-button/src/BpkButtonLinkOnDark.js b/packages/bpk-component-button/src/BpkButtonLinkOnDark.js index 43872f5b42..4827ff9840 100644 --- a/packages/bpk-component-button/src/BpkButtonLinkOnDark.js +++ b/packages/bpk-component-button/src/BpkButtonLinkOnDark.js @@ -18,12 +18,12 @@ /* @flow strict */ +import BpkButtonBase, { cssModules } from './BpkButtonBase'; import { type Props as CommonProps, defaultProps, propTypes, } from './common-types'; -import BpkButtonBase, { cssModules } from './BpkButtonBase'; import STYLES from './BpkButtonLinkOnDark.module.scss'; diff --git a/packages/bpk-component-button/src/BpkButtonPrimary.js b/packages/bpk-component-button/src/BpkButtonPrimary.js index 5557dcab8f..7ef49003f8 100644 --- a/packages/bpk-component-button/src/BpkButtonPrimary.js +++ b/packages/bpk-component-button/src/BpkButtonPrimary.js @@ -18,8 +18,8 @@ /* @flow strict */ -import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase from './BpkButtonBase'; +import { type Props, defaultProps, propTypes } from './common-types'; // TODO: BpkButtonBase has the primary button style as it wasn't removed to // avoid a breaking change in the mixin. Review after this is tested. diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.js b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.js index 5c4cef94f1..3fb2d4b24d 100644 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.js +++ b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.js @@ -18,8 +18,8 @@ /* @flow strict */ -import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; +import { type Props, defaultProps, propTypes } from './common-types'; import STYLES from './BpkButtonPrimaryOnDark.module.scss'; diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.js b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.js index cb141a8a06..d4b2e947db 100644 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.js +++ b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.js @@ -18,8 +18,8 @@ /* @flow strict */ -import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; +import { type Props, defaultProps, propTypes } from './common-types'; import STYLES from './BpkButtonPrimaryOnLight.module.scss'; diff --git a/packages/bpk-component-button/src/BpkButtonSecondary.js b/packages/bpk-component-button/src/BpkButtonSecondary.js index 9e54f2c771..68f98d6c65 100644 --- a/packages/bpk-component-button/src/BpkButtonSecondary.js +++ b/packages/bpk-component-button/src/BpkButtonSecondary.js @@ -18,8 +18,8 @@ /* @flow strict */ -import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; +import { type Props, defaultProps, propTypes } from './common-types'; import STYLES from './BpkButtonSecondary.module.scss'; diff --git a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.js b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.js index 308f0c71fd..010e40522d 100644 --- a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.js +++ b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.js @@ -18,8 +18,8 @@ /* @flow strict */ -import { type Props, defaultProps, propTypes } from './common-types'; import BpkButtonBase, { cssModules } from './BpkButtonBase'; +import { type Props, defaultProps, propTypes } from './common-types'; import STYLES from './BpkButtonSecondaryOnDark.module.scss'; diff --git a/packages/bpk-component-button/src/BpkButtonV2/accessibility-test.tsx b/packages/bpk-component-button/src/BpkButtonV2/accessibility-test.tsx index 2e16eae45a..e087326319 100644 --- a/packages/bpk-component-button/src/BpkButtonV2/accessibility-test.tsx +++ b/packages/bpk-component-button/src/BpkButtonV2/accessibility-test.tsx @@ -16,8 +16,8 @@ * limitations under the License. */ -import { axe } from 'jest-axe'; import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; import { BpkButtonV2 as BpkButton } from './BpkButton'; diff --git a/packages/bpk-component-button/src/accessibility-test.js b/packages/bpk-component-button/src/accessibility-test.js index cd455d6950..ece04ceb82 100644 --- a/packages/bpk-component-button/src/accessibility-test.js +++ b/packages/bpk-component-button/src/accessibility-test.js @@ -16,8 +16,8 @@ * limitations under the License. */ -import { axe } from 'jest-axe'; import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; import BpkButton from './BpkButton'; diff --git a/packages/bpk-component-button/src/common-types.js b/packages/bpk-component-button/src/common-types.js index 8a3c4499f0..a9b2c49aa1 100644 --- a/packages/bpk-component-button/src/common-types.js +++ b/packages/bpk-component-button/src/common-types.js @@ -18,8 +18,8 @@ /* @flow strict */ -import { type Node } from 'react'; import PropTypes from 'prop-types'; +import { type Node } from 'react'; export type Props = { children: Node, diff --git a/packages/bpk-component-calendar/index.ts b/packages/bpk-component-calendar/index.ts index 937675ad36..5bf07c3e20 100644 --- a/packages/bpk-component-calendar/index.ts +++ b/packages/bpk-component-calendar/index.ts @@ -19,15 +19,15 @@ import BpkCalendarContainer, { withCalendarState, } from './src/BpkCalendarContainer'; +import BpkCalendarDate, { + ROW_TYPES, + SELECTION_TYPES, +} from './src/BpkCalendarDate'; import BpkCalendarGrid, { BpkCalendarGridWithTransition, } from './src/BpkCalendarGrid'; import BpkCalendarGridHeader from './src/BpkCalendarGridHeader'; import BpkCalendarNav from './src/BpkCalendarNav'; -import BpkCalendarDate, { - ROW_TYPES, - SELECTION_TYPES, -} from './src/BpkCalendarDate'; import composeCalendar from './src/composeCalendar'; import { CALENDAR_SELECTION_TYPE } from './src/custom-proptypes'; import CustomPropTypes, { @@ -37,6 +37,8 @@ import CustomPropTypes, { import * as DateUtils from './src/date-utils'; import themeAttributes from './src/themeAttributes'; +import type { Props as BpkCalendarDateProps } from './src/BpkCalendarDate'; +import type { Props as BpkCalendarGridProps } from './src/BpkCalendarGrid'; import type { DaysOfWeek, ReactComponent, @@ -44,8 +46,6 @@ import type { WeekDayKey, SelectionConfiguration, } from './src/custom-proptypes'; -import type { Props as BpkCalendarDateProps } from './src/BpkCalendarDate'; -import type { Props as BpkCalendarGridProps } from './src/BpkCalendarGrid'; export default BpkCalendarContainer; diff --git a/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx b/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx index 7ef3209044..e37d0295dd 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx @@ -21,12 +21,12 @@ import { Component } from 'react'; import { isRTL } from '../../bpk-react-utils'; -import { CALENDAR_SELECTION_TYPE } from './custom-proptypes'; -import BpkCalendarNav from './BpkCalendarNav'; +import BpkCalendarDate from './BpkCalendarDate'; import { BpkCalendarGridWithTransition } from './BpkCalendarGrid'; import BpkCalendarGridHeader from './BpkCalendarGridHeader'; -import BpkCalendarDate from './BpkCalendarDate'; +import BpkCalendarNav from './BpkCalendarNav'; import composeCalendar from './composeCalendar'; +import { CALENDAR_SELECTION_TYPE } from './custom-proptypes'; import { addDays, addMonths, diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid-test.tsx b/packages/bpk-component-calendar/src/BpkCalendarGrid-test.tsx index 71f7ec184e..06023e071c 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGrid-test.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarGrid-test.tsx @@ -19,8 +19,8 @@ import PropTypes from 'prop-types'; import { render, screen } from '@testing-library/react'; -import { addMonths, isWeekend } from 'date-fns'; import userEvent from '@testing-library/user-event'; +import { addMonths, isWeekend } from 'date-fns'; import { colorMonteverde, @@ -29,8 +29,8 @@ import { import { formatDateFull } from '../test-utils'; -import BpkCalendarGrid from './BpkCalendarGrid'; import BpkCalendarDate from './BpkCalendarDate'; +import BpkCalendarGrid from './BpkCalendarGrid'; describe('BpkCalendarGrid', () => { it('should render correctly with a different "weekStartsOn" attribute', () => { diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss index e93516036b..5e24e93dae 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss @@ -20,7 +20,6 @@ @use '../../unstable__bpk-mixins/utils'; .bpk-calendar-grid { - width: 100%; border-collapse: separate; border-spacing: 0; diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx b/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx index 29bef88130..237c3c2162 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx @@ -21,15 +21,15 @@ import { Component } from 'react'; import { cssModules, isDeviceIos } from '../../bpk-react-utils'; +import { addCalendarGridTransition } from './BpkCalendarGridTransition'; import Week from './Week'; +import { CALENDAR_SELECTION_TYPE } from './custom-proptypes'; import { addMonths, formatIsoDate, getCalendarMonthWeeks, isSameMonth, } from './date-utils'; -import { CALENDAR_SELECTION_TYPE } from './custom-proptypes'; -import { addCalendarGridTransition } from './BpkCalendarGridTransition'; import type { DateModifiers, SelectionConfiguration } from './custom-proptypes'; diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.tsx b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.tsx index 8a18ce3ea8..beebddecf3 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.tsx @@ -21,11 +21,6 @@ import { Component } from 'react'; import { cssModules, isRTL } from '../../bpk-react-utils'; -import { - getCalendarGridWidth, - getTransformStyles, - isTransitionEndSupported, -} from './utils'; import { addMonths, isSameMonth, @@ -37,6 +32,11 @@ import { isWithinRange, getMonthRange, } from './date-utils'; +import { + getCalendarGridWidth, + getTransformStyles, + isTransitionEndSupported, +} from './utils'; import STYLES from './BpkCalendarGridTransition.module.scss'; diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav-test.tsx b/packages/bpk-component-calendar/src/BpkCalendarNav-test.tsx index ecf9b0c927..7ac042d278 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarNav-test.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarNav-test.tsx @@ -17,8 +17,8 @@ */ import { render, screen } from '@testing-library/react'; -import { format } from 'date-fns/format'; import userEvent from '@testing-library/user-event'; +import { format } from 'date-fns/format'; import BpkCalendarNav from './BpkCalendarNav'; diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav.tsx b/packages/bpk-component-calendar/src/BpkCalendarNav.tsx index 2a5a505fda..91ae1540ed 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarNav.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarNav.tsx @@ -18,6 +18,7 @@ import type { ChangeEvent, MouseEvent } from 'react'; +import BpkAriaLive from '../../bpk-component-aria-live'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. @@ -25,7 +26,6 @@ import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkSelect from '../../bpk-component-select'; import { cssModules } from '../../bpk-react-utils'; -import BpkAriaLive from '../../bpk-component-aria-live'; import { addMonths, diff --git a/packages/bpk-component-calendar/src/Week.tsx b/packages/bpk-component-calendar/src/Week.tsx index da8fdbbcbc..a202390ae2 100644 --- a/packages/bpk-component-calendar/src/Week.tsx +++ b/packages/bpk-component-calendar/src/Week.tsx @@ -21,6 +21,8 @@ import { Component } from 'react'; import { cssModules } from '../../bpk-react-utils'; +import { SELECTION_TYPES } from './BpkCalendarDate'; +import { CALENDAR_SELECTION_TYPE } from './custom-proptypes'; import { isSameDay, isSameWeek, @@ -30,8 +32,6 @@ import { startOfMonth, endOfMonth, } from './date-utils'; -import { CALENDAR_SELECTION_TYPE } from './custom-proptypes'; -import { SELECTION_TYPES } from './BpkCalendarDate'; import type { DateModifiers, diff --git a/packages/bpk-component-calendar/src/date-utils.ts b/packages/bpk-component-calendar/src/date-utils.ts index c0a4a0547a..6d6a101efb 100644 --- a/packages/bpk-component-calendar/src/date-utils.ts +++ b/packages/bpk-component-calendar/src/date-utils.ts @@ -16,27 +16,27 @@ * limitations under the License. */ -import { startOfMonth } from 'date-fns/startOfMonth'; +import { addDays } from 'date-fns/addDays'; +import { addMonths } from 'date-fns/addMonths'; +import { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'; import { endOfMonth } from 'date-fns/endOfMonth'; -import { lastDayOfMonth } from 'date-fns/lastDayOfMonth'; +import { format }from 'date-fns/format'; import { getDay }from 'date-fns/getDay'; -import { isWithinInterval as isWithinRange } from 'date-fns/isWithinInterval'; -import { isToday } from 'date-fns/isToday'; -import { isSaturday } from 'date-fns/isSaturday'; -import { isSunday } from 'date-fns/isSunday'; +import { isAfter } from 'date-fns/isAfter'; +import { isBefore } from 'date-fns/isBefore'; import { isSameDay } from 'date-fns/isSameDay'; -import { isSameWeek } from 'date-fns/isSameWeek'; import { isSameMonth } from 'date-fns/isSameMonth'; -import { isBefore } from 'date-fns/isBefore'; -import { isAfter } from 'date-fns/isAfter'; -import { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'; -import { addDays } from 'date-fns/addDays'; -import { addMonths } from 'date-fns/addMonths'; +import { isSameWeek } from 'date-fns/isSameWeek'; +import { isSaturday } from 'date-fns/isSaturday'; +import { isSunday } from 'date-fns/isSunday'; +import { isToday } from 'date-fns/isToday'; +import { isWithinInterval as isWithinRange } from 'date-fns/isWithinInterval'; +import { lastDayOfMonth } from 'date-fns/lastDayOfMonth'; +import { parseISO } from 'date-fns/parseISO'; import { setMonth } from 'date-fns/setMonth'; import { setYear } from 'date-fns/setYear'; import { startOfDay } from 'date-fns/startOfDay'; -import { parseISO } from 'date-fns/parseISO'; -import { format }from 'date-fns/format'; +import { startOfMonth } from 'date-fns/startOfMonth'; import type { DaysOfWeek } from './custom-proptypes'; diff --git a/packages/bpk-component-card-button/src/BpkSaveButton.tsx b/packages/bpk-component-card-button/src/BpkSaveButton.tsx index 9ede49edf7..57a2c7e20d 100644 --- a/packages/bpk-component-card-button/src/BpkSaveButton.tsx +++ b/packages/bpk-component-card-button/src/BpkSaveButton.tsx @@ -20,6 +20,7 @@ import type { MouseEvent } from 'react'; import { useState } from 'react'; import { BpkButtonV2 } from '../../bpk-component-button'; +import { withLargeButtonAlignment } from '../../bpk-component-icon'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkHeartIcon from '../../bpk-component-icon/lg/heart'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. @@ -28,7 +29,6 @@ import BpkHeartOutlineIcon from '../../bpk-component-icon/lg/heart--outline'; import BpkHeartIconSm from '../../bpk-component-icon/sm/heart'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkHeartOutlineIconSm from '../../bpk-component-icon/sm/heart--outline'; -import { withLargeButtonAlignment } from '../../bpk-component-icon'; import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkSaveButton.module.scss'; diff --git a/packages/bpk-component-card/src/accessibility-test.js b/packages/bpk-component-card/src/accessibility-test.js index 7004cb3758..d460f595e5 100644 --- a/packages/bpk-component-card/src/accessibility-test.js +++ b/packages/bpk-component-card/src/accessibility-test.js @@ -24,8 +24,8 @@ import { axe } from 'jest-axe'; import { coreAccentDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import BpkCard from './BpkCard'; -import BpkDividedCard from './BpkDividedCard'; import BpkCardWrapper from './BpkCardWrapper'; +import BpkDividedCard from './BpkDividedCard'; describe('BpkCard accessibility tests', () => { it('should not have programmatically-detectable accessibility issues', async () => { diff --git a/packages/bpk-component-chip/index.ts b/packages/bpk-component-chip/index.ts index 745907b33c..0d41013dd8 100644 --- a/packages/bpk-component-chip/index.ts +++ b/packages/bpk-component-chip/index.ts @@ -16,12 +16,12 @@ * limitations under the License. */ -import BpkSelectableChip, { - type Props as SelectableProps, -} from './src/BpkSelectableChip'; import BpkDismissibleChip from './src/BpkDismissibleChip'; import BpkDropdownChip from './src/BpkDropdownChip'; import BpkIconChip from './src/BpkIconChip'; +import BpkSelectableChip, { + type Props as SelectableProps, +} from './src/BpkSelectableChip'; import { CHIP_TYPES } from './src/commonTypes'; import themeAttributes from './src/themeAttributes'; diff --git a/packages/bpk-component-chip/src/BpkDismissibleChip.tsx b/packages/bpk-component-chip/src/BpkDismissibleChip.tsx index c297f5f2e4..6f7432aa97 100644 --- a/packages/bpk-component-chip/src/BpkDismissibleChip.tsx +++ b/packages/bpk-component-chip/src/BpkDismissibleChip.tsx @@ -22,9 +22,9 @@ been hard coded to have disabled={false}, selected and a trailing accessory view of a close icon. */ -import { cssModules } from '../../bpk-react-utils'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import CloseCircleIconSm from '../../bpk-component-icon/sm/close-circle'; +import { cssModules } from '../../bpk-react-utils'; import BpkSelectableChip from './BpkSelectableChip'; import { CHIP_TYPES } from './commonTypes'; diff --git a/packages/bpk-component-chip/src/BpkIconChip-test.tsx b/packages/bpk-component-chip/src/BpkIconChip-test.tsx index 09132c4fd1..8acc1ff280 100644 --- a/packages/bpk-component-chip/src/BpkIconChip-test.tsx +++ b/packages/bpk-component-chip/src/BpkIconChip-test.tsx @@ -21,8 +21,8 @@ import { render } from '@testing-library/react'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import FilterIconSm from '../../bpk-component-icon/sm/filter'; -import { CHIP_TYPES } from './commonTypes'; import BpkIconChip from './BpkIconChip'; +import { CHIP_TYPES } from './commonTypes'; import type { BpkIconChipProps } from './BpkIconChip'; diff --git a/packages/bpk-component-chip/src/BpkSelectableChip.tsx b/packages/bpk-component-chip/src/BpkSelectableChip.tsx index 2fb443a3f0..74a03af843 100644 --- a/packages/bpk-component-chip/src/BpkSelectableChip.tsx +++ b/packages/bpk-component-chip/src/BpkSelectableChip.tsx @@ -18,8 +18,8 @@ import type { ReactNode } from 'react'; -import { cssModules } from '../../bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; +import { cssModules } from '../../bpk-react-utils'; import { CHIP_TYPES } from './commonTypes'; diff --git a/packages/bpk-component-code/src/BpkCodeBlock.js b/packages/bpk-component-code/src/BpkCodeBlock.js index 3519b05f4d..335043021f 100644 --- a/packages/bpk-component-code/src/BpkCodeBlock.js +++ b/packages/bpk-component-code/src/BpkCodeBlock.js @@ -17,8 +17,8 @@ */ /* @flow strict */ -import type { Node } from 'react'; import PropTypes from 'prop-types'; +import type { Node } from 'react'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-datatable/src/BpkDataTable-test.tsx b/packages/bpk-component-datatable/src/BpkDataTable-test.tsx index db392a697e..d2fcae24cd 100644 --- a/packages/bpk-component-datatable/src/BpkDataTable-test.tsx +++ b/packages/bpk-component-datatable/src/BpkDataTable-test.tsx @@ -23,8 +23,8 @@ import { Fragment } from 'react'; import { render, screen, fireEvent, within } from '@testing-library/react'; import '@testing-library/jest-dom'; -import { SORT_DIRECTION_TYPES } from './common-types'; import BpkDataTable from './BpkDataTable'; +import { SORT_DIRECTION_TYPES } from './common-types'; const rows = [ { name: 'Jose', description: 'Software Engineer', bla: 'Bla' }, diff --git a/packages/bpk-component-datatable/src/BpkDataTable.tsx b/packages/bpk-component-datatable/src/BpkDataTable.tsx index c6a1c22386..5a5bfc645f 100644 --- a/packages/bpk-component-datatable/src/BpkDataTable.tsx +++ b/packages/bpk-component-datatable/src/BpkDataTable.tsx @@ -24,8 +24,8 @@ import { useTable, useSortBy } from 'react-table'; import { cssModules } from '../../bpk-react-utils'; -import { type BpkDataTableProps, SORT_DIRECTION_TYPES } from './common-types'; import BpkDataTableHeader from './BpkDataTableHeader'; +import { type BpkDataTableProps, SORT_DIRECTION_TYPES } from './common-types'; import { createColumnsSchema } from './utils'; import STYLES from './BpkDataTable.module.scss'; diff --git a/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx b/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx index fff764f482..4546fb19d7 100644 --- a/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx +++ b/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx @@ -18,12 +18,12 @@ import type { KeyboardEvent } from 'react'; -import { cssModules } from '../../bpk-react-utils'; +import { withRtlSupport } from '../../bpk-component-icon'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkSmallArrowDownIcon from '../../bpk-component-icon/sm/arrow-down'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkSmallArrowUpIcon from '../../bpk-component-icon/sm/arrow-up'; -import { withRtlSupport } from '../../bpk-component-icon'; +import { cssModules } from '../../bpk-react-utils'; import { SORT_DIRECTION_TYPES } from './common-types'; diff --git a/packages/bpk-component-datepicker/src/BpkDatepicker-test.tsx b/packages/bpk-component-datepicker/src/BpkDatepicker-test.tsx index 56853f253e..7d95d15a4f 100644 --- a/packages/bpk-component-datepicker/src/BpkDatepicker-test.tsx +++ b/packages/bpk-component-datepicker/src/BpkDatepicker-test.tsx @@ -20,13 +20,13 @@ import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; import userEvent from '@testing-library/user-event'; +import { CALENDAR_SELECTION_TYPE } from '../../bpk-component-calendar'; +import { format } from '../../bpk-component-calendar/src/date-utils'; import { weekDays, formatMonth, formatDateFull, } from '../../bpk-component-calendar/test-utils'; -import { format } from '../../bpk-component-calendar/src/date-utils'; -import { CALENDAR_SELECTION_TYPE } from '../../bpk-component-calendar'; import BpkDatepicker from './BpkDatepicker'; diff --git a/packages/bpk-component-datepicker/src/BpkDatepicker.tsx b/packages/bpk-component-datepicker/src/BpkDatepicker.tsx index 50b39cb40e..4c5c4d3126 100644 --- a/packages/bpk-component-datepicker/src/BpkDatepicker.tsx +++ b/packages/bpk-component-datepicker/src/BpkDatepicker.tsx @@ -19,11 +19,6 @@ import { createRef, Component } from 'react'; import type { ReactElement} from 'react'; -import BpkInput, { withOpenEvents } from '../../bpk-component-input'; -import BpkModal from '../../bpk-component-modal'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import BpkPopover from '../../bpk-component-popover'; -import { cssModules } from '../../bpk-react-utils'; import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint'; import { composeCalendar, @@ -35,6 +30,11 @@ import { DateUtils, BpkCalendarNav, } from '../../bpk-component-calendar'; +import BpkInput, { withOpenEvents } from '../../bpk-component-input'; +import BpkModal from '../../bpk-component-modal'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import BpkPopover from '../../bpk-component-popover'; +import { cssModules } from '../../bpk-react-utils'; import type { DaysOfWeek, diff --git a/packages/bpk-component-datepicker/src/accessibility-test.tsx b/packages/bpk-component-datepicker/src/accessibility-test.tsx index ca1c9a46c0..81154dd734 100644 --- a/packages/bpk-component-datepicker/src/accessibility-test.tsx +++ b/packages/bpk-component-datepicker/src/accessibility-test.tsx @@ -19,13 +19,13 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; +import { CALENDAR_SELECTION_TYPE } from '../../bpk-component-calendar'; +import { format } from '../../bpk-component-calendar/src/date-utils'; import { weekDays, formatMonth, formatDateFull, } from '../../bpk-component-calendar/test-utils'; -import { format } from '../../bpk-component-calendar/src/date-utils'; -import { CALENDAR_SELECTION_TYPE } from '../../bpk-component-calendar'; // mock breakpoint to always match jest.mock('../../bpk-component-breakpoint/src/useMediaQuery', () => jest.fn(() => true)); jest.mock('@popperjs/core', () => { diff --git a/packages/bpk-component-description-list/index.js b/packages/bpk-component-description-list/index.js index a39173f4a2..f6091f5617 100644 --- a/packages/bpk-component-description-list/index.js +++ b/packages/bpk-component-description-list/index.js @@ -16,8 +16,8 @@ * limitations under the License. */ +import BpkDescriptionDetails from './src/BpkDescriptionDetails'; import BpkDescriptionList from './src/BpkDescriptionList'; import BpkDescriptionTerm from './src/BpkDescriptionTerm'; -import BpkDescriptionDetails from './src/BpkDescriptionDetails'; export { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails }; diff --git a/packages/bpk-component-dialog/src/BpkDialog-test.tsx b/packages/bpk-component-dialog/src/BpkDialog-test.tsx index 01fe883602..4575b2aecd 100644 --- a/packages/bpk-component-dialog/src/BpkDialog-test.tsx +++ b/packages/bpk-component-dialog/src/BpkDialog-test.tsx @@ -18,11 +18,11 @@ import { render } from '@testing-library/react'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import TickIcon from '../../bpk-component-icon/lg/tick'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import InfoIcon from '../../bpk-component-icon/lg/information-circle'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import TickIcon from '../../bpk-component-icon/lg/tick'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import TrashIcon from '../../bpk-component-icon/lg/trash'; import BpkDialog from './BpkDialog'; diff --git a/packages/bpk-component-dialog/src/BpkDialog.tsx b/packages/bpk-component-dialog/src/BpkDialog.tsx index a6594fd320..03766f0706 100644 --- a/packages/bpk-component-dialog/src/BpkDialog.tsx +++ b/packages/bpk-component-dialog/src/BpkDialog.tsx @@ -16,9 +16,9 @@ * limitations under the License. */ -import { cssModules, Portal } from '../../bpk-react-utils'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkCloseButton from '../../bpk-component-close-button'; +import { cssModules, Portal } from '../../bpk-react-utils'; import BpkDialogInner from './BpkDialogInner'; import { HEADER_ICON_TYPES } from './common-types'; diff --git a/packages/bpk-component-dialog/src/BpkDialogInner.tsx b/packages/bpk-component-dialog/src/BpkDialogInner.tsx index c22e5d238a..915b434568 100644 --- a/packages/bpk-component-dialog/src/BpkDialogInner.tsx +++ b/packages/bpk-component-dialog/src/BpkDialogInner.tsx @@ -16,10 +16,10 @@ * limitations under the License. */ -import { TransitionInitialMount, cssModules } from '../../bpk-react-utils'; -import { withScrim } from '../../bpk-scrim-utils'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { BpkContentBubble } from '../../bpk-component-flare'; +import { TransitionInitialMount, cssModules } from '../../bpk-react-utils'; +import { withScrim } from '../../bpk-scrim-utils'; import { type DialogInnerProps as Props } from './common-types'; diff --git a/packages/bpk-component-drawer/src/BpkDrawerContent.js b/packages/bpk-component-drawer/src/BpkDrawerContent.js index 0106c3f50e..a47304f9d7 100644 --- a/packages/bpk-component-drawer/src/BpkDrawerContent.js +++ b/packages/bpk-component-drawer/src/BpkDrawerContent.js @@ -25,9 +25,9 @@ import Transition from 'react-transition-group/Transition'; import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { cssModules } from '../../bpk-react-utils'; -import { BpkButtonLink } from '../../bpk-component-link'; import BpkCloseButton from '../../bpk-component-close-button'; +import { BpkButtonLink } from '../../bpk-component-link'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkDrawerContent.module.scss'; diff --git a/packages/bpk-component-fieldset/src/BpkFieldset-test.js b/packages/bpk-component-fieldset/src/BpkFieldset-test.js index a95d78c5b4..a520e9f703 100644 --- a/packages/bpk-component-fieldset/src/BpkFieldset-test.js +++ b/packages/bpk-component-fieldset/src/BpkFieldset-test.js @@ -19,9 +19,9 @@ import { render } from '@testing-library/react'; -import BpkSelect from '../../bpk-component-select'; import BpkCheckbox from '../../bpk-component-checkbox'; import BpkInput, { INPUT_TYPES } from '../../bpk-component-input'; +import BpkSelect from '../../bpk-component-select'; import BpkFieldset, { propTypes } from './BpkFieldset'; diff --git a/packages/bpk-component-fieldset/src/BpkFieldset.js b/packages/bpk-component-fieldset/src/BpkFieldset.js index fa7147d759..092303aad8 100644 --- a/packages/bpk-component-fieldset/src/BpkFieldset.js +++ b/packages/bpk-component-fieldset/src/BpkFieldset.js @@ -21,8 +21,8 @@ import PropTypes from 'prop-types'; import type { Element } from 'react'; import { cloneElement } from 'react'; -import BpkLabel from '../../bpk-component-label'; import BpkFormValidation from '../../bpk-component-form-validation'; +import BpkLabel from '../../bpk-component-label'; import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkFieldset.module.scss'; diff --git a/packages/bpk-component-flare/index.js b/packages/bpk-component-flare/index.js index 7a495ec2a9..5a54b88e8e 100644 --- a/packages/bpk-component-flare/index.js +++ b/packages/bpk-component-flare/index.js @@ -18,8 +18,8 @@ /* @flow strict */ -import BpkFlareBar from './src/BpkFlareBar'; import BpkContentBubble from './src/BpkContentBubble'; +import BpkFlareBar from './src/BpkFlareBar'; export default BpkFlareBar; export { BpkFlareBar, BpkContentBubble }; diff --git a/packages/bpk-component-flare/src/BpkFlareBar.js b/packages/bpk-component-flare/src/BpkFlareBar.js index 287f8390c0..5e1b9770ec 100644 --- a/packages/bpk-component-flare/src/BpkFlareBar.js +++ b/packages/bpk-component-flare/src/BpkFlareBar.js @@ -20,8 +20,8 @@ import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; -import Pointer from './__generated__/js/pointer'; import CornerRadius from './__generated__/js/corner-radius'; +import Pointer from './__generated__/js/pointer'; import STYLES from './bpk-flare-bar.module.scss'; diff --git a/packages/bpk-component-flare/src/accessibility-test.js b/packages/bpk-component-flare/src/accessibility-test.js index 4d841b51aa..9590c81f35 100644 --- a/packages/bpk-component-flare/src/accessibility-test.js +++ b/packages/bpk-component-flare/src/accessibility-test.js @@ -19,8 +19,8 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; -import BpkFlareBar from './BpkFlareBar'; import BpkContentBubble from './BpkContentBubble'; +import BpkFlareBar from './BpkFlareBar'; describe('BpkFlareBar accessibility tests', () => { it('should not have programmatically-detectable accessibility issues', async () => { diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx b/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx index d1538b66df..9f942af318 100644 --- a/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx +++ b/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx @@ -19,9 +19,9 @@ import { fireEvent, render } from '@testing-library/react'; -import { cssModules } from '../../bpk-react-utils'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkIconHeart from '../../bpk-component-icon/sm/heart'; +import { cssModules } from '../../bpk-react-utils'; import BpkFloatingNotification from './BpkFloatingNotification'; diff --git a/packages/bpk-component-form-validation/src/BpkFormValidation.js b/packages/bpk-component-form-validation/src/BpkFormValidation.js index aa6be7e8a0..075b95a2b7 100644 --- a/packages/bpk-component-form-validation/src/BpkFormValidation.js +++ b/packages/bpk-component-form-validation/src/BpkFormValidation.js @@ -24,9 +24,9 @@ import { } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import AnimateHeight from '../../bpk-animate-height'; -import { cssModules } from '../../bpk-react-utils'; -import BpkSmallExclamationIcon from '../../bpk-component-icon/sm/exclamation-circle'; import { withAlignment } from '../../bpk-component-icon'; +import BpkSmallExclamationIcon from '../../bpk-component-icon/sm/exclamation-circle'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkFormValidation.module.scss'; diff --git a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx index e66ee4929f..99e837e8c7 100644 --- a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx +++ b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx @@ -18,8 +18,8 @@ import type { KeyboardEvent, MouseEvent } from 'react'; -import { cssModules } from '../../bpk-react-utils'; import {BpkButtonV2, BUTTON_TYPES} from '../../bpk-component-button'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkGraphicPromo.module.scss'; diff --git a/packages/bpk-component-grid-toggle/src/BpkGridToggle.js b/packages/bpk-component-grid-toggle/src/BpkGridToggle.js index dbda4e5d8b..92968491dd 100644 --- a/packages/bpk-component-grid-toggle/src/BpkGridToggle.js +++ b/packages/bpk-component-grid-toggle/src/BpkGridToggle.js @@ -19,8 +19,8 @@ import PropTypes from 'prop-types'; import { Component } from 'react'; -import { cssModules } from '../../bpk-react-utils'; import { BpkButtonLink } from '../../bpk-component-link'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkGridToggle.module.scss'; diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js index d1742694b9..3c3481ec76 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNav.js @@ -21,8 +21,8 @@ import PropTypes from 'prop-types'; import { Component, Children, cloneElement } from 'react'; import type { Node } from 'react'; -import { cssModules } from '../../bpk-react-utils'; import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkHorizontalNav.module.scss'; diff --git a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js index 30f1434f39..f849ecfa68 100644 --- a/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js +++ b/packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js @@ -17,9 +17,9 @@ */ /* @flow strict */ +import PropTypes from 'prop-types'; import { Component } from 'react'; import type { Node } from 'react'; -import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-icon/index.tsx b/packages/bpk-component-icon/index.tsx index 2c4bd46593..6cd0a7fef5 100644 --- a/packages/bpk-component-icon/index.tsx +++ b/packages/bpk-component-icon/index.tsx @@ -26,8 +26,8 @@ import { } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import withAlignment from './src/withAlignment'; -import withRtlSupport from './src/withRtlSupport'; import withDescription from './src/withDescription'; +import withRtlSupport from './src/withRtlSupport'; // Wrapper functions to provide backwards compatibility function withButtonAlignment(WrappedComponent: ComponentType) { diff --git a/packages/bpk-component-image/index.ts b/packages/bpk-component-image/index.ts index 9911f6337d..9e597ef04e 100644 --- a/packages/bpk-component-image/index.ts +++ b/packages/bpk-component-image/index.ts @@ -16,11 +16,11 @@ * limitations under the License. */ -import BpkImage from './src/BpkImage'; import BpkBackgroundImage from './src/BpkBackgroundImage'; +import BpkImage from './src/BpkImage'; +import BORDER_RADIUS_STYLES from './src/BpkImageBorderRadiusStyles'; import withLazyLoading from './src/withLazyLoading'; import withLoadingBehavior from './src/withLoadingBehavior'; -import BORDER_RADIUS_STYLES from './src/BpkImageBorderRadiusStyles'; import type { BpkBackgroundImageProps } from './src/BpkBackgroundImage'; diff --git a/packages/bpk-component-image/src/BpkBackgroundImage.tsx b/packages/bpk-component-image/src/BpkBackgroundImage.tsx index 0b046f7299..3a4e1c3bed 100644 --- a/packages/bpk-component-image/src/BpkBackgroundImage.tsx +++ b/packages/bpk-component-image/src/BpkBackgroundImage.tsx @@ -25,9 +25,9 @@ import CSSTransition from 'react-transition-group/CSSTransition'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { cssModules } from '../../bpk-react-utils'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { BpkSpinner } from '../../bpk-component-spinner'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkBackgroundImage.module.scss'; diff --git a/packages/bpk-component-image/src/BpkImage.tsx b/packages/bpk-component-image/src/BpkImage.tsx index f08e7666ca..a9416046ff 100644 --- a/packages/bpk-component-image/src/BpkImage.tsx +++ b/packages/bpk-component-image/src/BpkImage.tsx @@ -24,9 +24,9 @@ import CSSTransition from 'react-transition-group/CSSTransition'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { cssModules } from '../../bpk-react-utils'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { BpkSpinner } from '../../bpk-component-spinner'; +import { cssModules } from '../../bpk-react-utils'; import BORDER_RADIUS_STYLES from './BpkImageBorderRadiusStyles'; diff --git a/packages/bpk-component-image/src/accessibility-test.tsx b/packages/bpk-component-image/src/accessibility-test.tsx index 364041d7fb..58a911b1a6 100644 --- a/packages/bpk-component-image/src/accessibility-test.tsx +++ b/packages/bpk-component-image/src/accessibility-test.tsx @@ -22,8 +22,8 @@ import { axe } from 'jest-axe'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { spacingSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import BpkImage from './BpkImage'; import BpkBackgroundImage from './BpkBackgroundImage'; +import BpkImage from './BpkImage'; describe('BpkImage accessibility tests', () => { it('should not have programmatically-detectable accessibility issues', async () => { diff --git a/packages/bpk-component-infinite-scroll/src/accessibility-test.js b/packages/bpk-component-infinite-scroll/src/accessibility-test.js index 34c61cc37e..156a48efe1 100644 --- a/packages/bpk-component-infinite-scroll/src/accessibility-test.js +++ b/packages/bpk-component-infinite-scroll/src/accessibility-test.js @@ -21,8 +21,8 @@ import PropTypes from 'prop-types'; import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; -import withInfiniteScroll from './withInfiniteScroll'; import { ArrayDataSource } from './DataSource'; +import withInfiniteScroll from './withInfiniteScroll'; describe('withInfiniteScroll accessibility tests', () => { it('should not have programmatically-detectable accessibility issues', async () => { diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.flow.js b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.flow.js index 85ec340f01..a518609da1 100644 --- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.flow.js +++ b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.flow.js @@ -20,8 +20,8 @@ import { Component, Fragment } from 'react'; -import withInfiniteScroll from './withInfiniteScroll'; import { ArrayDataSource } from './DataSource'; +import withInfiniteScroll from './withInfiniteScroll'; const elementsArray = []; diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js index 6de580f2da..7bbec423d2 100644 --- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js +++ b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll-test.js @@ -21,8 +21,8 @@ import PropTypes from 'prop-types'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import withInfiniteScroll from './withInfiniteScroll'; import { ArrayDataSource } from './DataSource'; +import withInfiniteScroll from './withInfiniteScroll'; const nextTick = () => new Promise((res) => setTimeout(res, 0)); const mockDataSource = (data) => { diff --git a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js index 55f6638130..fb6f106b49 100644 --- a/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js +++ b/packages/bpk-component-infinite-scroll/src/withInfiniteScroll.js @@ -18,12 +18,12 @@ /* @flow strict */ +import PropTypes from 'prop-types'; import { Component } from 'react'; import type { Element, Config, AbstractComponent } from 'react'; -import PropTypes from 'prop-types'; -import omit from 'lodash/omit'; import extend from 'lodash/extend'; +import omit from 'lodash/omit'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-info-banner/src/AnimateAndFade.tsx b/packages/bpk-component-info-banner/src/AnimateAndFade.tsx index 38e3dcaad3..2faa452084 100644 --- a/packages/bpk-component-info-banner/src/AnimateAndFade.tsx +++ b/packages/bpk-component-info-banner/src/AnimateAndFade.tsx @@ -25,9 +25,9 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { cssModules } from '../../bpk-react-utils'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkAnimateHeight from '../../bpk-animate-height'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkAnimateAndFade.module.scss'; diff --git a/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx b/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx index 2c43c9fc09..2995756d81 100644 --- a/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx +++ b/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx @@ -25,21 +25,21 @@ import type { ReactNode, FunctionComponent, SVGProps } from 'react'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; -import { withButtonAlignment } from '../../bpk-component-icon'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import BpkLink from '../../bpk-component-link'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkAnimateHeight from '../../bpk-animate-height'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkCloseButton from '../../bpk-component-close-button'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import TickCircleIcon from '../../bpk-component-icon/sm/tick-circle'; +import { withButtonAlignment } from '../../bpk-component-icon'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ChevronDownIcon from '../../bpk-component-icon/sm/chevron-down'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ChevronUpIcon from '../../bpk-component-icon/sm/chevron-up'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import InfoCircleIcon from '../../bpk-component-icon/sm/information-circle'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import TickCircleIcon from '../../bpk-component-icon/sm/tick-circle'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import BpkLink from '../../bpk-component-link'; import { cssModules } from '../../bpk-react-utils'; import AnimateAndFade from './AnimateAndFade'; diff --git a/packages/bpk-component-info-banner/src/accessibility-test.tsx b/packages/bpk-component-info-banner/src/accessibility-test.tsx index 0ddd7c5d29..028983026d 100644 --- a/packages/bpk-component-info-banner/src/accessibility-test.tsx +++ b/packages/bpk-component-info-banner/src/accessibility-test.tsx @@ -16,8 +16,8 @@ * limitations under the License. */ -import { axe } from 'jest-axe'; import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; import BpkInfoBanner from './BpkInfoBanner'; import { ALERT_TYPES } from './common-types'; diff --git a/packages/bpk-component-info-banner/src/withBannerAlertState-test.tsx b/packages/bpk-component-info-banner/src/withBannerAlertState-test.tsx index b4868dd03e..3461b5956a 100644 --- a/packages/bpk-component-info-banner/src/withBannerAlertState-test.tsx +++ b/packages/bpk-component-info-banner/src/withBannerAlertState-test.tsx @@ -19,9 +19,9 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { ALERT_TYPES } from './common-types'; import BpkInfoBannerDismissable from './BpkInfoBannerDismissable'; import BpkInfoBannerExpandable from './BpkInfoBannerExpandable'; +import { ALERT_TYPES } from './common-types'; import withBannerAlertState from './withBannerAlertState'; const message = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'; diff --git a/packages/bpk-component-info-banner/src/withBannerAlertState.tsx b/packages/bpk-component-info-banner/src/withBannerAlertState.tsx index 379d252305..ac4a3a8ac2 100644 --- a/packages/bpk-component-info-banner/src/withBannerAlertState.tsx +++ b/packages/bpk-component-info-banner/src/withBannerAlertState.tsx @@ -23,8 +23,8 @@ import { wrapDisplayName } from '../../bpk-react-utils'; import BpkInfoBannerExpandable from './BpkInfoBannerExpandable'; -import type { Props as BpkInfoBannerExpandableProps } from './BpkInfoBannerExpandable'; import type { Props as BpkInfoBannerDismissableProps } from './BpkInfoBannerDismissable'; +import type { Props as BpkInfoBannerExpandableProps } from './BpkInfoBannerExpandable'; export type WithBannerAlertStateProps = { onHide?: () => void; diff --git a/packages/bpk-component-input/index.ts b/packages/bpk-component-input/index.ts index 3614886c69..e27dcc17fa 100644 --- a/packages/bpk-component-input/index.ts +++ b/packages/bpk-component-input/index.ts @@ -17,7 +17,6 @@ */ import BpkInput from './src/BpkInput'; -import withOpenEvents from './src/withOpenEvents'; import { propTypes, defaultProps, @@ -26,6 +25,7 @@ import { type Props, } from './src/common-types'; import themeAttributes from './src/themeAttributes'; +import withOpenEvents from './src/withOpenEvents'; export default BpkInput; diff --git a/packages/bpk-component-input/src/BpkClearButton.tsx b/packages/bpk-component-input/src/BpkClearButton.tsx index ab2d37843d..8becb08350 100644 --- a/packages/bpk-component-input/src/BpkClearButton.tsx +++ b/packages/bpk-component-input/src/BpkClearButton.tsx @@ -18,9 +18,9 @@ import type { ComponentProps } from 'react'; +import { withButtonAlignment } from '../../bpk-component-icon'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ClearIcon from '../../bpk-component-icon/sm/close-circle'; -import { withButtonAlignment } from '../../bpk-component-icon'; import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkClearButton.module.scss'; diff --git a/packages/bpk-component-input/src/withOpenEvents-test.tsx b/packages/bpk-component-input/src/withOpenEvents-test.tsx index c3e91e1c40..91289bdf8a 100644 --- a/packages/bpk-component-input/src/withOpenEvents-test.tsx +++ b/packages/bpk-component-input/src/withOpenEvents-test.tsx @@ -19,8 +19,8 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import withOpenEvents from './withOpenEvents'; import BpkInput from './BpkInput'; +import withOpenEvents from './withOpenEvents'; const Input = withOpenEvents(BpkInput); diff --git a/packages/bpk-component-link/index.js b/packages/bpk-component-link/index.js index 3e9ee56427..e3f81b28ad 100644 --- a/packages/bpk-component-link/index.js +++ b/packages/bpk-component-link/index.js @@ -18,8 +18,8 @@ /* @flow strict */ -import BpkLink from './src/BpkLink'; import BpkButtonLink from './src/BpkButtonLink'; +import BpkLink from './src/BpkLink'; import themeAttributes, { linkAlternateThemeAttributes, } from './src/themeAttributes'; diff --git a/packages/bpk-component-link/src/accessibility-test.js b/packages/bpk-component-link/src/accessibility-test.js index 8ed1d8474c..33d9bd7f0e 100644 --- a/packages/bpk-component-link/src/accessibility-test.js +++ b/packages/bpk-component-link/src/accessibility-test.js @@ -21,8 +21,8 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; -import BpkLink from './BpkLink'; import BpkButtonLink from './BpkButtonLink'; +import BpkLink from './BpkLink'; describe('BpkLink accessibility tests', () => { it('should not have programmatically-detectable accessibility issues', async () => { diff --git a/packages/bpk-component-loading-button/src/BpkLoadingButton.js b/packages/bpk-component-loading-button/src/BpkLoadingButton.js index 91edae0115..5064869cfa 100644 --- a/packages/bpk-component-loading-button/src/BpkLoadingButton.js +++ b/packages/bpk-component-loading-button/src/BpkLoadingButton.js @@ -22,14 +22,14 @@ import PropTypes from 'prop-types'; import type { Node, Element } from 'react'; import BpkButton from '../../bpk-component-button'; -import { BpkSpinner, BpkLargeSpinner } from '../../bpk-component-spinner'; import { withButtonAlignment, withLargeButtonAlignment, withRtlSupport, } from '../../bpk-component-icon'; -import ArrowIconSm from '../../bpk-component-icon/sm/long-arrow-right'; import ArrowIconLg from '../../bpk-component-icon/lg/long-arrow-right'; +import ArrowIconSm from '../../bpk-component-icon/sm/long-arrow-right'; +import { BpkSpinner, BpkLargeSpinner } from '../../bpk-component-spinner'; import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkLoadingButton.module.scss'; diff --git a/packages/bpk-component-map/index.js b/packages/bpk-component-map/index.js index 0c8ef3a240..36105b23c8 100644 --- a/packages/bpk-component-map/index.js +++ b/packages/bpk-component-map/index.js @@ -18,21 +18,21 @@ /* @flow strict */ -import BpkMap from './src/BpkMap'; import BpkIconMarker, { type Props as IconMarkerProps, } from './src/BpkIconMarker'; +import BpkMap from './src/BpkMap'; +import BpkOverlayView from './src/BpkOverlayView'; import BpkPriceMarker, { PRICE_MARKER_STATUSES } from './src/BpkPriceMarker'; import { BpkPriceMarkerV2, MARKER_STATUSES, } from './src/BpkPriceMarkerV2/BpkPriceMarker'; -import BpkOverlayView from './src/BpkOverlayView'; -import withGoogleMapsScript from './src/withGoogleMapsScript'; import { type LatLong } from './src/common-types'; import { defaultIconMarkerThemeAttributes, priceMarkerThemeAttributes, } from './src/themeAttributes'; +import withGoogleMapsScript from './src/withGoogleMapsScript'; export default BpkMap; export type BpkMapLatLong = LatLong; diff --git a/packages/bpk-component-map/src/BpkBasicMapMarker.js b/packages/bpk-component-map/src/BpkBasicMapMarker.js index c86953799e..a062479751 100644 --- a/packages/bpk-component-map/src/BpkBasicMapMarker.js +++ b/packages/bpk-component-map/src/BpkBasicMapMarker.js @@ -18,8 +18,8 @@ /* @flow strict */ -import type { Node } from 'react'; import PropTypes from 'prop-types'; +import type { Node } from 'react'; import BpkOverlayView from './BpkOverlayView'; import { LatLongPropType, type LatLong } from './common-types'; diff --git a/packages/bpk-component-map/src/BpkIconMarker.js b/packages/bpk-component-map/src/BpkIconMarker.js index 676ac06389..16ea0f610e 100644 --- a/packages/bpk-component-map/src/BpkIconMarker.js +++ b/packages/bpk-component-map/src/BpkIconMarker.js @@ -18,14 +18,14 @@ /* @flow strict */ -import type { Node } from 'react'; import PropTypes from 'prop-types'; +import type { Node } from 'react'; import { cssModules } from '../../bpk-react-utils'; +import BpkBasicMapMarker from './BpkBasicMapMarker'; import BpkIconMarkerBackground from './BpkIconMarkerBackground'; import { LatLongPropType, type LatLong } from './common-types'; -import BpkBasicMapMarker from './BpkBasicMapMarker'; import STYLES from './BpkIconMarker.module.scss'; diff --git a/packages/bpk-component-map/src/BpkMap.js b/packages/bpk-component-map/src/BpkMap.js index 83de10bb58..d1c33b1ee0 100644 --- a/packages/bpk-component-map/src/BpkMap.js +++ b/packages/bpk-component-map/src/BpkMap.js @@ -18,9 +18,9 @@ /* @flow strict */ +import PropTypes from 'prop-types'; import type { Node } from 'react'; import { useCallback, useRef } from 'react'; -import PropTypes from 'prop-types'; import { GoogleMap } from '@react-google-maps/api'; diff --git a/packages/bpk-component-map/src/BpkOverlayView.js b/packages/bpk-component-map/src/BpkOverlayView.js index f21e92c6c5..691b9ece75 100644 --- a/packages/bpk-component-map/src/BpkOverlayView.js +++ b/packages/bpk-component-map/src/BpkOverlayView.js @@ -18,8 +18,8 @@ /* @flow strict */ -import type { Node } from 'react'; import PropTypes from 'prop-types'; +import type { Node } from 'react'; import { OverlayView } from '@react-google-maps/api'; diff --git a/packages/bpk-component-map/src/BpkPriceMarker.js b/packages/bpk-component-map/src/BpkPriceMarker.js index f0c9247e35..7e76e232f4 100644 --- a/packages/bpk-component-map/src/BpkPriceMarker.js +++ b/packages/bpk-component-map/src/BpkPriceMarker.js @@ -20,11 +20,11 @@ import PropTypes from 'prop-types'; -import { cssModules } from '../../bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text/src/BpkText'; +import { cssModules } from '../../bpk-react-utils'; -import { LatLongPropType, type LatLong } from './common-types'; import BpkBasicMapMarker from './BpkBasicMapMarker'; +import { LatLongPropType, type LatLong } from './common-types'; import STYLES from './BpkPriceMarker.module.scss'; diff --git a/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.tsx b/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.tsx index 0471345f6d..f6290adf11 100644 --- a/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.tsx +++ b/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.tsx @@ -18,8 +18,8 @@ import type { MouseEvent, ReactNode } from 'react'; -import { cssModules } from '../../../bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../../bpk-component-text'; +import { cssModules } from '../../../bpk-react-utils'; import BpkBasicMapMarker from '../BpkBasicMapMarker'; import STYLES from './BpkPriceMarker.module.scss'; diff --git a/packages/bpk-component-map/src/withGoogleMapsScript.js b/packages/bpk-component-map/src/withGoogleMapsScript.js index d917a0e867..c6a1af0b89 100644 --- a/packages/bpk-component-map/src/withGoogleMapsScript.js +++ b/packages/bpk-component-map/src/withGoogleMapsScript.js @@ -17,8 +17,8 @@ */ /* @flow strict */ -import type { ComponentType } from 'react'; import PropTypes from 'prop-types'; +import type { ComponentType } from 'react'; import { useJsApiLoader } from '@react-google-maps/api'; diff --git a/packages/bpk-component-modal/index.ts b/packages/bpk-component-modal/index.ts index 7d7aa3abd9..e8ffef5853 100644 --- a/packages/bpk-component-modal/index.ts +++ b/packages/bpk-component-modal/index.ts @@ -16,12 +16,12 @@ * limitations under the License. */ -import { BpkModalV2 } from './src/BpkModalV2/BpkModal'; -import themeAttributes from './src/themeAttributes'; import BpkModal from './src/BpkModal'; import { MODAL_STYLING } from './src/BpkModalInner'; +import { BpkModalV2 } from './src/BpkModalV2/BpkModal'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { propTypes, defaultProps } from './src/legacy-prop-types'; +import themeAttributes from './src/themeAttributes'; import type { Props } from './src/BpkModal'; diff --git a/packages/bpk-component-modal/src/BpkModal.tsx b/packages/bpk-component-modal/src/BpkModal.tsx index 260a3443ce..48632e60a9 100644 --- a/packages/bpk-component-modal/src/BpkModal.tsx +++ b/packages/bpk-component-modal/src/BpkModal.tsx @@ -18,8 +18,8 @@ import type { ReactNode } from 'react'; -import { withScrim } from '../../bpk-scrim-utils'; import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils'; +import { withScrim } from '../../bpk-scrim-utils'; import BpkModalInner, { MODAL_STYLING } from './BpkModalInner'; diff --git a/packages/bpk-component-modal/src/BpkModalInner.tsx b/packages/bpk-component-modal/src/BpkModalInner.tsx index 76c7e00e44..7c7fe69f92 100644 --- a/packages/bpk-component-modal/src/BpkModalInner.tsx +++ b/packages/bpk-component-modal/src/BpkModalInner.tsx @@ -18,10 +18,10 @@ import type { ReactNode } from 'react'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import { BpkButtonLink } from '../../bpk-component-link'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkCloseButton from '../../bpk-component-close-button'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import { BpkButtonLink } from '../../bpk-component-link'; import BpkNavigationBar, { BAR_STYLES, } from '../../bpk-component-navigation-bar'; diff --git a/packages/bpk-component-navigation-bar/index.ts b/packages/bpk-component-navigation-bar/index.ts index 4dcf40f111..809d4d649d 100644 --- a/packages/bpk-component-navigation-bar/index.ts +++ b/packages/bpk-component-navigation-bar/index.ts @@ -20,12 +20,12 @@ import BpkNavigationBar, { type Props as BpkNavigationBarProps, BAR_STYLES, } from './src/BpkNavigationBar'; -import BpkNavigationBarIconButton, { - type Props as BpkNavigationBarIconButtonProps, -} from './src/BpkNavigationBarIconButton'; import BpkNavigationBarButtonLink, { type Props as BpkNavigationBarButtonLinkProps, } from './src/BpkNavigationBarButtonLink'; +import BpkNavigationBarIconButton, { + type Props as BpkNavigationBarIconButtonProps, +} from './src/BpkNavigationBarIconButton'; import themeAttributes from './src/themeAttributes'; export type { diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBar.tsx b/packages/bpk-component-navigation-bar/src/BpkNavigationBar.tsx index 6dc8e78ae6..b827db8e91 100644 --- a/packages/bpk-component-navigation-bar/src/BpkNavigationBar.tsx +++ b/packages/bpk-component-navigation-bar/src/BpkNavigationBar.tsx @@ -18,8 +18,8 @@ import type { ReactElement, ReactNode } from 'react'; -import { cssModules } from '../../bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkNavigationBar.module.scss'; diff --git a/packages/bpk-component-nudger/index.ts b/packages/bpk-component-nudger/index.ts index 77dd016e42..e5dcb7bbc5 100644 --- a/packages/bpk-component-nudger/index.ts +++ b/packages/bpk-component-nudger/index.ts @@ -16,8 +16,8 @@ * limitations under the License. */ -import BpkNudger from './src/BpkNudger'; import BpkConfigurableNudger from './src/BpkConfigurableNudger'; +import BpkNudger from './src/BpkNudger'; import themeAttributes from './src/themeAttributes'; export default BpkNudger; diff --git a/packages/bpk-component-nudger/src/BpkNudger.tsx b/packages/bpk-component-nudger/src/BpkNudger.tsx index 5e7aa4df47..bd1ae08ef3 100644 --- a/packages/bpk-component-nudger/src/BpkNudger.tsx +++ b/packages/bpk-component-nudger/src/BpkNudger.tsx @@ -16,10 +16,10 @@ * limitations under the License. */ -import { cssModules } from '../../bpk-react-utils'; -import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkLabel from '../../bpk-component-label'; +import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; +import { cssModules } from '../../bpk-react-utils'; import BpkConfigurableNudger from './BpkConfigurableNudger'; import { type CommonProps } from './common-types'; diff --git a/packages/bpk-component-page-indicator/src/NavButton.js b/packages/bpk-component-page-indicator/src/NavButton.js index 64ddccb264..fa2502fa37 100644 --- a/packages/bpk-component-page-indicator/src/NavButton.js +++ b/packages/bpk-component-page-indicator/src/NavButton.js @@ -19,8 +19,8 @@ import PropTypes from 'prop-types'; -import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon'; import {BUTTON_TYPES, BpkButtonV2} from '../../bpk-component-button'; +import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon'; import LeftArrowIcon from '../../bpk-component-icon/lg/chevron-left'; import RightArrowIcon from '../../bpk-component-icon/lg/chevron-right'; diff --git a/packages/bpk-component-pagination/src/BpkPaginationList.js b/packages/bpk-component-pagination/src/BpkPaginationList.js index eab7515298..14e52a4510 100644 --- a/packages/bpk-component-pagination/src/BpkPaginationList.js +++ b/packages/bpk-component-pagination/src/BpkPaginationList.js @@ -20,8 +20,8 @@ import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; -import BpkPaginationPage from './BpkPaginationPage'; import BpkPaginationBreak from './BpkPaginationBreak'; +import BpkPaginationPage from './BpkPaginationPage'; import STYLES from './BpkPaginationList.module.scss'; diff --git a/packages/bpk-component-pagination/src/BpkPaginationNudger.js b/packages/bpk-component-pagination/src/BpkPaginationNudger.js index f87f1836e7..7d57ef9860 100644 --- a/packages/bpk-component-pagination/src/BpkPaginationNudger.js +++ b/packages/bpk-component-pagination/src/BpkPaginationNudger.js @@ -18,11 +18,11 @@ import PropTypes from 'prop-types'; -import { cssModules } from '../../bpk-react-utils'; import {BpkButtonV2, BUTTON_TYPES} from '../../bpk-component-button'; import { withRtlSupport } from '../../bpk-component-icon'; import ArrowLeftIcon from '../../bpk-component-icon/sm/arrow-left'; import ArrowRightIcon from '../../bpk-component-icon/sm/arrow-right'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkPaginationNudger.module.scss'; diff --git a/packages/bpk-component-phone-input/src/BpkPhoneInput.js b/packages/bpk-component-phone-input/src/BpkPhoneInput.js index f957078aef..e2194b58cb 100644 --- a/packages/bpk-component-phone-input/src/BpkPhoneInput.js +++ b/packages/bpk-component-phone-input/src/BpkPhoneInput.js @@ -20,10 +20,10 @@ import PropTypes from 'prop-types'; -import { cssModules } from '../../bpk-react-utils'; import BpkInput, { INPUT_TYPES } from '../../bpk-component-input'; import BpkLabel from '../../bpk-component-label'; import BpkSelect from '../../bpk-component-select'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkPhoneInput.module.scss'; diff --git a/packages/bpk-component-popover/src/BpkPopover.js b/packages/bpk-component-popover/src/BpkPopover.js index 4a1072a7d7..5a23ea924b 100644 --- a/packages/bpk-component-popover/src/BpkPopover.js +++ b/packages/bpk-component-popover/src/BpkPopover.js @@ -21,9 +21,9 @@ import PropTypes from 'prop-types'; import type { Node } from 'react'; -import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; -import { BpkButtonLink } from '../../bpk-component-link'; import BpkCloseButton from '../../bpk-component-close-button'; +import { BpkButtonLink } from '../../bpk-component-link'; +import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; import { TransitionInitialMount, cssModules } from '../../bpk-react-utils'; import { ARROW_ID } from './constants'; diff --git a/packages/bpk-component-popover/src/BpkPopoverPortal.js b/packages/bpk-component-popover/src/BpkPopoverPortal.js index 6ae8f08895..3fb2bf7708 100644 --- a/packages/bpk-component-popover/src/BpkPopoverPortal.js +++ b/packages/bpk-component-popover/src/BpkPopoverPortal.js @@ -27,10 +27,10 @@ import focusStore from 'a11y-focus-store'; import { Portal, cssModules } from '../../bpk-react-utils'; -import keyboardFocusScope from './keyboardFocusScope'; import BpkPopover, { type Props as PopoverProps, } from './BpkPopover'; +import keyboardFocusScope from './keyboardFocusScope'; import STYLES from './BpkPopover.module.scss'; diff --git a/packages/bpk-component-popover/src/keyboardFocusScope.js b/packages/bpk-component-popover/src/keyboardFocusScope.js index 20cf0f44f2..344f6defcd 100644 --- a/packages/bpk-component-popover/src/keyboardFocusScope.js +++ b/packages/bpk-component-popover/src/keyboardFocusScope.js @@ -21,8 +21,8 @@ // it only prevents it leaving due to keyboard events. // Clicks outside the target element will move focus as normal. -import tabbable from 'tabbable'; import focusin from 'focusin'; +import tabbable from 'tabbable'; let polyfilled = false; let focusTrapped = false; diff --git a/packages/bpk-component-price/src/BpkPrice.js b/packages/bpk-component-price/src/BpkPrice.js index bf1d4f8c44..836e8a3afa 100644 --- a/packages/bpk-component-price/src/BpkPrice.js +++ b/packages/bpk-component-price/src/BpkPrice.js @@ -19,8 +19,8 @@ import PropTypes from 'prop-types'; -import { cssModules } from '../../bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; +import { cssModules } from '../../bpk-react-utils'; import { SIZES, ALIGNS } from './common-types'; diff --git a/packages/bpk-component-rating/src/BpkRating.js b/packages/bpk-component-rating/src/BpkRating.js index 4f609dde65..17d3bb0674 100644 --- a/packages/bpk-component-rating/src/BpkRating.js +++ b/packages/bpk-component-rating/src/BpkRating.js @@ -17,13 +17,13 @@ */ /* @flow strict */ -import type { Node } from 'react'; import PropTypes from 'prop-types'; +import type { Node } from 'react'; import clamp from 'lodash.clamp'; -import { cssModules } from '../../bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; +import { cssModules } from '../../bpk-react-utils'; import { RATING_SIZES, RATING_SCALES } from './common-types'; diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid-test.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid-test.tsx index 243b70f43f..5e7f11f47a 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid-test.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid-test.tsx @@ -27,8 +27,8 @@ import { colorPanjin } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import { formatDateFull, formatMonth } from '../test-utils'; -import BpkCalendarScrollGrid from './BpkScrollableCalendarGrid'; import BpkCalendarScrollDate from './BpkScrollableCalendarDate'; +import BpkCalendarScrollGrid from './BpkScrollableCalendarGrid'; describe('BpkCalendarScrollGrid', () => { it('should render correctly with no optional props set', () => { diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.tsx index 347ebc0416..98628bf50a 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.tsx @@ -18,9 +18,9 @@ import type { ElementType } from 'react'; -import { cssModules } from '../../bpk-react-utils'; -import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; import { BpkCalendarGrid } from '../../bpk-component-calendar'; +import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; +import { cssModules } from '../../bpk-react-utils'; import type { BpkCalendarGridProps } from '../../bpk-component-calendar'; diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx index efa6e147be..620b968c57 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx @@ -18,8 +18,8 @@ import PropTypes from 'prop-types'; -import { isWeekend } from 'date-fns/isWeekend'; import { render } from '@testing-library/react'; +import { isWeekend } from 'date-fns/isWeekend'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { colorPanjin } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx index 3f42ae3126..a16894286b 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx @@ -20,14 +20,14 @@ import { useRef, useState, useMemo, useEffect } from 'react'; import type { ElementType } from 'react'; import { startOfDay, startOfMonth } from 'date-fns'; -import { VariableSizeList as List } from 'react-window'; import AutoSizer from 'react-virtualized-auto-sizer'; +import { VariableSizeList as List } from 'react-window'; -import { cssModules } from '../../bpk-react-utils'; import { CALENDAR_SELECTION_TYPE, DateUtils, } from '../../bpk-component-calendar'; +import { cssModules } from '../../bpk-react-utils'; import BpkScrollableCalendarGrid from './BpkScrollableCalendarGrid'; import { getMonthsArray, getMonthItemHeights } from './utils'; diff --git a/packages/bpk-component-section-header/src/BpkSectionHeader.tsx b/packages/bpk-component-section-header/src/BpkSectionHeader.tsx index 3a69b085c1..9403d3984e 100644 --- a/packages/bpk-component-section-header/src/BpkSectionHeader.tsx +++ b/packages/bpk-component-section-header/src/BpkSectionHeader.tsx @@ -18,8 +18,8 @@ import type { ReactNode } from 'react'; -import { cssModules } from '../../bpk-react-utils'; import BpkText from '../../bpk-component-text'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkSectionHeader.module.scss'; diff --git a/packages/bpk-component-section-list/index.js b/packages/bpk-component-section-list/index.js index 021231f123..4b852c898d 100644 --- a/packages/bpk-component-section-list/index.js +++ b/packages/bpk-component-section-list/index.js @@ -19,8 +19,8 @@ /* @flow strict */ import BpkSectionList from './src/BpkSectionList'; -import BpkSectionListSection from './src/BpkSectionListSection'; import BpkSectionListItem from './src/BpkSectionListItem'; +import BpkSectionListSection from './src/BpkSectionListSection'; export default BpkSectionList; export { BpkSectionListSection, BpkSectionListItem }; diff --git a/packages/bpk-component-section-list/src/BpkSectionListItem.js b/packages/bpk-component-section-list/src/BpkSectionListItem.js index 74c9bddd15..f62ed7e01e 100644 --- a/packages/bpk-component-section-list/src/BpkSectionListItem.js +++ b/packages/bpk-component-section-list/src/BpkSectionListItem.js @@ -21,9 +21,9 @@ import PropTypes from 'prop-types'; import type { Node } from 'react'; -import { cssModules } from '../../bpk-react-utils'; -import BpkLargeChevronRightIcon from '../../bpk-component-icon/lg/chevron-right'; import { withRtlSupport } from '../../bpk-component-icon'; +import BpkLargeChevronRightIcon from '../../bpk-component-icon/lg/chevron-right'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkSectionListItem.module.scss'; diff --git a/packages/bpk-component-section-list/src/BpkSectionListSection.js b/packages/bpk-component-section-list/src/BpkSectionListSection.js index 2b85ad2840..a912075199 100644 --- a/packages/bpk-component-section-list/src/BpkSectionListSection.js +++ b/packages/bpk-component-section-list/src/BpkSectionListSection.js @@ -22,8 +22,8 @@ import PropTypes from 'prop-types'; import type { Node } from 'react'; import { Children } from 'react'; -import { cssModules } from '../../bpk-react-utils'; import BpkText, { TEXT_STYLES } from '../../bpk-component-text'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkSectionListSection.module.scss'; diff --git a/packages/bpk-component-spinner/index.js b/packages/bpk-component-spinner/index.js index dbdf49298d..33b3e1dee3 100644 --- a/packages/bpk-component-spinner/index.js +++ b/packages/bpk-component-spinner/index.js @@ -18,10 +18,10 @@ /* @flow strict */ +import BpkExtraLargeSpinner from './src/BpkExtraLargeSpinner'; +import BpkLargeSpinner from './src/BpkLargeSpinner'; import BpkSpinner from './src/BpkSpinner'; import SPINNER_TYPES from './src/spinnerTypes'; -import BpkLargeSpinner from './src/BpkLargeSpinner'; -import BpkExtraLargeSpinner from './src/BpkExtraLargeSpinner'; import themeAttributes from './src/themeAttributes'; export { diff --git a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner-test.js b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner-test.js index a9e783dd4f..f55a3bb506 100644 --- a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner-test.js +++ b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner-test.js @@ -20,8 +20,8 @@ import { render } from '@testing-library/react'; -import SPINNER_TYPES from './spinnerTypes'; import BpkExtraLargeSpinner from './BpkExtraLargeSpinner'; +import SPINNER_TYPES from './spinnerTypes'; describe('BpkExtraLargeSpinner', () => { it('should render correctly', () => { diff --git a/packages/bpk-component-spinner/src/BpkLargeSpinner-test.js b/packages/bpk-component-spinner/src/BpkLargeSpinner-test.js index 115b2a81d8..915ed26109 100644 --- a/packages/bpk-component-spinner/src/BpkLargeSpinner-test.js +++ b/packages/bpk-component-spinner/src/BpkLargeSpinner-test.js @@ -20,8 +20,8 @@ import { render } from '@testing-library/react'; -import SPINNER_TYPES from './spinnerTypes'; import BpkLargeSpinner from './BpkLargeSpinner'; +import SPINNER_TYPES from './spinnerTypes'; describe('BpkLargeSpinner', () => { it('should render correctly', () => { diff --git a/packages/bpk-component-spinner/src/accessibility-test.js b/packages/bpk-component-spinner/src/accessibility-test.js index 23c0707db8..9a85aa047c 100644 --- a/packages/bpk-component-spinner/src/accessibility-test.js +++ b/packages/bpk-component-spinner/src/accessibility-test.js @@ -21,9 +21,9 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; -import BpkSpinner from './BpkSpinner'; -import BpkLargeSpinner from './BpkLargeSpinner'; import BpkExtraLargeSpinner from './BpkExtraLargeSpinner'; +import BpkLargeSpinner from './BpkLargeSpinner'; +import BpkSpinner from './BpkSpinner'; describe('BpkSpinner accessibility tests', () => { it('should not have programmatically-detectable accessibility issues', async () => { diff --git a/packages/bpk-component-split-input/src/BpkInputField.js b/packages/bpk-component-split-input/src/BpkInputField.js index 80f39cf19b..38afc63cb5 100644 --- a/packages/bpk-component-split-input/src/BpkInputField.js +++ b/packages/bpk-component-split-input/src/BpkInputField.js @@ -17,8 +17,8 @@ */ /* @flow strict */ -import { Component } from 'react'; import PropTypes from 'prop-types'; +import { Component } from 'react'; import BpkInput from '../../bpk-component-input'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-split-input/src/BpkSplitInput.js b/packages/bpk-component-split-input/src/BpkSplitInput.js index 4ba13ceb87..532646d7ef 100644 --- a/packages/bpk-component-split-input/src/BpkSplitInput.js +++ b/packages/bpk-component-split-input/src/BpkSplitInput.js @@ -17,11 +17,11 @@ */ /* @flow strict */ -import { Component } from 'react'; import PropTypes from 'prop-types'; +import { Component } from 'react'; -import { cssModules } from '../../bpk-react-utils'; import { INPUT_TYPES } from '../../bpk-component-input'; +import { cssModules } from '../../bpk-react-utils'; import InputField from './BpkInputField'; diff --git a/packages/bpk-component-star-rating/index.js b/packages/bpk-component-star-rating/index.js index 5d61646644..5f96e723ab 100644 --- a/packages/bpk-component-star-rating/index.js +++ b/packages/bpk-component-star-rating/index.js @@ -18,12 +18,12 @@ /* @flow strict */ -import BpkStar, { BpkStarNonRtl, STAR_TYPES } from './src/BpkStar'; import BpkInteractiveStar from './src/BpkInteractiveStar'; -import BpkStarRating, { ROUNDING_TYPES } from './src/BpkStarRating'; import BpkInteractiveStarRating from './src/BpkInteractiveStarRating'; -import withInteractiveStarRatingState from './src/withInteractiveStarRatingState'; +import BpkStar, { BpkStarNonRtl, STAR_TYPES } from './src/BpkStar'; +import BpkStarRating, { ROUNDING_TYPES } from './src/BpkStarRating'; import themeAttributes from './src/themeAttributes'; +import withInteractiveStarRatingState from './src/withInteractiveStarRatingState'; export { BpkStar, diff --git a/packages/bpk-component-star-rating/src/BpkInteractiveStar-test.js b/packages/bpk-component-star-rating/src/BpkInteractiveStar-test.js index 594f565857..350f92714b 100644 --- a/packages/bpk-component-star-rating/src/BpkInteractiveStar-test.js +++ b/packages/bpk-component-star-rating/src/BpkInteractiveStar-test.js @@ -20,8 +20,8 @@ import { render } from '@testing-library/react'; -import { STAR_TYPES } from './BpkStar'; import BpkInteractiveStar from './BpkInteractiveStar'; +import { STAR_TYPES } from './BpkStar'; describe('BpkInteractiveStar', () => { it('should render correctly with empty star', () => { diff --git a/packages/bpk-component-star-rating/src/BpkInteractiveStarRating.js b/packages/bpk-component-star-rating/src/BpkInteractiveStarRating.js index 8d64e61c14..74bd55d071 100644 --- a/packages/bpk-component-star-rating/src/BpkInteractiveStarRating.js +++ b/packages/bpk-component-star-rating/src/BpkInteractiveStarRating.js @@ -22,8 +22,8 @@ import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; -import { STAR_TYPES } from './BpkStar'; import BpkInteractiveStar from './BpkInteractiveStar'; +import { STAR_TYPES } from './BpkStar'; import STYLES from './BpkStarRating.module.scss'; diff --git a/packages/bpk-component-star-rating/src/BpkStar.js b/packages/bpk-component-star-rating/src/BpkStar.js index 02debdb533..551c66e322 100644 --- a/packages/bpk-component-star-rating/src/BpkStar.js +++ b/packages/bpk-component-star-rating/src/BpkStar.js @@ -20,13 +20,13 @@ import PropTypes from 'prop-types'; -import SmallIcon from '../../bpk-component-icon/sm/star'; +import { withRtlSupport } from '../../bpk-component-icon'; import LargeIcon from '../../bpk-component-icon/lg/star'; -import OutlineSmallIcon from '../../bpk-component-icon/sm/star-outline'; +import HalfLargeIcon from '../../bpk-component-icon/lg/star-half'; import OutlineLargeIcon from '../../bpk-component-icon/lg/star-outline'; +import SmallIcon from '../../bpk-component-icon/sm/star'; import HalfSmallIcon from '../../bpk-component-icon/sm/star-half'; -import HalfLargeIcon from '../../bpk-component-icon/lg/star-half'; -import { withRtlSupport } from '../../bpk-component-icon'; +import OutlineSmallIcon from '../../bpk-component-icon/sm/star-outline'; import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkStar.module.scss'; diff --git a/packages/bpk-component-star-rating/src/BpkStarRating-test.js b/packages/bpk-component-star-rating/src/BpkStarRating-test.js index 0cc9ee056c..6929d9c81a 100644 --- a/packages/bpk-component-star-rating/src/BpkStarRating-test.js +++ b/packages/bpk-component-star-rating/src/BpkStarRating-test.js @@ -20,11 +20,11 @@ import { render } from '@testing-library/react'; +import { STAR_TYPES } from './BpkStar'; import BpkStarRating, { getTypeByRating, ROUNDING_TYPES, } from './BpkStarRating'; -import { STAR_TYPES } from './BpkStar'; describe('BpkStarRating', () => { it('should render correctly if you give it more than the max rating allowed', () => { diff --git a/packages/bpk-component-star-rating/src/accessibility-test.js b/packages/bpk-component-star-rating/src/accessibility-test.js index 7027fbe703..32ca109eff 100644 --- a/packages/bpk-component-star-rating/src/accessibility-test.js +++ b/packages/bpk-component-star-rating/src/accessibility-test.js @@ -21,8 +21,8 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; -import BpkStarRating from './BpkStarRating'; import BpkInteractiveStarRating from './BpkInteractiveStarRating'; +import BpkStarRating from './BpkStarRating'; describe('BpkStarRating accessibility tests', () => { it('should not have programmatically-detectable accessibility issues', async () => { diff --git a/packages/bpk-component-swap-button/src/BpkSwapButton.tsx b/packages/bpk-component-swap-button/src/BpkSwapButton.tsx index af4341afca..d353c00f03 100644 --- a/packages/bpk-component-swap-button/src/BpkSwapButton.tsx +++ b/packages/bpk-component-swap-button/src/BpkSwapButton.tsx @@ -18,9 +18,9 @@ import { useState } from 'react'; -import { cssModules } from '../../bpk-react-utils'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import SwapVertical from '../../bpk-component-icon/sm/swap--vertical'; +import { cssModules } from '../../bpk-react-utils'; import STYLES from './BpkSwapButton.module.scss'; diff --git a/packages/bpk-component-table/index.js b/packages/bpk-component-table/index.js index 0e64d61cf7..32765377f3 100644 --- a/packages/bpk-component-table/index.js +++ b/packages/bpk-component-table/index.js @@ -19,11 +19,11 @@ /* @flow strict */ import BpkTable from './src/BpkTable'; -import BpkTableHead from './src/BpkTableHead'; import BpkTableBody from './src/BpkTableBody'; -import BpkTableRow from './src/BpkTableRow'; import BpkTableCell from './src/BpkTableCell'; +import BpkTableHead from './src/BpkTableHead'; import BpkTableHeadCell from './src/BpkTableHeadCell'; +import BpkTableRow from './src/BpkTableRow'; export { BpkTable, diff --git a/packages/bpk-component-table/src/BpkTableRow-test.js b/packages/bpk-component-table/src/BpkTableRow-test.js index cd4a25a7c2..3a4a49fd12 100644 --- a/packages/bpk-component-table/src/BpkTableRow-test.js +++ b/packages/bpk-component-table/src/BpkTableRow-test.js @@ -28,7 +28,7 @@ describe('BpkTableRow', () => { -
    +
    , @@ -41,7 +41,7 @@ describe('BpkTableRow', () => { -
    +
    , @@ -54,7 +54,7 @@ describe('BpkTableRow', () => { -
    +
    , diff --git a/packages/bpk-component-table/src/__snapshots__/BpkTableRow-test.js.snap b/packages/bpk-component-table/src/__snapshots__/BpkTableRow-test.js.snap index 201ff71747..d9b3bf0db2 100644 --- a/packages/bpk-component-table/src/__snapshots__/BpkTableRow-test.js.snap +++ b/packages/bpk-component-table/src/__snapshots__/BpkTableRow-test.js.snap @@ -5,7 +5,9 @@ exports[`BpkTableRow should render correctly 1`] = ` -
    +
    @@ -20,7 +22,9 @@ exports[`BpkTableRow should render correctly with arbitrary props 1`] = ` data-foo="bar" id="my-custom-id" > - + @@ -34,7 +38,9 @@ exports[`BpkTableRow should render correctly with custom class 1`] = ` - + diff --git a/packages/bpk-component-table/src/accessibility-test.js b/packages/bpk-component-table/src/accessibility-test.js index a971e47257..49e1108034 100644 --- a/packages/bpk-component-table/src/accessibility-test.js +++ b/packages/bpk-component-table/src/accessibility-test.js @@ -22,11 +22,11 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; import BpkTable from './BpkTable'; +import BpkTableBody from './BpkTableBody'; +import BpkTableCell from './BpkTableCell'; import BpkTableHead from './BpkTableHead'; -import BpkTableRow from './BpkTableRow'; import BpkTableHeadCell from './BpkTableHeadCell'; -import BpkTableCell from './BpkTableCell'; -import BpkTableBody from './BpkTableBody'; +import BpkTableRow from './BpkTableRow'; describe('BpkTable accessibility tests', () => { it('should not have programmatically-detectable accessibility issues', async () => { diff --git a/packages/bpk-component-theme-toggle/src/updateOnThemeChange.js b/packages/bpk-component-theme-toggle/src/updateOnThemeChange.js index 7be5722ff9..e60e55e766 100644 --- a/packages/bpk-component-theme-toggle/src/updateOnThemeChange.js +++ b/packages/bpk-component-theme-toggle/src/updateOnThemeChange.js @@ -16,8 +16,8 @@ * limitations under the License. */ -import { Component } from 'react'; import PropTypes from 'prop-types'; +import { Component } from 'react'; import { wrapDisplayName } from '../../bpk-react-utils'; diff --git a/packages/bpk-react-utils/index.ts b/packages/bpk-react-utils/index.ts index 7d22047ed2..3fcdf79c38 100644 --- a/packages/bpk-react-utils/index.ts +++ b/packages/bpk-react-utils/index.ts @@ -16,7 +16,7 @@ * limitations under the License. */ -import wrapDisplayName from './src/wrapDisplayName'; +import{ BpkDialogWrapper } from './src/BpkDialogWrapper/BpkDialogWrapper'; import Portal from './src/Portal'; import TransitionInitialMount from './src/TransitionInitialMount'; import cssModules from './src/cssModules'; @@ -27,9 +27,9 @@ import { isDeviceIpad, isDeviceIos, } from './src/deviceDetection'; -import withDefaultProps from './src/withDefaultProps'; import isRTL from './src/isRTL'; -import{ BpkDialogWrapper } from './src/BpkDialogWrapper/BpkDialogWrapper'; +import withDefaultProps from './src/withDefaultProps'; +import wrapDisplayName from './src/wrapDisplayName'; export { Portal, diff --git a/packages/bpk-scrim-utils/src/withScrim-test.tsx b/packages/bpk-scrim-utils/src/withScrim-test.tsx index bcca39c4d2..a87f8c2dad 100644 --- a/packages/bpk-scrim-utils/src/withScrim-test.tsx +++ b/packages/bpk-scrim-utils/src/withScrim-test.tsx @@ -24,7 +24,6 @@ import focusScope from 'a11y-focus-scope'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import focusStore from 'a11y-focus-store'; -import withScrim from './withScrim'; import { fixBody, lockScroll, @@ -33,6 +32,7 @@ import { unfixBody, unlockScroll, } from './scroll-utils'; +import withScrim from './withScrim'; jest.mock('a11y-focus-scope', () => ({ scopeFocus: jest.fn(), diff --git a/packages/bpk-scrim-utils/src/withScrimmedPortal.tsx b/packages/bpk-scrim-utils/src/withScrimmedPortal.tsx index 42772a3d7b..41a69802cc 100644 --- a/packages/bpk-scrim-utils/src/withScrimmedPortal.tsx +++ b/packages/bpk-scrim-utils/src/withScrimmedPortal.tsx @@ -20,8 +20,8 @@ import type { ComponentType} from 'react'; import { useState, useEffect } from 'react'; import { createPortal } from 'react-dom'; -import withScrim from './withScrim'; import BpkScrim from './BpkScrim'; +import withScrim from './withScrim'; import type { Props as ScrimProps } from './withScrim'; diff --git a/packages/bpk-stylesheets/webpack.config.babel.js b/packages/bpk-stylesheets/webpack.config.babel.js index 272c5e2313..834141a6a8 100644 --- a/packages/bpk-stylesheets/webpack.config.babel.js +++ b/packages/bpk-stylesheets/webpack.config.babel.js @@ -18,8 +18,8 @@ const path = require('path'); -const WrapperPlugin = require('wrapper-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const WrapperPlugin = require('wrapper-webpack-plugin'); const postCssPlugins = require('../../scripts/webpack/postCssPlugins'); diff --git a/packages/bpk-theming/src/BpkThemeProvider-test.js b/packages/bpk-theming/src/BpkThemeProvider-test.js index 9b7c7204cc..e826d85f0e 100644 --- a/packages/bpk-theming/src/BpkThemeProvider-test.js +++ b/packages/bpk-theming/src/BpkThemeProvider-test.js @@ -16,8 +16,8 @@ * limitations under the License. */ -import { Component } from 'react'; import PropTypes from 'prop-types'; +import { Component } from 'react'; import { render } from '@testing-library/react'; diff --git a/packages/bpk-theming/src/BpkThemeProvider.js b/packages/bpk-theming/src/BpkThemeProvider.js index 87ec07ef88..04c1918101 100644 --- a/packages/bpk-theming/src/BpkThemeProvider.js +++ b/packages/bpk-theming/src/BpkThemeProvider.js @@ -16,8 +16,8 @@ * limitations under the License. */ -import { Component } from 'react'; import PropTypes from 'prop-types'; +import { Component } from 'react'; const uniq = (arr = []) => { const seen = {}; diff --git a/scripts/npm/check-bpk-dependencies.js b/scripts/npm/check-bpk-dependencies.js index 649fe2f533..a77da1e6c1 100644 --- a/scripts/npm/check-bpk-dependencies.js +++ b/scripts/npm/check-bpk-dependencies.js @@ -18,8 +18,8 @@ /* eslint-disable no-console */ -const fs = require('fs'); const { execSync } = require('child_process'); +const fs = require('fs'); const errors = []; diff --git a/scripts/transpilation/copy-utils.js b/scripts/transpilation/copy-utils.js index 65b8ea7d89..c9fef4cd4a 100644 --- a/scripts/transpilation/copy-utils.js +++ b/scripts/transpilation/copy-utils.js @@ -16,8 +16,8 @@ * limitations under the License. */ -const fs = require("fs"); const { execSync } = require('child_process'); +const fs = require("fs"); // eslint-disable-next-line no-console console.log('Copying bpk-mixins...'); diff --git a/scripts/transpilation/transform-js-scss-css-imports.js b/scripts/transpilation/transform-js-scss-css-imports.js index e6e09384f9..6f851b460e 100644 --- a/scripts/transpilation/transform-js-scss-css-imports.js +++ b/scripts/transpilation/transform-js-scss-css-imports.js @@ -16,8 +16,8 @@ * limitations under the License. */ -const fs = require('fs'); const { execSync } = require('child_process'); +const fs = require('fs'); const updateImports = (file, findReplaces) => new Promise((resolve, reject) => { diff --git a/scripts/webpack/postCssPlugins.js b/scripts/webpack/postCssPlugins.js index 887d55565c..54157f6d7f 100644 --- a/scripts/webpack/postCssPlugins.js +++ b/scripts/webpack/postCssPlugins.js @@ -16,8 +16,8 @@ * limitations under the License. */ -const postCssFlexbugsFixes = require('postcss-flexbugs-fixes'); const autoprefixer = require('autoprefixer'); +const postCssFlexbugsFixes = require('postcss-flexbugs-fixes'); module.exports = () => [ postCssFlexbugsFixes, From 18d07c2a61e39238b5bac983786a7e59736e9212 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 11 Apr 2024 14:08:56 +0100 Subject: [PATCH 058/174] Bump webpack from 5.90.3 to 5.91.0 (#3316) * Bump webpack from 5.90.3 to 5.91.0 Bumps [webpack](https://github.com/webpack/webpack) from 5.90.3 to 5.91.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v5.90.3...v5.91.0) --- updated-dependencies: - dependency-name: webpack dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] * lint fix --------- Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: metalix2 Co-authored-by: Matthew Robertson --- package-lock.json | 145 ++++++++++-------- package.json | 2 +- .../src/useMediaQuery-test.tsx | 2 +- 3 files changed, 84 insertions(+), 65 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1313191c56..ed30f0d63a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -82,7 +82,7 @@ "style-loader": "^3.3.4", "ts-migrate": "^0.1.35", "typescript": "^5.4.3", - "webpack": "^5.90.3", + "webpack": "^5.91.0", "wrapper-webpack-plugin": "^2.2.2" }, "engines": { @@ -9593,9 +9593,10 @@ "dev": true }, "node_modules/@webassemblyjs/ast": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", + "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==", "dev": true, - "license": "MIT", "dependencies": { "@webassemblyjs/helper-numbers": "1.11.6", "@webassemblyjs/helper-wasm-bytecode": "1.11.6" @@ -9603,23 +9604,27 @@ }, "node_modules/@webassemblyjs/floating-point-hex-parser": { "version": "1.11.6", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz", + "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==", + "dev": true }, "node_modules/@webassemblyjs/helper-api-error": { "version": "1.11.6", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz", + "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==", + "dev": true }, "node_modules/@webassemblyjs/helper-buffer": { - "version": "1.11.6", - "dev": true, - "license": "MIT" + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz", + "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==", + "dev": true }, "node_modules/@webassemblyjs/helper-numbers": { "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz", + "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==", "dev": true, - "license": "MIT", "dependencies": { "@webassemblyjs/floating-point-hex-parser": "1.11.6", "@webassemblyjs/helper-api-error": "1.11.6", @@ -9628,62 +9633,69 @@ }, "node_modules/@webassemblyjs/helper-wasm-bytecode": { "version": "1.11.6", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz", + "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==", + "dev": true }, "node_modules/@webassemblyjs/helper-wasm-section": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz", + "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==", "dev": true, - "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6" + "@webassemblyjs/wasm-gen": "1.12.1" } }, "node_modules/@webassemblyjs/ieee754": { "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz", + "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==", "dev": true, - "license": "MIT", "dependencies": { "@xtuc/ieee754": "^1.2.0" } }, "node_modules/@webassemblyjs/leb128": { "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz", + "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==", "dev": true, - "license": "Apache-2.0", "dependencies": { "@xtuc/long": "4.2.2" } }, "node_modules/@webassemblyjs/utf8": { "version": "1.11.6", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz", + "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==", + "dev": true }, "node_modules/@webassemblyjs/wasm-edit": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz", + "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==", "dev": true, - "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/helper-wasm-section": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6", - "@webassemblyjs/wasm-opt": "1.11.6", - "@webassemblyjs/wasm-parser": "1.11.6", - "@webassemblyjs/wast-printer": "1.11.6" + "@webassemblyjs/helper-wasm-section": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-opt": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1", + "@webassemblyjs/wast-printer": "1.12.1" } }, "node_modules/@webassemblyjs/wasm-gen": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz", + "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==", "dev": true, - "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", "@webassemblyjs/ieee754": "1.11.6", "@webassemblyjs/leb128": "1.11.6", @@ -9691,22 +9703,24 @@ } }, "node_modules/@webassemblyjs/wasm-opt": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz", + "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==", "dev": true, - "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6", - "@webassemblyjs/wasm-parser": "1.11.6" + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1" } }, "node_modules/@webassemblyjs/wasm-parser": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz", + "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==", "dev": true, - "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@webassemblyjs/helper-api-error": "1.11.6", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", "@webassemblyjs/ieee754": "1.11.6", @@ -9715,23 +9729,26 @@ } }, "node_modules/@webassemblyjs/wast-printer": { - "version": "1.11.6", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz", + "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==", "dev": true, - "license": "MIT", "dependencies": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@xtuc/long": "4.2.2" } }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", - "dev": true, - "license": "BSD-3-Clause" + "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", + "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==", + "dev": true }, "node_modules/@xtuc/long": { "version": "4.2.2", - "dev": true, - "license": "Apache-2.0" + "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", + "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", + "dev": true }, "node_modules/@yarnpkg/esbuild-plugin-pnp": { "version": "3.0.0-rc.15", @@ -14047,9 +14064,10 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.15.0", + "version": "5.16.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz", + "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==", "dev": true, - "license": "MIT", "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -32354,9 +32372,10 @@ } }, "node_modules/watchpack": { - "version": "2.4.0", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", + "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==", "dev": true, - "license": "MIT", "dependencies": { "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.1.2" @@ -32383,26 +32402,26 @@ } }, "node_modules/webpack": { - "version": "5.90.3", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.3.tgz", - "integrity": "sha512-h6uDYlWCctQRuXBs1oYpVe6sFcWedl0dpcVaTf/YF67J9bKvwJajFulMVSYKHrksMB3I/pIagRzDxwxkebuzKA==", + "version": "5.91.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz", + "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.3", "@types/estree": "^1.0.5", - "@webassemblyjs/ast": "^1.11.5", - "@webassemblyjs/wasm-edit": "^1.11.5", - "@webassemblyjs/wasm-parser": "^1.11.5", + "@webassemblyjs/ast": "^1.12.1", + "@webassemblyjs/wasm-edit": "^1.12.1", + "@webassemblyjs/wasm-parser": "^1.12.1", "acorn": "^8.7.1", "acorn-import-assertions": "^1.9.0", "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.15.0", + "enhanced-resolve": "^5.16.0", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.2.9", + "graceful-fs": "^4.2.11", "json-parse-even-better-errors": "^2.3.1", "loader-runner": "^4.2.0", "mime-types": "^2.1.27", @@ -32410,7 +32429,7 @@ "schema-utils": "^3.2.0", "tapable": "^2.1.1", "terser-webpack-plugin": "^5.3.10", - "watchpack": "^2.4.0", + "watchpack": "^2.4.1", "webpack-sources": "^3.2.3" }, "bin": { diff --git a/package.json b/package.json index 4d5ce2dcd1..74b391994d 100644 --- a/package.json +++ b/package.json @@ -181,7 +181,7 @@ "style-loader": "^3.3.4", "ts-migrate": "^0.1.35", "typescript": "^5.4.3", - "webpack": "^5.90.3", + "webpack": "^5.91.0", "wrapper-webpack-plugin": "^2.2.2" } } diff --git a/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx b/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx index dcbeaf6cd6..e9c96f4b5f 100644 --- a/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx +++ b/packages/bpk-component-breakpoint/src/useMediaQuery-test.tsx @@ -16,9 +16,9 @@ * limitations under the License. */ import { renderToString } from 'react-dom/server'; -import '@testing-library/jest-dom'; import { renderHook } from '@testing-library/react-hooks'; +import '@testing-library/jest-dom'; import useMediaQuery from './useMediaQuery'; From 770f98621294c6bddebab893951872f5c8d00b37 Mon Sep 17 00:00:00 2001 From: mungodewar <89925955+mungodewar@users.noreply.github.com> Date: Thu, 11 Apr 2024 16:00:11 +0100 Subject: [PATCH 059/174] [LOOM-1341]: update eslint-config-skyscanner@18 & include forbid rule (#3343) * update linter and --fix * update ts-expect-error lines * update ts-expect-error lines * inline ignore className usage * add missing snaps * align all comments to the same TODO * remove unused comments * lock file update --- .eslintrc | 24 +- decisions/className.md | 96 ++ package-lock.json | 166 ++- package.json | 2 +- .../src/BpkAutosuggestSuggestion.js | 6 +- .../src/BpkBannerAlertInner.tsx | 7 +- .../src/BpkButtonDestructive-test.js | 22 - .../src/BpkButtonDestructive.js | 6 +- .../src/BpkButtonFeatured-test.js | 22 - .../src/BpkButtonFeatured.js | 6 +- .../src/BpkButtonLink-test.js | 22 - .../bpk-component-button/src/BpkButtonLink.js | 6 +- .../src/BpkButtonLinkOnDark-test.js | 22 - .../src/BpkButtonLinkOnDark.js | 6 +- .../src/BpkButtonPrimary-test.js | 22 - .../src/BpkButtonPrimaryOnDark-test.js | 22 - .../src/BpkButtonPrimaryOnDark.js | 6 +- .../src/BpkButtonPrimaryOnLight-test.js | 22 - .../src/BpkButtonPrimaryOnLight.js | 6 +- .../src/BpkButtonSecondary-test.js | 22 - .../src/BpkButtonSecondary.js | 8 +- .../src/BpkButtonSecondaryOnDark-test.js | 22 - .../src/BpkButtonSecondaryOnDark.js | 6 +- .../BpkButtonDestructive-test.js.snap | 129 -- .../BpkButtonFeatured-test.js.snap | 129 -- .../__snapshots__/BpkButtonLink-test.js.snap | 129 -- .../BpkButtonLinkOnDark-test.js.snap | 129 -- .../BpkButtonPrimary-test.js.snap | 129 -- .../BpkButtonPrimaryOnDark-test.js.snap | 129 -- .../BpkButtonPrimaryOnLight-test.js.snap | 129 -- .../BpkButtonSecondary-test.js.snap | 129 -- .../BpkButtonSecondaryOnDark-test.js.snap | 129 -- .../__snapshots__/commonButton-test.js.snap | 1153 +++++++++++++++++ ...monButtonTests.js => commonButton-test.js} | 35 +- .../src/BpkCalendarGridHeader.tsx | 2 + .../src/BpkCalendarGridTransition.tsx | 2 + .../src/BpkCalendarNav.tsx | 7 +- packages/bpk-component-calendar/src/Week.tsx | 2 + .../src/composeCalendar.tsx | 4 + .../src/BpkSaveButton.tsx | 6 + .../bpk-component-card/src/BpkDividedCard.tsx | 2 + .../src/BpkDismissibleChip.tsx | 7 +- .../src/BpkContentCard.js | 4 + .../src/BpkDescriptionDetails.js | 2 +- .../src/ComponentFactory.js | 2 + .../src/BpkDialogInner.tsx | 5 +- .../src/BpkContentBubble.js | 2 + .../bpk-component-flare/src/BpkFlareBar.js | 16 +- .../src/BpkFloatingNotification.tsx | 4 + .../src/BpkGraphicPromo.tsx | 2 + .../src/classNameModifierHOCFactory.tsx | 2 + .../src/BpkClearButton.tsx | 2 + packages/bpk-component-input/src/BpkInput.tsx | 2 + .../src/withOpenEvents.tsx | 2 + packages/bpk-component-list/src/BpkList.js | 2 + .../src/BpkLoadingButton.js | 2 + .../src/BpkMobileScrollContainer.js | 2 + packages/bpk-component-modal/src/BpkModal.tsx | 2 + .../bpk-component-modal/src/BpkModalInner.tsx | 6 + .../src/BpkModalV2/BpkModal.tsx | 4 + .../src/BpkNavigationBarButtonLink.tsx | 2 + .../src/BpkNavigationBarIconButton.tsx | 2 + .../src/BpkConfigurableNudger.tsx | 15 +- .../bpk-component-nudger/src/BpkNudger.tsx | 6 + .../src/BpkPaginationNudger.js | 6 + .../src/BpkPaginationPage.js | 2 + .../src/BpkPhoneInput.js | 8 + .../bpk-component-popover/src/BpkPopover.js | 2 + .../src/BpkPopoverPortal.js | 2 + packages/bpk-component-price/src/BpkPrice.js | 8 + .../bpk-component-rating/src/BpkRating.js | 8 + .../src/BpkRtlToggle.tsx | 2 + .../src/BpkScrollableCalendarGrid.tsx | 2 + .../src/BpkScrollableCalendarGridList.tsx | 2 + .../src/BpkSectionHeader.tsx | 8 +- .../src/BpkSectionListItem.js | 4 + .../bpk-component-slider/src/BpkSlider.tsx | 2 + .../src/BpkExtraLargeSpinner.js | 11 +- .../src/BpkLargeSpinner.js | 11 +- .../bpk-component-spinner/src/BpkSpinner.js | 11 +- .../src/BpkInteractiveStar.js | 10 +- .../bpk-component-star-rating/src/BpkStar.js | 17 +- packages/bpk-component-text/src/BpkText.tsx | 2 + .../src/BpkThemeToggle.js | 2 + .../src/BpkTooltipPortal.tsx | 2 + .../bpk-react-utils/src/withDefaultProps.tsx | 2 + 86 files changed, 1654 insertions(+), 1488 deletions(-) create mode 100644 decisions/className.md delete mode 100644 packages/bpk-component-button/src/BpkButtonDestructive-test.js delete mode 100644 packages/bpk-component-button/src/BpkButtonFeatured-test.js delete mode 100644 packages/bpk-component-button/src/BpkButtonLink-test.js delete mode 100644 packages/bpk-component-button/src/BpkButtonLinkOnDark-test.js delete mode 100644 packages/bpk-component-button/src/BpkButtonPrimary-test.js delete mode 100644 packages/bpk-component-button/src/BpkButtonPrimaryOnDark-test.js delete mode 100644 packages/bpk-component-button/src/BpkButtonPrimaryOnLight-test.js delete mode 100644 packages/bpk-component-button/src/BpkButtonSecondary-test.js delete mode 100644 packages/bpk-component-button/src/BpkButtonSecondaryOnDark-test.js delete mode 100644 packages/bpk-component-button/src/__snapshots__/BpkButtonDestructive-test.js.snap delete mode 100644 packages/bpk-component-button/src/__snapshots__/BpkButtonFeatured-test.js.snap delete mode 100644 packages/bpk-component-button/src/__snapshots__/BpkButtonLink-test.js.snap delete mode 100644 packages/bpk-component-button/src/__snapshots__/BpkButtonLinkOnDark-test.js.snap delete mode 100644 packages/bpk-component-button/src/__snapshots__/BpkButtonPrimary-test.js.snap delete mode 100644 packages/bpk-component-button/src/__snapshots__/BpkButtonPrimaryOnDark-test.js.snap delete mode 100644 packages/bpk-component-button/src/__snapshots__/BpkButtonPrimaryOnLight-test.js.snap delete mode 100644 packages/bpk-component-button/src/__snapshots__/BpkButtonSecondary-test.js.snap delete mode 100644 packages/bpk-component-button/src/__snapshots__/BpkButtonSecondaryOnDark-test.js.snap create mode 100644 packages/bpk-component-button/src/__snapshots__/commonButton-test.js.snap rename packages/bpk-component-button/src/{commonButtonTests.js => commonButton-test.js} (72%) diff --git a/.eslintrc b/.eslintrc index 5ca1555660..551da22992 100644 --- a/.eslintrc +++ b/.eslintrc @@ -127,6 +127,26 @@ } ], // Temp setting this to warn whilst migration to TS is in progress. - "no-undef": "warn" - } + "no-undef": "warn", + "@skyscanner/rules/forbid-component-props": [ + "error", + { + "forbid": [ + { + "propName": "className", + "message": + "Prop {{prop}} is forbidden. See ./decisions/className.md" + } + ] + } + ] + }, + "overrides": [ + { + "files": ["*test*", "*examples*"], + "rules": { + "@skyscanner/rules/forbid-component-props": ["off"] + } + } + ] } diff --git a/decisions/className.md b/decisions/className.md new file mode 100644 index 0000000000..cfc6f69521 --- /dev/null +++ b/decisions/className.md @@ -0,0 +1,96 @@ +### Avoid className props + +Never provide any prop that takes in a CSS style to a React component. These +props are typically called `className` but it is not the _name_ that matters, but that it is passing in a style directly. + +```tsx + +``` + +Using the base HTML `className` prop on lower level HTML elements is allowed. + +```tsx +
    +``` + +### Composition + +For adding spacing around a component, such as `margin`, compose the component by using dividing elements. + +```tsx +
    + +
    +``` + +### Configuration + +For changing the styling within an element, such as changing its colour, provide one or more props that allow the consumer to do so explicitly. + +```tsx + +``` + +
    +Why className usage can cause specificity problems + +In CSS when two selectors are of equal specificity it is the last style in the stylesheet that overrides the other. For example, given the below: + +```tsx +.blue { + color: blue; +} + +.green { + color: green; +} + +

    What color is this text?

    +``` + +The text would be green. Each uses a class selector, so neither is more specific, but `.green` is last in the stylesheet (last in the cascade). + +In the below component a base style, `base`, is applied, and then any additional style can be added via the `className` prop. If both had the same specificity then it is the last one added to the stylesheet that will be able to override the other. + +```tsx +const MyComponent = ({ className }) => { + return ); }; diff --git a/packages/bpk-component-button/src/BpkButtonDestructive-test.js b/packages/bpk-component-button/src/BpkButtonDestructive-test.js deleted file mode 100644 index 950aa4a77d..0000000000 --- a/packages/bpk-component-button/src/BpkButtonDestructive-test.js +++ /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 BpkButtonDestructive from './BpkButtonDestructive'; -import commonButtonTests from './commonButtonTests'; - -commonButtonTests(BpkButtonDestructive); diff --git a/packages/bpk-component-button/src/BpkButtonDestructive.js b/packages/bpk-component-button/src/BpkButtonDestructive.js index 4a61251c38..c3a811026e 100644 --- a/packages/bpk-component-button/src/BpkButtonDestructive.js +++ b/packages/bpk-component-button/src/BpkButtonDestructive.js @@ -36,8 +36,12 @@ const BpkButtonDestructive = (props: Props) => { const classNamesFinal = classNames.join(' '); return ( + + {...rest} /> ); }; diff --git a/packages/bpk-component-button/src/BpkButtonFeatured-test.js b/packages/bpk-component-button/src/BpkButtonFeatured-test.js deleted file mode 100644 index d29f82c649..0000000000 --- a/packages/bpk-component-button/src/BpkButtonFeatured-test.js +++ /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 BpkButtonFeatured from './BpkButtonFeatured'; -import commonButtonTests from './commonButtonTests'; - -commonButtonTests(BpkButtonFeatured); diff --git a/packages/bpk-component-button/src/BpkButtonFeatured.js b/packages/bpk-component-button/src/BpkButtonFeatured.js index 650af85aae..0ffccac4e2 100644 --- a/packages/bpk-component-button/src/BpkButtonFeatured.js +++ b/packages/bpk-component-button/src/BpkButtonFeatured.js @@ -36,8 +36,12 @@ const BpkButtonFeatured = (props: Props) => { const classNamesFinal = classNames.join(' '); return ( + + {...rest} /> ); }; diff --git a/packages/bpk-component-button/src/BpkButtonLink-test.js b/packages/bpk-component-button/src/BpkButtonLink-test.js deleted file mode 100644 index 29de0f4025..0000000000 --- a/packages/bpk-component-button/src/BpkButtonLink-test.js +++ /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 BpkButtonLink from './BpkButtonLink'; -import commonButtonTests from './commonButtonTests'; - -commonButtonTests(BpkButtonLink); diff --git a/packages/bpk-component-button/src/BpkButtonLink.js b/packages/bpk-component-button/src/BpkButtonLink.js index be12c7dc16..550fe0c564 100644 --- a/packages/bpk-component-button/src/BpkButtonLink.js +++ b/packages/bpk-component-button/src/BpkButtonLink.js @@ -47,8 +47,12 @@ const BpkButtonLink = (props: Props) => { const classNamesFinal = classNames.join(' '); return ( + + {...rest} /> ); }; diff --git a/packages/bpk-component-button/src/BpkButtonLinkOnDark-test.js b/packages/bpk-component-button/src/BpkButtonLinkOnDark-test.js deleted file mode 100644 index 58a0c0b959..0000000000 --- a/packages/bpk-component-button/src/BpkButtonLinkOnDark-test.js +++ /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 BpkButtonLinkOnDark from './BpkButtonLinkOnDark'; -import commonButtonTests from './commonButtonTests'; - -commonButtonTests(BpkButtonLinkOnDark); diff --git a/packages/bpk-component-button/src/BpkButtonLinkOnDark.js b/packages/bpk-component-button/src/BpkButtonLinkOnDark.js index 4827ff9840..5c8a2bbfba 100644 --- a/packages/bpk-component-button/src/BpkButtonLinkOnDark.js +++ b/packages/bpk-component-button/src/BpkButtonLinkOnDark.js @@ -47,8 +47,12 @@ const BpkButtonLinkOnDark = (props: Props) => { const classNamesFinal = classNames.join(' '); return ( + + {...rest} /> ); }; diff --git a/packages/bpk-component-button/src/BpkButtonPrimary-test.js b/packages/bpk-component-button/src/BpkButtonPrimary-test.js deleted file mode 100644 index 2a8ef6ea0e..0000000000 --- a/packages/bpk-component-button/src/BpkButtonPrimary-test.js +++ /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 BpkButtonPrimary from './BpkButtonPrimary'; -import commonButtonTests from './commonButtonTests'; - -commonButtonTests(BpkButtonPrimary); diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark-test.js b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark-test.js deleted file mode 100644 index b08e0a78d3..0000000000 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark-test.js +++ /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 BpkButtonPrimaryOnDark from './BpkButtonPrimaryOnDark'; -import commonButtonTests from './commonButtonTests'; - -commonButtonTests(BpkButtonPrimaryOnDark); diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.js b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.js index 3fb2d4b24d..4a6bcb66e8 100644 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.js +++ b/packages/bpk-component-button/src/BpkButtonPrimaryOnDark.js @@ -36,8 +36,12 @@ const BpkButtonPrimaryOnDark = (props: Props) => { const classNamesFinal = classNames.join(' '); return ( + + {...rest} /> ); }; diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight-test.js b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight-test.js deleted file mode 100644 index 81b7c54314..0000000000 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight-test.js +++ /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 BpkButtonPrimaryOnLight from './BpkButtonPrimaryOnLight'; -import commonButtonTests from './commonButtonTests'; - -commonButtonTests(BpkButtonPrimaryOnLight); diff --git a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.js b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.js index d4b2e947db..d71f217e54 100644 --- a/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.js +++ b/packages/bpk-component-button/src/BpkButtonPrimaryOnLight.js @@ -36,8 +36,12 @@ const BpkButtonPrimaryOnLight = (props: Props) => { const classNamesFinal = classNames.join(' '); return ( + + {...rest} /> ); }; diff --git a/packages/bpk-component-button/src/BpkButtonSecondary-test.js b/packages/bpk-component-button/src/BpkButtonSecondary-test.js deleted file mode 100644 index d3856ec43c..0000000000 --- a/packages/bpk-component-button/src/BpkButtonSecondary-test.js +++ /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 BpkButtonSecondary from './BpkButtonSecondary'; -import commonButtonTests from './commonButtonTests'; - -commonButtonTests(BpkButtonSecondary); diff --git a/packages/bpk-component-button/src/BpkButtonSecondary.js b/packages/bpk-component-button/src/BpkButtonSecondary.js index 68f98d6c65..34ae94661a 100644 --- a/packages/bpk-component-button/src/BpkButtonSecondary.js +++ b/packages/bpk-component-button/src/BpkButtonSecondary.js @@ -36,8 +36,12 @@ const BpkButtonSecondary = (props: Props) => { const classNamesFinal = classNames.join(' '); return ( - // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. - + ); }; diff --git a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark-test.js b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark-test.js deleted file mode 100644 index a23a58a382..0000000000 --- a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark-test.js +++ /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 BpkButtonSecondaryOnDark from './BpkButtonSecondaryOnDark'; -import commonButtonTests from './commonButtonTests'; - -commonButtonTests(BpkButtonSecondaryOnDark); diff --git a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.js b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.js index 010e40522d..326fde3e7c 100644 --- a/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.js +++ b/packages/bpk-component-button/src/BpkButtonSecondaryOnDark.js @@ -36,8 +36,12 @@ const BpkButtonSecondaryOnDark = (props: Props) => { const classNamesFinal = classNames.join(' '); return ( + + {...rest} /> ); }; diff --git a/packages/bpk-component-button/src/__snapshots__/BpkButtonDestructive-test.js.snap b/packages/bpk-component-button/src/__snapshots__/BpkButtonDestructive-test.js.snap deleted file mode 100644 index caff116f96..0000000000 --- a/packages/bpk-component-button/src/__snapshots__/BpkButtonDestructive-test.js.snap +++ /dev/null @@ -1,129 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ButtonToTest should add only bpk specific classes if className prop is set to empty string 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "blank" and "rel" attributes 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "blank" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "disabled" and "href" attributes 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "rel" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "disabled" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with a "href" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "large" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with an "iconOnly" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should respect the class names entered as a string 1`] = ` - - - -`; diff --git a/packages/bpk-component-button/src/__snapshots__/BpkButtonFeatured-test.js.snap b/packages/bpk-component-button/src/__snapshots__/BpkButtonFeatured-test.js.snap deleted file mode 100644 index e5ffada6cc..0000000000 --- a/packages/bpk-component-button/src/__snapshots__/BpkButtonFeatured-test.js.snap +++ /dev/null @@ -1,129 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ButtonToTest should add only bpk specific classes if className prop is set to empty string 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "blank" and "rel" attributes 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "blank" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "disabled" and "href" attributes 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "rel" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "disabled" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with a "href" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "large" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with an "iconOnly" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should respect the class names entered as a string 1`] = ` - - - -`; diff --git a/packages/bpk-component-button/src/__snapshots__/BpkButtonLink-test.js.snap b/packages/bpk-component-button/src/__snapshots__/BpkButtonLink-test.js.snap deleted file mode 100644 index 9610c7137e..0000000000 --- a/packages/bpk-component-button/src/__snapshots__/BpkButtonLink-test.js.snap +++ /dev/null @@ -1,129 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ButtonToTest should add only bpk specific classes if className prop is set to empty string 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "blank" and "rel" attributes 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "blank" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "disabled" and "href" attributes 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "rel" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "disabled" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with a "href" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "large" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with an "iconOnly" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should respect the class names entered as a string 1`] = ` - - - -`; diff --git a/packages/bpk-component-button/src/__snapshots__/BpkButtonLinkOnDark-test.js.snap b/packages/bpk-component-button/src/__snapshots__/BpkButtonLinkOnDark-test.js.snap deleted file mode 100644 index 13609776b5..0000000000 --- a/packages/bpk-component-button/src/__snapshots__/BpkButtonLinkOnDark-test.js.snap +++ /dev/null @@ -1,129 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ButtonToTest should add only bpk specific classes if className prop is set to empty string 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "blank" and "rel" attributes 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "blank" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "disabled" and "href" attributes 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "rel" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "disabled" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with a "href" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "large" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with an "iconOnly" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should respect the class names entered as a string 1`] = ` - - - -`; diff --git a/packages/bpk-component-button/src/__snapshots__/BpkButtonPrimary-test.js.snap b/packages/bpk-component-button/src/__snapshots__/BpkButtonPrimary-test.js.snap deleted file mode 100644 index ff71a4c319..0000000000 --- a/packages/bpk-component-button/src/__snapshots__/BpkButtonPrimary-test.js.snap +++ /dev/null @@ -1,129 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ButtonToTest should add only bpk specific classes if className prop is set to empty string 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "blank" and "rel" attributes 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "blank" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "disabled" and "href" attributes 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "rel" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "disabled" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with a "href" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "large" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with an "iconOnly" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should respect the class names entered as a string 1`] = ` - - - -`; diff --git a/packages/bpk-component-button/src/__snapshots__/BpkButtonPrimaryOnDark-test.js.snap b/packages/bpk-component-button/src/__snapshots__/BpkButtonPrimaryOnDark-test.js.snap deleted file mode 100644 index ac4453cb19..0000000000 --- a/packages/bpk-component-button/src/__snapshots__/BpkButtonPrimaryOnDark-test.js.snap +++ /dev/null @@ -1,129 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ButtonToTest should add only bpk specific classes if className prop is set to empty string 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "blank" and "rel" attributes 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "blank" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "disabled" and "href" attributes 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "rel" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "disabled" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with a "href" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "large" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with an "iconOnly" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should respect the class names entered as a string 1`] = ` - - - -`; diff --git a/packages/bpk-component-button/src/__snapshots__/BpkButtonPrimaryOnLight-test.js.snap b/packages/bpk-component-button/src/__snapshots__/BpkButtonPrimaryOnLight-test.js.snap deleted file mode 100644 index 748821fe46..0000000000 --- a/packages/bpk-component-button/src/__snapshots__/BpkButtonPrimaryOnLight-test.js.snap +++ /dev/null @@ -1,129 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ButtonToTest should add only bpk specific classes if className prop is set to empty string 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "blank" and "rel" attributes 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "blank" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "disabled" and "href" attributes 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "rel" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "disabled" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with a "href" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "large" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with an "iconOnly" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should respect the class names entered as a string 1`] = ` - - - -`; diff --git a/packages/bpk-component-button/src/__snapshots__/BpkButtonSecondary-test.js.snap b/packages/bpk-component-button/src/__snapshots__/BpkButtonSecondary-test.js.snap deleted file mode 100644 index b54164a49b..0000000000 --- a/packages/bpk-component-button/src/__snapshots__/BpkButtonSecondary-test.js.snap +++ /dev/null @@ -1,129 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ButtonToTest should add only bpk specific classes if className prop is set to empty string 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "blank" and "rel" attributes 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "blank" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "disabled" and "href" attributes 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "rel" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "disabled" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with a "href" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "large" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with an "iconOnly" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should respect the class names entered as a string 1`] = ` - - - -`; diff --git a/packages/bpk-component-button/src/__snapshots__/BpkButtonSecondaryOnDark-test.js.snap b/packages/bpk-component-button/src/__snapshots__/BpkButtonSecondaryOnDark-test.js.snap deleted file mode 100644 index 1a46aed0fc..0000000000 --- a/packages/bpk-component-button/src/__snapshots__/BpkButtonSecondaryOnDark-test.js.snap +++ /dev/null @@ -1,129 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ButtonToTest should add only bpk specific classes if className prop is set to empty string 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "blank" and "rel" attributes 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "blank" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with "disabled" and "href" attributes 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with "rel" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "disabled" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with a "href" attribute 1`] = ` - - - My button - - -`; - -exports[`ButtonToTest should render correctly with a "large" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should render correctly with an "iconOnly" attribute 1`] = ` - - - -`; - -exports[`ButtonToTest should respect the class names entered as a string 1`] = ` - - - -`; diff --git a/packages/bpk-component-button/src/__snapshots__/commonButton-test.js.snap b/packages/bpk-component-button/src/__snapshots__/commonButton-test.js.snap new file mode 100644 index 0000000000..a3889dd01e --- /dev/null +++ b/packages/bpk-component-button/src/__snapshots__/commonButton-test.js.snap @@ -0,0 +1,1153 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BpkButtonDestructive should add only bpk specific classes if className prop is set to empty string 1`] = ` + + + +`; + +exports[`BpkButtonDestructive should render correctly 1`] = ` + + + +`; + +exports[`BpkButtonDestructive should render correctly with "blank" and "rel" attributes 1`] = ` + + + My button + + +`; + +exports[`BpkButtonDestructive should render correctly with "blank" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonDestructive should render correctly with "disabled" and "href" attributes 1`] = ` + + + +`; + +exports[`BpkButtonDestructive should render correctly with "rel" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonDestructive should render correctly with a "disabled" attribute 1`] = ` + + + +`; + +exports[`BpkButtonDestructive should render correctly with a "href" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonDestructive should render correctly with a "large" attribute 1`] = ` + + + +`; + +exports[`BpkButtonDestructive should render correctly with an "iconOnly" attribute 1`] = ` + + + +`; + +exports[`BpkButtonDestructive should respect the class names entered as a string 1`] = ` + + + +`; + +exports[`BpkButtonFeatured should add only bpk specific classes if className prop is set to empty string 1`] = ` + + + +`; + +exports[`BpkButtonFeatured should render correctly 1`] = ` + + + +`; + +exports[`BpkButtonFeatured should render correctly with "blank" and "rel" attributes 1`] = ` + + + My button + + +`; + +exports[`BpkButtonFeatured should render correctly with "blank" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonFeatured should render correctly with "disabled" and "href" attributes 1`] = ` + + + +`; + +exports[`BpkButtonFeatured should render correctly with "rel" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonFeatured should render correctly with a "disabled" attribute 1`] = ` + + + +`; + +exports[`BpkButtonFeatured should render correctly with a "href" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonFeatured should render correctly with a "large" attribute 1`] = ` + + + +`; + +exports[`BpkButtonFeatured should render correctly with an "iconOnly" attribute 1`] = ` + + + +`; + +exports[`BpkButtonFeatured should respect the class names entered as a string 1`] = ` + + + +`; + +exports[`BpkButtonLink should add only bpk specific classes if className prop is set to empty string 1`] = ` + + + +`; + +exports[`BpkButtonLink should render correctly 1`] = ` + + + +`; + +exports[`BpkButtonLink should render correctly with "blank" and "rel" attributes 1`] = ` + + + My button + + +`; + +exports[`BpkButtonLink should render correctly with "blank" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonLink should render correctly with "disabled" and "href" attributes 1`] = ` + + + +`; + +exports[`BpkButtonLink should render correctly with "rel" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonLink should render correctly with a "disabled" attribute 1`] = ` + + + +`; + +exports[`BpkButtonLink should render correctly with a "href" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonLink should render correctly with a "large" attribute 1`] = ` + + + +`; + +exports[`BpkButtonLink should render correctly with an "iconOnly" attribute 1`] = ` + + + +`; + +exports[`BpkButtonLink should respect the class names entered as a string 1`] = ` + + + +`; + +exports[`BpkButtonLinkOnDark should add only bpk specific classes if className prop is set to empty string 1`] = ` + + + +`; + +exports[`BpkButtonLinkOnDark should render correctly 1`] = ` + + + +`; + +exports[`BpkButtonLinkOnDark should render correctly with "blank" and "rel" attributes 1`] = ` + + + My button + + +`; + +exports[`BpkButtonLinkOnDark should render correctly with "blank" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonLinkOnDark should render correctly with "disabled" and "href" attributes 1`] = ` + + + +`; + +exports[`BpkButtonLinkOnDark should render correctly with "rel" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonLinkOnDark should render correctly with a "disabled" attribute 1`] = ` + + + +`; + +exports[`BpkButtonLinkOnDark should render correctly with a "href" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonLinkOnDark should render correctly with a "large" attribute 1`] = ` + + + +`; + +exports[`BpkButtonLinkOnDark should render correctly with an "iconOnly" attribute 1`] = ` + + + +`; + +exports[`BpkButtonLinkOnDark should respect the class names entered as a string 1`] = ` + + + +`; + +exports[`BpkButtonPrimary should add only bpk specific classes if className prop is set to empty string 1`] = ` + + + +`; + +exports[`BpkButtonPrimary should render correctly 1`] = ` + + + +`; + +exports[`BpkButtonPrimary should render correctly with "blank" and "rel" attributes 1`] = ` + + + My button + + +`; + +exports[`BpkButtonPrimary should render correctly with "blank" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonPrimary should render correctly with "disabled" and "href" attributes 1`] = ` + + + +`; + +exports[`BpkButtonPrimary should render correctly with "rel" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonPrimary should render correctly with a "disabled" attribute 1`] = ` + + + +`; + +exports[`BpkButtonPrimary should render correctly with a "href" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonPrimary should render correctly with a "large" attribute 1`] = ` + + + +`; + +exports[`BpkButtonPrimary should render correctly with an "iconOnly" attribute 1`] = ` + + + +`; + +exports[`BpkButtonPrimary should respect the class names entered as a string 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnDark should add only bpk specific classes if className prop is set to empty string 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnDark should render correctly 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnDark should render correctly with "blank" and "rel" attributes 1`] = ` + + + My button + + +`; + +exports[`BpkButtonPrimaryOnDark should render correctly with "blank" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonPrimaryOnDark should render correctly with "disabled" and "href" attributes 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnDark should render correctly with "rel" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonPrimaryOnDark should render correctly with a "disabled" attribute 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnDark should render correctly with a "href" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonPrimaryOnDark should render correctly with a "large" attribute 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnDark should render correctly with an "iconOnly" attribute 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnDark should respect the class names entered as a string 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnLight should add only bpk specific classes if className prop is set to empty string 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnLight should render correctly 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnLight should render correctly with "blank" and "rel" attributes 1`] = ` + + + My button + + +`; + +exports[`BpkButtonPrimaryOnLight should render correctly with "blank" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonPrimaryOnLight should render correctly with "disabled" and "href" attributes 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnLight should render correctly with "rel" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonPrimaryOnLight should render correctly with a "disabled" attribute 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnLight should render correctly with a "href" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonPrimaryOnLight should render correctly with a "large" attribute 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnLight should render correctly with an "iconOnly" attribute 1`] = ` + + + +`; + +exports[`BpkButtonPrimaryOnLight should respect the class names entered as a string 1`] = ` + + + +`; + +exports[`BpkButtonSecondary should add only bpk specific classes if className prop is set to empty string 1`] = ` + + + +`; + +exports[`BpkButtonSecondary should render correctly 1`] = ` + + + +`; + +exports[`BpkButtonSecondary should render correctly with "blank" and "rel" attributes 1`] = ` + + + My button + + +`; + +exports[`BpkButtonSecondary should render correctly with "blank" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonSecondary should render correctly with "disabled" and "href" attributes 1`] = ` + + + +`; + +exports[`BpkButtonSecondary should render correctly with "rel" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonSecondary should render correctly with a "disabled" attribute 1`] = ` + + + +`; + +exports[`BpkButtonSecondary should render correctly with a "href" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonSecondary should render correctly with a "large" attribute 1`] = ` + + + +`; + +exports[`BpkButtonSecondary should render correctly with an "iconOnly" attribute 1`] = ` + + + +`; + +exports[`BpkButtonSecondary should respect the class names entered as a string 1`] = ` + + + +`; + +exports[`BpkButtonSecondaryOnDark should add only bpk specific classes if className prop is set to empty string 1`] = ` + + + +`; + +exports[`BpkButtonSecondaryOnDark should render correctly 1`] = ` + + + +`; + +exports[`BpkButtonSecondaryOnDark should render correctly with "blank" and "rel" attributes 1`] = ` + + + My button + + +`; + +exports[`BpkButtonSecondaryOnDark should render correctly with "blank" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonSecondaryOnDark should render correctly with "disabled" and "href" attributes 1`] = ` + + + +`; + +exports[`BpkButtonSecondaryOnDark should render correctly with "rel" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonSecondaryOnDark should render correctly with a "disabled" attribute 1`] = ` + + + +`; + +exports[`BpkButtonSecondaryOnDark should render correctly with a "href" attribute 1`] = ` + + + My button + + +`; + +exports[`BpkButtonSecondaryOnDark should render correctly with a "large" attribute 1`] = ` + + + +`; + +exports[`BpkButtonSecondaryOnDark should render correctly with an "iconOnly" attribute 1`] = ` + + + +`; + +exports[`BpkButtonSecondaryOnDark should respect the class names entered as a string 1`] = ` + + + +`; diff --git a/packages/bpk-component-button/src/commonButtonTests.js b/packages/bpk-component-button/src/commonButton-test.js similarity index 72% rename from packages/bpk-component-button/src/commonButtonTests.js rename to packages/bpk-component-button/src/commonButton-test.js index 2a1e637148..40f2b1bb9a 100644 --- a/packages/bpk-component-button/src/commonButtonTests.js +++ b/packages/bpk-component-button/src/commonButton-test.js @@ -18,12 +18,32 @@ import { render } from '@testing-library/react'; -const commonButtonTests = (ButtonToTest) => { - describe('ButtonToTest', () => { - it('should render correctly', () => { +import BpkButtonDestructive from './BpkButtonDestructive'; +import BpkButtonFeatured from './BpkButtonFeatured' +import BpkButtonLink from './BpkButtonLink' +import BpkButtonLinkOnDark from './BpkButtonLinkOnDark' +import BpkButtonPrimary from './BpkButtonPrimary' +import BpkButtonPrimaryOnDark from './BpkButtonPrimaryOnDark' +import BpkButtonPrimaryOnLight from './BpkButtonPrimaryOnLight' +import BpkButtonSecondary from './BpkButtonSecondary' +import BpkButtonSecondaryOnDark from './BpkButtonSecondaryOnDark' + + describe.each([ + {name: "BpkButtonDestructive", ButtonToTest: BpkButtonDestructive}, + {name: "BpkButtonFeatured", ButtonToTest: BpkButtonFeatured}, + {name: "BpkButtonLink", ButtonToTest: BpkButtonLink}, + {name: "BpkButtonLinkOnDark", ButtonToTest: BpkButtonLinkOnDark}, + {name: "BpkButtonPrimary", ButtonToTest: BpkButtonPrimary}, + {name: "BpkButtonPrimaryOnDark", ButtonToTest: BpkButtonPrimaryOnDark}, + {name: "BpkButtonPrimaryOnLight", ButtonToTest: BpkButtonPrimaryOnLight}, + {name: "BpkButtonSecondary", ButtonToTest: BpkButtonSecondary}, + {name: "BpkButtonSecondaryOnDark", ButtonToTest: BpkButtonSecondaryOnDark}, + ])('$name', ({ButtonToTest}) => { + + it("should render correctly", () => { const { asFragment } = render(My button); expect(asFragment()).toMatchSnapshot(); - }); + }) it('should render correctly with a "href" attribute', () => { const { asFragment } = render( @@ -107,9 +127,4 @@ const commonButtonTests = (ButtonToTest) => { expect(asFragment()).toMatchSnapshot(); }); - }); -}; - -// We export these to reuse them in other tests for buttons. -// eslint-disable-next-line jest/no-export -export default commonButtonTests; + }); \ No newline at end of file diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.tsx b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.tsx index 2c529ec0ea..aa5f460f84 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.tsx @@ -67,6 +67,8 @@ const WeekDayComponent = ({ weekDayKey = 'nameAbbr', }: WeekDayProps) => ( diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.tsx b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.tsx index beebddecf3..9e9751ab85 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.tsx @@ -212,6 +212,8 @@ class BpkCalendarGridTransition extends Component { ) } aria-hidden={index !== 1} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={getClassName('bpk-calendar-grid-transition__grid')} /> ) : ( diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav.tsx b/packages/bpk-component-calendar/src/BpkCalendarNav.tsx index 91ae1540ed..0b8bb9f100 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarNav.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarNav.tsx @@ -127,7 +127,10 @@ const BpkCalendarNav = ({ disabled || !isWithinRange(prevMonth, { start: min, end: max }) } > - + {previousMonthLabel} @@ -179,6 +182,8 @@ const BpkCalendarNav = ({ } > diff --git a/packages/bpk-component-calendar/src/Week.tsx b/packages/bpk-component-calendar/src/Week.tsx index a202390ae2..4d1af8a65f 100644 --- a/packages/bpk-component-calendar/src/Week.tsx +++ b/packages/bpk-component-calendar/src/Week.tsx @@ -411,6 +411,8 @@ class Week extends Component { return ( @@ -220,6 +222,8 @@ const composeCalendar = ( focusedDate={focusedDate} markToday={markToday} markOutsideDays={markOutsideDays} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={gridClasses.join(' ')} dateProps={dateProps} selectionConfiguration={selectionConfiguration} diff --git a/packages/bpk-component-card-button/src/BpkSaveButton.tsx b/packages/bpk-component-card-button/src/BpkSaveButton.tsx index 57a2c7e20d..a5839fc4a8 100644 --- a/packages/bpk-component-card-button/src/BpkSaveButton.tsx +++ b/packages/bpk-component-card-button/src/BpkSaveButton.tsx @@ -81,6 +81,8 @@ const BpkSaveButton = ({ return (
    } + trailingAccessoryView={} selected type={type} role="button" // Override role="checkbox" because this chip is not selectable. + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={classNames} /> ); diff --git a/packages/bpk-component-content-cards/src/BpkContentCard.js b/packages/bpk-component-content-cards/src/BpkContentCard.js index e2993e9a37..b7c26df490 100644 --- a/packages/bpk-component-content-cards/src/BpkContentCard.js +++ b/packages/bpk-component-content-cards/src/BpkContentCard.js @@ -63,12 +63,16 @@ const BpkContentCard = ({ card, layout }: Props) => (
    {card.headline} diff --git a/packages/bpk-component-description-list/src/BpkDescriptionDetails.js b/packages/bpk-component-description-list/src/BpkDescriptionDetails.js index 684bdc4a71..c296da4d5e 100644 --- a/packages/bpk-component-description-list/src/BpkDescriptionDetails.js +++ b/packages/bpk-component-description-list/src/BpkDescriptionDetails.js @@ -18,4 +18,4 @@ import buildComponent from './ComponentFactory'; -export default buildComponent('dd', 'bpk-description-list__details'); +export default buildComponent('dd', 'bpk-description-list__details'); \ No newline at end of file diff --git a/packages/bpk-component-description-list/src/ComponentFactory.js b/packages/bpk-component-description-list/src/ComponentFactory.js index 426c337583..aad15093d7 100644 --- a/packages/bpk-component-description-list/src/ComponentFactory.js +++ b/packages/bpk-component-description-list/src/ComponentFactory.js @@ -33,6 +33,8 @@ const buildComponent = (TagName, baseClassName) => { } return ( + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props {children} diff --git a/packages/bpk-component-dialog/src/BpkDialogInner.tsx b/packages/bpk-component-dialog/src/BpkDialogInner.tsx index 915b434568..de9bfa999d 100644 --- a/packages/bpk-component-dialog/src/BpkDialogInner.tsx +++ b/packages/bpk-component-dialog/src/BpkDialogInner.tsx @@ -63,7 +63,10 @@ const BpkDialogInner = (props: Props) => { className={classNames} ref={dialogRef} > - {flare && } + {flare && }
    {children}
    diff --git a/packages/bpk-component-flare/src/BpkContentBubble.js b/packages/bpk-component-flare/src/BpkContentBubble.js index b91788a899..617a671f0d 100755 --- a/packages/bpk-component-flare/src/BpkContentBubble.js +++ b/packages/bpk-component-flare/src/BpkContentBubble.js @@ -73,6 +73,8 @@ const BpkContentBubble = (props) => { {showPointer && ( diff --git a/packages/bpk-component-flare/src/BpkFlareBar.js b/packages/bpk-component-flare/src/BpkFlareBar.js index 5e1b9770ec..92180ab961 100644 --- a/packages/bpk-component-flare/src/BpkFlareBar.js +++ b/packages/bpk-component-flare/src/BpkFlareBar.js @@ -51,12 +51,22 @@ const BpkFlareBar = (props) => { return (
    - + {rounded && ( - + )} {rounded && ( - + )}
    ); diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx index c7b40eb6ca..659f8aa00f 100644 --- a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx +++ b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx @@ -102,6 +102,8 @@ const BpkFloatingNotification = (props: Props) => { {text} @@ -111,6 +113,8 @@ const BpkFloatingNotification = (props: Props) => { {ctaText} diff --git a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx index 99e837e8c7..c4bfac94cd 100644 --- a/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx +++ b/packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx @@ -183,6 +183,8 @@ const BpkGraphicPromo = ({ )} ? classNames.concat(classNamesToAdd) : classNames; + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props return ; }; diff --git a/packages/bpk-component-input/src/BpkClearButton.tsx b/packages/bpk-component-input/src/BpkClearButton.tsx index 8becb08350..a79c879fe9 100644 --- a/packages/bpk-component-input/src/BpkClearButton.tsx +++ b/packages/bpk-component-input/src/BpkClearButton.tsx @@ -51,6 +51,8 @@ const BpkClearButton = ({ className, label, onClick, ...rest }: Props) => { > diff --git a/packages/bpk-component-input/src/BpkInput.tsx b/packages/bpk-component-input/src/BpkInput.tsx index 05b6b3a786..bc5e71b7dd 100644 --- a/packages/bpk-component-input/src/BpkInput.tsx +++ b/packages/bpk-component-input/src/BpkInput.tsx @@ -162,6 +162,8 @@ class BpkInput extends Component { this.setState({ persistClearButton: false }); } }} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={clearButtonClassNames.join(' ')} /> )} diff --git a/packages/bpk-component-input/src/withOpenEvents.tsx b/packages/bpk-component-input/src/withOpenEvents.tsx index 6366c0ba19..2844c51a33 100644 --- a/packages/bpk-component-input/src/withOpenEvents.tsx +++ b/packages/bpk-component-input/src/withOpenEvents.tsx @@ -190,6 +190,8 @@ const withOpenEvents =

    (InputComponent: ComponentType

    ) => { return ( { aria-label={ariaLabel} aria-labelledby={ariaLabelledby} title={title} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={classNames} > {children} diff --git a/packages/bpk-component-loading-button/src/BpkLoadingButton.js b/packages/bpk-component-loading-button/src/BpkLoadingButton.js index 5064869cfa..88b25de57b 100644 --- a/packages/bpk-component-loading-button/src/BpkLoadingButton.js +++ b/packages/bpk-component-loading-button/src/BpkLoadingButton.js @@ -134,6 +134,8 @@ const BpkLoadingButton = (props: LoadingProps) => { iconOnly={iconOnly} disabled={showBtnDisabled} large={large} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={classNames} link={link} linkOnDark={linkOnDark} diff --git a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js index 77ea12d6f2..386056a214 100644 --- a/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +++ b/packages/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js @@ -231,6 +231,8 @@ class BpkMobileScrollContainer extends Component { ref={(el) => { this.innerEl = el; }} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={getClassName('bpk-mobile-scroll-container__inner')} > {children} diff --git a/packages/bpk-component-modal/src/BpkModal.tsx b/packages/bpk-component-modal/src/BpkModal.tsx index 48632e60a9..461daf282e 100644 --- a/packages/bpk-component-modal/src/BpkModal.tsx +++ b/packages/bpk-component-modal/src/BpkModal.tsx @@ -102,6 +102,8 @@ const BpkModal = ({ containerClassName={containerClass.join(' ')} isIphone={isIphone} title={title} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={className} contentClassName={contentClassName} closeLabel={closeLabel} diff --git a/packages/bpk-component-modal/src/BpkModalInner.tsx b/packages/bpk-component-modal/src/BpkModalInner.tsx index 7c7fe69f92..a2035f4b74 100644 --- a/packages/bpk-component-modal/src/BpkModalInner.tsx +++ b/packages/bpk-component-modal/src/BpkModalInner.tsx @@ -137,6 +137,8 @@ const BpkModalInner = ({ : BAR_STYLES.default } id={headingId} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={navigationStyles.join(' ')} title={

    ) : ( {title}

    ( ( - + + - +
    ); diff --git a/packages/bpk-component-nudger/src/BpkNudger.tsx b/packages/bpk-component-nudger/src/BpkNudger.tsx index bd1ae08ef3..fac02b0f86 100644 --- a/packages/bpk-component-nudger/src/BpkNudger.tsx +++ b/packages/bpk-component-nudger/src/BpkNudger.tsx @@ -47,6 +47,8 @@ const BpkNudger = ({ return (
    {title && ( + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props {icon} {title} {subtitle && ( + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props {subtitle} @@ -70,6 +74,8 @@ const BpkNudger = ({ incrementValue={incrementValue} decrementValue={decrementValue} formatValue={formatValue} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={className} buttonType={buttonType} id={id} diff --git a/packages/bpk-component-pagination/src/BpkPaginationNudger.js b/packages/bpk-component-pagination/src/BpkPaginationNudger.js index 7d57ef9860..e64febc818 100644 --- a/packages/bpk-component-pagination/src/BpkPaginationNudger.js +++ b/packages/bpk-component-pagination/src/BpkPaginationNudger.js @@ -33,10 +33,14 @@ const AlignedArrowRightIcon = withRtlSupport(ArrowRightIcon); const nudgerIcon = (forward) => forward ? ( ) : ( ); @@ -49,6 +53,8 @@ const BpkPaginationNudger = (props) => { type={BUTTON_TYPES.link} onClick={onNudge} disabled={disabled} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={getClassName('bpk-pagination-nudger')} > {nudgerIcon(forward)} diff --git a/packages/bpk-component-pagination/src/BpkPaginationPage.js b/packages/bpk-component-pagination/src/BpkPaginationPage.js index 076e2ac649..7c8b663692 100644 --- a/packages/bpk-component-pagination/src/BpkPaginationPage.js +++ b/packages/bpk-component-pagination/src/BpkPaginationPage.js @@ -37,6 +37,8 @@ const BpkPaginationPage = (props) => { { {dialingCodeProps.label} @@ -160,6 +162,8 @@ const BpkPhoneInput = (props: Props) => { { {label} @@ -190,6 +196,8 @@ const BpkPhoneInput = (props: Props) => { value={displayValue} type={INPUT_TYPES.tel} onChange={handleChange} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={getClassName(className)} />
    diff --git a/packages/bpk-component-popover/src/BpkPopover.js b/packages/bpk-component-popover/src/BpkPopover.js index 5a23ea924b..855d4683d6 100644 --- a/packages/bpk-component-popover/src/BpkPopover.js +++ b/packages/bpk-component-popover/src/BpkPopover.js @@ -120,6 +120,8 @@ const BpkPopover = (props: Props) => {   {closeButtonIcon ? ( { {typeof target !== 'function' && target} { > {previousPrice && ( { 𐤟 @@ -109,6 +113,8 @@ const BpkPrice = (props: Props) => { > { {trailingText} diff --git a/packages/bpk-component-rating/src/BpkRating.js b/packages/bpk-component-rating/src/BpkRating.js index 17d3bb0674..c687a61241 100644 --- a/packages/bpk-component-rating/src/BpkRating.js +++ b/packages/bpk-component-rating/src/BpkRating.js @@ -117,6 +117,8 @@ const BpkRating = (props: Props) => {
    {button}
    diff --git a/packages/bpk-component-section-list/src/BpkSectionListItem.js b/packages/bpk-component-section-list/src/BpkSectionListItem.js index f62ed7e01e..1334bfb705 100644 --- a/packages/bpk-component-section-list/src/BpkSectionListItem.js +++ b/packages/bpk-component-section-list/src/BpkSectionListItem.js @@ -64,6 +64,8 @@ const BpkSectionListItem = (props: Props) => { > {children} @@ -81,6 +83,8 @@ const BpkSectionListItem = (props: Props) => { > {children} diff --git a/packages/bpk-component-slider/src/BpkSlider.tsx b/packages/bpk-component-slider/src/BpkSlider.tsx index 97cc348a00..68c84fb99c 100644 --- a/packages/bpk-component-slider/src/BpkSlider.tsx +++ b/packages/bpk-component-slider/src/BpkSlider.tsx @@ -54,6 +54,8 @@ const BpkSlider = (props: Props) => { withTracks snapDragDisabled={false} invert={invert} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={classNames.join(' ')} thumbClassName={thumbClassNames.join(' ')} thumbActiveClassName={getClassName('bpk-slider__handle--active')} diff --git a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.js b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.js index 83429fa294..bdb500812e 100644 --- a/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.js +++ b/packages/bpk-component-spinner/src/BpkExtraLargeSpinner.js @@ -44,8 +44,15 @@ const BpkExtraLargeSpinner = (props: Props) => { className, ); - // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. - return ; + return ( + + ); }; BpkExtraLargeSpinner.propTypes = { diff --git a/packages/bpk-component-spinner/src/BpkLargeSpinner.js b/packages/bpk-component-spinner/src/BpkLargeSpinner.js index 72c3de518f..8108d77aee 100644 --- a/packages/bpk-component-spinner/src/BpkLargeSpinner.js +++ b/packages/bpk-component-spinner/src/BpkLargeSpinner.js @@ -47,8 +47,15 @@ const BpkLargeSpinner = (props: Props) => { className, ); - // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. - return ; + return ( + + ); }; BpkLargeSpinner.propTypes = { diff --git a/packages/bpk-component-spinner/src/BpkSpinner.js b/packages/bpk-component-spinner/src/BpkSpinner.js index bca039bc98..633b52f26f 100644 --- a/packages/bpk-component-spinner/src/BpkSpinner.js +++ b/packages/bpk-component-spinner/src/BpkSpinner.js @@ -46,8 +46,15 @@ const BpkSpinner = (props: Props) => { className, ); - // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. - return ; + return ( + + ); }; BpkSpinner.propTypes = { diff --git a/packages/bpk-component-star-rating/src/BpkInteractiveStar.js b/packages/bpk-component-star-rating/src/BpkInteractiveStar.js index 1312124a37..356be43e1b 100644 --- a/packages/bpk-component-star-rating/src/BpkInteractiveStar.js +++ b/packages/bpk-component-star-rating/src/BpkInteractiveStar.js @@ -64,8 +64,14 @@ const BpkInteractiveStar = (props: Props) => { aria-pressed={selected} type="button" > - {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */} - + ); }; diff --git a/packages/bpk-component-star-rating/src/BpkStar.js b/packages/bpk-component-star-rating/src/BpkStar.js index 551c66e322..4b189810e1 100644 --- a/packages/bpk-component-star-rating/src/BpkStar.js +++ b/packages/bpk-component-star-rating/src/BpkStar.js @@ -81,17 +81,28 @@ const BpkStar = (props: Props) => { return ( // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md - + ); } return type === STAR_TYPES.FULL ? ( + + {...rest} /> ) : ( + + {...rest} /> ); }; diff --git a/packages/bpk-component-text/src/BpkText.tsx b/packages/bpk-component-text/src/BpkText.tsx index 1b7734a1dd..775326cf05 100644 --- a/packages/bpk-component-text/src/BpkText.tsx +++ b/packages/bpk-component-text/src/BpkText.tsx @@ -89,6 +89,8 @@ const BpkText = ({ ); return ( + // Allowed, TagName is always a dom element. + // eslint-disable-next-line @skyscanner/rules/forbid-component-props {children} diff --git a/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js b/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js index 002cd678fa..1b555c555b 100644 --- a/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js +++ b/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js @@ -85,6 +85,8 @@ class BpkThemeToggle extends Component { return (
    diff --git a/packages/bpk-component-tooltip/src/BpkTooltipPortal.tsx b/packages/bpk-component-tooltip/src/BpkTooltipPortal.tsx index 15ea9814f6..9580e59daa 100644 --- a/packages/bpk-component-tooltip/src/BpkTooltipPortal.tsx +++ b/packages/bpk-component-tooltip/src/BpkTooltipPortal.tsx @@ -213,6 +213,8 @@ class BpkTooltipPortal extends Component { onClose={this.closeTooltip} style={portalStyle} renderTarget={renderTarget} + // TODO: className to be removed + // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={classNames.join(' ')} > diff --git a/packages/bpk-react-utils/src/withDefaultProps.tsx b/packages/bpk-react-utils/src/withDefaultProps.tsx index 5d60c47c77..1cb8cd4f1d 100644 --- a/packages/bpk-react-utils/src/withDefaultProps.tsx +++ b/packages/bpk-react-utils/src/withDefaultProps.tsx @@ -53,6 +53,8 @@ const withDefaultProps = ( return ( Date: Fri, 12 Apr 2024 15:27:44 +0100 Subject: [PATCH 060/174] NOJIRA: Add rating example with stars (#3355) It's not immediately obvious that the title attribute of the BpkRating can accept any React Node. The only 2 examples of this are images. This will also be supplanted with an update to the docs --- examples/bpk-component-rating/examples.js | 40 +++++++++++++++++++++++ packages/bpk-component-rating/README.md | 15 +++++++++ 2 files changed, 55 insertions(+) diff --git a/examples/bpk-component-rating/examples.js b/examples/bpk-component-rating/examples.js index b0f0892b6c..1a5777cf6a 100644 --- a/examples/bpk-component-rating/examples.js +++ b/examples/bpk-component-rating/examples.js @@ -21,6 +21,7 @@ import BpkRating, { RATING_SIZES, RATING_SCALES, } from '../../packages/bpk-component-rating'; +import BpkStarRating from '../../packages/bpk-component-star-rating'; import { cssModules } from '../../packages/bpk-react-utils'; import STYLES from './examples.module.scss'; @@ -56,6 +57,15 @@ const LargeImageTitle = ( /> ); +const ThreeStars = ( + + `Rated ${rating} out of ${maxRating} stars` + } + /> +); + const LargeTripImageTitle = ( rating 4.5 ( subtitle="818 reviews" />
    + +
    ); @@ -126,6 +143,14 @@ const LargeSizeExample = () => ( size={RATING_SIZES.large} />
    + +
    ); @@ -275,6 +300,21 @@ const MixedExample = () => ( size={RATING_SIZES.large} />
    + +
    + +

    ( value={9.9} ratingScale={RATING_SCALES.zeroToTen} /> + + // With a React Node element as the title + + `Rated ${rating} out of ${maxRating} stars` + } + /> + } + subtitle="1,230 reviews" + /> ); ``` From ae38ac379a4e81ff22e90c7ff169029a5ee85df5 Mon Sep 17 00:00:00 2001 From: James Ronald <7976511+jronald01@users.noreply.github.com> Date: Fri, 12 Apr 2024 15:53:37 +0100 Subject: [PATCH 061/174] LOOM-1314 BpkSectionListItem Class 2 Overrides (#3354) --- .../src/BpkSectionListItem.js | 16 +++---- .../src/BpkSectionListItem.module.scss | 1 + .../BpkSectionListItem-test.js.snap | 48 +++++++++++-------- 3 files changed, 35 insertions(+), 30 deletions(-) diff --git a/packages/bpk-component-section-list/src/BpkSectionListItem.js b/packages/bpk-component-section-list/src/BpkSectionListItem.js index 1334bfb705..491d2e6c98 100644 --- a/packages/bpk-component-section-list/src/BpkSectionListItem.js +++ b/packages/bpk-component-section-list/src/BpkSectionListItem.js @@ -63,11 +63,9 @@ const BpkSectionListItem = (props: Props) => { {...rest} > {children} - + + + ); } @@ -82,11 +80,9 @@ const BpkSectionListItem = (props: Props) => { {...rest} > {children} - + + + ); } diff --git a/packages/bpk-component-section-list/src/BpkSectionListItem.module.scss b/packages/bpk-component-section-list/src/BpkSectionListItem.module.scss index 03becd8cc5..294848e6a1 100644 --- a/packages/bpk-component-section-list/src/BpkSectionListItem.module.scss +++ b/packages/bpk-component-section-list/src/BpkSectionListItem.module.scss @@ -40,6 +40,7 @@ } &__chevron { + display: contents; fill: tokens.$bpk-text-secondary-day; #{$root}:hover & { diff --git a/packages/bpk-component-section-list/src/__snapshots__/BpkSectionListItem-test.js.snap b/packages/bpk-component-section-list/src/__snapshots__/BpkSectionListItem-test.js.snap index 8e6063c788..72d6548f28 100644 --- a/packages/bpk-component-section-list/src/__snapshots__/BpkSectionListItem-test.js.snap +++ b/packages/bpk-component-section-list/src/__snapshots__/BpkSectionListItem-test.js.snap @@ -17,17 +17,21 @@ exports[`BpkSectionListItem should render correctly with a "href" prop 1`] = ` href="#" > Hello world - + + `; @@ -49,17 +53,21 @@ exports[`BpkSectionListItem should render correctly with an "onClick" prop 1`] = type="button" > Hello world - + + `; From 8408c94df950a03f84fa529702292ead4bd14d0d Mon Sep 17 00:00:00 2001 From: James Ronald <7976511+jronald01@users.noreply.github.com> Date: Fri, 12 Apr 2024 16:17:04 +0100 Subject: [PATCH 062/174] LOOM-1304 BpkNudger Class 2 Overrides (#3349) * LOOM-1304 BpkNudger Class 2 Overrides * Move children to parent level * Remove classname and associated test * disable forbid-component-props for the component classname --- .../src/BpkNudger-test.tsx | 16 ----- .../src/BpkNudger.module.scss | 2 +- .../bpk-component-nudger/src/BpkNudger.tsx | 22 +++---- .../src/__snapshots__/BpkNudger-test.tsx.snap | 66 ------------------- 4 files changed, 12 insertions(+), 94 deletions(-) diff --git a/packages/bpk-component-nudger/src/BpkNudger-test.tsx b/packages/bpk-component-nudger/src/BpkNudger-test.tsx index 8c1a42cc5b..5d9cd3932d 100644 --- a/packages/bpk-component-nudger/src/BpkNudger-test.tsx +++ b/packages/bpk-component-nudger/src/BpkNudger-test.tsx @@ -96,22 +96,6 @@ describe('BpkNudger', () => { expect(asFragment()).toMatchSnapshot(); }); - it('should render correctly with a "className" attribute', () => { - const { asFragment } = render( - null} - decreaseButtonLabel="Decrease" - increaseButtonLabel="Increase" - className="my-nudger" - />, - ); - expect(asFragment()).toMatchSnapshot(); - }); - it('should render correctly with a value = min', () => { const { asFragment } = render( { - + const classNames = getClassName(title && 'bpk-nudger__container'); return (
    {title && ( - // TODO: className to be removed - // eslint-disable-next-line @skyscanner/rules/forbid-component-props - - {icon} +
    + + {icon} + {title} {subtitle && ( - // TODO: className to be removed - // eslint-disable-next-line @skyscanner/rules/forbid-component-props - - {subtitle} - + + + {subtitle} + + )} - +
    )} `; -exports[`BpkNudger should render correctly with a "className" attribute 1`] = ` - -
    -
    - - - -
    -
    -     -`; - exports[`BpkNudger should render correctly with a value < min 1`] = `
    Date: Mon, 15 Apr 2024 09:53:09 +0100 Subject: [PATCH 063/174] link to new documentation inside eslint-plugin-rules (#3353) --- .eslintrc | 2 +- decisions/className.md | 96 ------------------------------------------ 2 files changed, 1 insertion(+), 97 deletions(-) delete mode 100644 decisions/className.md diff --git a/.eslintrc b/.eslintrc index 551da22992..132aab4034 100644 --- a/.eslintrc +++ b/.eslintrc @@ -135,7 +135,7 @@ { "propName": "className", "message": - "Prop {{prop}} is forbidden. See ./decisions/className.md" + "Prop {{prop}} is forbidden. See https://github.com/Skyscanner/eslint-plugin-rules?tab=readme-ov-file#forbid-component-props" } ] } diff --git a/decisions/className.md b/decisions/className.md deleted file mode 100644 index cfc6f69521..0000000000 --- a/decisions/className.md +++ /dev/null @@ -1,96 +0,0 @@ -### Avoid className props - -Never provide any prop that takes in a CSS style to a React component. These -props are typically called `className` but it is not the _name_ that matters, but that it is passing in a style directly. - -```tsx - -``` - -Using the base HTML `className` prop on lower level HTML elements is allowed. - -```tsx -
    -``` - -### Composition - -For adding spacing around a component, such as `margin`, compose the component by using dividing elements. - -```tsx -
    - -
    -``` - -### Configuration - -For changing the styling within an element, such as changing its colour, provide one or more props that allow the consumer to do so explicitly. - -```tsx - -``` - -
    -Why className usage can cause specificity problems - -In CSS when two selectors are of equal specificity it is the last style in the stylesheet that overrides the other. For example, given the below: - -```tsx -.blue { - color: blue; -} - -.green { - color: green; -} - -

    What color is this text?

    -``` - -The text would be green. Each uses a class selector, so neither is more specific, but `.green` is last in the stylesheet (last in the cascade). - -In the below component a base style, `base`, is applied, and then any additional style can be added via the `className` prop. If both had the same specificity then it is the last one added to the stylesheet that will be able to override the other. - -```tsx -const MyComponent = ({ className }) => { - return
    diff --git a/packages/bpk-component-image/src/__snapshots__/BpkImage-test.tsx.snap b/packages/bpk-component-image/src/__snapshots__/BpkImage-test.tsx.snap index b9189e023d..6e9c7678bc 100644 --- a/packages/bpk-component-image/src/__snapshots__/BpkImage-test.tsx.snap +++ b/packages/bpk-component-image/src/__snapshots__/BpkImage-test.tsx.snap @@ -96,61 +96,64 @@ exports[`BpkImage should have loading behavior 1`] = `
    diff --git a/packages/bpk-component-loading-button/src/__snapshots__/BpkLoadingButton-test.js.snap b/packages/bpk-component-loading-button/src/__snapshots__/BpkLoadingButton-test.js.snap index 74abbee999..b1c465c45f 100644 --- a/packages/bpk-component-loading-button/src/__snapshots__/BpkLoadingButton-test.js.snap +++ b/packages/bpk-component-loading-button/src/__snapshots__/BpkLoadingButton-test.js.snap @@ -224,74 +224,77 @@ exports[`BpkLoadingButton should render correctly with "large" and "loading" att - + + My button  - + + My button  { ); return ( - + + + ); }; diff --git a/packages/bpk-component-spinner/src/BpkLargeSpinner.js b/packages/bpk-component-spinner/src/BpkLargeSpinner.js index 8108d77aee..be9974c82a 100644 --- a/packages/bpk-component-spinner/src/BpkLargeSpinner.js +++ b/packages/bpk-component-spinner/src/BpkLargeSpinner.js @@ -48,13 +48,13 @@ const BpkLargeSpinner = (props: Props) => { ); return ( - + + + + ); }; diff --git a/packages/bpk-component-spinner/src/BpkSpinner.js b/packages/bpk-component-spinner/src/BpkSpinner.js index 633b52f26f..12ceb2668d 100644 --- a/packages/bpk-component-spinner/src/BpkSpinner.js +++ b/packages/bpk-component-spinner/src/BpkSpinner.js @@ -47,13 +47,12 @@ const BpkSpinner = (props: Props) => { ); return ( - + + + ); }; diff --git a/packages/bpk-component-spinner/src/__snapshots__/BpkExtraLargeSpinner-test.js.snap b/packages/bpk-component-spinner/src/__snapshots__/BpkExtraLargeSpinner-test.js.snap index 46daf5f103..865ee765a8 100644 --- a/packages/bpk-component-spinner/src/__snapshots__/BpkExtraLargeSpinner-test.js.snap +++ b/packages/bpk-component-spinner/src/__snapshots__/BpkExtraLargeSpinner-test.js.snap @@ -2,292 +2,304 @@ exports[`BpkExtraLargeSpinner should render correctly 1`] = ` - + + `; exports[`BpkExtraLargeSpinner should render correctly with a "className" attribute 1`] = ` - + + `; exports[`BpkExtraLargeSpinner should render correctly with type as light 1`] = ` - + + `; exports[`BpkExtraLargeSpinner should render correctly with type as primary 1`] = ` - + + `; diff --git a/packages/bpk-component-spinner/src/__snapshots__/BpkLargeSpinner-test.js.snap b/packages/bpk-component-spinner/src/__snapshots__/BpkLargeSpinner-test.js.snap index 73d5dd07ad..690596b6f7 100644 --- a/packages/bpk-component-spinner/src/__snapshots__/BpkLargeSpinner-test.js.snap +++ b/packages/bpk-component-spinner/src/__snapshots__/BpkLargeSpinner-test.js.snap @@ -2,365 +2,380 @@ exports[`BpkLargeSpinner should render correctly 1`] = ` - + + `; exports[`BpkLargeSpinner should render correctly with a "alignToButton" attribute 1`] = ` - + + `; exports[`BpkLargeSpinner should render correctly with a "className" attribute 1`] = ` - + + `; exports[`BpkLargeSpinner should render correctly with type as light 1`] = ` - + + `; exports[`BpkLargeSpinner should render correctly with type as primary 1`] = ` - + + `; diff --git a/packages/bpk-component-spinner/src/__snapshots__/BpkSpinner-test.js.snap b/packages/bpk-component-spinner/src/__snapshots__/BpkSpinner-test.js.snap index 84c2f4a138..b01b97a4c2 100644 --- a/packages/bpk-component-spinner/src/__snapshots__/BpkSpinner-test.js.snap +++ b/packages/bpk-component-spinner/src/__snapshots__/BpkSpinner-test.js.snap @@ -2,300 +2,315 @@ exports[`BpkSpinner should render correctly 1`] = ` - + + `; exports[`BpkSpinner should render correctly with a "alignToButton" attribute 1`] = ` - + + `; exports[`BpkSpinner should render correctly with a "className" attribute 1`] = ` - + + `; exports[`BpkSpinner should render correctly with type as light 1`] = ` - + + `; exports[`BpkSpinner should render correctly with type as primary 1`] = ` - + + `; From e96a40d2e265498b2a4e80c2d34efdba7e79c03f Mon Sep 17 00:00:00 2001 From: Matthew Robertson Date: Mon, 15 Apr 2024 17:19:42 +0100 Subject: [PATCH 066/174] [LOOM-1302] - Update BpkNavigationBarButtonLink and Icon (#3361) * Update BpkNavigationBarButtonLink and Icon * snapshots --------- Co-authored-by: metalix2 --- .../__snapshots__/BpkModalInner-test.tsx.snap | 20 +++--- .../BpkNavigationBarButtonLink.module.scss | 68 ------------------ .../src/BpkNavigationBarButtonLink.tsx | 27 +++---- .../src/BpkNavigationBarIconButton.tsx | 25 +++---- .../BpkNavigationBar-test.tsx.snap | 72 ++++++++++--------- .../BpkNavigationBarButtonLink-test.tsx.snap | 14 ++-- .../BpkNavigationBarIconButton-test.tsx.snap | 24 ++++--- 7 files changed, 97 insertions(+), 153 deletions(-) delete mode 100644 packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.scss diff --git a/packages/bpk-component-modal/src/__snapshots__/BpkModalInner-test.tsx.snap b/packages/bpk-component-modal/src/__snapshots__/BpkModalInner-test.tsx.snap index b321fb444b..be6deccf23 100644 --- a/packages/bpk-component-modal/src/__snapshots__/BpkModalInner-test.tsx.snap +++ b/packages/bpk-component-modal/src/__snapshots__/BpkModalInner-test.tsx.snap @@ -370,15 +370,19 @@ exports[`BpkModalInner should render correctly with an accessory view 1`] = ` - + +

    { children: ReactNode, onClick: (event: MouseEvent) => void, @@ -42,18 +37,16 @@ const BpkNavigationBarButtonLink = ({ className, ...rest }: Props) => ( - - {children} - + + + {children} + + ); export default BpkNavigationBarButtonLink; diff --git a/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.tsx b/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.tsx index 35b706068a..efbfa06684 100644 --- a/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.tsx +++ b/packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.tsx @@ -19,7 +19,7 @@ import type { ComponentType, MouseEvent, ReactNode } from 'react'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. -import BpkIconButton from '../../bpk-component-close-button'; +import BpkCloseButton from '../../bpk-component-close-button'; import { cssModules } from '../../bpk-react-utils'; import { BAR_STYLES, type BarStyle } from './BpkNavigationBar'; @@ -39,17 +39,18 @@ export type Props = { }; const BpkNavigationBarIconButton = ({ barStyle = BAR_STYLES.default, className, icon, ...rest }: Props) => ( - + + + ); export default BpkNavigationBarIconButton; diff --git a/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBar-test.tsx.snap b/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBar-test.tsx.snap index 2cb760aaab..88fb4b4557 100644 --- a/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBar-test.tsx.snap +++ b/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBar-test.tsx.snap @@ -49,18 +49,20 @@ exports[`BpkNavigationBar should render correctly with a "leadingButton" attribu
    - + + + + +
    - + + + + +

    @@ -124,18 +128,20 @@ exports[`BpkNavigationBar should render correctly with an element for the title
    - + + + + +
    diff --git a/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBarButtonLink-test.tsx.snap b/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBarButtonLink-test.tsx.snap index 87fc6e8ec2..31d1ef73b0 100644 --- a/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBarButtonLink-test.tsx.snap +++ b/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBarButtonLink-test.tsx.snap @@ -2,11 +2,15 @@ exports[`BpkNavigationButtonLink should render correctly 1`] = ` - + + `; diff --git a/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBarIconButton-test.tsx.snap b/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBarIconButton-test.tsx.snap index f9c83a6a26..c4cdba899b 100644 --- a/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBarIconButton-test.tsx.snap +++ b/packages/bpk-component-navigation-bar/src/__snapshots__/BpkNavigationBarIconButton-test.tsx.snap @@ -2,17 +2,21 @@ exports[`BpkNavigationIconButton should render correctly 1`] = ` - + + + + + `; From f5e9dae82e946146b81487d4fa25750c3683836e Mon Sep 17 00:00:00 2001 From: Simon Ward Date: Tue, 16 Apr 2024 09:19:14 +0100 Subject: [PATCH 067/174] LOOM-1316 BpkInteractiveStar moved className on BpkStarNonRtl to new wrapper div (#3362) --- .../src/BpkInteractiveStar.js | 15 +- .../BpkInteractiveStar-test.js.snap | 72 +- .../BpkInteractiveStarRating-test.js.snap | 1036 ++++++++++------- ...ithInteractiveStarRatingState-test.js.snap | 480 ++++---- 4 files changed, 933 insertions(+), 670 deletions(-) diff --git a/packages/bpk-component-star-rating/src/BpkInteractiveStar.js b/packages/bpk-component-star-rating/src/BpkInteractiveStar.js index 356be43e1b..aae2c07c41 100644 --- a/packages/bpk-component-star-rating/src/BpkInteractiveStar.js +++ b/packages/bpk-component-star-rating/src/BpkInteractiveStar.js @@ -64,14 +64,13 @@ const BpkInteractiveStar = (props: Props) => { aria-pressed={selected} type="button" > - +
    + +
    ); }; diff --git a/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStar-test.js.snap b/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStar-test.js.snap index 3bb2274bc8..58ed6fbcd9 100644 --- a/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStar-test.js.snap +++ b/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStar-test.js.snap @@ -8,17 +8,21 @@ exports[`BpkInteractiveStar should render correctly with a selected full star 1` class="bpk-interactive-star bpk-interactive-star--selected" type="button" > - + +
    `; @@ -31,17 +35,21 @@ exports[`BpkInteractiveStar should render correctly with empty star 1`] = ` class="bpk-interactive-star" type="button" > - + +
    `; @@ -54,17 +62,21 @@ exports[`BpkInteractiveStar should render correctly with full star 1`] = ` class="bpk-interactive-star" type="button" > - + +
    `; diff --git a/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStarRating-test.js.snap b/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStarRating-test.js.snap index 818ebfe217..00e6355b76 100644 --- a/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStarRating-test.js.snap +++ b/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStarRating-test.js.snap @@ -11,17 +11,21 @@ exports[`BpkInteractiveStarRating should render 4 stars based on hoverRating as class="bpk-interactive-star" type="button" > - +
    + +
    @@ -110,17 +130,21 @@ exports[`BpkInteractiveStarRating should render correctly if you give it more th class="bpk-interactive-star" type="button" > - + +
    @@ -209,17 +249,21 @@ exports[`BpkInteractiveStarRating should render correctly with "large" attribute class="bpk-interactive-star" type="button" > - + +
    @@ -308,17 +368,21 @@ exports[`BpkInteractiveStarRating should render correctly with "maxRating" attri class="bpk-interactive-star" type="button" > - + +     @@ -461,17 +553,21 @@ exports[`BpkInteractiveStarRating should render correctly with 0 stars 1`] = ` class="bpk-interactive-star" type="button" > - + + @@ -560,17 +672,21 @@ exports[`BpkInteractiveStarRating should render correctly with 3 stars 1`] = ` class="bpk-interactive-star" type="button" > - + + @@ -659,17 +791,21 @@ exports[`BpkInteractiveStarRating should render correctly with 3.5 stars 1`] = ` class="bpk-interactive-star" type="button" > - + + @@ -758,17 +910,21 @@ exports[`BpkInteractiveStarRating should render correctly with 5 stars 1`] = ` class="bpk-interactive-star" type="button" > - + + diff --git a/packages/bpk-component-star-rating/src/__snapshots__/withInteractiveStarRatingState-test.js.snap b/packages/bpk-component-star-rating/src/__snapshots__/withInteractiveStarRatingState-test.js.snap index 7d2abf7452..48a01b0f6b 100644 --- a/packages/bpk-component-star-rating/src/__snapshots__/withInteractiveStarRatingState-test.js.snap +++ b/packages/bpk-component-star-rating/src/__snapshots__/withInteractiveStarRatingState-test.js.snap @@ -11,17 +11,21 @@ exports[`withInteractiveStarRatingState should render correctly 1`] = ` class="bpk-interactive-star" type="button" > - + + @@ -110,17 +130,21 @@ exports[`withInteractiveStarRatingState should render correctly when hovering ov class="bpk-interactive-star" type="button" > - + + @@ -209,17 +249,21 @@ exports[`withInteractiveStarRatingState should render correctly when selecting 3 class="bpk-interactive-star" type="button" > - + + @@ -308,17 +368,21 @@ exports[`withInteractiveStarRatingState should render correctly with "large" att class="bpk-interactive-star" type="button" > - + + From 6256ccc4f6c93330baa5a4d20aa145a26dd833a6 Mon Sep 17 00:00:00 2001 From: mungodewar <89925955+mungodewar@users.noreply.github.com> Date: Tue, 16 Apr 2024 11:01:46 +0100 Subject: [PATCH 068/174] update svgs to include modified ai logo & new dot logo (#3366) --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index bde89ce116..dafee655e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "@percy/cli": "^1.28.2", "@percy/storybook": "^5.0.1", "@skyscanner/bpk-foundations-web": "^17.9.0", - "@skyscanner/bpk-svgs": "^19.1.0", + "@skyscanner/bpk-svgs": "^19.2.0", "@skyscanner/eslint-config-skyscanner": "^18.0.0", "@skyscanner/stylelint-config-skyscanner": "^11.1.0", "@storybook/addon-a11y": "^7.6.17", @@ -4614,9 +4614,9 @@ } }, "node_modules/@skyscanner/bpk-svgs": { - "version": "19.1.0", - "resolved": "https://registry.npmjs.org/@skyscanner/bpk-svgs/-/bpk-svgs-19.1.0.tgz", - "integrity": "sha512-pMOWP/fSveHQMDx3g85XGGbZmaqWG8i1hpEFOZUh10PdOVGjxvquCK1wrwuzGcQVFTK97fKws76Zvpsy3UAeew==", + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/@skyscanner/bpk-svgs/-/bpk-svgs-19.2.0.tgz", + "integrity": "sha512-I+GMmrogihhRzftqk4+Q/O99fydsBBAgMGEZwCmMftbZSjooYhNiBWsagcJaID+Eflaml7bpH3Y05lZVXy0ehQ==", "dev": true, "engines": { "node": "^18.16.0", diff --git a/package.json b/package.json index e7c9d1f282..5573ec20b8 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@percy/cli": "^1.28.2", "@percy/storybook": "^5.0.1", "@skyscanner/bpk-foundations-web": "^17.9.0", - "@skyscanner/bpk-svgs": "^19.1.0", + "@skyscanner/bpk-svgs": "^19.2.0", "@skyscanner/eslint-config-skyscanner": "^18.0.0", "@skyscanner/stylelint-config-skyscanner": "^11.1.0", "@storybook/addon-a11y": "^7.6.17", From dce26c4c19bc54793531f620bacbd7245b32dffd Mon Sep 17 00:00:00 2001 From: Matthew Robertson Date: Tue, 16 Apr 2024 11:04:07 +0100 Subject: [PATCH 069/174] [LOOM-1318] [BpkThemeToggle] classname prop update (#3364) * Update className prop * snapshots --------- Co-authored-by: metalix2 --- .../src/BpkThemeToggle.js | 11 +++-------- .../src/__snapshots__/BpkThemeToggle-test.js.snap | 14 +++++++++----- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js b/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js index 1b555c555b..6d644da447 100644 --- a/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js +++ b/packages/bpk-component-theme-toggle/src/BpkThemeToggle.js @@ -84,14 +84,9 @@ class BpkThemeToggle extends Component { const { ...rest } = this.props; return (
    - - Change theme - + + Change theme +
    - + + - + +
    - + +
    - + +
    - + +
    - + +
    - + +
    @@ -322,12 +366,16 @@ exports[`BpkPhoneInput should render correctly with a dialing code image attribu
    - + +
    - + +
    Date: Mon, 29 Apr 2024 10:40:19 +0100 Subject: [PATCH 087/174] Bump gulp from 4.0.2 to 5.0.0 (#3328) Bumps [gulp](https://github.com/gulpjs/gulp) from 4.0.2 to 5.0.0. - [Release notes](https://github.com/gulpjs/gulp/releases) - [Changelog](https://github.com/gulpjs/gulp/blob/master/CHANGELOG.md) - [Commits](https://github.com/gulpjs/gulp/compare/v4.0.2...v5.0.0) --- updated-dependencies: - dependency-name: gulp dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 1974 +++++++++++++++------------------------------ package.json | 2 +- 2 files changed, 632 insertions(+), 1344 deletions(-) diff --git a/package-lock.json b/package-lock.json index dafee655e0..5b9b62809d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,7 +56,7 @@ "date-fns": "^3.3.1", "eslint_d": "^13.0.0", "glob": "^8.1.0", - "gulp": "^4.0.2", + "gulp": "^5.0.0", "gulp-rename": "^2.0.0", "gulp-svgmin": "^4.1.0", "husky": "^9.0.11", @@ -2525,6 +2525,27 @@ "node": ">=14.2.0" } }, + "node_modules/@gulpjs/messages": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@gulpjs/messages/-/messages-1.1.0.tgz", + "integrity": "sha512-Ys9sazDatyTgZVb4xPlDufLweJ/Os2uHWOv+Caxvy2O85JcnT4M3vc73bi8pdLWlv3fdWQz3pdI9tVwo8rQQSg==", + "dev": true, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/@gulpjs/to-absolute-glob": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@gulpjs/to-absolute-glob/-/to-absolute-glob-4.0.0.tgz", + "integrity": "sha512-kjotm7XJrJ6v+7knhPaRgaT6q8F8K2jiafwYdNHLzmV0uGLuZY43FK6smNSHUPrhq5kX2slCUy+RGG/xGqmIKA==", + "dev": true, + "dependencies": { + "is-negated-glob": "^1.0.0" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -10023,17 +10044,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/ansi-gray": { - "version": "0.1.1", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-wrap": "0.1.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/ansi-html-community": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz", @@ -10114,11 +10124,6 @@ "node": ">=0.10.0" } }, - "node_modules/archy": { - "version": "1.0.0", - "dev": true, - "license": "MIT" - }, "node_modules/argparse": { "version": "1.0.10", "dev": true, @@ -10155,17 +10160,6 @@ "node": ">=0.10.0" } }, - "node_modules/arr-filter": { - "version": "1.1.2", - "dev": true, - "license": "MIT", - "dependencies": { - "make-iterator": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/arr-flatten": { "version": "1.1.0", "dev": true, @@ -10174,17 +10168,6 @@ "node": ">=0.10.0" } }, - "node_modules/arr-map": { - "version": "2.0.2", - "dev": true, - "license": "MIT", - "dependencies": { - "make-iterator": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/arr-union": { "version": "3.1.0", "dev": true, @@ -10211,8 +10194,9 @@ }, "node_modules/array-each": { "version": "1.0.1", + "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz", + "integrity": "sha512-zHjL5SZa68hkKHBFBK6DJCTtr9sfTCPCaph/L7tMSLcTFgy+zX7E+6q5UArbtOtMBCtxdICpfTCspRse+ywyXA==", "dev": true, - "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -10240,70 +10224,11 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/array-initial": { - "version": "1.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "array-slice": "^1.0.0", - "is-number": "^4.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/array-initial/node_modules/is-number": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/array-last": { - "version": "1.3.0", - "dev": true, - "license": "MIT", - "dependencies": { - "is-number": "^4.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/array-last/node_modules/is-number": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/array-slice": { "version": "1.1.0", + "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz", + "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==", "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/array-sort": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "default-compare": "^1.0.0", - "get-value": "^2.0.6", - "kind-of": "^5.0.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/array-sort/node_modules/kind-of": { - "version": "5.1.0", - "dev": true, - "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -10526,30 +10451,19 @@ "dev": true }, "node_modules/async-done": { - "version": "1.3.2", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/async-done/-/async-done-2.0.0.tgz", + "integrity": "sha512-j0s3bzYq9yKIVLKGE/tWlCpa3PfFLcrDZLTSVdnnCTGagXuXBJO4SsY9Xdk/fQBirCkH4evW5xOeJXqlAQFdsw==", "dev": true, - "license": "MIT", "dependencies": { - "end-of-stream": "^1.1.0", - "once": "^1.3.2", - "process-nextick-args": "^2.0.0", - "stream-exhaust": "^1.0.1" + "end-of-stream": "^1.4.4", + "once": "^1.4.0", + "stream-exhaust": "^1.0.2" }, "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, - "node_modules/async-each": { - "version": "1.0.6", - "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], - "license": "MIT" - }, "node_modules/async-limiter": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", @@ -10565,14 +10479,15 @@ } }, "node_modules/async-settle": { - "version": "1.0.0", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/async-settle/-/async-settle-2.0.0.tgz", + "integrity": "sha512-Obu/KE8FurfQRN6ODdHN9LuXqwC+JFIM9NRyZqJJ4ZfLJmIYN9Rg0/kb+wF70VV5+fJusTMQlJ1t5rF7J/ETdg==", "dev": true, - "license": "MIT", "dependencies": { - "async-done": "^1.2.2" + "async-done": "^2.0.0" }, "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, "node_modules/asynckit": { @@ -11130,22 +11045,29 @@ "license": "MIT" }, "node_modules/bach": { - "version": "1.2.0", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/bach/-/bach-2.0.1.tgz", + "integrity": "sha512-A7bvGMGiTOxGMpNupYl9HQTf0FFDNF4VCmks4PJpFyN1AX2pdKuxuwdvUz2Hu388wcgp+OvGFNsumBfFNkR7eg==", "dev": true, - "license": "MIT", "dependencies": { - "arr-filter": "^1.1.1", - "arr-flatten": "^1.0.1", - "arr-map": "^2.0.0", - "array-each": "^1.0.0", - "array-initial": "^1.0.0", - "array-last": "^1.1.1", - "async-done": "^1.2.2", - "async-settle": "^1.0.0", - "now-and-later": "^2.0.0" + "async-done": "^2.0.0", + "async-settle": "^2.0.0", + "now-and-later": "^3.0.0" }, "engines": { - "node": ">= 0.10" + "node": ">=10.13.0" + } + }, + "node_modules/bach/node_modules/now-and-later": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-3.0.0.tgz", + "integrity": "sha512-pGO4pzSdaxhWTGkfSfHx3hVzJVslFPwBp2Myq9MYN/ChfJZF87ochMAXnvz6/58RJSf5ik2q9tXprBBrk2cpcg==", + "dev": true, + "dependencies": { + "once": "^1.4.0" + }, + "engines": { + "node": ">= 10.13.0" } }, "node_modules/balanced-match": { @@ -11153,6 +11075,13 @@ "dev": true, "license": "MIT" }, + "node_modules/bare-events": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.2.2.tgz", + "integrity": "sha512-h7z00dWdG0PYOQEvChhOSWvOfkIKsdZGkWr083FgN/HyoQuebSew/cgirYqh9SCuy/hRvxc5Vy6Fw8xAmYHLkQ==", + "dev": true, + "optional": true + }, "node_modules/base": { "version": "0.11.2", "dev": true, @@ -11242,15 +11171,6 @@ "node": ">=8" } }, - "node_modules/bindings": { - "version": "1.5.0", - "dev": true, - "license": "MIT", - "optional": true, - "dependencies": { - "file-uri-to-path": "1.0.0" - } - }, "node_modules/bl": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", @@ -12287,32 +12207,11 @@ "node": ">= 4.0" } }, - "node_modules/code-point-at": { - "version": "1.1.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/collect-v8-coverage": { "version": "1.0.2", "dev": true, "license": "MIT" }, - "node_modules/collection-map": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "arr-map": "^2.0.2", - "for-own": "^1.0.0", - "make-iterator": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/collection-visit": { "version": "1.0.0", "dev": true, @@ -12359,14 +12258,6 @@ "simple-swizzle": "^0.2.2" } }, - "node_modules/color-support": { - "version": "1.1.3", - "dev": true, - "license": "ISC", - "bin": { - "color-support": "bin.js" - } - }, "node_modules/color/node_modules/color-convert": { "version": "1.9.3", "dev": true, @@ -12621,18 +12512,23 @@ } }, "node_modules/copy-props": { - "version": "2.0.5", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/copy-props/-/copy-props-4.0.0.tgz", + "integrity": "sha512-bVWtw1wQLzzKiYROtvNlbJgxgBYt2bMJpkCbKmXM3xyijvcjjWXEk5nyrrT3bgJ7ODb19ZohE2T0Y3FgNPyoTw==", "dev": true, - "license": "MIT", "dependencies": { - "each-props": "^1.3.2", + "each-props": "^3.0.0", "is-plain-object": "^5.0.0" + }, + "engines": { + "node": ">= 10.13.0" } }, "node_modules/copy-props/node_modules/is-plain-object": { "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", "dev": true, - "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -13095,15 +12991,6 @@ "dev": true, "license": "MIT" }, - "node_modules/d": { - "version": "1.0.1", - "dev": true, - "license": "ISC", - "dependencies": { - "es5-ext": "^0.10.50", - "type": "^1.0.1" - } - }, "node_modules/d3-array": { "version": "3.2.4", "dev": true, @@ -13494,33 +13381,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/default-compare": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "kind-of": "^5.0.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/default-compare/node_modules/kind-of": { - "version": "5.1.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/default-resolution": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.10" - } - }, "node_modules/defaults": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz", @@ -13692,8 +13552,9 @@ }, "node_modules/detect-file": { "version": "1.0.0", + "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz", + "integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==", "dev": true, - "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -13933,12 +13794,25 @@ } }, "node_modules/each-props": { - "version": "1.3.2", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/each-props/-/each-props-3.0.0.tgz", + "integrity": "sha512-IYf1hpuWrdzse/s/YJOrFmU15lyhSzxelNVAHTEG3DtP4QsLTWZUzcUL3HMXmKQxXpa4EIrBPpwRgj0aehdvAw==", "dev": true, - "license": "MIT", "dependencies": { - "is-plain-object": "^2.0.1", + "is-plain-object": "^5.0.0", "object.defaults": "^1.1.0" + }, + "engines": { + "node": ">= 10.13.0" + } + }, + "node_modules/each-props/node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" } }, "node_modules/eastasianwidth": { @@ -14330,60 +14204,16 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/es5-ext": { - "version": "0.10.62", - "dev": true, - "hasInstallScript": true, - "license": "ISC", - "dependencies": { - "es6-iterator": "^2.0.3", - "es6-symbol": "^3.1.3", - "next-tick": "^1.1.0" - }, - "engines": { - "node": ">=0.10" - } - }, "node_modules/es6-denodeify": { "version": "0.1.5", "dev": true, "license": "Unlicense" }, - "node_modules/es6-iterator": { - "version": "2.0.3", - "dev": true, - "license": "MIT", - "dependencies": { - "d": "1", - "es5-ext": "^0.10.35", - "es6-symbol": "^3.1.1" - } - }, "node_modules/es6-promise": { "version": "3.3.1", "dev": true, "license": "MIT" }, - "node_modules/es6-symbol": { - "version": "3.1.3", - "dev": true, - "license": "ISC", - "dependencies": { - "d": "^1.0.1", - "ext": "^1.1.2" - } - }, - "node_modules/es6-weak-map": { - "version": "2.0.3", - "dev": true, - "license": "ISC", - "dependencies": { - "d": "1", - "es5-ext": "^0.10.46", - "es6-iterator": "^2.0.3", - "es6-symbol": "^3.1.1" - } - }, "node_modules/esbuild": { "version": "0.18.20", "dev": true, @@ -15671,19 +15501,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/ext": { - "version": "1.7.0", - "dev": true, - "license": "ISC", - "dependencies": { - "type": "^2.7.2" - } - }, - "node_modules/ext/node_modules/type": { - "version": "2.7.2", - "dev": true, - "license": "ISC" - }, "node_modules/extend": { "version": "3.0.2", "dev": true, @@ -15749,22 +15566,8 @@ "@types/yauzl": "^2.9.1" } }, - "node_modules/fancy-log": { - "version": "1.3.3", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-gray": "^0.1.1", - "color-support": "^1.1.3", - "parse-node-version": "^1.0.0", - "time-stamp": "^1.0.0" - }, - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/fast-deep-equal": { - "version": "3.1.3", + "node_modules/fast-deep-equal": { + "version": "3.1.3", "dev": true, "license": "MIT" }, @@ -15773,6 +15576,12 @@ "dev": true, "license": "Apache-2.0" }, + "node_modules/fast-fifo": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz", + "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==", + "dev": true + }, "node_modules/fast-glob": { "version": "3.3.1", "dev": true, @@ -15881,12 +15690,6 @@ "ramda": "0.29.0" } }, - "node_modules/file-uri-to-path": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "optional": true - }, "node_modules/filelist": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", @@ -16065,154 +15868,52 @@ } }, "node_modules/findup-sync": { - "version": "3.0.0", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-5.0.0.tgz", + "integrity": "sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==", "dev": true, - "license": "MIT", "dependencies": { "detect-file": "^1.0.0", - "is-glob": "^4.0.0", - "micromatch": "^3.0.4", + "is-glob": "^4.0.3", + "micromatch": "^4.0.4", "resolve-dir": "^1.0.1" }, "engines": { - "node": ">= 0.10" - } - }, - "node_modules/findup-sync/node_modules/braces": { - "version": "2.3.2", - "dev": true, - "license": "MIT", - "dependencies": { - "arr-flatten": "^1.1.0", - "array-unique": "^0.3.2", - "extend-shallow": "^2.0.1", - "fill-range": "^4.0.0", - "isobject": "^3.0.1", - "repeat-element": "^1.1.2", - "snapdragon": "^0.8.1", - "snapdragon-node": "^2.0.1", - "split-string": "^3.0.2", - "to-regex": "^3.0.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/findup-sync/node_modules/fill-range": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "extend-shallow": "^2.0.1", - "is-number": "^3.0.0", - "repeat-string": "^1.6.1", - "to-regex-range": "^2.1.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/findup-sync/node_modules/is-extendable": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "is-plain-object": "^2.0.4" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/findup-sync/node_modules/is-number": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "kind-of": "^3.0.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/findup-sync/node_modules/is-number/node_modules/kind-of": { - "version": "3.2.2", - "dev": true, - "license": "MIT", - "dependencies": { - "is-buffer": "^1.1.5" - }, - "engines": { - "node": ">=0.10.0" + "node": ">= 10.13.0" } }, - "node_modules/findup-sync/node_modules/micromatch": { - "version": "3.1.10", + "node_modules/fined": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/fined/-/fined-2.0.0.tgz", + "integrity": "sha512-OFRzsL6ZMHz5s0JrsEr+TpdGNCtrVtnuG3x1yzGNiQHT0yaDnXAj8V/lWcpJVrnoDpcwXcASxAZYbuXda2Y82A==", "dev": true, - "license": "MIT", "dependencies": { - "arr-diff": "^4.0.0", - "array-unique": "^0.3.2", - "braces": "^2.3.1", - "define-property": "^2.0.2", - "extend-shallow": "^3.0.2", - "extglob": "^2.0.4", - "fragment-cache": "^0.2.1", - "kind-of": "^6.0.2", - "nanomatch": "^1.2.9", + "expand-tilde": "^2.0.2", + "is-plain-object": "^5.0.0", + "object.defaults": "^1.1.0", "object.pick": "^1.3.0", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/findup-sync/node_modules/micromatch/node_modules/extend-shallow": { - "version": "3.0.2", - "dev": true, - "license": "MIT", - "dependencies": { - "assign-symbols": "^1.0.0", - "is-extendable": "^1.0.1" + "parse-filepath": "^1.0.2" }, "engines": { - "node": ">=0.10.0" + "node": ">= 10.13.0" } }, - "node_modules/findup-sync/node_modules/to-regex-range": { - "version": "2.1.1", + "node_modules/fined/node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", "dev": true, - "license": "MIT", - "dependencies": { - "is-number": "^3.0.0", - "repeat-string": "^1.6.1" - }, "engines": { "node": ">=0.10.0" } }, - "node_modules/fined": { - "version": "1.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "expand-tilde": "^2.0.2", - "is-plain-object": "^2.0.3", - "object.defaults": "^1.1.0", - "object.pick": "^1.2.0", - "parse-filepath": "^1.0.1" - }, - "engines": { - "node": ">= 0.10" - } - }, "node_modules/flagged-respawn": { - "version": "1.0.1", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-2.0.0.tgz", + "integrity": "sha512-Gq/a6YCi8zexmGHMuJwahTGzXlAZAOsbCVKduWXC6TlLCjjFRlExMJc4GC2NYPYZ0r/brw9P7CpRgQmlPVeOoA==", "dev": true, - "license": "MIT", "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, "node_modules/flat-cache": { @@ -16269,8 +15970,9 @@ }, "node_modules/for-own": { "version": "1.0.0", + "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz", + "integrity": "sha512-0OABksIGrxKK8K4kynWkQ7y1zounQxP+CWnyclVwj81KW3vlLlGUx57DKGcP/LH216GzqnstnPocF16Nxs0Ycg==", "dev": true, - "license": "MIT", "dependencies": { "for-in": "^1.0.1" }, @@ -16921,337 +16623,112 @@ "license": "BSD-2-Clause" }, "node_modules/glob-watcher": { - "version": "5.0.5", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-6.0.0.tgz", + "integrity": "sha512-wGM28Ehmcnk2NqRORXFOTOR064L4imSw3EeOqU5bIwUf62eXGwg89WivH6VMahL8zlQHeodzvHpXplrqzrz3Nw==", "dev": true, - "license": "MIT", "dependencies": { - "anymatch": "^2.0.0", - "async-done": "^1.2.0", - "chokidar": "^2.0.0", - "is-negated-glob": "^1.0.0", - "just-debounce": "^1.0.0", - "normalize-path": "^3.0.0", - "object.defaults": "^1.1.0" + "async-done": "^2.0.0", + "chokidar": "^3.5.3" }, "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, - "node_modules/glob-watcher/node_modules/anymatch": { - "version": "2.0.0", + "node_modules/glob/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", "dev": true, - "license": "ISC", "dependencies": { - "micromatch": "^3.1.4", - "normalize-path": "^2.1.1" + "balanced-match": "^1.0.0" } }, - "node_modules/glob-watcher/node_modules/anymatch/node_modules/normalize-path": { - "version": "2.1.1", + "node_modules/glob/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", "dev": true, - "license": "MIT", "dependencies": { - "remove-trailing-separator": "^1.0.1" + "brace-expansion": "^2.0.1" }, "engines": { - "node": ">=0.10.0" + "node": ">=10" } }, - "node_modules/glob-watcher/node_modules/binary-extensions": { - "version": "1.13.1", + "node_modules/glob2base": { + "version": "0.0.12", "dev": true, - "license": "MIT", + "dependencies": { + "find-index": "^0.1.1" + }, "engines": { - "node": ">=0.10.0" + "node": ">= 0.10" } }, - "node_modules/glob-watcher/node_modules/braces": { - "version": "2.3.2", + "node_modules/global-dirs": { + "version": "2.1.0", "dev": true, "license": "MIT", "dependencies": { - "arr-flatten": "^1.1.0", - "array-unique": "^0.3.2", - "extend-shallow": "^2.0.1", - "fill-range": "^4.0.0", - "isobject": "^3.0.1", - "repeat-element": "^1.1.2", - "snapdragon": "^0.8.1", - "snapdragon-node": "^2.0.1", - "split-string": "^3.0.2", - "to-regex": "^3.0.1" + "ini": "1.3.7" }, "engines": { - "node": ">=0.10.0" + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/glob-watcher/node_modules/chokidar": { - "version": "2.1.8", + "node_modules/global-dirs/node_modules/ini": { + "version": "1.3.7", "dev": true, - "license": "MIT", - "dependencies": { - "anymatch": "^2.0.0", - "async-each": "^1.0.1", - "braces": "^2.3.2", - "glob-parent": "^3.1.0", - "inherits": "^2.0.3", - "is-binary-path": "^1.0.0", - "is-glob": "^4.0.0", - "normalize-path": "^3.0.0", - "path-is-absolute": "^1.0.0", - "readdirp": "^2.2.1", - "upath": "^1.1.1" - }, - "optionalDependencies": { - "fsevents": "^1.2.7" - } + "license": "ISC" }, - "node_modules/glob-watcher/node_modules/fill-range": { - "version": "4.0.0", + "node_modules/global-modules": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz", + "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==", "dev": true, - "license": "MIT", "dependencies": { - "extend-shallow": "^2.0.1", - "is-number": "^3.0.0", - "repeat-string": "^1.6.1", - "to-regex-range": "^2.1.0" + "global-prefix": "^1.0.1", + "is-windows": "^1.0.1", + "resolve-dir": "^1.0.0" }, "engines": { "node": ">=0.10.0" } }, - "node_modules/glob-watcher/node_modules/fsevents": { - "version": "1.2.13", + "node_modules/global-prefix": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz", + "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==", "dev": true, - "hasInstallScript": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], "dependencies": { - "bindings": "^1.5.0", - "nan": "^2.12.1" + "expand-tilde": "^2.0.2", + "homedir-polyfill": "^1.0.1", + "ini": "^1.3.4", + "is-windows": "^1.0.1", + "which": "^1.2.14" }, "engines": { - "node": ">= 4.0" + "node": ">=0.10.0" } }, - "node_modules/glob-watcher/node_modules/glob-parent": { - "version": "3.1.0", + "node_modules/global-prefix/node_modules/which": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", "dev": true, - "license": "ISC", "dependencies": { - "is-glob": "^3.1.0", - "path-dirname": "^1.0.0" + "isexe": "^2.0.0" + }, + "bin": { + "which": "bin/which" } }, - "node_modules/glob-watcher/node_modules/glob-parent/node_modules/is-glob": { - "version": "3.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "is-extglob": "^2.1.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/glob-watcher/node_modules/is-binary-path": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "binary-extensions": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/glob-watcher/node_modules/is-extendable": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "is-plain-object": "^2.0.4" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/glob-watcher/node_modules/is-number": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "kind-of": "^3.0.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/glob-watcher/node_modules/is-number/node_modules/kind-of": { - "version": "3.2.2", - "dev": true, - "license": "MIT", - "dependencies": { - "is-buffer": "^1.1.5" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/glob-watcher/node_modules/micromatch": { - "version": "3.1.10", - "dev": true, - "license": "MIT", - "dependencies": { - "arr-diff": "^4.0.0", - "array-unique": "^0.3.2", - "braces": "^2.3.1", - "define-property": "^2.0.2", - "extend-shallow": "^3.0.2", - "extglob": "^2.0.4", - "fragment-cache": "^0.2.1", - "kind-of": "^6.0.2", - "nanomatch": "^1.2.9", - "object.pick": "^1.3.0", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/glob-watcher/node_modules/micromatch/node_modules/extend-shallow": { - "version": "3.0.2", - "dev": true, - "license": "MIT", - "dependencies": { - "assign-symbols": "^1.0.0", - "is-extendable": "^1.0.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/glob-watcher/node_modules/readdirp": { - "version": "2.2.1", - "dev": true, - "license": "MIT", - "dependencies": { - "graceful-fs": "^4.1.11", - "micromatch": "^3.1.10", - "readable-stream": "^2.0.2" - }, - "engines": { - "node": ">=0.10" - } - }, - "node_modules/glob-watcher/node_modules/to-regex-range": { - "version": "2.1.1", - "dev": true, - "license": "MIT", - "dependencies": { - "is-number": "^3.0.0", - "repeat-string": "^1.6.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/glob/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", - "dev": true, - "dependencies": { - "balanced-match": "^1.0.0" - } - }, - "node_modules/glob/node_modules/minimatch": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", - "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", - "dev": true, - "dependencies": { - "brace-expansion": "^2.0.1" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/glob2base": { - "version": "0.0.12", - "dev": true, - "dependencies": { - "find-index": "^0.1.1" - }, - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/global-dirs": { - "version": "2.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "ini": "1.3.7" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/global-dirs/node_modules/ini": { - "version": "1.3.7", - "dev": true, - "license": "ISC" - }, - "node_modules/global-modules": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "global-prefix": "^1.0.1", - "is-windows": "^1.0.1", - "resolve-dir": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/global-prefix": { - "version": "1.0.2", - "dev": true, - "license": "MIT", - "dependencies": { - "expand-tilde": "^2.0.2", - "homedir-polyfill": "^1.0.1", - "ini": "^1.3.4", - "is-windows": "^1.0.1", - "which": "^1.2.14" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/global-prefix/node_modules/which": { - "version": "1.3.1", - "dev": true, - "license": "ISC", - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "which": "bin/which" - } - }, - "node_modules/globals": { - "version": "11.12.0", + "node_modules/globals": { + "version": "11.12.0", "dev": true, "license": "MIT", "engines": { @@ -17305,14 +16782,15 @@ "license": "MIT" }, "node_modules/glogg": { - "version": "1.0.2", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/glogg/-/glogg-2.2.0.tgz", + "integrity": "sha512-eWv1ds/zAlz+M1ioHsyKJomfY7jbDDPpwSkv14KQj89bycx1nvK5/2Cj/T9g7kzJcX5Bc7Yv22FjfBZS/jl94A==", "dev": true, - "license": "MIT", "dependencies": { - "sparkles": "^1.0.0" + "sparkles": "^2.1.0" }, "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, "node_modules/gopd": { @@ -17361,301 +16839,335 @@ "license": "MIT" }, "node_modules/gulp": { - "version": "4.0.2", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/gulp/-/gulp-5.0.0.tgz", + "integrity": "sha512-S8Z8066SSileaYw1S2N1I64IUc/myI2bqe2ihOBzO6+nKpvNSg7ZcWJt/AwF8LC/NVN+/QZ560Cb/5OPsyhkhg==", "dev": true, - "license": "MIT", "dependencies": { - "glob-watcher": "^5.0.3", - "gulp-cli": "^2.2.0", - "undertaker": "^1.2.1", - "vinyl-fs": "^3.0.0" + "glob-watcher": "^6.0.0", + "gulp-cli": "^3.0.0", + "undertaker": "^2.0.0", + "vinyl-fs": "^4.0.0" }, "bin": { "gulp": "bin/gulp.js" }, "engines": { - "node": ">= 0.10" + "node": ">=10.13.0" } }, "node_modules/gulp-cli": { - "version": "2.3.0", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/gulp-cli/-/gulp-cli-3.0.0.tgz", + "integrity": "sha512-RtMIitkT8DEMZZygHK2vEuLPqLPAFB4sntSxg4NoDta7ciwGZ18l7JuhCTiS5deOJi2IoK0btE+hs6R4sfj7AA==", "dev": true, - "license": "MIT", "dependencies": { - "ansi-colors": "^1.0.1", - "archy": "^1.0.0", - "array-sort": "^1.0.0", - "color-support": "^1.1.3", - "concat-stream": "^1.6.0", - "copy-props": "^2.0.1", - "fancy-log": "^1.3.2", - "gulplog": "^1.0.0", - "interpret": "^1.4.0", - "isobject": "^3.0.1", - "liftoff": "^3.1.0", - "matchdep": "^2.0.0", - "mute-stdout": "^1.0.0", - "pretty-hrtime": "^1.0.0", - "replace-homedir": "^1.0.0", - "semver-greatest-satisfied-range": "^1.1.0", - "v8flags": "^3.2.0", - "yargs": "^7.1.0" + "@gulpjs/messages": "^1.1.0", + "chalk": "^4.1.2", + "copy-props": "^4.0.0", + "gulplog": "^2.2.0", + "interpret": "^3.1.1", + "liftoff": "^5.0.0", + "mute-stdout": "^2.0.0", + "replace-homedir": "^2.0.0", + "semver-greatest-satisfied-range": "^2.0.0", + "string-width": "^4.2.3", + "v8flags": "^4.0.0", + "yargs": "^16.2.0" }, "bin": { "gulp": "bin/gulp.js" }, "engines": { - "node": ">= 0.10" + "node": ">=10.13.0" } }, - "node_modules/gulp-cli/node_modules/ansi-regex": { - "version": "2.1.1", + "node_modules/gulp-cli/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, - "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, "engines": { - "node": ">=0.10.0" + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/gulp-cli/node_modules/camelcase": { - "version": "3.0.0", + "node_modules/gulp-cli/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, - "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, "engines": { - "node": ">=0.10.0" + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" } }, - "node_modules/gulp-cli/node_modules/cliui": { - "version": "3.2.0", - "dev": true, - "license": "ISC", - "dependencies": { - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wrap-ansi": "^2.0.0" - } + "node_modules/gulp-cli/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true }, - "node_modules/gulp-cli/node_modules/find-up": { - "version": "1.1.2", + "node_modules/gulp-cli/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true, - "license": "MIT", - "dependencies": { - "path-exists": "^2.0.0", - "pinkie-promise": "^2.0.0" - }, "engines": { - "node": ">=0.10.0" + "node": ">=8" } }, - "node_modules/gulp-cli/node_modules/get-caller-file": { - "version": "1.0.3", - "dev": true, - "license": "ISC" - }, - "node_modules/gulp-cli/node_modules/hosted-git-info": { - "version": "2.8.9", + "node_modules/gulp-cli/node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", "dev": true, - "license": "ISC" + "engines": { + "node": ">=8" + } }, - "node_modules/gulp-cli/node_modules/is-fullwidth-code-point": { - "version": "1.0.0", + "node_modules/gulp-cli/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", "dev": true, - "license": "MIT", "dependencies": { - "number-is-nan": "^1.0.0" + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" }, "engines": { - "node": ">=0.10.0" + "node": ">=8" } }, - "node_modules/gulp-cli/node_modules/normalize-package-data": { - "version": "2.5.0", + "node_modules/gulp-cli/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", "dev": true, - "license": "BSD-2-Clause", "dependencies": { - "hosted-git-info": "^2.1.4", - "resolve": "^1.10.0", - "semver": "2 || 3 || 4 || 5", - "validate-npm-package-license": "^3.0.1" + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" } }, - "node_modules/gulp-cli/node_modules/path-exists": { - "version": "2.1.0", + "node_modules/gulp-rename": { + "version": "2.0.0", "dev": true, "license": "MIT", - "dependencies": { - "pinkie-promise": "^2.0.0" - }, "engines": { - "node": ">=0.10.0" + "node": ">=4" } }, - "node_modules/gulp-cli/node_modules/path-type": { - "version": "1.1.0", + "node_modules/gulp-svgmin": { + "version": "4.1.0", "dev": true, "license": "MIT", "dependencies": { - "graceful-fs": "^4.1.2", - "pify": "^2.0.0", - "pinkie-promise": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" + "lodash.clonedeep": "^4.5.0", + "plugin-error": "^1.0.1", + "svgo": "^2.7.0" } }, - "node_modules/gulp-cli/node_modules/pify": { - "version": "2.3.0", + "node_modules/gulp/node_modules/fs-mkdirp-stream": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/fs-mkdirp-stream/-/fs-mkdirp-stream-2.0.1.tgz", + "integrity": "sha512-UTOY+59K6IA94tec8Wjqm0FSh5OVudGNB0NL/P6fB3HiE3bYOY3VYBGijsnOHNkQSwC1FKkU77pmq7xp9CskLw==", "dev": true, - "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.8", + "streamx": "^2.12.0" + }, "engines": { - "node": ">=0.10.0" + "node": ">=10.13.0" } }, - "node_modules/gulp-cli/node_modules/read-pkg": { - "version": "1.1.0", + "node_modules/gulp/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", "dev": true, - "license": "MIT", "dependencies": { - "load-json-file": "^1.0.0", - "normalize-package-data": "^2.3.2", - "path-type": "^1.0.0" + "is-glob": "^4.0.3" }, "engines": { - "node": ">=0.10.0" + "node": ">=10.13.0" } }, - "node_modules/gulp-cli/node_modules/read-pkg-up": { - "version": "1.0.1", + "node_modules/gulp/node_modules/glob-stream": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-8.0.2.tgz", + "integrity": "sha512-R8z6eTB55t3QeZMmU1C+Gv+t5UnNRkA55c5yo67fAVfxODxieTwsjNG7utxS/73NdP1NbDgCrhVEg2h00y4fFw==", "dev": true, - "license": "MIT", "dependencies": { - "find-up": "^1.0.0", - "read-pkg": "^1.0.0" + "@gulpjs/to-absolute-glob": "^4.0.0", + "anymatch": "^3.1.3", + "fastq": "^1.13.0", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "is-negated-glob": "^1.0.0", + "normalize-path": "^3.0.0", + "streamx": "^2.12.5" }, "engines": { - "node": ">=0.10.0" + "node": ">=10.13.0" } }, - "node_modules/gulp-cli/node_modules/resolve": { - "version": "1.22.6", + "node_modules/gulp/node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", "dev": true, - "license": "MIT", "dependencies": { - "is-core-module": "^2.13.0", - "path-parse": "^1.0.7", - "supports-preserve-symlinks-flag": "^1.0.0" - }, - "bin": { - "resolve": "bin/resolve" + "safer-buffer": ">= 2.1.2 < 3.0.0" }, - "funding": { - "url": "https://github.com/sponsors/ljharb" + "engines": { + "node": ">=0.10.0" } }, - "node_modules/gulp-cli/node_modules/semver": { - "version": "5.7.2", + "node_modules/gulp/node_modules/lead": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/lead/-/lead-4.0.0.tgz", + "integrity": "sha512-DpMa59o5uGUWWjruMp71e6knmwKU3jRBBn1kjuLWN9EeIOxNeSAwvHf03WIl8g/ZMR2oSQC9ej3yeLBwdDc/pg==", "dev": true, - "license": "ISC", - "bin": { - "semver": "bin/semver" + "engines": { + "node": ">=10.13.0" } }, - "node_modules/gulp-cli/node_modules/string-width": { - "version": "1.0.2", + "node_modules/gulp/node_modules/now-and-later": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-3.0.0.tgz", + "integrity": "sha512-pGO4pzSdaxhWTGkfSfHx3hVzJVslFPwBp2Myq9MYN/ChfJZF87ochMAXnvz6/58RJSf5ik2q9tXprBBrk2cpcg==", "dev": true, - "license": "MIT", "dependencies": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" + "once": "^1.4.0" }, "engines": { - "node": ">=0.10.0" + "node": ">= 10.13.0" } }, - "node_modules/gulp-cli/node_modules/strip-ansi": { - "version": "3.0.1", + "node_modules/gulp/node_modules/replace-ext": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz", + "integrity": "sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==", "dev": true, - "license": "MIT", - "dependencies": { - "ansi-regex": "^2.0.0" - }, "engines": { - "node": ">=0.10.0" + "node": ">= 10" } }, - "node_modules/gulp-cli/node_modules/wrap-ansi": { - "version": "2.1.0", + "node_modules/gulp/node_modules/resolve-options": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/resolve-options/-/resolve-options-2.0.0.tgz", + "integrity": "sha512-/FopbmmFOQCfsCx77BRFdKOniglTiHumLgwvd6IDPihy1GKkadZbgQJBcTb2lMzSR1pndzd96b1nZrreZ7+9/A==", "dev": true, - "license": "MIT", "dependencies": { - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1" + "value-or-function": "^4.0.0" }, "engines": { - "node": ">=0.10.0" + "node": ">= 10.13.0" } }, - "node_modules/gulp-cli/node_modules/y18n": { - "version": "3.2.2", + "node_modules/gulp/node_modules/to-through": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/to-through/-/to-through-3.0.0.tgz", + "integrity": "sha512-y8MN937s/HVhEoBU1SxfHC+wxCHkV1a9gW8eAdTadYh/bGyesZIVcbjI+mSpFbSVwQici/XjBjuUyri1dnXwBw==", "dev": true, - "license": "ISC" + "dependencies": { + "streamx": "^2.12.5" + }, + "engines": { + "node": ">=10.13.0" + } }, - "node_modules/gulp-cli/node_modules/yargs": { - "version": "7.1.2", + "node_modules/gulp/node_modules/value-or-function": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-4.0.0.tgz", + "integrity": "sha512-aeVK81SIuT6aMJfNo9Vte8Dw0/FZINGBV8BfCraGtqVxIeLAEhJyoWs8SmvRVmXfGss2PmmOwZCuBPbZR+IYWg==", "dev": true, - "license": "MIT", - "dependencies": { - "camelcase": "^3.0.0", - "cliui": "^3.2.0", - "decamelize": "^1.1.1", - "get-caller-file": "^1.0.1", - "os-locale": "^1.4.0", - "read-pkg-up": "^1.0.1", - "require-directory": "^2.1.1", - "require-main-filename": "^1.0.1", - "set-blocking": "^2.0.0", - "string-width": "^1.0.2", - "which-module": "^1.0.0", - "y18n": "^3.2.1", - "yargs-parser": "^5.0.1" + "engines": { + "node": ">= 10.13.0" } }, - "node_modules/gulp-cli/node_modules/yargs-parser": { - "version": "5.0.1", + "node_modules/gulp/node_modules/vinyl": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-3.0.0.tgz", + "integrity": "sha512-rC2VRfAVVCGEgjnxHUnpIVh3AGuk62rP3tqVrn+yab0YH7UULisC085+NYH+mnqf3Wx4SpSi1RQMwudL89N03g==", "dev": true, - "license": "ISC", "dependencies": { - "camelcase": "^3.0.0", - "object.assign": "^4.1.0" + "clone": "^2.1.2", + "clone-stats": "^1.0.0", + "remove-trailing-separator": "^1.1.0", + "replace-ext": "^2.0.0", + "teex": "^1.0.1" + }, + "engines": { + "node": ">=10.13.0" } }, - "node_modules/gulp-rename": { - "version": "2.0.0", + "node_modules/gulp/node_modules/vinyl-fs": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-4.0.0.tgz", + "integrity": "sha512-7GbgBnYfaquMk3Qu9g22x000vbYkOex32930rBnc3qByw6HfMEAoELjCjoJv4HuEQxHAurT+nvMHm6MnJllFLw==", "dev": true, - "license": "MIT", + "dependencies": { + "fs-mkdirp-stream": "^2.0.1", + "glob-stream": "^8.0.0", + "graceful-fs": "^4.2.11", + "iconv-lite": "^0.6.3", + "is-valid-glob": "^1.0.0", + "lead": "^4.0.0", + "normalize-path": "3.0.0", + "resolve-options": "^2.0.0", + "stream-composer": "^1.0.2", + "streamx": "^2.14.0", + "to-through": "^3.0.0", + "value-or-function": "^4.0.0", + "vinyl": "^3.0.0", + "vinyl-sourcemap": "^2.0.0" + }, "engines": { - "node": ">=4" + "node": ">=10.13.0" } }, - "node_modules/gulp-svgmin": { - "version": "4.1.0", + "node_modules/gulp/node_modules/vinyl-sourcemap": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-2.0.0.tgz", + "integrity": "sha512-BAEvWxbBUXvlNoFQVFVHpybBbjW1r03WhohJzJDSfgrrK5xVYIDTan6xN14DlyImShgDRv2gl9qhM6irVMsV0Q==", "dev": true, - "license": "MIT", "dependencies": { - "lodash.clonedeep": "^4.5.0", - "plugin-error": "^1.0.1", - "svgo": "^2.7.0" + "convert-source-map": "^2.0.0", + "graceful-fs": "^4.2.10", + "now-and-later": "^3.0.0", + "streamx": "^2.12.5", + "vinyl": "^3.0.0", + "vinyl-contents": "^2.0.0" + }, + "engines": { + "node": ">=10.13.0" } }, "node_modules/gulplog": { - "version": "1.0.0", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-2.2.0.tgz", + "integrity": "sha512-V2FaKiOhpR3DRXZuYdRLn/qiY0yI5XmqbTKrYbdemJ+xOh2d2MOweI/XFgMzd/9+1twdvMwllnZbWZNJ+BOm4A==", "dev": true, - "license": "MIT", "dependencies": { - "glogg": "^1.0.0" + "glogg": "^2.2.0" }, "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, "node_modules/gunzip-maybe": { @@ -18450,11 +17962,12 @@ } }, "node_modules/interpret": { - "version": "1.4.0", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz", + "integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==", "dev": true, - "license": "MIT", "engines": { - "node": ">= 0.10" + "node": ">=10.13.0" } }, "node_modules/invariant": { @@ -18466,14 +17979,6 @@ "loose-envify": "^1.0.0" } }, - "node_modules/invert-kv": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/ip": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz", @@ -21804,11 +21309,6 @@ "node": ">=4.0" } }, - "node_modules/just-debounce": { - "version": "1.1.0", - "dev": true, - "license": "MIT" - }, "node_modules/jwa": { "version": "1.4.1", "dev": true, @@ -21877,15 +21377,12 @@ } }, "node_modules/last-run": { - "version": "1.1.1", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/last-run/-/last-run-2.0.0.tgz", + "integrity": "sha512-j+y6WhTLN4Itnf9j5ZQos1BGPCS8DAwmgMroR3OzfxAsBxam0hMw7J8M3KqZl0pLQJ1jNnwIexg5DYpC/ctwEQ==", "dev": true, - "license": "MIT", - "dependencies": { - "default-resolution": "^2.0.0", - "es6-weak-map": "^2.0.1" - }, "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, "node_modules/latest-version": { @@ -21923,17 +21420,6 @@ "node": ">= 0.6.3" } }, - "node_modules/lcid": { - "version": "1.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "invert-kv": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/lead": { "version": "1.0.0", "dev": true, @@ -21971,27 +21457,37 @@ "license": "MIT" }, "node_modules/liftoff": { - "version": "3.1.0", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-5.0.0.tgz", + "integrity": "sha512-a5BQjbCHnB+cy+gsro8lXJ4kZluzOijzJ1UVVfyJYZC+IP2pLv1h4+aysQeKuTmyO8NAqfyQAk4HWaP/HjcKTg==", "dev": true, - "license": "MIT", "dependencies": { - "extend": "^3.0.0", - "findup-sync": "^3.0.0", - "fined": "^1.0.1", - "flagged-respawn": "^1.0.0", - "is-plain-object": "^2.0.4", - "object.map": "^1.0.0", - "rechoir": "^0.6.2", - "resolve": "^1.1.7" + "extend": "^3.0.2", + "findup-sync": "^5.0.0", + "fined": "^2.0.0", + "flagged-respawn": "^2.0.0", + "is-plain-object": "^5.0.0", + "rechoir": "^0.8.0", + "resolve": "^1.20.0" }, "engines": { - "node": ">= 0.8" + "node": ">=10.13.0" + } + }, + "node_modules/liftoff/node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" } }, "node_modules/liftoff/node_modules/resolve": { - "version": "1.22.6", + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", "dev": true, - "license": "MIT", "dependencies": { "is-core-module": "^2.13.0", "path-parse": "^1.0.7", @@ -22284,51 +21780,6 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, - "node_modules/load-json-file": { - "version": "1.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "graceful-fs": "^4.1.2", - "parse-json": "^2.2.0", - "pify": "^2.0.0", - "pinkie-promise": "^2.0.0", - "strip-bom": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/load-json-file/node_modules/parse-json": { - "version": "2.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "error-ex": "^1.2.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/load-json-file/node_modules/pify": { - "version": "2.3.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/load-json-file/node_modules/strip-bom": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "is-utf8": "^0.2.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/loader-runner": { "version": "4.3.0", "dev": true, @@ -22930,17 +22381,6 @@ "semver": "bin/semver" } }, - "node_modules/make-iterator": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "kind-of": "^6.0.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/makeerror": { "version": "1.0.12", "dev": true, @@ -22989,188 +22429,19 @@ "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.4.1.tgz", "integrity": "sha512-GbrbkTnHp9u6+HqbPRFJbObi369AgJNXi/sGqq5HRsoZW063xR1XDCaConqq+whfEIAlzB1YPnOgsPc7B7bc/A==", "dev": true, - "engines": { - "node": ">= 10" - }, - "peerDependencies": { - "react": ">= 0.14.0" - } - }, - "node_modules/marked": { - "version": "0.6.3", - "dev": true, - "license": "MIT", - "bin": { - "marked": "bin/marked" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/matchdep": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "findup-sync": "^2.0.0", - "micromatch": "^3.0.4", - "resolve": "^1.4.0", - "stack-trace": "0.0.10" - }, - "engines": { - "node": ">= 0.10.0" - } - }, - "node_modules/matchdep/node_modules/braces": { - "version": "2.3.2", - "dev": true, - "license": "MIT", - "dependencies": { - "arr-flatten": "^1.1.0", - "array-unique": "^0.3.2", - "extend-shallow": "^2.0.1", - "fill-range": "^4.0.0", - "isobject": "^3.0.1", - "repeat-element": "^1.1.2", - "snapdragon": "^0.8.1", - "snapdragon-node": "^2.0.1", - "split-string": "^3.0.2", - "to-regex": "^3.0.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/matchdep/node_modules/fill-range": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "extend-shallow": "^2.0.1", - "is-number": "^3.0.0", - "repeat-string": "^1.6.1", - "to-regex-range": "^2.1.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/matchdep/node_modules/findup-sync": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "detect-file": "^1.0.0", - "is-glob": "^3.1.0", - "micromatch": "^3.0.4", - "resolve-dir": "^1.0.1" - }, - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/matchdep/node_modules/is-extendable": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "is-plain-object": "^2.0.4" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/matchdep/node_modules/is-glob": { - "version": "3.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "is-extglob": "^2.1.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/matchdep/node_modules/is-number": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "kind-of": "^3.0.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/matchdep/node_modules/is-number/node_modules/kind-of": { - "version": "3.2.2", - "dev": true, - "license": "MIT", - "dependencies": { - "is-buffer": "^1.1.5" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/matchdep/node_modules/micromatch": { - "version": "3.1.10", - "dev": true, - "license": "MIT", - "dependencies": { - "arr-diff": "^4.0.0", - "array-unique": "^0.3.2", - "braces": "^2.3.1", - "define-property": "^2.0.2", - "extend-shallow": "^3.0.2", - "extglob": "^2.0.4", - "fragment-cache": "^0.2.1", - "kind-of": "^6.0.2", - "nanomatch": "^1.2.9", - "object.pick": "^1.3.0", - "regex-not": "^1.0.0", - "snapdragon": "^0.8.1", - "to-regex": "^3.0.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/matchdep/node_modules/micromatch/node_modules/extend-shallow": { - "version": "3.0.2", - "dev": true, - "license": "MIT", - "dependencies": { - "assign-symbols": "^1.0.0", - "is-extendable": "^1.0.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/matchdep/node_modules/resolve": { - "version": "1.22.6", - "dev": true, - "license": "MIT", - "dependencies": { - "is-core-module": "^2.13.0", - "path-parse": "^1.0.7", - "supports-preserve-symlinks-flag": "^1.0.0" - }, - "bin": { - "resolve": "bin/resolve" + "engines": { + "node": ">= 10" }, - "funding": { - "url": "https://github.com/sponsors/ljharb" + "peerDependencies": { + "react": ">= 0.14.0" } }, - "node_modules/matchdep/node_modules/to-regex-range": { - "version": "2.1.1", + "node_modules/marked": { + "version": "0.6.3", "dev": true, "license": "MIT", - "dependencies": { - "is-number": "^3.0.0", - "repeat-string": "^1.6.1" + "bin": { + "marked": "bin/marked" }, "engines": { "node": ">=0.10.0" @@ -23518,19 +22789,14 @@ } }, "node_modules/mute-stdout": { - "version": "1.0.1", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mute-stdout/-/mute-stdout-2.0.0.tgz", + "integrity": "sha512-32GSKM3Wyc8dg/p39lWPKYu8zci9mJFzV1Np9Of0ZEpe6Fhssn/FbI7ywAMd40uX+p3ZKh3T5EeCFv81qS3HmQ==", "dev": true, - "license": "MIT", "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, - "node_modules/nan": { - "version": "2.18.0", - "dev": true, - "license": "MIT", - "optional": true - }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -23624,11 +22890,6 @@ "dev": true, "license": "MIT" }, - "node_modules/next-tick": { - "version": "1.1.0", - "dev": true, - "license": "ISC" - }, "node_modules/nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -24383,8 +23644,9 @@ }, "node_modules/object.defaults": { "version": "1.1.0", + "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz", + "integrity": "sha512-c/K0mw/F11k4dEUBMW8naXUuBuhxRCfG7W+yFy8EcijU/rSmazOUd1XAEEe6bC0OuXY4HUKjTJv7xbxIMqdxrA==", "dev": true, - "license": "MIT", "dependencies": { "array-each": "^1.0.1", "array-slice": "^1.0.0", @@ -24465,18 +23727,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/object.map": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "for-own": "^1.0.0", - "make-iterator": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/object.pick": { "version": "1.3.0", "dev": true, @@ -24488,18 +23738,6 @@ "node": ">=0.10.0" } }, - "node_modules/object.reduce": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "for-own": "^1.0.0", - "make-iterator": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/object.values": { "version": "1.1.7", "dev": true, @@ -24711,17 +23949,6 @@ "readable-stream": "^2.0.1" } }, - "node_modules/os-locale": { - "version": "1.4.0", - "dev": true, - "license": "MIT", - "dependencies": { - "lcid": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/override-require": { "version": "1.1.1", "dev": true, @@ -24985,8 +24212,9 @@ }, "node_modules/parse-filepath": { "version": "1.0.2", + "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz", + "integrity": "sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==", "dev": true, - "license": "MIT", "dependencies": { "is-absolute": "^1.0.0", "map-cache": "^0.2.0", @@ -25053,14 +24281,6 @@ "node": ">=6" } }, - "node_modules/parse-node-version": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.10" - } - }, "node_modules/parse-passwd": { "version": "1.0.0", "dev": true, @@ -25147,8 +24367,9 @@ }, "node_modules/path-root": { "version": "0.1.1", + "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz", + "integrity": "sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==", "dev": true, - "license": "MIT", "dependencies": { "path-root-regex": "^0.1.0" }, @@ -25158,8 +24379,9 @@ }, "node_modules/path-root-regex": { "version": "0.1.2", + "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz", + "integrity": "sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==", "dev": true, - "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -25273,25 +24495,6 @@ "node": ">=6" } }, - "node_modules/pinkie": { - "version": "2.0.4", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/pinkie-promise": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "pinkie": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/pinpoint": { "version": "1.1.0", "dev": true, @@ -26188,6 +25391,12 @@ ], "license": "MIT" }, + "node_modules/queue-tick": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz", + "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==", + "dev": true + }, "node_modules/quick-lru": { "version": "5.1.1", "dev": true, @@ -26889,19 +26098,22 @@ } }, "node_modules/rechoir": { - "version": "0.6.2", + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz", + "integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==", "dev": true, "dependencies": { - "resolve": "^1.1.6" + "resolve": "^1.20.0" }, "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, "node_modules/rechoir/node_modules/resolve": { - "version": "1.22.6", + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", "dev": true, - "license": "MIT", "dependencies": { "is-core-module": "^2.13.0", "path-parse": "^1.0.7", @@ -27210,16 +26422,12 @@ } }, "node_modules/replace-homedir": { - "version": "1.0.0", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/replace-homedir/-/replace-homedir-2.0.0.tgz", + "integrity": "sha512-bgEuQQ/BHW0XkkJtawzrfzHFSN70f/3cNOiHa2QsYxqrjaC30X1k74FJ6xswVBP0sr0SpGIdVFuPwfrYziVeyw==", "dev": true, - "license": "MIT", - "dependencies": { - "homedir-polyfill": "^1.0.1", - "is-absolute": "^1.0.0", - "remove-trailing-separator": "^1.1.0" - }, "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, "node_modules/require-directory": { @@ -27238,11 +26446,6 @@ "node": ">=0.10.0" } }, - "node_modules/require-main-filename": { - "version": "1.0.1", - "dev": true, - "license": "ISC" - }, "node_modules/requires-port": { "version": "1.0.0", "dev": true, @@ -27288,8 +26491,9 @@ }, "node_modules/resolve-dir": { "version": "1.0.1", + "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz", + "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==", "dev": true, - "license": "MIT", "dependencies": { "expand-tilde": "^2.0.0", "global-modules": "^1.0.0" @@ -28262,14 +27466,15 @@ } }, "node_modules/semver-greatest-satisfied-range": { - "version": "1.1.0", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/semver-greatest-satisfied-range/-/semver-greatest-satisfied-range-2.0.0.tgz", + "integrity": "sha512-lH3f6kMbwyANB7HuOWRMlLCa2itaCrZJ+SAqqkSZrZKO/cAsk2EOyaKHUtNkVLFyFW9pct22SFesFp3Z7zpA0g==", "dev": true, - "license": "MIT", "dependencies": { - "sver-compat": "^1.5.0" + "sver": "^1.8.3" }, "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, "node_modules/semver-regex": { @@ -28748,11 +27953,12 @@ } }, "node_modules/sparkles": { - "version": "1.0.1", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-2.1.0.tgz", + "integrity": "sha512-r7iW1bDw8R/cFifrD3JnQJX0K1jqT0kprL48BiBpLZLJPmAm34zsVBsK5lc7HirZYZqMW65dOXZgbAGt/I6frg==", "dev": true, - "license": "MIT", "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, "node_modules/spdx-correct": { @@ -28835,14 +28041,6 @@ "dev": true, "license": "MIT" }, - "node_modules/stack-trace": { - "version": "0.0.10", - "dev": true, - "license": "MIT", - "engines": { - "node": "*" - } - }, "node_modules/stack-utils": { "version": "2.0.6", "dev": true, @@ -28998,16 +28196,39 @@ "url": "https://opencollective.com/storybook" } }, - "node_modules/stream-exhaust": { + "node_modules/stream-composer": { "version": "1.0.2", + "resolved": "https://registry.npmjs.org/stream-composer/-/stream-composer-1.0.2.tgz", + "integrity": "sha512-bnBselmwfX5K10AH6L4c8+S5lgZMWI7ZYrz2rvYjCPB2DIMC4Ig8OpxGpNJSxRZ58oti7y1IcNvjBAz9vW5m4w==", "dev": true, - "license": "MIT" + "dependencies": { + "streamx": "^2.13.2" + } + }, + "node_modules/stream-exhaust": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/stream-exhaust/-/stream-exhaust-1.0.2.tgz", + "integrity": "sha512-b/qaq/GlBK5xaq1yrK9/zFcyRSTNxmcZwFLGSTG0mXgZl/4Z6GgiyYOXOvY7N3eEvFRAG1bkDRz5EPGSvPYQlw==", + "dev": true }, "node_modules/stream-shift": { "version": "1.0.1", "dev": true, "license": "MIT" }, + "node_modules/streamx": { + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.16.1.tgz", + "integrity": "sha512-m9QYj6WygWyWa3H1YY69amr4nVgy61xfjys7xO7kviL5rfIEc2naf+ewFiOA+aEJD7y0JO3h2GoiUv4TDwEGzQ==", + "dev": true, + "dependencies": { + "fast-fifo": "^1.1.0", + "queue-tick": "^1.0.1" + }, + "optionalDependencies": { + "bare-events": "^2.2.0" + } + }, "node_modules/strict-uri-encode": { "version": "2.0.0", "dev": true, @@ -29805,13 +29026,13 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/sver-compat": { - "version": "1.5.0", + "node_modules/sver": { + "version": "1.8.4", + "resolved": "https://registry.npmjs.org/sver/-/sver-1.8.4.tgz", + "integrity": "sha512-71o1zfzyawLfIWBOmw8brleKyvnbn73oVHNCsu51uPMz/HWiKkkXsI31JjHW5zqXEqnPYkIiHd8ZmL7FCimLEA==", "dev": true, - "license": "MIT", - "dependencies": { - "es6-iterator": "^2.0.1", - "es6-symbol": "^3.1.1" + "optionalDependencies": { + "semver": "^6.3.0" } }, "node_modules/svg-tags": { @@ -30057,6 +29278,15 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/teex": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/teex/-/teex-1.0.1.tgz", + "integrity": "sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==", + "dev": true, + "dependencies": { + "streamx": "^2.12.5" + } + }, "node_modules/telejson": { "version": "7.2.0", "dev": true, @@ -30352,14 +29582,6 @@ "dev": true, "license": "MIT" }, - "node_modules/time-stamp": { - "version": "1.1.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/tiny-invariant": { "version": "1.3.1", "dev": true, @@ -31247,11 +30469,6 @@ "dev": true, "license": "0BSD" }, - "node_modules/type": { - "version": "1.2.0", - "dev": true, - "license": "ISC" - }, "node_modules/type-check": { "version": "0.4.0", "dev": true, @@ -31435,37 +30652,37 @@ } }, "node_modules/undertaker": { - "version": "1.3.0", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-2.0.0.tgz", + "integrity": "sha512-tO/bf30wBbTsJ7go80j0RzA2rcwX6o7XPBpeFcb+jzoeb4pfMM2zUeSDIkY1AWqeZabWxaQZ/h8N9t35QKDLPQ==", "dev": true, - "license": "MIT", "dependencies": { - "arr-flatten": "^1.0.1", - "arr-map": "^2.0.0", - "bach": "^1.0.0", - "collection-map": "^1.0.0", - "es6-weak-map": "^2.0.1", - "fast-levenshtein": "^1.0.0", - "last-run": "^1.1.0", - "object.defaults": "^1.0.0", - "object.reduce": "^1.0.0", - "undertaker-registry": "^1.0.0" + "bach": "^2.0.1", + "fast-levenshtein": "^3.0.0", + "last-run": "^2.0.0", + "undertaker-registry": "^2.0.0" }, "engines": { - "node": ">= 0.10" + "node": ">=10.13.0" } }, "node_modules/undertaker-registry": { - "version": "1.0.1", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/undertaker-registry/-/undertaker-registry-2.0.0.tgz", + "integrity": "sha512-+hhVICbnp+rlzZMgxXenpvTxpuvA67Bfgtt+O9WOE5jo7w/dyiF1VmoZVIHvP2EkUjsyKyTwYKlLhA+j47m1Ew==", "dev": true, - "license": "MIT", "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, "node_modules/undertaker/node_modules/fast-levenshtein": { - "version": "1.1.4", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-3.0.0.tgz", + "integrity": "sha512-hKKNajm46uNmTlhHSyZkmToAc56uZJwYq7yrciZjqOxnlfQwERDQJmHPUp7m1m9wx8vgOe8IaCKZ5Kv2k1DdCQ==", "dev": true, - "license": "MIT" + "dependencies": { + "fastest-levenshtein": "^1.0.7" + } }, "node_modules/undici-types": { "version": "5.26.5", @@ -31691,15 +30908,6 @@ "node": ">=8" } }, - "node_modules/upath": { - "version": "1.2.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=4", - "yarn": "*" - } - }, "node_modules/updatable-log": { "version": "0.2.0", "dev": true, @@ -32141,14 +31349,12 @@ "license": "MIT" }, "node_modules/v8flags": { - "version": "3.2.0", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-4.0.1.tgz", + "integrity": "sha512-fcRLaS4H/hrZk9hYwbdRM35D0U8IYMfEClhXxCivOojl+yTRAZH3Zy2sSy6qVCiGbV9YAtPssP6jaChqC9vPCg==", "dev": true, - "license": "MIT", - "dependencies": { - "homedir-polyfill": "^1.0.1" - }, "engines": { - "node": ">= 0.10" + "node": ">= 10.13.0" } }, "node_modules/validate-npm-package-license": { @@ -32198,6 +31404,93 @@ "node": ">= 0.10" } }, + "node_modules/vinyl-contents": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/vinyl-contents/-/vinyl-contents-2.0.0.tgz", + "integrity": "sha512-cHq6NnGyi2pZ7xwdHSW1v4Jfnho4TEGtxZHw01cmnc8+i7jgR6bRnED/LbrKan/Q7CvVLbnvA5OepnhbpjBZ5Q==", + "dev": true, + "dependencies": { + "bl": "^5.0.0", + "vinyl": "^3.0.0" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/vinyl-contents/node_modules/bl": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/bl/-/bl-5.1.0.tgz", + "integrity": "sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==", + "dev": true, + "dependencies": { + "buffer": "^6.0.3", + "inherits": "^2.0.4", + "readable-stream": "^3.4.0" + } + }, + "node_modules/vinyl-contents/node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, + "node_modules/vinyl-contents/node_modules/readable-stream": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", + "dev": true, + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/vinyl-contents/node_modules/replace-ext": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz", + "integrity": "sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==", + "dev": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/vinyl-contents/node_modules/vinyl": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-3.0.0.tgz", + "integrity": "sha512-rC2VRfAVVCGEgjnxHUnpIVh3AGuk62rP3tqVrn+yab0YH7UULisC085+NYH+mnqf3Wx4SpSi1RQMwudL89N03g==", + "dev": true, + "dependencies": { + "clone": "^2.1.2", + "clone-stats": "^1.0.0", + "remove-trailing-separator": "^1.1.0", + "replace-ext": "^2.0.0", + "teex": "^1.0.1" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/vinyl-fs": { "version": "3.0.3", "dev": true, @@ -32652,11 +31945,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/which-module": { - "version": "1.0.0", - "dev": true, - "license": "ISC" - }, "node_modules/which-typed-array": { "version": "1.1.15", "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz", diff --git a/package.json b/package.json index 5573ec20b8..21aee3bf84 100644 --- a/package.json +++ b/package.json @@ -155,7 +155,7 @@ "date-fns": "^3.3.1", "eslint_d": "^13.0.0", "glob": "^8.1.0", - "gulp": "^4.0.2", + "gulp": "^5.0.0", "gulp-rename": "^2.0.0", "gulp-svgmin": "^4.1.0", "husky": "^9.0.11", From 9c66a3c91a021a657fd2652d56a24cf4fb441020 Mon Sep 17 00:00:00 2001 From: Matthew Robertson Date: Mon, 29 Apr 2024 12:43:54 +0100 Subject: [PATCH 088/174] Remove useless styling (#3388) Co-authored-by: metalix2 --- .../src/BpkDatepicker.module.scss | 28 ------------------- .../src/BpkDatepicker.tsx | 11 +------- .../__snapshots__/BpkDatepicker-test.tsx.snap | 16 +++-------- 3 files changed, 5 insertions(+), 50 deletions(-) delete mode 100644 packages/bpk-component-datepicker/src/BpkDatepicker.module.scss diff --git a/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss b/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss deleted file mode 100644 index ae06daee06..0000000000 --- a/packages/bpk-component-datepicker/src/BpkDatepicker.module.scss +++ /dev/null @@ -1,28 +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-datepicker { - &__calendar { - margin: 0 auto; - } - - &__input { - display: inline-block; - width: 100%; - } -} diff --git a/packages/bpk-component-datepicker/src/BpkDatepicker.tsx b/packages/bpk-component-datepicker/src/BpkDatepicker.tsx index 4c5c4d3126..e2f8018ac7 100644 --- a/packages/bpk-component-datepicker/src/BpkDatepicker.tsx +++ b/packages/bpk-component-datepicker/src/BpkDatepicker.tsx @@ -34,7 +34,6 @@ import BpkInput, { withOpenEvents } from '../../bpk-component-input'; import BpkModal from '../../bpk-component-modal'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkPopover from '../../bpk-component-popover'; -import { cssModules } from '../../bpk-react-utils'; import type { DaysOfWeek, @@ -42,10 +41,6 @@ import type { SelectionConfiguration, } from '../../bpk-component-calendar'; -import STYLES from './BpkDatepicker.module.scss'; - -const getClassName = cssModules(STYLES); - const Input = withOpenEvents(BpkInput); const DefaultCalendar = withCalendarState( @@ -318,10 +313,7 @@ class BpkDatepicker extends Component { delete rest.isOpen; const input = inputComponent || ( -
    +
    { const calendarProps = { id: `${id}-calendar`, - className: getClassName('bpk-datepicker__calendar'), changeMonthLabel, dateModifiers, daysOfWeek, diff --git a/packages/bpk-component-datepicker/src/__snapshots__/BpkDatepicker-test.tsx.snap b/packages/bpk-component-datepicker/src/__snapshots__/BpkDatepicker-test.tsx.snap index 00b1dcd577..8b56408382 100644 --- a/packages/bpk-component-datepicker/src/__snapshots__/BpkDatepicker-test.tsx.snap +++ b/packages/bpk-component-datepicker/src/__snapshots__/BpkDatepicker-test.tsx.snap @@ -2,9 +2,7 @@ exports[`BpkDatepicker "readOnly" can be overriden in "inputProps" 1`] = ` -
    +
    -
    +
    -
    +
    -
    +
    Date: Tue, 30 Apr 2024 09:16:58 +0100 Subject: [PATCH 089/174] LOOM-1315 BpkSpinner animation fix (#3394) * LOOM-1315 Fix changed spans to div to preserve animation * switched back to spans and added display: block --- packages/bpk-component-spinner/src/BpkSpinner.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/bpk-component-spinner/src/BpkSpinner.module.scss b/packages/bpk-component-spinner/src/BpkSpinner.module.scss index 0caddea656..4d8eb482a0 100644 --- a/packages/bpk-component-spinner/src/BpkSpinner.module.scss +++ b/packages/bpk-component-spinner/src/BpkSpinner.module.scss @@ -21,6 +21,8 @@ @use '../../unstable__bpk-mixins/utils'; .bpk-spinner { + display: block; + @include spinners.bpk-spinner; &--primary { From 94304fd823b69d0dc1fa068120e3c0457191f4c7 Mon Sep 17 00:00:00 2001 From: mungodewar <89925955+mungodewar@users.noreply.github.com> Date: Tue, 30 Apr 2024 10:14:53 +0100 Subject: [PATCH 090/174] =?UTF-8?q?Revert=20"[LOOM-1278][BpkBarChart]=20Cl?= =?UTF-8?q?ass=202=20Fix=20Remove=20unused=20classname=20prop=20(#3?= =?UTF-8?q?=E2=80=A6"=20(#3398)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 80098ca8a31dbf280002442837e8e6ae3624458d. --- .../src/BpkBarchart-test.js | 16 + .../bpk-component-barchart/src/BpkBarchart.js | 11 +- .../__snapshots__/BpkBarchart-test.js.snap | 387 ++++++++++++++++++ 3 files changed, 413 insertions(+), 1 deletion(-) diff --git a/packages/bpk-component-barchart/src/BpkBarchart-test.js b/packages/bpk-component-barchart/src/BpkBarchart-test.js index 4a6f36a941..fd2f6034e5 100644 --- a/packages/bpk-component-barchart/src/BpkBarchart-test.js +++ b/packages/bpk-component-barchart/src/BpkBarchart-test.js @@ -44,6 +44,22 @@ describe('BpkBarchart', () => { expect(asFragment()).toMatchSnapshot(); }); + it('should render correctly with "className" prop', () => { + const { asFragment } = render( + , + ); + expect(asFragment()).toMatchSnapshot(); + }); + it('should render correctly with "leadingScrollIndicatorClassName" prop', () => { const { asFragment } = render( { svgEl: ?Element; static defaultProps = { + className: null, leadingScrollIndicatorClassName: null, trailingScrollIndicatorClassName: null, outlierPercentage: null, @@ -168,6 +170,7 @@ class BpkBarchart extends Component { render() { const { BarComponent, + className, data, disableDataTable, getBarLabel, @@ -204,6 +207,11 @@ class BpkBarchart extends Component { bottom: xAxisMargin, }); + const classNames = [getClassName('bpk-barchart')]; + if (className) { + classNames.push(className); + } + const width = this.state.width - margin.left - margin.right; const height = this.state.height - margin.bottom - margin.top; const maxYValue = getMaxYValue( @@ -233,7 +241,7 @@ class BpkBarchart extends Component { {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */} { @@ -322,6 +330,7 @@ BpkBarchart.propTypes = { initialWidth: PropTypes.number.isRequired, initialHeight: PropTypes.number.isRequired, + className: PropTypes.string, leadingScrollIndicatorClassName: PropTypes.string, trailingScrollIndicatorClassName: PropTypes.string, /** diff --git a/packages/bpk-component-barchart/src/__snapshots__/BpkBarchart-test.js.snap b/packages/bpk-component-barchart/src/__snapshots__/BpkBarchart-test.js.snap index a8a59fba90..a3dc705efc 100644 --- a/packages/bpk-component-barchart/src/__snapshots__/BpkBarchart-test.js.snap +++ b/packages/bpk-component-barchart/src/__snapshots__/BpkBarchart-test.js.snap @@ -387,6 +387,393 @@ exports[`BpkBarchart should render correctly 1`] = ` `; +exports[`BpkBarchart should render correctly with "className" prop 1`] = ` + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Month + + Average price (£) +
    + Jan + + 305 +
    + Feb + + 348 +
    + Mar + + 418 +
    + Apr + + 448 +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + +`; + exports[`BpkBarchart should render correctly with "leadingScrollIndicatorClassName" prop 1`] = `
    Date: Tue, 30 Apr 2024 14:43:58 +0100 Subject: [PATCH 091/174] [LOOM-1377][multiple-components]: remove unrequired ts ignores and address any typing issues (#3392) * remove unrequired ts ignores and address any typing issues * update test and snap * update lock file * update to all.tsx * update snaps * update inside packages too * update snaps --- .../bpk-component-icon/gulpfile.babel.js | 2 +- package-lock.json | 39 ++- package.json | 4 +- .../BpkAccordionItem-test.js.snap | 50 ++-- .../withAccordionItemState-test.js.snap | 15 +- .../BpkAutosuggestSuggestion-test.js.snap | 14 +- .../bpk-component-badge/src/BpkBadge-test.tsx | 1 - .../src/__snapshots__/BpkBadge-test.tsx.snap | 7 +- .../src/AnimateAndFade.tsx | 1 - .../src/BpkBannerAlertInner-test.tsx | 1 - .../src/BpkBannerAlertInner.tsx | 4 - .../BpkBannerAlert-test.tsx.snap | 5 +- .../BpkBannerAlertDismissable-test.tsx.snap | 10 +- .../BpkBannerAlertInner-test.tsx.snap | 85 +++--- .../withBannerAlertState-test.tsx.snap | 30 +- .../BpkBottomSheet-test.tsx.snap | 15 +- .../BpkBreadcrumbItem-test.js.snap | 20 +- .../src/BpkBreakpoint.tsx | 2 +- .../src/BpkCalendarGrid-test.tsx | 4 +- .../src/BpkCalendarNav.tsx | 2 - .../BpkCalendarContainer-test.tsx.snap | 30 +- .../BpkCalendarNav-test.tsx.snap | 30 +- packages/bpk-component-calendar/src/utils.ts | 2 +- .../src/BpkSaveButton.tsx | 4 - .../__snapshots__/BpkSaveButton-test.tsx.snap | 40 +-- .../src/BpkCardWrapper-test.tsx | 1 - .../src/BpkDismissibleChip.tsx | 2 - .../src/BpkDropdownChip.tsx | 1 - .../src/BpkIconChip-test.tsx | 1 - .../BpkDismissibleChip-test.tsx.snap | 65 +++-- .../BpkDropdownChip-test.tsx.snap | 85 +++--- .../__snapshots__/BpkIconChip-test.tsx.snap | 70 +++-- .../__snapshots__/BpkCloseButton-test.js.snap | 15 +- .../src/BpkDataTableHeader.tsx | 2 - .../__snapshots__/BpkDataTable-test.tsx.snap | 240 +++++++++------- .../BpkDataTableHeader-test.tsx.snap | 30 +- .../src/BpkDialog-test.tsx | 3 - .../src/__snapshots__/BpkDialog-test.tsx.snap | 30 +- .../src/__snapshots__/BpkDrawer-test.js.snap | 5 +- .../BpkDrawerContent-test.js.snap | 25 +- .../__snapshots__/BpkFieldset-test.js.snap | 50 ++-- .../src/BpkFloatingNotification-test.tsx | 1 - .../BpkFloatingNotification-test.tsx.snap | 5 +- .../src/accessibility-test.tsx | 1 - .../BpkFormValidation-test.js.snap | 10 +- packages/bpk-component-icon/all.tsx | 6 +- packages/bpk-component-icon/index.tsx | 1 - .../src/withAlignment-test.tsx | 1 - .../src/BpkBackgroundImage.tsx | 1 - .../bpk-component-image/src/BpkImage-test.tsx | 8 +- packages/bpk-component-image/src/BpkImage.tsx | 1 - .../BpkBackgroundImage-test.tsx.snap | 49 ++-- .../src/__snapshots__/BpkImage-test.tsx.snap | 54 ++-- .../src/AnimateAndFade.tsx | 1 - .../src/BpkInfoBannerInner-test.tsx | 1 - .../src/BpkInfoBannerInner.tsx | 5 - .../__snapshots__/BpkInfoBanner-test.tsx.snap | 10 +- .../BpkInfoBannerDismissable-test.tsx.snap | 10 +- .../BpkInfoBannerInner-test.tsx.snap | 85 +++--- .../withBannerAlertState-test.tsx.snap | 30 +- .../src/BpkClearButton.tsx | 1 - .../BpkClearButton-test.tsx.snap | 10 +- .../BpkLoadingButton-test.js.snap | 260 ++++++++++-------- .../__snapshots__/BpKModal-test.tsx.snap | 10 +- .../src/__snapshots__/BpkModal-test.tsx.snap | 5 +- .../__snapshots__/BpkModalInner-test.tsx.snap | 45 +-- .../src/BpkConfigurableNudger.tsx | 2 - .../src/__snapshots__/BpkNudger-test.tsx.snap | 70 +++-- .../BpkPageIndicator-test.js.snap | 10 +- .../BpkPaginationNudger-test.js.snap | 10 +- .../src/__snapshots__/BpkPopover-test.js.snap | 5 +- .../src/BpkScrollableCalendarGrid-test.tsx | 3 +- .../BpkScrollableCalendarGridList-test.tsx | 3 +- .../BpkSectionListItem-test.js.snap | 10 +- .../BpkExtraLargeSpinner-test.js.snap | 180 ++++++------ .../BpkLargeSpinner-test.js.snap | 255 ++++++++--------- .../src/__snapshots__/BpkSpinner-test.js.snap | 245 +++++++++-------- .../BpkInteractiveStar-test.js.snap | 15 +- .../BpkInteractiveStarRating-test.js.snap | 215 +++++++++------ .../src/__snapshots__/BpkStar-test.js.snap | 35 ++- .../__snapshots__/BpkStarRating-test.js.snap | 215 +++++++++------ ...ithInteractiveStarRatingState-test.js.snap | 100 ++++--- .../src/BpkSwapButton.tsx | 1 - .../__snapshots__/BpkSwapButton-test.tsx.snap | 5 +- .../src/BpkTooltipPortal-test.tsx | 1 - packages/package-lock.json | 38 ++- packages/package.json | 4 +- 87 files changed, 1744 insertions(+), 1331 deletions(-) diff --git a/gulpfile.js/bpk-component-icon/gulpfile.babel.js b/gulpfile.js/bpk-component-icon/gulpfile.babel.js index 6960ac812d..c57b29479f 100644 --- a/gulpfile.js/bpk-component-icon/gulpfile.babel.js +++ b/gulpfile.js/bpk-component-icon/gulpfile.babel.js @@ -22,7 +22,7 @@ const ICONS_FOLDER_PATH = './node_modules/@skyscanner/bpk-svgs/dist/js/icons'; gulp.task('copy', () => gulp - .src(`${ICONS_FOLDER_PATH}/**/*.js`) + .src(`${ICONS_FOLDER_PATH}/**/*`) .pipe(gulp.dest('./packages/bpk-component-icon')), ); diff --git a/package-lock.json b/package-lock.json index 5b9b62809d..5805fca262 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,8 +22,8 @@ "@babel/register": "^7.23.7", "@percy/cli": "^1.28.2", "@percy/storybook": "^5.0.1", - "@skyscanner/bpk-foundations-web": "^17.9.0", - "@skyscanner/bpk-svgs": "^19.2.0", + "@skyscanner/bpk-foundations-web": "^17.11.0", + "@skyscanner/bpk-svgs": "^19.3.0", "@skyscanner/eslint-config-skyscanner": "^18.0.0", "@skyscanner/stylelint-config-skyscanner": "^11.1.0", "@storybook/addon-a11y": "^7.6.17", @@ -4590,9 +4590,9 @@ } }, "node_modules/@skyscanner/bpk-foundations-common": { - "version": "6.10.0", - "resolved": "https://registry.npmjs.org/@skyscanner/bpk-foundations-common/-/bpk-foundations-common-6.10.0.tgz", - "integrity": "sha512-gBZWncO/UGUwtZsKLlR4cCpcU94lAt7EYIJhOKZauXY0hc5/N3kGhZejQdPY/Ymk/fxa+lFpxsaAOprdbvS9AA==", + "version": "6.11.0", + "resolved": "https://registry.npmjs.org/@skyscanner/bpk-foundations-common/-/bpk-foundations-common-6.11.0.tgz", + "integrity": "sha512-mhLB1PzuivgCXj+3G7Z4VsBNR8eZpuVAlxCWVsKA/qfFHuRuPEf2Q8GGz3hEwDi81+sTtZNOWJVJgJ6rEAZO3A==", "dev": true, "dependencies": { "color": "^4.2.3" @@ -4612,12 +4612,12 @@ } }, "node_modules/@skyscanner/bpk-foundations-web": { - "version": "17.9.0", - "resolved": "https://registry.npmjs.org/@skyscanner/bpk-foundations-web/-/bpk-foundations-web-17.9.0.tgz", - "integrity": "sha512-tDoc4aU+CMIE/SqedcpO2di2vlZL49GQdqkuJOIx7y5xfwl9U3mDGieFhR8i17kHSz0OKpzSYfD7Ojne/UK5/g==", + "version": "17.11.0", + "resolved": "https://registry.npmjs.org/@skyscanner/bpk-foundations-web/-/bpk-foundations-web-17.11.0.tgz", + "integrity": "sha512-NE+CHZxDBN0ng1rfJprSnh0PuiK45Sb0b5EqWjAQyK79SdiQPRtyX+7W9WaW8EwO/Xy1FVToiUsny3tDOaRDug==", "dev": true, "dependencies": { - "@skyscanner/bpk-foundations-common": "^6.10.0", + "@skyscanner/bpk-foundations-common": "^6.11.0", "color": "^4.2.3" } }, @@ -4635,15 +4635,30 @@ } }, "node_modules/@skyscanner/bpk-svgs": { - "version": "19.2.0", - "resolved": "https://registry.npmjs.org/@skyscanner/bpk-svgs/-/bpk-svgs-19.2.0.tgz", - "integrity": "sha512-I+GMmrogihhRzftqk4+Q/O99fydsBBAgMGEZwCmMftbZSjooYhNiBWsagcJaID+Eflaml7bpH3Y05lZVXy0ehQ==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/@skyscanner/bpk-svgs/-/bpk-svgs-19.3.0.tgz", + "integrity": "sha512-9jMVunUBDl7N4HBfx34orzmFic4SDkrGKM/5hlxSttuEjz51xQfQ507XZt6IikQo78Yvge7rhNbuVb3HC0xRTg==", "dev": true, + "dependencies": { + "camelcase": "^8.0.0" + }, "engines": { "node": "^18.16.0", "npm": ">=9.5.1" } }, + "node_modules/@skyscanner/bpk-svgs/node_modules/camelcase": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-8.0.0.tgz", + "integrity": "sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==", + "dev": true, + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@skyscanner/eslint-config-skyscanner": { "version": "18.0.0", "resolved": "https://registry.npmjs.org/@skyscanner/eslint-config-skyscanner/-/eslint-config-skyscanner-18.0.0.tgz", diff --git a/package.json b/package.json index 21aee3bf84..8e2087dc49 100644 --- a/package.json +++ b/package.json @@ -121,8 +121,8 @@ "@babel/register": "^7.23.7", "@percy/cli": "^1.28.2", "@percy/storybook": "^5.0.1", - "@skyscanner/bpk-foundations-web": "^17.9.0", - "@skyscanner/bpk-svgs": "^19.2.0", + "@skyscanner/bpk-foundations-web": "^17.11.0", + "@skyscanner/bpk-svgs": "^19.3.0", "@skyscanner/eslint-config-skyscanner": "^18.0.0", "@skyscanner/stylelint-config-skyscanner": "^11.1.0", "@storybook/addon-a11y": "^7.6.17", diff --git a/packages/bpk-component-accordion/src/__snapshots__/BpkAccordionItem-test.js.snap b/packages/bpk-component-accordion/src/__snapshots__/BpkAccordionItem-test.js.snap index 5c773684bb..a7ce3fbc38 100644 --- a/packages/bpk-component-accordion/src/__snapshots__/BpkAccordionItem-test.js.snap +++ b/packages/bpk-component-accordion/src/__snapshots__/BpkAccordionItem-test.js.snap @@ -34,12 +34,13 @@ exports[`BpkAccordionItem should not render an "initiallyExpanded" attribute on > @@ -99,12 +100,13 @@ exports[`BpkAccordionItem should render correctly 1`] = ` > @@ -165,12 +167,13 @@ exports[`BpkAccordionItem should render correctly with "className" prop 1`] = ` > @@ -230,12 +233,13 @@ exports[`BpkAccordionItem should render correctly with "expanded" prop 1`] = ` > @@ -293,12 +297,13 @@ exports[`BpkAccordionItem should render correctly with "tagName" prop set 1`] = > @@ -358,12 +363,13 @@ exports[`BpkAccordionItem should render correctly with "textStyle" prop set 1`] > @@ -415,12 +421,13 @@ exports[`BpkAccordionItem should render correctly with an icon set 1`] = ` My accordion item @@ -434,12 +441,13 @@ exports[`BpkAccordionItem should render correctly with an icon set 1`] = ` > @@ -499,12 +507,13 @@ exports[`BpkAccordionItem should render correctly with no divider 1`] = ` > @@ -565,12 +574,13 @@ exports[`BpkAccordionItem should render correctly with onDark set 1`] = ` > diff --git a/packages/bpk-component-accordion/src/__snapshots__/withAccordionItemState-test.js.snap b/packages/bpk-component-accordion/src/__snapshots__/withAccordionItemState-test.js.snap index ebda51a225..d58b46f3b3 100644 --- a/packages/bpk-component-accordion/src/__snapshots__/withAccordionItemState-test.js.snap +++ b/packages/bpk-component-accordion/src/__snapshots__/withAccordionItemState-test.js.snap @@ -34,12 +34,13 @@ exports[`withAccordionItemState(BpkAccordionItem) should render correctly 1`] = > @@ -99,12 +100,13 @@ exports[`withAccordionItemState(BpkAccordionItem) should render correctly with " > @@ -164,12 +166,13 @@ exports[`withAccordionItemState(BpkAccordionItem) should render correctly with " > diff --git a/packages/bpk-component-autosuggest/src/__snapshots__/BpkAutosuggestSuggestion-test.js.snap b/packages/bpk-component-autosuggest/src/__snapshots__/BpkAutosuggestSuggestion-test.js.snap index bdaacdb30e..edfff9d5d1 100644 --- a/packages/bpk-component-autosuggest/src/__snapshots__/BpkAutosuggestSuggestion-test.js.snap +++ b/packages/bpk-component-autosuggest/src/__snapshots__/BpkAutosuggestSuggestion-test.js.snap @@ -240,15 +240,16 @@ exports[`BpkAutosuggestSuggestion should render correctly with all available att @@ -112,12 +114,13 @@ exports[`BpkBreadcrumbItem should render correctly with arbitrary props 1`] = `
    @@ -147,12 +150,13 @@ exports[`BpkBreadcrumbItem should render correctly with with "linkProps" attribu
    diff --git a/packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx b/packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx index baf7f08a1e..b12539d052 100644 --- a/packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx +++ b/packages/bpk-component-breakpoint/src/BpkBreakpoint.tsx @@ -19,7 +19,6 @@ import { useEffect, useState } from 'react'; import type { ReactElement, ReactNode } from 'react'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { breakpoints } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import useMediaQuery from './useMediaQuery'; @@ -63,6 +62,7 @@ const BpkBreakpoint = ({ }, []); const matches = useMediaQuery(query, matchSSR); if (isClient) { + // @ts-expect-error invariant check. query: string matching limited BREAKPOINTS string values if (!legacy && !Object.values(BREAKPOINTS).includes(query)) { console.warn( `Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`, diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid-test.tsx b/packages/bpk-component-calendar/src/BpkCalendarGrid-test.tsx index 06023e071c..5e039e98e0 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGrid-test.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarGrid-test.tsx @@ -24,7 +24,7 @@ import { addMonths, isWeekend } from 'date-fns'; import { colorMonteverde, - colorPanjin, // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. + colorPanjin, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import { formatDateFull } from '../test-utils'; @@ -68,7 +68,7 @@ describe('BpkCalendarGrid', () => { it('should render correctly with a custom date component', () => { const MyCustomDate = (props: any) => { const cx = { - backgroundColor: colorPanjin, + backgroundColor: (colorPanjin as string), width: '50%', height: '50%', borderRadius: '5rem', diff --git a/packages/bpk-component-calendar/src/BpkCalendarNav.tsx b/packages/bpk-component-calendar/src/BpkCalendarNav.tsx index 0b8bb9f100..1ac31d4578 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarNav.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarNav.tsx @@ -19,9 +19,7 @@ import type { ChangeEvent, MouseEvent } from 'react'; import BpkAriaLive from '../../bpk-component-aria-live'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkSelect from '../../bpk-component-select'; diff --git a/packages/bpk-component-calendar/src/__snapshots__/BpkCalendarContainer-test.tsx.snap b/packages/bpk-component-calendar/src/__snapshots__/BpkCalendarContainer-test.tsx.snap index 7d81438a1e..b534c9ac76 100644 --- a/packages/bpk-component-calendar/src/__snapshots__/BpkCalendarContainer-test.tsx.snap +++ b/packages/bpk-component-calendar/src/__snapshots__/BpkCalendarContainer-test.tsx.snap @@ -23,12 +23,13 @@ exports[`BpkCalendarContainer should focus the correct date when \`initiallyFocu @@ -147,12 +151,13 @@ exports[`BpkDismissibleChip should render correctly with type="default" 1`] = ` @@ -186,12 +191,13 @@ exports[`BpkDismissibleChip should render correctly with type="default" and a le @@ -218,12 +224,13 @@ exports[`BpkDismissibleChip should render correctly with type="default" and disa @@ -250,12 +257,13 @@ exports[`BpkDismissibleChip should render correctly with type="on-dark" 1`] = ` @@ -289,12 +297,13 @@ exports[`BpkDismissibleChip should render correctly with type="on-dark" and a le @@ -321,12 +330,13 @@ exports[`BpkDismissibleChip should render correctly with type="on-dark" and disa @@ -353,12 +363,13 @@ exports[`BpkDismissibleChip should render correctly with type="on-image" 1`] = ` @@ -392,12 +403,13 @@ exports[`BpkDismissibleChip should render correctly with type="on-image" and a l @@ -424,12 +436,13 @@ exports[`BpkDismissibleChip should render correctly with type="on-image" and dis diff --git a/packages/bpk-component-chip/src/__snapshots__/BpkDropdownChip-test.tsx.snap b/packages/bpk-component-chip/src/__snapshots__/BpkDropdownChip-test.tsx.snap index 3bf5e13427..2cf87ee22f 100644 --- a/packages/bpk-component-chip/src/__snapshots__/BpkDropdownChip-test.tsx.snap +++ b/packages/bpk-component-chip/src/__snapshots__/BpkDropdownChip-test.tsx.snap @@ -19,12 +19,13 @@ exports[`BpkDropdownChip should render correctly 1`] = ` > @@ -51,12 +52,13 @@ exports[`BpkDropdownChip should render correctly with a "className" attribute 1` > @@ -83,12 +85,13 @@ exports[`BpkDropdownChip should render correctly with type="default" 1`] = ` > @@ -122,12 +125,13 @@ exports[`BpkDropdownChip should render correctly with type="default" and a leadi > @@ -155,12 +159,13 @@ exports[`BpkDropdownChip should render correctly with type="default" and disable > @@ -187,12 +192,13 @@ exports[`BpkDropdownChip should render correctly with type="default" and selecte > @@ -220,12 +226,13 @@ exports[`BpkDropdownChip should render correctly with type="default", selected a > @@ -252,12 +259,13 @@ exports[`BpkDropdownChip should render correctly with type="on-dark" 1`] = ` > @@ -291,12 +299,13 @@ exports[`BpkDropdownChip should render correctly with type="on-dark" and a leadi > @@ -324,12 +333,13 @@ exports[`BpkDropdownChip should render correctly with type="on-dark" and disable > @@ -356,12 +366,13 @@ exports[`BpkDropdownChip should render correctly with type="on-dark" and selecte > @@ -389,12 +400,13 @@ exports[`BpkDropdownChip should render correctly with type="on-dark", selected a > @@ -421,12 +433,13 @@ exports[`BpkDropdownChip should render correctly with type="on-image" 1`] = ` > @@ -460,12 +473,13 @@ exports[`BpkDropdownChip should render correctly with type="on-image" and a lead > @@ -493,12 +507,13 @@ exports[`BpkDropdownChip should render correctly with type="on-image" and disabl > @@ -525,12 +540,13 @@ exports[`BpkDropdownChip should render correctly with type="on-image" and select > @@ -558,12 +574,13 @@ exports[`BpkDropdownChip should render correctly with type="on-image", selected > diff --git a/packages/bpk-component-chip/src/__snapshots__/BpkIconChip-test.tsx.snap b/packages/bpk-component-chip/src/__snapshots__/BpkIconChip-test.tsx.snap index a0849a8f05..339cce10d7 100644 --- a/packages/bpk-component-chip/src/__snapshots__/BpkIconChip-test.tsx.snap +++ b/packages/bpk-component-chip/src/__snapshots__/BpkIconChip-test.tsx.snap @@ -14,13 +14,14 @@ exports[`BpkIconChip should render correctly 1`] = ` > @@ -45,13 +46,14 @@ exports[`BpkIconChip should render correctly with a "className" attribute 1`] = > @@ -76,13 +78,14 @@ exports[`BpkIconChip should render correctly with type="default" 1`] = ` > @@ -108,13 +111,14 @@ exports[`BpkIconChip should render correctly with type="default" and disabled 1` > @@ -139,13 +143,14 @@ exports[`BpkIconChip should render correctly with type="default" and selected 1` > @@ -171,13 +176,14 @@ exports[`BpkIconChip should render correctly with type="default", selected and d > @@ -202,13 +208,14 @@ exports[`BpkIconChip should render correctly with type="on-dark" 1`] = ` > @@ -234,13 +241,14 @@ exports[`BpkIconChip should render correctly with type="on-dark" and disabled 1` > @@ -265,13 +273,14 @@ exports[`BpkIconChip should render correctly with type="on-dark" and selected 1` > @@ -297,13 +306,14 @@ exports[`BpkIconChip should render correctly with type="on-dark", selected and d > @@ -328,13 +338,14 @@ exports[`BpkIconChip should render correctly with type="on-image" 1`] = ` > @@ -360,13 +371,14 @@ exports[`BpkIconChip should render correctly with type="on-image" and disabled 1 > @@ -391,13 +403,14 @@ exports[`BpkIconChip should render correctly with type="on-image" and selected 1 > @@ -423,13 +436,14 @@ exports[`BpkIconChip should render correctly with type="on-image", selected and > diff --git a/packages/bpk-component-close-button/src/__snapshots__/BpkCloseButton-test.js.snap b/packages/bpk-component-close-button/src/__snapshots__/BpkCloseButton-test.js.snap index 1f7f01bfb9..17f2daeb69 100644 --- a/packages/bpk-component-close-button/src/__snapshots__/BpkCloseButton-test.js.snap +++ b/packages/bpk-component-close-button/src/__snapshots__/BpkCloseButton-test.js.snap @@ -13,12 +13,13 @@ exports[`BpkCloseButton should render correctly 1`] = ` > @@ -39,12 +40,13 @@ exports[`BpkCloseButton should render correctly with a custom className 1`] = ` > @@ -65,12 +67,13 @@ exports[`BpkCloseButton should render correctly with a custom icon 1`] = ` > diff --git a/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx b/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx index 4546fb19d7..dad65913c4 100644 --- a/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx +++ b/packages/bpk-component-datatable/src/BpkDataTableHeader.tsx @@ -19,9 +19,7 @@ import type { KeyboardEvent } from 'react'; import { withRtlSupport } from '../../bpk-component-icon'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkSmallArrowDownIcon from '../../bpk-component-icon/sm/arrow-down'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkSmallArrowUpIcon from '../../bpk-component-icon/sm/arrow-up'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-datatable/src/__snapshots__/BpkDataTable-test.tsx.snap b/packages/bpk-component-datatable/src/__snapshots__/BpkDataTable-test.tsx.snap index 86c6a4345d..8e2bea8da9 100644 --- a/packages/bpk-component-datatable/src/__snapshots__/BpkDataTable-test.tsx.snap +++ b/packages/bpk-component-datatable/src/__snapshots__/BpkDataTable-test.tsx.snap @@ -37,12 +37,13 @@ exports[`BpkDataTable should render correctly when "onRowClick" is set 1`] = `
    @@ -52,12 +53,13 @@ exports[`BpkDataTable should render correctly when "onRowClick" is set 1`] = `
    @@ -87,12 +89,13 @@ exports[`BpkDataTable should render correctly when "onRowClick" is set 1`] = `
    @@ -102,12 +105,13 @@ exports[`BpkDataTable should render correctly when "onRowClick" is set 1`] = `
    @@ -137,12 +141,13 @@ exports[`BpkDataTable should render correctly when "onRowClick" is set 1`] = `
    @@ -152,12 +157,13 @@ exports[`BpkDataTable should render correctly when "onRowClick" is set 1`] = `
    @@ -266,12 +272,13 @@ exports[`BpkDataTable should render correctly with a custom className 1`] = `
    @@ -281,12 +288,13 @@ exports[`BpkDataTable should render correctly with a custom className 1`] = `
    @@ -316,12 +324,13 @@ exports[`BpkDataTable should render correctly with a custom className 1`] = `
    @@ -331,12 +340,13 @@ exports[`BpkDataTable should render correctly with a custom className 1`] = `
    @@ -366,12 +376,13 @@ exports[`BpkDataTable should render correctly with a custom className 1`] = `
    @@ -381,12 +392,13 @@ exports[`BpkDataTable should render correctly with a custom className 1`] = ` @@ -495,12 +507,13 @@ exports[`BpkDataTable should render correctly with a custom headerClassName 1`] @@ -510,12 +523,13 @@ exports[`BpkDataTable should render correctly with a custom headerClassName 1`] @@ -545,12 +559,13 @@ exports[`BpkDataTable should render correctly with a custom headerClassName 1`] @@ -560,12 +575,13 @@ exports[`BpkDataTable should render correctly with a custom headerClassName 1`] @@ -595,12 +611,13 @@ exports[`BpkDataTable should render correctly with a custom headerClassName 1`] @@ -610,12 +627,13 @@ exports[`BpkDataTable should render correctly with a custom headerClassName 1`] @@ -724,12 +742,13 @@ exports[`BpkDataTable should render correctly with a custom rowClassName functio @@ -739,12 +758,13 @@ exports[`BpkDataTable should render correctly with a custom rowClassName functio @@ -774,12 +794,13 @@ exports[`BpkDataTable should render correctly with a custom rowClassName functio @@ -789,12 +810,13 @@ exports[`BpkDataTable should render correctly with a custom rowClassName functio @@ -824,12 +846,13 @@ exports[`BpkDataTable should render correctly with a custom rowClassName functio @@ -839,12 +862,13 @@ exports[`BpkDataTable should render correctly with a custom rowClassName functio @@ -953,12 +977,13 @@ exports[`BpkDataTable should render correctly with a custom rowClassName string @@ -968,12 +993,13 @@ exports[`BpkDataTable should render correctly with a custom rowClassName string @@ -1003,12 +1029,13 @@ exports[`BpkDataTable should render correctly with a custom rowClassName string @@ -1018,12 +1045,13 @@ exports[`BpkDataTable should render correctly with a custom rowClassName string @@ -1053,12 +1081,13 @@ exports[`BpkDataTable should render correctly with a custom rowClassName string @@ -1068,12 +1097,13 @@ exports[`BpkDataTable should render correctly with a custom rowClassName string @@ -1182,12 +1212,13 @@ exports[`BpkDataTable should render correctly with a specified width 1`] = ` @@ -1197,12 +1228,13 @@ exports[`BpkDataTable should render correctly with a specified width 1`] = ` @@ -1232,12 +1264,13 @@ exports[`BpkDataTable should render correctly with a specified width 1`] = ` @@ -1247,12 +1280,13 @@ exports[`BpkDataTable should render correctly with a specified width 1`] = ` @@ -1282,12 +1316,13 @@ exports[`BpkDataTable should render correctly with a specified width 1`] = ` @@ -1297,12 +1332,13 @@ exports[`BpkDataTable should render correctly with a specified width 1`] = ` @@ -1411,12 +1447,13 @@ exports[`BpkDataTable should render correctly with multiple columns 1`] = ` @@ -1426,12 +1463,13 @@ exports[`BpkDataTable should render correctly with multiple columns 1`] = ` @@ -1461,12 +1499,13 @@ exports[`BpkDataTable should render correctly with multiple columns 1`] = ` @@ -1476,12 +1515,13 @@ exports[`BpkDataTable should render correctly with multiple columns 1`] = ` @@ -1511,12 +1551,13 @@ exports[`BpkDataTable should render correctly with multiple columns 1`] = ` @@ -1526,12 +1567,13 @@ exports[`BpkDataTable should render correctly with multiple columns 1`] = ` @@ -1640,12 +1682,13 @@ exports[`BpkDataTable should render correctly with no data; only headers 1`] = ` @@ -1655,12 +1698,13 @@ exports[`BpkDataTable should render correctly with no data; only headers 1`] = ` @@ -1690,12 +1734,13 @@ exports[`BpkDataTable should render correctly with no data; only headers 1`] = ` @@ -1705,12 +1750,13 @@ exports[`BpkDataTable should render correctly with no data; only headers 1`] = ` @@ -1740,12 +1786,13 @@ exports[`BpkDataTable should render correctly with no data; only headers 1`] = ` @@ -1755,12 +1802,13 @@ exports[`BpkDataTable should render correctly with no data; only headers 1`] = ` diff --git a/packages/bpk-component-datatable/src/__snapshots__/BpkDataTableHeader-test.tsx.snap b/packages/bpk-component-datatable/src/__snapshots__/BpkDataTableHeader-test.tsx.snap index da40492c48..1812fe0654 100644 --- a/packages/bpk-component-datatable/src/__snapshots__/BpkDataTableHeader-test.tsx.snap +++ b/packages/bpk-component-datatable/src/__snapshots__/BpkDataTableHeader-test.tsx.snap @@ -36,12 +36,13 @@ exports[`BpkDataTableHeader renders sort icon with down icon selected 1`] = ` @@ -51,12 +52,13 @@ exports[`BpkDataTableHeader renders sort icon with down icon selected 1`] = ` @@ -86,12 +88,13 @@ exports[`BpkDataTableHeader renders sort icon with up icon selected 1`] = ` @@ -101,12 +104,13 @@ exports[`BpkDataTableHeader renders sort icon with up icon selected 1`] = ` @@ -136,12 +140,13 @@ exports[`BpkDataTableHeader renders sort icons 1`] = ` @@ -151,12 +156,13 @@ exports[`BpkDataTableHeader renders sort icons 1`] = ` diff --git a/packages/bpk-component-dialog/src/BpkDialog-test.tsx b/packages/bpk-component-dialog/src/BpkDialog-test.tsx index 4575b2aecd..b9d72f8a39 100644 --- a/packages/bpk-component-dialog/src/BpkDialog-test.tsx +++ b/packages/bpk-component-dialog/src/BpkDialog-test.tsx @@ -18,11 +18,8 @@ import { render } from '@testing-library/react'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import InfoIcon from '../../bpk-component-icon/lg/information-circle'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import TickIcon from '../../bpk-component-icon/lg/tick'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import TrashIcon from '../../bpk-component-icon/lg/trash'; import BpkDialog from './BpkDialog'; diff --git a/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap b/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap index 27fc460400..d185827f80 100644 --- a/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap +++ b/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap @@ -40,12 +40,13 @@ exports[`BpkDialog should render correctly in the given target if renderTarget i > @@ -126,12 +127,13 @@ exports[`BpkDialog should render default icon dialog correctly 2`] = ` > @@ -175,12 +177,13 @@ exports[`BpkDialog should render destructive icon dialog correctly 2`] = ` > @@ -224,12 +227,13 @@ exports[`BpkDialog should render warning icon dialog correctly 2`] = ` > @@ -321,12 +325,13 @@ exports[`BpkDialog should render with flare dialog 2`] = ` > @@ -420,12 +425,13 @@ exports[`BpkDialog should render with flare dialog with flareClassName 2`] = ` > diff --git a/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap b/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap index 048bd5bcf3..7cf5f65e37 100644 --- a/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap +++ b/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap @@ -47,12 +47,13 @@ exports[`BpkDrawer should render correctly in the given target if renderTarget i > diff --git a/packages/bpk-component-drawer/src/__snapshots__/BpkDrawerContent-test.js.snap b/packages/bpk-component-drawer/src/__snapshots__/BpkDrawerContent-test.js.snap index 62ab1ad6c0..8cc3f29e50 100644 --- a/packages/bpk-component-drawer/src/__snapshots__/BpkDrawerContent-test.js.snap +++ b/packages/bpk-component-drawer/src/__snapshots__/BpkDrawerContent-test.js.snap @@ -33,12 +33,13 @@ exports[`BpkDrawerContent should render correctly 1`] = ` > @@ -87,12 +88,13 @@ exports[`BpkDrawerContent should render correctly when it has a className 1`] = > @@ -141,12 +143,13 @@ exports[`BpkDrawerContent should render correctly when it has a contentClassName > @@ -196,12 +199,13 @@ exports[`BpkDrawerContent should render correctly with arbitrary attributes 1`] > @@ -250,12 +254,13 @@ exports[`BpkDrawerContent should render correctly with hideTitle 1`] = ` > diff --git a/packages/bpk-component-fieldset/src/__snapshots__/BpkFieldset-test.js.snap b/packages/bpk-component-fieldset/src/__snapshots__/BpkFieldset-test.js.snap index 2761678e55..d5758845d6 100644 --- a/packages/bpk-component-fieldset/src/__snapshots__/BpkFieldset-test.js.snap +++ b/packages/bpk-component-fieldset/src/__snapshots__/BpkFieldset-test.js.snap @@ -219,12 +219,13 @@ exports[`BpkFieldset should render correctly with checkbox component 1`] = ` > @@ -288,12 +289,13 @@ exports[`BpkFieldset should render correctly with checkbox component and "requir > @@ -353,12 +355,13 @@ exports[`BpkFieldset should render correctly with input component 1`] = ` > @@ -425,12 +428,13 @@ exports[`BpkFieldset should render correctly with input component and "descripti > @@ -490,12 +494,13 @@ exports[`BpkFieldset should render correctly with input component and "disabled" > @@ -560,12 +565,13 @@ exports[`BpkFieldset should render correctly with input component and "required" > @@ -625,12 +631,13 @@ exports[`BpkFieldset should render correctly with input component and "valid" at > @@ -689,12 +696,13 @@ exports[`BpkFieldset should render correctly with input component and "valid" at > @@ -778,12 +786,13 @@ exports[`BpkFieldset should render correctly with select component 1`] = ` > @@ -872,12 +881,13 @@ exports[`BpkFieldset should render correctly with select component and "required > diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx b/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx index 9f942af318..5e3770679a 100644 --- a/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx +++ b/packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx @@ -19,7 +19,6 @@ import { fireEvent, render } from '@testing-library/react'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkIconHeart from '../../bpk-component-icon/sm/heart'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-floating-notification/src/__snapshots__/BpkFloatingNotification-test.tsx.snap b/packages/bpk-component-floating-notification/src/__snapshots__/BpkFloatingNotification-test.tsx.snap index a3132111f6..a35dd01d59 100644 --- a/packages/bpk-component-floating-notification/src/__snapshots__/BpkFloatingNotification-test.tsx.snap +++ b/packages/bpk-component-floating-notification/src/__snapshots__/BpkFloatingNotification-test.tsx.snap @@ -58,12 +58,13 @@ exports[`BpkFloatingNotification should render correctly with icon prop 1`] = ` > diff --git a/packages/bpk-component-floating-notification/src/accessibility-test.tsx b/packages/bpk-component-floating-notification/src/accessibility-test.tsx index f126b3182a..09023fc942 100644 --- a/packages/bpk-component-floating-notification/src/accessibility-test.tsx +++ b/packages/bpk-component-floating-notification/src/accessibility-test.tsx @@ -20,7 +20,6 @@ import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkIconHeart from '../../bpk-component-icon/sm/heart'; import BpkFloatingNotification from './BpkFloatingNotification'; diff --git a/packages/bpk-component-form-validation/src/__snapshots__/BpkFormValidation-test.js.snap b/packages/bpk-component-form-validation/src/__snapshots__/BpkFormValidation-test.js.snap index 434799b11d..e751346557 100644 --- a/packages/bpk-component-form-validation/src/__snapshots__/BpkFormValidation-test.js.snap +++ b/packages/bpk-component-form-validation/src/__snapshots__/BpkFormValidation-test.js.snap @@ -21,12 +21,13 @@ exports[`BpkFormValidation should render correctly 1`] = ` > @@ -62,12 +63,13 @@ exports[`BpkFormValidation should render correctly with "expanded" equal to fals > diff --git a/packages/bpk-component-icon/all.tsx b/packages/bpk-component-icon/all.tsx index 22c83f579a..30d0ccd264 100644 --- a/packages/bpk-component-icon/all.tsx +++ b/packages/bpk-component-icon/all.tsx @@ -22,15 +22,15 @@ function requireAll(requireContext: any) { const hash: any = {}; requireContext.keys().forEach((key: string) => { - const moduleName: any = key.replace('./', '').replace('.js', ''); + const moduleName: any = key.replace('./', '').replace('.jsx', ''); hash[moduleName] = requireContext(key).default; }); return hash; } -const sm = requireAll(require.context('./sm', false, /\.js$/)); -const lg = requireAll(require.context('./lg', false, /\.js$/)); +const sm = requireAll(require.context('./sm', false, /\.jsx$/)); +const lg = requireAll(require.context('./lg', false, /\.jsx$/)); export default sm; export { sm, lg }; diff --git a/packages/bpk-component-icon/index.tsx b/packages/bpk-component-icon/index.tsx index 6cd0a7fef5..55bd159b1c 100644 --- a/packages/bpk-component-icon/index.tsx +++ b/packages/bpk-component-icon/index.tsx @@ -22,7 +22,6 @@ import { iconSizeSm, iconSizeLg, privateButtonLineHeight, - // @ts-expect-error Untyped import. We will need to review how these files are handled } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import withAlignment from './src/withAlignment'; diff --git a/packages/bpk-component-icon/src/withAlignment-test.tsx b/packages/bpk-component-icon/src/withAlignment-test.tsx index b96836c581..ece131bb1c 100644 --- a/packages/bpk-component-icon/src/withAlignment-test.tsx +++ b/packages/bpk-component-icon/src/withAlignment-test.tsx @@ -26,7 +26,6 @@ import { lineHeightXxl, iconSizeSm, iconSizeLg, - // @ts-expect-error Untyped import. We will need to review how these files are handled } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import withAlignment from './withAlignment'; diff --git a/packages/bpk-component-image/src/BpkBackgroundImage.tsx b/packages/bpk-component-image/src/BpkBackgroundImage.tsx index 3a4e1c3bed..6e28c7e5dd 100644 --- a/packages/bpk-component-image/src/BpkBackgroundImage.tsx +++ b/packages/bpk-component-image/src/BpkBackgroundImage.tsx @@ -22,7 +22,6 @@ import type { ReactNode, CSSProperties } from 'react'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import CSSTransition from 'react-transition-group/CSSTransition'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. diff --git a/packages/bpk-component-image/src/BpkImage-test.tsx b/packages/bpk-component-image/src/BpkImage-test.tsx index aebaeab43b..09ec6618c9 100644 --- a/packages/bpk-component-image/src/BpkImage-test.tsx +++ b/packages/bpk-component-image/src/BpkImage-test.tsx @@ -19,8 +19,8 @@ import { render, screen, fireEvent } from '@testing-library/react'; import { - spacingSm, - breakpoints as BREAKPOINTS, // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. + spacings, + breakpoints as BREAKPOINTS, } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; import BpkImage from './BpkImage'; @@ -43,7 +43,7 @@ describe('BpkImage', () => { , ); @@ -55,7 +55,7 @@ describe('BpkImage', () => { , diff --git a/packages/bpk-component-image/src/BpkImage.tsx b/packages/bpk-component-image/src/BpkImage.tsx index a9416046ff..d53ff0a465 100644 --- a/packages/bpk-component-image/src/BpkImage.tsx +++ b/packages/bpk-component-image/src/BpkImage.tsx @@ -21,7 +21,6 @@ import { Component } from 'react'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import CSSTransition from 'react-transition-group/CSSTransition'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. diff --git a/packages/bpk-component-image/src/__snapshots__/BpkBackgroundImage-test.tsx.snap b/packages/bpk-component-image/src/__snapshots__/BpkBackgroundImage-test.tsx.snap index 9ffce7aff4..be6e7a1d41 100644 --- a/packages/bpk-component-image/src/__snapshots__/BpkBackgroundImage-test.tsx.snap +++ b/packages/bpk-component-image/src/__snapshots__/BpkBackgroundImage-test.tsx.snap @@ -66,56 +66,57 @@ exports[`BpkBackgroundImage should have loading behavior 1`] = ` > diff --git a/packages/bpk-component-image/src/__snapshots__/BpkImage-test.tsx.snap b/packages/bpk-component-image/src/__snapshots__/BpkImage-test.tsx.snap index 6e9c7678bc..bbba2a8943 100644 --- a/packages/bpk-component-image/src/__snapshots__/BpkImage-test.tsx.snap +++ b/packages/bpk-component-image/src/__snapshots__/BpkImage-test.tsx.snap @@ -4,6 +4,7 @@ exports[`BpkImage should accept userland className 1`] = `
    -
    +
    diff --git a/packages/bpk-component-info-banner/src/AnimateAndFade.tsx b/packages/bpk-component-info-banner/src/AnimateAndFade.tsx index 2faa452084..3c7ecddbce 100644 --- a/packages/bpk-component-info-banner/src/AnimateAndFade.tsx +++ b/packages/bpk-component-info-banner/src/AnimateAndFade.tsx @@ -22,7 +22,6 @@ import type { ReactNode } from 'react'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { TransitionGroup, CSSTransition } from 'react-transition-group'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. diff --git a/packages/bpk-component-info-banner/src/BpkInfoBannerInner-test.tsx b/packages/bpk-component-info-banner/src/BpkInfoBannerInner-test.tsx index 166a5f77b2..15841e0286 100644 --- a/packages/bpk-component-info-banner/src/BpkInfoBannerInner-test.tsx +++ b/packages/bpk-component-info-banner/src/BpkInfoBannerInner-test.tsx @@ -18,7 +18,6 @@ import { render } from '@testing-library/react'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import CurrencyIcon from '../../bpk-component-icon/sm/currency'; import BpkInfoBannerInner, { CONFIGURATION } from './BpkInfoBannerInner'; diff --git a/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx b/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx index 2995756d81..4c40c9a8ef 100644 --- a/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx +++ b/packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx @@ -22,7 +22,6 @@ import type { ReactNode, FunctionComponent, SVGProps } from 'react'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. @@ -30,13 +29,9 @@ import BpkAnimateHeight from '../../bpk-animate-height'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkCloseButton from '../../bpk-component-close-button'; import { withButtonAlignment } from '../../bpk-component-icon'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ChevronDownIcon from '../../bpk-component-icon/sm/chevron-down'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ChevronUpIcon from '../../bpk-component-icon/sm/chevron-up'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import InfoCircleIcon from '../../bpk-component-icon/sm/information-circle'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import TickCircleIcon from '../../bpk-component-icon/sm/tick-circle'; // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkLink from '../../bpk-component-link'; diff --git a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap index 36d1b0a6f8..3b21bfe606 100644 --- a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap +++ b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap @@ -26,12 +26,13 @@ exports[`BpkInfoBanner should render correctly 1`] = ` > @@ -90,12 +91,13 @@ exports[`BpkInfoBanner should render correctly with no type specified 1`] = ` > diff --git a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerDismissable-test.tsx.snap b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerDismissable-test.tsx.snap index 57204604a5..8f38dee459 100644 --- a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerDismissable-test.tsx.snap +++ b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerDismissable-test.tsx.snap @@ -26,12 +26,13 @@ exports[`BpkInfoBannerDismissable should render correctly 1`] = ` > @@ -56,12 +57,13 @@ exports[`BpkInfoBannerDismissable should render correctly 1`] = ` > diff --git a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerInner-test.tsx.snap b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerInner-test.tsx.snap index b68548a46d..71c916a4b5 100644 --- a/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerInner-test.tsx.snap +++ b/packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerInner-test.tsx.snap @@ -26,12 +26,13 @@ exports[`BpkInfoBannerInner should render correctly with "style" attribute equal > @@ -88,12 +89,13 @@ exports[`BpkInfoBannerInner should render correctly with "type" attribute equal > @@ -150,12 +152,13 @@ exports[`BpkInfoBannerInner should render correctly with "type" attribute equal > @@ -212,12 +215,13 @@ exports[`BpkInfoBannerInner should render correctly with "type" attribute equal > @@ -274,12 +278,13 @@ exports[`BpkInfoBannerInner should render correctly with "type" attribute equal > @@ -336,12 +341,13 @@ exports[`BpkInfoBannerInner should render correctly with "type" attribute equal > @@ -398,12 +404,13 @@ exports[`BpkInfoBannerInner should render correctly with a custom banner-alert c > @@ -462,12 +469,13 @@ exports[`BpkInfoBannerInner should render correctly with a custom class name 1`] > @@ -525,12 +533,13 @@ exports[`BpkInfoBannerInner should render correctly with a element based message > @@ -564,12 +573,13 @@ exports[`BpkInfoBannerInner should render correctly with a element based message > @@ -624,12 +634,13 @@ exports[`BpkInfoBannerInner should render correctly with animateOnLeave 1`] = ` > @@ -654,12 +665,13 @@ exports[`BpkInfoBannerInner should render correctly with animateOnLeave 1`] = ` > @@ -711,12 +723,13 @@ exports[`BpkInfoBannerInner should render correctly with arbitrary props 1`] = ` > @@ -774,12 +787,13 @@ exports[`BpkInfoBannerInner should render correctly with child nodes 1`] = ` > @@ -808,12 +822,13 @@ exports[`BpkInfoBannerInner should render correctly with child nodes 1`] = ` > @@ -868,12 +883,13 @@ exports[`BpkInfoBannerInner should render correctly with dismissable option 1`] > @@ -898,12 +914,13 @@ exports[`BpkInfoBannerInner should render correctly with dismissable option 1`] > diff --git a/packages/bpk-component-info-banner/src/__snapshots__/withBannerAlertState-test.tsx.snap b/packages/bpk-component-info-banner/src/__snapshots__/withBannerAlertState-test.tsx.snap index 36308d8393..5933fa13d0 100644 --- a/packages/bpk-component-info-banner/src/__snapshots__/withBannerAlertState-test.tsx.snap +++ b/packages/bpk-component-info-banner/src/__snapshots__/withBannerAlertState-test.tsx.snap @@ -26,12 +26,13 @@ exports[`withBannerAlertState(BpkInfoBannerDismissable) should render correctly > @@ -56,12 +57,13 @@ exports[`withBannerAlertState(BpkInfoBannerDismissable) should render correctly > @@ -114,12 +116,13 @@ exports[`withBannerAlertState(BpkInfoBannerExpandable) should render correctly c > @@ -148,12 +151,13 @@ exports[`withBannerAlertState(BpkInfoBannerExpandable) should render correctly c > @@ -214,12 +218,13 @@ exports[`withBannerAlertState(BpkInfoBannerExpandable) should render correctly e > @@ -248,12 +253,13 @@ exports[`withBannerAlertState(BpkInfoBannerExpandable) should render correctly e > diff --git a/packages/bpk-component-input/src/BpkClearButton.tsx b/packages/bpk-component-input/src/BpkClearButton.tsx index a79c879fe9..62a8dfd1c7 100644 --- a/packages/bpk-component-input/src/BpkClearButton.tsx +++ b/packages/bpk-component-input/src/BpkClearButton.tsx @@ -19,7 +19,6 @@ import type { ComponentProps } from 'react'; import { withButtonAlignment } from '../../bpk-component-icon'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import ClearIcon from '../../bpk-component-icon/sm/close-circle'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-input/src/__snapshots__/BpkClearButton-test.tsx.snap b/packages/bpk-component-input/src/__snapshots__/BpkClearButton-test.tsx.snap index bbc2ba767b..a525ae4cd5 100644 --- a/packages/bpk-component-input/src/__snapshots__/BpkClearButton-test.tsx.snap +++ b/packages/bpk-component-input/src/__snapshots__/BpkClearButton-test.tsx.snap @@ -15,12 +15,13 @@ exports[`BpkClearButton should render correctly 1`] = ` aria-hidden="true" class="bpk-clear-button__icon" focusable="false" - style="width: 1rem; height: 1rem;" + height="1rem" viewBox="0 0 24 24" + width="1rem" xmlns="http://www.w3.org/2000/svg" > @@ -43,12 +44,13 @@ exports[`BpkClearButton should render correctly with a custom class 1`] = ` aria-hidden="true" class="bpk-clear-button__icon" focusable="false" - style="width: 1rem; height: 1rem;" + height="1rem" viewBox="0 0 24 24" + width="1rem" xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/bpk-component-loading-button/src/__snapshots__/BpkLoadingButton-test.js.snap b/packages/bpk-component-loading-button/src/__snapshots__/BpkLoadingButton-test.js.snap index b1c465c45f..bfea95907d 100644 --- a/packages/bpk-component-loading-button/src/__snapshots__/BpkLoadingButton-test.js.snap +++ b/packages/bpk-component-loading-button/src/__snapshots__/BpkLoadingButton-test.js.snap @@ -13,12 +13,13 @@ exports[`BpkLoadingButton should add only bpk specific classes if className prop @@ -39,13 +40,14 @@ exports[`BpkLoadingButton should render correctly 1`] = ` @@ -66,12 +68,13 @@ exports[`BpkLoadingButton should render correctly with "large" and "destructive" @@ -93,12 +96,13 @@ exports[`BpkLoadingButton should render correctly with "large" and "disabled" at @@ -119,12 +123,13 @@ exports[`BpkLoadingButton should render correctly with "large" and "featured" at @@ -149,12 +154,13 @@ exports[`BpkLoadingButton should render correctly with "large" and "iconOnly" at @@ -175,12 +181,13 @@ exports[`BpkLoadingButton should render correctly with "large" and "link" attrib @@ -201,12 +208,13 @@ exports[`BpkLoadingButton should render correctly with "large" and "linkOnDark" @@ -229,69 +237,70 @@ exports[`BpkLoadingButton should render correctly with "large" and "loading" att > @@ -303,12 +312,13 @@ exports[`BpkLoadingButton should render correctly with "large" and "loading" att @@ -329,12 +339,13 @@ exports[`BpkLoadingButton should render correctly with "large" and "primaryOnDar @@ -355,12 +366,13 @@ exports[`BpkLoadingButton should render correctly with "large" and "primaryOnLig @@ -381,12 +393,13 @@ exports[`BpkLoadingButton should render correctly with "large" and "secondary" a @@ -407,12 +420,13 @@ exports[`BpkLoadingButton should render correctly with "large" and "secondaryOnD @@ -433,13 +447,14 @@ exports[`BpkLoadingButton should render correctly with a "destructive" attribute @@ -461,13 +476,14 @@ exports[`BpkLoadingButton should render correctly with a "disabled" attribute 1` @@ -488,13 +504,14 @@ exports[`BpkLoadingButton should render correctly with a "featured" attribute 1` @@ -515,13 +532,14 @@ exports[`BpkLoadingButton should render correctly with a "href" attribute 1`] = @@ -541,12 +559,13 @@ exports[`BpkLoadingButton should render correctly with a "icon" attribute 1`] = > @@ -567,12 +586,13 @@ exports[`BpkLoadingButton should render correctly with a "iconDisabled" attribut > @@ -595,12 +615,13 @@ exports[`BpkLoadingButton should render correctly with a "iconLoading" attribute > @@ -612,13 +633,14 @@ exports[`BpkLoadingButton should render correctly with a "iconLoading" attribute @@ -643,13 +665,14 @@ exports[`BpkLoadingButton should render correctly with a "iconOnly" attribute 1` @@ -669,13 +692,14 @@ exports[`BpkLoadingButton should render correctly with a "iconPosition=leading" @@ -697,12 +721,13 @@ exports[`BpkLoadingButton should render correctly with a "large" attribute 1`] = @@ -723,13 +748,14 @@ exports[`BpkLoadingButton should render correctly with a "link" attribute 1`] = @@ -750,13 +776,14 @@ exports[`BpkLoadingButton should render correctly with a "linkOnDark" attribute @@ -779,56 +806,57 @@ exports[`BpkLoadingButton should render correctly with a "loading" attribute 1`] > @@ -840,13 +868,14 @@ exports[`BpkLoadingButton should render correctly with a "loading" attribute 1`] @@ -867,13 +896,14 @@ exports[`BpkLoadingButton should render correctly with a "primaryOnDark" attribu @@ -894,13 +924,14 @@ exports[`BpkLoadingButton should render correctly with a "primaryOnLight" attrib @@ -921,13 +952,14 @@ exports[`BpkLoadingButton should render correctly with a "secondary" attribute 1 @@ -948,13 +980,14 @@ exports[`BpkLoadingButton should render correctly with a "secondaryOnDark" attri @@ -975,12 +1008,13 @@ exports[`BpkLoadingButton should respect the class names entered as a string 1`] diff --git a/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap b/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap index 9d687ae6bb..a4d4f14b7d 100644 --- a/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap +++ b/packages/bpk-component-modal/src/BpkModalV2/__snapshots__/BpKModal-test.tsx.snap @@ -30,12 +30,13 @@ exports[`BpkModalV2 is not supported should render correctly with polyfill and c > @@ -88,12 +89,13 @@ exports[`BpkModalV2 is supported should render correctly with content 1`] = ` > diff --git a/packages/bpk-component-modal/src/__snapshots__/BpkModal-test.tsx.snap b/packages/bpk-component-modal/src/__snapshots__/BpkModal-test.tsx.snap index ac9c20a473..e1bcdcd515 100644 --- a/packages/bpk-component-modal/src/__snapshots__/BpkModal-test.tsx.snap +++ b/packages/bpk-component-modal/src/__snapshots__/BpkModal-test.tsx.snap @@ -50,12 +50,13 @@ exports[`BpkModal should render correctly in the given target if renderTarget is > diff --git a/packages/bpk-component-modal/src/__snapshots__/BpkModalInner-test.tsx.snap b/packages/bpk-component-modal/src/__snapshots__/BpkModalInner-test.tsx.snap index b9387aaeea..4703c7e9c1 100644 --- a/packages/bpk-component-modal/src/__snapshots__/BpkModalInner-test.tsx.snap +++ b/packages/bpk-component-modal/src/__snapshots__/BpkModalInner-test.tsx.snap @@ -36,12 +36,13 @@ exports[`BpkModalInner should render correctly 1`] = ` > @@ -94,12 +95,13 @@ exports[`BpkModalInner should render correctly when is iPhone 1`] = ` > @@ -152,12 +154,13 @@ exports[`BpkModalInner should render correctly when it does not fills the screen > @@ -210,12 +213,13 @@ exports[`BpkModalInner should render correctly when it has a className 1`] = ` > @@ -268,12 +272,13 @@ exports[`BpkModalInner should render correctly when it is fullscreen 1`] = ` > @@ -326,12 +331,13 @@ exports[`BpkModalInner should render correctly with a custom content classname 1 > @@ -405,12 +411,13 @@ exports[`BpkModalInner should render correctly with an accessory view 1`] = ` > @@ -506,12 +513,13 @@ exports[`BpkModalInner should render correctly with no padding 1`] = ` > @@ -564,12 +572,13 @@ exports[`BpkModalInner should render correctly with wide prop 1`] = ` > diff --git a/packages/bpk-component-nudger/src/BpkConfigurableNudger.tsx b/packages/bpk-component-nudger/src/BpkConfigurableNudger.tsx index ab1c40a06f..2a66c59e92 100644 --- a/packages/bpk-component-nudger/src/BpkConfigurableNudger.tsx +++ b/packages/bpk-component-nudger/src/BpkConfigurableNudger.tsx @@ -18,9 +18,7 @@ import { BpkButtonV2, BUTTON_TYPES } from '../../bpk-component-button'; import { withButtonAlignment } from '../../bpk-component-icon'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import MinusIcon from '../../bpk-component-icon/sm/minus'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import PlusIcon from '../../bpk-component-icon/sm/plus'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-nudger/src/__snapshots__/BpkNudger-test.tsx.snap b/packages/bpk-component-nudger/src/__snapshots__/BpkNudger-test.tsx.snap index 5cbd135e60..7c31b877fc 100644 --- a/packages/bpk-component-nudger/src/__snapshots__/BpkNudger-test.tsx.snap +++ b/packages/bpk-component-nudger/src/__snapshots__/BpkNudger-test.tsx.snap @@ -17,12 +17,13 @@ exports[`BpkNudger should render as a configurable nudger correctly 1`] = ` @@ -48,12 +49,13 @@ exports[`BpkNudger should render as a configurable nudger correctly 1`] = ` @@ -82,12 +84,13 @@ exports[`BpkNudger should render as an on dark nudger correctly 1`] = ` @@ -113,12 +116,13 @@ exports[`BpkNudger should render as an on dark nudger correctly 1`] = ` @@ -148,12 +152,13 @@ exports[`BpkNudger should render correctly 1`] = ` @@ -179,12 +184,13 @@ exports[`BpkNudger should render correctly 1`] = ` @@ -215,12 +221,13 @@ exports[`BpkNudger should render correctly with a value < min 1`] = ` @@ -246,12 +253,13 @@ exports[`BpkNudger should render correctly with a value < min 1`] = ` @@ -281,12 +289,13 @@ exports[`BpkNudger should render correctly with a value = max 1`] = ` @@ -313,12 +322,13 @@ exports[`BpkNudger should render correctly with a value = max 1`] = ` @@ -349,12 +359,13 @@ exports[`BpkNudger should render correctly with a value = min 1`] = ` @@ -380,12 +391,13 @@ exports[`BpkNudger should render correctly with a value = min 1`] = ` @@ -415,12 +427,13 @@ exports[`BpkNudger should render correctly with a value > max 1`] = ` @@ -447,12 +460,13 @@ exports[`BpkNudger should render correctly with a value > max 1`] = ` diff --git a/packages/bpk-component-page-indicator/src/__snapshots__/BpkPageIndicator-test.js.snap b/packages/bpk-component-page-indicator/src/__snapshots__/BpkPageIndicator-test.js.snap index 266002f19d..875e68e665 100644 --- a/packages/bpk-component-page-indicator/src/__snapshots__/BpkPageIndicator-test.js.snap +++ b/packages/bpk-component-page-indicator/src/__snapshots__/BpkPageIndicator-test.js.snap @@ -142,12 +142,13 @@ exports[`BpkPageIndicator should support showNav attribute 1`] = ` @@ -213,12 +214,13 @@ exports[`BpkPageIndicator should support showNav attribute 1`] = ` diff --git a/packages/bpk-component-pagination/src/__snapshots__/BpkPaginationNudger-test.js.snap b/packages/bpk-component-pagination/src/__snapshots__/BpkPaginationNudger-test.js.snap index baceb25bcc..a791104743 100644 --- a/packages/bpk-component-pagination/src/__snapshots__/BpkPaginationNudger-test.js.snap +++ b/packages/bpk-component-pagination/src/__snapshots__/BpkPaginationNudger-test.js.snap @@ -9,12 +9,13 @@ exports[`BpkPaginationNudger should display backward nudger 1`] = ` @@ -59,12 +60,13 @@ exports[`BpkSectionListItem should render correctly with an "onClick" prop 1`] = diff --git a/packages/bpk-component-spinner/src/__snapshots__/BpkExtraLargeSpinner-test.js.snap b/packages/bpk-component-spinner/src/__snapshots__/BpkExtraLargeSpinner-test.js.snap index 865ee765a8..26096ef6a7 100644 --- a/packages/bpk-component-spinner/src/__snapshots__/BpkExtraLargeSpinner-test.js.snap +++ b/packages/bpk-component-spinner/src/__snapshots__/BpkExtraLargeSpinner-test.js.snap @@ -7,69 +7,70 @@ exports[`BpkExtraLargeSpinner should render correctly 1`] = ` > @@ -83,69 +84,70 @@ exports[`BpkExtraLargeSpinner should render correctly with a "className" attribu > @@ -159,69 +161,70 @@ exports[`BpkExtraLargeSpinner should render correctly with type as light 1`] = ` > @@ -235,69 +238,70 @@ exports[`BpkExtraLargeSpinner should render correctly with type as primary 1`] = > diff --git a/packages/bpk-component-spinner/src/__snapshots__/BpkLargeSpinner-test.js.snap b/packages/bpk-component-spinner/src/__snapshots__/BpkLargeSpinner-test.js.snap index 690596b6f7..0d8c6c7979 100644 --- a/packages/bpk-component-spinner/src/__snapshots__/BpkLargeSpinner-test.js.snap +++ b/packages/bpk-component-spinner/src/__snapshots__/BpkLargeSpinner-test.js.snap @@ -7,69 +7,70 @@ exports[`BpkLargeSpinner should render correctly 1`] = ` > @@ -83,69 +84,70 @@ exports[`BpkLargeSpinner should render correctly with a "alignToButton" attribut > @@ -159,69 +161,70 @@ exports[`BpkLargeSpinner should render correctly with a "className" attribute 1` > @@ -235,69 +238,70 @@ exports[`BpkLargeSpinner should render correctly with type as light 1`] = ` > @@ -311,69 +315,70 @@ exports[`BpkLargeSpinner should render correctly with type as primary 1`] = ` > diff --git a/packages/bpk-component-spinner/src/__snapshots__/BpkSpinner-test.js.snap b/packages/bpk-component-spinner/src/__snapshots__/BpkSpinner-test.js.snap index b01b97a4c2..8eb9d75054 100644 --- a/packages/bpk-component-spinner/src/__snapshots__/BpkSpinner-test.js.snap +++ b/packages/bpk-component-spinner/src/__snapshots__/BpkSpinner-test.js.snap @@ -7,56 +7,57 @@ exports[`BpkSpinner should render correctly 1`] = ` > @@ -70,56 +71,57 @@ exports[`BpkSpinner should render correctly with a "alignToButton" attribute 1`] > @@ -133,56 +135,57 @@ exports[`BpkSpinner should render correctly with a "className" attribute 1`] = ` > @@ -196,56 +199,57 @@ exports[`BpkSpinner should render correctly with type as light 1`] = ` > @@ -259,56 +263,57 @@ exports[`BpkSpinner should render correctly with type as primary 1`] = ` > diff --git a/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStar-test.js.snap b/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStar-test.js.snap index a2c99bf424..607a1044c1 100644 --- a/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStar-test.js.snap +++ b/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStar-test.js.snap @@ -16,12 +16,13 @@ exports[`BpkInteractiveStar should render correctly with a selected full star 1` > @@ -46,12 +47,13 @@ exports[`BpkInteractiveStar should render correctly with empty star 1`] = ` > @@ -76,12 +78,13 @@ exports[`BpkInteractiveStar should render correctly with full star 1`] = ` > diff --git a/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStarRating-test.js.snap b/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStarRating-test.js.snap index 2846683693..08f1045e5b 100644 --- a/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStarRating-test.js.snap +++ b/packages/bpk-component-star-rating/src/__snapshots__/BpkInteractiveStarRating-test.js.snap @@ -19,12 +19,13 @@ exports[`BpkInteractiveStarRating should render 4 stars based on hoverRating as > @@ -44,12 +45,13 @@ exports[`BpkInteractiveStarRating should render 4 stars based on hoverRating as > @@ -69,12 +71,13 @@ exports[`BpkInteractiveStarRating should render 4 stars based on hoverRating as > @@ -94,12 +97,13 @@ exports[`BpkInteractiveStarRating should render 4 stars based on hoverRating as > @@ -119,12 +123,13 @@ exports[`BpkInteractiveStarRating should render 4 stars based on hoverRating as > @@ -153,12 +158,13 @@ exports[`BpkInteractiveStarRating should render correctly if you give it more th > @@ -178,12 +184,13 @@ exports[`BpkInteractiveStarRating should render correctly if you give it more th > @@ -203,12 +210,13 @@ exports[`BpkInteractiveStarRating should render correctly if you give it more th > @@ -228,12 +236,13 @@ exports[`BpkInteractiveStarRating should render correctly if you give it more th > @@ -253,12 +262,13 @@ exports[`BpkInteractiveStarRating should render correctly if you give it more th > @@ -287,12 +297,13 @@ exports[`BpkInteractiveStarRating should render correctly with "large" attribute > @@ -312,12 +323,13 @@ exports[`BpkInteractiveStarRating should render correctly with "large" attribute > @@ -337,12 +349,13 @@ exports[`BpkInteractiveStarRating should render correctly with "large" attribute > @@ -362,12 +375,13 @@ exports[`BpkInteractiveStarRating should render correctly with "large" attribute > @@ -387,12 +401,13 @@ exports[`BpkInteractiveStarRating should render correctly with "large" attribute > @@ -421,12 +436,13 @@ exports[`BpkInteractiveStarRating should render correctly with "maxRating" attri > @@ -446,12 +462,13 @@ exports[`BpkInteractiveStarRating should render correctly with "maxRating" attri > @@ -471,12 +488,13 @@ exports[`BpkInteractiveStarRating should render correctly with "maxRating" attri > @@ -496,12 +514,13 @@ exports[`BpkInteractiveStarRating should render correctly with "maxRating" attri > @@ -521,12 +540,13 @@ exports[`BpkInteractiveStarRating should render correctly with "maxRating" attri > @@ -546,12 +566,13 @@ exports[`BpkInteractiveStarRating should render correctly with "maxRating" attri > @@ -571,12 +592,13 @@ exports[`BpkInteractiveStarRating should render correctly with "maxRating" attri > @@ -596,12 +618,13 @@ exports[`BpkInteractiveStarRating should render correctly with "maxRating" attri > @@ -630,12 +653,13 @@ exports[`BpkInteractiveStarRating should render correctly with 0 stars 1`] = ` > @@ -655,12 +679,13 @@ exports[`BpkInteractiveStarRating should render correctly with 0 stars 1`] = ` > @@ -680,12 +705,13 @@ exports[`BpkInteractiveStarRating should render correctly with 0 stars 1`] = ` > @@ -705,12 +731,13 @@ exports[`BpkInteractiveStarRating should render correctly with 0 stars 1`] = ` > @@ -730,12 +757,13 @@ exports[`BpkInteractiveStarRating should render correctly with 0 stars 1`] = ` > @@ -764,12 +792,13 @@ exports[`BpkInteractiveStarRating should render correctly with 3 stars 1`] = ` > @@ -789,12 +818,13 @@ exports[`BpkInteractiveStarRating should render correctly with 3 stars 1`] = ` > @@ -814,12 +844,13 @@ exports[`BpkInteractiveStarRating should render correctly with 3 stars 1`] = ` > @@ -839,12 +870,13 @@ exports[`BpkInteractiveStarRating should render correctly with 3 stars 1`] = ` > @@ -864,12 +896,13 @@ exports[`BpkInteractiveStarRating should render correctly with 3 stars 1`] = ` > @@ -898,12 +931,13 @@ exports[`BpkInteractiveStarRating should render correctly with 3.5 stars 1`] = ` > @@ -923,12 +957,13 @@ exports[`BpkInteractiveStarRating should render correctly with 3.5 stars 1`] = ` > @@ -948,12 +983,13 @@ exports[`BpkInteractiveStarRating should render correctly with 3.5 stars 1`] = ` > @@ -973,12 +1009,13 @@ exports[`BpkInteractiveStarRating should render correctly with 3.5 stars 1`] = ` > @@ -998,12 +1035,13 @@ exports[`BpkInteractiveStarRating should render correctly with 3.5 stars 1`] = ` > @@ -1032,12 +1070,13 @@ exports[`BpkInteractiveStarRating should render correctly with 5 stars 1`] = ` > @@ -1057,12 +1096,13 @@ exports[`BpkInteractiveStarRating should render correctly with 5 stars 1`] = ` > @@ -1082,12 +1122,13 @@ exports[`BpkInteractiveStarRating should render correctly with 5 stars 1`] = ` > @@ -1107,12 +1148,13 @@ exports[`BpkInteractiveStarRating should render correctly with 5 stars 1`] = ` > @@ -1132,12 +1174,13 @@ exports[`BpkInteractiveStarRating should render correctly with 5 stars 1`] = ` > diff --git a/packages/bpk-component-star-rating/src/__snapshots__/BpkStar-test.js.snap b/packages/bpk-component-star-rating/src/__snapshots__/BpkStar-test.js.snap index 26c8ff42d9..7980f30017 100644 --- a/packages/bpk-component-star-rating/src/__snapshots__/BpkStar-test.js.snap +++ b/packages/bpk-component-star-rating/src/__snapshots__/BpkStar-test.js.snap @@ -7,12 +7,13 @@ exports[`BpkStar should render correctly with a "className" prop 1`] = ` > @@ -26,12 +27,13 @@ exports[`BpkStar should render correctly with a large empty star 1`] = ` > @@ -45,12 +47,13 @@ exports[`BpkStar should render correctly with a large full star 1`] = ` > @@ -64,12 +67,13 @@ exports[`BpkStar should render correctly with a large half star 1`] = ` > @@ -83,12 +87,13 @@ exports[`BpkStar should render correctly with empty star 1`] = ` > @@ -102,12 +107,13 @@ exports[`BpkStar should render correctly with full star 1`] = ` > @@ -121,12 +127,13 @@ exports[`BpkStar should render correctly with half star 1`] = ` > diff --git a/packages/bpk-component-star-rating/src/__snapshots__/BpkStarRating-test.js.snap b/packages/bpk-component-star-rating/src/__snapshots__/BpkStarRating-test.js.snap index 6d0657e2b8..f725b9e677 100644 --- a/packages/bpk-component-star-rating/src/__snapshots__/BpkStarRating-test.js.snap +++ b/packages/bpk-component-star-rating/src/__snapshots__/BpkStarRating-test.js.snap @@ -12,12 +12,13 @@ exports[`BpkStarRating should render correctly if you give it more than the max > @@ -26,12 +27,13 @@ exports[`BpkStarRating should render correctly if you give it more than the max > @@ -40,12 +42,13 @@ exports[`BpkStarRating should render correctly if you give it more than the max > @@ -54,12 +57,13 @@ exports[`BpkStarRating should render correctly if you give it more than the max > @@ -68,12 +72,13 @@ exports[`BpkStarRating should render correctly if you give it more than the max > @@ -93,12 +98,13 @@ exports[`BpkStarRating should render correctly with "large" attribute 1`] = ` > @@ -107,12 +113,13 @@ exports[`BpkStarRating should render correctly with "large" attribute 1`] = ` > @@ -121,12 +128,13 @@ exports[`BpkStarRating should render correctly with "large" attribute 1`] = ` > @@ -135,12 +143,13 @@ exports[`BpkStarRating should render correctly with "large" attribute 1`] = ` > @@ -149,12 +158,13 @@ exports[`BpkStarRating should render correctly with "large" attribute 1`] = ` > @@ -174,12 +184,13 @@ exports[`BpkStarRating should render correctly with "maxRating" attribute 1`] = > @@ -188,12 +199,13 @@ exports[`BpkStarRating should render correctly with "maxRating" attribute 1`] = > @@ -202,12 +214,13 @@ exports[`BpkStarRating should render correctly with "maxRating" attribute 1`] = > @@ -216,12 +229,13 @@ exports[`BpkStarRating should render correctly with "maxRating" attribute 1`] = > @@ -230,12 +244,13 @@ exports[`BpkStarRating should render correctly with "maxRating" attribute 1`] = > @@ -244,12 +259,13 @@ exports[`BpkStarRating should render correctly with "maxRating" attribute 1`] = > @@ -258,12 +274,13 @@ exports[`BpkStarRating should render correctly with "maxRating" attribute 1`] = > @@ -272,12 +289,13 @@ exports[`BpkStarRating should render correctly with "maxRating" attribute 1`] = > @@ -297,12 +315,13 @@ exports[`BpkStarRating should render correctly with "rounding" attribute 1`] = ` > @@ -311,12 +330,13 @@ exports[`BpkStarRating should render correctly with "rounding" attribute 1`] = ` > @@ -325,12 +345,13 @@ exports[`BpkStarRating should render correctly with "rounding" attribute 1`] = ` > @@ -339,12 +360,13 @@ exports[`BpkStarRating should render correctly with "rounding" attribute 1`] = ` > @@ -353,12 +375,13 @@ exports[`BpkStarRating should render correctly with "rounding" attribute 1`] = ` > @@ -378,12 +401,13 @@ exports[`BpkStarRating should render correctly with 0 stars 1`] = ` > @@ -392,12 +416,13 @@ exports[`BpkStarRating should render correctly with 0 stars 1`] = ` > @@ -406,12 +431,13 @@ exports[`BpkStarRating should render correctly with 0 stars 1`] = ` > @@ -420,12 +446,13 @@ exports[`BpkStarRating should render correctly with 0 stars 1`] = ` > @@ -434,12 +461,13 @@ exports[`BpkStarRating should render correctly with 0 stars 1`] = ` > @@ -459,12 +487,13 @@ exports[`BpkStarRating should render correctly with 3 stars 1`] = ` > @@ -473,12 +502,13 @@ exports[`BpkStarRating should render correctly with 3 stars 1`] = ` > @@ -487,12 +517,13 @@ exports[`BpkStarRating should render correctly with 3 stars 1`] = ` > @@ -501,12 +532,13 @@ exports[`BpkStarRating should render correctly with 3 stars 1`] = ` > @@ -515,12 +547,13 @@ exports[`BpkStarRating should render correctly with 3 stars 1`] = ` > @@ -540,12 +573,13 @@ exports[`BpkStarRating should render correctly with 3.5 stars 1`] = ` > @@ -554,12 +588,13 @@ exports[`BpkStarRating should render correctly with 3.5 stars 1`] = ` > @@ -568,12 +603,13 @@ exports[`BpkStarRating should render correctly with 3.5 stars 1`] = ` > @@ -582,12 +618,13 @@ exports[`BpkStarRating should render correctly with 3.5 stars 1`] = ` > @@ -596,12 +633,13 @@ exports[`BpkStarRating should render correctly with 3.5 stars 1`] = ` > @@ -621,12 +659,13 @@ exports[`BpkStarRating should render correctly with 5 stars 1`] = ` > @@ -635,12 +674,13 @@ exports[`BpkStarRating should render correctly with 5 stars 1`] = ` > @@ -649,12 +689,13 @@ exports[`BpkStarRating should render correctly with 5 stars 1`] = ` > @@ -663,12 +704,13 @@ exports[`BpkStarRating should render correctly with 5 stars 1`] = ` > @@ -677,12 +719,13 @@ exports[`BpkStarRating should render correctly with 5 stars 1`] = ` > diff --git a/packages/bpk-component-star-rating/src/__snapshots__/withInteractiveStarRatingState-test.js.snap b/packages/bpk-component-star-rating/src/__snapshots__/withInteractiveStarRatingState-test.js.snap index 9a17a90eee..9be358c03e 100644 --- a/packages/bpk-component-star-rating/src/__snapshots__/withInteractiveStarRatingState-test.js.snap +++ b/packages/bpk-component-star-rating/src/__snapshots__/withInteractiveStarRatingState-test.js.snap @@ -19,12 +19,13 @@ exports[`withInteractiveStarRatingState should render correctly 1`] = ` > @@ -44,12 +45,13 @@ exports[`withInteractiveStarRatingState should render correctly 1`] = ` > @@ -69,12 +71,13 @@ exports[`withInteractiveStarRatingState should render correctly 1`] = ` > @@ -94,12 +97,13 @@ exports[`withInteractiveStarRatingState should render correctly 1`] = ` > @@ -119,12 +123,13 @@ exports[`withInteractiveStarRatingState should render correctly 1`] = ` > @@ -153,12 +158,13 @@ exports[`withInteractiveStarRatingState should render correctly when hovering ov > @@ -178,12 +184,13 @@ exports[`withInteractiveStarRatingState should render correctly when hovering ov > @@ -203,12 +210,13 @@ exports[`withInteractiveStarRatingState should render correctly when hovering ov > @@ -228,12 +236,13 @@ exports[`withInteractiveStarRatingState should render correctly when hovering ov > @@ -253,12 +262,13 @@ exports[`withInteractiveStarRatingState should render correctly when hovering ov > @@ -287,12 +297,13 @@ exports[`withInteractiveStarRatingState should render correctly when selecting 3 > @@ -312,12 +323,13 @@ exports[`withInteractiveStarRatingState should render correctly when selecting 3 > @@ -337,12 +349,13 @@ exports[`withInteractiveStarRatingState should render correctly when selecting 3 > @@ -362,12 +375,13 @@ exports[`withInteractiveStarRatingState should render correctly when selecting 3 > @@ -387,12 +401,13 @@ exports[`withInteractiveStarRatingState should render correctly when selecting 3 > @@ -421,12 +436,13 @@ exports[`withInteractiveStarRatingState should render correctly with "large" att > @@ -446,12 +462,13 @@ exports[`withInteractiveStarRatingState should render correctly with "large" att > @@ -471,12 +488,13 @@ exports[`withInteractiveStarRatingState should render correctly with "large" att > @@ -496,12 +514,13 @@ exports[`withInteractiveStarRatingState should render correctly with "large" att > @@ -521,12 +540,13 @@ exports[`withInteractiveStarRatingState should render correctly with "large" att > diff --git a/packages/bpk-component-swap-button/src/BpkSwapButton.tsx b/packages/bpk-component-swap-button/src/BpkSwapButton.tsx index d353c00f03..e15d0860e9 100644 --- a/packages/bpk-component-swap-button/src/BpkSwapButton.tsx +++ b/packages/bpk-component-swap-button/src/BpkSwapButton.tsx @@ -18,7 +18,6 @@ import { useState } from 'react'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import SwapVertical from '../../bpk-component-icon/sm/swap--vertical'; import { cssModules } from '../../bpk-react-utils'; diff --git a/packages/bpk-component-swap-button/src/__snapshots__/BpkSwapButton-test.tsx.snap b/packages/bpk-component-swap-button/src/__snapshots__/BpkSwapButton-test.tsx.snap index 5f52159f4f..9846df7e22 100644 --- a/packages/bpk-component-swap-button/src/__snapshots__/BpkSwapButton-test.tsx.snap +++ b/packages/bpk-component-swap-button/src/__snapshots__/BpkSwapButton-test.tsx.snap @@ -14,12 +14,13 @@ exports[`BpkSwapButton should render correctly 1`] = ` diff --git a/packages/bpk-component-tooltip/src/BpkTooltipPortal-test.tsx b/packages/bpk-component-tooltip/src/BpkTooltipPortal-test.tsx index f96bc7ac52..cf9f4bd056 100644 --- a/packages/bpk-component-tooltip/src/BpkTooltipPortal-test.tsx +++ b/packages/bpk-component-tooltip/src/BpkTooltipPortal-test.tsx @@ -18,7 +18,6 @@ import { render } from '@testing-library/react'; -// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { colorPanjin } from '@skyscanner/bpk-foundations-web/tokens/base.es6'; jest.mock('../../bpk-react-utils', () => { diff --git a/packages/package-lock.json b/packages/package-lock.json index fcb478c483..82f9c2f6ec 100644 --- a/packages/package-lock.json +++ b/packages/package-lock.json @@ -11,8 +11,8 @@ "dependencies": { "@popperjs/core": "^2.11.5", "@react-google-maps/api": "^2.12.0", - "@skyscanner/bpk-foundations-web": "^17.9.0", - "@skyscanner/bpk-svgs": "^19.1.0", + "@skyscanner/bpk-foundations-web": "^17.11.0", + "@skyscanner/bpk-svgs": "^19.3.0", "a11y-focus-scope": "^1.1.3", "a11y-focus-store": "^1.0.0", "d3-path": "^2.0.0", @@ -116,26 +116,29 @@ "integrity": "sha512-x9ibmsP0ZVqzyCo1Pitbw+4b6iEXRw/r1TCy3vOUR3eKrzWLnHYZMR325BkZW2r8fnuWE/V3Fp4QZOP9qYORCw==" }, "node_modules/@skyscanner/bpk-foundations-common": { - "version": "6.10.0", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/@skyscanner/bpk-foundations-common/-/bpk-foundations-common-6.10.0.tgz", - "integrity": "sha512-gBZWncO/UGUwtZsKLlR4cCpcU94lAt7EYIJhOKZauXY0hc5/N3kGhZejQdPY/Ymk/fxa+lFpxsaAOprdbvS9AA==", + "version": "6.11.0", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/@skyscanner/bpk-foundations-common/-/bpk-foundations-common-6.11.0.tgz", + "integrity": "sha512-mhLB1PzuivgCXj+3G7Z4VsBNR8eZpuVAlxCWVsKA/qfFHuRuPEf2Q8GGz3hEwDi81+sTtZNOWJVJgJ6rEAZO3A==", "dependencies": { "color": "^4.2.3" } }, "node_modules/@skyscanner/bpk-foundations-web": { - "version": "17.9.0", - "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/@skyscanner/bpk-foundations-web/-/bpk-foundations-web-17.9.0.tgz", - "integrity": "sha512-tDoc4aU+CMIE/SqedcpO2di2vlZL49GQdqkuJOIx7y5xfwl9U3mDGieFhR8i17kHSz0OKpzSYfD7Ojne/UK5/g==", + "version": "17.11.0", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/@skyscanner/bpk-foundations-web/-/bpk-foundations-web-17.11.0.tgz", + "integrity": "sha512-NE+CHZxDBN0ng1rfJprSnh0PuiK45Sb0b5EqWjAQyK79SdiQPRtyX+7W9WaW8EwO/Xy1FVToiUsny3tDOaRDug==", "dependencies": { - "@skyscanner/bpk-foundations-common": "^6.10.0", + "@skyscanner/bpk-foundations-common": "^6.11.0", "color": "^4.2.3" } }, "node_modules/@skyscanner/bpk-svgs": { - "version": "19.1.0", - "resolved": "https://registry.npmjs.org/@skyscanner/bpk-svgs/-/bpk-svgs-19.1.0.tgz", - "integrity": "sha512-pMOWP/fSveHQMDx3g85XGGbZmaqWG8i1hpEFOZUh10PdOVGjxvquCK1wrwuzGcQVFTK97fKws76Zvpsy3UAeew==", + "version": "19.3.0", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/@skyscanner/bpk-svgs/-/bpk-svgs-19.3.0.tgz", + "integrity": "sha512-9jMVunUBDl7N4HBfx34orzmFic4SDkrGKM/5hlxSttuEjz51xQfQ507XZt6IikQo78Yvge7rhNbuVb3HC0xRTg==", + "dependencies": { + "camelcase": "^8.0.0" + }, "engines": { "node": "^18.16.0", "npm": ">=9.5.1" @@ -160,6 +163,17 @@ "resolved": "https://registry.npmjs.org/a11y-focus-store/-/a11y-focus-store-1.0.0.tgz", "integrity": "sha512-N07kBzfvJuQrYFck3C+N7QFrzqaIZB+gVcm9apVGAjDHfaMkPjgex6EpRRz12mGps898Og5AYycH2xDdbbuaLg==" }, + "node_modules/camelcase": { + "version": "8.0.0", + "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/camelcase/-/camelcase-8.0.0.tgz", + "integrity": "sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==", + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/color": { "version": "4.2.3", "resolved": "https://artifactory.skyscannertools.net/artifactory/api/npm/npm/color/-/color-4.2.3.tgz", diff --git a/packages/package.json b/packages/package.json index c9b004d8f0..6dec91a228 100644 --- a/packages/package.json +++ b/packages/package.json @@ -24,8 +24,8 @@ "dependencies": { "@popperjs/core": "^2.11.5", "@react-google-maps/api": "^2.12.0", - "@skyscanner/bpk-foundations-web": "^17.9.0", - "@skyscanner/bpk-svgs": "^19.1.0", + "@skyscanner/bpk-foundations-web": "^17.11.0", + "@skyscanner/bpk-svgs": "^19.3.0", "a11y-focus-scope": "^1.1.3", "a11y-focus-store": "^1.0.0", "d3-path": "^2.0.0", From 7f31ec1fa75f91ec55c6db38a81e73266876cb27 Mon Sep 17 00:00:00 2001 From: Matthew Robertson Date: Tue, 30 Apr 2024 14:53:57 +0100 Subject: [PATCH 092/174] [LOOM-1284][BpkFlare] Fix class 2 CSS issues for BpkFlare (#3389) * fix class2 for BpkFlare * fix alignment issues * fix the rounded corners * update eslint comment * remove unnecessary style * Update packages/bpk-component-flare/src/BpkContentBubble.js Co-authored-by: mungodewar <89925955+mungodewar@users.noreply.github.com> * Update packages/bpk-component-flare/src/BpkContentBubble.js Co-authored-by: mungodewar <89925955+mungodewar@users.noreply.github.com> * lint --------- Co-authored-by: metalix2 Co-authored-by: mungodewar <89925955+mungodewar@users.noreply.github.com> --- .eslintrc | 2 + examples/bpk-component-flare/examples.js | 31 +++--- .../bpk-component-flare/examples.module.scss | 4 + examples/bpk-component-flare/stories.js | 10 +- .../src/__snapshots__/BpkDialog-test.tsx.snap | 62 ++++++----- .../src/BpkContentBubble.js | 37 +++++-- .../bpk-component-flare/src/BpkFlareBar.js | 29 +---- .../BpkContentBubble-test.js.snap | 104 ++++++++++-------- .../src/bpk-content-bubble.module.scss | 23 ++++ .../src/bpk-flare-bar.module.scss | 20 +--- 10 files changed, 181 insertions(+), 141 deletions(-) diff --git a/.eslintrc b/.eslintrc index c11b50fd30..cff698ad40 100644 --- a/.eslintrc +++ b/.eslintrc @@ -138,8 +138,10 @@ "Prop {{prop}} is forbidden. See https://github.com/Skyscanner/eslint-plugin-rules?tab=readme-ov-file#forbid-component-props", "allowedFor": [ "BpkSelectableChip", // allowed for prop that is part of the classnames applied to the BpkSelectableChip + "CornerRadius", // allowed for a prop that is passed down in the BpkContentBubble as partof BpkFlare to a generated element and necessary to continue supporting svgClassName "InnerContainer", // allowed for a prop that is passed down in the BpkMobileScrollContainer to a generated element "ListElements", // allowed for a prop that is passed down in BpkList to the conditional list elements + "Pointer", // allowed for a prop that is passed down in the BpkFlareBar to a generated element and necessary to continue supporting svgClassName "ScrimBpkModalInner", // allowed for a prop that is passed in BpkModal down to a scrim wrapped BpkModalInner component. "Slider" // allowed for a prop that is passed in BpkSlider down to the react-slider component. ] diff --git a/examples/bpk-component-flare/examples.js b/examples/bpk-component-flare/examples.js index ff7b3cc495..348e11ee9b 100644 --- a/examples/bpk-component-flare/examples.js +++ b/examples/bpk-component-flare/examples.js @@ -73,14 +73,6 @@ const FlareBarExample = () => ( /> ); -const FlareBarRoundedExample = () => ( - -); - const ContentBubbleFullWithImageExample = () => ( ( /> ); +const ContentBubbleRoundedExample = () => ( +
    + +
    +); + const ContentBubbleStandaloneExample = () => ( ( /> ); -const ContentBubblePointerHiddenExample = () => ( +const ContentBubblePointerHiddenRoundedExample = () => ( ( 'bpk-flare-stories__content-bubble--fixed-height', )} style={{ height: '45rem' }} - rounded={false} + rounded showPointer={false} content={contentShort} /> @@ -141,7 +146,7 @@ const ContentBubblePointerHiddenExample = () => ( const MixedExample = () => (
    - +
    @@ -149,11 +154,11 @@ const MixedExample = () => ( export { FlareBarExample, - FlareBarRoundedExample, ContentBubbleFullWithImageExample, ContentBubbleFullWithContentExample, + ContentBubbleRoundedExample, ContentBubbleStandaloneExample, ContentBubbleFixedHeightExample, - ContentBubblePointerHiddenExample, + ContentBubblePointerHiddenRoundedExample, MixedExample, }; diff --git a/examples/bpk-component-flare/examples.module.scss b/examples/bpk-component-flare/examples.module.scss index f422a5cff2..2987e419d8 100644 --- a/examples/bpk-component-flare/examples.module.scss +++ b/examples/bpk-component-flare/examples.module.scss @@ -21,6 +21,10 @@ .bpk-flare-stories { padding: tokens.bpk-spacing-xl(); + &__container { + background-color: tokens.$bpk-core-primary-day; + } + &__flare-bar { width: 100%; margin-bottom: 2rem; diff --git a/examples/bpk-component-flare/stories.js b/examples/bpk-component-flare/stories.js index e8a85298e7..e3c4a70026 100644 --- a/examples/bpk-component-flare/stories.js +++ b/examples/bpk-component-flare/stories.js @@ -22,12 +22,12 @@ import BpkFlareBar from '../../packages/bpk-component-flare/src/BpkFlareBar'; import { FlareBarExample, - FlareBarRoundedExample, ContentBubbleFullWithImageExample, ContentBubbleFullWithContentExample, + ContentBubbleRoundedExample, ContentBubbleStandaloneExample, ContentBubbleFixedHeightExample, - ContentBubblePointerHiddenExample, + ContentBubblePointerHiddenRoundedExample, MixedExample, } from './examples'; @@ -41,19 +41,19 @@ export default { export const BpkFlareBarDefault = FlareBarExample; -export const BpkFlareBarRounded = FlareBarRoundedExample; - export const BpkContentBubbleFullWidthWithBackgroundImage = ContentBubbleFullWithImageExample; export const BpkContentBubbleFullWidthWithContent = ContentBubbleFullWithContentExample; +export const BpkContentBubbleRounded = ContentBubbleRoundedExample; + export const BpkContentBubbleStandalone = ContentBubbleStandaloneExample; export const BpkContentBubbleFixedHeight = ContentBubbleFixedHeightExample; -export const BpkContentBubblePointerHidden = ContentBubblePointerHiddenExample; +export const BpkContentBubblePointerHiddenRounded = ContentBubblePointerHiddenRoundedExample; export const VisualTest = MixedExample; export const VisualTestWithZoom = VisualTest.bind({}); diff --git a/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap b/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap index d185827f80..d78bbc4d51 100644 --- a/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap +++ b/packages/bpk-component-dialog/src/__snapshots__/BpkDialog-test.tsx.snap @@ -277,20 +277,9 @@ exports[`BpkDialog should render with flare dialog 2`] = ` >
    -
    - - -
    +
    +
    + + + +
    +
    -
    - - -
    +
    +
    + + + +
    +
    { if (className) { wrapperClassNames.push(className); } + const leftCornerRadiusClassNames = [ + getClassName('bpk-content-bubble__rounded-corner'), + ]; + const rightCornerRadiusClassNames = [ + getClassName('bpk-content-bubble__rounded-corner'), + getClassName('bpk-content-bubble__rounded-corner--trailing'), + ]; + + if (flareProps?.svgClassName) { + leftCornerRadiusClassNames.push(flareProps.svgClassName); + rightCornerRadiusClassNames.push(flareProps.svgClassName); + } if (contentClassName) { contentClassNames.push(contentClassName); @@ -69,15 +82,23 @@ const BpkContentBubble = (props) => { return (
    -
    {content && content}
    +
    + {content} + {/* These rounded svgs are required as the container background extends into the flare meaning that when we "round" the container the rounded bottom corners are hidden by the flare. */} + {rounded && showPointer && ( + <> + + + + )} +
    {showPointer && ( - +
    + +
    )}
    diff --git a/packages/bpk-component-flare/src/BpkFlareBar.js b/packages/bpk-component-flare/src/BpkFlareBar.js index 92180ab961..1a3c1ceb13 100644 --- a/packages/bpk-component-flare/src/BpkFlareBar.js +++ b/packages/bpk-component-flare/src/BpkFlareBar.js @@ -20,7 +20,6 @@ import PropTypes from 'prop-types'; import { cssModules } from '../../bpk-react-utils'; -import CornerRadius from './__generated__/js/corner-radius'; import Pointer from './__generated__/js/pointer'; import STYLES from './bpk-flare-bar.module.scss'; @@ -36,38 +35,14 @@ const BpkFlareBar = (props) => { } const curveClassNames = [getClassName('bpk-flare-bar__curve')]; - const leftCornerRadiusClassNames = [ - getClassName('bpk-flare-bar__rounded-corner'), - ]; - const rightCornerRadiusClassNames = [ - getClassName('bpk-flare-bar__rounded-corner'), - getClassName('bpk-flare-bar__rounded-corner--trailing'), - ]; + if (svgClassName) { curveClassNames.push(svgClassName); - leftCornerRadiusClassNames.push(svgClassName); - rightCornerRadiusClassNames.push(svgClassName); } return (
    - - {rounded && ( - - )} - {rounded && ( - - )} +
    ); }; diff --git a/packages/bpk-component-flare/src/__snapshots__/BpkContentBubble-test.js.snap b/packages/bpk-component-flare/src/__snapshots__/BpkContentBubble-test.js.snap index 52e65bfb71..4293ce62b9 100644 --- a/packages/bpk-component-flare/src/__snapshots__/BpkContentBubble-test.js.snap +++ b/packages/bpk-component-flare/src/__snapshots__/BpkContentBubble-test.js.snap @@ -14,20 +14,8 @@ exports[`BpkContentBubble renders correctly with a custom className 1`] = `
    Test
    -
    -
    - - -
    +
    +
    + + + +
    +
    @@ -64,16 +68,20 @@ exports[`BpkContentBubble renders correctly with flareProps 1`] = `
    - - - + + + +
    @@ -94,20 +102,8 @@ exports[`BpkContentBubble renders correctly with required props 1`] = `
    Test
    - -
    - - -
    +
    +
    + + + +
    +
    @@ -144,16 +156,20 @@ exports[`BpkContentBubble renders correctly without pointer 1`] = `
    - - - + + + +
    diff --git a/packages/bpk-component-flare/src/bpk-content-bubble.module.scss b/packages/bpk-component-flare/src/bpk-content-bubble.module.scss index 194637a104..bbb5801598 100755 --- a/packages/bpk-component-flare/src/bpk-content-bubble.module.scss +++ b/packages/bpk-component-flare/src/bpk-content-bubble.module.scss @@ -16,6 +16,7 @@ * limitations under the License. */ +@use '../../unstable__bpk-mixins/breakpoints'; @use '../../unstable__bpk-mixins/tokens'; .bpk-content-bubble { @@ -44,6 +45,7 @@ } &__container { + position: relative; display: flex; height: 100%; flex-direction: column; @@ -59,4 +61,25 @@ align-items: center; flex: 1 1 auto; } + + &__rounded-corner { + position: absolute; + // stylelint-disable-next-line unit-disallowed-list + bottom: calc(tokens.$bpk-flare-height-desktop - 2px); + left: 0; + width: tokens.$bpk-flare-corner-radius; + height: tokens.$bpk-flare-corner-radius; + fill: tokens.$bpk-surface-default-day; + + @include breakpoints.bpk-breakpoint-mobile { + // stylelint-disable-next-line unit-disallowed-list + bottom: calc(tokens.$bpk-flare-height-mobile - 1px); + } + + &--trailing { + right: 0; + left: auto; + transform: rotate(270deg); + } + } } diff --git a/packages/bpk-component-flare/src/bpk-flare-bar.module.scss b/packages/bpk-component-flare/src/bpk-flare-bar.module.scss index c4364a9c0d..fef5245f73 100644 --- a/packages/bpk-component-flare/src/bpk-flare-bar.module.scss +++ b/packages/bpk-component-flare/src/bpk-flare-bar.module.scss @@ -28,7 +28,6 @@ // https://developer.mozilla.org/en-US/docs/Web/CSS/margin // By using `display: flex` we ensure that this container is the nearest block container display: flex; - min-width: 10rem; height: tokens.$bpk-flare-height-desktop; overflow: hidden; @@ -42,7 +41,8 @@ // stylelint-disable-next-line unit-disallowed-list bottom: -1px; width: 700rem; // required for correct behaviour in IE - height: tokens.$bpk-flare-height-desktop; + // stylelint-disable-next-line unit-disallowed-list + height: calc(tokens.$bpk-flare-height-desktop - 1px); margin-left: 50%; transform: translateX(-50%); fill: tokens.$bpk-surface-default-day; @@ -56,20 +56,4 @@ height: tokens.$bpk-flare-height-mobile; } } - - &__rounded-corner { - position: absolute; - // stylelint-disable-next-line unit-disallowed-list - bottom: calc(#{tokens.bpk-spacing-lg()} - 1px); - left: 0; - width: tokens.$bpk-flare-corner-radius; - height: tokens.$bpk-flare-corner-radius; - fill: tokens.$bpk-surface-default-day; - - &--trailing { - right: 0; - left: auto; - transform: rotate(-90deg); - } - } } From 18bf4b35899bd0729655cd329be6a8c22f047181 Mon Sep 17 00:00:00 2001 From: Matthew Robertson Date: Tue, 30 Apr 2024 15:10:28 +0100 Subject: [PATCH 093/174] [LOOM-1394][BpkCalendar] - Update BpkCalendarWeek and fix fill styling on icons (#3399) * Update BpkCalendarWeek and fix fill styling on icons * add in license for scss file * fix disabled logic * update snapshots * removed ts-expect-error --------- Co-authored-by: metalix2 --- examples/bpk-component-calendar/examples.js | 8 +- .../src/BpkCalendarGrid.module.scss | 46 - .../src/BpkCalendarGrid.tsx | 7 +- .../src/BpkCalendarNav.module.scss | 6 - .../src/BpkCalendarNav.tsx | 23 +- ...Week-test.tsx => BpkCalendarWeek-test.tsx} | 24 +- .../src/{Week.d.ts => BpkCalendarWeek.d.ts} | 4 +- .../src/BpkCalendarWeek.module.scss | 66 ++ .../src/{Week.tsx => BpkCalendarWeek.tsx} | 18 +- .../BpkCalendarContainer-test.tsx.snap | 582 ++++++------- .../BpkCalendarGrid-test.tsx.snap | 384 ++++----- .../BpkCalendarNav-test.tsx.snap | 6 + ...tsx.snap => BpkCalendarWeek-test.tsx.snap} | 18 +- .../BpkScrollableCalendar-test.tsx.snap | 576 ++++++------- .../BpkScrollableCalendarGrid-test.tsx.snap | 368 ++++---- ...pkScrollableCalendarGridList-test.tsx.snap | 784 +++++++++--------- 16 files changed, 1478 insertions(+), 1442 deletions(-) rename packages/bpk-component-calendar/src/{Week-test.tsx => BpkCalendarWeek-test.tsx} (92%) rename packages/bpk-component-calendar/src/{Week.d.ts => BpkCalendarWeek.d.ts} (94%) create mode 100644 packages/bpk-component-calendar/src/BpkCalendarWeek.module.scss rename packages/bpk-component-calendar/src/{Week.tsx => BpkCalendarWeek.tsx} (96%) rename packages/bpk-component-calendar/src/__snapshots__/{Week-test.tsx.snap => BpkCalendarWeek-test.tsx.snap} (52%) diff --git a/examples/bpk-component-calendar/examples.js b/examples/bpk-component-calendar/examples.js index fca164294b..da30eb94ec 100644 --- a/examples/bpk-component-calendar/examples.js +++ b/examples/bpk-component-calendar/examples.js @@ -24,7 +24,7 @@ import { BpkCalendarNav, BpkCalendarDate, } from '../../packages/bpk-component-calendar'; -import Week from '../../packages/bpk-component-calendar/src/Week'; +import BpkCalendarWeek from '../../packages/bpk-component-calendar/src/BpkCalendarWeek'; import { CALENDAR_SELECTION_TYPE } from '../../packages/bpk-component-calendar/src/custom-proptypes'; import BpkText from '../../packages/bpk-component-text'; import { action } from '../bpk-storybook-utils'; @@ -245,7 +245,7 @@ const CustomComposedCalendarExample = () => ( const WeekExample = () => { const weekProps = { - ...Week.defaultProps, + ...BpkCalendarWeek.defaultProps, DateComponent: DummyDateComponent, dateModifiers: {}, dates: [ @@ -274,8 +274,8 @@ const WeekExample = () => {

    - - + +
    diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss index 5e24e93dae..95af2cf8c2 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss +++ b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss @@ -31,50 +31,4 @@ &__caption { @include utils.bpk-visually-hidden; } - - &__date { - width: 100%; - text-align: center; - - &--start { - background-image: linear-gradient( - to right, - tokens.$bpk-surface-default-day 50%, - tokens.$bpk-surface-subtle-day 50% - ); - - @include utils.bpk-rtl { - background-image: linear-gradient( - to left, - tokens.$bpk-surface-default-day 50%, - tokens.$bpk-surface-subtle-day 50% - ); - } - } - - &--middle { - background-color: tokens.$bpk-surface-subtle-day; - } - - &--end { - background-image: linear-gradient( - to left, - tokens.$bpk-surface-default-day 50%, - tokens.$bpk-surface-subtle-day 50% - ); - - @include utils.bpk-rtl { - background-image: linear-gradient( - to right, - tokens.$bpk-surface-default-day 50%, - tokens.$bpk-surface-subtle-day 50% - ); - } - } - } - - &__week { - display: flex; - padding-top: tokens.bpk-spacing-lg(); - } } diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx b/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx index 237c3c2162..60808f2982 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarGrid.tsx @@ -22,7 +22,7 @@ import { Component } from 'react'; import { cssModules, isDeviceIos } from '../../bpk-react-utils'; import { addCalendarGridTransition } from './BpkCalendarGridTransition'; -import Week from './Week'; +import BpkCalendarWeek from './BpkCalendarWeek'; import { CALENDAR_SELECTION_TYPE } from './custom-proptypes'; import { addMonths, @@ -42,9 +42,6 @@ import STYLES from './BpkCalendarGrid.module.scss'; // This is because the calendar with transiction is expected to have a fixed width and whenever `bpk-calendar-grid-transition__grid` // class is applyed it should override the calendar style. -// NOTE that ./Week is also importing ./BpkCalendarGrid.module.scss so adding this after `./Week` would also do the job but -// for clarity we should leave it here. - const getClassName = cssModules(STYLES); type DefaultProps = { @@ -167,7 +164,7 @@ class BpkCalendarGrid extends Component {
    {calendarMonthWeeks.map((dates) => ( - - + {previousMonthLabel} @@ -183,6 +193,11 @@ const BpkCalendarNav = ({ // TODO: className to be removed // eslint-disable-next-line @skyscanner/rules/forbid-component-props className={getClassName('bpk-calendar-nav__icon')} + fill={ + disabled || !isWithinRange(addMonths(baseMonth, 1), { start: min, end: max }) + ? textColors.textDisabledDay + : 'currentcolor' + } /> {nextMonthLabel} diff --git a/packages/bpk-component-calendar/src/Week-test.tsx b/packages/bpk-component-calendar/src/BpkCalendarWeek-test.tsx similarity index 92% rename from packages/bpk-component-calendar/src/Week-test.tsx rename to packages/bpk-component-calendar/src/BpkCalendarWeek-test.tsx index a72e52f4e8..56ce74e004 100644 --- a/packages/bpk-component-calendar/src/Week-test.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarWeek-test.tsx @@ -22,9 +22,9 @@ import { startOfDay } from 'date-fns/startOfDay'; import { CALENDAR_SELECTION_TYPE, SELECTION_TYPES } from '..'; -import Week from './Week'; +import BpkCalendarWeek from './BpkCalendarWeek'; -import type { Props } from './Week'; +import type { Props } from './BpkCalendarWeek'; const mockDateComponent = jest.fn(); @@ -34,7 +34,7 @@ const DummyDateComponent = (props: any) => { }; const initialProps: Props = { - ...Week.defaultProps, + ...BpkCalendarWeek.defaultProps, DateComponent: DummyDateComponent, dateModifiers: {}, dates: [ @@ -55,19 +55,19 @@ const initialProps: Props = { weekStartsOn: 0, }; -describe('Week', () => { +describe('BpkCalendarWeek', () => { afterEach(() => { jest.clearAllMocks(); }); it('should render correctly', () => { - const { asFragment } = render(); + const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); it('should set "isOutside" prop correctly when "markOutsideDays" attribute equals to "true"', () => { - render(); + render(); expect(mockDateComponent).toHaveBeenCalledWith( expect.objectContaining({ @@ -79,7 +79,7 @@ describe('Week', () => { it('should set "isSelected" prop correctly when selectionConfiguration type is "range"', () => { render( - { it('should set "isSelected" prop correctly when selectionConfiguration type is "single"', () => { render( - { it('should not have any selected dates when selectionConfiguration has null date', () => { render( - { it('should set "selectionType" prop correctly when selectionConfiguration type is "single"', () => { render( - { it('should set "selectionType" prop correctly when selectionConfiguration type is "range" and has no "endDate"', () => { render( - { it('should set "selectionType" prop correctly when selectionConfiguration type is "range"', () => { render( - { +declare class BpkCalendarWeek extends Component { static defaultProps: DefaultProps; shouldComponentUpdate(nextProps: Props): boolean; render(): JSX.Element | null; } -export default Week; +export default BpkCalendarWeek; diff --git a/packages/bpk-component-calendar/src/BpkCalendarWeek.module.scss b/packages/bpk-component-calendar/src/BpkCalendarWeek.module.scss new file mode 100644 index 0000000000..f9db62d0a3 --- /dev/null +++ b/packages/bpk-component-calendar/src/BpkCalendarWeek.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. + */ + +@use '../../unstable__bpk-mixins/tokens'; +@use '../../unstable__bpk-mixins/utils'; + +.bpk-calendar-week { + display: flex; + padding-top: tokens.bpk-spacing-lg(); + + &__date { + width: 100%; + text-align: center; + + &--start { + background-image: linear-gradient( + to right, + tokens.$bpk-surface-default-day 50%, + tokens.$bpk-surface-subtle-day 50% + ); + + @include utils.bpk-rtl { + background-image: linear-gradient( + to left, + tokens.$bpk-surface-default-day 50%, + tokens.$bpk-surface-subtle-day 50% + ); + } + } + + &--middle { + background-color: tokens.$bpk-surface-subtle-day; + } + + &--end { + background-image: linear-gradient( + to left, + tokens.$bpk-surface-default-day 50%, + tokens.$bpk-surface-subtle-day 50% + ); + + @include utils.bpk-rtl { + background-image: linear-gradient( + to right, + tokens.$bpk-surface-default-day 50%, + tokens.$bpk-surface-subtle-day 50% + ); + } + } + } +} diff --git a/packages/bpk-component-calendar/src/Week.tsx b/packages/bpk-component-calendar/src/BpkCalendarWeek.tsx similarity index 96% rename from packages/bpk-component-calendar/src/Week.tsx rename to packages/bpk-component-calendar/src/BpkCalendarWeek.tsx index 4d1af8a65f..657e25cb5b 100644 --- a/packages/bpk-component-calendar/src/Week.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarWeek.tsx @@ -40,10 +40,8 @@ import type { SelectionConfigurationRange, } from './custom-proptypes'; -// TODO: Move this to `Week.scss` -// This should be using its own css file as `BpkCalendarGrid` is also importing `BpkCalendarGrid.module.scss` -// and the order of css imports can break the component. -import STYLES from './BpkCalendarGrid.module.scss'; + +import STYLES from './BpkCalendarWeek.module.scss'; const getClassName = cssModules(STYLES); @@ -263,9 +261,9 @@ type DefaultProps = { }; /* - Week - table row containing a week full of DateContainer components + BpkCalendarWeek - table row containing a week full of DateContainer components */ -class Week extends Component { +class BpkCalendarWeek extends Component { static defaultProps: DefaultProps = { dateProps: {}, focusedDate: null, @@ -393,7 +391,7 @@ class Week extends Component { } return ( -
    +
    {this.props.dates.map((date) => { const isBlocked = minDate && maxDate @@ -461,8 +459,8 @@ const DateContainer = ({ selectionType, }: DateContainerProps) => { const classNames = getClassName( - 'bpk-calendar-grid__date', - `bpk-calendar-grid__date--${selectionType}`, + 'bpk-calendar-week__date', + `bpk-calendar-week__date--${selectionType}`, className, ); @@ -473,4 +471,4 @@ const DateContainer = ({ ); }; -export default Week; +export default BpkCalendarWeek; diff --git a/packages/bpk-component-calendar/src/__snapshots__/BpkCalendarContainer-test.tsx.snap b/packages/bpk-component-calendar/src/__snapshots__/BpkCalendarContainer-test.tsx.snap index b534c9ac76..0300c15858 100644 --- a/packages/bpk-component-calendar/src/__snapshots__/BpkCalendarContainer-test.tsx.snap +++ b/packages/bpk-component-calendar/src/__snapshots__/BpkCalendarContainer-test.tsx.snap @@ -23,6 +23,7 @@ exports[`BpkCalendarContainer should focus the correct date when \`initiallyFocu
    ); diff --git a/examples/bpk-component-bottom-sheet/examples.tsx b/examples/bpk-component-bottom-sheet/examples.tsx index 94014bc27f..a86abcfa06 100644 --- a/examples/bpk-component-bottom-sheet/examples.tsx +++ b/examples/bpk-component-bottom-sheet/examples.tsx @@ -20,11 +20,14 @@ import { Component, Children } from 'react'; import type { ReactNode } from 'react'; import BpkBottomSheet from '../../packages/bpk-component-bottom-sheet'; -import BpkButton from '../../packages/bpk-component-button'; +import { BpkButtonV2 } from '../../packages/bpk-component-button'; import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import { action } from '../bpk-storybook-utils'; +import type { BpkBottomSheetProps } from '../../packages/bpk-component-bottom-sheet'; + import STYLES from './examples.module.scss'; const getClassName = cssModules(STYLES); @@ -91,19 +94,21 @@ const content = [ , ]; +type BottomSheetContainerProps = { + children: ReactNode, + isComponentOpen?: boolean, + id?: string, +} & Omit + class BottomSheetContainer extends Component< - { - children: ReactNode, - isComponentOpen?: boolean, - id?: string - }, +BottomSheetContainerProps, { isOpen: boolean, } > { - constructor() { - super(); + constructor(props: BottomSheetContainerProps) { + super(props); this.state = { isOpen: false, @@ -137,14 +142,15 @@ class BottomSheetContainer extends Component< return (
    - + Open bottom sheet - + {children} diff --git a/examples/bpk-component-card-button/stories.ts b/examples/bpk-component-card-button/stories.tsx similarity index 93% rename from examples/bpk-component-card-button/stories.ts rename to examples/bpk-component-card-button/stories.tsx index ed51364669..485a8e5e17 100644 --- a/examples/bpk-component-card-button/stories.ts +++ b/examples/bpk-component-card-button/stories.tsx @@ -15,7 +15,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import BpkSaveButton from '../../packages/bpk-component-card-button/src/BpkSaveButton'; import { @@ -46,7 +45,9 @@ export const SmallContained = SmallContainedExample; export const SmallOnDark = SmallOnDarkExample; export const SmallChecked = SmallCheckedExample; export const VisualTest = VisualTestExample; -export const VisualTestWithZoom = VisualTest.bind({}); -VisualTestWithZoom.args = { - zoomEnabled: true -}; +export const VisualTestWithZoom = { + render: VisualTest, + args: { + zoomEnabled: true + } +} diff --git a/examples/bpk-component-chip/examples.tsx b/examples/bpk-component-chip/examples.tsx index 4b8003caba..b4eb72e3dc 100644 --- a/examples/bpk-component-chip/examples.tsx +++ b/examples/bpk-component-chip/examples.tsx @@ -16,6 +16,7 @@ * limitations under the License. */ +import type { ReactNode} from 'react'; import { useState } from 'react'; import BpkSelectableChip, { @@ -69,7 +70,7 @@ const StatefulDropdownChip = (props: StatefulSelectableChipProps) => { }; -const StatefulIconChip = (props: StatefulSelectableChipProps) => { +const StatefulIconChip = (props: StatefulSelectableChipProps & {leadingAccessoryView: ReactNode}) => { const [selected, setSelected] = useState(props.selected); const toggleSelected = () => setSelected(!selected); @@ -116,12 +117,14 @@ const StatefulDismissibleChipsExample = (props: StatefulSelectableChipProps) => ))}
    + <> {updates.map((u) => ( <> {u}
    ))} +
    ); @@ -130,7 +133,7 @@ const StatefulDismissibleChipsExample = (props: StatefulSelectableChipProps) => const StatefulRadioGroupChipsExample = (props: StatefulSelectableChipProps) => { const [selectedIndex, setSelectedIndex] = useState(0); - const [chips, setChips] = useState(['Cheapest flights', 'Direct flights', 'Most popular']); + const [chips] = useState(['Cheapest flights', 'Direct flights', 'Most popular']); const [updates, setUpdates] = useState([]); @@ -173,19 +176,21 @@ const StatefulRadioGroupChipsExample = (props: StatefulSelectableChipProps) => { className={getClassName('bpk-banner-alert-examples__component')} visible > + <> {updates.map((update) => ( <> {update}
    ))} +
    ); }; -const StatefulSelectableChips = ({ ...rest }: {}) => ( +const StatefulSelectableChips = ({ ...rest }) => (
    Cheapest flights @@ -197,8 +202,8 @@ const StatefulSelectableChips = ({ ...rest }: {}) => (
    ); - -const StatefulIconChips = ({ ...rest }: {}) => ( +type ValueOf = T[keyof T]; +const StatefulIconChips = ({ ...rest }: {type: ValueOf, leadingAccessoryView: ReactNode}) => (
    @@ -207,7 +212,7 @@ const StatefulIconChips = ({ ...rest }: {}) => ( ); -const StatefulDropdownChips = ({ ...rest }: {}) => ( +const StatefulDropdownChips = ({ ...rest }) => (
    Car type @@ -225,7 +230,7 @@ const RadioGroupChipsExample = () => ( const AllSelectableChipsExample = () => (
    - {Object.keys(CHIP_TYPES).map((chipType) => ( + {(Object.keys(CHIP_TYPES) as Array).map((chipType) => ( <>
    {chipType} @@ -247,7 +252,7 @@ const AllSelectableChipsExample = () => ( const AllIconChipsExample = () => (
    - {Object.keys(CHIP_TYPES).map((chipType) => ( + {(Object.keys(CHIP_TYPES) as Array).map((chipType) => (
    {chipType} } /> @@ -258,7 +263,7 @@ const AllIconChipsExample = () => ( const AllDropdownChipsExample = () => (
    - {Object.keys(CHIP_TYPES).map((chipType) => ( + {(Object.keys(CHIP_TYPES) as Array).map((chipType) => (
    {chipType} @@ -269,7 +274,7 @@ const AllDropdownChipsExample = () => ( const AllDismissibleChipsExample = () => (
    - {Object.keys(CHIP_TYPES).map((chipType) => ( + {(Object.keys(CHIP_TYPES) as Array).map((chipType) => (
    {chipType} diff --git a/examples/bpk-component-chip/stories.tsx b/examples/bpk-component-chip/stories.tsx index fe157479dc..7026c96c1c 100644 --- a/examples/bpk-component-chip/stories.tsx +++ b/examples/bpk-component-chip/stories.tsx @@ -16,7 +16,6 @@ * limitations under the License. */ - import BpkDismissibleChip from '../../packages/bpk-component-chip/src/BpkDismissibleChip'; import BpkDropdownChip from '../../packages/bpk-component-chip/src/BpkDropdownChip'; import BpkIconChip from '../../packages/bpk-component-chip/src/BpkIconChip'; @@ -48,7 +47,9 @@ export const AllDropdownTypes = AllDropdownChipsExample; export const AllDismissibleTypes = AllDismissibleChipsExample; export const RadioGroup = RadioGroupChipsExample; export const VisualTest = AllTypesExample; -export const VisualTestWithZoom = VisualTest.bind({}); -VisualTestWithZoom.args = { - zoomEnabled: true -}; +export const VisualTestWithZoom = { + render: VisualTest, + args: { + zoomEnabled: true + } +} diff --git a/examples/bpk-component-content-cards/examples.tsx b/examples/bpk-component-content-cards/examples.tsx index 2ae055b487..51c3759cde 100644 --- a/examples/bpk-component-content-cards/examples.tsx +++ b/examples/bpk-component-content-cards/examples.tsx @@ -18,6 +18,7 @@ import type { ComponentProps } from 'react'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkContentCards from '../../packages/bpk-component-content-cards'; const contentCardProps: ComponentProps = { diff --git a/examples/bpk-component-content-cards/stories.ts b/examples/bpk-component-content-cards/stories.ts index 68a070b432..5ce2e9c023 100644 --- a/examples/bpk-component-content-cards/stories.ts +++ b/examples/bpk-component-content-cards/stories.ts @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. import BpkContentCards from '../../packages/bpk-component-content-cards/src/BpkContentCards'; import { diff --git a/examples/bpk-component-datatable/examples.tsx b/examples/bpk-component-datatable/examples.tsx index 592803229d..d10bb5a71c 100644 --- a/examples/bpk-component-datatable/examples.tsx +++ b/examples/bpk-component-datatable/examples.tsx @@ -16,13 +16,17 @@ * limitations under the License. */ -/* eslint-disable react/prop-types */ - import { BpkDataTable, } from '../../packages/bpk-component-datatable'; -const rows = [ +type Person = { + name: string; + description: string; + location: string; + numericValue: number; +} +const rows: Person[] = [ { name: 'Abikso', description: @@ -51,7 +55,15 @@ const rows = [ }, ]; -const complexRows = [ +type Employee = { + name: string; + description: string; + seat: { + office: string; + desk: number; + } +} +const complexRows: Employee[] = [ { name: 'Jose', description: 'Software Engineer', @@ -70,9 +82,9 @@ const complexRows = [ ]; // eslint-disable-next-line no-alert -const onRowClick = (row) => alert(JSON.stringify(row)); +const onRowClick = (row: {}) => alert(JSON.stringify(row)); -const sortFunc = (rowA, rowB) => { +const sortFunc = (rowA: Employee, rowB: Employee) => { const deskA = rowA.seat.desk; const deskB = rowB.seat.desk; @@ -82,9 +94,9 @@ const sortFunc = (rowA, rowB) => { return deskA > deskB ? 1 : -1; }; -const LabelComponent = ({ label }) =>
    This is a {label}
    ; +const LabelComponent = ({ label }: {label: string}) =>
    This is a {label}
    ; -const CellRenderer = ({ cellData, rowData }) => { +const CellRenderer = ({ cellData, rowData }: {cellData: Employee["seat"], rowData: Employee}) => { if (rowData.name === 'Jose') { return
    Remote
    ; } @@ -177,7 +189,7 @@ const DisabledSortExample = () => ( accessor: 'description', width: '6.25rem', flexGrow: 1, - disableSort, + disableSortBy: true, }, { label: 'Location', @@ -240,7 +252,7 @@ const HeaderRendererExample = () => ( label: 'Numeric value', accessor: 'numericValue', width: '6.25rem', - headerRenderer: LabelComponent, + Header: LabelComponent, } ]} /> ); diff --git a/examples/bpk-component-datatable/stories.ts b/examples/bpk-component-datatable/stories.tsx similarity index 93% rename from examples/bpk-component-datatable/stories.ts rename to examples/bpk-component-datatable/stories.tsx index 27feaa2ff1..e08f1f7448 100644 --- a/examples/bpk-component-datatable/stories.ts +++ b/examples/bpk-component-datatable/stories.tsx @@ -15,7 +15,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import BpkDataTable from '../../packages/bpk-component-datatable/src/BpkDataTable'; import { @@ -32,7 +31,7 @@ import { export default { title: 'bpk-component-datatable', component: BpkDataTable, -}; +} export const Autowidth = AutowidthExample; export const RowsNotHoverableOrClickable = NonClickNonHoverRowsExample; @@ -48,7 +47,8 @@ export const CustomHeaderData = HeaderRendererExample; export const WithColumnArray = WithColumnArrayExample; export const VisualTest = AutowidthExample; -export const VisualTestWithZoom = VisualTest.bind({}); -VisualTestWithZoom.args = { - zoomEnabled: true -}; \ No newline at end of file + +export const VisualTestWithZoom = { + render: VisualTest, + args: {zoomEnabled: true} +} \ No newline at end of file diff --git a/examples/bpk-component-floating-notification/examples.js b/examples/bpk-component-floating-notification/examples.tsx similarity index 80% rename from examples/bpk-component-floating-notification/examples.js rename to examples/bpk-component-floating-notification/examples.tsx index ffe33f1617..b015c3c95e 100644 --- a/examples/bpk-component-floating-notification/examples.js +++ b/examples/bpk-component-floating-notification/examples.tsx @@ -16,29 +16,30 @@ * limitations under the License. */ -import { cloneElement, useState, Node } from 'react'; +import type { ReactElement} from 'react'; +import { cloneElement, useState } from 'react'; -import BpkButton from '../../packages/bpk-component-button'; +import { BpkButtonV2 } from '../../packages/bpk-component-button'; import BpkFloatingNotification from '../../packages/bpk-component-floating-notification'; import BpkIconHeart from '../../packages/bpk-component-icon/sm/heart'; import BpkIconInformationCircle from '../../packages/bpk-component-icon/sm/information-circle'; type Props = { - children: Node, + children: ReactElement<{onExit: Function}, string>, }; -const AlertContainer = ({ children }: Props): Node => { +const AlertContainer = ({ children }: Props) => { const [showAlert, setShowAlert] = useState(false); return ( <> - { setShowAlert(true); }} > Trigger alert - + {showAlert && cloneElement(children, { onExit: () => setShowAlert(false) })} @@ -74,16 +75,15 @@ const CtaIconLongTextExample = () => ( ); const VisualTestExample = () => ( - - - + /> ); export { diff --git a/examples/bpk-component-floating-notification/stories.js b/examples/bpk-component-floating-notification/stories.tsx similarity index 92% rename from examples/bpk-component-floating-notification/stories.js rename to examples/bpk-component-floating-notification/stories.tsx index 6a1b119814..c9e41b58fb 100644 --- a/examples/bpk-component-floating-notification/stories.js +++ b/examples/bpk-component-floating-notification/stories.tsx @@ -39,7 +39,10 @@ export const WithCta = CtaExample; export const WithCtaIconAndLongText = CtaIconLongTextExample; export const VisualTest = VisualTestExample; -export const VisualTestWithZoom = VisualTest.bind({}); -VisualTestWithZoom.args = { - zoomEnabled: true + +export const VisualTestWithZoom = { + render: VisualTest, + args: { + zoomEnabled: true + } }; diff --git a/examples/bpk-component-modal-v2/examples.tsx b/examples/bpk-component-modal-v2/examples.tsx index bd518f01d1..c683087d5e 100644 --- a/examples/bpk-component-modal-v2/examples.tsx +++ b/examples/bpk-component-modal-v2/examples.tsx @@ -16,15 +16,15 @@ * limitations under the License. */ -import PropTypes from 'prop-types'; -import type { ReactNode } from 'react'; -import { Component, Children } from 'react'; +import { Children, useState } from 'react'; -import BpkButton from '../../packages/bpk-component-button'; +import {BpkButtonV2} from '../../packages/bpk-component-button'; import { BpkModalV2, MODAL_STYLING } from '../../packages/bpk-component-modal'; import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; +import type { Props as BpkModalProps } from '../../packages/bpk-component-modal/src/BpkModalV2/BpkModal'; + import STYLES from './examples.module.scss'; const getClassName = cssModules(STYLES); @@ -35,10 +35,6 @@ const Paragraph = withDefaultProps(BpkText, { className: getClassName('bpk-modal-paragraph'), }); -type Props = { - children: ReactNode; -}; - const content = [ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas sit amet @@ -95,49 +91,27 @@ const content = [ , ]; -class ModalContainer extends Component { - static propTypes = { - children: PropTypes.node.isRequired, - }; - - constructor() { - super(); - this.state = { - isOpen: false, - }; - } +const ModalContainer = (props: Omit) => { + const [isOpen, setOpen] = useState(false); - onOpen = () => { - this.setState({ - isOpen: true, - }); - }; - - onClose = () => { - this.setState({ - isOpen: false, - }); - }; - - render() { - return ( - `; @@ -61,23 +77,31 @@ exports[`BpkLoadingButton should render correctly with "large" and "destructive" class="bpk-button bpk-button--large bpk-button--destructive" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -85,27 +109,35 @@ exports[`BpkLoadingButton should render correctly with "large" and "destructive" exports[`BpkLoadingButton should render correctly with "large" and "disabled" attributes 1`] = `
    `; @@ -116,23 +148,31 @@ exports[`BpkLoadingButton should render correctly with "large" and "featured" at class="bpk-button bpk-button--large bpk-button--featured" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -140,30 +180,38 @@ exports[`BpkLoadingButton should render correctly with "large" and "featured" at exports[`BpkLoadingButton should render correctly with "large" and "iconOnly" attributes 1`] = `
    `; @@ -171,26 +219,34 @@ exports[`BpkLoadingButton should render correctly with "large" and "iconOnly" at exports[`BpkLoadingButton should render correctly with "large" and "link" attributes 1`] = `
    `; @@ -198,26 +254,34 @@ exports[`BpkLoadingButton should render correctly with "large" and "link" attrib exports[`BpkLoadingButton should render correctly with "large" and "linkOnDark" attributes 1`] = `
    `; @@ -225,103 +289,111 @@ exports[`BpkLoadingButton should render correctly with "large" and "linkOnDark" exports[`BpkLoadingButton should render correctly with "large" and "loading" attributes 1`] = `
    `; @@ -332,23 +404,31 @@ exports[`BpkLoadingButton should render correctly with "large" and "primaryOnDar class="bpk-button bpk-button--large bpk-button--primary-on-dark" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -359,23 +439,31 @@ exports[`BpkLoadingButton should render correctly with "large" and "primaryOnLig class="bpk-button bpk-button--large bpk-button--primary-on-light" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -386,23 +474,31 @@ exports[`BpkLoadingButton should render correctly with "large" and "secondary" a class="bpk-button bpk-button--large bpk-button--secondary" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -413,23 +509,31 @@ exports[`BpkLoadingButton should render correctly with "large" and "secondaryOnD class="bpk-button bpk-button--large bpk-button--secondary-on-dark" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -440,24 +544,32 @@ exports[`BpkLoadingButton should render correctly with a "destructive" attribute class="bpk-button bpk-button--destructive" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -465,28 +577,36 @@ exports[`BpkLoadingButton should render correctly with a "destructive" attribute exports[`BpkLoadingButton should render correctly with a "disabled" attribute 1`] = `
    `; @@ -497,24 +617,32 @@ exports[`BpkLoadingButton should render correctly with a "featured" attribute 1` class="bpk-button bpk-button--featured" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -522,27 +650,36 @@ exports[`BpkLoadingButton should render correctly with a "featured" attribute 1` exports[`BpkLoadingButton should render correctly with a "href" attribute 1`] = ` - My button  - - - +
    + My button  + + + +
    +
    `; @@ -550,25 +687,33 @@ exports[`BpkLoadingButton should render correctly with a "href" attribute 1`] = exports[`BpkLoadingButton should render correctly with a "icon" attribute 1`] = `
    `; @@ -576,26 +721,34 @@ exports[`BpkLoadingButton should render correctly with a "icon" attribute 1`] = exports[`BpkLoadingButton should render correctly with a "iconDisabled" attribute 1`] = `
    `; @@ -603,47 +756,55 @@ exports[`BpkLoadingButton should render correctly with a "iconDisabled" attribut exports[`BpkLoadingButton should render correctly with a "iconLoading" attribute 1`] = `
    `; @@ -651,31 +812,39 @@ exports[`BpkLoadingButton should render correctly with a "iconLoading" attribute exports[`BpkLoadingButton should render correctly with a "iconOnly" attribute 1`] = `
    `; @@ -686,24 +855,32 @@ exports[`BpkLoadingButton should render correctly with a "iconPosition=leading" class="bpk-button bpk-button--featured" type="button" > - - - -  My button +
    + + + +  My button +
    +
    `; @@ -711,26 +888,34 @@ exports[`BpkLoadingButton should render correctly with a "iconPosition=leading" exports[`BpkLoadingButton should render correctly with a "large" attribute 1`] = `
    `; @@ -741,24 +926,32 @@ exports[`BpkLoadingButton should render correctly with a "link" attribute 1`] = class="bpk-button bpk-button--link" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -769,24 +962,32 @@ exports[`BpkLoadingButton should render correctly with a "linkOnDark" attribute class="bpk-button bpk-button--link-on-dark" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -794,91 +995,99 @@ exports[`BpkLoadingButton should render correctly with a "linkOnDark" attribute exports[`BpkLoadingButton should render correctly with a "loading" attribute 1`] = `
    `; @@ -889,24 +1098,32 @@ exports[`BpkLoadingButton should render correctly with a "primaryOnDark" attribu class="bpk-button bpk-button--primary-on-dark" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -917,24 +1134,32 @@ exports[`BpkLoadingButton should render correctly with a "primaryOnLight" attrib class="bpk-button bpk-button--primary-on-light" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -945,24 +1170,32 @@ exports[`BpkLoadingButton should render correctly with a "secondary" attribute 1 class="bpk-button bpk-button--secondary" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -973,24 +1206,32 @@ exports[`BpkLoadingButton should render correctly with a "secondaryOnDark" attri class="bpk-button bpk-button--secondary-on-dark" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; @@ -1001,23 +1242,31 @@ exports[`BpkLoadingButton should respect the class names entered as a string 1`] class="bpk-button bpk-button--large bpk-button--secondary custom-class-1 custom-class-2" type="button" > - My button  - - - +
    + My button  + + + +
    +
    `; From 37891f23b441ce9accb27cf721e7b4bd681364ec Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 6 May 2024 11:56:06 +0100 Subject: [PATCH 110/174] Bump date-fns from 3.3.1 to 3.6.0 (#3305) Bumps [date-fns](https://github.com/date-fns/date-fns) from 3.3.1 to 3.6.0. - [Release notes](https://github.com/date-fns/date-fns/releases) - [Changelog](https://github.com/date-fns/date-fns/blob/main/CHANGELOG.md) - [Commits](https://github.com/date-fns/date-fns/compare/v3.3.1...v3.6.0) --- updated-dependencies: - dependency-name: date-fns dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4aab2e597f..f0a884a47d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,7 +53,7 @@ "css-loader": "^6.10.0", "d3-scale": "^4.0.2", "danger": "^11.2.0", - "date-fns": "^3.3.1", + "date-fns": "^3.6.0", "eslint_d": "^13.0.0", "glob": "^10.3.12", "gulp": "^5.0.0", @@ -13116,9 +13116,9 @@ } }, "node_modules/date-fns": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.3.1.tgz", - "integrity": "sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", "dev": true, "funding": { "type": "github", diff --git a/package.json b/package.json index ef63ccaacd..190e020b1e 100644 --- a/package.json +++ b/package.json @@ -152,7 +152,7 @@ "css-loader": "^6.10.0", "d3-scale": "^4.0.2", "danger": "^11.2.0", - "date-fns": "^3.3.1", + "date-fns": "^3.6.0", "eslint_d": "^13.0.0", "glob": "^10.3.12", "gulp": "^5.0.0", From fec7434e6dc5217c40c13409d73a42a576af639d Mon Sep 17 00:00:00 2001 From: Matthew Robertson Date: Mon, 6 May 2024 12:23:37 +0100 Subject: [PATCH 111/174] fix the mixins vars (#3424) Co-authored-by: metalix2 --- packages/bpk-mixins/_forms.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/bpk-mixins/_forms.scss b/packages/bpk-mixins/_forms.scss index 3fbaccfa5d..1e4cde07e3 100644 --- a/packages/bpk-mixins/_forms.scss +++ b/packages/bpk-mixins/_forms.scss @@ -190,7 +190,7 @@ padding: 0; border: 0; background-color: transparent; - color: tokens.$bpk-text-secondary-day; + color: $bpk-text-secondary-day; cursor: pointer; appearance: none; // hidden by default @@ -200,11 +200,11 @@ } @include utils.bpk-hover { - color: tokens.$bpk-text-primary-day; + color: $bpk-text-primary-day; } &:active { - color: tokens.$bpk-text-primary-day; + color: $bpk-text-primary-day; } &--large { From d2bf07f716b9507d73a989d99f05de4f2293c2a3 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 6 May 2024 13:01:01 +0100 Subject: [PATCH 112/174] Bump core-js from 3.35.1 to 3.37.0 (#3379) Bumps [core-js](https://github.com/zloirock/core-js/tree/HEAD/packages/core-js) from 3.35.1 to 3.37.0. - [Release notes](https://github.com/zloirock/core-js/releases) - [Changelog](https://github.com/zloirock/core-js/blob/master/CHANGELOG.md) - [Commits](https://github.com/zloirock/core-js/commits/v3.37.0/packages/core-js) --- updated-dependencies: - dependency-name: core-js dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index f0a884a47d..e37d32621b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,7 +49,7 @@ "babel-plugin-react-docgen": "^4.2.1", "babel-plugin-require-context-hook": "^1.0.0", "chokidar": "^3.6.0", - "core-js": "^3.35.1", + "core-js": "^3.37.0", "css-loader": "^6.10.0", "d3-scale": "^4.0.2", "danger": "^11.2.0", @@ -12463,9 +12463,9 @@ } }, "node_modules/core-js": { - "version": "3.35.1", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.35.1.tgz", - "integrity": "sha512-IgdsbxNyMskrTFxa9lWHyMwAJU5gXOPP+1yO+K59d50VLVAIDAbs7gIv705KzALModfK3ZrSZTPNpC0PQgIZuw==", + "version": "3.37.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.0.tgz", + "integrity": "sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug==", "dev": true, "hasInstallScript": true, "funding": { diff --git a/package.json b/package.json index 190e020b1e..b9303cbf1f 100644 --- a/package.json +++ b/package.json @@ -148,7 +148,7 @@ "babel-plugin-react-docgen": "^4.2.1", "babel-plugin-require-context-hook": "^1.0.0", "chokidar": "^3.6.0", - "core-js": "^3.35.1", + "core-js": "^3.37.0", "css-loader": "^6.10.0", "d3-scale": "^4.0.2", "danger": "^11.2.0", From a23b14c743dd8f2a5bfff0d5550208c63627d659 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 6 May 2024 13:07:42 +0100 Subject: [PATCH 113/174] Bump mini-css-extract-plugin from 2.8.1 to 2.9.0 (#3378) Bumps [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) from 2.8.1 to 2.9.0. - [Release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases) - [Changelog](https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.8.1...v2.9.0) --- updated-dependencies: - dependency-name: mini-css-extract-plugin dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index e37d32621b..4661855e2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -65,7 +65,7 @@ "jest-environment-jsdom": "^29.2.2", "lint-staged": "^15.2.2", "lodash": "^4.17.20", - "mini-css-extract-plugin": "^2.8.1", + "mini-css-extract-plugin": "^2.9.0", "npm-run-all": "^4.1.5", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^8.1.1", @@ -22612,9 +22612,9 @@ } }, "node_modules/mini-css-extract-plugin": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.8.1.tgz", - "integrity": "sha512-/1HDlyFRxWIZPI1ZpgqlZ8jMw/1Dp/dl3P0L1jtZ+zVcHqwPhGwaJwKL00WVgfnBy6PWCde9W65or7IIETImuA==", + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.0.tgz", + "integrity": "sha512-Zs1YsZVfemekSZG+44vBsYTLQORkPMwnlv+aehcxK/NLKC+EGhDB39/YePYYqx/sTk6NnYpuqikhSn7+JIevTA==", "dev": true, "dependencies": { "schema-utils": "^4.0.0", diff --git a/package.json b/package.json index b9303cbf1f..9aefd2237e 100644 --- a/package.json +++ b/package.json @@ -164,7 +164,7 @@ "jest-environment-jsdom": "^29.2.2", "lint-staged": "^15.2.2", "lodash": "^4.17.20", - "mini-css-extract-plugin": "^2.8.1", + "mini-css-extract-plugin": "^2.9.0", "npm-run-all": "^4.1.5", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^8.1.1", From 06f6f5115d96ffad1304299fb5a5debd3c1b4715 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 6 May 2024 13:14:04 +0100 Subject: [PATCH 114/174] Bump style-loader from 3.3.4 to 4.0.0 (#3357) Bumps [style-loader](https://github.com/webpack-contrib/style-loader) from 3.3.4 to 4.0.0. - [Release notes](https://github.com/webpack-contrib/style-loader/releases) - [Changelog](https://github.com/webpack-contrib/style-loader/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack-contrib/style-loader/compare/v3.3.4...v4.0.0) --- updated-dependencies: - dependency-name: style-loader dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 28 ++++++++++++++++++++++------ package.json | 2 +- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4661855e2c..0f12289321 100644 --- a/package-lock.json +++ b/package-lock.json @@ -79,7 +79,7 @@ "sass-migrator": "^1.8.0", "sassdoc": "^2.7.0", "storybook": "^7.6.17", - "style-loader": "^3.3.4", + "style-loader": "^4.0.0", "ts-migrate": "^0.1.35", "typescript": "^5.4.3", "webpack": "^5.91.0", @@ -5686,6 +5686,22 @@ "node": ">=10" } }, + "node_modules/@storybook/builder-webpack5/node_modules/style-loader": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz", + "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==", + "dev": true, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, "node_modules/@storybook/builder-webpack5/node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -28461,19 +28477,19 @@ } }, "node_modules/style-loader": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz", - "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz", + "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==", "dev": true, "engines": { - "node": ">= 12.13.0" + "node": ">= 18.12.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/webpack" }, "peerDependencies": { - "webpack": "^5.0.0" + "webpack": "^5.27.0" } }, "node_modules/style-search": { diff --git a/package.json b/package.json index 9aefd2237e..ae789d6046 100644 --- a/package.json +++ b/package.json @@ -178,7 +178,7 @@ "sass-migrator": "^1.8.0", "sassdoc": "^2.7.0", "storybook": "^7.6.17", - "style-loader": "^3.3.4", + "style-loader": "^4.0.0", "ts-migrate": "^0.1.35", "typescript": "^5.4.3", "webpack": "^5.91.0", From 31a57788ed6ea9adad6984548861e64ade06f4ba Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 6 May 2024 13:51:53 +0100 Subject: [PATCH 115/174] Bump sass-migrator from 1.8.0 to 2.0.3 (#3293) Bumps [sass-migrator](https://github.com/sass/migrator) from 1.8.0 to 2.0.3. - [Release notes](https://github.com/sass/migrator/releases) - [Changelog](https://github.com/sass/migrator/blob/main/CHANGELOG.md) - [Commits](https://github.com/sass/migrator/compare/1.8.0...2.0.3) --- updated-dependencies: - dependency-name: sass-migrator dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ana Belciug <88667174+anambl@users.noreply.github.com> --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0f12289321..c2d1389ecb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -76,7 +76,7 @@ "react-svg-loader": "^3.0.1", "sass-embedded": "^1.71.1", "sass-loader": "^14.1.1", - "sass-migrator": "^1.8.0", + "sass-migrator": "^2.0.3", "sassdoc": "^2.7.0", "storybook": "^7.6.17", "style-loader": "^4.0.0", @@ -27186,9 +27186,9 @@ } }, "node_modules/sass-migrator": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/sass-migrator/-/sass-migrator-1.8.0.tgz", - "integrity": "sha512-U3KOlDU71o6vQB2xFDPL9AQLTl7waonCcih+1/QQX3Hy6gMlAL0+2RE8J+FBozogba5q248nIHeUbLGBCbQd0g==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/sass-migrator/-/sass-migrator-2.0.3.tgz", + "integrity": "sha512-WaLQorgSz06q7/M+QNqkyn4d6m3NBQXFx93Ukrw88k108mIKOjBgSvyTerMpZ+5ogOJwrK82rxLBzA1J5azmJQ==", "dev": true, "bin": { "sass-migrator": "sass-migrator.js" diff --git a/package.json b/package.json index ae789d6046..95e96795fa 100644 --- a/package.json +++ b/package.json @@ -175,7 +175,7 @@ "react-svg-loader": "^3.0.1", "sass-embedded": "^1.71.1", "sass-loader": "^14.1.1", - "sass-migrator": "^1.8.0", + "sass-migrator": "^2.0.3", "sassdoc": "^2.7.0", "storybook": "^7.6.17", "style-loader": "^4.0.0", From 4c4618d4762a949ecd223c5b3203c8d0568a7fa6 Mon Sep 17 00:00:00 2001 From: Ollie Curtis <8831547+olliecurtis@users.noreply.github.com> Date: Mon, 6 May 2024 15:34:19 +0100 Subject: [PATCH 116/174] Fix rendering of Map Marker v2 (#3425) --- examples/bpk-component-map/examples.js | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/bpk-component-map/examples.js b/examples/bpk-component-map/examples.js index 0575410c4f..61f122d4b1 100644 --- a/examples/bpk-component-map/examples.js +++ b/examples/bpk-component-map/examples.js @@ -210,7 +210,6 @@ class StatefulBpkPriceMarkerV2 extends Component< center={{ latitude: 55.944665, longitude: -3.1964903 }} > {venues - .filter((venue) => venue.disabled === false) .map((venue) => ( Date: Mon, 6 May 2024 15:47:40 +0100 Subject: [PATCH 117/174] Bump sass-loader from 14.1.1 to 14.2.1 (#3422) Bumps [sass-loader](https://github.com/webpack-contrib/sass-loader) from 14.1.1 to 14.2.1. - [Release notes](https://github.com/webpack-contrib/sass-loader/releases) - [Changelog](https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack-contrib/sass-loader/compare/v14.1.1...v14.2.1) --- updated-dependencies: - dependency-name: sass-loader dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index c2d1389ecb..8897ca83f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -75,7 +75,7 @@ "react-dom": "17.0.2", "react-svg-loader": "^3.0.1", "sass-embedded": "^1.71.1", - "sass-loader": "^14.1.1", + "sass-loader": "^14.2.1", "sass-migrator": "^2.0.3", "sassdoc": "^2.7.0", "storybook": "^7.6.17", @@ -27146,9 +27146,9 @@ } }, "node_modules/sass-loader": { - "version": "14.1.1", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.1.1.tgz", - "integrity": "sha512-QX8AasDg75monlybel38BZ49JP5Z+uSKfKwF2rO7S74BywaRmGQMUBw9dtkS+ekyM/QnP+NOrRYq8ABMZ9G8jw==", + "version": "14.2.1", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.2.1.tgz", + "integrity": "sha512-G0VcnMYU18a4N7VoNDegg2OuMjYtxnqzQWARVWCIVSZwJeiL9kg8QMsuIZOplsJgTzZLF6jGxI3AClj8I9nRdQ==", "dev": true, "dependencies": { "neo-async": "^2.6.2" diff --git a/package.json b/package.json index 95e96795fa..cab6eba441 100644 --- a/package.json +++ b/package.json @@ -174,7 +174,7 @@ "react-dom": "17.0.2", "react-svg-loader": "^3.0.1", "sass-embedded": "^1.71.1", - "sass-loader": "^14.1.1", + "sass-loader": "^14.2.1", "sass-migrator": "^2.0.3", "sassdoc": "^2.7.0", "storybook": "^7.6.17", From 255efae787604c51ab618f118d2274cca8e3bbd1 Mon Sep 17 00:00:00 2001 From: James Ronald <7976511+jronald01@users.noreply.github.com> Date: Tue, 7 May 2024 10:04:35 +0100 Subject: [PATCH 118/174] LOOM-1309 BpkPrice Class 2 Overrides (#3418) * LOOM-1309 BpkPrice Class 2 Overrides * Use display:contents * Use display:flex * Use display:contents * Update snapshots and tidy-up * Missing display:flex for leading--right needed for height to be 16px, the same as leading --- packages/bpk-component-price/src/BpkPrice.js | 65 ++-- .../src/BpkPrice.module.scss | 5 + .../src/__snapshots__/BpkPrice-test.js.snap | 312 +++++++++++++----- 3 files changed, 268 insertions(+), 114 deletions(-) diff --git a/packages/bpk-component-price/src/BpkPrice.js b/packages/bpk-component-price/src/BpkPrice.js index 420ed8a32f..2a632145f3 100644 --- a/packages/bpk-component-price/src/BpkPrice.js +++ b/packages/bpk-component-price/src/BpkPrice.js @@ -77,26 +77,24 @@ const BpkPrice = (props: Props) => { )} > {previousPrice && ( - - {previousPrice} - + + + {previousPrice} + + )} {previousPrice && leadingText && ( - - 𐤟 - + + + 𐤟 + + )} {leadingText && ( @@ -111,28 +109,23 @@ const BpkPrice = (props: Props) => {
    - - {price} - - {trailingText && ( + - {trailingText} + {price} + + {trailingText && ( + + + {trailingText} + + )}
    diff --git a/packages/bpk-component-price/src/BpkPrice.module.scss b/packages/bpk-component-price/src/BpkPrice.module.scss index da7c24c5cd..d86fca36da 100644 --- a/packages/bpk-component-price/src/BpkPrice.module.scss +++ b/packages/bpk-component-price/src/BpkPrice.module.scss @@ -37,15 +37,18 @@ flex-direction: row; &--right { + display: flex; flex-direction: row-reverse; } } &__previous-price { + display: flex; text-decoration-line: line-through; } &__separator { + display: flex; margin: 0 tokens.bpk-spacing-sm(); } @@ -55,6 +58,7 @@ } &__price { + display: contents; color: tokens.$bpk-text-primary-day; word-break: break-all; } @@ -70,6 +74,7 @@ } &__trailing { + display: contents; white-space: nowrap; } } diff --git a/packages/bpk-component-price/src/__snapshots__/BpkPrice-test.js.snap b/packages/bpk-component-price/src/__snapshots__/BpkPrice-test.js.snap index 0c89ada393..8de54e4d72 100644 --- a/packages/bpk-component-price/src/__snapshots__/BpkPrice-test.js.snap +++ b/packages/bpk-component-price/src/__snapshots__/BpkPrice-test.js.snap @@ -12,9 +12,13 @@ exports[`large left view should render correctly 1`] = ` class="" > - £1,830 + + £1,830 +
    @@ -33,9 +37,13 @@ exports[`large left view should support custom class names 1`] = ` class="" > - £1,830 + + £1,830 +
    @@ -54,9 +62,13 @@ exports[`large left view should support custom leading class names 1`] = ` class="" > - £1,830 + + £1,830 +
    @@ -81,9 +93,13 @@ exports[`large left view should support leading text attribute 1`] = ` class="" > - £1,830 + + £1,830 +
    @@ -99,23 +115,35 @@ exports[`large left view should support previous price attribute 1`] = ` class="bpk-price__leading" > - £2,000 + + £2,000 +
    - £1,830 + + £1,830 + - per day + + per day +
    @@ -131,14 +159,22 @@ exports[`large left view should support previous price with leading text attribu class="bpk-price__leading" > - £2,000 + + £2,000 + - 𐤟 + + 𐤟 + - £1,830 + + £1,830 + - per day + + per day +
    @@ -176,14 +220,22 @@ exports[`large left view should support trailing text attribute 1`] = ` class="" > - £1,830 + + £1,830 + - per day + + per day +
    @@ -202,9 +254,13 @@ exports[`small left view should render correctly 1`] = ` class="" > - £1,830 + + £1,830 +
    @@ -223,9 +279,13 @@ exports[`small left view should support custom class names 1`] = ` class="" > - £1,830 + + £1,830 +
    @@ -244,9 +304,13 @@ exports[`small left view should support custom leading class names 1`] = ` class="" > - £1,830 + + £1,830 +
    @@ -271,9 +335,13 @@ exports[`small left view should support leading text attribute 1`] = ` class="" > - £1,830 + + £1,830 +
    @@ -289,23 +357,35 @@ exports[`small left view should support previous price attribute 1`] = ` class="bpk-price__leading" > - £2,000 + + £2,000 +
    - £1,830 + + £1,830 + - per day + + per day +
    @@ -321,14 +401,22 @@ exports[`small left view should support previous price with leading text attribu class="bpk-price__leading" > - £2,000 + + £2,000 + - 𐤟 + + 𐤟 + - £1,830 + + £1,830 + - per day + + per day +
    @@ -366,14 +462,22 @@ exports[`small left view should support trailing text attribute 1`] = ` class="" > - £1,830 + + £1,830 + - per day + + per day +
    @@ -392,9 +496,13 @@ exports[`small right view should render correctly 1`] = ` class="bpk-price__column-container" > - £1,830 + + £1,830 +
    @@ -413,9 +521,13 @@ exports[`small right view should support custom class names 1`] = ` class="bpk-price__column-container" > - £1,830 + + £1,830 +
    @@ -434,9 +546,13 @@ exports[`small right view should support custom leading class names 1`] = ` class="bpk-price__column-container" > - £1,830 + + £1,830 +
    @@ -461,9 +577,13 @@ exports[`small right view should support leading text attribute 1`] = ` class="bpk-price__column-container" > - £1,830 + + £1,830 +
    @@ -479,23 +599,35 @@ exports[`small right view should support previous price attribute 1`] = ` class="bpk-price__leading bpk-price__leading--right" > - £2,000 + + £2,000 +
    - £1,830 + + £1,830 + - per day + + per day +
    @@ -511,14 +643,22 @@ exports[`small right view should support previous price with leading text attrib class="bpk-price__leading bpk-price__leading--right" > - £2,000 + + £2,000 + - 𐤟 + + 𐤟 + - £1,830 + + £1,830 + - per day + + per day +
    @@ -556,14 +704,22 @@ exports[`small right view should support trailing text attribute 1`] = ` class="bpk-price__column-container" > - £1,830 + + £1,830 + - per day + + per day +
    From c044b1d82c72d2c4eb97e761ae718d316635dfbe Mon Sep 17 00:00:00 2001 From: Matthew Robertson Date: Tue, 7 May 2024 13:26:57 +0100 Subject: [PATCH 119/174] [NoJIra][BpkModal] Update modal stories to tsx and add visual tests (#3420) * update modal stories to tsx and add visual tests * always open modal * try with multi modals * remove unused imports * remove flow comments * load both stories? * timeouts for modals * quicker loading times * reduce to fewer to give chance to load * Storybook comment about subpath --------- Co-authored-by: metalix2 --- .../{examples.js => examples.tsx} | 160 +++++++----------- .../{stories.js => stories.tsx} | 54 +++++- 2 files changed, 116 insertions(+), 98 deletions(-) rename examples/bpk-component-modal/{examples.js => examples.tsx} (75%) rename examples/bpk-component-modal/{stories.js => stories.tsx} (50%) diff --git a/examples/bpk-component-modal/examples.js b/examples/bpk-component-modal/examples.tsx similarity index 75% rename from examples/bpk-component-modal/examples.js rename to examples/bpk-component-modal/examples.tsx index 7b42c535d0..b3bce1cab8 100644 --- a/examples/bpk-component-modal/examples.js +++ b/examples/bpk-component-modal/examples.tsx @@ -15,12 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -/* @flow strict */ - -import PropTypes from 'prop-types'; -import { Component, Children } from 'react'; -import type { Node, Element } from 'react'; +import { Children, useState } from 'react'; import { lineHeightBase, @@ -33,7 +28,10 @@ import { withRtlSupport, } from '../../packages/bpk-component-icon'; import ArrowIcon from '../../packages/bpk-component-icon/sm/long-arrow-left'; -import BpkModal, { MODAL_STYLING } from '../../packages/bpk-component-modal'; +import BpkModal, { + MODAL_STYLING, + type BpkModalProps, +} from '../../packages/bpk-component-modal'; import { BpkNavigationBarButtonLink } from '../../packages/bpk-component-navigation-bar'; import BpkText, { TEXT_STYLES } from '../../packages/bpk-component-text'; import { cssModules, withDefaultProps } from '../../packages/bpk-react-utils'; @@ -108,147 +106,112 @@ const content = [ pulvinar erat dignissim vitae. , ]; +type ContainerProps = { + title?: string; + buttonLabel?: string; + id?: string; + wrapperProps?: Object; + isOpen?: boolean; +} & Omit; -class ModalContainer extends Component< - { - children: Node, - accessoryView: ?Element, - buttonLabel: ?string, - wrapperProps: ?Object, - }, - { - isOpen: boolean, - }, -> { - static propTypes = { - children: PropTypes.node.isRequired, - accessoryView: PropTypes.func, - buttonLabel: PropTypes.string, - wrapperProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types - }; - - static defaultProps = { - accessoryView: null, - buttonLabel: null, - wrapperProps: null, - }; - - constructor() { - super(); - - this.state = { - isOpen: false, - }; - } +const ModalContainer = (props: ContainerProps) => { + const [isOpen, setIsOpen] = useState(props.isOpen || false); - onOpen = () => { - this.setState({ - isOpen: true, - }); - }; + const { accessoryView, buttonLabel, children, wrapperProps, ...rest } = props; - onClose = () => { - this.setState({ - isOpen: false, - }); - }; - - render() { - const { accessoryView, buttonLabel, children, wrapperProps, ...rest } = - this.props; - - return ( - } + isOpen={isOpen} > The left hand button is intentally not functional. You can put anything you want in here. diff --git a/examples/bpk-component-modal/stories.js b/examples/bpk-component-modal/stories.tsx similarity index 50% rename from examples/bpk-component-modal/stories.js rename to examples/bpk-component-modal/stories.tsx index 86720fb88a..8e4b5cb008 100644 --- a/examples/bpk-component-modal/stories.js +++ b/examples/bpk-component-modal/stories.tsx @@ -15,7 +15,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import BpkModal from '../../packages/bpk-component-modal/src/BpkModal'; import { @@ -59,3 +58,56 @@ export const NoPadding = NoPaddingExample; export const WithAccessoryView = WithAccessoryViewExample; export const Contrast = ContrastExample; + +// Due to how iframes work we can pass a local url to load the stories above. +// Attempted to use a Custom Iframe component with a react portal and ref to +// render components but it didn't have the desired effect. +const visualWrapper = (id: string, zoomEnabled: boolean = false) => ( +
    +