feat: add hypertext component (#210)

* renamed all to hypertext from hyperlink

* renamed hyperlink to hypertext

* microsoft appropriate test link used

* added hypertext references in react-msft and styles-msft

* added md file for hypertext

* missed hyperlink reference, and updated md doc to use hypertext

* added more style to hypertext, fixed some possible build issues

* chris helped added a couple good style things, fixed example text

* addressing PR comments

* rebased

* changes to account for testing examples update

* applied more PR comments

* removed the text property on hypertext, will only use children

* added newline to file so it builds?

* updates to fix server build rules

* more tslint errors fixed

* more tslint errors fixed

* updated snapshots

* refactoring based on PR comments

* merge issue resolved

* tslint stuff again

* PR comments applied

* rebased again

* PR comments applied

* spacing on export fixed

* added comments to handled props for hypertext

* changes to accomodate contract interface update

packages/fast-components-class-name-contracts-base/src/hypertext/index.ts

@@ -0,0 +1,6 @@
+/**
+ * The classname contract for the hypertext component
+ */
+export interface IHypertextClassNameContract {
+    hypertext: string;
+}

packages/fast-components-class-name-contracts-base/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./button";
 export * from "./divider";
+export * from "./hypertext";
 export * from "./image";
 export * from "./managed-classes";
 export * from "./toggle";

packages/fast-components-react-base/app/examples.ts

@@ -5,10 +5,13 @@ import DividerExamples from "../src/divider/examples.data";
 export { DividerExamples };
 
 import ImageExamples from "../src/image/examples.data";
-export {ImageExamples};
+export { ImageExamples };
 
 import ToggleExamples from "../src/toggle/examples.data";
 export { ToggleExamples };
 
 import TypographyExamples from "../src/typography/examples.data";
 export { TypographyExamples };
+
+import HypertextExamples from "../src/hypertext/examples.data";
+export { HypertextExamples };

packages/fast-components-react-base/src/hypertext/DOCS.md

@@ -0,0 +1,14 @@
+## Best practices
+Use *hypertext* when you need to navigate the user to more information about the text that was selected. *Hypertexts* are best used for tertiary actions outside the main work flow.
+
+### Usage guidance
+*Hypertexts* may appear as inline elements. Use inline *hypertext* within the context of a sentence or a paragraph. Within a paragraph, *hypertext* should inherit the same formatting as the neighboring text as far as font size and font weight. Inline links will appear underlined.
+
+### Style guidance
+Two *hypertexts* can appear consecutively on separate lines of text and wrap. *Hypertext* text must be clear and unique. Multiple *hypertext* to same location should have identical link text.
+
+### Behavioral guidance
+If you need to initiate actions (e.g. download a file), consider using *action trigger* instead. For calls to action (e.g. "buy"), consider using *call to action*, and for the final action in a workflow (e.g. "save"), consider using *button*. Keep *hypertexts* to just a few words, 4-5 max, not entire sentences. Don't include the period if *hypertext* is at the end of a sentence.
+
+## Accessibility
+A *hypertext* is required to have two points of visual distinction when *inline*. The underline and visual state colors are both required for accessibility.

packages/fast-components-react-base/src/hypertext/__snapshots__/hypertext.spec.ts.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`hypertext hypertext: 0 1`] = `
+<a
+  className="hypertext"
+  href="https://msdn.microsoft.com/en-us/"
+>
+  MSDN
+</a>
+`;

packages/fast-components-react-base/src/hypertext/examples.data.ts

@@ -0,0 +1,21 @@
+import { ICategoryItemProps } from "@microsoft/fast-development-site-react";
+import { ISnapshotTestSuite } from "@microsoft/fast-jest-snapshots-react";
+import { IManagedClasses } from "@microsoft/fast-components-class-name-contracts-base";
+import Hypertext, { IHypertextHandledProps, IHypertextManagedClasses, IHypertextUnhandledProps } from "./hypertext";
+import * as React from "react";
+
+const examples: ISnapshotTestSuite<IHypertextHandledProps & IHypertextManagedClasses> = {
+    name: "hypertext",
+    component: Hypertext,
+    data: [
+        {
+            managedClasses: {
+                hypertext: "hypertext"
+            },
+            href: "https://msdn.microsoft.com/en-us/",
+            children: "MSDN"
+        }
+    ]
+};
+
+export default examples;

packages/fast-components-react-base/src/hypertext/hypertext.props.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { IHypertextClassNameContract, IManagedClasses } from "@microsoft/fast-components-class-name-contracts-base";
+
+export interface IHypertextHandledProps {
+
+    /**
+     * The HTML src attribute for the href attribute.
+     */
+    href?: string;
+
+    /**
+     * The option to set the content wrapped by hypertext.
+     */
+    children?: React.ReactNode | React.ReactNode[];
+}
+
+export interface IHypertextUnhandledProps extends React.AllHTMLAttributes<HTMLElement> {}
+export interface IHypertextManagedClasses extends IManagedClasses<IHypertextClassNameContract> {}
+export type HypertextProps = IHypertextHandledProps & IHypertextUnhandledProps & IHypertextManagedClasses;

packages/fast-components-react-base/src/hypertext/hypertext.spec.ts

