From 9e363ff454365cfc6526f557ea50a3396a726898 Mon Sep 17 00:00:00 2001 From: Mark Jones Date: Fri, 13 Apr 2018 14:56:58 -0700 Subject: [PATCH] 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 --- .../src/hypertext/index.ts | 6 +++ .../src/index.ts | 1 + .../app/examples.ts | 5 ++- .../src/hypertext/DOCS.md | 14 +++++++ .../__snapshots__/hypertext.spec.ts.snap | 10 +++++ .../src/hypertext/examples.data.ts | 21 ++++++++++ .../src/hypertext/hypertext.props.ts | 19 +++++++++ .../src/hypertext/hypertext.spec.ts | 6 +++ .../src/hypertext/hypertext.tsx | 39 +++++++++++++++++++ .../src/hypertext/index.ts | 4 ++ .../fast-components-react-base/src/index.ts | 4 ++ .../app/examples.ts | 3 ++ .../src/hypertext/examples.data.ts | 20 ++++++++++ .../src/hypertext/index.ts | 12 ++++++ .../fast-components-react-msft/src/index.ts | 5 ++- .../src/hypertext/index.ts | 24 ++++++++++++ .../fast-components-styles-msft/src/index.ts | 3 ++ 17 files changed, 194 insertions(+), 2 deletions(-) create mode 100644 packages/fast-components-class-name-contracts-base/src/hypertext/index.ts create mode 100755 packages/fast-components-react-base/src/hypertext/DOCS.md create mode 100644 packages/fast-components-react-base/src/hypertext/__snapshots__/hypertext.spec.ts.snap create mode 100644 packages/fast-components-react-base/src/hypertext/examples.data.ts create mode 100644 packages/fast-components-react-base/src/hypertext/hypertext.props.ts create mode 100644 packages/fast-components-react-base/src/hypertext/hypertext.spec.ts create mode 100644 packages/fast-components-react-base/src/hypertext/hypertext.tsx create mode 100644 packages/fast-components-react-base/src/hypertext/index.ts create mode 100644 packages/fast-components-react-msft/src/hypertext/examples.data.ts create mode 100644 packages/fast-components-react-msft/src/hypertext/index.ts create mode 100644 packages/fast-components-styles-msft/src/hypertext/index.ts diff --git a/packages/fast-components-class-name-contracts-base/src/hypertext/index.ts b/packages/fast-components-class-name-contracts-base/src/hypertext/index.ts new file mode 100644 index 00000000000..47b01d9ada2 --- /dev/null +++ b/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; +} diff --git a/packages/fast-components-class-name-contracts-base/src/index.ts b/packages/fast-components-class-name-contracts-base/src/index.ts index 30e0b720959..e877daeb7a8 100644 --- a/packages/fast-components-class-name-contracts-base/src/index.ts +++ b/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"; diff --git a/packages/fast-components-react-base/app/examples.ts b/packages/fast-components-react-base/app/examples.ts index e5b839620c8..a2229c79fef 100644 --- a/packages/fast-components-react-base/app/examples.ts +++ b/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 }; diff --git a/packages/fast-components-react-base/src/hypertext/DOCS.md b/packages/fast-components-react-base/src/hypertext/DOCS.md new file mode 100755 index 00000000000..be002279bd9 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/packages/fast-components-react-base/src/hypertext/__snapshots__/hypertext.spec.ts.snap b/packages/fast-components-react-base/src/hypertext/__snapshots__/hypertext.spec.ts.snap new file mode 100644 index 00000000000..c5149f25b40 --- /dev/null +++ b/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`] = ` + + MSDN + +`; diff --git a/packages/fast-components-react-base/src/hypertext/examples.data.ts b/packages/fast-components-react-base/src/hypertext/examples.data.ts new file mode 100644 index 00000000000..35f94f11dd0 --- /dev/null +++ b/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 = { + name: "hypertext", + component: Hypertext, + data: [ + { + managedClasses: { + hypertext: "hypertext" + }, + href: "https://msdn.microsoft.com/en-us/", + children: "MSDN" + } + ] +}; + +export default examples; diff --git a/packages/fast-components-react-base/src/hypertext/hypertext.props.ts b/packages/fast-components-react-base/src/hypertext/hypertext.props.ts new file mode 100644 index 00000000000..0a6b9e3c4fc --- /dev/null +++ b/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 {} +export interface IHypertextManagedClasses extends IManagedClasses {} +export type HypertextProps = IHypertextHandledProps & IHypertextUnhandledProps & IHypertextManagedClasses; diff --git a/packages/fast-components-react-base/src/hypertext/hypertext.spec.ts b/packages/fast-components-react-base/src/hypertext/hypertext.spec.ts new file mode 100644 index 00000000000..df73ce1314e --- /dev/null +++ b/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); +}); diff --git a/packages/fast-components-react-base/src/hypertext/hypertext.tsx b/packages/fast-components-react-base/src/hypertext/hypertext.tsx new file mode 100644 index 00000000000..c062b2c22c8 --- /dev/null +++ b/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, React.AnchorHTMLAttributes, {}> { + protected handledProps: HandledProps> = { + managedClasses: void 0, + children: void 0 + }; + + /** + * Renders the component + */ + public render(): React.ReactElement { + return ( + + {this.props.children} + + ); + } + + /** + * Generates class names + */ + protected generateClassNames(): string { + return super.generateClassNames(get(this.props, "managedClasses.hypertext")); + } +} + +export default Hypertext; +export * from "./hypertext.props"; +export { IHypertextClassNameContract }; diff --git a/packages/fast-components-react-base/src/hypertext/index.ts b/packages/fast-components-react-base/src/hypertext/index.ts new file mode 100644 index 00000000000..3f46f881622 --- /dev/null +++ b/packages/fast-components-react-base/src/hypertext/index.ts @@ -0,0 +1,4 @@ +import Hypertext from "./hypertext"; + +export default Hypertext; +export * from "./hypertext"; diff --git a/packages/fast-components-react-base/src/index.ts b/packages/fast-components-react-base/src/index.ts index b91c5fc2362..c6dc6476547 100644 --- a/packages/fast-components-react-base/src/index.ts +++ b/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"; diff --git a/packages/fast-components-react-msft/app/examples.ts b/packages/fast-components-react-msft/app/examples.ts index 0d71cb2cd94..7ef832f0d6f 100644 --- a/packages/fast-components-react-msft/app/examples.ts +++ b/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 }; diff --git a/packages/fast-components-react-msft/src/hypertext/examples.data.ts b/packages/fast-components-react-msft/src/hypertext/examples.data.ts new file mode 100644 index 00000000000..94ce6489ba3 --- /dev/null +++ b/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; diff --git a/packages/fast-components-react-msft/src/hypertext/index.ts b/packages/fast-components-react-msft/src/hypertext/index.ts new file mode 100644 index 00000000000..7e2106ebc07 --- /dev/null +++ b/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); diff --git a/packages/fast-components-react-msft/src/index.ts b/packages/fast-components-react-msft/src/index.ts index cc103f1e38b..4bbfaed63e6 100644 --- a/packages/fast-components-react-msft/src/index.ts +++ b/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 }; diff --git a/packages/fast-components-styles-msft/src/hypertext/index.ts b/packages/fast-components-styles-msft/src/hypertext/index.ts new file mode 100644 index 00000000000..d7c46e83157 --- /dev/null +++ b/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 = { + 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; diff --git a/packages/fast-components-styles-msft/src/index.ts b/packages/fast-components-styles-msft/src/index.ts index 59280e3bdab..12202a688ce 100644 --- a/packages/fast-components-styles-msft/src/index.ts +++ b/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 */