Add tablet as responsive width

docs/README.md

@@ -23,6 +23,29 @@ You can use **any** array of blocks as `flex-layout.row` and `flex-layout.col` c
 
 The props below support [`responsive-values`](https://github.com/vtex-apps/responsive-values), meaning that you can define to the same prop different values based on each device's screen size, such as mobile and desktop.
 
+For example:
+```
+{
+  "flex-layout.row#row": {
+    "props": {
+      "marginBottom": {
+        "mobile": 2,
+        "desktop": 6
+      },
+      "width": {
+        "desktop": "33%",
+        "tablet": "50%",
+        "phone": "100%"
+      }
+    },
+    "children": [
+      "flex-layout.col#col1",
+      "flex-layout.col#col2",
+      ...
+    ]
+  }
+```
+
 ### `flex-layout.row`
 
 | Prop name                  | Type                              | Description                                                                                                             | Default value |

react/hooks/responsiveWidth.ts

@@ -81,6 +81,7 @@ export const useResponsiveWidth = (
   const { device } = useDevice()
 
   const isPhone = device === 'phone'
+  const isTablet = device === 'tablet'
 
   const { preserveLayoutOnMobile = false, hideEmptyCols = false } =
     options || {}
@@ -102,7 +103,7 @@ export const useResponsiveWidth = (
     if (width && typeof width === 'object') {
       return {
         element: col,
-        width: isPhone ? width.mobile || 0 : width.desktop || 0,
+        width: isPhone ? width.phone || 0 : isTablet ? width.tablet || 0 : width.desktop || 0,
         hasDefinedWidth: true,
         isResponsive: true,
       }

react/modules/valuesParser.ts

@@ -5,14 +5,16 @@ type Group<T, U> = { [key in keyof T]: U }
 type TachyonsInputGroup<T> = Group<T, TachyonsScaleInput>
 interface ResponsiveInput<T> {
   mobile: T
+  phone: T
+  tablet: T
   desktop: T
 }
 
 const MAX_TACHYONS_SCALE = 11
 
 //eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isResponsiveInput = <T>(value: any): value is ResponsiveInput<T> =>
-  value && value.mobile != null && value.desktop != null
+  value && (value.mobile != null || value.phone != null || value.tablet != null) && value.desktop != null
 
 /** Takes a parser of units, and returns a parser that accepts either a
  * value or a responsive input of that same type of value
@@ -21,10 +23,12 @@ const isResponsiveInput = <T>(value: any): value is ResponsiveInput<T> =>
  */
 export const parseResponsive = <T, U>(parse: (value: T) => U) => (
   value: T | ResponsiveInput<T>
-): null | U | { mobile: U; desktop: U } => {
+): null | U | { mobile: U; phone: U; tablet: U; desktop: U } => {
   if (isResponsiveInput(value)) {
     return {
       mobile: parse(value.mobile),
+      phone: parse(value.phone),
+      tablet: parse(value.tablet),
       desktop: parse(value.desktop),
     }
   }