[CORL-129] Render Community Guidelines (#2191)

* chore: Rename InnerProps to Props

* feat: Render community guidelines

* chore: refactor schema communityGuidelines* settings into it's own type

* test: update snapshots

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

@@ -6,7 +6,7 @@ import { PropTypesOf } from "talk-ui/types";
 
 import styles from "./AriaInfo.css";
 
-interface InnerProps extends AllHTMLAttributes<HTMLElement> {
+interface Props extends AllHTMLAttributes<HTMLElement> {
   /**
    * This prop can be used to add custom classnames.
    * It is handled by the `withStyles `HOC.
@@ -18,7 +18,7 @@ interface InnerProps extends AllHTMLAttributes<HTMLElement> {
   forwardRef?: Ref<HTMLElement>;
 }
 
-const AriaInfo: StatelessComponent<InnerProps> = props => {
+const AriaInfo: StatelessComponent<Props> = props => {
   const { component, className, classes, forwardRef: ref, ...rest } = props;
   const Component: React.ComponentType<
     React.HTMLAttributes<HTMLElement> & React.ClassAttributes<HTMLElement>

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

@@ -19,7 +19,7 @@ import { PropTypesOf } from "talk-ui/types";
 
 import styles from "./BaseButton.css";
 
-interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** If set renders an anchor tag instead */
   anchor?: boolean;
   href?: string;
@@ -52,7 +52,7 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  * A button whose styling is stripped off to a minimum and supports
  * keyboard focus. It is the base for our other buttons.
  */
-const BaseButton: StatelessComponent<InnerProps> = ({
+const BaseButton: StatelessComponent<Props> = ({
   anchor,
   className,
   classes,

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

@@ -11,7 +11,7 @@ import styles from "./Button.css";
 
 // This should extend from BaseButton instead but we can't because of this bug
 // TODO: add bug link.
-interface InnerProps extends Omit<BaseButtonProps, "ref"> {
+interface Props extends Omit<BaseButtonProps, "ref"> {
   /** If set renders an anchor tag instead */
   anchor?: boolean;
   href?: string;
@@ -43,8 +43,8 @@ interface InnerProps extends Omit<BaseButtonProps, "ref"> {
   forwardRef?: Ref<HTMLButtonElement>;
 }
 
-export class Button extends React.Component<InnerProps> {
-  public static defaultProps: Partial<InnerProps> = {
+export class Button extends React.Component<Props> {
+  public static defaultProps: Partial<Props> = {
     size: "regular",
     variant: "regular",
     color: "regular",

src/core/client/ui/components/Button/ButtonIcon.tsx

@@ -7,7 +7,7 @@ import { PropTypesOf } from "talk-ui/types";
 
 import styles from "./ButtonIcon.css";
 
-interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
+interface Props extends HTMLAttributes<HTMLSpanElement> {
   /**
    * This prop can be used to add custom classnames.
    * It is handled by the `withStyles `HOC.
@@ -23,7 +23,7 @@ interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
   forwardRef?: Ref<HTMLSpanElement>;
 }
 
-export const ButtonIcon: StatelessComponent<InnerProps> = props => {
+export const ButtonIcon: StatelessComponent<Props> = props => {
   const { classes, className, forwardRef, ...rest } = props;
   const rootClassName = cn(classes.root, className);
   return <Icon className={rootClassName} {...rest} ref={forwardRef} />;
@@ -31,7 +31,7 @@ export const ButtonIcon: StatelessComponent<InnerProps> = props => {
 
 ButtonIcon.defaultProps = {
   size: "sm",
-} as Partial<InnerProps>;
+} as Partial<Props>;
 
 const enhanced = withForwardRef(withStyles(styles)(ButtonIcon));
 export type ButtonIconProps = PropTypesOf<typeof enhanced>;

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

@@ -8,7 +8,7 @@ import { PropTypesOf } from "talk-ui/types";
 
 import styles from "./Flex.css";
 
-interface InnerProps {
+interface Props {
   /**
    * This prop can be used to add custom classnames.
    * It is handled by the `withStyles `HOC.
@@ -33,7 +33,7 @@ interface InnerProps {
   forwardRef?: Ref<HTMLDivElement>;
 }
 
-const Flex: StatelessComponent<InnerProps> = props => {
+const Flex: StatelessComponent<Props> = props => {
   const {
     classes,
     className,

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

@@ -9,14 +9,14 @@ import HorizontalGutter from "../HorizontalGutter";
 
 import styles from "./FormField.css";
 
-interface InnerProps extends Omit<PropTypesOf<typeof HorizontalGutter>, "ref"> {
+interface Props extends Omit<PropTypesOf<typeof HorizontalGutter>, "ref"> {
   children: ReactNode;
   classes: typeof styles;
   id?: string;
   className?: string;
 }
 
-const FormField: StatelessComponent<InnerProps> = props => {
+const FormField: StatelessComponent<Props> = props => {
   const { classes, className, children, ...rest } = props;
 
   return (

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

@@ -6,7 +6,7 @@ import { PropTypesOf } from "talk-ui/types";
 
 import styles from "./HorizontalGutter.css";
 
-interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
+interface Props extends HTMLAttributes<HTMLSpanElement> {
   /**
    * This prop can be used to add custom classnames.
    * It is handled by the `withStyles `HOC.
@@ -29,7 +29,7 @@ interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
   container?: React.ReactElement<any> | React.ComponentType<any> | string;
 }
 
-const HorizontalGutter: StatelessComponent<InnerProps> = props => {
+const HorizontalGutter: StatelessComponent<Props> = props => {
   const { classes, className, size, forwardRef, container, ...rest } = props;
   const rootClassName = cn(classes.root, className, classes[size!]);
 
@@ -51,7 +51,7 @@ const HorizontalGutter: StatelessComponent<InnerProps> = props => {
 HorizontalGutter.defaultProps = {
   size: "full",
   container: "div",
-} as Partial<InnerProps>;
+} as Partial<Props>;
 
 const enhanced = withForwardRef(withStyles(styles)(HorizontalGutter));
 export type HorizontalGutterProps = PropTypesOf<typeof enhanced>;

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

@@ -6,7 +6,7 @@ import { PropTypesOf } from "talk-ui/types";
 
 import styles from "./Icon.css";
 
-interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
+interface Props extends HTMLAttributes<HTMLSpanElement> {
   /**
    * This prop can be used to add custom classnames.
    * It is handled by the `withStyles `HOC.
@@ -22,7 +22,7 @@ interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
   forwardRef?: Ref<HTMLSpanElement>;
 }
 
-const Icon: StatelessComponent<InnerProps> = props => {
+const Icon: StatelessComponent<Props> = props => {
   const { classes, className, size, forwardRef, ...rest } = props;
   const rootClassName = cn(classes.root, className, classes[size!]);
   return (
@@ -37,7 +37,7 @@ const Icon: StatelessComponent<InnerProps> = props => {
 
 Icon.defaultProps = {
   size: "sm",
-} as Partial<InnerProps>;
+} as Partial<Props>;
 
 const enhanced = withForwardRef(withStyles(styles)(Icon));
 export type IconProps = PropTypesOf<typeof enhanced>;

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

@@ -9,7 +9,7 @@ import UIContext from "../UIContext";
 
 type Breakpoints = keyof typeof theme.breakpoints;
 
-interface InnerProps {
+interface Props {
   /** greater than or equal width. */
   gteWidth?: Breakpoints;
 
@@ -35,7 +35,7 @@ interface InnerProps {
   values?: Partial<MediaQueryMatchers>;
 }
 
-export const MatchMedia: StatelessComponent<InnerProps> = props => {
+export const MatchMedia: StatelessComponent<Props> = props => {
   const { speech, gteWidth, gtWidth, lteWidth, ltWidth, ...rest } = props;
   const mapped = {
     // TODO: Temporarily map newer speech to older aural type until
@@ -55,7 +55,7 @@ export const MatchMedia: StatelessComponent<InnerProps> = props => {
   return <Responsive {...rest} {...mapped} />;
 };
 
-const MatchMediaWithContext: StatelessComponent<InnerProps> = props => (
+const MatchMediaWithContext: StatelessComponent<Props> = props => (
   <UIContext.Consumer>
     {({ mediaQueryValues }) => (
       <MatchMedia {...props} values={mediaQueryValues} />

src/core/client/ui/components/Message/MessageIcon.tsx

@@ -6,7 +6,7 @@ import { withForwardRef, withStyles } from "talk-ui/hocs";
 
 import styles from "./MessageIcon.css";
 
-interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
+interface Props extends HTMLAttributes<HTMLSpanElement> {
   /**
    * This prop can be used to add custom classnames.
    * It is handled by the `withStyles `HOC.
@@ -22,7 +22,7 @@ interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
   forwardRef?: Ref<HTMLSpanElement>;
 }
 
-export const MessageIcon: StatelessComponent<InnerProps> = props => {
+export const MessageIcon: StatelessComponent<Props> = props => {
   const { classes, className, forwardRef, ...rest } = props;
   const rootClassName = cn(classes.root, className);
   return <Icon className={rootClassName} {...rest} ref={forwardRef} />;

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

@@ -8,7 +8,7 @@ import { PropTypesOf } from "talk-ui/types";
 
 import styles from "./RelativeTime.css";
 
-interface InnerProps {
+interface Props {
   date: string;
   live?: boolean;
   classes: typeof styles;
@@ -22,7 +22,7 @@ interface InnerProps {
 const defaultFormatter: Formatter = (value, unit, suffix, timestamp: string) =>
   new Date(timestamp).toISOString();
 
-const RelativeTime: React.StatelessComponent<InnerProps> = props => {
+const RelativeTime: React.StatelessComponent<Props> = props => {
   const { date, classes, live, className, formatter } = props;
   return (
     <UIContext.Consumer>

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

@@ -22,7 +22,7 @@ type Variant =
 // Based on Typography Component of Material UI.
 // https://github.com/mui-org/material-ui/blob/303199d39b42a321d28347d8440d69166f872f27/packages/material-ui/src/Typography/Typography.js
 
-interface InnerProps extends HTMLAttributes<any> {
+interface Props extends HTMLAttributes<any> {
   /**
    * Set the text-align on the component.
    */
@@ -83,7 +83,7 @@ interface InnerProps extends HTMLAttributes<any> {
   forwardRef?: Ref<HTMLElement>;
 }
 
-const Typography: StatelessComponent<InnerProps> = props => {
+const Typography: StatelessComponent<Props> = props => {
   const {
     align,
     classes,
@@ -155,7 +155,7 @@ Typography.defaultProps = {
   noWrap: false,
   paragraph: false,
   variant: "bodyCopy",
-} as Partial<InnerProps>;
+} as Partial<Props>;
 
 const enhanced = withForwardRef(withStyles(styles)(Typography));
 export type TypographyProps = PropTypesOf<typeof enhanced>;