Adding InputLabel

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;
+}

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>
+
+

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();
+});

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;

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

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

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">

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

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);
+}