@hero-design/rn 8.36.0-alpha.0 → 8.36.1

package/src/components/Checkbox/__tests__/__snapshots__/StyledCheckbox.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledCheckbox renders correctly when disabled is false 1`] = `
+exports[`StyledCheckbox renders correctly when disabled is false and readonly is false 1`] = `
 <View
   style={
     Array [
@@ -13,11 +13,45 @@ exports[`StyledCheckbox renders correctly when disabled is false 1`] = `
       undefined,
     ]
   }
-  themeDisabled={false}
+  themeState="default"
 />
 `;
 
-exports[`StyledCheckbox renders correctly when disabled is true 1`] = `
+exports[`StyledCheckbox renders correctly when disabled is false and readonly is true 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#808f91",
+        "borderRadius": 4,
+        "borderWidth": 2,
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+  themeState="readonly"
+/>
+`;
+
+exports[`StyledCheckbox renders correctly when disabled is true and readonly is false 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#bfc1c5",
+        "borderRadius": 4,
+        "borderWidth": 2,
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+  themeState="disabled"
+/>
+`;
+
+exports[`StyledCheckbox renders correctly when disabled is true and readonly is true 1`] = `
 <View
   style={
     Array [
@@ -30,7 +64,7 @@ exports[`StyledCheckbox renders correctly when disabled is true 1`] = `
       undefined,
     ]
   }
-  themeDisabled={true}
+  themeState="disabled"
 />
 `;
 
@@ -55,6 +89,27 @@ exports[`StyledWrapper renders correctly when disabled is false, withBorder is f
 />
 `;
 
+exports[`StyledWrapper renders correctly when disabled is false, withBorder is false 2`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "flexDirection": "row",
+      "opacity": 1,
+    }
+  }
+/>
+`;
+
 exports[`StyledWrapper renders correctly when disabled is false, withBorder is true 1`] = `
 <View
   accessible={true}
@@ -80,6 +135,73 @@ exports[`StyledWrapper renders correctly when disabled is false, withBorder is t
 />
 `;
 
+exports[`StyledWrapper renders correctly when disabled is false, withBorder is true 2`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#808f91",
+      "borderRadius": 8,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`StyledWrapper renders correctly when disabled is true, withBorder is false 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "flexDirection": "row",
+      "opacity": 1,
+    }
+  }
+/>
+`;
+
+exports[`StyledWrapper renders correctly when disabled is true, withBorder is false 2`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "flexDirection": "row",
+      "opacity": 1,
+    }
+  }
+/>
+`;
+
 exports[`StyledWrapper renders correctly when disabled is true, withBorder is true 1`] = `
 <View
   accessible={true}
@@ -104,3 +226,28 @@ exports[`StyledWrapper renders correctly when disabled is true, withBorder is tr
   }
 />
 `;
+
+exports[`StyledWrapper renders correctly when disabled is true, withBorder is true 2`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#bfc1c5",
+      "borderRadius": 8,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;

package/src/components/Checkbox/__tests__/__snapshots__/index.spec.tsx.snap

@@ -48,7 +48,7 @@ exports[`Checkbox renders correctly when checked is false and there is no descri
           undefined,
         ]
       }
-      themeDisabled={false}
+      themeState="default"
     />
   </View>
 </View>
@@ -100,6 +100,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
           },
           Array [
             Object {
+              "color": "#001f23",
               "position": "absolute",
               "top": 0,
             },
@@ -123,13 +124,13 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
           undefined,
         ]
       }
-      themeDisabled={false}
+      themeState="default"
     />
   </View>
 </View>
 `;
 
-exports[`Checkbox renders correctly when disabled is false, withBorder is false 1`] = `
+exports[`Checkbox renders correctly when disabled is false, withBorder is false and readonly is false 1`] = `
 <View
   accessibilityState={
     Object {
@@ -203,13 +204,93 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is false
           undefined,
         ]
       }
-      themeDisabled={false}
+      themeState="default"
     />
   </View>
 </View>
 `;
 
-exports[`Checkbox renders correctly when disabled is false, withBorder is true 1`] = `
+exports[`Checkbox renders correctly when disabled is false, withBorder is false and readonly is true 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "flexDirection": "row",
+      "opacity": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flex": 1,
+            "paddingRight": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Please agree to our privacy policy
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "overflow": "hidden",
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#808f91",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeState="readonly"
+    />
+  </View>
+</View>
+`;
+
+exports[`Checkbox renders correctly when disabled is false, withBorder is true and readonly is false 1`] = `
 <View
   accessibilityState={
     Object {
@@ -287,13 +368,13 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is true 1
           undefined,
         ]
       }
