From acb86f4b440f3463bafaa45a7573468d307ec4cb Mon Sep 17 00:00:00 2001
From: Kiwi <vinh@wikiwi.io>
Date: Fri, 20 Jul 2018 20:17:47 -0300
Subject: [PATCH] [next] Implement AriaInfo (#1756)

* Implement AriaInfo

* Fix build

* Default to div
---
 .../ui/components/AriaInfo/AiraInfo.mdx       | 17 ++++++++++
 .../ui/components/AriaInfo/AriaInfo.css       | 10 ++++++
 .../ui/components/AriaInfo/AriaInfo.spec.tsx  | 14 ++++++++
 .../ui/components/AriaInfo/AriaInfo.tsx       | 32 +++++++++++++++++++
 .../__snapshots__/AriaInfo.spec.tsx.snap      |  9 ++++++
 .../client/ui/components/AriaInfo/index.ts    |  1 +
 6 files changed, 83 insertions(+)
 create mode 100644 src/core/client/ui/components/AriaInfo/AiraInfo.mdx
 create mode 100644 src/core/client/ui/components/AriaInfo/AriaInfo.css
 create mode 100644 src/core/client/ui/components/AriaInfo/AriaInfo.spec.tsx
 create mode 100644 src/core/client/ui/components/AriaInfo/AriaInfo.tsx
 create mode 100644 src/core/client/ui/components/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap
 create mode 100644 src/core/client/ui/components/AriaInfo/index.ts

diff --git a/src/core/client/ui/components/AriaInfo/AiraInfo.mdx b/src/core/client/ui/components/AriaInfo/AiraInfo.mdx
new file mode 100644
index 000000000..abe438404
--- /dev/null
+++ b/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>
diff --git a/src/core/client/ui/components/AriaInfo/AriaInfo.css b/src/core/client/ui/components/AriaInfo/AriaInfo.css
new file mode 100644
index 000000000..bca89bafb
--- /dev/null
+++ b/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;
+}
diff --git a/src/core/client/ui/components/AriaInfo/AriaInfo.spec.tsx b/src/core/client/ui/components/AriaInfo/AriaInfo.spec.tsx
new file mode 100644
index 000000000..37c8d5aac
--- /dev/null
+++ b/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();
+});
diff --git a/src/core/client/ui/components/AriaInfo/AriaInfo.tsx b/src/core/client/ui/components/AriaInfo/AriaInfo.tsx
new file mode 100644
index 000000000..f0604a900
--- /dev/null
+++ b/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;
diff --git a/src/core/client/ui/components/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap b/src/core/client/ui/components/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap
new file mode 100644
index 000000000..688492e16
--- /dev/null
+++ b/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>
+`;
diff --git a/src/core/client/ui/components/AriaInfo/index.ts b/src/core/client/ui/components/AriaInfo/index.ts
new file mode 100644
index 000000000..7fc32af4c
--- /dev/null
+++ b/src/core/client/ui/components/AriaInfo/index.ts
@@ -0,0 +1 @@
+export { default, AriaInfoProps } from "./AriaInfo";