Merge pull request #45 from expfig/develop

Develop

src/components/button/__test__/button.spec.tsx

@@ -12,10 +12,8 @@ const Providers: React.FC = ({ children }: any) => {
 	return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };
 
-const svg = `<path d="M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"></path>`;
-
 describe("Button Component Test", () => {
-	it("should be possible to render the Bhutan component.", () => {
+	it("should be possible to render the Button component.", () => {
 		const { getByTestId } = render(<Button dataTestid="component-button" />, {
 			wrapper: Providers,
 		});
@@ -25,7 +23,7 @@ describe("Button Component Test", () => {
 		expect(buttonElement).toBeTruthy();
 	});
 
-	it("should be possible to render the text (Add) if the loding inside the button component is (false)", () => {
+	it("should be possible to render the title (Add) if the loding inside the button component is (false)", () => {
 		const { getByTestId } = render(
 			<Button
 				dataTestid="button-component"
@@ -61,13 +59,15 @@ describe("Button Component Test", () => {
 			}
 		);
 
-		const element = getByTestId("button-component");
+		const elementButton = getByTestId("button-component");
 
-		// vamos encontrar o texto passado para o botão
-		const textElement = element.children.item(0);
+		const elementSvgIcon = getByTestId("oval-loading");
+
+		// espero que encontre um elemento butão em tela
+		expect(elementButton).toBeTruthy();
 
-		// espero que encontre um elemento do tipo svg
-		expect(textElement?.innerHTML.match(svg)).toBeTruthy();
+		// espero que encontre um elemento icone
+		expect(elementSvgIcon).toBeTruthy();
 	});
 
 	it("must be possible to call the function (onClick) at least once from the Button", async () => {

src/components/button/button.tsx

@@ -1,8 +1,7 @@
 /**
  * IMPORTS
  */
-import { AiOutlineLoading3Quarters } from "react-icons/ai";
-
+import { Oval } from "react-loader-spinner";
 // typings
 import { type IButtonProps } from "./interface";
 
@@ -31,7 +30,17 @@ const Button = ({
 			disabled={disabled}
 		>
 			{loading ? (
-				<AiOutlineLoading3Quarters size={22} color={color ?? "#fff"} />
+				<Oval
+					height={22}
+					width={22}
+					color={"#0d6efd"}
+					wrapperClass=""
+					visible={true}
+					ariaLabel="oval-loading"
+					secondaryColor="#FFF"
+					strokeWidth={2}
+					strokeWidthSecondary={2}
+				/>
 			) : (
 				<Title color={color ?? "#fff"} weight={weight}>
 					{title}

src/components/button/styles.ts

@@ -15,6 +15,9 @@ const Container = styled.button<IButtonProps>`
 	padding: 10px;
 	border-radius: 4px;
 	margin-bottom: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 
 	cursor: ${({ disabled }) => disabled && "not-allowed !important;"};
 

src/components/loading/__test__/loading.spec.tsx

@@ -7,9 +7,12 @@ import { ThemeProvider } from "styled-components";
 
 import { render, screen } from "@testing-library/react";
 
-import theme from "../../../global/styles/theme";
+// components
 import { Loading } from "../loading";
 
+// styles
+import theme from "../../../global/styles/theme";
+
 const Providers: React.FC = ({ children }: any) => {
 	return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };
@@ -30,8 +33,10 @@ describe("Component Loading Test", () => {
 			wrapper: Providers,
 		});
 
-		const elementLoadingIcon = getByTestId("icon-fi-loader");
+		// procurando pelo icone
+		const elementLoadingIcon = getByTestId("oval-loading");
 
+		// procurando pelo texto xxxx
 		const elementLoadingText = screen.getByText(
 			"Carregando, por favor, aguade."
 		);

src/components/loading/loading.tsx

@@ -1,8 +1,8 @@
 /**
  * IMPORTS
  */
-import { FiLoader } from "react-icons/fi";
 import { useTheme } from "styled-components";
+import { Oval } from "react-loader-spinner";
 
 // typings
 import { type LoadingProps } from "./interface";
@@ -19,7 +19,17 @@ const Loading = ({
 	return (
 		<ContainerLoading data-testid={dataTestId ?? "component-loading"}>
 			<WrapperIcon>
-				<FiLoader data-testid="icon-fi-loader" size={size} color={color} />
+				<Oval
+					ariaLabel="oval-loading"
+					width={size}
+					height={size}
+					visible={true}
+					color={color}
+					wrapperClass=""
+					secondaryColor="#3c3535"
+					strokeWidth={2}
+					strokeWidthSecondary={2}
+				/>
 				<p style={{ marginTop: 12 }}>
 					<strong style={{ color: theme.colors.black_100 }}>
 						Carregando, por favor, aguade.

src/components/modal-approval/index.ts

@@ -0,0 +1,4 @@
+/**
+ * EXPORTS
+ */
+export * from "./modal-aprovation";

src/components/modal-approval/interface.ts

@@ -0,0 +1,15 @@
+/**
+ * IMPORTS
+ */
+
+interface ModalAprovationProps {
+	isModalOpen: boolean;
+	isLoading: boolean;
+	onAprovationDocumentAndCoil: () => void;
+	onOpenAndClosedClick: () => void;
+}
+
+/**
+ * EXPORTS
+ */
+export type { ModalAprovationProps };

src/components/modal-approval/modal-aprovation.tsx

@@ -0,0 +1,93 @@
+/**
+ * IMPORTS
+ */
+import { useTheme } from "styled-components";
+import { FiX } from "react-icons/fi";
+
+// components
+import { Button } from "../button";
+import { Modal } from "../modal";
+import { Text } from "../text";
+
+// typings
+import { type ModalAprovationProps } from "./interface";
+
+// styles
+import {
+	WrapperHeader,
+	WrapperHeaderTitle,
+	ButtonClosed,
+	WrapperTextDescriptionModal,
+	WrapperButtonModal,
+	SubTitle,
+} from "./modal-styles";
+
+const ModalAprovation = ({
+	isModalOpen,
+	onOpenAndClosedClick,
+	onAprovationDocumentAndCoil,
+	isLoading = false,
+}: ModalAprovationProps) => {
+	const theme = useTheme();
+
+	return (
+		<Modal isOpen={isModalOpen} onRequestCloseClick={onOpenAndClosedClick}>
+			<WrapperHeader>
+				<WrapperHeaderTitle>
+					<Text
+						text="APROVAÇÃO DE DOCUMENTO"
+						align="center"
+						letterHeight={24}
+						letterSpacing={0.5}
+						color={theme.colors.black_200}
+						size={18}
+						weight="600"
+					/>
+				</WrapperHeaderTitle>
+
+				<ButtonClosed>
+					<FiX
+						color={theme.colors.black_200}
+						size={24}
+						onClick={onOpenAndClosedClick}
+					/>
+				</ButtonClosed>
+			</WrapperHeader>
+
+			<WrapperTextDescriptionModal>
+				<SubTitle>
+					{isLoading
+						? "Aprovando documento..."
+						: "Você tem certeza que deseja aprovar o documento/foto selecionada?"}
+				</SubTitle>
+			</WrapperTextDescriptionModal>
+
+			<WrapperButtonModal>
+				<Button
+					onClick={onOpenAndClosedClick}
+					width={"46%"}
+					weight={600}
+					title="Cancelar"
+					backgroundColor={theme.colors.red_500}
+					color={theme.colors.natural}
+					loading={false}
+				/>
+
+				<Button
+					onClick={onAprovationDocumentAndCoil}
+					width={"46%"}
+					weight={600}
+					title="Sim, tenho certeza!"
+					backgroundColor={theme.colors.green_200}
+					color={theme.colors.natural}
+					loading={isLoading}
+				/>
+			</WrapperButtonModal>
+		</Modal>
+	);
+};
+
+/**
+ * EXPORTS
+ */
+export { ModalAprovation };

src/components/modal-approval/modal-styles.ts

@@ -0,0 +1,105 @@
+/**
+ * IMPORTS
+ */
+import styled from "styled-components";
+
+const WrapperHeader = styled.div`
+	width: 100%;
+	height: 2.4rem;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	@media screen and (max-width: 768px) {
+		width: 100%;
+	}
+`;
+
+const WrapperHeaderTitle = styled.div`
+	width: 100%;
+	display: flex;
+	align-items: flex-end;
+	justify-content: flex-end;
+
+	@media screen and (max-width: 968px) {
+		width: 100%;
+		justify-content: center;
+		align-items: center;
+	}
+
+	@media screen and (max-width: 768px) {
+		width: 100%;
+	}
+`;
+
+const SubTitle = styled.p`
+	font-size: 18px;
+	width: 60%;
+	text-align: center;
+	color: ${({ theme }) => theme.colors.gray_500};
+	line-height: 28px;
+	letter-spacing: 0.5;
+
+	@media screen and (max-width: 768px) {
+		font-size: 1rem;
+		width: 100%;
+	}
+`;
+
+const ButtonClosed = styled.button`
+	width: 3.12rem;
+	height: 3.12rem;
+	border-radius: 1.62rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`;
+
+const WrapperTextDescriptionModal = styled.div`
+	width: 100%;
+	height: 4.38rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: 1rem;
+	margin-bottom: auto;
+	border-top: 1px solid ${({ theme }) => theme.colors.gray_350};
+	border-bottom: 1px solid ${({ theme }) => theme.colors.gray_350};
+
+	@media screen and (max-width: 968px) {
+		background-color: transparent;
+		height: 6rem;
+	}
+
+	@media screen and (max-width: 768px) {
+		background-color: transparent;
+		height: 5.38rem;
+	}
+`;
+
+const WrapperButtonModal = styled.div`
+	width: 100%;
+	height: 4.38rem;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: 2rem;
+	padding: 0 1rem;
+
+	@media screen and (max-width: 768px) {
+		height: 6rem;
+		flex-direction: column;
+	}
+`;
+
+/**
+ * EXPORTS
+ */
+export {
+	WrapperHeader,
+	WrapperHeaderTitle,
+	SubTitle,
+	ButtonClosed,
+	WrapperTextDescriptionModal,
+	WrapperButtonModal,
+};

src/components/modal-fail-approval/data-mocked/data-mocked.ts

@@ -0,0 +1,18 @@
+/**
+ * IMPORTS
+ */
+
+const options = [
+	{
+		value: "Bobina com número não correspondente",
+		label: "Bobina com número não correspondente",
+	},
+	{ value: "Foto Borrada", label: "Foto Borrada" },
+	{ value: "Image embaçada", label: "Image embaçada" },
+	{ value: "Nenhuma das opção abaixo", label: "Nenhuma das opção abaixo" },
+];
+
+/**
+ * EXPORTS
+ */
+export { options };

src/components/modal-fail-approval/index.ts

@@ -0,0 +1,4 @@
+/**
+ * EXPORTS
+ */
+export * from "./modal-fail-approval";