Merge branch 'master' into gomezivann-dialog-review

Author: Jialecl

app/package-lock.json

@@ -36,7 +36,7 @@
     ]
   },
   "devDependencies": {
-    "cypress": "^3.7.0",
+    "cypress": "^12.7.0",
     "cypress-image-snapshot": "^3.1.1"
   }
 }

app/package.json

@@ -915,7 +915,7 @@ export const componentTokens = {
     linkMarginRight: "16px",
     linkMarginLeft: "16px",
     linkFocusColor: globalTokens.hal_blue_l_50,
-    scrollBarThumbColor: "#66666626",
+    scrollBarThumbColor: globalTokens.color_grey_a_200,
     scrollBarTrackColor: globalTokens.transparent,
   },
   slider: {

lib/src/common/variables.js

@@ -280,30 +280,4 @@ describe("FileInput component tests", () => {
       ]);
     });
   });
-  test("File input sends value when submitted in a form", () => {
-    const newFile = new File(["newFile"], "newFile.pdf", { type: "pdf" });
-    const handlerOnSubmit = jest.fn((e) => {
-      e.preventDefault();
-      const formData = new FormData(e.target);
-      const formProps = Object.fromEntries(formData);
-      expect(formProps).toStrictEqual({ file: newFile });
-    });
-    const { getByText, getByLabelText } = render(
-      <form onSubmit={handlerOnSubmit}>
-        <DxcFileInput
-          label="File input label"
-          name="file"
-          helperText="File input helper text"
-          mode="filedrop"
-          buttonLabel="Choose"
-          dropAreaLabel="(or drop the files)"
-        />
-        <button type="submit">Submit</button>
-      </form>
-    );
-    const inputFile = getByLabelText("File input label", { hidden: true });
-    const submit = getByText("Submit");
-    fireEvent.change(inputFile, { target: { files: [newFile] } });
-    userEvent.click(submit);
-  });
 });

lib/src/file-input/FileInput.test.js

@@ -105,6 +105,7 @@ const DxcFileInput = React.forwardRef<RefType, FileInputPropsType>(
       const selectedFiles = e.target.files;
       const filesArray = Object.keys(selectedFiles).map((key) => selectedFiles[key]);
       addFile(filesArray);
+      e.target.value = null;
     };
 
     const onDelete = useCallback(
@@ -179,10 +180,8 @@ const DxcFileInput = React.forwardRef<RefType, FileInputPropsType>(
                 accept={accept}
                 multiple={multiple}
                 onChange={selectFiles}
-                name={name}
                 disabled={disabled}
                 readOnly
-                aria-hidden="true"
               />
               <DxcButton
                 mode="secondary"
@@ -223,10 +222,8 @@ const DxcFileInput = React.forwardRef<RefType, FileInputPropsType>(
                 accept={accept}
                 multiple={multiple}
                 onChange={selectFiles}
-                name={name}
                 disabled={disabled}
                 readOnly
-                aria-hidden="true"
               />
               <DragDropArea
                 isDragging={isDragging}

lib/src/file-input/FileInput.tsx

@@ -56,6 +56,7 @@ const FileItem = ({
               onClick={() => {
                 onDelete(fileName);
               }}
+              type="button"
               title={translatedLabels.fileInput.deleteFileActionTitle}
               aria-label={translatedLabels.fileInput.deleteFileActionTitle}
               tabIndex={tabIndex}

lib/src/file-input/FileItem.tsx

@@ -35,6 +35,7 @@ const DxcTab = forwardRef(
         <Tab
           href={!disabled && href ? href : undefined}
           disabled={disabled}
+          active={active}
           iconPosition={iconPosition}
           hasIcon={hasIcons}
           ref={(anchorRef) => {
@@ -112,6 +113,7 @@ const TabContainer = styled.div<TabContainerProps>`
 type TabStyleProps = {
   disabled: boolean;
   hasIcon: boolean;
+  active?: boolean;
   iconPosition: "top" | "left";
 };
 const Tab = styled.a<TabStyleProps>`
@@ -122,7 +124,8 @@ const Tab = styled.a<TabStyleProps>`
 
   text-decoration-color: transparent;
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
-  background: ${(props) => props.theme.selectedBackgroundColor};
+  background: ${(props) =>
+    props.active ? props.theme.selectedBackgroundColor : props.theme.unselectedBackgroundColor};
 
   height: ${(props) => (props.hasIcon && props.iconPosition === "top" ? "66px" : "32px")};
   min-width: 164px;

lib/src/nav-tabs/Tab.tsx

@@ -8,7 +8,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@dxc-technology/halstack-react": "0.0.0-a5b9b2c",
+    "@dxc-technology/halstack-react": "0.0.0-50c4df3",
     "@radix-ui/react-popover": "0.1.6",
     "@types/styled-components": "^5.1.18",
     "axios": "^0.27.2",

website/package.json

@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import InsetPageLayout from "../../../screens/components/inset/InsetPageLayout";
+import InsetSpecsPage from "../../../screens/components/inset/specs/InsetSpecsPage";
+
+const Specifications = () => {
+  return (
+    <>
+      <Head>
+        <title>Inset Specs — Halstack Design System</title>
+      </Head>
+      <InsetSpecsPage></InsetSpecsPage>
+    </>
+  );
+};
+
+Specifications.getLayout = function getLayout(page: ReactElement) {
+  return <InsetPageLayout>{page}</InsetPageLayout>;
+};
+
+export default Specifications;

website/pages/components/inset/specifications.tsx

@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import InsetPageLayout from "screens/components/inset/InsetPageLayout";
+import InsetUsagePage from "screens/components/inset/usage/InsetUsagePage";
+
+const Usage = () => {
+  return (
+    <>
+      <Head>
+        <title>Inset Usage — Halstack Design System</title>
+      </Head>
+      <InsetUsagePage></InsetUsagePage>
+    </>
+  );
+};
+
+Usage.getLayout = function getLayout(page: ReactElement) {
+  return <InsetPageLayout>{page}</InsetPageLayout>;
+};
+
+export default Usage;