@@ -0,0 +1,6 @@
+import examples from "./examples.data";
+import { generateSnapshots } from "@microsoft/fast-jest-snapshots-react";
+
+describe("hypertext", (): void => {
+    generateSnapshots(examples);
+});

packages/fast-components-react-base/src/hypertext/hypertext.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import Foundation, { HandledProps } from "../foundation";
+import { IHypertextHandledProps, IHypertextManagedClasses, IHypertextUnhandledProps } from "./hypertext.props";
+import { IHypertextClassNameContract, IManagedClasses } from "@microsoft/fast-components-class-name-contracts-base";
+import { get } from "lodash-es";
+
+/* tslint:disable-next-line */
+class Hypertext extends Foundation<IHypertextHandledProps & IManagedClasses<IHypertextClassNameContract>, React.AnchorHTMLAttributes<HTMLAnchorElement>, {}> {
+    protected handledProps: HandledProps<IHypertextHandledProps & IManagedClasses<IHypertextClassNameContract>> = {
+        managedClasses: void 0,
+        children: void 0
+    };
+
+    /**
+     * Renders the component
+     */
+    public render(): React.ReactElement<HTMLAnchorElement> {
+        return (
+            <a
+                {...this.unhandledProps()}
+                className={this.generateClassNames()}
+            >
+                {this.props.children}
+            </a>
+        );
+    }
+
+    /**
+     * Generates class names
+     */
+    protected generateClassNames(): string {
+        return super.generateClassNames(get(this.props, "managedClasses.hypertext"));
+    }
+}
+
+export default Hypertext;
+export * from "./hypertext.props";
+export { IHypertextClassNameContract };

packages/fast-components-react-base/src/hypertext/index.ts

@@ -0,0 +1,4 @@
+import Hypertext from "./hypertext";
+
+export default Hypertext;
+export * from "./hypertext";

packages/fast-components-react-base/src/index.ts

@@ -6,6 +6,10 @@ import Divider from "./divider";
 export { Divider };
 export * from "./divider";
 
+import Hypertext from "./hypertext";
+export { Hypertext };
+export * from "./hypertext";
+
 import Foundation from "./foundation";
 export { Foundation };
 export * from "./foundation";

packages/fast-components-react-msft/app/examples.ts

@@ -12,3 +12,6 @@ export { ToggleExamples };
 
 import TypographyExamples from "../src/typography/examples.data";
 export { TypographyExamples };
+
+import HypertextExamples from "../src/hypertext/examples.data";
+export { HypertextExamples };

packages/fast-components-react-msft/src/hypertext/examples.data.ts

@@ -0,0 +1,20 @@
+import { ICategoryItemProps } from "@microsoft/fast-development-site-react";
+import { ISnapshotTestSuite } from "@microsoft/fast-jest-snapshots-react";
+import { IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import Hypertext from "./index";
+import { IHypertextHandledProps } from "@microsoft/fast-components-react-base";
+import * as React from "react";
+
+export default {
+    name: "hypertext",
+    component: Hypertext,
+    data: [
+        {
+            href: "https://msdn.microsoft.com",
+            children: "Hypertext"
+        },
+        {
+            children: "Hypertext"
+        }
+    ]
+} as ISnapshotTestSuite<IHypertextHandledProps>;

packages/fast-components-react-msft/src/hypertext/index.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import {
+    Hypertext,
+    IFoundationProps,
+    IHypertextClassNameContract,
+    IHypertextHandledProps,
+    IHypertextUnhandledProps
+} from "@microsoft/fast-components-react-base";
+import manageJss from "@microsoft/fast-jss-manager-react";
+import { HypertextStyles } from "@microsoft/fast-components-styles-msft";
+
+export default manageJss(HypertextStyles)(Hypertext);

packages/fast-components-react-msft/src/index.ts

@@ -5,7 +5,10 @@ import Divider from "./divider";
 export { Divider };
 
 import Image from "./image";
-export {Image};
+export { Image} ;
 
 import Toggle from "./toggle";
 export { Toggle };
+
+import Hypertext from "./hypertext";
+export { Hypertext };

packages/fast-components-styles-msft/src/hypertext/index.ts

@@ -0,0 +1,24 @@
+import { IDesignSystem } from "../design-system";
+import { ComponentStyles } from "@microsoft/fast-jss-manager";
+import { IHypertextClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";
+import { toPx } from "../utilities/units";
+
+const styles: ComponentStyles<IHypertextClassNameContract, IDesignSystem> = {
+    hypertext: {
+        borderBottom: (config: IDesignSystem): string => {
+            return `${toPx(1)} solid ${config.brandColor}`;
+        },
+        color: (config: IDesignSystem): string => {
+            return config.brandColor;
+        },
+        outline: toPx(0),
+        textDecoration: "none",
+        "&:hover, &:focus": {
+            borderBottom: (config: IDesignSystem): string => {
+                return `${toPx(2)} solid ${config.brandColor}`;
+            }
+        }
+    }
+};
+
+export default styles;

packages/fast-components-styles-msft/src/index.ts

@@ -4,6 +4,9 @@
 import ButtonStyles from "./button";
 export { ButtonStyles };
 
+import HypertextStyles from "./hypertext";
+export { HypertextStyles };
+
 /**
  * Export design system defaults and typings
  */