[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