From 7f5c1f5a7b9a18f68404d5baa0e4c16944ea30a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20Sz=C3=A9pe?= Date: Tue, 17 Oct 2023 06:03:31 +0000 Subject: [PATCH 1/3] Fix typos --- .storybook/main.cjs | 2 +- docs/animations.md | 6 +++--- docs/cdn.md | 2 +- docs/design-panel-push-update-flow.md | 2 +- docs/external-template-creation.md | 4 ++-- docs/performance.md | 4 ++-- .../dashboard/api-callbacks.md | 4 ++-- .../story-editor/api-callbacks.md | 2 +- includes/Infrastructure/ServiceBasedPlugin.php | 2 +- includes/Migrations/Replace_Conic_Style_Presets.php | 2 +- includes/Renderer/Stories/Renderer.php | 2 +- includes/Shopping/Product.php | 2 +- karma-story-editor.config.cjs | 2 +- packages/animation/src/components/WAAPIWrapper.tsx | 2 +- .../animation/src/parts/effects/backgroundZoom.ts | 2 +- packages/animation/src/parts/simple/zoom.ts | 2 +- packages/animation/src/utils/test/orderByKeys.ts | 2 +- packages/commander/src/utils/updateCdnUrl.ts | 2 +- .../myStories/filters/StoryFiltersProvider/index.js | 4 ++-- .../myStories/filters/test/useTaxonomyFilter.js | 12 ++++++------ .../src/app/views/myStories/karma/myStories.karma.js | 2 +- .../src/components/layout/test/useLayoutContext.js | 2 +- .../dashboard/src/utils/useDashboardResultsLabel.js | 4 ++-- .../src/components/datalist/list/list.tsx | 8 ++++---- .../src/components/infiniteScroller/stories/index.js | 2 +- packages/design-system/src/components/menu/menu.tsx | 8 ++++---- .../src/components/menu/stories/index.js | 2 +- .../design-system/src/components/popup/constants.ts | 2 +- packages/e2e-tests/src/config/bootstrap.js | 2 +- .../e2e-tests/src/specs/editor/shopping/schema.json | 2 +- packages/elements/src/utils/duplicateElement.ts | 2 +- packages/karma-fixture/src/events.js | 2 +- packages/karma-fixture/src/init.js | 2 +- .../karma-puppeteer-launcher/src/mouseWithDnd.cjs | 2 +- packages/masks/src/frame.tsx | 2 +- packages/media/src/seekVideo.ts | 2 +- packages/rich-text/src/formatters/color.ts | 2 +- packages/rich-text/src/util.ts | 4 ++-- .../src/laptop-buying-guide/laptopThreeFourth.tsx | 4 ++-- .../story-editor/src/app/media/local/typedefs.js | 2 +- .../app/media/media3p/useFetchCategoriesEffect.js | 2 +- .../story-editor/src/app/media/useMediaReducer.js | 4 ++-- .../src/app/pageCanvas/usePageSnapshot.ts | 2 +- .../src/app/quickActions/useElementReset.js | 4 ++-- .../useStoryReducer/reducers/setBackgroundElement.ts | 2 +- .../src/app/story/utils/getStoryPropsToSave.ts | 6 +++--- .../test/EditLayerFocusManager.js | 2 +- .../src/components/canvas/useFocusCanvas.ts | 2 +- .../checks/pageBackgroundLowTextContrast/check.js | 2 +- .../src/components/colorPicker/editablePreview.js | 2 +- .../src/components/colorPicker/insertStop.js | 12 ++++++------ .../src/components/colorPicker/useKeyAddStop.js | 2 +- .../src/components/floatingMenu/stories/index.js | 2 +- .../carousel/carouselContext/useCarouselScroll.ts | 2 +- .../src/components/footer/useFooterHeight.js | 2 +- .../components/form/color/test/getPreviewStyle.js | 2 +- .../src/components/helpCenter/navigator/utils.js | 2 +- .../src/components/helpCenter/toggle/test/index.js | 4 ++-- .../utils/updateDynamicProps.js | 4 ++-- .../design/textStyle/karma/textStyle.other.karma.js | 2 +- .../story-editor/src/karma/copyAndPaste.cuj.karma.js | 2 +- packages/story-editor/src/karma/fixture/fixture.js | 2 +- .../src/raw/12-hours-in-barcelona/template.json | 4 ++-- .../src/raw/celebrity-q-and-a/template.json | 6 +++--- .../src/raw/google-music-studio-tour/metaData.ts | 2 +- .../src/raw/los-angeles-city-guide/template.json | 4 ++-- packages/templates/src/raw/no-days-off/template.json | 2 +- .../templates/src/raw/plant-based-dyes/template.json | 4 ++-- .../templates/src/raw/self-care-guide/template.json | 2 +- packages/text-sets/src/raw/editorial.json | 2 +- packages/wp-dashboard/src/api/shopping.js | 2 +- packages/wp-utils/src/test/snakeToCamelCase.ts | 4 ++-- tests/phpunit/integration/data/schema.json | 2 +- tests/phpunit/integration/tests/Integrations/AMP.php | 2 +- 74 files changed, 111 insertions(+), 111 deletions(-) diff --git a/.storybook/main.cjs b/.storybook/main.cjs index c7739781230a..0876c0bfd3b1 100644 --- a/.storybook/main.cjs +++ b/.storybook/main.cjs @@ -155,7 +155,7 @@ module.exports = { exclude: /a\.js|node_modules/, // add errors to webpack instead of warnings failOnError: true, - // allow import cycles that include an asyncronous import, + // allow import cycles that include an asynchronous import, // e.g. via import(/* webpackMode: "weak" */ 'file.js') allowAsyncCycles: false, // set the current working directory for displaying module paths diff --git a/docs/animations.md b/docs/animations.md index 076b459edbf7..ce2de5ae1644 100644 --- a/docs/animations.md +++ b/docs/animations.md @@ -22,7 +22,7 @@ const sampleAnimationObject = { }; ``` -These objects are managed within the story reducer and passed to the animation provider. The animation provider then generates animations by passing this data to the function `AnimationPart(..)` located in `packages/animation/src/parts/index.js`. `AnimationPart(..)` maps the animations instanciation args to a generator function that will generate keyframes, WAAPI animation targets, AMP animation targets, etc. +These objects are managed within the story reducer and passed to the animation provider. The animation provider then generates animations by passing this data to the function `AnimationPart(..)` located in `packages/animation/src/parts/index.js`. `AnimationPart(..)` maps the animations instantiation args to a generator function that will generate keyframes, WAAPI animation targets, AMP animation targets, etc. ### Animation Parts & Animation Effects @@ -69,13 +69,13 @@ Target DOM elements are applied to story element components through animation wr ### Single Animation Target -In early specs for animations, we allowed a single animation to have mutliple targets (be applied to mulitple elements), since then, we have changed this spec to only allow an animation to have a single target element. This new spec is manually enforced in the editor code between the story reducer and the animation effect chooser. +In early specs for animations, we allowed a single animation to have multiple targets (be applied to multiple elements), since then, we have changed this spec to only allow an animation to have a single target element. This new spec is manually enforced in the editor code between the story reducer and the animation effect chooser. Remnants of this scope change can be seen in the serializable animation objects held in the story reducer state. These animations still take an array of targets even though that array should only ever hold one target while in use in the editor. ### Early Timeline Prototype -For the intial animation & template implementation we were supporting very complex animations for the templates. Creating these template animations necessitated an internal timeline tool to compose animation parts manually on each template. Since then, we've simplified animations for users and tried to make them parallel the AMP Story Animation presets +For the initial animation & template implementation we were supporting very complex animations for the templates. Creating these template animations necessitated an internal timeline tool to compose animation parts manually on each template. Since then, we've simplified animations for users and tried to make them parallel the AMP Story Animation presets If we do introduce an animation timeline to the editor in the future, here's the reference to the PR where we took out the internal timeline tool: [#7067](https://github.com/GoogleForCreators/web-stories-wp/pull/7067) diff --git a/docs/cdn.md b/docs/cdn.md index 7edc5afa2016..02ccb3131817 100644 --- a/docs/cdn.md +++ b/docs/cdn.md @@ -19,7 +19,7 @@ In order to be able to add new assets, you have to [install Git LFS](https://doc You can download it from [git-lfs.github.com](https://git-lfs.github.com/) (or use `brew install git-lfs` if you're on Mac). -Verify that the installation was succcessful: +Verify that the installation was successful: ```bash $ git lfs install diff --git a/docs/design-panel-push-update-flow.md b/docs/design-panel-push-update-flow.md index ebffca5e5150..09ca6848184d 100644 --- a/docs/design-panel-push-update-flow.md +++ b/docs/design-panel-push-update-flow.md @@ -40,7 +40,7 @@ flowchart TB A[pushUpdate or pushUpdateForObject] --> |update, submit| B[[setElementUpdates - Add update to update queue]] B -->|submit == false| C[elementUpdates - locally stored updates] B --> |submit == true| D[submit] - D --> J[[setTimout to dispatch 'submit' event]] + D --> J[[setTimeout to dispatch 'submit' event]] end end end diff --git a/docs/external-template-creation.md b/docs/external-template-creation.md index 135d9e7492f8..63cdb3d68290 100644 --- a/docs/external-template-creation.md +++ b/docs/external-template-creation.md @@ -133,7 +133,7 @@ Once you have the story JSON, several code changes are needed to add it to the l - Resets `sizes` property for images to `[]`. - Resets all `id` and `posterId` to 0 for image and video type resources. - NOTE: Check all resource URLs and properties are set properly before commiting the template. + NOTE: Check all resource URLs and properties are set properly before committing the template. 2. Create a new file `metaData.js` in your newly created `` directory. Your `/metaData.js` file would then look something like this with object corresponding to the new template and properties `id`, `title`, `tags`, `colors`, `creationDate`, etc. @@ -270,7 +270,7 @@ export const MASKS = [ showInLibrary: true, // mark this as true if you would like the shape to be user facing name: _x('Ring', 'shape/mask name', 'web-stories'), path: CLIP_PATHS[MaskTypes.RING], - ratio: 392 / 392, // / + ratio: 392 / 392, // / }, } ]; diff --git a/docs/performance.md b/docs/performance.md index 8929226b153c..101d0840925b 100644 --- a/docs/performance.md +++ b/docs/performance.md @@ -43,7 +43,7 @@ Once expensive renders are identified in the flame graph from the React Profilin ## Using Context Performantly -All of our context is held using the [use-context-selector](https://github.com/dai-shi/use-context-selector) package, and we have a small layer around it that allows it to use shallow equality vs referencial equality to detect if a component should re-render based on the return value of its selector. You can see this code in `packages/react/src/useContextSelector.js`. +All of our context is held using the [use-context-selector](https://github.com/dai-shi/use-context-selector) package, and we have a small layer around it that allows it to use shallow equality vs referential equality to detect if a component should re-render based on the return value of its selector. You can see this code in `packages/react/src/useContextSelector.js`. As a general rule of thumb, it is best practice to pull only essential data needed for your component through a selector when using `useContextSelector(...)`. This practice helps eliminate empty/extraneous renders induced from context. [Read more about it here](https://github.com/GoogleForCreators/web-stories-wp/issues/2662#issuecomment-1011372651). @@ -51,6 +51,6 @@ As a general rule of thumb, it is best practice to pull only essential data need There is always a chance for performance regressions as features get altered and added. The main regression to watch out for in the story editor is where a component is rendered for every element in state. Examples of this include the Display Layer, the Frames Layer, the Layer Panel. It should be verified that not every instance of said component re-renders when only one or a few of those element components needs updating. All these components are prone to large performance regressions if hooks or props pass data around unwisely. -It would be beneficial to audit these components from time to time in the react profiler. An audit can be as simple as recording an update to selection, or updating the position of a single element. If the react flame graph indicates that this is causing every element to re-render vs only the effected elements, a large performance regression has occured. +It would be beneficial to audit these components from time to time in the react profiler. An audit can be as simple as recording an update to selection, or updating the position of a single element. If the react flame graph indicates that this is causing every element to re-render vs only the effected elements, a large performance regression has occurred. Be sure to check for this regression on PRs that effect display elements, frame elements, layers in the layers panel, or any story state hooks. diff --git a/docs/third-party-integration/dashboard/api-callbacks.md b/docs/third-party-integration/dashboard/api-callbacks.md index d4308d3a5d1d..dcdb8a16ec23 100644 --- a/docs/third-party-integration/dashboard/api-callbacks.md +++ b/docs/third-party-integration/dashboard/api-callbacks.md @@ -289,7 +289,7 @@ Arguments - description: Title of the template which will be default title for story. - `tags` - type: `Array` - - description: set of words tht describe the template. + - description: set of words that describe the template. - `colors` - type: `Array` - description: Set of colors which are mostly used in template. @@ -313,7 +313,7 @@ Arguments - description: Version of the template used for migration. - `pages` - type: `array` - - description: Each attay item corrresponds to each page in template.[ page object ](../story-editor/integration-layer-api/api-callbacks.md/#page-object-shape) + - description: Each attay item corresponds to each page in template.[ page object ](../story-editor/integration-layer-api/api-callbacks.md/#page-object-shape) - `postersByPage` - type: `array` - description: Each object consisting of the URL for the page poster. diff --git a/docs/third-party-integration/story-editor/api-callbacks.md b/docs/third-party-integration/story-editor/api-callbacks.md index 02027e84b20c..01b93efd3579 100644 --- a/docs/third-party-integration/story-editor/api-callbacks.md +++ b/docs/third-party-integration/story-editor/api-callbacks.md @@ -346,7 +346,7 @@ Expected response - type: `number` - required: Yes - description: Length of the audio file in seconds. - - `lengthFormated` + - `lengthFormatted` - type: `string` - required: Yes - description: Length of the audio file formatted as MM:SS. diff --git a/includes/Infrastructure/ServiceBasedPlugin.php b/includes/Infrastructure/ServiceBasedPlugin.php index 3fd828b6650f..1e1454e201ef 100644 --- a/includes/Infrastructure/ServiceBasedPlugin.php +++ b/includes/Infrastructure/ServiceBasedPlugin.php @@ -784,7 +784,7 @@ protected function configure_injector( Injector $injector ): Injector { } /** - * Argument mape. + * Argument map. * * @var array> $arguments */ diff --git a/includes/Migrations/Replace_Conic_Style_Presets.php b/includes/Migrations/Replace_Conic_Style_Presets.php index 7dbdb0cb97c0..585c31c476f1 100644 --- a/includes/Migrations/Replace_Conic_Style_Presets.php +++ b/includes/Migrations/Replace_Conic_Style_Presets.php @@ -52,7 +52,7 @@ class Replace_Conic_Style_Presets extends Migrate_Base { */ public function migrate(): void { /** - * List of style presest. + * List of style presets. * * @var array|null $style_presets * @phpstan-var StylePresets|null $style_presets diff --git a/includes/Renderer/Stories/Renderer.php b/includes/Renderer/Stories/Renderer.php index 959f868a363c..82058fc1f0d7 100644 --- a/includes/Renderer/Stories/Renderer.php +++ b/includes/Renderer/Stories/Renderer.php @@ -208,7 +208,7 @@ public function current(): ?Story { * * @since 1.5.0 * - * @retrun void + * @return void */ public function next(): void { ++$this->position; diff --git a/includes/Shopping/Product.php b/includes/Shopping/Product.php index bd8063baaf96..ee921d40a5ac 100644 --- a/includes/Shopping/Product.php +++ b/includes/Shopping/Product.php @@ -339,7 +339,7 @@ protected function set_images( array $images ): void { * * @since 1.26.0 * - * @param string $details Deatils. + * @param string $details Details. */ protected function set_details( string $details ): void { $this->details = $details; diff --git a/karma-story-editor.config.cjs b/karma-story-editor.config.cjs index ebe269fe4a10..11f693f84f6f 100644 --- a/karma-story-editor.config.cjs +++ b/karma-story-editor.config.cjs @@ -184,7 +184,7 @@ module.exports = function (config) { // Sharding configuration for CI. // We trick karma-parallel into using only 1 browser (parallelOptions.executors === 1) // while using a custom strategy that splits up the tests into multiple shards (config.executors > 1). - // This allows us to run ony a subset of the tests like so: + // This allows us to run only a subset of the tests like so: // npm run test:karma:story-editor -- --headless --shard=1/3 # Run the first of 3 desired shards. parallelOptions: { shardStrategy: config.shard ? 'custom' : 'round-robin', diff --git a/packages/animation/src/components/WAAPIWrapper.tsx b/packages/animation/src/components/WAAPIWrapper.tsx index b20c69602bdd..537f6ab9c806 100644 --- a/packages/animation/src/components/WAAPIWrapper.tsx +++ b/packages/animation/src/components/WAAPIWrapper.tsx @@ -76,7 +76,7 @@ function WAAPIWrapper({ children, target }: WrapperProps) { // and not generate a new subtree of DOM nodes: // https://github.com/facebook/react/issues/3965 // - // To Accomodate for this, we're setting a max of 3 levels deep. All stories built recently should + // To Accommodate for this, we're setting a max of 3 levels deep. All stories built recently should // only have 1 animation per element, however this allows for backward compatibility with old stories // created from legacy templates that use stacked animation parts on single elements return ( diff --git a/packages/animation/src/parts/effects/backgroundZoom.ts b/packages/animation/src/parts/effects/backgroundZoom.ts index 355d52f395bf..71729b229bb5 100644 --- a/packages/animation/src/parts/effects/backgroundZoom.ts +++ b/packages/animation/src/parts/effects/backgroundZoom.ts @@ -71,7 +71,7 @@ export function EffectBackgroundZoom( const normalizedDelta = progress(50, { MIN: 0, MAX: BG_MAX_SCALE }); // Interpret the normalized delta into the compounded scale coordinate space. const delta = lerp(normalizedDelta, { MIN: 0, MAX: range.MAX }); - // Apply the interpretted fixed delta to the elements scale + // Apply the interpreted fixed delta to the elements scale const zoomFrom = 1 + (zoomDirection === ScaleDirection.ScaleOut ? 1 : -1) * delta; diff --git a/packages/animation/src/parts/simple/zoom.ts b/packages/animation/src/parts/simple/zoom.ts index c92ac7128ee5..6944af3f4da7 100644 --- a/packages/animation/src/parts/simple/zoom.ts +++ b/packages/animation/src/parts/simple/zoom.ts @@ -47,7 +47,7 @@ export function AnimationZoom({ // If supplied a transformOrigin, AMP doesn't allow us to set // the transformOrigin property from the keyframes since it is // an unanimatable property. To account for this we calculate a - // counter translate based off the scale change that mimicks the + // counter translate based off the scale change that mimics the // element scaling from a particular origin. if (transformOrigin) { // transformOrigin default is `50% 50%` so we account for diff --git a/packages/animation/src/utils/test/orderByKeys.ts b/packages/animation/src/utils/test/orderByKeys.ts index efe29768d64c..2139816f2da1 100644 --- a/packages/animation/src/utils/test/orderByKeys.ts +++ b/packages/animation/src/utils/test/orderByKeys.ts @@ -47,7 +47,7 @@ describe('orderByKeys', () => { expect(Object.keys(result)).toStrictEqual(propertyOrder); }); - it('maintains object equality if keys include property ouside of object', () => { + it('maintains object equality if keys include property outside of object', () => { const propertyOrder = ['a', 'b', 'c', 'd', 'e']; const input = { b: 0, diff --git a/packages/commander/src/utils/updateCdnUrl.ts b/packages/commander/src/utils/updateCdnUrl.ts index 65da5284b8c4..f8b247f76003 100644 --- a/packages/commander/src/utils/updateCdnUrl.ts +++ b/packages/commander/src/utils/updateCdnUrl.ts @@ -24,7 +24,7 @@ const CDN_URL_CONSTANT_REGEX = /define\(\s*'WEBSTORIES_CDN_URL',\s*'([^']*)'\s*\);/; /** - * Updates CDN URL in thhe main plugin file. + * Updates CDN URL in the main plugin file. * * Namely, this updates the `WEBSTORIES_CDN_URL` constant in the main plugin file. * diff --git a/packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js b/packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js index deba65e8a754..97dcc53fb411 100644 --- a/packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js +++ b/packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js @@ -45,7 +45,7 @@ export const filterContext = createContext({ * Keeps track of the current filters state. * * Each filter will have its own logic associated with - * initilization and how to query terms. + * initialization and how to query terms. * * state.filters should be used for UI. * state.filtersObject should hold the key value pairs associated with filtering query params @@ -58,7 +58,7 @@ export const filterContext = createContext({ */ export default function StoryFiltersProvider({ children }) { - // each filter type will have its own logic for initilizing and querying + // each filter type will have its own logic for initializing and querying const initializeTaxonomyFilters = useTaxonomyFilters(); const initializeAuthorFilter = useAuthorFilter(); diff --git a/packages/dashboard/src/app/views/myStories/filters/test/useTaxonomyFilter.js b/packages/dashboard/src/app/views/myStories/filters/test/useTaxonomyFilter.js index bf5e5fe92c88..e357c986ce95 100644 --- a/packages/dashboard/src/app/views/myStories/filters/test/useTaxonomyFilter.js +++ b/packages/dashboard/src/app/views/myStories/filters/test/useTaxonomyFilter.js @@ -90,7 +90,7 @@ jest.mock('../../../../api/useApi', () => { }); describe('useTaxonomyFilters', () => { - it('should initilize the hierarchial taxonomy filters data only', async () => { + it('should initialize the hierarchial taxonomy filters data only', async () => { const { result: { current: initializeTaxonomyFilters }, } = renderHook(() => useTaxonomyFilters()); @@ -114,21 +114,21 @@ describe('useTaxonomyFilters', () => { }); describe('initializeTaxonomyFilters', () => { - let initailize; + let initialize; beforeEach(async () => { const { result: { current: initializeTaxonomyFilters }, } = renderHook(() => useTaxonomyFilters()); - initailize = initializeTaxonomyFilters; + initialize = initializeTaxonomyFilters; // flush promise queue await act(() => Promise.resolve()); }); - it('should initilize taxonomy filters data', async () => { + it('should initialize taxonomy filters data', async () => { // initialize filters - const filters = await initailize(); + const filters = await initialize(); expect(filters).toHaveLength(2); const filter1 = filters.at(0); @@ -139,7 +139,7 @@ describe('useTaxonomyFilters', () => { }); it('should use the correct taxonomy for getPrimaryOptions and query', async () => { - const filters = await initailize(); + const filters = await initialize(); const filter1 = filters.at(0); const filter2 = filters.at(1); diff --git a/packages/dashboard/src/app/views/myStories/karma/myStories.karma.js b/packages/dashboard/src/app/views/myStories/karma/myStories.karma.js index 3d3086aa392e..237f4453440a 100644 --- a/packages/dashboard/src/app/views/myStories/karma/myStories.karma.js +++ b/packages/dashboard/src/app/views/myStories/karma/myStories.karma.js @@ -354,7 +354,7 @@ describe('CUJ: Creator can view their stories in grid view', () => { // key down to the bottom of the available search options // plus once more beyond available search options to make sure focus stays intact for (let iter = 0; iter < activeListItems.length + 1; iter++) { - // disable eslint to prevet overlapping .act calls + // disable eslint to prevent overlapping .act calls // eslint-disable-next-line no-await-in-loop await fixture.events.keyboard.press('down'); } diff --git a/packages/dashboard/src/components/layout/test/useLayoutContext.js b/packages/dashboard/src/components/layout/test/useLayoutContext.js index bdbcac2e3d34..b54fe54cfaf7 100644 --- a/packages/dashboard/src/components/layout/test/useLayoutContext.js +++ b/packages/dashboard/src/components/layout/test/useLayoutContext.js @@ -24,7 +24,7 @@ import LayoutProvider from '../provider'; import useLayoutContext from '../useLayoutContext'; describe('useLayoutContext()', () => { - it('should throw an error if used oustide Layout.Provider', () => { + it('should throw an error if used outside Layout.Provider', () => { expect(() => { const { // eslint-disable-next-line no-unused-vars diff --git a/packages/dashboard/src/utils/useDashboardResultsLabel.js b/packages/dashboard/src/utils/useDashboardResultsLabel.js index 2987a42ca3b5..4ca667bfb0b3 100644 --- a/packages/dashboard/src/utils/useDashboardResultsLabel.js +++ b/packages/dashboard/src/utils/useDashboardResultsLabel.js @@ -34,7 +34,7 @@ export default function useDashboardResultsLabel({ const resultsLabel = useMemo(() => { const numResults = totalResults ?? 0; const defaultLabel = RESULT_LABELS[view]?.[currentFilter] || ''; - const interprettedDefaultLabel = + const interpretedDefaultLabel = typeof defaultLabel === 'function' ? defaultLabel(numResults) : defaultLabel; @@ -44,7 +44,7 @@ export default function useDashboardResultsLabel({ _n('%s result', '%s results', numResults, 'web-stories'), sprintf('%s', numResults) ) - : interprettedDefaultLabel; + : interpretedDefaultLabel; }, [isActiveSearch, totalResults, view, currentFilter]); return resultsLabel; diff --git a/packages/design-system/src/components/datalist/list/list.tsx b/packages/design-system/src/components/datalist/list/list.tsx index 25dd90371405..713512c56b8d 100644 --- a/packages/design-system/src/components/datalist/list/list.tsx +++ b/packages/design-system/src/components/datalist/list/list.tsx @@ -215,13 +215,13 @@ function OptionListWithRef( return; } - const highlighedOptionEl = optionsRef.current[focusIndex]; - if (!highlighedOptionEl) { + const highlightedOptionEl = optionsRef.current[focusIndex]; + if (!highlightedOptionEl) { return; } - highlighedOptionEl.focus(); - listEl.scrollTo(0, highlighedOptionEl.offsetTop - listEl.clientHeight / 2); + highlightedOptionEl.focus(); + listEl.scrollTo(0, highlightedOptionEl.offsetTop - listEl.clientHeight / 2); }, [focusIndex, filteredOptions, keyword, onClose, listRef]); /* diff --git a/packages/design-system/src/components/infiniteScroller/stories/index.js b/packages/design-system/src/components/infiniteScroller/stories/index.js index 8424e29a459a..39734869ede7 100644 --- a/packages/design-system/src/components/infiniteScroller/stories/index.js +++ b/packages/design-system/src/components/infiniteScroller/stories/index.js @@ -30,7 +30,7 @@ export default { component: InfiniteScroller, args: { loadingAriaMessage: - 'Data is loading - please note, interesection observers and storybook do not play nicely in firefox.', + 'Data is loading - please note, intersection observers and storybook do not play nicely in firefox.', allDataLoadedMessage: 'all data is loaded', allDataLoadedAriaMessage: 'all data is loaded', }, diff --git a/packages/design-system/src/components/menu/menu.tsx b/packages/design-system/src/components/menu/menu.tsx index 767d29d8d941..9e1e2a22ac88 100644 --- a/packages/design-system/src/components/menu/menu.tsx +++ b/packages/design-system/src/components/menu/menu.tsx @@ -70,15 +70,15 @@ function Menu({ return; } - const highlighedOptionEl = optionsRef.current[focusedIndex]; - if (!highlighedOptionEl) { + const highlightedOptionEl = optionsRef.current[focusedIndex]; + if (!highlightedOptionEl) { return; } - highlighedOptionEl.focus(); + highlightedOptionEl.focus(); listEl.scrollTo?.( 0, - highlighedOptionEl.offsetTop - listEl.clientHeight / 2 + highlightedOptionEl.offsetTop - listEl.clientHeight / 2 ); }, [focusedIndex, isMenuFocused]); diff --git a/packages/design-system/src/components/menu/stories/index.js b/packages/design-system/src/components/menu/stories/index.js index 1e7aec97683a..e80e2e59a435 100644 --- a/packages/design-system/src/components/menu/stories/index.js +++ b/packages/design-system/src/components/menu/stories/index.js @@ -45,7 +45,7 @@ export default { }, argTypes: { onMenuItemClick: { action: 'onMenuItemClick' }, - onDismissMenu: { action: 'onDismissMenu occured' }, + onDismissMenu: { action: 'onDismissMenu occurred' }, }, }; diff --git a/packages/design-system/src/components/popup/constants.ts b/packages/design-system/src/components/popup/constants.ts index 35cc9489304f..ee92e506c2a1 100644 --- a/packages/design-system/src/components/popup/constants.ts +++ b/packages/design-system/src/components/popup/constants.ts @@ -80,7 +80,7 @@ export const PopupContainer = styled.div<{ widthProp.width = `${width}px`; } } - // if maxWidth is given and the width propery hasn't been set + // if maxWidth is given and the width property hasn't been set // set the PopupContainers max-width if (maxWidth && !widthProp.width) { widthProp.maxWidth = `${maxWidth}px`; diff --git a/packages/e2e-tests/src/config/bootstrap.js b/packages/e2e-tests/src/config/bootstrap.js index 50ff46ae08a5..3dcc996e07cf 100644 --- a/packages/e2e-tests/src/config/bootstrap.js +++ b/packages/e2e-tests/src/config/bootstrap.js @@ -94,7 +94,7 @@ const ALLOWED_ERROR_MESSAGES = [ // Another Firefox warning. 'Layout was forced before the page was fully loaded', - // Upsteam issue in gutenberg and twentytwenty theme. + // Upstream issue in gutenberg and twentytwenty theme. 'Stylesheet twentytwenty-block-editor-styles-css was not properly added.', // TODO(#9240): Fix usage in the web stories block. diff --git a/packages/e2e-tests/src/specs/editor/shopping/schema.json b/packages/e2e-tests/src/specs/editor/shopping/schema.json index a733503562a2..a3414ff68ec1 100644 --- a/packages/e2e-tests/src/specs/editor/shopping/schema.json +++ b/packages/e2e-tests/src/specs/editor/shopping/schema.json @@ -9,7 +9,7 @@ "type": "string" }, "productUrl": { - "description": "Links to the product's website, whne the buy now button is clicked.", + "description": "Links to the product's website, when the buy now button is clicked.", "type": "string", "$ref": "#/$defs/https" }, diff --git a/packages/elements/src/utils/duplicateElement.ts b/packages/elements/src/utils/duplicateElement.ts index 99ac1d251d76..343c6ffcdaa6 100644 --- a/packages/elements/src/utils/duplicateElement.ts +++ b/packages/elements/src/utils/duplicateElement.ts @@ -32,7 +32,7 @@ import getOffsetCoordinates from './getOffsetCoordinates'; * on any existing element on the page. * * @param args - named arguments - * @param args.element - story element to be coppied + * @param args.element - story element to be copied * @param args.animations - set of existing animations * @param args.currentElements - set of existing story elements * @param args.offsetBase - a point from which offset will be applied diff --git a/packages/karma-fixture/src/events.js b/packages/karma-fixture/src/events.js index 77cc66fa3b68..7bcf62d2eaef 100644 --- a/packages/karma-fixture/src/events.js +++ b/packages/karma-fixture/src/events.js @@ -175,7 +175,7 @@ class Keyboard { * - press KeyB * - up Meta * - * @param {string} shortcut Keybord shortcut. + * @param {string} shortcut Keyboard shortcut. * @return {!Promise} Yields when the event is processed. */ shortcut(shortcut) { diff --git a/packages/karma-fixture/src/init.js b/packages/karma-fixture/src/init.js index ecadcbf22f97..a1f9eb72f89d 100644 --- a/packages/karma-fixture/src/init.js +++ b/packages/karma-fixture/src/init.js @@ -161,7 +161,7 @@ beforeAll(() => { }); // Make sure that testing iframe takes over the whole screen. This way, the - // native events can be targetted precisely. + // native events can be targeted precisely. // The documented approach is to supply our own // [client_with_context.html](https://github.com/karma-runner/karma/blob/master/static/client_with_context.html) // file via [customClientContextFile](http://karma-runner.github.io/5.0/config/configuration-file.html) diff --git a/packages/karma-puppeteer-launcher/src/mouseWithDnd.cjs b/packages/karma-puppeteer-launcher/src/mouseWithDnd.cjs index 2f0f76d7a043..9829b045f4ce 100644 --- a/packages/karma-puppeteer-launcher/src/mouseWithDnd.cjs +++ b/packages/karma-puppeteer-launcher/src/mouseWithDnd.cjs @@ -110,7 +110,7 @@ class DndClientBinding { constructor(context) { this._context = context; - // Start client intialization right away. + // Start client initialization right away. this._whenClientReady(); } diff --git a/packages/masks/src/frame.tsx b/packages/masks/src/frame.tsx index 22466c669245..2b550eb15909 100644 --- a/packages/masks/src/frame.tsx +++ b/packages/masks/src/frame.tsx @@ -184,7 +184,7 @@ function WithDropTarget({ // reaching the frame through zIndex active={activeDropTargetId === element.id} > - {/** Suble indicator that the element is a drop target */} + {/** Subtle indicator that the element is a drop target */} { }, THREE_SECONDS); }); video.addEventListener('error', reject); - video.addEventListener('seeked', () => resolve(), { once: true }); + video.addEventListener('sought', () => resolve(), { once: true }); video.currentTime = offset; }); diff --git a/packages/rich-text/src/formatters/color.ts b/packages/rich-text/src/formatters/color.ts index 64399f79c10e..87470b394e2a 100644 --- a/packages/rich-text/src/formatters/color.ts +++ b/packages/rich-text/src/formatters/color.ts @@ -41,7 +41,7 @@ import { isStyle, getVariable } from './util'; /* * Color uses PREFIX-XXXXXXXX where XXXXXXXX is the 8 digit - * hex represenation of the RGBA color. + * hex representation of the RGBA color. */ const styleToColor = (style: string): Pattern => getSolidFromHex(getVariable(style, COLOR)); diff --git a/packages/rich-text/src/util.ts b/packages/rich-text/src/util.ts index 6964da663a0e..ab04d05f9add 100644 --- a/packages/rich-text/src/util.ts +++ b/packages/rich-text/src/util.ts @@ -53,7 +53,7 @@ export function getFilteredState( ); } -function getStateFromCommmand(command: string, oldEditorState: EditorState) { +function getStateFromCommand(command: string, oldEditorState: EditorState) { switch (command) { case 'bold': return weightFormatter.setters.toggleBold(oldEditorState); @@ -81,7 +81,7 @@ function getStateFromCommmand(command: string, oldEditorState: EditorState) { export const getHandleKeyCommandFromState = (setEditorState: (state: EditorState) => void) => (command: string, currentEditorState: EditorState) => { - const newEditorState = getStateFromCommmand(command, currentEditorState); + const newEditorState = getStateFromCommand(command, currentEditorState); if (newEditorState) { setEditorState(newEditorState); return 'handled'; diff --git a/packages/stickers/src/laptop-buying-guide/laptopThreeFourth.tsx b/packages/stickers/src/laptop-buying-guide/laptopThreeFourth.tsx index c9056e6ba5db..45f4a5f65b71 100644 --- a/packages/stickers/src/laptop-buying-guide/laptopThreeFourth.tsx +++ b/packages/stickers/src/laptop-buying-guide/laptopThreeFourth.tsx @@ -25,7 +25,7 @@ import type { StickerProps, Sticker } from '../types'; const title = _x('Laptop 3/4', 'sticker name', 'web-stories'); -function LaptopRatingsThreeFouth({ style }: StickerProps) { +function LaptopRatingsThreeFourth({ style }: StickerProps) { return ( } categories list of categories * @property {import('./categories/typedefs').FetchCategoriesStartFn} fetchCategoriesStart action dispatched when fetching process starts - * @property {import('./categories/typedefs').FetchCategoriesSuccessFn} fetchCategoriesSuccess action dispatched when fetching is sucessful + * @property {import('./categories/typedefs').FetchCategoriesSuccessFn} fetchCategoriesSuccess action dispatched when fetching is successful * @property {import('./categories/typedefs').FetchCategoriesErrorFn} fetchCategoriesError action dispatched when fetching returns an error */ diff --git a/packages/story-editor/src/app/media/useMediaReducer.js b/packages/story-editor/src/app/media/useMediaReducer.js index 95afbabd7966..494d00595d6d 100644 --- a/packages/story-editor/src/app/media/useMediaReducer.js +++ b/packages/story-editor/src/app/media/useMediaReducer.js @@ -72,10 +72,10 @@ const wrapWithDispatch = (actionFnOrActionObject, dispatch) => { /** * The media state reducer and action dispatcher functions. * - * @param {Function} reducer The reducer, which may be overriden for unit + * @param {Function} reducer The reducer, which may be overridden for unit * testing purposes * @param {Object} actionsToWrap The action dispatcher functions, that are - * wrapped with the `dispatch` function and may be overriden for unit testing + * wrapped with the `dispatch` function and may be overridden for unit testing * purposes * @return {MediaReducer} Media reducer object. */ diff --git a/packages/story-editor/src/app/pageCanvas/usePageSnapshot.ts b/packages/story-editor/src/app/pageCanvas/usePageSnapshot.ts index 21e2dd5cbaf2..22447e64e2a1 100644 --- a/packages/story-editor/src/app/pageCanvas/usePageSnapshot.ts +++ b/packages/story-editor/src/app/pageCanvas/usePageSnapshot.ts @@ -47,7 +47,7 @@ function usePageSnapshot() { /** * Takes a story page and returns a canvas from the cache if * the requested page matches the cache, returns null if there's - * a mismatch with the exisitng cache. + * a mismatch with the existing cache. * * This function maintains a stable reference throughout the life of this hook. * diff --git a/packages/story-editor/src/app/quickActions/useElementReset.js b/packages/story-editor/src/app/quickActions/useElementReset.js index c67cbbf4d688..d79f012c07e8 100644 --- a/packages/story-editor/src/app/quickActions/useElementReset.js +++ b/packages/story-editor/src/app/quickActions/useElementReset.js @@ -67,8 +67,8 @@ function useElementReset() { if (properties.includes(RESET_PROPERTIES.ANIMATION)) { // this is the only place where we're updating both animations and other - // properties on an element. updateElementsById only accepts if you upate - // one or the other, so we're upating animations if needed here separately + // properties on an element. updateElementsById only accepts if you update + // one or the other, so we're updating animations if needed here separately updateElementsById({ elementIds: [elementId], properties: (currentProperties) => diff --git a/packages/story-editor/src/app/story/useStoryReducer/reducers/setBackgroundElement.ts b/packages/story-editor/src/app/story/useStoryReducer/reducers/setBackgroundElement.ts index 212d82d98eec..cc26ab010bc8 100644 --- a/packages/story-editor/src/app/story/useStoryReducer/reducers/setBackgroundElement.ts +++ b/packages/story-editor/src/app/story/useStoryReducer/reducers/setBackgroundElement.ts @@ -127,7 +127,7 @@ export const setBackgroundElement = ( } // Remove any applied background animations - // or exising element animations. + // or existing element animations. const backgroundElement = page.elements.find( (element) => elementIs.backgroundable(element) && element.isBackground ); diff --git a/packages/story-editor/src/app/story/utils/getStoryPropsToSave.ts b/packages/story-editor/src/app/story/utils/getStoryPropsToSave.ts index c18268ac2d2b..4d1b71c4fbe8 100644 --- a/packages/story-editor/src/app/story/utils/getStoryPropsToSave.ts +++ b/packages/story-editor/src/app/story/utils/getStoryPropsToSave.ts @@ -63,13 +63,13 @@ function getStoryPropsToSave({ // clean up fonts to store at the story level // this avoids storing the same font (properties) multiple times // see: https://github.com/GoogleForCreators/web-stories-wp/issues/12261 - const cleandFonts = getStoryFontsFromPages(pages); + const cleanedFonts = getStoryFontsFromPages(pages); // clean up text elements to remove font properties from individual elements const cleanedPages = cleanElementFontProperties(pages); const products = getAllProducts(cleanedPages); const content = getStoryMarkup( - { ...story, fonts: cleandFonts }, + { ...story, fonts: cleanedFonts }, cleanedPages, metadata, flags @@ -89,7 +89,7 @@ function getStoryPropsToSave({ content, pages: cleanedPages, ...propsFromStory, - fonts: cleandFonts, + fonts: cleanedFonts, ...termData, products, } as StorySaveData; diff --git a/packages/story-editor/src/components/canvas/editLayerFocusManager/test/EditLayerFocusManager.js b/packages/story-editor/src/components/canvas/editLayerFocusManager/test/EditLayerFocusManager.js index c6f4365fddde..8fdc4dfd6d19 100644 --- a/packages/story-editor/src/components/canvas/editLayerFocusManager/test/EditLayerFocusManager.js +++ b/packages/story-editor/src/components/canvas/editLayerFocusManager/test/EditLayerFocusManager.js @@ -118,7 +118,7 @@ describe('EditLayerFocusManager', () => { TestFocusGroup = FocusGroup; }); - it('focuses first element in focus group with enterFocusGoup', () => { + it('focuses first element in focus group with enterFocusGroup', () => { const { unmount } = render(); // enter focus group diff --git a/packages/story-editor/src/components/canvas/useFocusCanvas.ts b/packages/story-editor/src/components/canvas/useFocusCanvas.ts index 4aa85350f1a3..034e68fe52e1 100644 --- a/packages/story-editor/src/components/canvas/useFocusCanvas.ts +++ b/packages/story-editor/src/components/canvas/useFocusCanvas.ts @@ -22,7 +22,7 @@ import { useCallback } from '@googleforcreators/react'; function useFocusCanvas() { /** * @param {boolean} force When true, the focus will always be - * transfered to the canvas. Otherwise, the focus will only be transfered + * transferred to the canvas. Otherwise, the focus will only be transferred * when no other editor input is holding it. */ const focusCanvas = useCallback((force = true) => { diff --git a/packages/story-editor/src/components/checklist/checks/pageBackgroundLowTextContrast/check.js b/packages/story-editor/src/components/checklist/checks/pageBackgroundLowTextContrast/check.js index 9a0d96112979..bf11ed88e270 100644 --- a/packages/story-editor/src/components/checklist/checks/pageBackgroundLowTextContrast/check.js +++ b/packages/story-editor/src/components/checklist/checks/pageBackgroundLowTextContrast/check.js @@ -196,7 +196,7 @@ const TO_RADIANS = Math.PI / 180; * @param {Object} arguments The arguments * @param {Element} arguments.bgImage The background element * @param {{ width: number, height: number }} arguments.bgBox The containing box of the background image - needed for calculating canvas translations for rotated elements - * @param {{ x: number, y: number, width: number, height: number }} arguments.overlapBox The position and size of the text element relative to the scaled and roated background image + * @param {{ x: number, y: number, width: number, height: number }} arguments.overlapBox The position and size of the text element relative to the scaled and rotated background image * @return {Promise} Resolves to the dominant color of the background image in the overlap box area */ async function getOverlapBgColor({ bgImage, bgBox, overlapBox }) { diff --git a/packages/story-editor/src/components/colorPicker/editablePreview.js b/packages/story-editor/src/components/colorPicker/editablePreview.js index 67a37a5e3c9b..64df871ddd98 100644 --- a/packages/story-editor/src/components/colorPicker/editablePreview.js +++ b/packages/story-editor/src/components/colorPicker/editablePreview.js @@ -99,7 +99,7 @@ function EditablePreview({ label = '', value = '', width, format, onChange }) { ]); const handleOnBlur = (evt) => { - // Ignore reason: There's no practical way to simulate the else occuring + // Ignore reason: There's no practical way to simulate the else occurring // istanbul ignore else if (!evt.currentTarget.contains(evt.relatedTarget)) { disableEditing(); diff --git a/packages/story-editor/src/components/colorPicker/insertStop.js b/packages/story-editor/src/components/colorPicker/insertStop.js index 4acc8dbcf0a6..c03a37854e8e 100644 --- a/packages/story-editor/src/components/colorPicker/insertStop.js +++ b/packages/story-editor/src/components/colorPicker/insertStop.js @@ -40,18 +40,18 @@ function insertStop(stops, newPosition) { } // Find the two stops surrounding the new stop - const preceeding = stops[followingIndex - 1]; + const preceding = stops[followingIndex - 1]; const following = stops[followingIndex]; - // Find the ratio the new stop is from the preceeding stop - const diffNewToPreceeding = newPosition - preceeding.position; - const diffFollowingToPreceeding = following.position - preceeding.position; - const ratio = diffNewToPreceeding / diffFollowingToPreceeding; + // Find the ratio the new stop is from the preceding stop + const diffNewTopreceding = newPosition - preceding.position; + const diffFollowingTopreceding = following.position - preceding.position; + const ratio = diffNewTopreceding / diffFollowingTopreceding; // Mix the two colors by that amount: const { color: { r: pr, g: pg, b: pb, a: pa = 1 }, - } = preceeding; + } = preceding; const { color: { r: fr, g: fg, b: fb, a: fa = 1 }, } = following; diff --git a/packages/story-editor/src/components/colorPicker/useKeyAddStop.js b/packages/story-editor/src/components/colorPicker/useKeyAddStop.js index 767bc940379f..7a96bbb6bdbd 100644 --- a/packages/story-editor/src/components/colorPicker/useKeyAddStop.js +++ b/packages/story-editor/src/components/colorPicker/useKeyAddStop.js @@ -37,7 +37,7 @@ function getNewStopPosition(stops, currentStopIndex) { return 0; } - // Other insert new stop half-way betweeen current and next + // Other insert new stop half-way between current and next // (or current and previous if last). const preStop = isLastStopFocussed ? stops[currentStopIndex - 1] diff --git a/packages/story-editor/src/components/floatingMenu/stories/index.js b/packages/story-editor/src/components/floatingMenu/stories/index.js index b4eef259eef2..83e2036ca1e1 100644 --- a/packages/story-editor/src/components/floatingMenu/stories/index.js +++ b/packages/story-editor/src/components/floatingMenu/stories/index.js @@ -43,7 +43,7 @@ export default { 'selectionIdentifier', 'visuallyHidden', 'ref', - 'handelDismiss', + 'handleDismiss', ], }, }, diff --git a/packages/story-editor/src/components/footer/carousel/carouselContext/useCarouselScroll.ts b/packages/story-editor/src/components/footer/carousel/carouselContext/useCarouselScroll.ts index b2a2c8102973..0532be52a64b 100644 --- a/packages/story-editor/src/components/footer/carousel/carouselContext/useCarouselScroll.ts +++ b/packages/story-editor/src/components/footer/carousel/carouselContext/useCarouselScroll.ts @@ -144,7 +144,7 @@ function useCarouselScroll({ const { scrollLeft } = listElement; // If scrolled to the start, what is the min index of the first visible page - // in order for the current page to be at the very end of the current scoll + // in order for the current page to be at the very end of the current scroll const minVisiblePageIndex = Math.max( 0, currentPageIndex - showablePages + 1 diff --git a/packages/story-editor/src/components/footer/useFooterHeight.js b/packages/story-editor/src/components/footer/useFooterHeight.js index 7ad9aa67a784..347d196f7400 100644 --- a/packages/story-editor/src/components/footer/useFooterHeight.js +++ b/packages/story-editor/src/components/footer/useFooterHeight.js @@ -28,7 +28,7 @@ import { import { FOOTER_TOP_MARGIN } from './constants'; function useFooterHeight() { - // Footer heigth is exclusively determined by the carousel height + some fixed top margin + // Footer height is exclusively determined by the carousel height + some fixed top margin const { carouselState } = useLayout(({ state: { carouselState } }) => ({ carouselState, })); diff --git a/packages/story-editor/src/components/form/color/test/getPreviewStyle.js b/packages/story-editor/src/components/form/color/test/getPreviewStyle.js index 092649423afd..b353e922258b 100644 --- a/packages/story-editor/src/components/form/color/test/getPreviewStyle.js +++ b/packages/story-editor/src/components/form/color/test/getPreviewStyle.js @@ -57,7 +57,7 @@ describe('getPreviewStyle', () => { const pattern = { type: 'linear', alpha: 0.7 }; const result = getPreviewStyle(pattern); expect(result).toStrictEqual({ backgroundColor: 'red' }); - // Note the absense of alpha below + // Note the absence of alpha below expect(generatePatternStylesMock).toHaveBeenCalledWith({ type: 'linear' }); }); diff --git a/packages/story-editor/src/components/helpCenter/navigator/utils.js b/packages/story-editor/src/components/helpCenter/navigator/utils.js index d80bf7758735..4d185eab1dff 100644 --- a/packages/story-editor/src/components/helpCenter/navigator/utils.js +++ b/packages/story-editor/src/components/helpCenter/navigator/utils.js @@ -53,7 +53,7 @@ export function removeInnerElementFromLayoutFlow(innerEl, outerEl) { // change to the animated property. This prevents any // content flash. // - // Only way to guarentee the frame after styles + // Only way to guarantee the frame after styles // get applied is to do 2 frames from now. let id = requestAnimationFrame(() => { id = requestAnimationFrame(() => { diff --git a/packages/story-editor/src/components/helpCenter/toggle/test/index.js b/packages/story-editor/src/components/helpCenter/toggle/test/index.js index ff6c54236b44..50b2f24bc940 100644 --- a/packages/story-editor/src/components/helpCenter/toggle/test/index.js +++ b/packages/story-editor/src/components/helpCenter/toggle/test/index.js @@ -33,14 +33,14 @@ describe('help center toggle ', () => { expect(toggle).toBeInTheDocument(); }); - it('should have propper aria attributes when closed', () => { + it('should have proper aria attributes when closed', () => { renderWithProviders(); const toggle = screen.getByRole('button'); expect(toggle).toHaveAttribute('aria-haspopup'); }); - it('should have propper aria attributes when open', () => { + it('should have proper aria attributes when open', () => { const popupId = 'id-for-popup'; renderWithProviders(); diff --git a/packages/story-editor/src/components/panels/design/animation/effectChooserDropdown/utils/updateDynamicProps.js b/packages/story-editor/src/components/panels/design/animation/effectChooserDropdown/utils/updateDynamicProps.js index 0d254863e3a6..ef4393d15e90 100644 --- a/packages/story-editor/src/components/panels/design/animation/effectChooserDropdown/utils/updateDynamicProps.js +++ b/packages/story-editor/src/components/panels/design/animation/effectChooserDropdown/utils/updateDynamicProps.js @@ -24,7 +24,7 @@ import { } from '@googleforcreators/animation'; const updateDynamicProps = ({ animation, disabledOptions = [] }) => { - // we don't want to have a disbaled direction initially selected either. + // we don't want to have a disabled direction initially selected either. const panDirection = animation.panDirection && !disabledOptions.includes(animation.panDirection) ? animation.panDirection @@ -36,7 +36,7 @@ const updateDynamicProps = ({ animation, disabledOptions = [] }) => { case BACKGROUND_ANIMATION_EFFECTS.PAN_AND_ZOOM.value: return { ...animation, - // Defautl zoomDirection to scale in unless disabled + // Default zoomDirection to scale in unless disabled zoomDirection: disabledOptions.includes(ScaleDirection.ScaleIn) ? ScaleDirection.ScaleOut : ScaleDirection.ScaleIn, diff --git a/packages/story-editor/src/components/panels/design/textStyle/karma/textStyle.other.karma.js b/packages/story-editor/src/components/panels/design/textStyle/karma/textStyle.other.karma.js index 108819adba3d..dce79f44c3e2 100644 --- a/packages/story-editor/src/components/panels/design/textStyle/karma/textStyle.other.karma.js +++ b/packages/story-editor/src/components/panels/design/textStyle/karma/textStyle.other.karma.js @@ -53,7 +53,7 @@ describe('Text Style Panel', () => { await fixture.events.click( fixture.editor.sidebar.designPanel.textStyle.collapse ); - // Expect the inputs not to be visible since tha panel is collapsed. + // Expect the inputs not to be visible since the panel is collapsed. expect( () => fixture.editor.sidebar.designPanel.textStyle.lineHeight ).toThrow(); diff --git a/packages/story-editor/src/karma/copyAndPaste.cuj.karma.js b/packages/story-editor/src/karma/copyAndPaste.cuj.karma.js index b7a58b1e6f34..172e486d172b 100644 --- a/packages/story-editor/src/karma/copyAndPaste.cuj.karma.js +++ b/packages/story-editor/src/karma/copyAndPaste.cuj.karma.js @@ -293,7 +293,7 @@ describe('Background Copy & Paste', () => { // iterate through children with process await sequencedForEach(effectChooser.children, async (_, i) => { - // need to regrab the button because we're openeing + // need to regrab the button because we're opening // and closing effect chooser causing karma ids to change const effectButton = fixture.screen.getByRole('listbox', { name: /Animation: Effect Chooser Option List Selector/, diff --git a/packages/story-editor/src/karma/fixture/fixture.js b/packages/story-editor/src/karma/fixture/fixture.js index bbd763831769..63c3ba943707 100644 --- a/packages/story-editor/src/karma/fixture/fixture.js +++ b/packages/story-editor/src/karma/fixture/fixture.js @@ -1179,7 +1179,7 @@ class APIProviderFixture { * Wraps a fixture response in a promise. May additionally add `act()` calls as * needed. * - * @param {*} value The reponse value. + * @param {*} value The response value. * @return {!Promise} The promise of the response. */ function asyncResponse(value) { diff --git a/packages/templates/src/raw/12-hours-in-barcelona/template.json b/packages/templates/src/raw/12-hours-in-barcelona/template.json index 7088479e1b06..e2d6df0a80f0 100644 --- a/packages/templates/src/raw/12-hours-in-barcelona/template.json +++ b/packages/templates/src/raw/12-hours-in-barcelona/template.json @@ -401,7 +401,7 @@ "lineHeight": 1, "textAlign": "left", "padding": { "locked": true, "hasHiddenPadding": false }, - "content": "The writter", + "content": "The writer", "borderRadius": { "locked": true, "topLeft": 2, @@ -3031,7 +3031,7 @@ "width": 330, "height": 494, "id": 0, - "alt": "Interior of a railway staion like building", + "alt": "Interior of a railway station like building", "sizes": [], "isOptimized": false, "baseColor": "#1f1f1b", diff --git a/packages/templates/src/raw/celebrity-q-and-a/template.json b/packages/templates/src/raw/celebrity-q-and-a/template.json index c3585974bb12..ff4539731ea1 100644 --- a/packages/templates/src/raw/celebrity-q-and-a/template.json +++ b/packages/templates/src/raw/celebrity-q-and-a/template.json @@ -34,7 +34,7 @@ "width": 1080, "height": 1350, "id": 0, - "alt": "Free stock photo of a woman with afro in an appartment", + "alt": "Free stock photo of a woman with afro in an apartment", "sizes": [], "isPlaceholder": false, "isOptimized": false, @@ -391,7 +391,7 @@ "width": 720, "height": 1080, "id": 0, - "alt": "Free stock photo of a woman with afro in an appartment", + "alt": "Free stock photo of a woman with afro in an apartment", "sizes": [], "isPlaceholder": false, "isOptimized": false, @@ -1859,7 +1859,7 @@ "width": 1080, "height": 720, "id": 0, - "alt": "Free stock photo of a woman in an appartment", + "alt": "Free stock photo of a woman in an apartment", "sizes": [], "isPlaceholder": false, "isOptimized": false, diff --git a/packages/templates/src/raw/google-music-studio-tour/metaData.ts b/packages/templates/src/raw/google-music-studio-tour/metaData.ts index 4c9b30fe8623..ee650753e610 100644 --- a/packages/templates/src/raw/google-music-studio-tour/metaData.ts +++ b/packages/templates/src/raw/google-music-studio-tour/metaData.ts @@ -53,7 +53,7 @@ export default { }, ], description: __( - 'This template’s formal yet friendly appearance will let you create stories that are informational but also fun to watch. Present office and studio tours, showcase desk setups, inspire your audience with interior ideas, or do something else entirely. The possiblities are endless.', + 'This template’s formal yet friendly appearance will let you create stories that are informational but also fun to watch. Present office and studio tours, showcase desk setups, inspire your audience with interior ideas, or do something else entirely. The possibilities are endless.', 'web-stories' ), vertical: _x('Technology', 'template vertical', 'web-stories'), diff --git a/packages/templates/src/raw/los-angeles-city-guide/template.json b/packages/templates/src/raw/los-angeles-city-guide/template.json index 73afed34bd22..6da20a7d6a72 100644 --- a/packages/templates/src/raw/los-angeles-city-guide/template.json +++ b/packages/templates/src/raw/los-angeles-city-guide/template.json @@ -431,7 +431,7 @@ "width": 1920, "height": 1080, "id": 0, - "alt": "Poeple crossing the street", + "alt": "People crossing the street", "sizes": [], "isOptimized": false, "baseColor": "#d3d2d0", @@ -2278,7 +2278,7 @@ "height": 1050, "posterId": 0, "id": 0, - "alt": "Represantational map of Los Angeles", + "alt": "Representational map of Los Angeles", "sizes": [], "isOptimized": false, "baseColor": "#272727", diff --git a/packages/templates/src/raw/no-days-off/template.json b/packages/templates/src/raw/no-days-off/template.json index bf055983c518..64f234b32d38 100644 --- a/packages/templates/src/raw/no-days-off/template.json +++ b/packages/templates/src/raw/no-days-off/template.json @@ -1781,7 +1781,7 @@ "textAlign": "left", "type": "text", "id": "96fea994-b71e-442f-b611-16d73f520016", - "content": "Sweat\nResistent\nEarbuds", + "content": "Sweat\nResistant\nEarbuds", "fontSize": 22, "padding": { "horizontal": 0, "vertical": 0 } }, diff --git a/packages/templates/src/raw/plant-based-dyes/template.json b/packages/templates/src/raw/plant-based-dyes/template.json index 41b0cc41e4f8..fe84ee0a6cee 100644 --- a/packages/templates/src/raw/plant-based-dyes/template.json +++ b/packages/templates/src/raw/plant-based-dyes/template.json @@ -1083,7 +1083,7 @@ "pageTemplateType": "section", "groups": { "fa51342f-94c8-4e59-aa23-cca44e346091": { - "name": "Backgrond", + "name": "Background", "isLocked": false, "isCollapsed": true } @@ -3477,7 +3477,7 @@ "lineHeight": 1.1, "textAlign": "center", "padding": { "locked": true, "hasHiddenPadding": false }, - "content": "I mean, can you believe how easy that is? Water + Avocado + Fabric + Heat = the most gorgeous pink. The popular  millenial pink!", + "content": "I mean, can you believe how easy that is? Water + Avocado + Fabric + Heat = the most gorgeous pink. The popular  millennial pink!", "borderRadius": { "locked": true, "topLeft": 2, diff --git a/packages/templates/src/raw/self-care-guide/template.json b/packages/templates/src/raw/self-care-guide/template.json index 2ec53b74ef20..60773e9d583b 100644 --- a/packages/templates/src/raw/self-care-guide/template.json +++ b/packages/templates/src/raw/self-care-guide/template.json @@ -789,7 +789,7 @@ "textAlign": "left", "padding": { "vertical": 0, "horizontal": 0, "locked": true }, "type": "text", - "content": "Excercise", + "content": "Exercise", "borderRadius": { "locked": true, "topLeft": 2, diff --git a/packages/text-sets/src/raw/editorial.json b/packages/text-sets/src/raw/editorial.json index 4869b6dceca2..a314a3f40cab 100644 --- a/packages/text-sets/src/raw/editorial.json +++ b/packages/text-sets/src/raw/editorial.json @@ -273,7 +273,7 @@ "textAlign": "left", "padding": { "locked": true, "horizontal": 0, "vertical": 0 }, "type": "text", - "content": "The City by the Bay captures the love of over 25 million visitors each year! Charming, chilly and creative, there's no other place like it. Ensure you're making the most of your travels by following this loca's guide to fun, food and bus fare.", + "content": "The City by the Bay captures the love of over 25 million visitors each year! Charming, chilly and creative, there's no other place like it. Ensure you're making the most of your travels by following this local's guide to fun, food and bus fare.", "x": 40, "y": 423, "width": 332, diff --git a/packages/wp-dashboard/src/api/shopping.js b/packages/wp-dashboard/src/api/shopping.js index e6bde65d8415..29a04c05f4de 100644 --- a/packages/wp-dashboard/src/api/shopping.js +++ b/packages/wp-dashboard/src/api/shopping.js @@ -26,7 +26,7 @@ import { addQueryArgs } from '@googleforcreators/url'; /** * Get products. * - * @param {Object} config Configuation object. + * @param {Object} config Configuration object. * @param {string} search Search term. * @return {Promise} Request promise. */ diff --git a/packages/wp-utils/src/test/snakeToCamelCase.ts b/packages/wp-utils/src/test/snakeToCamelCase.ts index 33dc9dd7ece9..7fae7a70d9f9 100644 --- a/packages/wp-utils/src/test/snakeToCamelCase.ts +++ b/packages/wp-utils/src/test/snakeToCamelCase.ts @@ -60,7 +60,7 @@ describe('snakeToCamelCaseObjectKeys', () => { level_two_item_one: { level_three_item_one: 22, }, - leveTwoItemTwo: 'string', + levelTwoItemTwo: 'string', }, random: 'string', }, @@ -74,7 +74,7 @@ describe('snakeToCamelCaseObjectKeys', () => { levelTwoItemOne: { levelThreeItemOne: 22, }, - leveTwoItemTwo: 'string', + levelTwoItemTwo: 'string', }, random: 'string', }, diff --git a/tests/phpunit/integration/data/schema.json b/tests/phpunit/integration/data/schema.json index a733503562a2..a3414ff68ec1 100644 --- a/tests/phpunit/integration/data/schema.json +++ b/tests/phpunit/integration/data/schema.json @@ -9,7 +9,7 @@ "type": "string" }, "productUrl": { - "description": "Links to the product's website, whne the buy now button is clicked.", + "description": "Links to the product's website, when the buy now button is clicked.", "type": "string", "$ref": "#/$defs/https" }, diff --git a/tests/phpunit/integration/tests/Integrations/AMP.php b/tests/phpunit/integration/tests/Integrations/AMP.php index 41dae3dabb32..9190e2e5077c 100644 --- a/tests/phpunit/integration/tests/Integrations/AMP.php +++ b/tests/phpunit/integration/tests/Integrations/AMP.php @@ -134,7 +134,7 @@ public function data_test_filter_amp_to_amp_linking_element_excluded(): array { [ false, '', [], $div_anchor ], false, ], - 'Corecct node' => [ + 'Correct node' => [ [ false, '', [], $player_anchor ], true, ], From 5a7cfcb32de171c1680efa7c032804ee78b07748 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20Sz=C3=A9pe?= Date: Tue, 17 Oct 2023 06:10:08 +0000 Subject: [PATCH 2/3] Revert false positive --- packages/media/src/seekVideo.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/media/src/seekVideo.ts b/packages/media/src/seekVideo.ts index f81ddf03bcbd..28faf58cd6ef 100644 --- a/packages/media/src/seekVideo.ts +++ b/packages/media/src/seekVideo.ts @@ -36,7 +36,7 @@ function seekVideo(video: HTMLVideoElement, offset = 0.99): Promise { }, THREE_SECONDS); }); video.addEventListener('error', reject); - video.addEventListener('sought', () => resolve(), { once: true }); + video.addEventListener('seeked', () => resolve(), { once: true }); video.currentTime = offset; }); From 008ed25b6cbd64d1589e74f9e00609708b84ba1b Mon Sep 17 00:00:00 2001 From: Pascal Birchler Date: Tue, 17 Oct 2023 12:57:20 +0200 Subject: [PATCH 3/3] Fix camelCase --- .../story-editor/src/components/colorPicker/insertStop.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/story-editor/src/components/colorPicker/insertStop.js b/packages/story-editor/src/components/colorPicker/insertStop.js index c03a37854e8e..999248c476ac 100644 --- a/packages/story-editor/src/components/colorPicker/insertStop.js +++ b/packages/story-editor/src/components/colorPicker/insertStop.js @@ -44,9 +44,9 @@ function insertStop(stops, newPosition) { const following = stops[followingIndex]; // Find the ratio the new stop is from the preceding stop - const diffNewTopreceding = newPosition - preceding.position; - const diffFollowingTopreceding = following.position - preceding.position; - const ratio = diffNewTopreceding / diffFollowingTopreceding; + const diffNewToPreceding = newPosition - preceding.position; + const diffFollowingToPreceding = following.position - preceding.position; + const ratio = diffNewToPreceding / diffFollowingToPreceding; // Mix the two colors by that amount: const {