fix(storybook-utils): fix xsmall2 breakpoint name (#73)

Fix breakpoint name to match the key name which was updated by Jannick
SchwarzIT · Jan 8, 2024 · f703e4e · f703e4e
1 parent 124ae10
commit f703e4e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/.changeset/shiny-lies-cough.md b/.changeset/shiny-lies-cough.md
@@ -0,0 +1,14 @@
+---
+"@sit-onyx/storybook-utils": patch
+---
+
+refactor: rename breakpoints
+
+| Old     | New |
+| ------- | --- |
+| 2xsmall | 2xs |
+| sxmall  | xs  |
+| small   | sm  |
+| medium  | md  |
+| large   | lg  |
+| xlarge  | xl  |
diff --git a/packages/storybook-utils/src/theme.ts b/packages/storybook-utils/src/theme.ts
@@ -1,42 +1,42 @@
 /** All available Storybook breakpoints / viewports supported by Onyx. */
 export const ONYX_BREAKPOINTS = {
-  xsmall2 : {
-    name: "2xsmall",
+  "2xs": {
+    name: "2xs",
     styles: {
       width: "320px",
       height: "100%",
     },
   },
-  xsmall: {
-    name: "xsmall",
+  xs: {
+    name: "xs",
     styles: {
       width: "576px",
       height: "100%",
     },
   },
-  small: {
-    name: "small",
+  sm: {
+    name: "sm",
     styles: {
       width: "768px",
       height: "100%",
     },
   },
-  medium: {
-    name: "medium",
+  md: {
+    name: "md",
     styles: {
       width: "992px",
       height: "100%",
     },
   },
-  large: {
-    name: "large",
+  lg: {
+    name: "lg",
     styles: {
       width: "1440px",
       height: "100%",
     },
   },
-  xlarge: {
-    name: "xlarge",
+  xl: {
+    name: "xl",
     styles: {
       width: "1920px",
       height: "100%",