Revert "Use PascalCase for viewSize enums"

This reverts commit bdf872e.
Altinn · Jan 3, 2024 · 07df7f0 · 07df7f0
1 parent bdf872e
commit 07df7f0
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 53 deletions.
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/EditGrid.tsx
@@ -25,7 +25,7 @@ const setGridOnComponent = (gridValues: GridSizes, component: FormComponent) =>
 export const EditGrid = ({ handleComponentChange, component }: IGenericEditComponent) => {
   const [gridValues, setGridValues] = useState<GridSizes>(component.grid ?? {});
   const [selectedViewSizeForGridProp, setSelectedViewSizeForGridProp] = useState<ViewSize>(
-    ViewSize.Xs,
+    ViewSize.xs,
   );
   const { t } = useTranslation();
 
@@ -36,11 +36,11 @@ export const EditGrid = ({ handleComponentChange, component }: IGenericEditCompo
   };
 
   const iconMapping: Record<ViewSize, ReactNode> = {
-    [ViewSize.Xs]: <MobileSmallIcon />,
-    [ViewSize.Sm]: <MobileIcon />,
-    [ViewSize.Md]: <TabletIcon />,
-    [ViewSize.Lg]: <LaptopIcon />,
-    [ViewSize.Xl]: <MonitorIcon />,
+    [ViewSize.xs]: <MobileSmallIcon />,
+    [ViewSize.sm]: <MobileIcon />,
+    [ViewSize.md]: <TabletIcon />,
+    [ViewSize.lg]: <LaptopIcon />,
+    [ViewSize.xl]: <MonitorIcon />,
   };
 
   return (
@@ -54,19 +54,15 @@ export const EditGrid = ({ handleComponentChange, component }: IGenericEditCompo
       <Tabs.List className={classes.tabs}>
         {Object.keys(ViewSize).map((viewSize: ViewSize) => {
           return (
-            <Tabs.Tab
-              key={viewSize}
-              value={viewSize.toLowerCase()}
-              icon={iconMapping[viewSize] || null}
-            >
-              {t(`ux_editor.modal_properties_grid_size_${viewSize.toLowerCase()}`)}
+            <Tabs.Tab key={viewSize} value={viewSize} icon={iconMapping[viewSize] || null}>
+              {t(`ux_editor.modal_properties_grid_size_${viewSize}`)}
             </Tabs.Tab>
           );
         })}
       </Tabs.List>
       {Object.keys(ViewSize).map((viewSize: ViewSize) => {
         return (
-          <Tabs.Content key={viewSize} value={viewSize.toLowerCase()}>
+          <Tabs.Content key={viewSize} value={viewSize}>
             <EditGridForGivenViewSize
               handleUpdateGrid={(newGridValues: GridSizes) => handleUpdateGrid(newGridValues)}
               gridValues={gridValues}

diff --git a/...ages/ux-editor/src/components/config/editModal/EditGrid/EditGridForGivenViewSize.test.tsx b/...ages/ux-editor/src/components/config/editModal/EditGrid/EditGridForGivenViewSize.test.tsx
@@ -21,7 +21,7 @@ type RenderProps = {
 
 const render = async ({
   gridValues = { xs: 3, md: 10 },
-  viewSize = ViewSize.Md,
+  viewSize = ViewSize.md,
   handleUpdateGrid = jest.fn(),
 }: RenderProps = {}) => {
   await waitForData();
@@ -55,7 +55,7 @@ describe('EditGridForGivenViewSize', () => {
   });
 
   it('should show that default value, 12, is set for grid when gridValue is not set for mobile viewSize', async () => {
-    await render({ gridValues: { md: 3 }, viewSize: ViewSize.Sm });
+    await render({ gridValues: { md: 3 }, viewSize: ViewSize.sm });
 
     const lockIconMobile = screen.getByRole('img', { name: 'lockIcon' });
     expect(lockIconMobile).toBeInTheDocument();

diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/types/ViewSize.ts b/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/types/ViewSize.ts
@@ -1,7 +1,7 @@
 export enum ViewSize {
-  Xs = 'xs',
-  Sm = 'sm',
-  Md = 'md',
-  Lg = 'lg',
-  Xl = 'xl',
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
 }
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/utils.test.ts b/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/utils.test.ts
@@ -6,30 +6,30 @@ describe('utils', () => {
   describe('findEffectiveGridSize', () => {
     it('Returns correct value', () => {
       const gridSizes: GridSizes = {
-        [ViewSize.Xs]: 12,
-        [ViewSize.Md]: 6,
+        [ViewSize.xs]: 12,
+        [ViewSize.md]: 6,
       };
-      expect(findEffectiveGridSize(gridSizes, ViewSize.Xs)).toBe(12);
-      expect(findEffectiveGridSize(gridSizes, ViewSize.Sm)).toBe(12);
-      expect(findEffectiveGridSize(gridSizes, ViewSize.Md)).toBe(6);
-      expect(findEffectiveGridSize(gridSizes, ViewSize.Lg)).toBe(6);
-      expect(findEffectiveGridSize(gridSizes, ViewSize.Xl)).toBe(6);
+      expect(findEffectiveGridSize(gridSizes, ViewSize.xs)).toBe(12);
+      expect(findEffectiveGridSize(gridSizes, ViewSize.sm)).toBe(12);
+      expect(findEffectiveGridSize(gridSizes, ViewSize.md)).toBe(6);
+      expect(findEffectiveGridSize(gridSizes, ViewSize.lg)).toBe(6);
+      expect(findEffectiveGridSize(gridSizes, ViewSize.xl)).toBe(6);
     });
 
     it('Returns 12 when no grid values are set', () => {
       const gridSizes: GridSizes = {};
-      expect(findEffectiveGridSize(gridSizes, ViewSize.Xs)).toBe(12);
-      expect(findEffectiveGridSize(gridSizes, ViewSize.Sm)).toBe(12);
-      expect(findEffectiveGridSize(gridSizes, ViewSize.Md)).toBe(12);
-      expect(findEffectiveGridSize(gridSizes, ViewSize.Lg)).toBe(12);
-      expect(findEffectiveGridSize(gridSizes, ViewSize.Xl)).toBe(12);
+      expect(findEffectiveGridSize(gridSizes, ViewSize.xs)).toBe(12);
+      expect(findEffectiveGridSize(gridSizes, ViewSize.sm)).toBe(12);
+      expect(findEffectiveGridSize(gridSizes, ViewSize.md)).toBe(12);
+      expect(findEffectiveGridSize(gridSizes, ViewSize.lg)).toBe(12);
+      expect(findEffectiveGridSize(gridSizes, ViewSize.xl)).toBe(12);
     });
 
     it('Returns 12 when no grid values on view sizes below the current one are set', () => {
       const gridSizes: GridSizes = {
-        [ViewSize.Xl]: 6,
+        [ViewSize.xl]: 6,
       };
-      expect(findEffectiveGridSize(gridSizes, ViewSize.Xs)).toBe(12);
+      expect(findEffectiveGridSize(gridSizes, ViewSize.xs)).toBe(12);
     });
   });
 });
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/utils.ts b/frontend/packages/ux-editor/src/components/config/editModal/EditGrid/utils.ts
@@ -7,32 +7,32 @@ export const findEffectiveGridSize = (
   currentViewSize: ViewSize,
 ): GridSize => {
   switch (currentViewSize) {
-    case ViewSize.Xs:
-      return selectedViewSizes[ViewSize.Xs] || 12;
-    case ViewSize.Sm:
-      return selectedViewSizes[ViewSize.Sm] || selectedViewSizes[ViewSize.Xs] || 12;
-    case ViewSize.Md:
+    case ViewSize.xs:
+      return selectedViewSizes[ViewSize.xs] || 12;
+    case ViewSize.sm:
+      return selectedViewSizes[ViewSize.sm] || selectedViewSizes[ViewSize.xs] || 12;
+    case ViewSize.md:
       return (
-        selectedViewSizes[ViewSize.Md] ||
-        selectedViewSizes[ViewSize.Sm] ||
-        selectedViewSizes[ViewSize.Xs] ||
+        selectedViewSizes[ViewSize.md] ||
+        selectedViewSizes[ViewSize.sm] ||
+        selectedViewSizes[ViewSize.xs] ||
         12
       );
-    case ViewSize.Lg:
+    case ViewSize.lg:
       return (
-        selectedViewSizes[ViewSize.Lg] ||
-        selectedViewSizes[ViewSize.Md] ||
-        selectedViewSizes[ViewSize.Sm] ||
-        selectedViewSizes[ViewSize.Xs] ||
+        selectedViewSizes[ViewSize.lg] ||
+        selectedViewSizes[ViewSize.md] ||
+        selectedViewSizes[ViewSize.sm] ||
+        selectedViewSizes[ViewSize.xs] ||
         12
       );
-    case ViewSize.Xl:
+    case ViewSize.xl:
       return (
-        selectedViewSizes[ViewSize.Xl] ||
-        selectedViewSizes[ViewSize.Lg] ||
-        selectedViewSizes[ViewSize.Md] ||
-        selectedViewSizes[ViewSize.Sm] ||
-        selectedViewSizes[ViewSize.Xs] ||
+        selectedViewSizes[ViewSize.xl] ||
+        selectedViewSizes[ViewSize.lg] ||
+        selectedViewSizes[ViewSize.md] ||
+        selectedViewSizes[ViewSize.sm] ||
+        selectedViewSizes[ViewSize.xs] ||
         12
       );
   }