carbon-react 110.7.0 → 110.8.0

package/esm/components/heading/heading.style.js

@@ -56,9 +56,16 @@ const StyledHeadingBackButton = styled(Link)`
       outline: 3px solid var(--colorsSemanticFocus500);
     }
 
+    &:hover {
+      ${StyledIcon} {
+        color: var(--colorsActionMinor600);
+      }
+    }
+
     ${StyledIcon} {
       margin-right: 0;
       display: inline-flex;
+      color: var(--colorsActionMinor500);
     }
   }
 `;
@@ -93,17 +100,12 @@ const StyledSubHeader = styled.div`
     `}
 `;
 const StyledHeadingIcon = styled(Icon)`
-  color: var(--colorsActionMinor500);
   height: 30px;
 
   &:before,
   &${StyledIcon}:before {
     font-size: 24px;
   }
-
-  &:hover {
-    color: var(--colorsActionMinor600);
-  }
 `;
 const StyledSeparator = styled.hr`
   border-top: 2px solid var(--colorsUtilityMajor100);

package/esm/components/link/link.component.d.ts

@@ -1,14 +1,11 @@
 import React from "react";
 import { IconType } from "components/icon/icon-type";
-export interface LinkProps extends React.AriaAttributes {
-    /** The disabled state of the link. */
-    disabled?: boolean;
+import { StyledLinkProps } from "./link.style";
+export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
     /** An href for an anchor tag. */
     href?: string;
     /** An icon to display next to the link. */
     icon?: IconType;
-    /** Which side of the link to the render the link. */
-    iconAlign?: "left" | "right";
     /** Function called when the mouse is clicked. */
     onClick?: (ev: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     /** Function called when a key is pressed. */
@@ -27,8 +24,6 @@ export interface LinkProps extends React.AriaAttributes {
     target?: string;
     /** Aria label for accessibility purposes */
     ariaLabel?: string;
-    /** Allows to create skip link */
-    isSkipLink?: boolean;
     /** allows to set rel property in <a> tag */
     rel?: string;
 }

package/esm/components/link/link.component.js

@@ -23,6 +23,8 @@ const Link = /*#__PURE__*/React.forwardRef(({
   tooltipMessage,
   tooltipPosition,
   target,
+  variant = "default",
+  isDarkBackground,
   ...rest
 }, ref) => {
   const l = useLocale();
@@ -48,7 +50,6 @@ const Link = /*#__PURE__*/React.forwardRef(({
     return hasProperAlignment ? /*#__PURE__*/React.createElement(Icon, {
       type: icon,
       bgSize: "extra-small",
-      color: "--colorsActionMajor500",
       disabled: disabled,
       ariaLabel: ariaLabel,
       tooltipMessage: tooltipMessage,
@@ -91,7 +92,9 @@ const Link = /*#__PURE__*/React.forwardRef(({
     disabled: disabled,
     className: className,
     iconAlign: iconAlign,
-    hasContent: Boolean(children)
+    hasContent: Boolean(children),
+    variant: variant,
+    isDarkBackground: isDarkBackground
   }, tagComponent("link", rest), isSkipLink && {
     "data-element": "skip-link"
   }), createLinkBasedOnType());
@@ -152,6 +155,7 @@ Link.propTypes = {
   "href": PropTypes.string,
   "icon": PropTypes.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "iconAlign": PropTypes.oneOf(["left", "right"]),
+  "isDarkBackground": PropTypes.bool,
   "isSkipLink": PropTypes.bool,
   "onClick": PropTypes.func,
   "onKeyDown": PropTypes.func,
@@ -159,7 +163,8 @@ Link.propTypes = {
   "rel": PropTypes.string,
   "target": PropTypes.string,
   "tooltipMessage": PropTypes.string,
-  "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"])
+  "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  "variant": PropTypes.oneOf(["default", "negative", "neutral"])
 };
 export { Link };
 Link.displayName = "Link";

package/esm/components/link/link.config.d.ts

@@ -1,2 +1,3 @@
 export declare const LINK_POSITIONS: string[];
 export declare const LINK_ALIGNMENTS: string[];
+export declare const LINK_VARIANTS: string[];

package/esm/components/link/link.config.js

@@ -1,2 +1,3 @@
 export const LINK_POSITIONS = ["bottom", "left", "right", "top"];
-export const LINK_ALIGNMENTS = ["left", "right"];
+export const LINK_ALIGNMENTS = ["left", "right"];
+export const LINK_VARIANTS = ["default", "negative", "neutral"];

package/esm/components/link/link.style.d.ts

@@ -1,7 +1,19 @@
-import { LinkProps } from "./link.component";
-interface StyledLinkProps extends Pick<LinkProps, "isSkipLink" | "iconAlign" | "disabled"> {
+declare type Variants = "default" | "negative" | "neutral";
+export interface StyledLinkProps {
+    /** The disabled state of the link. */
+    disabled?: boolean;
+    /** Which side of the link to the render the link. */
+    iconAlign?: "left" | "right";
+    /** Allows to create skip link */
+    isSkipLink?: boolean;
+    /** Sets the colour styling when component is rendered on a dark background */
+    isDarkBackground?: boolean;
+    /** Allows link styling to be updated for light or dark backgrounds */
+    variant?: Variants;
+}
+interface PrivateStyledLinkProps {
     hasContent: boolean;
 }
-declare const StyledLink: import("styled-components").StyledComponent<"span", any, StyledLinkProps, never>;
+declare const StyledLink: import("styled-components").StyledComponent<"span", any, StyledLinkProps & PrivateStyledLinkProps, never>;
 declare const StyledContent: import("styled-components").StyledComponent<"span", any, {}, never>;
 export { StyledLink, StyledContent };

package/esm/components/link/link.style.js

@@ -1,84 +1,174 @@
 import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
+const colorMap = {
+  light: variant => {
+    let color = "var(--colorsActionMajor500)";
+    let hoverColor = "var(--colorsActionMajor600)";
+
+    if (variant === "negative") {
+      color = "var(--colorsSemanticNegative500)";
+      hoverColor = "var(--colorsSemanticNegative600)";
+    } else if (variant === "neutral") {
+      color = "var(--colorsActionMajorYin090)";
+    }
+
+    return {
+      color,
+      hoverColor,
+      disabledColor: "var(--colorsActionMajorYin030)"
+    };
+  },
+  dark: variant => {
+    let color = "var(--colorsActionMajor350)";
+    let hoverColor = "var(--colorsActionMajor450)";
+
+    if (variant === "negative") {
+      color = "var(--colorsSemanticNegative350)";
+      hoverColor = "var(--colorsSemanticNegative450)";
+    } else if (variant === "neutral") {
+      color = "var(--colorsActionMinor100)";
+    }
+
+    return {
+      color,
+      hoverColor,
+      disabledColor: "var(--colorsActionMajorYang030)"
+    };
+  }
+};
 const StyledLink = styled.span`
   ${({
   isSkipLink,
   theme,
   iconAlign,
   hasContent,
-  disabled
-}) => css`
-    display: inline-block;
-
-    ${isSkipLink && css`
-      a {
-        position: absolute;
-        padding-left: 24px;
-        padding-right: 24px;
-        line-height: 36px;
-        left: -999em;
-        z-index: ${theme.zIndex.aboveAll};
-        box-shadow: inset 0 0 0 2px var(--colorsActionMajor500);
-        border: 2px solid var(--colorsUtilityYang100);
-      }
+  disabled,
+  variant,
+  isDarkBackground
+}) => {
+  const colorMapKey = isDarkBackground ? "dark" : "light";
+  const {
+    color,
+    hoverColor,
+    disabledColor
+  } = colorMap[colorMapKey](variant);
+  return css`
+      display: inline-block;
 
-      a:focus {
-        top: 8px;
-        left: 8px;
-      }
-    `}
+      ${isSkipLink && css`
+        a {
+          position: absolute;
+          padding-left: 24px;
+          padding-right: 24px;
+          line-height: 36px;
+          left: -999em;
+          z-index: ${theme.zIndex.aboveAll};
+          box-shadow: inset 0 0 0 2px var(--colorsActionMajor500);
+          border: 2px solid var(--colorsUtilityYang100);
+          font-size: 16px;
+          color: var(--colorsUtilityYin090);
 
-    a,
-  button {
-      font-size: ${isSkipLink ? "16px" : "14px"};
-      text-decoration: underline;
-      color: ${isSkipLink ? "var(--colorsUtilityYin090)" : "var(--colorsActionMajor500)"};
-      display: inline-block;
-      ${StyledIcon} {
-        display: inline-block;
-        position: relative;
-        vertical-align: middle;
-        ${iconAlign === "left" && css`
-          margin-right: ${hasContent ? "var(--spacing100)" : 0};
-        `}
-        ${iconAlign === "right" && css`
-          margin-right: 0;
-          margin-left: ${hasContent ? "var(--spacing100)" : 0};
-        `}
-      }
+          &:hover {
+            cursor: pointer;
+            color: var(--colorsUtilityYin090);
+
+            ${StyledIcon} {
+              color: var(--colorsActionMajor600);
+            }
+          }
+
+          &:focus {
+            background-color: var(--colorsUtilityYang100);
+          }
+        }
+
+        a:focus {
+          top: 8px;
+          left: 8px;
+        }
+      `}
 
-      &:hover {
-        cursor: pointer;
-        color: ${isSkipLink ? "var(--colorsUtilityYin090)" : "var(--colorsActionMajor600)"};
+      ${!isSkipLink && css`
+        a,
+        button {
+          font-size: 14px;
+
+          ${!disabled && css`
+            color: ${color};
+            ${StyledIcon} {
+              color: ${color};
+            }
+
+            &:hover {
+              color: ${hoverColor};
+
+              ${StyledIcon} {
+                color: ${hoverColor};
+              }
+            }
+
+            &:focus {
+              background-color: var(--colorsSemanticFocus250);
+            }
+          `}
+
+          ${disabled && css`
+            color: ${disabledColor};
+            &:hover,
+            &:focus {
+              color: ${disabledColor};
+            }
+          `}
+        }
+      `}
+
+      a,
+      button {
+        text-decoration: underline;
+        display: inline-block;
 
         ${StyledIcon} {
-          color: var(--colorsActionMajor600);
+          display: inline-block;
+          position: relative;
+          vertical-align: middle;
+          ${iconAlign === "left" && css`
+            margin-right: ${hasContent ? "var(--spacing100)" : 0};
+          `}
+          ${iconAlign === "right" && css`
+            margin-right: 0;
+            margin-left: ${hasContent ? "var(--spacing100)" : 0};
+          `}
         }
-      }
 
-      &:focus {
-        color: var(--colorsActionMajorYin090);
-        background-color: ${isSkipLink ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticFocus250)"};
-        outline: none;
-      }
+        &:hover {
+          cursor: pointer;
+        }
 
-      ${disabled && css`
-        color: var(--colorsActionMajorYin030);
-        &:hover,
         &:focus {
-          cursor: not-allowed;
-          color: var(--colorsActionMajorYin030);
+          color: var(--colorsActionMajorYin090);
+          outline: none;
+
+          ${StyledIcon} {
+            color: var(--colorsActionMajorYin090);
+          }
         }
-      `}
-    }
 
-    button {
-      background-color: transparent;
-      border: none;
-      padding: 0;
-    }
-  `}
+        ${disabled && css`
+          &:hover,
+          &:focus {
+            cursor: not-allowed;
+          }
+        `}
+      }
+
+      button {
+        background-color: transparent;
+        border: none;
+        padding: 0;
+      }
+    `;
+}}
 `;
 StyledLink.defaultProps = {
   theme: baseTheme,

package/esm/components/menu/menu-item/menu-item.style.js

@@ -37,35 +37,37 @@ const StyledMenuItemWrapper = styled.a`
     ${!inFullscreenView && css`
         max-width: inherit;
 
-        a,
-        button {
-          ${maxWidth && css`
-            box-sizing: border-box;
-            max-width: inherit;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            vertical-align: bottom;
-          `}
-        }
-
-        a:focus,
-        button:focus {
-          box-shadow: inset 0 0 0 var(--borderWidth300)
-            var(--colorsSemanticFocus500);
-          background-color: ${menuConfigVariants[menuType].background};
-          color: ${menuConfigVariants[menuType].color};
-          z-index: 1;
-          position: relative;
-        }
+        && {
+          a,
+          button {
+            ${maxWidth && css`
+              box-sizing: border-box;
+              max-width: inherit;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap;
+              vertical-align: bottom;
+            `}
+          }
 
-        a:hover,
-        button:hover {
-          background-color: var(--colorsComponentsMenuAutumnStandard600);
-          color: var(--colorsComponentsMenuYang100);
+          a:focus,
+          button:focus {
+            box-shadow: inset 0 0 0 var(--borderWidth300)
+              var(--colorsSemanticFocus500);
+            background-color: ${menuConfigVariants[menuType].background};
+            color: ${menuConfigVariants[menuType].color};
+            z-index: 1;
+            position: relative;
+          }
 
-          [data-component="icon"] {
+          a:hover,
+          button:hover {
+            background-color: var(--colorsComponentsMenuAutumnStandard600);
             color: var(--colorsComponentsMenuYang100);
+
+            [data-component="icon"] {
+              color: var(--colorsComponentsMenuYang100);
+            }
           }
         }
       `}
@@ -85,19 +87,21 @@ const StyledMenuItemWrapper = styled.a`
       text-align: left;
     }
 
-    a,
-    button,
-    [data-component="icon"],
-    ${StyledLink} a,
-    ${StyledLink} button,
-    ${StyledLink} [data-component="icon"] {
-      font-weight: 700;
-      text-decoration: none;
-      color: ${menuConfigVariants[menuType].color};
-    }
-
-    ${IconStyle} {
-      bottom: 1px;
+    && {
+      a,
+      button,
+      [data-component="icon"],
+      ${StyledLink} a,
+      ${StyledLink} button,
+      ${StyledLink} [data-component="icon"] {
+        font-weight: 700;
+        text-decoration: none;
+        color: ${menuConfigVariants[menuType].color};
+      }
+
+      ${IconStyle} {
+        bottom: 1px;
+      }
     }
 
     ${selected && css`