jornada-ui 2.0.7 → 2.0.8

package/src/common/icons-svg/interface.d.ts

@@ -1,19 +1,19 @@
-/**
- * IMPORTS
- */
-
-import { SvgProps } from "react-native-svg";
-import { SVG_NAME } from "./constants";
-
-interface ISvgProps extends SvgProps {
-  width?: number;
-  height?: number;
-  color?: string;
-  size?: number;
-  icon: keyof typeof SVG_NAME;
-  background?: string;
-}
-/**
- * EXPORTS
- */
-export { ISvgProps };
+/**
+ * IMPORTS
+ */
+
+import { SvgProps } from "react-native-svg";
+import { SVG_NAME } from "./constants";
+
+interface ISvgProps extends SvgProps {
+  width?: number;
+  height?: number;
+  color?: string;
+  size?: number;
+  icon: keyof typeof SVG_NAME;
+  background?: string;
+}
+/**
+ * EXPORTS
+ */
+export { ISvgProps };

package/src/components/check-box/index.tsx

@@ -0,0 +1,94 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import Typography from "../../components/typography";
+import Box from "../../components/box";
+
+// commons icons-svg
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import type { ICheckBoxProps } from "./interface";
+
+/**
+ * Componente CheckBox para interação da UI.
+ */
+const CheckBox: React.FC<ICheckBoxProps> = ({
+  width_box_check_icon,
+  is_checked,
+  background_color_check,
+  background_box_check_icon,
+  text_label,
+  text_size_label,
+  color_text_label,
+  onPress,
+  ...res
+}) => {
+
+  const iconName = is_checked ? "CHECK_BOX_OUTLINE" : "CHECK_BOX";
+  const iconSize = is_checked ? 24 : 19;
+
+  return (
+    <TouchableOpacity
+      testID="checkbox-button"
+      onPress={onPress}
+      {...res}
+    >
+      <Box
+        width="100%"
+        paddingStyle={{
+          paddingLeft: 16,
+          paddingRight: 16,
+        }}
+        flexStyle={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-start",
+        }}
+        testID={is_checked ? "check-box-true" : "check-box-false"}
+      >
+        <Box
+          width={width_box_check_icon ?? 30}
+          height={40}
+          backgroundColor={
+            background_box_check_icon ?? "transparent"
+          }
+          flexStyle={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "flex-start",
+          }}
+        >
+          <Icons
+            size={iconSize}
+            color={background_color_check}
+            background={background_color_check}
+            icon={iconName}
+          />
+        </Box>
+
+        {!!text_label && (
+          <Typography
+            text={text_label}
+            color={color_text_label ?? "white"}
+            size={text_size_label ?? 16}
+            lineHeight={18}
+            letterSpacing="regular"
+          />
+        )}
+      </Box>
+    </TouchableOpacity>
+  );
+};
+
+CheckBox.displayName = "CheckBox";
+
+/**
+ * EXPORT
+ */
+export default asBaseComponent(CheckBox);

package/src/components/check-box/interface.ts

@@ -0,0 +1,31 @@
+/**
+ * IMPORTS
+ */
+import type { TouchableOpacityProps } from "react-native";
+
+interface ICheckBoxProps extends TouchableOpacityProps {
+  /**Propriedade do tamanho do box do icon-check-outline */
+  width_box_check_icon?: number;
+
+  /**Propriedade para saber se o checkbox esta marcado */
+  is_checked: boolean;
+
+  /**Propriedade para mudar a cor do icon quando for marcado */
+  background_color_check?: string;
+
+  /**Propriedade para mudar a cor do icon quando for marcado */
+  background_box_check_icon?: string;
+
+  /**Propriedade do textLabel */
+  text_label?: string;
+
+  /**Propriedade do tamanho do textLabel */
+  text_size_label?: number;
+
+  /**Propriedade da cor do textLabel */
+  color_text_label?: string;
+}
+/**
+ * EXPORTS
+ */
+export type { ICheckBoxProps };

package/src/index.tsx

@@ -49,6 +49,7 @@ export { default as ModalToConfirmations } from "./components/modals/modal-to-co
 export { default as ActivityTimeline } from "./components/activity-step";
 export { default as NotificationCard } from "./components/notification-card";
 export { default as NotificationDetailCard } from "./components/notification-details-card";
+export { default as CheckBox } from "./components/check-box";
 
 // adicionar o storybook + teste
 export { default as WeeklyHoursBalance } from "./components/weekly-hours-balance";

package/src/stories/check-box/check-box.stories.tsx

@@ -0,0 +1,84 @@
+/**
+ * IMPORTS
+ */
+
+import type React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+// components
+import CheckBox from "../../components/check-box";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof CheckBox> = {
+  title: "componente/CheckBox",
+  component: CheckBox as React.FC,
+  args: {
+    onPress: () => { },
+  },
+  parameters: {
+    notes: `
+# CheckBox
+
+Este é um componente de CheckBox.
+
+Você usa assim:
+
+\`\`\`tsx
+<CheckBox
+  is_checked={true}
+  width_box_check_icon={28}
+  background_color_check={theme.colors.orange[150]}
+  text_size_label={16}
+  text_label="Confirmo que este abastecimento pertence à minha viagem e autorizo seu lançamento."
+  color_text_label={theme.colors.gray[700]}
+  background_box_check_icon="transparent"
+  onPress={() => {}}
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CheckBoxChecked: Story = {
+  name: "checkbox-checked",
+  args: {
+    is_checked: true,
+    width_box_check_icon: 28,
+    background_color_check: theme.colors.orange[150],
+    text_size_label: 16,
+    text_label:
+      "Confirmo que este abastecimento pertence à minha viagem e autorizo seu lançamento.",
+    color_text_label: theme.colors.gray[700],
+    background_box_check_icon: "transparent",
+  },
+};
+
+export const CheckBoxUnchecked: Story = {
+  name: "checkbox-unchecked",
+  args: {
+    is_checked: false,
+    width_box_check_icon: 28,
+    background_color_check: theme.colors.gray[850],
+    text_size_label: 16,
+    text_label:
+      "Confirmo que este abastecimento pertence à minha viagem e autorizo seu lançamento.",
+    color_text_label: theme.colors.gray[700],
+    background_box_check_icon: "transparent",
+  },
+};
+
+export const CheckBoxWithoutLabel: Story = {
+  name: "checkbox-without-label",
+  args: {
+    is_checked: true,
+    width_box_check_icon: 28,
+    background_color_check: theme.colors.orange[150],
+    background_box_check_icon: "transparent",
+  },
+};