diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml index f5898e149..4ead6d09d 100644 --- a/.github/workflows/coverage.yml +++ b/.github/workflows/coverage.yml @@ -15,6 +15,7 @@ jobs: test_script: npm run test secrets: caller_github_token: ${{ secrets.GITHUB_TOKEN }} + MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }} individual_coverage_percentages: if: ${{ github.event_name == 'pull_request' }} runs-on: ubuntu-latest diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml index 1e1b8207e..d958880f4 100644 --- a/.github/workflows/run-tests.yml +++ b/.github/workflows/run-tests.yml @@ -13,11 +13,15 @@ jobs: npm i -D react@18 react-dom@18 npm run build node_matrix: '["14.x", "16.x", "18.x"]' + secrets: + MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }} call_run_tests-react-17: uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1 with: node_matrix: '["14.x", "16.x", "18.x"]' + secrets: + MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }} call_run_tests-react-16: uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1 @@ -26,3 +30,5 @@ jobs: npm i -D react@16.14 react-dom@16.14 npm run build node_matrix: '["14.x", "16.x", "18.x"]' + secrets: + MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }} diff --git a/.github/workflows/wcag_test.yml b/.github/workflows/wcag_test.yml index 90d26ade8..afc25481c 100644 --- a/.github/workflows/wcag_test.yml +++ b/.github/workflows/wcag_test.yml @@ -2,12 +2,13 @@ name: WCAG tests on: pull_request: - branches: [main, develop] + branches: [main, develop, feature/*] jobs: call_wcag_test: uses: yext/slapshot-reusable-workflows/.github/workflows/wcag_test.yml@v1 secrets: NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }} with: build_script: ./tests/scripts/start-storybook.sh diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts index 6aa34baef..ac1728692 100644 --- a/.storybook/test-runner.ts +++ b/.storybook/test-runner.ts @@ -1,28 +1,36 @@ import { injectAxe, checkA11y } from 'axe-playwright'; import { Page } from 'playwright-core'; import { runOnly } from './wcagConfig'; +import { TestContext, TestRunnerConfig } from '@storybook/test-runner'; /** * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental * to learn more about the test-runner hooks API. */ -const renderFunctions = { +const renderFunctions: TestRunnerConfig = { async preRender(page: Page) { await injectAxe(page); }, - async postRender(page: Page, context) { - await checkA11y(page, '#root', { - axeOptions: { - runOnly, - rules: { - 'color-contrast': { enabled: context.name !== 'Loading' } - }, - }, - detailedReport: true, - detailedReportOptions: { - html: true, + async postRender(page: Page, context: TestContext) { + await checkA11y( + page, + { + include: ['#root'], + exclude: ['#root .mapboxgl-canvas-container'], }, - }); + { + axeOptions: { + runOnly, + rules: { + 'color-contrast': { enabled: context.name !== 'Loading' }, + }, + }, + detailedReport: true, + detailedReportOptions: { + html: true, + }, + } + ); }, }; diff --git a/src/components/MapboxMap.tsx b/src/components/MapboxMap.tsx index e377bbfef..d6994a2ab 100644 --- a/src/components/MapboxMap.tsx +++ b/src/components/MapboxMap.tsx @@ -1,8 +1,9 @@ -import { useRef, useEffect } from 'react'; +import { useRef, useEffect, useMemo } from 'react'; import mapboxgl, { Map, Marker, MapboxOptions, LngLatBounds, MarkerOptions, LngLat } from 'mapbox-gl'; import { Result, useSearchState } from '@yext/search-headless-react'; import { useDebouncedFunction } from '../hooks/useDebouncedFunction'; import ReactDOM from 'react-dom'; +import { MapboxStaticImage } from './MapboxStaticImage'; /** * A functional component that can be used to render a custom marker on the map. @@ -103,25 +104,33 @@ export function MapboxMap({ const locationResults = useSearchState(state => state.vertical.results) as Result[]; const onDragDebounced = useDebouncedFunction(onDrag, 100); + const options: Omit = useMemo(() => { + return { + style: 'mapbox://styles/mapbox/streets-v11?optimize=true', + center: [-74.005371, 40.741611], + zoom: 9, + ...mapboxOptions + }; + }, [mapboxOptions]); + useEffect(() => { if (mapContainer.current && !map.current) { - const options: MapboxOptions = { + const mapbox = new Map({ container: mapContainer.current, - style: 'mapbox://styles/mapbox/streets-v11', - center: [-74.005371, 40.741611], - zoom: 9, - ...mapboxOptions - }; - map.current = new Map(options); - const mapbox = map.current; + ...options + }); + map.current = mapbox; mapbox.resize(); if (onDragDebounced) { mapbox.on('drag', () => { onDragDebounced(mapbox.getCenter(), mapbox.getBounds()); }); } + mapbox.on('load', () => { + mapbox.getContainer().style.visibility = 'visible'; + }); } - }, [mapboxOptions, onDragDebounced]); + }, [options, onDragDebounced]); useEffect(() => { markers.current.forEach(marker => marker.remove()); @@ -161,7 +170,13 @@ export function MapboxMap({ }, [PinComponent, getCoordinate, locationResults]); return ( -
+
+
+ +
); } diff --git a/src/components/MapboxStaticImage.tsx b/src/components/MapboxStaticImage.tsx new file mode 100644 index 000000000..f43db36fa --- /dev/null +++ b/src/components/MapboxStaticImage.tsx @@ -0,0 +1,81 @@ +import { CSSProperties, useMemo, useRef, useState } from 'react'; +import { MapboxOptions, LngLatLike } from 'mapbox-gl'; +import useLayoutEffect from 'use-isomorphic-layout-effect'; + +/** + * Props for {@link MapboxStaticImage}. + */ +export interface MapboxStaticImageProps { + /** Mapbox access token. */ + mapboxAccessToken: string, + /** Map customization for Mapbox static image. */ + mapboxOptions: Pick +} + +/** + * Renders a static map image using Mapbox Static Image API. + * + * @internal + */ +export function MapboxStaticImage({ + mapboxAccessToken, + mapboxOptions +}: MapboxStaticImageProps): JSX.Element | null { + const mapContainer = useRef(null); + const [divDimension, setDivDimension] = useState<{ width: number, height: number }>(); + useLayoutEffect(() => { + if (mapContainer.current) { + setDivDimension({ + width: mapContainer.current.clientWidth, + height: mapContainer.current.clientHeight + }); + } + }, []); + + const staticMapboxStyle: CSSProperties | undefined = useMemo(() => { + const { style, center, zoom } = mapboxOptions; + if (!divDimension || !center || !zoom || typeof style !== 'string') { + return undefined; + } + const { width, height } = divDimension; + const url = getMapboxStaticImageUrl({ mapboxAccessToken, style, center, zoom, width, height }); + if (!url) { + return undefined; + } + return { + backgroundImage: `url(${url})` + }; + }, [divDimension, mapboxAccessToken, mapboxOptions]); + + return
; +} + +/** + * The configuration for Mapbox Static Image API url. + */ +interface MapboxStaticImageUrlConfig { + /** Mapbox access token. */ + mapboxAccessToken: string, + /** Mapbox stylesheet url to apply to the static map. */ + style: string, + /** Center point of the static map. */ + center: LngLatLike, + /** Zoom level of the static map. */ + zoom: number, + /** Width (in pixels) of the image. */ + width: number, + /** Height (in pixels) of the image. */ + height: number +} + +function getMapboxStaticImageUrl(urlConfig: MapboxStaticImageUrlConfig): string | undefined { + const { mapboxAccessToken, style, center, zoom, width, height } = urlConfig; + // Mapbox Static Image API only support width and height between 1-1280 pixels. + if (width > 1280 || height > 1280) { + return undefined; + } + const stylesheet = style.split('mapbox://styles/')[1].split('?')[0]; + const centerAndZoom = `${center[0]},${center[1]},${zoom}`; + const dimension = `${width}x${height}`; + return `https://api.mapbox.com/styles/v1/${stylesheet}/static/${centerAndZoom}/${dimension}?access_token=${mapboxAccessToken}`; +} diff --git a/test-site/package-lock.json b/test-site/package-lock.json index 340b2f512..b189ddb1c 100644 --- a/test-site/package-lock.json +++ b/test-site/package-lock.json @@ -3262,11 +3262,6 @@ "geojson-rewind": "geojson-rewind" } }, - "node_modules/@mapbox/geojson-types": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz", - "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==" - }, "node_modules/@mapbox/jsonlint-lines-primitives": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz", @@ -3291,9 +3286,9 @@ "integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw==" }, "node_modules/@mapbox/unitbezier": { - "version": "0.0.0", - "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz", - "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==" + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz", + "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==" }, "node_modules/@mapbox/vector-tile": { "version": "1.3.1", @@ -10015,9 +10010,9 @@ } }, "node_modules/jest-pnp-resolver": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz", + "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==", "dev": true, "engines": { "node": ">=6" @@ -11478,17 +11473,16 @@ } }, "node_modules/mapbox-gl": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.10.0.tgz", - "integrity": "sha512-ZAlCe55LXlbg60l15okSBs70NQAPLw3yRO3SSJMTB1uU7uj2QQbLCQPy1Ds+3B4wlaa5W3ewv8FNOZPQOoSSPA==", + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.11.0.tgz", + "integrity": "sha512-zXbqHfEQMsta4iKO8bzXapDz1DihvZg24gmPJoQgUYAJxjc0NVVa5G/1QF3TIlpAJDD7WPzQSAogItab5oOF3A==", "dependencies": { - "@mapbox/geojson-rewind": "^0.5.1", - "@mapbox/geojson-types": "^1.0.2", + "@mapbox/geojson-rewind": "^0.5.2", "@mapbox/jsonlint-lines-primitives": "^2.0.2", "@mapbox/mapbox-gl-supported": "^2.0.1", "@mapbox/point-geometry": "^0.1.0", "@mapbox/tiny-sdf": "^2.0.5", - "@mapbox/unitbezier": "^0.0.0", + "@mapbox/unitbezier": "^0.0.1", "@mapbox/vector-tile": "^1.3.1", "@mapbox/whoots-js": "^3.1.0", "csscolorparser": "~1.0.3", @@ -11498,10 +11492,10 @@ "grid-index": "^1.1.0", "murmurhash-js": "^1.0.0", "pbf": "^3.2.1", - "potpack": "^1.0.2", + "potpack": "^2.0.0", "quickselect": "^2.0.0", "rw": "^1.3.3", - "supercluster": "^7.1.4", + "supercluster": "^7.1.5", "tinyqueue": "^2.0.3", "vt-pbf": "^3.1.3" } @@ -13639,9 +13633,9 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "node_modules/potpack": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz", - "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==" + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz", + "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==" }, "node_modules/prelude-ls": { "version": "1.2.1", @@ -14288,9 +14282,9 @@ } }, "node_modules/regexpu-core": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.1.tgz", - "integrity": "sha512-HrnlNtpvqP1Xkb28tMhBUO2EbyUHdQlsnlAhzWcwHy8WJR53UWr7/MAvqrsQKMbV4qdpv03oTMG8iIhfsPFktQ==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.2.tgz", + "integrity": "sha512-T0+1Zp2wjF/juXMrMxHxidqGYn8U4R+zleSJhX9tQ1PUsS8a9UtYfbsF9LdiVgNX3kiX8RNaKM42nfSgvFJjmw==", "dev": true, "dependencies": { "regenerate": "^1.4.2", @@ -14298,7 +14292,7 @@ "regjsgen": "^0.7.1", "regjsparser": "^0.9.1", "unicode-match-property-ecmascript": "^2.0.0", - "unicode-match-property-value-ecmascript": "^2.0.0" + "unicode-match-property-value-ecmascript": "^2.1.0" }, "engines": { "node": ">=4" @@ -15901,9 +15895,9 @@ } }, "node_modules/unicode-match-property-value-ecmascript": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz", - "integrity": "sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz", + "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==", "dev": true, "engines": { "node": ">=4" @@ -19238,11 +19232,6 @@ "minimist": "^1.2.6" } }, - "@mapbox/geojson-types": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz", - "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==" - }, "@mapbox/jsonlint-lines-primitives": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz", @@ -19264,9 +19253,9 @@ "integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw==" }, "@mapbox/unitbezier": { - "version": "0.0.0", - "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz", - "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==" + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz", + "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==" }, "@mapbox/vector-tile": { "version": "1.3.1", @@ -24430,9 +24419,9 @@ } }, "jest-pnp-resolver": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz", + "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==", "dev": true, "requires": {} }, @@ -25551,17 +25540,16 @@ } }, "mapbox-gl": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.10.0.tgz", - "integrity": "sha512-ZAlCe55LXlbg60l15okSBs70NQAPLw3yRO3SSJMTB1uU7uj2QQbLCQPy1Ds+3B4wlaa5W3ewv8FNOZPQOoSSPA==", + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.11.0.tgz", + "integrity": "sha512-zXbqHfEQMsta4iKO8bzXapDz1DihvZg24gmPJoQgUYAJxjc0NVVa5G/1QF3TIlpAJDD7WPzQSAogItab5oOF3A==", "requires": { - "@mapbox/geojson-rewind": "^0.5.1", - "@mapbox/geojson-types": "^1.0.2", + "@mapbox/geojson-rewind": "^0.5.2", "@mapbox/jsonlint-lines-primitives": "^2.0.2", "@mapbox/mapbox-gl-supported": "^2.0.1", "@mapbox/point-geometry": "^0.1.0", "@mapbox/tiny-sdf": "^2.0.5", - "@mapbox/unitbezier": "^0.0.0", + "@mapbox/unitbezier": "^0.0.1", "@mapbox/vector-tile": "^1.3.1", "@mapbox/whoots-js": "^3.1.0", "csscolorparser": "~1.0.3", @@ -25571,10 +25559,10 @@ "grid-index": "^1.1.0", "murmurhash-js": "^1.0.0", "pbf": "^3.2.1", - "potpack": "^1.0.2", + "potpack": "^2.0.0", "quickselect": "^2.0.0", "rw": "^1.3.3", - "supercluster": "^7.1.4", + "supercluster": "^7.1.5", "tinyqueue": "^2.0.3", "vt-pbf": "^3.1.3" } @@ -26961,9 +26949,9 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "potpack": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz", - "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==" + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz", + "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==" }, "prelude-ls": { "version": "1.2.1", @@ -27460,9 +27448,9 @@ "dev": true }, "regexpu-core": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.1.tgz", - "integrity": "sha512-HrnlNtpvqP1Xkb28tMhBUO2EbyUHdQlsnlAhzWcwHy8WJR53UWr7/MAvqrsQKMbV4qdpv03oTMG8iIhfsPFktQ==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.2.tgz", + "integrity": "sha512-T0+1Zp2wjF/juXMrMxHxidqGYn8U4R+zleSJhX9tQ1PUsS8a9UtYfbsF9LdiVgNX3kiX8RNaKM42nfSgvFJjmw==", "dev": true, "requires": { "regenerate": "^1.4.2", @@ -27470,7 +27458,7 @@ "regjsgen": "^0.7.1", "regjsparser": "^0.9.1", "unicode-match-property-ecmascript": "^2.0.0", - "unicode-match-property-value-ecmascript": "^2.0.0" + "unicode-match-property-value-ecmascript": "^2.1.0" } }, "regjsgen": { @@ -28675,9 +28663,9 @@ } }, "unicode-match-property-value-ecmascript": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz", - "integrity": "sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz", + "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==", "dev": true }, "unicode-property-aliases-ecmascript": { diff --git a/tests/components/MapboxMap.stories.tsx b/tests/components/MapboxMap.stories.tsx index 816eac7a5..42c1f1ed1 100644 --- a/tests/components/MapboxMap.stories.tsx +++ b/tests/components/MapboxMap.stories.tsx @@ -7,6 +7,7 @@ import { MapboxMap, MapboxMapProps } from '../../src/components/MapboxMap'; import { MapPin } from '../../test-site/src/components/MapPin'; import { Location } from '../../test-site/src/pages/LocationsPage'; import { locationVerticalSingle, locationVerticalMultiple } from '../__fixtures__/data/mapbox'; +import { MapboxStaticImage, MapboxStaticImageProps } from '../../src/components/MapboxStaticImage'; const meta: ComponentMeta = { title: 'MapboxMap', @@ -19,8 +20,19 @@ const meta: ComponentMeta = { PinComponent: { control: false, }, + getCoordinate: { + control: false, + }, + onDrag: { + control: false, + } + }, + parameters: { + layout: 'fullscreen', + percy: { + enableJavascript: true, + } }, - parameters: { layout: 'fullscreen', percy: { enableJavascript: true } }, decorators: [(Story) => (
)] }; export default meta; @@ -42,11 +54,9 @@ export const MultiplePins: Story> = (args) => { }; export const CustomPin = Template.bind({}); - CustomPin.args = { PinComponent: MapPin, }; - CustomPin.play = async ({ canvasElement }) => { const canvas = within(canvasElement); const mapPin = await canvas.findByLabelText('Show pin details', undefined, { @@ -55,3 +65,18 @@ CustomPin.play = async ({ canvasElement }) => { userEvent.click(mapPin); await canvas.findByText('title1'); }; + +export const StaticImageBeforeLoad: Story = (args) => ( + +
+ +
+ +); +StaticImageBeforeLoad.args = { + mapboxOptions: { + style: 'mapbox://styles/mapbox/streets-v11?optimize=true', + center: [-74.005371, 40.741611], + zoom: 9 + } +};