[next] Implement AriaInfo (#1756)

* Implement AriaInfo

* Fix build

* Default to div

src/core/client/ui/components/AriaInfo/AiraInfo.mdx

@@ -0,0 +1,17 @@
+---
+name: AriaInfo
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import AriaInfo from './AriaInfo'
+
+# AriaInfo
+
+Renders Text that is only seen by screen readers.
+
+## Basic usage
+<Playground>
+  <AriaInfo>This can only be seen by screen readers</AriaInfo>
+  <div>Above this line is a hidden text that you can't see</div>
+</Playground>

src/core/client/ui/components/AriaInfo/AriaInfo.css

@@ -0,0 +1,10 @@
+.root {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

src/core/client/ui/components/AriaInfo/AriaInfo.spec.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import AriaInfo from "./AriaInfo";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof AriaInfo> = {
+    children: "This text is only for screen readers",
+  };
+  const renderer = TestRenderer.create(<AriaInfo {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});

src/core/client/ui/components/AriaInfo/AriaInfo.tsx

@@ -0,0 +1,32 @@
+import cn from "classnames";
+import React, { HTMLAttributes, StatelessComponent } from "react";
+
+import { withForwardRef, withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import * as styles from "./AriaInfo.css";
+
+interface InnerProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+  component?: string;
+  children: React.ReactNode;
+}
+
+const AriaInfo: StatelessComponent<InnerProps> = props => {
+  const { component, className, classes, ...rest } = props;
+  const Component = component!;
+  const rootClassName = cn(classes.root, className);
+  return <Component className={rootClassName} {...rest} />;
+};
+
+AriaInfo.defaultProps = {
+  component: "div",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(AriaInfo));
+export type AriaInfoProps = PropTypesOf<typeof enhanced>;
+export default enhanced;

src/core/client/ui/components/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="AriaInfo-root"
+>
+  This text is only for screen readers
+</div>
+`;

src/core/client/ui/components/AriaInfo/index.ts

@@ -0,0 +1 @@
+export { default, AriaInfoProps } from "./AriaInfo";