✨ Add default option to Flex component

Author: Frontendland

src/pages/components/flex.astro

@@ -17,6 +17,7 @@ const sections = getSections({
 })
 
 const gap = {
+    default: 'xxs',
     xs: 'xs',
     sm: 'sm',
     md: 'md',

src/tests/getLayoutClasses.test.ts

@@ -18,11 +18,12 @@ describe('getLayoutClasses', () => {
         expect(getLayoutClasses({ gap: 'xl5' })).toBe('xl5')
 
         expect(getLayoutClasses({ gap: {
+            default: 'sm',
             xs: 'xl2',
             sm: 'xl3',
             md: 'xl4',
             lg: 'xl5'
-        } })).toBe('xs-xl2 sm-xl3 md-xl4 lg-xl5')
+        } })).toBe('sm xs-xl2 sm-xl3 md-xl4 lg-xl5')
     })
 
     it('should return the correct classes for alignment', () => {
@@ -46,6 +47,10 @@ describe('getLayoutClasses', () => {
         } })).toBe('center')
 
         expect(getLayoutClasses({ alignment: {
+            default: {
+                horizontal: 'around',
+                vertical: 'stretch'
+            },
             xs: {
                 horizontal: 'start',
                 vertical: 'start'
@@ -63,6 +68,8 @@ describe('getLayoutClasses', () => {
                 vertical: 'baseline'
             }
         } })).toBe([
+            'justify-around',
+            'items-stretch',
             'xs-justify-start',
             'xs-items-start',
             'sm-center',
@@ -80,11 +87,12 @@ describe('getLayoutClasses', () => {
         expect(getLayoutClasses({ direction: 'column-reverse' })).toBe('column-reverse')
 
         expect(getLayoutClasses({ direction: {
+            default: 'column',
             xs: 'row',
             sm: 'column',
             md: 'row-reverse',
             lg: 'column-reverse'
-        } })).toBe('xs-row sm-column md-row-reverse lg-column-reverse')
+        } })).toBe('column xs-row sm-column md-row-reverse lg-column-reverse')
     })
 
     it('should return the correct classes for wrap', () => {
@@ -93,11 +101,12 @@ describe('getLayoutClasses', () => {
         expect(getLayoutClasses({ wrap: 'wrap-reverse' })).toBe('wrap-reverse')
 
         expect(getLayoutClasses({ wrap: {
+            default: 'nowrap',
             xs: 'wrap',
             sm: 'nowrap',
             md: 'wrap-reverse',
             lg: 'wrap'
-        } })).toBe('xs-wrap sm-nowrap md-wrap-reverse lg-wrap')
+        } })).toBe('nowrap xs-wrap sm-nowrap md-wrap-reverse lg-wrap')
     })
 
     it('should return the correct combined classes', () => {
@@ -112,6 +121,7 @@ describe('getLayoutClasses', () => {
 
         expect(getLayoutClasses({
             gap: {
+                default: 'xs',
                 xs: 'default',
                 sm: 'lg'
             },
@@ -130,17 +140,20 @@ describe('getLayoutClasses', () => {
                 sm: 'column'
             },
             wrap: {
+                default: 'wrap-reverse',
                 xs: 'nowrap',
                 sm: 'wrap'
             }
         })).toBe([
+            'xs',
             'xs-default',
             'sm-lg',
             'xs-center',
             'sm-justify-start',
             'sm-items-end',
             'xs-row',
             'sm-column',
+            'wrap-reverse',
             'xs-nowrap',
             'sm-wrap'
         ].join(' '))

src/utils/getLayoutClasses.ts

@@ -42,6 +42,7 @@ export type Wrap = 'wrap'
     | ''
 
 export type Responsive<T> = T | {
+    default?: T
     xs?: T
     sm?: T
     md?: T
@@ -68,15 +69,21 @@ export const getLayoutClasses = ({
 }: getLayoutClassesProps) => {
     const gaps = typeof gap === 'string'
         ? gap
-        : Object.entries(gap || {}).map(([key, value]) => `${key}-${value}`)
+        : Object.entries(gap || {}).map(([key, value]) => key === 'default'
+            ? value
+            : `${key}-${value}`)
 
     const directions = typeof direction === 'string'
         ? direction
-        : Object.entries(direction || {}).map(([key, value]) => `${key}-${value}`)
+        : Object.entries(direction || {}).map(([key, value]) => key === 'default'
+            ? value
+            : `${key}-${value}`)
 
     const wraps = typeof wrap === 'string'
         ? wrap
-        : Object.entries(wrap || {}).map(([key, value]) => `${key}-${value}`)
+        : Object.entries(wrap || {}).map(([key, value]) => key === 'default'
+            ? value
+            : `${key}-${value}`)
 
     // Flatten alignments, eg.: { xs: { horizontal: 'center' } } to { xs-justify: 'center' }
     const flattenAlignments = (obj: Responsive<Alignment>, prefix = ''): Responsive<Alignment> => {
@@ -89,7 +96,7 @@ export const getLayoutClasses = ({
                 return { ...acc, ...flattenAlignments(value, newKey) }
             }
 
-            return { ...acc, [newKey]: value }
+            return { ...acc, [newKey.replace('default-', '')]: value }
         }, {})
     }