Current Product Widget

.eslintrc.json

@@ -25,7 +25,7 @@
   "rules": {
     "comma-spacing": ["error", { "before": false, "after": true }],
     "cypress/no-pause": "error",
-    "indent": ["error", 2],
+    "@typescript-eslint/indent": ["error", 2],
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "double"],
     "semi": ["error", "never"],

packages/common-components/rollup.config.js

@@ -20,7 +20,7 @@ export default {
   plugins: [
     peerDepsExternal(),
     image(),
-    resolve(),
+    resolve({ browser: true }),
     commonjs(),
     typescript(),
     postcss({

packages/common-components/src/Button/Button.tsx

@@ -7,7 +7,6 @@ import { Typography } from "../Typography"
 const useStyles = makeStyles(
   ({ constants, typography, animation, palette, overrides }: ITheme) =>
     createStyles({
-      // JSS in CSS goes here
       root: {
         ...typography.button,
         borderRadius: `${constants.generalUnit / 4}px`,
@@ -110,6 +109,29 @@ const useStyles = makeStyles(
         },
         ...overrides?.Button?.variants?.secondary?.root
       },
+      tertiary: {
+        backgroundColor: palette.additional["gray"][3],
+        color: palette.common.black.main,
+        "& svg": {
+          fill: palette.common.white.main
+        },
+        "&:hover": {
+          backgroundColor: palette.primary.main,
+          color: palette.common.white.main,
+          ...overrides?.Button?.variants?.tertiary?.hover
+        },
+        "&:focus": {
+          backgroundColor: palette.primary.main,
+          color: palette.common.white.main,
+          ...overrides?.Button?.variants?.tertiary?.focus
+        },
+        "&:active": {
+          backgroundColor: palette.primary.main,
+          color: palette.common.white.main,
+          ...overrides?.Button?.variants?.tertiary?.active
+        },
+        ...overrides?.Button?.variants?.tertiary?.root
+      },
       outline: {
         color: palette.additional["gray"][8],
         backgroundColor: palette.common?.white.main,
@@ -271,7 +293,7 @@ interface IButtonProps extends Omit<ReactButton, "size"> {
   className?: string
   children?: ReactNode | ReactNode[]
   fullsize?: boolean
-  variant?: "link" | "primary" | "secondary" | "outline" | "dashed" | "danger"
+  variant?: "link" | "primary" | "secondary" |"tertiary" | "outline" | "dashed" | "danger"
   iconButton?: boolean
   size?: "large" | "medium" | "small"
   type?: "button" | "submit" | "reset"

packages/common-components/src/Icons/types.d.ts

@@ -4,7 +4,7 @@ type fontSizeProp = "inherit" | "small" | "medium" | "large"
 declare module "*.svg" {
   import React = require("react")
   export const ReactComponent: React.FunctionComponent<React.SVGProps<
-    SVGSVGElement
+  SVGSVGElement
   >>
   const src: string
   export default src

packages/common-components/src/MenuDropdown/MenuDropdown.tsx

@@ -162,12 +162,12 @@ interface IMenuDropdownProps {
   indicator?: typeof SvgIcon
   animation?: "rotate" | "flip" | "none"
   anchor?:
-    | "top-left"
-    | "top-center"
-    | "top-right"
-    | "bottom-left"
-    | "bottom-center"
-    | "bottom-right"
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right"
   menuItems: IMenuItem[]
   title?: string
   classNames?: {

packages/common-components/src/TextInput/TextInput.tsx

@@ -72,6 +72,7 @@ const useStyles = makeStyles(
         "&.disabled": {
           "& input": {
             color: palette.additional["gray"][6],
+            "-webkit-text-fill-color": palette.additional["gray"][6],
             backgroundColor: palette.additional["gray"][3],
             ...overrides?.TextInput?.input?.disabled
           },

packages/common-components/src/Toasts/ToastContent.tsx

@@ -7,7 +7,7 @@ import { CheckCircleIcon, CloseCircleIcon, CloseCirceSvg, CrossSvg } from "../Ic
 import { ProgressBar } from "../ProgressBar"
 import { Loading } from "../Spinner"
 
-const useStyles = makeStyles(({ constants, palette, animation, overrides }: ITheme) => {
+const useStyles = makeStyles(({ constants, palette, overrides }: ITheme) => {
   return createStyles({
     root: {
       backgroundColor: palette.additional["gray"][3],
@@ -16,10 +16,6 @@ const useStyles = makeStyles(({ constants, palette, animation, overrides }: IThe
       padding: constants.generalUnit * 2,
       borderRadius: 4,
       position: "relative",
-      "&:hover $closeIcon": {
-        visibility: "visible",
-        opacity: 1
-      },
       ...overrides?.Toasts?.root
     },
     progressBox: {
@@ -66,9 +62,6 @@ const useStyles = makeStyles(({ constants, palette, animation, overrides }: IThe
       backgroundColor: palette.additional["gray"][1],
       border: "1px solid",
       borderColor: palette.additional["gray"][9],
-      opacity: 0,
-      visibility: "hidden",
-      transition: `opacity ${animation.transform}ms`,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -147,6 +140,7 @@ const ToastContent = ({ toast, onClose }: ToastContentProps) => {
       }
       {isClosable &&
         <div
+          data-testid={`button-close-toast-${toast.testId}`}
           className={classes.closeIcon}
           onClick={onClose}
         >

packages/common-components/src/Typography/Typography.tsx

@@ -78,18 +78,18 @@ interface OwnProps extends React.HTMLProps<HTMLDivElement> {
   className?: string
   children?: ReactNode | ReactNode[]
   variant?:
-    | "h1"
-    | "h2"
-    | "h3"
-    | "h4"
-    | "h5"
-    | "h6"
-    | "subtitle1"
-    | "subtitle2"
-    | "body1"
-    | "body2"
-    | "caption"
-    | "button"
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "subtitle1"
+  | "subtitle2"
+  | "body1"
+  | "body2"
+  | "caption"
+  | "button"
   component?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p"
 }
 

packages/common-components/src/index.ts

@@ -20,6 +20,7 @@ export * from "./Icons"
 export * from "./Modal"
 export * from "./NumberInput"
 export * from "./MenuDropdown"
+export * from "./Paper"
 export * from "./ProgressBar"
 export * from "./RadioInput"
 export * from "./Router"

packages/common-components/src/stories/Button.stories.tsx

@@ -15,7 +15,7 @@ export const actionsData = {
   onClick: action("onClickButton")
 }
 
-type VariantOption = "primary" | "outline" | "dashed" | "danger" | undefined;
+type VariantOption = "primary" | "secondary" | "tertiary" | "outline" | "dashed" | "danger" | undefined;
 const variantOptions: VariantOption[] = [
   "primary",
   "outline",

packages/common-components/src/stories/Typography.stories.tsx

@@ -15,17 +15,17 @@ export const actionsData = {
 }
 
 type VariantOption = "h1"
-  |"h2"
-  |"h3"
-  |"h4"
-  |"h5"
-  |"h6"
-  |"subtitle1"
-  |"subtitle2"
-  |"body1"
-  |"body2"
-  |"caption"
-  |"button"
+|"h2"
+|"h3"
+|"h4"
+|"h5"
+|"h6"
+|"subtitle1"
+|"subtitle2"
+|"body1"
+|"body2"
+|"caption"
+|"button"
 
 const variantOptions: VariantOption[] = [
   "h1",

packages/common-theme/src/Create/CreateBreakpoints.ts

@@ -6,10 +6,10 @@
 export type Overwrite<T, U> = Omit<T, keyof U> & U
 
 type GenerateStringUnion<T> = Extract<
-  {
-    [Key in keyof T]: true extends T[Key] ? Key : never
-  }[keyof T],
-  string
+{
+  [Key in keyof T]: true extends T[Key] ? Key : never
+}[keyof T],
+string
 >
 
 /**
@@ -22,18 +22,18 @@ type GenerateStringUnion<T> = Extract<
  * @internal
  */
 export type OverridableStringUnion<T, U = Record<any, any>> = GenerateStringUnion<
-  Overwrite<T, U>
+Overwrite<T, U>
 >
 
 export type BreakpointDefaults = Record<
-  "xs" | "sm" | "md" | "lg" | "xl" | string,
-  true
+"xs" | "sm" | "md" | "lg" | "xl" | string,
+true
 >
 export interface BreakpointOverrides {[key: string]: unknown}
 
 export type Breakpoint = OverridableStringUnion<
-  BreakpointDefaults,
-  BreakpointOverrides
+BreakpointDefaults,
+BreakpointOverrides
 >
 export type BreakpointValues = { [key in Breakpoint]: number }
 export const keys: Breakpoint[] = []
@@ -49,10 +49,10 @@ export interface IBreakpoints {
 }
 
 export type BreakpointsOptions = Partial<
-  {
-    unit: string
-    step: number
-  } & IBreakpoints
+{
+  unit: string
+  step: number
+} & IBreakpoints
 >
 
 // Keep in mind that @media is inclusive by the CSS specification.

packages/common-theme/src/Defaults/ThemeConfig.ts

@@ -169,7 +169,7 @@ const DefaultThemeConfig: IThemeConfig = {
     },
     button: {
       ...defaultFontStyles,
-      fontWeight: defaultFontWeights.regular,
+      fontWeight: defaultFontWeights.semibold,
       fontSize: 14,
       lineHeight: "22px"
     },

packages/common-theme/src/Hooks/useDoubleClick.ts

@@ -9,12 +9,12 @@ export function useDoubleClick(
   const onClick = useCallback((e?: React.MouseEvent) => {
     if (e) {
       switch (e.detail) {
-      case 1:
-        actionSingleClick && actionSingleClick(e)
-        break
-      case 2:
-        actionDoubleClick && actionDoubleClick(e)
-        break
+        case 1:
+          actionSingleClick && actionSingleClick(e)
+          break
+        case 2:
+          actionDoubleClick && actionDoubleClick(e)
+          break
       }
     }
   }, [actionSingleClick, actionDoubleClick])

packages/common-theme/src/Overrides/Button.ts

@@ -24,6 +24,12 @@ export interface IButtonOverride {
       focus?: Record<string, any>
       active?: Record<string, any>
     }
+    tertiary?: {
+      root?: Record<string, any>
+      hover?: Record<string, any>
+      focus?: Record<string, any>
+      active?: Record<string, any>
+    }
     outline?: {
       root?: Record<string, any>
       hover?: Record<string, any>

packages/files-ui/cypress/support/page-objects/binPage.ts

@@ -8,7 +8,6 @@ export const binPage = {
   // bin page specific file browser elements
   recoverSelectedButton: () => cy.get("[data-testId=button-recover-selected-file]"),
   deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"),
-  permanentDeleteSuccessToast: () => cy.get("[data-testId=toast-deletion-success]", { timeout: 10000 }),
   selectAllCheckbox: () => cy.get("[data-testId=checkbox-select-all]"),
 
   // kebab menu elements

packages/files-ui/cypress/support/page-objects/homePage.ts

@@ -1,6 +1,7 @@
 import { basePage } from "./basePage"
 import { fileBrowser } from "./fileBrowser"
 import { fileUploadModal } from "./modals/fileUploadModal"
+import { uploadCompleteToast } from "./toasts/uploadCompleteToast"
 
 export const homePage = {
   ...basePage,
@@ -12,8 +13,6 @@ export const homePage = {
   moveSelectedButton: () => cy.get("[data-testId=button-move-selected-file]"),
   deleteSelectedButton: () => cy.get("[data-testId=button-delete-selected-file]"),
   selectAllCheckbox: () => cy.get("[data-testId=checkbox-select-all]"),
-  uploadStatusToast: () => cy.get("[data-testId=toast-upload-status]", { timeout: 10000 }),
-  deleteSuccessToast: () => cy.get("[data-testId=toast-deletion-success]", { timeout: 10000 }),
   fileRenameInput: () => cy.get("[data-cy=rename-form] input"),
   fileRenameSubmitButton: () => cy.get("[data-cy=rename-submit-button]"),
   fileRenameErrorLabel: () => cy.get("[data-cy=rename-form] span.minimal.error"),
@@ -36,7 +35,8 @@ export const homePage = {
 
     // ensure upload is complete before proceeding
     fileUploadModal.body().should("not.exist")
-    this.uploadStatusToast().should("not.exist")
+    uploadCompleteToast.body().should("be.visible")
+    uploadCompleteToast.closeButton().click()
   }
 
 }

packages/files-ui/cypress/support/page-objects/toasts/deleteSuccessToast.ts

@@ -0,0 +1,4 @@
+export const deleteSuccessToast = {
+  body: () => cy.get("[data-testId=toast-deletion-success]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-deletion-success]")
+}

packages/files-ui/cypress/support/page-objects/toasts/moveSuccessToast.ts

@@ -0,0 +1,4 @@
+export const moveSuccessToast = {
+  body: () => cy.get("[data-testId=toast-move-success]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-move-success]")
+}

packages/files-ui/cypress/support/page-objects/toasts/uploadCompleteToast.ts

@@ -0,0 +1,4 @@
+export const uploadCompleteToast = {
+  body: () => cy.get("[data-testId=toast-upload-complete]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-upload-complete]")
+}