Merge pull request #409 from indiana-university/feature/371/CallToAction

feat: Implemented Call to Action Component (#371)

src/components/PageContent/CallToAction/CallToAction.jsx

@@ -0,0 +1,42 @@
+/*
+Copyright (C) 2018 The Trustees of Indiana University
+SPDX-License-Identifier: BSD-3-Clause
+*/
+import classNames from "classnames";
+import * as PropTypes from "prop-types";
+import * as React from "react";
+import * as Rivet from "../../util/Rivet";
+import { TestUtils } from "../../util/TestUtils";
+
+const CallToAction = ({
+  children,
+  className,
+  testMode = false,
+  variant = "link",
+  ...attrs
+}) => {
+  const classNameArr = [
+    "rvt-cta",
+    variant === "button" ? "rvt-cta--button" : "",
+    className
+  ]
+  return (
+    <a
+      className={classNames(classNameArr)}
+      {...(testMode && { "data-testid": TestUtils.CallToAction.link })}
+      {...attrs}
+    >
+      {children}
+    </a>
+  )
+};
+
+CallToAction.displayName = "CallToAction";
+CallToAction.propTypes = {
+  /** [Developer] Adds data-testId attributes for component testing */
+  testMode: PropTypes.bool,
+  /* The variant determines the style of the call to action link */
+  variant: PropTypes.oneOf(["button", "link"]),
+};
+
+export default Rivet.rivetize(CallToAction);

src/components/PageContent/CallToAction/CallToAction.md

@@ -0,0 +1,17 @@
+Use the call to action component to add a link with extra visual emphasis to your page.
+
+Calls to action are often used at the end of content sections to direct visitors to your site’s most interesting or actionable pages.
+View the [Rivet documentation for Call to action](https://rivet.uits.iu.edu/components/call-to-action/).
+
+### Call to Action Examples
+
+<!-- prettier-ignore-start -->
+```jsx
+<div className="rvt-m-bottom-md">
+    <CallToAction href="#">Standard Link</CallToAction>
+</div>
+<div>
+    <CallToAction href="#" variant="button">Button Style Link</CallToAction>
+</div>
+```
+<!-- prettier-ignore-end -->

src/components/PageContent/CallToAction/CallToAction.test.jsx

@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import React from "react";
+import CallToAction from "./CallToAction";
+import { TestUtils } from "../../util/TestUtils";
+
+const testIds = TestUtils.CallToAction
+const content = "test link"
+const href = "#"
+
+describe("<CallToAction />", () => {
+  describe("Rendering", () => {
+    it("should render without throwing an error", () => {
+      render(
+        <CallToAction href={href} testMode>
+          {content}
+        </CallToAction>
+      );
+      renderCheck()
+    });
+
+    it("should render without throwing an error", () => {
+      render(
+        <CallToAction href={href} testMode variant="button">
+          {content}
+        </CallToAction>
+      );
+      renderCheck()
+      const link = screen.getByTestId(testIds.link);
+      expect(link).toHaveClass("rvt-cta--button");
+    });
+  });
+});
+
+const renderCheck = () => {
+  const link = screen.getByTestId(testIds.link);
+  expect(link).toBeVisible();
+  expect(link.nodeName).toBe("A")
+  expect(link).toHaveClass("rvt-cta");
+  expect(link).toHaveAttribute("href", href)
+  expect(link.innerHTML).toBe(content)
+}

src/components/PageContent/index.jsx

@@ -3,6 +3,7 @@ Copyright (C) 2018 The Trustees of Indiana University
 SPDX-License-Identifier: BSD-3-Clause
 */
 export { default as Badge } from "./Badge/Badge";
+export { default as CallToAction } from "./CallToAction/CallToAction";
 export { default as Disclosure } from "./Disclosure/Disclosure";
 export { default as EmptyState } from "./EmptyState/EmptyState";
 export { default as Timeline } from "./Timeline/Timeline";

src/components/util/TestUtils.js

@@ -3,6 +3,9 @@ Copyright (C) 2018 The Trustees of Indiana University
 SPDX-License-Identifier: BSD-3-Clause
 */
 export const TestUtils = {
+  CallToAction: {
+    link: "cta-link"
+  },
   ButtonGroup: { testId: "buttonGroup_testId" },
   SegmentedButton: { testId: "segmentedButton_testId" },
   RivetIcons: { testId: "rivetIcon_testId" },