Merge pull request #11 from DaPulse/component/orr/link-component

feat: add link component

Author: orrgottlieb

.circleci/config.yml

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {

package.json

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import cx from "classnames";
 import "./{{properCase componentName}}.scss";
 
@@ -13,4 +14,7 @@ const {{properCase componentName}} = ({
   );
 };
 
+{{properCase componentName}}.defaultProps = {};
+{{properCase componentName}}.propTypes = {};
+
 export default {{properCase componentName}};

plop/component/component-js.txt

@@ -1,5 +1,5 @@
 @import "../../styles/themes.scss";
 
-{{dashCase componentName}}--wrapper {
+.{{dashCase componentName}}--wrapper {
 
 }

plop/component/component-scss.txt

@@ -0,0 +1,19 @@
+import React from "react";
+import cx from "classnames"
+import ComponentStateDescription from "../../components/storybook-helpers/component-state-description/ComponentStateDescription";
+import "./StoryLine.scss";
+
+const StoryLine = ({ title, children, componentWrapperClass, wrapperClassName }) => {
+  return (
+    <>
+      <ComponentStateDescription title={title} />
+      <div className={cx(wrapperClassName, "width-35")}>
+        <div className={componentWrapperClass}>{children}</div>
+      </div>
+    </>
+  );
+};
+
+StoryLine.propTypes = {};
+StoryLine.defaultProps = {};
+export default StoryLine;

src/StoryBookComponents/StoryLink/StoryLine.jsx

@@ -0,0 +1,3 @@
+.wrapperClassName {
+  direction: rtl;
+}

src/StoryBookComponents/StoryLink/StoryLine.scss

@@ -2,6 +2,11 @@
 
 .icon_component {
   position: relative;
+
+  &:before {
+    text-decoration: none !important;
+  }
+
   &:focus {
     outline: none;
     -webkit-text-stroke-width: 1px;

src/components/Icon/Icon.scss

@@ -0,0 +1,103 @@
+import React from "react";
+import { render, fireEvent, cleanup } from "@testing-library/react";
+import { expect, sinon } from "../../test/test-helpers";
+import Link from "./Link";
+
+describe("<Link />", () => {
+  const ariaLabel = "Read more about the interesting article";
+  const text = "Read More";
+  const href = "https://www.monday.com";
+  let onClickStub;
+  beforeEach(() => {
+    onClickStub = sinon.stub();
+  });
+
+  afterEach(() => {
+    cleanup();
+    onClickStub.reset();
+  });
+
+  describe("default props", () => {
+    it("should open link in a new window", () => {
+      const { getByText } = render(<Link text={text} />);
+      const element = getByText(text).closest("a");
+      expect(element.target).to.equal(Link.target.NEW_WINDOW);
+    });
+    it("should open link to have noreferrer attribute", () => {
+      const { getByText } = render(<Link text={text} />);
+      const element = getByText(text).closest("a");
+      expect(element.rel).to.equal("noreferrer");
+    });
+  });
+
+  it("should call onClick", () => {
+    const { getByText } = render(<Link text={text} onClick={onClickStub} />);
+    const element = getByText(text).closest("a");
+    fireEvent.click(element);
+    expect(onClickStub).to.be.called;
+  });
+
+  it("should have the correct href", () => {
+    const { getByText } = render(<Link text={text} href={href} />);
+    const element = getByText(text).closest("a");
+    expect(element.href).to.equal(`${href}/`);
+  });
+
+  it("should have the correct target", () => {
+    const target = Link.target.SELF;
+    const { getByText } = render(
+      <Link text={text} href={href} target={target} />
+    );
+    const element = getByText(text).closest("a");
+    expect(element.target).to.equal(target);
+  });
+
+  it("should apply aria label correctly", () => {
+    const { getByLabelText } = render(
+      <Link text={text} ariaLabelDescription={ariaLabel} />
+    );
+    const element = getByLabelText(ariaLabel);
+    expect(element).to.be.ok;
+  });
+
+  describe("Icons", () => {
+    it("Should present the icon", () => {
+      const { container } = render(
+        <Link ariaLabelDescription={ariaLabel} iconName="icon-name" />
+      );
+      const element = container.querySelector(".icon_component");
+      expect(element).to.be.ok;
+    });
+
+    it("Icon should be before of the text", () => {
+      const { container } = render(
+        <Link
+          text={text}
+          ariaLabelDescription={ariaLabel}
+          iconName="icon-name"
+        />
+      );
+      const textElement = container.querySelector(".monday-style-link--text");
+      const iconElement = container.querySelector(".icon_component");
+      const textBox = textElement.getBoundingClientRect();
+      const iconBox = iconElement.getBoundingClientRect();
+      expect(textBox.left > iconBox.left).to.equal(true);
+    });
+
+    it("Icon should be after of the text", () => {
+      const { container } = render(
+        <Link
+          text={text}
+          ariaLabelDescription={ariaLabel}
+          iconName="icon-name"
+          iconPosition={Link.position.END}
+        />
+      );
+      const textElement = container.querySelector(".monday-style-link--text");
+      const iconElement = container.querySelector(".icon_component");
+      const textBox = textElement.getBoundingClientRect();
+      const iconBox = iconElement.getBoundingClientRect();
+      expect(textBox.left < iconBox.left).to.equal(true);
+    });
+  });
+});