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

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

@@ -3,7 +3,7 @@
   display: inline-block;
 }
 
-.iconWrapper {
+.afterWrapper {
   position: absolute;
   display: inline-flex;
   justify-content: center;
@@ -60,6 +60,6 @@
   width: 100%;
 }
 
-.iconWrapperDisabled {
+.afterWrapperDisabled {
   color: var(--palette-text-secondary);
 }

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

@@ -38,6 +38,8 @@ export interface SelectFieldProps {
   onFocus: EventHandler<FocusEvent<HTMLSelectElement>>;
   onBlur: EventHandler<FocusEvent<HTMLSelectElement>>;
   keyboardFocus: boolean;
+
+  afterWrapper?: React.ReactElement<any>;
 }
 
 const SelectField: StatelessComponent<SelectFieldProps> = props => {
@@ -48,6 +50,7 @@ const SelectField: StatelessComponent<SelectFieldProps> = props => {
     keyboardFocus,
     children,
     disabled,
+    afterWrapper,
     ...rest
   } = props;
 
@@ -56,8 +59,8 @@ const SelectField: StatelessComponent<SelectFieldProps> = props => {
     [classes.keyboardFocus]: keyboardFocus,
   });
 
-  const iconWrapperClassName = cn(classes.iconWrapper, {
-    [classes.iconWrapperDisabled]: disabled,
+  const afterWrapperClassName = cn(classes.afterWrapper, {
+    [classes.afterWrapperDisabled]: disabled,
   });
 
   return (
@@ -65,12 +68,16 @@ const SelectField: StatelessComponent<SelectFieldProps> = props => {
       <select className={selectClassName} disabled={disabled} {...rest}>
         {children}
       </select>
-      <span className={iconWrapperClassName} aria-hidden>
-        <Icon>expand_more</Icon>
+      <span className={afterWrapperClassName} aria-hidden>
+        {afterWrapper}
       </span>
     </span>
   );
 };
 
+SelectField.defaultProps = {
+  afterWrapper: <Icon>expand_more</Icon>,
+};
+
 const enhanced = withStyles(styles)(withKeyboardFocus(SelectField));
 export default enhanced;

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

@@ -17,7 +17,7 @@ exports[`renders correctly 1`] = `
   />
   <span
     aria-hidden={true}
-    className="SelectField-iconWrapper SelectField-iconWrapperDisabled"
+    className="SelectField-afterWrapper SelectField-afterWrapperDisabled"
   >
     <span
       aria-hidden="true"

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

@@ -17,6 +17,7 @@ export { default as Popup } from "./Popup";
 export { default as FormField } from "./FormField";
 export { default as InputDescription } from "./InputDescription";
 export { default as Spinner } from "./Spinner";
+export { default as FieldSet } from "./FieldSet";
 export { default as HorizontalGutter } from "./HorizontalGutter";
 export { default as Icon } from "./Icon";
 export { default as AriaInfo } from "./AriaInfo";