[CORL-260] Bring back sorting (#2186)

* feat: sort stream

* feat: add FieldSet component to ui

* feat: make accessible and add feature test

* test: fix snapshots

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

@@ -0,0 +1,4 @@
+.root {
+  border: 0;
+  padding: 0;
+}

src/core/client/ui/components/FieldSet/FieldSet.mdx

@@ -0,0 +1,10 @@
+---
+name: AriaInfo
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+
+# FieldSet
+
+Simple `fieldset` with removed styling for accessibility purposes.

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

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

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

@@ -0,0 +1,26 @@
+import cn from "classnames";
+import React, { AllHTMLAttributes, Ref, StatelessComponent } from "react";
+
+import { withForwardRef, withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import styles from "./FieldSet.css";
+
+interface InnerProps extends AllHTMLAttributes<HTMLElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLFieldSetElement>;
+}
+
+const FieldSet: StatelessComponent<InnerProps> = props => {
+  const { className, classes, forwardRef: ref, ...rest } = props;
+  const rootClassName = cn(classes.root, className);
+  return <fieldset className={rootClassName} {...rest} ref={ref} />;
+};
+const enhanced = withForwardRef(withStyles(styles)(FieldSet));
+export type FieldSetProps = PropTypesOf<typeof enhanced>;
+export default enhanced;

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<fieldset
+  className="FieldSet-root"
+>
+  content
+</fieldset>
+`;

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

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