Fix(web, web-react, e2e): Flex reverse dictionary changes

- `horizontal-reverse` changed to `horizontal-reversed`

docs/DICTIONARIES.md

@@ -47,11 +47,11 @@ This project uses `dictionaries` to unify props between different components.
 
 ### Direction
 
-| Dictionary        | Values                                      | Code name         |
-| ----------------- | ------------------------------------------- | ----------------- |
-| Direction         | `horizontal`, `vertical`                    | Direction         |
-| DirectionAxis     | `x`, `y`                                    | DirectionAxis     |
-| DirectionExtended | Direction Dictionary + `horizontal-reverse` | DirectionExtended |
+| Dictionary        | Values                                       | Code name         |
+| ----------------- | -------------------------------------------- | ----------------- |
+| Direction         | `horizontal`, `vertical`                     | Direction         |
+| DirectionAxis     | `x`, `y`                                     | DirectionAxis     |
+| DirectionExtended | Direction Dictionary + `horizontal-reversed` | DirectionExtended |
 
 ### Emphasis
 

packages/web-react/src/components/Flex/README.md

@@ -20,10 +20,10 @@ Horizontal layout:
 </Flex>
 ```
 
-Horizontal reverse layout:
+Horizontal reversed layout:
 
 ```jsx
-<Flex direction="horizontal-reverse">
+<Flex direction="horizontal-reversed">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>

packages/web-react/src/components/Flex/demo/FlexHorizontalReverseLayout.tsx → packages/web-react/src/components/Flex/demo/FlexHorizontalReversedLayout.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import DocsBox from '../../../../docs/DocsBox';
 import Flex from '../Flex';
 
-const FlexHorizontalReverseLayout = () => (
-  <Flex direction="horizontal-reverse">
+const FlexHorizontalReversedLayout = () => (
+  <Flex direction="horizontal-reversed">
     <DocsBox size="small">Item 1</DocsBox>
     <DocsBox size="small">Item 2</DocsBox>
     <DocsBox size="small">Item 3</DocsBox>
   </Flex>
 );
 
-export default FlexHorizontalReverseLayout;
+export default FlexHorizontalReversedLayout;

packages/web-react/src/components/Flex/demo/index.tsx

@@ -4,7 +4,7 @@ import DocsSection from '../../../../docs/DocsSections';
 import FlexCustomSpacing from './FlexCustomSpacing';
 import FlexHorizontalAlignment from './FlexHorizontalAlignment';
 import FlexHorizontalLayout from './FlexHorizontalLayout';
-import FlexHorizontalReverseLayout from './FlexHorizontalReverseLayout';
+import FlexHorizontalReversedLayout from './FlexHorizontalReversedLayout';
 import FlexResponsiveAlignment from './FlexResponsiveAlignment';
 import FlexResponsiveCustomHorizontalSpacing from './FlexResponsiveCustomHorizontalSpacing';
 import FlexResponsiveCustomVerticalSpacing from './FlexResponsiveCustomVerticalSpacing';
@@ -19,8 +19,8 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <DocsSection title="Horizontal Layout">
       <FlexHorizontalLayout />
     </DocsSection>
-    <DocsSection title="Horizontal Reverse Layout">
-      <FlexHorizontalReverseLayout />
+    <DocsSection title="Horizontal Reversed Layout">
+      <FlexHorizontalReversedLayout />
     </DocsSection>
     <DocsSection title="Vertical Layout">
       <FlexVerticalLayout />

packages/web-react/src/constants/direction.ts

@@ -5,7 +5,7 @@ export const Direction = {
 
 export const DirectionExtended = {
   ...Direction,
-  HORIZONTAL_REVERSE: 'horizontal-reverse',
+  HORIZONTAL_REVERSED: 'horizontal-reversed',
 } as const;
 
 export enum DirectionAxis {

packages/web/src/scss/components/Flex/_Flex.scss

@@ -37,7 +37,7 @@
         // @see https://jira.almacareer.tech/browse/DS-1629 - Remove 'row' selector
         .Flex--#{$infix}row,
         .Flex--#{$infix}horizontal,
-        .Flex--#{$infix}horizontalReverse {
+        .Flex--#{$infix}horizontalReversed {
             display: flex;
         }
 
@@ -49,14 +49,14 @@
             flex-direction: row;
         }
 
-        .Flex--#{$infix}horizontalReverse {
+        .Flex--#{$infix}horizontalReversed {
             flex-direction: row-reverse;
         }
 
         // @deprecated The 'column' direction will be removed in the next major version.
         // Migration: delete 'column' selector
         // @see https://jira.almacareer.tech/browse/DS-1629 - Remove 'column' selector
-        // @see https://jira.almacareer.tech/browse/DS-1630 - Add 'verticalReverse' selector
+        // @see https://jira.almacareer.tech/browse/DS-1630 - Add 'verticalReversed' selector
         .Flex--#{$infix}column,
         .Flex--#{$infix}vertical {
             display: grid; // 2.

packages/web/src/scss/components/Flex/index.html

@@ -24,11 +24,11 @@ <h2 class="docs-Heading">Horizontal Layout</h2>
 
   <div class="Container">
 
-    <h2 class="docs-Heading">Horizontal Reverse Layout</h2>
+    <h2 class="docs-Heading">Horizontal Reversed Layout</h2>
 
     <div class="docs-Stack docs-Stack--start">
 
-      <div class="Flex Flex--horizontalReverse Flex--noWrap Flex--alignmentXStretch Flex--alignmentYStretch">
+      <div class="Flex Flex--horizontalReversed Flex--noWrap Flex--alignmentXStretch Flex--alignmentYStretch">
         <div class="docs-Box docs-Box--small">Item 1</div>
         <div class="docs-Box docs-Box--small">Item 2</div>
         <div class="docs-Box docs-Box--small">Item 3</div>