-      themeDisabled={false}
+      themeState="default"
     />
   </View>
 </View>
 `;
 
-exports[`Checkbox renders correctly when disabled is true, withBorder is false 1`] = `
+exports[`Checkbox renders correctly when disabled is false, withBorder is true and readonly is true 1`] = `
 <View
   accessibilityState={
     Object {
@@ -312,8 +393,256 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
   onStartShouldSetResponder={[Function]}
   style={
     Object {
+      "borderColor": "#808f91",
+      "borderRadius": 8,
+      "borderWidth": 1,
       "flexDirection": "row",
       "opacity": 1,
+      "padding": 16,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flex": 1,
+            "paddingRight": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Please agree to our privacy policy
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "overflow": "hidden",
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#808f91",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeState="readonly"
+    />
+  </View>
+</View>
+`;
+
+exports[`Checkbox renders correctly when disabled is true, withBorder is false and readonly is false 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "flexDirection": "row",
+      "opacity": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flex": 1,
+            "paddingRight": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="subdued"
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Please agree to our privacy policy
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "overflow": "hidden",
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#bfc1c5",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeState="disabled"
+    />
+  </View>
+</View>
+`;
+
+exports[`Checkbox renders correctly when disabled is true, withBorder is false and readonly is true 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "flexDirection": "row",
+      "opacity": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flex": 1,
+            "paddingRight": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="subdued"
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Please agree to our privacy policy
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "overflow": "hidden",
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#bfc1c5",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeState="disabled"
+    />
+  </View>
+</View>
+`;
+
+exports[`Checkbox renders correctly when disabled is true, withBorder is true and readonly is false 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#bfc1c5",
+      "borderRadius": 8,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
     }
   }
 >
@@ -367,13 +696,13 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
           undefined,
         ]
       }
-      themeDisabled={true}
+      themeState="disabled"
     />
   </View>
 </View>
 `;
 
-exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`] = `
+exports[`Checkbox renders correctly when disabled is true, withBorder is true and readonly is true 1`] = `
 <View
   accessibilityState={
     Object {
@@ -451,7 +780,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
           undefined,
         ]
       }
-      themeDisabled={true}
+      themeState="disabled"
     />
   </View>
 </View>

package/src/components/Checkbox/__tests__/index.spec.tsx

@@ -2,22 +2,42 @@ import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
 
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Checkbox from '..';
+import Checkbox, { getThemeState } from '..';
+
+describe('getThemeState', () => {
+  it.each`
+    disabled | readonly | expected
+    ${false} | ${false} | ${'default'}
+    ${false} | ${true}  | ${'readonly'}
+    ${true}  | ${false} | ${'disabled'}
+    ${true}  | ${true}  | ${'disabled'}
+  `(
+    `should return correctly if disabled is $disabled and readonly is $readonly`,
+    ({ disabled, readonly, expected }) => {
+      expect(getThemeState({ disabled, readonly })).toBe(expected);
+    }
+  );
+});
 
 describe('Checkbox', () => {
   it.each`
-    withBorder | disabled
-    ${false}   | ${false}
-    ${false}   | ${true}
-    ${true}    | ${false}
-    ${true}    | ${true}
+    withBorder | disabled | readonly
+    ${false}   | ${false} | ${false}
+    ${false}   | ${true}  | ${false}
+    ${true}    | ${false} | ${false}
+    ${true}    | ${true}  | ${false}
+    ${false}   | ${false} | ${true}
+    ${false}   | ${true}  | ${true}
+    ${true}    | ${false} | ${true}
+    ${true}    | ${true}  | ${true}
   `(
-    'renders correctly when disabled is $disabled, withBorder is $withBorder',
-    ({ disabled, withBorder }) => {
+    'renders correctly when disabled is $disabled, withBorder is $withBorder and readonly is $readonly',
+    ({ disabled, withBorder, readonly }) => {
       const wrapper = renderWithTheme(
         <Checkbox
           disabled={disabled}
           withBorder={withBorder}
+          readonly={readonly}
           description="Please agree to our privacy policy"
         />
       );