[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
This commit is contained in:
Kiwi
2019-02-13 16:11:13 +00:00
committed by Wyatt Johnson
parent 68839c721c
commit f4037ce6fb
43 changed files with 1047 additions and 110 deletions
@@ -3,6 +3,7 @@ import React, { StatelessComponent } from "react";
import { DURATION_UNIT, DurationField } from "talk-framework/components";
import {
FieldSet,
FormField,
HorizontalGutter,
InputLabel,
@@ -27,7 +28,7 @@ interface Props {
const ClosingCommentStreamsConfig: StatelessComponent<Props> = ({
disabled,
}) => (
<HorizontalGutter size="oneAndAHalf" container="fieldset">
<HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
<Localized id="configure-general-closingCommentStreams-title">
<Header container="legend">Closing Comment Streams</Header>
</Localized>
@@ -40,13 +41,13 @@ const ClosingCommentStreamsConfig: StatelessComponent<Props> = ({
storys publication
</Typography>
</Localized>
<FormField container="fieldset">
<FormField container={<FieldSet />}>
<Localized id="configure-general-closingCommentStreams-closeCommentsAutomatically">
<InputLabel container="legend">Close Comments Automatically</InputLabel>
</Localized>
<OnOffField name="autoCloseStream" disabled={disabled} />
</FormField>
<FormField container="fieldset">
<FormField container={<FieldSet />}>
<Localized id="configure-general-closingCommentStreams-closeCommentsAfter">
<InputLabel container="legend">Close Comments After</InputLabel>
</Localized>
@@ -9,6 +9,7 @@ import {
validateWholeNumberGreaterThanOrEqual,
} from "talk-framework/lib/validation";
import {
FieldSet,
FormField,
HorizontalGutter,
InputLabel,
@@ -38,7 +39,7 @@ const CommentEditingConfig: StatelessComponent<Props> = ({ disabled }) => (
</Typography>
</Localized>
<FormField container="fieldset">
<FormField container={<FieldSet />}>
<Localized id="configure-general-commentEditing-commentEditTimeFrame">
<InputLabel container="legend">Comment Edit Timeframe</InputLabel>
</Localized>
@@ -8,6 +8,7 @@ import {
validateWholeNumberGreaterThan,
} from "talk-framework/lib/validation";
import {
FieldSet,
FormField,
HorizontalGutter,
InputLabel,
@@ -38,7 +39,7 @@ interface Props {
}
const CommentLengthConfig: StatelessComponent<Props> = ({ disabled }) => (
<HorizontalGutter size="oneAndAHalf" container="fieldset">
<HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
<Localized id="configure-general-commentLength-title">
<Header container="legend">Comment Length</Header>
</Localized>
@@ -4,6 +4,7 @@ import { Field } from "react-final-form";
import { ExternalLink } from "talk-framework/lib/i18n/components";
import {
FieldSet,
FormField,
HorizontalGutter,
InputLabel,
@@ -21,12 +22,12 @@ interface Props {
}
const GuidelinesConfig: StatelessComponent<Props> = ({ disabled }) => (
<HorizontalGutter size="oneAndAHalf" container="fieldset">
<HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
<Localized id="configure-general-guidelines-title">
<Header container="legend">Community Guidelines Summary</Header>
</Localized>
<FormField container="fieldset">
<FormField container={<FieldSet />}>
<Localized id="configure-general-guidelines-showCommunityGuidelines">
<InputLabel container="legend">
Show Community Guidelines Summary
@@ -10,6 +10,7 @@ import {
Validator,
} from "talk-framework/lib/validation";
import {
FieldSet,
FormField,
HorizontalGutter,
InputLabel,
@@ -38,7 +39,7 @@ const AkismetConfig: StatelessComponent<Props> = ({ disabled }) => {
return "";
};
return (
<HorizontalGutter size="oneAndAHalf" container="fieldset">
<HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
<Localized id="configure-moderation-akismet-title">
<Header container="legend">Akismet Spam Detection Filter</Header>
</Localized>
@@ -57,7 +58,7 @@ const AkismetConfig: StatelessComponent<Props> = ({ disabled }) => {
</Typography>
</Localized>
<FormField container="fieldset">
<FormField container={<FieldSet />}>
<Localized id="configure-moderation-akismet-filter">
<InputLabel container="legend">Spam Detection Filter</InputLabel>
</Localized>
@@ -14,6 +14,7 @@ import {
Validator,
} from "talk-framework/lib/validation";
import {
FieldSet,
FormField,
HorizontalGutter,
InputDescription,
@@ -49,7 +50,7 @@ const PerspectiveConfig: StatelessComponent<Props> = ({ disabled }) => {
return "";
};
return (
<HorizontalGutter size="oneAndAHalf" container="fieldset">
<HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
<Localized id="configure-moderation-perspective-title">
<Header container="legend">Perspective Toxic Comment Filter</Header>
</Localized>
@@ -66,7 +67,7 @@ const PerspectiveConfig: StatelessComponent<Props> = ({ disabled }) => {
</Typography>
</Localized>
<FormField container="fieldset">
<FormField container={<FieldSet />}>
<Localized id="configure-moderation-perspective-filter">
<InputLabel container="legend">Spam Detection Filter</InputLabel>
</Localized>
@@ -126,7 +127,7 @@ const PerspectiveConfig: StatelessComponent<Props> = ({ disabled }) => {
</Field>
</FormField>
<FormField container="fieldset">
<FormField container={<FieldSet />}>
<Localized id="configure-moderation-perspective-allowStoreCommentData">
<InputLabel container="legend">
Allow Google to Store Comment Data
@@ -108,7 +108,7 @@ exports[`renders configure general 1`] = `
data-testid="configure-generalContainer"
>
<fieldset
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<legend
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
@@ -116,7 +116,7 @@ exports[`renders configure general 1`] = `
Community Guidelines Summary
</legend>
<fieldset
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
@@ -208,7 +208,7 @@ Markdown can be found
</div>
</fieldset>
<fieldset
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<legend
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
@@ -358,7 +358,7 @@ Edited comments are marked as (Edited) on the comment stream and the
moderation panel.
</p>
<fieldset
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
@@ -417,7 +417,7 @@ moderation panel.
</select>
<span
aria-hidden={true}
className="SelectField-iconWrapper"
className="SelectField-afterWrapper"
>
<span
aria-hidden="true"
@@ -431,7 +431,7 @@ moderation panel.
</fieldset>
</div>
<fieldset
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<legend
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
@@ -444,7 +444,7 @@ moderation panel.
Set comment streams to close after a defined period of time after a storys publication
</p>
<fieldset
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
@@ -499,7 +499,7 @@ moderation panel.
</div>
</fieldset>
<fieldset
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
@@ -558,7 +558,7 @@ moderation panel.
</select>
<span
aria-hidden={true}
className="SelectField-iconWrapper"
className="SelectField-afterWrapper"
>
<span
aria-hidden="true"
@@ -108,7 +108,7 @@ exports[`renders configure moderation 1`] = `
data-testid="configure-moderationContainer"
>
<fieldset
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<legend
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
@@ -131,7 +131,7 @@ the
. If approved by a moderator, the comment will be published.
</p>
<fieldset
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
@@ -225,7 +225,7 @@ comment is toxic, according to Perspective API. By default the treshold is set t
</div>
</div>
<fieldset
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
@@ -370,7 +370,7 @@ improve the API over time
</div>
</fieldset>
<fieldset
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<legend
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
@@ -397,7 +397,7 @@ are placed in the
the comment will be published.
</p>
<fieldset
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"