@thecb/components 11.2.12 → 11.2.13-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.2.12",
+  "version": "11.2.13-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/icons/ExternalLinkIcon.js

@@ -1,6 +1,12 @@
 import React from "react";
+import { MATISSE_BLUE } from "../../../constants/colors";
 
-const ExternalLinkIcon = ({ linkColor, text, ariaLabel = "External Link" }) => (
+const ExternalLinkIcon = ({
+  linkColor = MATISSE_BLUE,
+  text,
+  ariaLabel = "External Link",
+  ...rest
+}) => (
   <svg
     width="14"
     height="14"
@@ -8,6 +14,7 @@ const ExternalLinkIcon = ({ linkColor, text, ariaLabel = "External Link" }) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     aria-label={ariaLabel}
+    {...rest}
   >
     <path
       fillRule="evenodd"

package/src/components/atoms/link/InternalLink.js

@@ -4,7 +4,6 @@ import { fallbackValues } from "./Link.theme";
 import { createThemeValues } from "../../../util/themeUtils";
 import { StyledInternalLink } from "./InternalLink.styled";
 import { safeChildren } from "../../../util/general";
-import { LINK_TEXT_DECORATION } from "../../../constants/style_constants";
 
 const InternalLink = forwardRef(
   (
@@ -21,7 +20,11 @@ const InternalLink = forwardRef(
       tabIndex = "0",
       dataQa,
       extraStyles = ``,
-      isUnderlined = true
+      underlined = true,
+      hoverUnderline = true,
+      extraHoverStyles = ``,
+      extraActiveStyles = ``,
+      extraFocusStyles = ``
     },
     ref
   ) => {
@@ -46,9 +49,12 @@ const InternalLink = forwardRef(
         hoverColor={themeValues.hoverColor}
         activeColor={themeValues.activeColor}
         tabIndex={tabIndex}
-        extrastyles={`text-decoration: ${
-          isUnderlined ? LINK_TEXT_DECORATION : "none"
-        }; ${extraStyles}`}
+        underlined={underlined}
+        hoverUnderline={hoverUnderline}
+        extrastyles={extraStyles}
+        extraHoverStyles={extraHoverStyles}
+        extraActiveStyles={extraActiveStyles}
+        extraFocusStyles={extraFocusStyles}
         data-qa={dataQa}
         ref={ref}
       >

package/src/components/atoms/link/InternalLink.styled.js

@@ -15,7 +15,19 @@ const { LINK_TEXT_DECORATION } = styleConstants;
 export const StyledInternalLink = styled(
   forwardRef(
     (
-      { hoverColor, activeColor, active, color, extrastyles, ...props },
+      {
+        hoverColor,
+        activeColor,
+        active,
+        color,
+        extrastyles,
+        underlined,
+        hoverUnderline,
+        extraHoverStyles,
+        extraActiveStyles,
+        extraFocusStyles,
+        ...props
+      },
       ref
     ) => <Link {...props} ref={ref} />
   )
@@ -28,21 +40,27 @@ export const StyledInternalLink = styled(
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
-  text-decoration: ${LINK_TEXT_DECORATION};
+  text-decoration: ${({ underlined }) =>
+    underlined ? LINK_TEXT_DECORATION : "none"};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};
-    text-decoration: ${LINK_TEXT_DECORATION};
+    text-decoration: ${({ hoverUnderline }) =>
+      hoverUnderline ? LINK_TEXT_DECORATION : "none"};
+    ${({ extraHoverStyles }) => extraHoverStyles}
   }
 
   &:focus {
     outline: 3px solid ${ROYAL_BLUE};
     outline-offset: 2px;
-    text-decoration: ${LINK_TEXT_DECORATION};
+    text-decoration: ${({ hoverUnderline }) =>
+      hoverUnderline ? LINK_TEXT_DECORATION : "none"};
+    ${({ extraFocusStyles }) => extraFocusStyles}
   }
 
   &:active {
     color: ${({ activeColor }) => activeColor};
+    ${({ extraActiveStyles }) => extraActiveStyles}
   }
 
   ${({ extrastyles }) => extrastyles}

package/src/components/atoms/link/Link.stories.js

@@ -158,6 +158,18 @@ export const StandardInternalLink = {
   }
 };
 
+export const InternalLinkNoUnderline = {
+  render: args => (
+    <InternalLink {...args} underlined={false}>
+      Cityville Activities Calendar
+    </InternalLink>
+  ),
+  args: {
+    active: true,
+    to: "/activities-calendar"
+  }
+};
+
 export const StandardExternalLink = {
   render: args => <ExternalLink {...args}>Austin City Hall</ExternalLink>
 };

package/src/components/molecules/link-card/LinkCard.js

@@ -5,6 +5,7 @@ import { fallbackValues } from "./LinkCard.theme";
 import { ThemeContext } from "styled-components";
 import * as Styled from "./LinkCard.styled";
 import { noop } from "../../../util/general";
+import ExternalLinkIcon from "../../atoms/icons/ExternalLinkIcon";
 
 const LinkCard = ({
   title = "Test Workflow",
@@ -21,7 +22,8 @@ const LinkCard = ({
   themeValues,
   titleVariant = "h3",
   titlePadding = "0",
-  disabled = false
+  disabled = false,
+  isExternalLink = false
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const regex = /\W/g;
@@ -53,7 +55,7 @@ const LinkCard = ({
         style={{ width: "100%" }}
         fullHeight
       >
-        <Box padding={titlePadding} width="100%">
+        <Stack direction="row" childGap="0.5rem">
           <Styled.Title
             variant={titleVariant}
             theme={themeValues}
@@ -62,7 +64,14 @@ const LinkCard = ({
           >
             {title}
           </Styled.Title>
-        </Box>
+          {isExternalLink && (
+            <ExternalLinkIcon
+              linkColor={themeValues.color}
+              text={locatorSlug}
+              style={{ height: "1.125rem", width: "1.125rem" }}
+            />
+          )}
+        </Stack>
         <Box padding={subtitlePadding} width="100%">
           <Styled.Subtitle
             variant="pS"

package/src/components/molecules/link-card/LinkCard.stories.js

@@ -33,7 +33,8 @@ const meta = {
     extraActiveStyles: "",
     extraHoverStyles: "",
     titleVariant: "h3",
-    disabled: false
+    disabled: false,
+    isExternalLink: false
   },
   argTypes: {
     title: {
@@ -121,6 +122,14 @@ const meta = {
         type: { summary: "boolean" },
         defaultValue: { summary: false }
       }
+    },
+    iseExternalLink: {
+      description:
+        "Whether the LinkCard uses an external link, default is internal",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
     }
   }
 };
@@ -184,6 +193,64 @@ export const BasicLinkCard = {
   }
 };
 
+export const ExternalLinkCard = {
+  args: {
+    title: "Construction Permits",
+    subtitle: "Cityville Department of Building Inspection"
+  },
+  render: args => {
+    return (
+      <LinkCard
+        {...args}
+        key="link-card-basic"
+        extraStyles={`transition: all .2s ease-in-out;`}
+        extraHoverStyles={`.show-on-hover {opacity: 1}`}
+        showLeft={false}
+        leftContent={
+          <Badge
+            label="Autopay Available"
+            variant={"success"}
+            Icon={() =>
+              AutopayIcon({
+                fill: SEA_GREEN
+              })
+            }
+          />
+        }
+        showRight={true}
+        rightContent={
+          <Box
+            data-qa={`find-or-pay`}
+            extraStyles={`
+              display: flex;
+              gap: 6px;
+              justify-content: space-between;
+              align-items: center;
+            `}
+            padding="0"
+            hoverStyles=".show-on-hover {opacity: 1;}"
+          >
+            <Text
+              variant="pS"
+              className="show-on-hover"
+              color={ROYAL_BLUE_VIVID}
+              id={`workflow`}
+              extraStyles={`
+                transition: opacity .2s ease-in-out; 
+                opacity: 0
+              `}
+            >
+              {"Pay"}
+            </Text>
+            <ArrowRightIcon labelledBy={`workflow`} color={ROYAL_BLUE_VIVID} />
+          </Box>
+        }
+        isExternalLink={true}
+      />
+    );
+  }
+};
+
 export const CompleteLinkCard = {
   args: {
     title: "Water Bills - Autopay",

package/src/components/molecules/tab-sidebar/TabSidebar.js

@@ -35,9 +35,9 @@ const TabSidebar = ({ links, isMobile, themeValues, minHeight = "100%" }) => (
         <InternalLink
           to={route}
           key={`${route}-${index}`}
-          extraStyles={`text-decoration: none;
+          isUnderlined={false}
+          extraStyles={`
             &:hover {
-            text-decoration: none;
             ${
               active
                 ? `> * {