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

package/src/components/Checkbox/index.tsx

@@ -37,8 +37,29 @@ export interface CheckboxProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Readonly of the checkbox.
+   */
+  readonly?: boolean;
 }
 
+type getStateType = {
+  disabled: boolean;
+  readonly: boolean;
+};
+
+export const getThemeState = ({ disabled, readonly }: getStateType) => {
+  if (disabled) {
+    return 'disabled';
+  }
+
+  if (readonly) {
+    return 'readonly';
+  }
+
+  return 'default';
+};
+
 const Checkbox = ({
   checked,
   description,
@@ -47,31 +68,39 @@ const Checkbox = ({
   onPress,
   style,
   testID,
-}: CheckboxProps) => (
-  <StyledWrapper
-    onPress={onPress}
-    disabled={disabled}
-    themeDisabled={disabled}
-    themeWithBorder={withBorder}
-    style={style}
-    testID={testID}
-  >
-    {!!description && (
-      <StyledDescription intent={disabled ? 'subdued' : 'body'} variant="small">
-        {description}
-      </StyledDescription>
-    )}
-    <StyledCheckboxContainer>
-      {checked && (
-        <StyledCheckMark
-          icon="box-check"
-          intent={disabled ? 'disabled-text' : 'text'}
-          testID="check-mark"
-        />
+  readonly = false,
+}: CheckboxProps) => {
+  const themeState = getThemeState({ disabled, readonly });
+
+  return (
+    <StyledWrapper
+      onPress={onPress}
+      disabled={disabled || readonly}
+      themeWithBorder={withBorder}
+      themeState={themeState}
+      style={style}
+      testID={testID}
+    >
+      {!!description && (
+        <StyledDescription
+          intent={disabled ? 'subdued' : 'body'}
+          variant="small"
+        >
+          {description}
+        </StyledDescription>
       )}
-      <StyledCheckbox themeDisabled={disabled} />
-    </StyledCheckboxContainer>
-  </StyledWrapper>
-);
+      <StyledCheckboxContainer>
+        {checked && (
+          <StyledCheckMark
+            icon="box-check"
+            testID="check-mark"
+            themeState={themeState}
+          />
+        )}
+        <StyledCheckbox themeState={themeState} />
+      </StyledCheckboxContainer>
+    </StyledWrapper>
+  );
+};
 
 export default Checkbox;

package/src/components/FAB/ActionGroup/index.tsx

@@ -145,7 +145,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
           visible={active}
           animationType="fade"
           transparent
-          statusBarTranslucent={true}
+          statusBarTranslucent
         >
           <StyledContainerInModal testID={testID} style={[style]}>
             <StyledBackdrop testID="back-drop" />

package/src/components/Portal/PortalHost.tsx

@@ -4,6 +4,9 @@ import { usePortalState } from './usePortalState';
 import { PortalType } from './contexts';
 
 export interface PortalHostProps {
+  /*
+   * Name of the portal
+   * */
   name: string;
 }
 const PortalHostComponent = ({ name }: PortalHostProps) => {

package/src/components/Portal/PortalProvider.tsx

@@ -6,7 +6,13 @@ import { INITIAL_STATE } from './constants';
 import { PortalDispatchContext, PortalStateContext } from './contexts';
 
 export interface PortalProviderProps {
+  /*
+   * The name of the root host
+   */
   rootHostName?: string;
+  /*
+   * The children to render
+   */
   children: ReactNode | ReactNode[];
 }
 

package/src/components/Portal/index.tsx

@@ -9,8 +9,19 @@ import { PortalHost } from './PortalHost';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
 
 export interface PortalProps {
+  /*
+   * Name of the portal. If name is not provided, a random name will be generated.
+   */
   name?: string;
+
+  /*
+   * Name of the portal host. If name is not provided, a default host will be used.
+   */
   hostName?: string;
+
+  /*
+   * Content of the portal.
+   */
   children?: ReactNode | ReactNode[];
 }
 

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -334,8 +334,11 @@ Object {
         "wrapper": 1,
       },
       "colors": Object {
-        "default": "#001f23",
-        "disabledBorder": "#bfc1c5",
+        "borders": Object {
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
+          "readonly": "#808f91",
+        },
       },
       "radii": Object {
         "icon": 4,

package/src/theme/components/checkbox.ts

@@ -2,8 +2,11 @@ import type { GlobalTheme } from '../global';
 
 const getCheckboxTheme = (theme: GlobalTheme) => {
   const colors = {
-    default: theme.colors.primaryOutline,
-    disabledBorder: theme.colors.disabledOutline,
+    borders: {
+      default: theme.colors.primaryOutline,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.inactiveOutline,
+    },
   };
 
   const space = {

package/types/components/Checkbox/StyledCheckbox.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { TouchableOpacity, View } from 'react-native';
+type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeWithBorder: boolean;
-    themeDisabled: boolean;
+    themeState: CheckboxThemeState;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
@@ -23,11 +24,14 @@ export declare const StyledCheckbox: import("@emotion/native").StyledComponent<i
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeDisabled: boolean;
+    themeState: CheckboxThemeState;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledCheckMark: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    themeState: CheckboxThemeState;
 }, {}, {}>;
+export {};

package/types/components/Checkbox/index.d.ts

@@ -28,6 +28,15 @@ export interface CheckboxProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Readonly of the checkbox.
+     */
+    readonly?: boolean;
 }
-declare const Checkbox: ({ checked, description, withBorder, disabled, onPress, style, testID, }: CheckboxProps) => JSX.Element;
+type getStateType = {
+    disabled: boolean;
+    readonly: boolean;
+};
+export declare const getThemeState: ({ disabled, readonly }: getStateType) => "default" | "disabled" | "readonly";
+declare const Checkbox: ({ checked, description, withBorder, disabled, onPress, style, testID, readonly, }: CheckboxProps) => JSX.Element;
 export default Checkbox;