From 0c9dd07f1ff1f58e64a4634c910ea3d629b9f1aa Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 2 Aug 2018 20:01:15 -0300
Subject: [PATCH] Adding InputLabel

---
 .../ui/components/InputLabel/InputLabel.css   |  6 ++++
 .../ui/components/InputLabel/InputLabel.mdx   | 19 ++++++++++
 .../components/InputLabel/InputLabel.spec.tsx | 14 ++++++++
 .../ui/components/InputLabel/InputLabel.tsx   | 36 +++++++++++++++++++
 .../client/ui/components/InputLabel/index.ts  |  1 +
 .../ui/components/TextField/TextField.mdx     |  2 ++
 .../ValidationMessage/ValidationMessage.mdx   |  2 +-
 src/core/client/ui/shared/typography.css      |  9 +++++
 8 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 src/core/client/ui/components/InputLabel/InputLabel.css
 create mode 100644 src/core/client/ui/components/InputLabel/InputLabel.mdx
 create mode 100644 src/core/client/ui/components/InputLabel/InputLabel.spec.tsx
 create mode 100644 src/core/client/ui/components/InputLabel/InputLabel.tsx
 create mode 100644 src/core/client/ui/components/InputLabel/index.ts

diff --git a/src/core/client/ui/components/InputLabel/InputLabel.css b/src/core/client/ui/components/InputLabel/InputLabel.css
new file mode 100644
index 000000000..03d7e4158
--- /dev/null
+++ b/src/core/client/ui/components/InputLabel/InputLabel.css
@@ -0,0 +1,6 @@
+.root {
+  composes: inputLabel from "talk-ui/shared/typography.css";
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+}
diff --git a/src/core/client/ui/components/InputLabel/InputLabel.mdx b/src/core/client/ui/components/InputLabel/InputLabel.mdx
new file mode 100644
index 000000000..8d7721ba7
--- /dev/null
+++ b/src/core/client/ui/components/InputLabel/InputLabel.mdx
@@ -0,0 +1,19 @@
+---
+name: InputLabel
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import InputLabel from './InputLabel.tsx'
+import Flex from '../Flex'
+
+# InputLabel
+
+## Basic Use
+<Playground>
+  <Flex itemGutter direction="column">
+    <InputLabel>Well... Hello there.</InputLabel>
+  </Flex>
+</Playground>
+
+
diff --git a/src/core/client/ui/components/InputLabel/InputLabel.spec.tsx b/src/core/client/ui/components/InputLabel/InputLabel.spec.tsx
new file mode 100644
index 000000000..90c3ef97f
--- /dev/null
+++ b/src/core/client/ui/components/InputLabel/InputLabel.spec.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import InputLabel from "./InputLabel";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof InputLabel> = {
+    className: "custom",
+  };
+  const renderer = TestRenderer.create(<InputLabel>Hello</InputLabel>);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/InputLabel/InputLabel.tsx b/src/core/client/ui/components/InputLabel/InputLabel.tsx
new file mode 100644
index 000000000..faa8fb318
--- /dev/null
+++ b/src/core/client/ui/components/InputLabel/InputLabel.tsx
@@ -0,0 +1,36 @@
+import cn from "classnames";
+import React from "react";
+import { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import Typography from "../Typography";
+import * as styles from "./InputLabel.css";
+
+export interface InputLabelProps {
+  /**
+   * The content of the component.
+   */
+  children?: string;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+}
+
+const InputLabelProps: StatelessComponent<InputLabelProps> = props => {
+  const { className, children, classes, ...rest } = props;
+
+  const rootClassName = cn(classes.root, className);
+
+  return (
+    <Typography className={rootClassName} {...rest}>
+      {children}
+    </Typography>
+  );
+};
+
+const enhanced = withStyles(styles)(InputLabelProps);
+export default enhanced;
diff --git a/src/core/client/ui/components/InputLabel/index.ts b/src/core/client/ui/components/InputLabel/index.ts
new file mode 100644
index 000000000..b5002b7c0
--- /dev/null
+++ b/src/core/client/ui/components/InputLabel/index.ts
@@ -0,0 +1 @@
+export { default } from "./InputLabel";
diff --git a/src/core/client/ui/components/TextField/TextField.mdx b/src/core/client/ui/components/TextField/TextField.mdx
index e54c0f170..82196c778 100644
--- a/src/core/client/ui/components/TextField/TextField.mdx
+++ b/src/core/client/ui/components/TextField/TextField.mdx
@@ -7,6 +7,8 @@ import { Playground, PropsTable } from 'docz'
 import TextField from './TextField.tsx'
 import Flex from '../Flex'
 
+# TextField
+
 ## Basic Use
 <Playground>
   <Flex itemGutter direction="column">
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
index c40614d9d..19fab8aec 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
@@ -7,7 +7,7 @@ import { Playground, PropsTable } from 'docz'
 import ValidationMessage from './ValidationMessage.tsx'
 import Flex from '../Flex'
 
-## ValidationMessage
+# ValidationMessage
 <PropsTable of={ValidationMessage} />
 
 ## Basic Use
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 43ee2e78d..dafe715b2 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -144,3 +144,12 @@
   letter-spacing: calc(0.2em / 16);
   color: var(--palette-text-primary);
 }
+
+.inputLabel {
+  font-size: calc(18rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: "Manuale";
+  line-height: calc(18em / 16);
+  letter-spacing: calc(0.2em / 16);
+  color: var(--palette-text-primary);
+}