@thecb/components 11.2.2-beta.0 → 11.2.2

package/package.json

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

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

@@ -31,7 +31,7 @@ const ExternalLinkIcon = ({ linkColor, text }) => (
       />
     </mask>
     <g mask={`url(#mask0_902_435-${text})`}>
-      <rect x="-0.0864258" width="14" height="14" fill={linkColor} />
+      <rect x="-0.0864258" width="14" height="14" fill="none" />
     </g>
   </svg>
 );

package/src/components/molecules/contact-card/ContactCard.js

@@ -0,0 +1,125 @@
+import React, { useContext } from "react";
+import { Box, Stack } from "../../atoms/layouts";
+import { ExternalLink } from "../../atoms";
+import { ThemeContext } from "styled-components";
+import * as Styled from "./ContactCard.styled";
+import { createIdFromString } from "../../../util/general";
+import { FONT_SIZE } from "../../../constants/style_constants";
+import ExternalLinkIcon from "../../atoms/icons/ExternalLinkIcon";
+import SolidDivider from "../../atoms/solid-divider";
+import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
+import { createThemeValues } from "../../../util/themeUtils";
+
+const ContactCard = ({
+  title,
+  secondTitle = "Helpful Links",
+  content = "",
+  links = [],
+  extraStyles = "",
+  titleVariant = "h3",
+  ariaLabel = "Contact Information",
+  linkVariant = "primary"
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const { isMobile } = themeContext;
+  const linkFallbackValues = { externalLinkColor: ROYAL_BLUE_VIVID };
+  const linkThemeValues = createThemeValues(
+    themeContext,
+    linkFallbackValues,
+    "Link",
+    linkVariant
+  );
+
+  return (
+    <Styled.Container
+      borderRadius="8px"
+      boxShadow="0px 2px 4px rgba(0, 0, 0, 0.25)"
+      dataQa={createIdFromString(title, "contact-card")}
+      maxWidth={isMobile ? "100%" : "208px"}
+      minWidth={isMobile ? "240px" : "208px"}
+      minHeight="141px"
+      padding="1.5rem"
+      extraStyles={extraStyles}
+      role="complementary"
+      aria-label={ariaLabel}
+    >
+      <Stack
+        childGap="8px"
+        bottomItem={3}
+        justify="space-between"
+        style={{ width: "100%" }}
+        fullHeight
+      >
+        <Box padding={0} width="100%">
+          <Styled.Title
+            variant={titleVariant}
+            margin={0}
+            fontSize={FONT_SIZE.MD}
+          >
+            {title}
+          </Styled.Title>
+        </Box>
+        <Box padding={"0"} width="100%">
+          <Styled.Content>{content}</Styled.Content>
+        </Box>
+      </Stack>
+      {links.length > 0 && (
+        <>
+          <SolidDivider aria-hidden={true} />
+          <Stack
+            childGap={"8px"}
+            bottomItem={3}
+            justify="space-between"
+            style={{ width: "100%" }}
+            fullHeight
+          >
+            <Styled.Title
+              variant={titleVariant}
+              margin={0}
+              fontSize={FONT_SIZE.MD}
+            >
+              {secondTitle}
+            </Styled.Title>
+            <Stack
+              childGap={"4px"}
+              justify="space-between"
+              style={{ width: "100%" }}
+              fullHeight
+            >
+              {links.map(link => {
+                const linkID = createIdFromString(
+                  link.text,
+                  "contact-card-link"
+                );
+                return (
+                  <ExternalLink
+                    key={linkID}
+                    dataQa={linkID}
+                    href={link.link}
+                    newTab={true}
+                    extraStyles={`
+                      flex-direction: row;
+                      align-items: center;
+                      align-content: flex-start;
+                      justify-content: space-between;
+                    `}
+                    size={FONT_SIZE.SM}
+                    lineHeight="1.313rem"
+                  >
+                    {link.text}
+                    <ExternalLinkIcon
+                      linkColor={linkThemeValues.externalLinkColor}
+                      text={link.text}
+                    />
+                  </ExternalLink>
+                );
+              })}
+            </Stack>
+          </Stack>
+        </>
+      )}
+    </Styled.Container>
+  );
+};
+
+export default ContactCard;

package/src/components/molecules/contact-card/ContactCard.stories.js

@@ -0,0 +1,76 @@
+import React from "react";
+import ContactCard from "./ContactCard";
+
+const meta = {
+  title: "Molecules/ContactCard",
+  component: ContactCard,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    title: "City Hall Payment Center",
+    extraStyles: "",
+    titleVariant: "h3"
+  },
+  argTypes: {
+    title: {
+      description: "Text to display in the ContactCard's heading area",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "City Hall Payment Center" }
+      }
+    },
+    content: {
+      description: "Text to display in the ContactCard's content area",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    links: {
+      description: "Array of links to display in the ContactCard",
+      table: {
+        type: { summary: "array" },
+        defaultValue: { summary: "[]" }
+      }
+    },
+    extraStyles: {
+      description: "Extra styles to apply to the ContactCard",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    titleVariant: {
+      description: "HTML element to use for heading element, default is h3",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "h3" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const BasicContactCard = {
+  args: {
+    title: "City Hall Payment Center",
+    content:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod",
+    links: [
+      {
+        text: "Cityville Home",
+        link: "https://cityville-demos.uat.cityba.se/"
+      },
+      {
+        text: "Contact Us",
+        link: "https://eunasolutions.com/contact-us/"
+      }
+    ]
+  },
+  render: args => {
+    return <ContactCard {...args} key="contact-card-basic" extraStyles={``} />;
+  }
+};

package/src/components/molecules/contact-card/ContactCard.styled.js

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+import Heading from "../../atoms/heading";
+import Stack from "../../atoms/layouts/Stack";
+import { Box } from "../../atoms/layouts";
+import {
+  FONT_SIZE,
+  FONT_WEIGHT_SEMIBOLD
+} from "../../../constants/style_constants";
+
+export const Container = styled(Box)`
+  height: fit-content;
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+  border-radius: 8px;
+`;
+
+export const Title = styled(Heading)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  align-self: stretch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-color: transparent;
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+`;
+
+export const Content = styled(Box)`
+  padding: 0;
+  font-size: ${FONT_SIZE.SM};
+  line-height: 1.313rem;
+  overflow-wrap: normal;
+  letter-spacing: 0.14px;
+`;
+
+export const Footer = styled(Stack)`
+  width: 100%;
+`;
+
+export const Divider = styled(Box)`
+  padding: 0;
+  height: 1px;
+  width: 100%;
+`;

package/src/components/molecules/contact-card/index.d.ts

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from "react";
+import Expand from "../../../util/expand";
+
+export interface ContactCardProps {
+  title?: string; // title 1
+  secondTitle?: string; // title 2
+  content?: any; // content
+  links?: any; // list of links
+  extraStyles?: string; // extra styles
+  titleVariant?: string; // title variant
+  ariaLabel?: string; // aria label
+  linkVariant?: string; // link variant
+}
+
+export const ContactCard: React.FC<Expand<ContactCardProps> &
+  HTMLAttributes<HTMLElement>>;

package/src/components/molecules/contact-card/index.js

@@ -0,0 +1,3 @@
+import ContactCard from "./ContactCard";
+
+export default ContactCard;

package/src/components/molecules/index.js

@@ -43,3 +43,4 @@ export { default as WelcomeModule } from "./welcome-module";
 export { default as WorkflowTile } from "./workflow-tile";
 export { default as PopupMenu } from "./popup-menu";
 export { default as MultipleSelectFilter } from "./multiple-select-filter";
+export { default as ContactCard } from "./contact-card";

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

@@ -16,11 +16,11 @@ import {
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./TabSidebar.theme";
 
-const TabSidebar = ({ links, isMobile, themeValues }) => (
+const TabSidebar = ({ links, isMobile, themeValues, minHeight = "100%" }) => (
   <Box
     padding="0"
     background={COOL_GREY_05}
-    minHeight="100%"
+    minHeight={minHeight}
     role="region"
     aria-label="Profile tabs"
     boxShadow={isMobile && `inset 0px -1px 0px 0px rgb(202, 206, 216)`}